{"version":3,"mappings":"AACA,aCGE,uCAOA,oFASA,8DAMA,4CAMA,qBAKA,+CAMA,8BAMA,gEAMA,qDAQA,mEAOA,qCAKA,gCAKA,gCACE,wGDhFJ,YEAE,oaAwBA,kECxBA,0BAIA,oBAIA,iIAME,0BAIA,mEAKE,oBAIA,gCAKF,iDAIE,yEAME,uBAON,oDHjDF,kBGyDE,SACE,oBC1DF,wHAOE,yBAIA,+BAKA,gDAKE,kCAAqC,2CGrBzC,+HAOE,aACE,qCAIA,mCAMF,6DAKE,gDAQJ,4MD/BA,sFAME,+CENF,gBACE,oDAKE,wBAMF,gMAQE,4DAME,uBAUJ,8CACE,2BACE,yDAQE,gBAAiB,8CAST,0KAahB,iEAIA,kGAKA,4DAIA,qDAIA,mIHrFA,iNAWA,mFAME,6GAQA,6FAQA,2BAIA,yBAIA,4CAKA,8CAKA,8CAKA,8CAKA,+DAMA,uCAKF,kDAMA,qMAYA,0LAaA,uCAKA,sEAGE,uEAQF,gDAKA,kNAQA","sources":["resources/css/app.css","resources/css/colours.css","resources/css/reset.css","resources/css/layout.css","resources/css/admin-tokens.css","resources/css/header.css","resources/css/pagination.css","resources/css/notes.css","resources/css/theme-selector.css"],"sourcesContent":["/* First thing we need to do is declare our cascade layers */\n@layer reset, base, components;\n\n@import url('reset.css');\n@import url('colours.css');\n@import url('layout.css');\n@import url('header.css');\n@import url('notes.css');\n@import url('pagination.css');\n@import url('theme-selector.css');\n@import url('admin-tokens.css');\n","@layer base {\n  :root {\n    color-scheme: light dark;\n\n    --primary-hue: 307;\n    --clr-text: light-dark(\n      oklch(5% 0.1 var(--primary-hue)),\n      oklch(100% 0.1 var(--primary-hue))\n    );\n    --clr-background: light-dark(\n      oklch(100% 0.1 var(--primary-hue)),\n      oklch(15% 0.15 var(--primary-hue))\n    );\n    --clr-border: light-dark(\n      oklch(90% 0.2 var(--primary-hue)),\n      oklch(25% 0.1 var(--primary-hue))\n    );\n\n    /* Adding snow fall colour whilst we are using it */\n    --clr-snow-fall: light-dark(\n      oklch(25% 0.15 var(--primary-hue)),\n      oklch(85% 0.2 var(--primary-hue))\n    );\n  }\n\n  body {\n    background-color: var(--clr-background);\n    color: var(--clr-text);\n  }\n}\n","@layer reset {\n  /* Sourced from https://piccalil.li/blog/a-more-modern-css-reset/ */\n\n  /* Box sizing rules */\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  /* Prevent font size inflation */\n  html {\n    /* stylelint-disable property-no-vendor-prefix */\n    -moz-text-size-adjust: none;\n    -webkit-text-size-adjust: none;\n    /* stylelint-enable property-no-vendor-prefix */\n    text-size-adjust: none;\n  }\n\n  /* Remove default margin in favour of better control in authored CSS */\n  body, h1, h2, h3, h4, p,\n  figure, blockquote, dl, dd {\n    margin-block-end: 0;\n  }\n\n  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n  ul[role='list'],\n  ol[role='list'] {\n    list-style: none;\n  }\n\n  /* Set core body defaults */\n  body {\n    line-height: 1.5;\n  }\n\n  /* Set shorter line heights on headings and interactive elements */\n  h1, h2, h3, h4,\n  button, input, label {\n    line-height: 1.1;\n  }\n\n  /* Balance text wrapping on headings */\n  h1, h2,\n  h3, h4 {\n    text-wrap: balance;\n  }\n\n  /* A elements that don't have a class get default styles */\n  a:not([class]) {\n    text-decoration-skip-ink: auto;\n    color: currentcolor;\n  }\n\n  /* Make images easier to work with */\n  img,\n  picture {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  /* Inherit fonts for inputs and buttons */\n  input, button,\n  textarea, select {\n    font-family: inherit;\n    font-size: inherit;\n  }\n\n  /* Make sure textareas without a rows attribute are not tiny */\n  textarea:not([rows]) {\n    min-height: 10em;\n  }\n\n  /* Anything that has been anchored to should have extra scroll margin */\n  :target {\n    scroll-margin-block: 5ex;\n  }\n\n  /* Disable view transition animations for users who don’t want them */\n  @media (prefers-reduced-motion) {\n    ::view-transition-group(*),\n    ::view-transition-old(*),\n    ::view-transition-new(*) {\n      animation: none !important;\n    }\n  }\n}\n","@layer base {\n  :root {\n    --border-radius: 8px;\n  }\n\n  html {\n    font-size: 125%;\n  }\n\n  body {\n    display: grid;\n    grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n    grid-template-rows: min-content 1fr min-content;\n    padding-inline: 4vw;\n\n    > header {\n      grid-column: 1/-1;\n    }\n\n    > main {\n      grid-column: 1/-1;\n      display: grid;\n      grid-template-columns: subgrid;\n\n      > * {\n        grid-column: 2/3;\n      }\n\n      > .full-bleed {\n        grid-column: 1/-1;\n      }\n    }\n\n    > footer {\n      grid-column: 1/-1;\n      margin-block-start: 2ex;\n\n      search form {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 1ex;\n\n        input {\n          min-width: 0;\n        }\n      }\n    }\n  }\n\n  .h-feed {\n    display: flex;\n    flex-direction: column;\n    gap: 2ex;\n  }\n}\n\n@layer components {\n  .h-entry {\n    pre {\n      padding: 1rem;\n    }\n  }\n}\n\n","@layer components {\n  .token-list-wrapper {\n    margin-block-start: 1em;\n    border: 1px solid var(--clr-border);\n    border-radius: 16px;\n    overflow: auto hidden;\n    background: light-dark(\n      oklch(99% 0.02 var(--primary-hue)),\n      oklch(22% 0.05 var(--primary-hue))\n    );\n  }\n\n  .token-list {\n    width: 100%;\n    min-width: 640px;\n    table-layout: fixed;\n    border-collapse: collapse;\n\n    th,\n    td {\n      text-align: left;\n      padding: 0.9em 1.2em;\n      border-bottom: 1px solid var(--clr-border);\n      vertical-align: middle;\n    }\n\n    th {\n      font-size: 0.8em;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      opacity: 0.7;\n    }\n\n    tr.is-revoked {\n      opacity: 0.6;\n    }\n\n    a {\n      word-break: break-all;\n    }\n\n    th:nth-child(1),\n    td:nth-child(1) {\n      width: 31%;\n    }\n\n    th:nth-child(2),\n    td:nth-child(2) {\n      width: 24%;\n    }\n\n    th:nth-child(3),\n    td:nth-child(3) {\n      width: 15%;\n    }\n\n    th:nth-child(4),\n    td:nth-child(4) {\n      width: 16%;\n    }\n\n    th:nth-child(5),\n    td:nth-child(5) {\n      width: 14%;\n      text-align: right;\n    }\n\n    tr:last-child td {\n      border-bottom: none;\n    }\n  }\n\n  .scope-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.4em;\n  }\n\n  .scope-chip {\n    display: inline-block;\n    padding: 0.2em 0.7em;\n    border-radius: 999px;\n    background: light-dark(\n      oklch(92% 0.05 var(--primary-hue)),\n      oklch(35% 0.08 var(--primary-hue))\n    );\n    font-size: 0.85em;\n    white-space: nowrap;\n  }\n\n  .badge,\n  .token-list button.revoke {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4em;\n    padding: 0.3em 0.8em;\n    border-radius: 999px;\n    font-size: 0.85em;\n    font-weight: 600;\n    line-height: 1.5;\n    white-space: nowrap;\n  }\n\n  .badge {\n    background: transparent;\n    border: 1px solid currentcolor;\n  }\n\n  .badge-active {\n    color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));\n\n    .dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentcolor;\n    }\n  }\n\n  .badge-revoked {\n    color: var(--clr-text);\n    opacity: 0.7;\n  }\n\n  .token-list button.revoke {\n    background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg));\n    color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg));\n    border: 1px solid transparent;\n    cursor: pointer;\n    transition: background-color 150ms ease;\n  }\n\n  .token-list button.revoke:hover {\n    background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg));\n  }\n}\n","@layer components {\n  body > header {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    grid-template-rows: auto auto;\n    align-items: baseline;\n    gap: 1rem;\n\n    a {\n      text-decoration: none;\n    }\n\n    h1 {\n      margin: 0;\n      text-wrap: nowrap;\n    }\n\n    nav {\n      display: flex;\n      flex-direction: row;\n      gap: .5rem;\n\n      @media screen and (width <= 1100px) {\n        grid-row: 2;\n        grid-column: 1 / span 3;\n        flex-wrap: wrap;\n      }\n    }\n  }\n}\n","@layer components {\n  .pagination {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n\n    div {\n      display: flex;\n      flex-direction: row;\n      gap: 1ex;\n    }\n  }\n}\n","@layer components {\n  .note {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--clr-border);\n    border-radius: var(--border-radius);\n    padding: 1ex 2ex;\n\n    .e-content {\n      > p:first-child {\n        margin-block-start: 0;\n      }\n\n      .u-photo {\n        width: 100%;\n        height: auto;\n      }\n    }\n\n    .syndication-links {\n      display: flex;\n      flex-direction: row;\n      gap: 1ex;\n\n      svg {\n        border-radius: 4px;\n        width: auto;\n        height: 1lh;\n      }\n    }\n  }\n\n  .reply-to {\n    font-size: 85%;\n    margin-inline: 2ex;\n    padding-inline: 1ex;\n    border: 1px solid var(--clr-border);\n    border-bottom: none;\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n}\n","@layer components {\n  #theme-selector {\n    button {\n      appearance: none;\n      border: none;\n      background: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    /* This is the element with the [popover] attribute */\n    #theme-selector-dropdown {\n      position: absolute;\n      position-area: block-end span-inline-start;\n      margin: 0;\n      border: 2px solid var(--clr-border);\n      background-color: var(--clr-background);\n      color: var(--clr-text);\n\n      fieldset {\n        border: 0;\n        display: flex;\n        flex-direction: row;\n        gap: 1ch;\n\n        input {\n          display: none;\n        }\n      }\n    }\n\n    /*\n     * This is the element with the [popover] attribute\n     * Here we are styling the open and closing animations\n     */\n    @media (prefers-reduced-motion: no-preference) {\n      #theme-selector-dropdown {\n        &:popover-open {\n          transform: translateY(0) scale(1);\n          opacity: 1;\n\n          /*\n           * Start styles for the opening transition.\n           * Added to :popover-open, but after the opened styles.\n           */\n          @starting-style {\n            transform: translateY(30px) scale(0);\n            opacity: 0;\n          }\n        }\n\n        /*\n         * End styles for the closing transition.\n         */\n        transform: translateY(0) scale(0);\n        opacity: 0;\n\n        /*\n         * Enumerate transitioning properties, including display and overlay.\n         */\n        transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n        transition-duration: 0.5s;\n        transform-origin: top right;\n      }\n    }\n  }\n\n  ::view-transition-group(changing-theme) {\n    animation-duration: 1.25s;\n  }\n\n  ::view-transition-new(changing-theme),\n  ::view-transition-old(changing-theme) {\n    mix-blend-mode: normal;\n  }\n\n  ::view-transition-new(changing-theme) {\n    animation-name: reveal;\n  }\n\n  ::view-transition-old(changing-theme) {\n    animation: none;\n  }\n\n  @keyframes reveal {\n    from {\n      clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n    }\n\n    to {\n      clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n    }\n  }\n}\n"],"names":[]}