/* =====================================================================
   chassis/looking-glass/looking-glass.css — the fleet's one dress (R145)

   Humpty's Wall is the standard: cream paper, #1A2849 ink (the brand
   navy, which settles July's two-navies debt), engraved small-caps
   labels, Fell headings, Garamond words, sans numbers and buttons. Sizes
   are R86's floor: nothing smaller than the Commissary's.

   Light is the default. Dark is a palette of its own under
   [data-theme="dark"], never the day inverted. Every colour a rider
   needs is a token here; a rider that writes a hex of its own for a
   ground, a line or a word will look wrong by night, which is the point
   of the tokens. House colours are never written by a rider at all:
   they arrive as --house, --house-ink and --house-wash from the script.

   The page keeps only its own rules in its own stylesheet.
   ===================================================================== */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/lg/fonts/eb-garamond-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/lg/fonts/eb-garamond-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/lg/fonts/eb-garamond-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(/lg/fonts/eb-garamond-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/lg/fonts/eb-garamond-latin-400-italic.woff2) format('woff2');}
@font-face{font-family:'IM Fell English';font-style:normal;font-weight:400;font-display:swap;src:url(/lg/fonts/im-fell-english-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IM Fell English';font-style:italic;font-weight:400;font-display:swap;src:url(/lg/fonts/im-fell-english-latin-400-italic.woff2) format('woff2');}
@font-face{font-family:'IM Fell English SC';font-style:normal;font-weight:400;font-display:swap;src:url(/lg/fonts/im-fell-english-sc-latin-400-normal.woff2) format('woff2');}

/* ------------------------------------------------------------ tokens: day */
:root{
  color-scheme:light;
  --cream:#FBF6E4; --paper:#FFFDF6; --panel2:#F4EEDB; --ink:#1A2849; --muted:#6A6455; --line:#E2D9BF;
  --gold:#D9A521; --gold-ink:#14110F; --danger:#C81E3A; --ok:#1E8A4C; --amber:#B07A00; --info:#1F5FA8;
  --field:#FFFFFF; --warnbg:#FFF6DB; --badbg:#FDE7EA; --okbg:#DDF1E4; --infobg:#E4ECF7;
  --shadow:rgba(26,40,73,.06); --shadow2:rgba(26,40,73,.18); --scrim:rgba(26,40,73,.45);
  --bar:#F4EEDB; --wash:var(--cream); --r:18px;
  --magenta:#D6006F; --magenta2:#B8005F;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --fell:'IM Fell English',Georgia,serif; --fellsc:'IM Fell English SC',Georgia,serif;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --fs:20px; --fs-small:16px; --fs-tiny:13px;
  /* the finer tokens the Roses-era riders brought with them (R145 folded roses.css into the dress) */
  --gold-text:#7A5A06; --gold-tint:#F8EBBE; --line2:#857C55; --faint:#6B6752; --placeholder:#6B6752; --on-ok:#FFFFFF;
  --cell:#FFFDF7; --cell-line:#CFC39A; --grey-fill:#E4DCC2; --red-fill:#C81E3A; --amber-fill:#D9A521; --green-fill:#2E8B3D;
  --ink-rgb:26,40,73; --well-rgb:255,253,247; --gold-rgb:217,165,33; --ok-rgb:30,112,48; --red-rgb:176,24,47; --info-rgb:14,101,120;
}
/* ---------------------------------------------------------- tokens: night */
:root[data-theme="dark"]{
  color-scheme:dark;
  --cream:#10182E; --paper:#18223D; --panel2:#202B4A; --ink:#F3ECD8; --muted:#B7AF98; --line:#2F3B62;
  --gold:#E0B03A; --gold-ink:#14110F; --danger:#F0677F; --ok:#5CCB86; --amber:#E7B53A; --info:#8DB8F0;
  --field:#0F1629; --warnbg:#3A3216; --badbg:#3D1822; --okbg:#15301F; --infobg:#18284A;
  --shadow:rgba(0,0,0,.30); --shadow2:rgba(0,0,0,.45); --scrim:rgba(4,8,20,.65);
  --bar:#141D36; --magenta:#FF4FA3; --magenta2:#FF7ABB;
  --gold-text:#E0B03A; --gold-tint:#2A2410; --line2:#3A4776; --faint:#8A8470; --placeholder:#8A8470; --on-ok:#0C2404;
  --cell:#101A35; --cell-line:#23305A; --grey-fill:#26314F; --red-fill:#E5405E; --amber-fill:#D9A521; --green-fill:#54E636;
  --ink-rgb:243,236,216; --well-rgb:10,15,30; --gold-rgb:224,176,58; --ok-rgb:92,203,134; --red-rgb:240,103,127; --info-rgb:141,184,240;
}
:root[data-house-wash]{--wash:var(--house-wash,var(--cream)); --bar:var(--house-bar,var(--panel2));}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--serif);background:var(--wash);color:var(--ink);font-size:var(--fs);line-height:1.45;min-height:100vh;
  transition:background .25s ease,color .25s ease;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:var(--sans);font-size:16px;color:inherit;}
