/*
  The frame: the top bar, the sidebar, and the sheet the work sits on. Every screen on the admin
  host, and a member's pages on the public site (MemberLayout), so the two read as one app. Every
  colour is a token from ground.css; the sizes below are the frame's own. The admin host's search
  dialog is in its palette.css.

  The bar and the sidebar are the frame's tone, a step darker than the page; the work is a sheet
  laid over them. Both are opaque: text sliding under a see-through bar has no contrast anyone can
  measure.
*/

:root {
    --t-name: clamp(1.6rem, 1.25rem + 1vw, 2.15rem);  /* a page's heading */
    --ctl-h: 36px;      /* every control in a row */
    --bar-h: 56px;      /* the sticky top bar, which sticky table headers clear */
    --side-w: 216px;    /* the sidebar, above 900px */
}

/* The frame's tone: the page itself is the sheet, which holds the gutter. */
body:has(.frame) { background: var(--chrome); }

/* ------------------------------------------------------------- top bar */

.top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    height: var(--bar-h);
    padding: 0 var(--gutter) 0 20px;
    background: var(--chrome);
}

.admin-tag { padding: 2px 8px; border: 1px solid var(--line-hi); border-radius: 999px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-soft); }

.shortcuts { display: flex; gap: 4px; }

.shortcuts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ctl-h);
    padding: 0 10px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.shortcuts a:hover { color: var(--ink); background: var(--tint); }

/* NavLink marks the screen you are on. Ink, never teal. */
.shortcuts a.active {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--ink);
    border-radius: 0;
}

/* The standing nudge: how many products you have not decided. */
.count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--t-micro);
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Not on the screen it counts: the frame is static, so on the queue it goes stale beside the
   page's own tally. */
.active .count { display: none; }

.top-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.icon-btn:hover { color: var(--ink); border-color: var(--ink-soft); }

.menu-btn { display: none; }

.me {
    width: var(--ctl-h);
    height: var(--ctl-h);
    border-radius: 999px;
    border: 1px solid var(--line-hi);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--t-micro);
    font-weight: 650;
    cursor: pointer;
}

/* Off-screen until focused, which is the only way it is ever reached. */
.skip {
    position: absolute;
    left: -9999px;
    padding: 0.7rem 1rem;
    background: var(--card);
    border: 1.5px solid var(--ink);
    border-radius: var(--r-sm);
    color: var(--ink);
    z-index: 40;
}

.skip:focus { left: 1rem; top: 0.5rem; }

/* ------------------------------------------------------------- menus
   The account menu. Native popovers, so no circuit; the one thing that floats gets the shadow. */

.pop {
    margin: 0;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--pop);
}

.pop .who { margin-bottom: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: var(--t-small); }

.pop .soft { color: var(--ink-soft); }

.pop button, .pop a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pop button:hover, .pop a:hover { background: var(--tint); }

#account { position: fixed; inset: calc(var(--bar-h) - 4px) var(--gutter) auto auto; }

/* ------------------------------------------------------------- sidebar */

.frame { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.frame.bare { grid-template-columns: minmax(0, 1fr); }

/* A column above 900px, a popover below. inset, not top: the popover's own inset: 0 would win. */
.side:not(:popover-open) { display: block; }

.side {
    position: sticky;
    inset: var(--bar-h) auto auto auto;
    width: auto;
    height: calc(100vh - var(--bar-h));
    margin: 0;
    padding: 12px 12px 32px;
    overflow: auto;
    border: 0;
    background: var(--chrome);
    color: var(--ink);
}

.nav-g { margin: 20px 10px 6px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-soft); }
.nav-g:first-child { margin-top: 4px; }

.nav-i {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--ctl-h);
    padding: 0 10px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: 0.9rem;
    text-decoration: none;
    /* One line, with a four-digit count beside "Review queue". */
    white-space: nowrap;
}

.nav-i svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nav-i .count { margin-left: auto; background: var(--line-hi); color: var(--ink); }
.nav-i:hover { background: var(--tint); color: var(--ink); }

/* The current screen is a tab cut from the sheet it opens. */
.nav-i.active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 650;
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px var(--tint);
}

