/* A little depth for the staff app, using Fizzy's own tokens: form panels get the same
/* border and shadow as every other panel, the rich text editor reads as a field, and the
/* top nav sits on a hairline. Public pages (sign in, approvals) stay as flat as Fizzy's. */
@layer components {
  body:not(.public) .panel--centered {
    --panel-border-size: 1px;

    box-shadow: var(--shadow);
  }

  body:not(.public) #header > nav {
    border-block-end: 1px solid var(--color-ink-lighter);
    margin-block-end: var(--block-space-half);
    padding-block-end: var(--block-space-half);
  }

  lexxy-editor.lexxy-content {
    border: 1px solid var(--color-ink-light);
    border-radius: var(--radius-control);
    padding: 0 0.75em 0.5em;

    &:focus-within {
      border-color: var(--color-link);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-link) 22%, transparent);
      outline: none;
    }

    lexxy-toolbar {
      border-block-end: 1px solid var(--color-ink-lighter);
      inline-size: calc(100% + 1.6em);
      margin-inline: -0.8em;
      max-inline-size: none;
      padding-inline: 0.4em;
    }

    .lexxy-editor__content {
      min-block-size: 6lh;
    }
  }

  /* Status labels: a quiet outlined tag with a dot in the colour of its meaning, as Linear
  /* does, with the same corners as every control (Settings > Appearance > Corners). Fizzy's
  /* steps swap in dark mode, so the dots read in both themes. */
  .status-tag {
    --status-dot: var(--color-ink-medium);

    align-items: center;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-control);
    color: var(--color-ink-darker);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    gap: 0.45em;
    line-height: 1;
    padding: 0.3em 0.65em 0.3em 0.55em;
    vertical-align: middle;

    &::before {
      background-color: var(--status-dot);
      block-size: 0.5em;
      border-radius: 50%;
      content: "";
      flex-shrink: 0;
      inline-size: 0.5em;
    }
  }

  .status-tag--positive { --status-dot: oklch(var(--lch-green-medium)); }
  .status-tag--negative { --status-dot: oklch(var(--lch-red-medium)); color: oklch(var(--lch-red-dark)); }
  .status-tag--waiting { --status-dot: oklch(var(--lch-yellow-medium)); }
  .status-tag--progress { --status-dot: var(--color-link); }
  .status-tag--neutral { --status-dot: var(--color-ink-light); color: var(--color-ink-dark); }
}

/* Linear's frame: the nav sits on a slightly deeper ground, and the page is one inset sheet
/* beside it, hairline-bordered with rounded corners. The sheet is a pseudo-element behind the
/* page's column, running the full height of the document so it scrolls with the page and the
/* content never runs past its edges; no markup changes. Below 800px the nav runs across the top and the sheet
/* goes, leaving the plain canvas. */
@layer components {
  body.with-sidenav {
    background-color: color-mix(in oklch, var(--color-ink-lightest) 70%, var(--color-canvas));

    .sidenav {
      background-color: transparent;
      border-inline-end: 0;
    }

    @media (min-width: 800px) {
      min-block-size: 100dvh;
      position: relative;

      &::before {
        background-color: var(--color-canvas);
        border: 1px solid var(--color-ink-lighter);
        border-radius: calc(0.75rem * var(--radius-scale, 1));
        box-shadow: 0 1px 2px oklch(var(--lch-black) / 3%);
        content: "";
        inset: 0.5rem 0.5rem 0.5rem var(--sidenav-width);
        pointer-events: none;
        position: absolute;
        z-index: -1;
      }

      /* Keep the page clear of the sheet's edge. */
      #header {
        padding-block-start: calc(0.5rem + var(--block-space));
        padding-inline: calc(var(--main-padding) + 0.25rem) calc(var(--main-padding) + 0.75rem);
      }

      #main {
        padding-inline: calc(var(--main-padding) + 0.25rem) calc(var(--main-padding) + 0.75rem);
      }
    }

    /* On the sheet, panels are flat (their hairline is enough); what floats above the page
    /* (menus, dialogs) keeps its depth. */
    #main {
      --shadow: 0 1px 2px oklch(var(--lch-black) / 3%);

      :is(dialog, .popup, [popover]) {
        --shadow: var(--shadow-popover);
      }
    }

    @media (max-width: 799px) {
      background-color: var(--color-canvas);
    }
  }

  html[data-theme="dark"] body.with-sidenav {
    background-color: oklch(13.5% 0.004 275);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) body.with-sidenav {
      background-color: oklch(13.5% 0.004 275);
    }
  }
}

/* The ref prefix field on Settings > Names is a few characters wide. */
@layer components {
  .names-prefix {
    flex: 0 0 5em;
  }
}

@layer components {
  /* An index page's filter and New button share one row. */
  .index-toolbar {
    inline-size: 100%;

    .index-toolbar__filters {
      flex: 1 1 auto;
      min-inline-size: 0;

      /* The pills keep the same space between them as the view toggle and New button. */
      .filters {
        gap: var(--inline-space);
        justify-content: flex-start;
      }
    }

    /* The New button matches the pills and the view toggle in height. */
    .btn--labelled {
      block-size: 1.9rem;
      font-size: var(--text-small);
      padding-block: 0;
    }

    /* Filters are small controls with the same corners as every other control: a hairline, the
    /* current choice, a caret. */
    .quick-filter > button {
      --input-background: var(--color-canvas);
      --input-border-color: var(--color-ink-lighter);
      --input-padding: 0 1.75em 0 0.9em;

      block-size: 1.9rem;
      border-radius: var(--radius-control);
      box-shadow: 0 1px 1px oklch(var(--lch-black) / 4%);
      color: var(--color-ink-darker);
      font-size: var(--text-x-small);
      font-weight: 500;

      &:hover { background-color: var(--color-ink-lightest); }
    }
  }
}

/* "Add a note", "Log time", "Add a todo" and the like: a button that opens a form. Space
/* below the button, and between it and the form once open. */
@layer components {
  details:has(> summary.btn) {
    margin-block-end: var(--block-space-half);
  }

  details[open] > summary.btn {
    margin-block-end: var(--block-space);
  }

  /* In a row of buttons (Set away beside Switch off) it sits on the row's centre line while
  /* closed: space below would lift it above its neighbours. */
  .align-center > details:has(> summary.btn):not([open]) {
    margin-block-end: 0;
  }
}