a{color:inherit;}
[hidden]{display:none !important;}
::selection{background:var(--gold);color:var(--gold-ink);}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* ------------------------------------------------------------- the bar */
.lg-bar{position:sticky;top:0;z-index:40;background:var(--bar);border-bottom:3px solid var(--house,var(--ink));
  display:flex;align-items:center;gap:12px;padding:8px 14px;min-height:62px;transition:background .25s ease,border-color .25s ease;}
.lg-logo{flex:0 0 auto;display:flex;align-items:center;text-decoration:none;border-radius:10px;padding:2px;}
.lg-logo img{display:block;height:46px;width:auto;}
.lg-logo .lg-mono{display:none;height:44px;}
:root:not([data-theme="dark"]) .lg-night, :root[data-theme="dark"] .lg-day{display:none !important;}
.lg-title{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:0 1 auto;padding-left:12px;border-left:1px solid var(--line);}
.lg-title.lg-link{cursor:pointer;}
.lg-app{font-family:var(--fell);font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-sub{font-family:var(--fellsc);font-size:14px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-slot{flex:1 1 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;min-width:0;}
.lg-slot:empty{flex:1 1 auto;}
.lg-tools{flex:0 0 auto;display:flex;gap:6px;align-items:center;}
.lg-break{display:none;}
.lg-house{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:2px solid var(--house,var(--line));border-radius:999px;
  padding:6px 13px;font-family:var(--sans);font-size:15px;font-weight:800;max-width:240px;}
.lg-house i{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1.5px var(--paper),0 0 0 2.5px var(--line);}
.lg-house b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-bar .lg-who{background:var(--paper);border:2px solid var(--ink);color:var(--ink);border-radius:999px;font-family:var(--sans);font-size:15px;font-weight:800;
  padding:7px 14px;min-height:40px;cursor:default;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
.lg-who.lg-link{cursor:pointer;}
.lg-net{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted);padding:0 4px;}
.lg-net i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:0 0 auto;}
.lg-net[data-s="offline"] i,.lg-net[data-s="failed"] i{background:var(--danger);}
.lg-net[data-s="saving"] i{background:var(--amber);animation:lg-pulse 1s ease-in-out infinite;}
.lg-net[data-s="offline"],.lg-net[data-s="failed"]{color:var(--danger);}
.lg-net[data-s="online"] span,.lg-net[data-s="saved"] span{display:none;}
@keyframes lg-pulse{50%{opacity:.35;}}
.lg-bar .lg-tool{background:transparent;border:1.5px solid transparent;color:var(--ink);border-radius:999px;min-width:44px;min-height:44px;padding:0 10px;
  font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.06em;cursor:pointer;}
.lg-bar .lg-tool:hover{border-color:var(--line);background:var(--paper);}
.lg-theme{font-size:20px;letter-spacing:0;}
.lg-help{font-family:var(--fell);font-size:22px;border-color:var(--line);}

@media(min-width:721px) and (max-width:1100px){
  /* a tablet (800 in portrait, 1024 in landscape): the bar keeps the wordmark and stays put, but takes the phone's
     second row for the house, who is signed in and the page's chips, so the app's name and the person are never cut short (R99) */
  .lg-bar{flex-wrap:wrap;}
  .lg-logo{order:1;} .lg-title{order:2;flex:1 1 0;} .lg-tools{order:3;} .lg-break{display:block;order:4;flex-basis:100%;height:0;}
  .lg-house{order:5;} .lg-bar .lg-who{order:6;max-width:none;} .lg-slot{order:7;justify-content:flex-start;}
  .lg-slot:empty{flex:0 0 0;}
  .lg-bar:has(.lg-slot:empty):has(.lg-who[hidden]):has(.lg-house[hidden]) .lg-break{display:none;}
}
@media(max-width:720px){
  /* a phone: the bar scrolls away with the page (the tabs stay), and its second row holds the house, who, and the page's chips */
  .lg-bar{gap:8px;padding:6px 10px;min-height:56px;flex-wrap:wrap;position:relative;}
  .lg-logo{order:1;} .lg-title{order:2;min-width:110px;} .lg-tools{order:3;} .lg-break{display:block;order:4;flex-basis:100%;height:0;}
  .lg-house{order:5;} .lg-who{order:6;}
  .lg-logo .lg-word{display:none !important;}
  :root:not([data-theme="dark"]) .lg-logo .lg-mono.lg-day, :root[data-theme="dark"] .lg-logo .lg-mono.lg-night{display:block;}
  .lg-title{padding-left:8px;flex:1 1 0;} .lg-sub{font-size:12px;}
  /* a long name takes two lines on a phone rather than being cut short */
  .lg-app{font-size:21px;white-space:normal;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .lg-slot{order:7;flex:1 1 auto;justify-content:flex-start;}
  .lg-slot:empty{display:none;}
  .lg-house{max-width:150px;padding:5px 10px;font-size:13px;}
  .lg-bar .lg-who{max-width:130px;font-size:13px;padding:6px 10px;}
  .lg-net span{display:none;}
}
@media print{.lg-bar,.lg-toast,.lg-sheet-bg{display:none !important;} body{background:#fff;color:#000;}}

/* ------------------------------------------------------- help and toast */
.lg-sheet-bg{position:fixed;inset:0;background:var(--scrim);z-index:90;display:flex;align-items:flex-end;justify-content:center;}
.lg-sheet{background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;max-width:640px;width:100%;max-height:92vh;overflow:auto;padding:22px 22px 28px;box-shadow:0 -10px 40px var(--shadow2);}
.lg-sheet h3{font-family:var(--fell);font-weight:400;font-size:28px;margin:0 0 6px;}
.lg-sheet h4{font-family:var(--fellsc);font-weight:400;font-size:17px;letter-spacing:.1em;color:var(--muted);margin:16px 0 4px;}
.lg-sheet p{margin:0 0 6px;font-size:19px;}
.lg-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px;}
@media(min-width:760px){.lg-sheet-bg{align-items:center;}.lg-sheet{border-radius:22px;}}
.lg-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:700;font-size:16px;
  padding:14px 22px;border-radius:14px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:95;max-width:92vw;text-align:center;}
.lg-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.lg-toast.bad{background:var(--danger);color:#fff;}

/* ============================================================ the kit
   The Wall's components, lifted so every rider has them. A rider may
   add to them; it should not redraw them. */
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 120px;}
.wrap.wide{max-width:1320px;}
h1.screen{font-family:var(--fell);font-weight:400;font-size:32px;margin:4px 0 2px;}
p.sub{opacity:.85;margin:0 0 16px;font-size:18px;}
.cat-head{font-family:var(--fellsc);font-size:18px;letter-spacing:.14em;opacity:.85;border-bottom:2px solid currentColor;margin:22px 0 12px;padding-bottom:3px;}
.lbl-sc{font-family:var(--fellsc);font-size:16px;letter-spacing:.1em;color:var(--muted);display:block;margin:0 0 8px;}
.note{font-size:16px;color:var(--muted);}
.fineprint{font-family:var(--sans);font-size:12px;color:var(--muted);margin:36px 0 0;opacity:.9;}
.empty{text-align:center;color:var(--muted);font-style:italic;padding:34px 16px;font-size:20px;}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:0 4px 14px var(--shadow);}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.card-h h2{font-family:var(--fell);font-weight:400;font-size:22px;margin:0;}
.card-h .hint{font-size:14px;color:var(--muted);font-family:var(--sans);}
.card-b{padding:14px 16px;}

.banner{border-radius:var(--r);padding:12px 16px;margin-bottom:12px;font-size:17px;border:2px solid var(--amber);background:var(--warnbg);}
.banner.red{border-color:var(--danger);background:var(--badbg);}
.banner.ok{border-color:var(--ok);background:var(--okbg);}
.banner.info{border-color:var(--info);background:var(--infobg);}

.tabs{position:sticky;top:var(--lg-barh,62px);z-index:30;background:var(--panel2);background:color-mix(in srgb,var(--ink) 8%,var(--wash));display:flex;gap:8px;overflow-x:auto;
  padding:10px 16px;border-bottom:1px solid var(--line);}
.tab{flex:0 0 auto;background:var(--paper);color:var(--muted);border:2px solid var(--line);border-radius:999px;font-family:var(--sans);
  padding:10px 18px;font-size:16px;font-weight:700;cursor:pointer;position:relative;white-space:nowrap;text-decoration:none;}
.tab.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.tab .cb,.chip .cb{position:absolute;top:-7px;right:-7px;background:var(--danger);color:#fff;border-radius:999px;min-width:22px;height:22px;padding:0 5px;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}

.chip{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:999px;font-family:var(--sans);position:relative;
  padding:10px 15px;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:none;}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);} .chip.off .dot{background:var(--danger);} .chip.sleep .dot{background:var(--amber);}