/* ------------------------------------------------------------- the sheet
   Laid on the frame and ruled like a cutting mat along its top: a fine line every 32px, a stronger
   one every fifth, and a ruler's ticks on its edge. The ruling fades out before the tables, so it
   never reads as a form to fill in. Today brings its own ruled panel instead (panel.css). */

.sheet {
    --sheet-top: 36px;
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: calc(100vh - var(--bar-h));
    padding: var(--sheet-top) var(--gutter) 72px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-width: 1px 0 0 1px;
    border-top-left-radius: 20px;
}

/* The widest anything on the sheet runs. No specificity, so a paragraph's own narrower measure
   (.muted, .lead, .footnote) still wins; as `.sheet > *` it overrode them and every note ran the
   full width. */
:where(.sheet > *) { max-width: var(--maxw); }

.sheet::before, .sheet::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-top-left-radius: inherit;
    pointer-events: none;
}

.sheet::before {
    inset: 0 0 auto 0;
    height: 420px;
    background-image:
        linear-gradient(var(--rule-hi) 1px, transparent 1px), linear-gradient(90deg, var(--rule-hi) 1px, transparent 1px),
        linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 75% 100% at 88% 0%, #000 15%, transparent 80%);
    mask-image: radial-gradient(ellipse 75% 100% at 88% 0%, #000 15%, transparent 80%);
}

.sheet::after {
    inset: 0 0 auto 0;
    height: 9px;
    background-image: linear-gradient(90deg, var(--line-hi) 1px, transparent 1px), linear-gradient(90deg, var(--line-hi) 1px, transparent 1px);
    background-size: 160px 9px, 32px 4px;
    background-repeat: repeat-x;
}

.sheet:has(> .ruled)::before { display: none; }

/* Every page but Today: a plain heading and one line on what it answers, so a dense page keeps
   its height for the table. The heading's face is stated here, so both hosts draw it the same. */
.head { margin-bottom: 24px; }
.head h1 { margin-bottom: 0; font-size: var(--t-name); letter-spacing: -0.015em; line-height: 1.15; }
.head > p { margin: 8px 0 0; max-width: 70ch; color: var(--ink-soft); text-wrap: pretty; }

/* How we count: every explanation on a page, folded, at its foot. */
.count-how {
    margin-top: 44px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: var(--t-small);
    color: var(--ink-soft);
}

.count-how summary { width: fit-content; cursor: pointer; font-weight: 600; color: var(--ink); }
.count-how ul { margin: 10px 0 0; padding-left: 18px; max-width: 90ch; }
.count-how li + li { margin-top: 6px; }

/* ------------------------------------------------------------- narrower */

@media (max-width: 1100px) {
    .shortcuts a.ext { display: none; }
}

/* A phone: the sidebar becomes a popover behind the menu button, and the shortcuts take a row of
   their own under the bar, every one in sight. Behind the menu they would be found less often
   (NN/g), which is why the public site's header does the same. The bar keeps both rows when it
   sticks, so --bar-h grows and whatever clears the bar clears the row too. */
@media (max-width: 900px) {
    :root { --bar-h: 100px; }

    .frame { grid-template-columns: minmax(0, 1fr); }
    .side:not(:popover-open) { display: none; }
    .side:popover-open {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 86vw);
        height: 100vh;
        border-right: 1px solid var(--line);
        box-shadow: var(--pop);
    }
    .sheet { --sheet-top: 28px; border-radius: 0; border-left-width: 0; }
    .menu-btn { display: inline-grid; }
    .top .brand-name { display: none; }

    /* Two rows of 56px and 44px: the controls, then the shortcuts. Tall enough to tap; the active
       rule sits on the row's edge like a tab. */
    .top { flex-wrap: wrap; align-content: flex-start; row-gap: 10px; padding-top: 10px; }
    .shortcuts { order: 3; flex-basis: 100%; height: 44px; overflow-x: auto; scrollbar-width: none; }
    .shortcuts a { min-height: 44px; }

    /* Under the bar's first row, where the button that opens it is. */
    #account { top: 52px; }
}