/* =========================================================================
   Site chrome: the topbar plus the :root color and font variables.
   Loaded on every page, including ones that bring their own page styles
   (e.g. the calendar). Does NOT style body/.btn/input/etc.

   Every page styles itself with these variables (--ink, --paper, --rule,
   --stamp, ...), so the palette is changed here and nowhere else.
   ========================================================================= */

:root{
    /* Surfaces (light, neutral grays) */
    --paper:#f4f6f8;        /* page background        */
    --paper-dark:#e4e7eb;   /* table zebra / fills    */
    --paper-deep:#cbd2d9;   /* deeper fill / hairline */
    --surface:#ffffff;      /* cards                  */

    /* Text (slate grays) */
    --ink:#1f2933;          /* primary text / headings */
    --ink-soft:#3e4c59;     /* secondary text          */
    --ink-faint:#7b8794;    /* muted labels / captions */

    /* Lines */
    --rule:#d2d9e0;         /* hairline borders        */
    --border:#d2d9e0;

    /* Accent + status */
    --accent:#2563eb;       /* primary action / links / active nav */
    --accent-light:#e8effe;
    --stamp:#b4412f;        /* danger / errors (kept red for semantics) */
    --danger:#b4412f;
    --danger-light:#fbe9e7;
    --success:#1f7a4d;
    --warning:#b9770a;

    /* Type */
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

/* ---- Topbar ----------------------------------------------------------- */
.site-topbar{
    background:#1f2933;color:#e4e7eb;padding:0;display:block;
    font-family:var(--font-body);margin:0 0 24px;
    border-bottom:1px solid #0f172a;position:relative;
    box-shadow:0 1px 3px rgba(15,23,42,.18);
}
.site-topbar .mast{
    display:flex;align-items:baseline;gap:12px;
    padding:12px 22px 10px;border-bottom:1px solid rgba(255,255,255,.08);
}
.site-topbar .mast .brand{
    font-size:1.12rem;font-weight:700;letter-spacing:.01em;
    color:#fff;margin:0;
}
.site-topbar .mast .sub{
    font-size:.72rem;letter-spacing:.04em;color:#9aa5b1;font-weight:500;
}
.site-topbar .row{display:flex;align-items:stretch;flex-wrap:wrap;padding:0 12px}
.site-topbar nav{display:flex;flex:1;flex-wrap:wrap}
.site-topbar nav a{
    color:#cbd2d9;padding:11px 14px;font-size:.82rem;font-weight:500;
    letter-spacing:.01em;text-decoration:none;border-bottom:2px solid transparent;
    transition:color .12s,border-color .12s,background .12s;
}
.site-topbar nav a:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none}
.site-topbar nav a.active{color:#fff;border-bottom-color:var(--accent)}
.site-topbar .user{
    font-size:.78rem;color:#9aa5b1;margin-left:auto;
    padding:11px 10px;align-self:center;display:flex;align-items:center;gap:12px;
}
.site-topbar .user a{
    color:#cbd2d9;text-decoration:none;padding:5px 12px;border-radius:6px;
    border:1px solid rgba(255,255,255,.16);font-weight:500;font-size:.76rem;
}
.site-topbar .user a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---- Phones: one swipeable nav row instead of a wall of wrapped links -- */
@media (max-width:720px){
    .site-topbar{margin-bottom:16px}
    .site-topbar .mast{padding:10px 14px 8px}
    .site-topbar .row{flex-direction:column;padding:0;min-width:0}
    .site-topbar .user{order:1;margin-left:0;padding:6px 14px;justify-content:space-between;align-self:stretch;
        border-bottom:1px solid rgba(255,255,255,.08)}
    .site-topbar nav{order:2;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        min-width:0;max-width:100%;
        scrollbar-width:none}
    .site-topbar nav::-webkit-scrollbar{display:none}
    .site-topbar nav a{flex:none;padding:12px 13px}
}