.btn{background:var(--ink);color:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:13px 22px;font-family:var(--sans);font-size:17px;font-weight:800;
  cursor:pointer;min-height:50px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn.go{font-size:20px;padding:16px 30px;min-height:60px;width:100%;}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line);}
.btn.small{font-size:14px;padding:8px 14px;min-height:40px;border-radius:11px;}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);}
.btn.red{background:var(--paper);color:var(--danger);border-color:var(--danger);}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn.magenta{background:var(--magenta);border-color:var(--magenta);color:#fff;}
.btn.magenta:hover{background:var(--magenta2);border-color:var(--magenta2);}
.btn.house{background:var(--house,var(--ink));border-color:var(--house,var(--ink));color:var(--house-ink,var(--cream));}
.btn:disabled{opacity:.45;cursor:default;}
button.done{background:var(--ok) !important;border-color:var(--ok) !important;color:#fff !important;}
button.fail{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important;}

.opts{display:flex;flex-wrap:wrap;gap:10px;}
.opt{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:12px 16px;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);
  cursor:pointer;min-height:48px;display:flex;align-items:center;gap:9px;user-select:none;}
.opt .box{width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex:0 0 auto;}
.opt.round .box{border-radius:50%;}
.opt.on{background:var(--ink);color:var(--cream);border-color:var(--ink);} .opt.on .box{border-color:var(--cream);background:var(--cream);color:var(--ink);}

textarea,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=email],input[type=tel],input[type=search],input[type=url],select{
  width:100%;border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--field);color:var(--ink);}
