/* ========================================================================
   GagaMuller Learning — 02-layout.css
   The page column, the top bar, the header and the account menu.

   Loaded by index.html as sheet 2 of 7. The order is the cascade: a
   later sheet may override an earlier one, so it must not be changed.
   ======================================================================== */
  /* ---------- layout ---------- */
  /* overflow-x:clip, not hidden: clip does not create a scroll container, so
     the sticky table headings inside still resolve normally. It is here so the
     12px the incoming view starts offset by cannot flash a horizontal
     scrollbar on a narrow window. */
  /* The page column, matched to GagaMuller Calendar so the two applications
     line up when somebody has both open: same 1680px cap, same 28px gutters.

     It was 1280, which on any modern monitor left a third of the screen empty
     on either side of tables that were themselves scrolling sideways - the
     register, the People list and the audit trail all had horizontal
     scrollbars while the window had room to spare.

     Still capped rather than edge-to-edge. Every layout inside uses auto-fit
     tracks, so the cards and tables take the extra width on their own; running
     the column to the full viewport would only stretch them further apart on a
     wide screen, and prose is already held to 74ch by .page-head p. */
  .wrap{max-width:1680px; margin:0 auto; padding:0 28px 90px; overflow-x:clip;}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0 10px;}
  .hub-link{display:inline-flex; align-items:center; gap:7px;
    padding:8px 15px 8px 12px; border:1px solid var(--line); background:var(--raised); color:var(--muted);
    border-radius:999px; font:600 12.5px var(--display); text-decoration:none;
    transition:color .15s ease, border-color .15s ease, background .15s ease;}
  .hub-link:hover{color:var(--ink); border-color:color-mix(in srgb, var(--brand) 55%, var(--line)); background:var(--brand-soft);}
  .hub-link svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

  header{padding:34px 0 10px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .brand{display:flex; flex-direction:column; align-items:flex-start;}
  /* One title line: the supplied wordmark artwork, then the product name set
     to match it - "[gm] MyGagaMuller Learning", as the Calendar reads
     "[gm] MyGagaMuller Calendar". "My" and "GagaMuller" run together because
     that is how the artwork is drawn; the only word space on the line is the
     one before the product name, which is what setting it as text gives.

     The two em ratios are measured off the artwork, not eyeballed. In the
     3316x626 file the cap height is 0.4467 of the full height and the baseline
     sits at 0.660 of it, and Outfit's cap height is 0.705em. So for the caps
     to match:      height = 0.705 / 0.4467 = 1.578em
     and to drop the artwork's baseline onto the text baseline:
                    margin-bottom = -0.340 x 1.578 = -0.537em
     Both in em, so the lockup scales from font-size alone. */
  /* The wordmark beside it is vector, so it renders crisp. Text on a dark
     background gets subpixel antialiasing by default, which fattens the strokes
     and reads as a faint glow next to the artwork. Greyscale smoothing puts the
     two back on the same footing. */
  /* inline-block, not block: the lockup is two stacked lines whose right edges
     must line up, so the box has to shrink to the wordmark's width rather than
     stretch to the header's. It also lets the gate centre the whole lockup,
     which "text-align:center" on a full-width block could not do. */
  .brand-title{display:inline-block; color:var(--ink);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-shadow:none;
    /* 560, not 600. Outfit is served as a variable font here, so the weight
       is a dial rather than three fixed steps - a shade lighter closes the
       gap with the wordmark's vector strokes, which carry no antialiasing
       weight of their own. */
    /* 600, and whole pixels.

       Two things were softening this. The weight was 560, an interpolated
       instance of a variable font - the rasteriser hints a NAMED instance
       (600 is SemiBold) far better, and an unhinted stem lands between two
       pixels and is drawn across both. And the size was clamp(25px,3.3vw,34px),
       which is only a whole number at the very top and bottom of its range:
       everywhere in between the title was set at something like 29.7px, so
       every glyph started on a fractional x and was antialiased sideways as
       well as vertically. Fixed steps put it back on the pixel grid.

       font-synthesis:none is insurance rather than a fix: if the Averta face
       is ever missing the weight asked for, a synthesised bold is exactly the
       smeared look this is trying to get rid of, and a real 700 is better. */
    font-family:var(--brand-face); font-weight:600; font-size:40px;
    font-synthesis:none;
    letter-spacing:-.5px; line-height:1.2;}
  @media (max-width:1100px){ .brand-title{font-size:36px;} }
  @media (max-width:860px){  .brand-title{font-size:32px;} }
  @media (max-width:560px){  .brand-title{font-size:28px;} }
  /* Whole pixels here too, and for the same reason as the font size above.
     The wordmark is 3316x626, so at 1.578em of a 34px title it wanted to be
     284.20 x 53.65 - and because it sits inline BEFORE the product name, its
     fractional width started "Learning" on a fractional x, where every
     vertical stem gets antialiased sideways. Pinning the width to the nearest
     whole pixel at each step lands the word on the grid; the height follows
     the aspect ratio and lands within a fifth of a pixel of where 1.578em put
     it, so the cap-height match with the product name is unchanged.
       40px title -> 334 x 63.1      32px -> 267 x 50.4
       36px title -> 301 x 56.8      28px -> 234 x 44.2 */
  /* Block, and no baseline nudge: the wordmark is now the first of two stacked
     lines rather than something sitting inline beside the product name, so its
     own box IS the line. Its height follows the 3316x626 aspect ratio, and the
     artwork fills that box exactly - the emblem touches the top and the bottom
     of the viewBox - so the box edges are the ink edges, which is what the
     measurements below are taken against. */
  .brand-title svg.brand-word{display:block; width:334px; height:auto; color:currentColor;}
  @media (max-width:1100px){ .brand-title svg.brand-word{width:301px;} }
  @media (max-width:860px){  .brand-title svg.brand-word{width:267px;} }
  @media (max-width:560px){  .brand-title svg.brand-word{width:234px;} }
  /* "Learning", on its own line, right edge flush with the wordmark's.
     Both numbers are measured off the supplied lockup rather than chosen: in
     that file the wordmark box is 269px tall, "Learning" has an 87px cap height
     and its baseline sits 352px below the top of the wordmark box. So
        cap height   = 87/269  = .3234 of the wordmark box, and Averta's cap
                       height is .705em, giving font-size .4587 x box height;
        the box is   8.353em wide at this weight, so that is .723em of the title
        baseline     = 1.309 x box height from the top of it.
     Expressed in em of the title, both survive the four size steps above and
     the gate's 26px override without a second set of numbers.

     The violet is the artwork's own (#B681FF) and is deliberately NOT var(--brand):
     that token is #7215F4 in the light theme, and the lockup keeps one colour in
     both. Only the wordmark above answers the theme switch, through --ink. */
  .brand-title > span.product{display:block; text-align:right; line-height:1;
    font-size:.723em; margin-top:-.138em; color:#B681FF;}
  /* The title is set at display size, so it needs more air under it than the
     6px a paragraph gets by default or the two read as one block. */
  .brand .brand-title + .tagline{margin-top:17px;}
  .tagline{color:var(--muted); font-size:15px; margin-top:6px;}

  /* live-data badge — mirrors the Calendar / World Clock / Org Chart pill */
  .datasource{
    display:inline-flex; align-items:center; gap:8px; margin-top:11px;
    font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.2px; color:var(--muted);
    background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  }
  .datasource::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live);}
  .datasource.sample{font-family:var(--display); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent); letter-spacing:.1px;}
  .datasource.sample::before{background:var(--warn); box-shadow:0 0 8px var(--warn);}

  /* signed-in account box (identical pattern to the Calendar) */
  .account{position:relative;}
  .account-btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
    padding:6px 12px 6px 6px; border:1px solid var(--line); background:var(--raised); border-radius:999px;
    color:var(--ink); font:600 13.5px var(--display); transition:border-color .15s ease, background .15s ease;}
  .account-btn:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--line));}
  .account-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  .account-ava{width:30px; height:30px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center;
    background:var(--brand-grad); color:#fff; font:700 11px var(--mono); letter-spacing:.4px;}
  .account-ava img{width:100%; height:100%; object-fit:cover; display:none;}
  .account-name{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .account-chev{width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease;}
  .account-btn[aria-expanded="true"] .account-chev{transform:rotate(180deg);}
  .account-menu{position:absolute; z-index:120; top:calc(100% + 8px); right:0; min-width:262px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px;
    box-shadow:var(--shadow); animation:popIn .14s ease both;}
  .account-email{padding:10px 12px; color:var(--muted); font:500 12.5px var(--mono); word-break:break-all;
    border-bottom:1px solid var(--line); margin-bottom:6px;}
  .account-item{display:block; width:100%; text-align:left; box-sizing:border-box; background:none; border:0; cursor:pointer;
    padding:10px 12px; border-radius:9px; color:var(--ink); font:600 13.5px var(--display); text-decoration:none;
    transition:background .12s ease;}
  .account-item:hover, .account-item:focus-visible{background:var(--brand-soft); outline:none;}
  .account-item.danger{color:var(--bad);}