textarea{font-family:var(--serif);font-size:20px;line-height:1.45;min-height:120px;resize:vertical;}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--ink);}
label.f{display:block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .spacer{flex:1;}

table.t{width:100%;border-collapse:collapse;font-size:17px;}
table.t td,table.t th{padding:9px 10px;border-bottom:1px dashed var(--line);text-align:left;vertical-align:top;}
table.t th{font-family:var(--fellsc);font-weight:400;letter-spacing:.08em;color:var(--muted);font-size:15px;}
table.t td.num,.num{font-family:var(--sans);font-variant-numeric:tabular-nums;}
table.t td.num{text-align:right;}

.pill{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;border-radius:999px;padding:3px 10px;color:var(--ink);background:var(--panel2);}
.pill.gold{background:var(--warnbg);color:var(--amber);} .pill.green{background:var(--okbg);color:var(--ok);} .pill.red{background:var(--badbg);color:var(--danger);} .pill.blue{background:var(--infobg);color:var(--info);}
.pill.house{background:var(--house,var(--panel2));color:var(--house-ink,var(--ink));}

.sheet-bg{position:fixed;inset:0;background:var(--scrim);z-index:60;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;max-width:720px;width:100%;max-height:92vh;overflow:auto;padding:20px 20px 28px;box-shadow:0 -10px 40px var(--shadow2);}
.sheet h3{font-family:var(--fell);font-weight:400;font-size:26px;margin:0 0 8px;}
@media(min-width:760px){.sheet-bg{align-items:center;}.sheet{border-radius:22px;}}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:700;
  padding:14px 22px;border-radius:14px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:80;max-width:92vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.bad{background:var(--danger);color:#fff;}

/* a house, marked: a left rule, a dot, a swatch */
.house-rule{border-left:6px solid var(--h,var(--house,var(--ink)));}
.house-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--h,var(--house,var(--ink)));flex:0 0 auto;vertical-align:middle;}

@media(max-width:720px){
  body{font-size:19px;}
  .tabs{top:0;}   /* the bar scrolls away on a phone; the tabs keep to the top */
  .grid2,.grid3{grid-template-columns:1fr;}
  .chip{padding:9px 12px;}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}