/* CircleThrice R4 Nav explorations — shared foundation (Modern Mystic) */
:root {
  --paper:#f6f9fc; --ink:#2b3240; --blue:#3f6d96; --l-blue:#7c9bbd;
  --muted:#586073; --rule:#cbd5e1; --vpale:#dde4ec; --icon:#8a98ad;
  --inaus:#6b6e84; --white:#ffffff; --banner:#424d61;
  --aus-vg:#014e67; --aus-g:#4d99b2; --aus-n:#b9c3cb; --aus-b:#c86eac; --aus-vb:#90286f;
  --disp:'Montserrat Alternates',system-ui,sans-serif;
  --body:'Open Sans',system-ui,sans-serif;
  --sc:'Montserrat Alternates',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;color:var(--ink);overflow:hidden;}
@font-face{font-family:'Physis';src:url('../fonts/Physis.ttf') format('truetype'),url('../fonts/Physis.otf') format('opentype');font-display:swap;}
.pg{font-family:'Physis',serif;font-variant-emoji:text;line-height:1;}

/* ── Portal frame: rail + main ── */
.portal{display:flex;height:100vh;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}

/* ── Left nav rail ── */
.rail{width:68px;background:var(--paper);border-right:1px solid var(--vpale);display:flex;flex-direction:column;flex-shrink:0;}
.ni{display:flex;flex-direction:column;align-items:center;gap:4px;padding:13px 4px 11px;border-left:2px solid transparent;background:transparent;cursor:pointer;}
.ni.on{background:rgba(63,109,150,.07);border-left-color:var(--blue);}
.ni-lbl{font-family:var(--sc);font-size:7px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--icon);line-height:1;}
.ni.on .ni-lbl{color:var(--blue);}
.rail-spacer{flex:1;}
.rail-sep{height:1px;background:var(--vpale);margin:0 10px;}
.rail-brand{display:flex;align-items:center;justify-content:center;height:44px;border-bottom:1px solid var(--vpale);font-family:var(--disp);font-size:11px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.rail-brand .thrice{color:var(--blue);}

/* ── Global header (row 1) ── */
.gh{background:var(--paper);border-bottom:1px solid var(--vpale);display:flex;align-items:center;padding:11px 20px 10px;flex-shrink:0;}
.gh-fields{display:flex;align-items:flex-start;gap:26px;flex:1;min-width:0;}
.ghf{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ghf.theme{flex:1;min-width:0;overflow:hidden;}
.ghf.theme .ghf-val{overflow:hidden;text-overflow:ellipsis;display:block;}
.ghf-lbl{font-family:var(--sc);font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--icon);white-space:nowrap;}
.ghf-val{font-family:var(--sc);font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:6px;line-height:1.25;}
.ghf-val .pg{font-size:14px;}
.ghf-val.aus{color:var(--aus-vg);font-weight:600;letter-spacing:.06em;}
.ghf-val.theme-txt{font-weight:400;font-family:var(--body);font-style:italic;color:var(--muted);}
.gh-more{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue);transition:background .12s;margin-left:10px;}
.gh-more:hover{background:rgba(63,109,150,.08);}

/* ── Timespan shared bits ── */
.ts{background:var(--white);border-bottom:1px solid var(--vpale);position:relative;flex-shrink:0;}
.ts-lbl{font-family:var(--sc);font-size:8.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--icon);}
.ts-kind{display:inline-flex;align-items:center;gap:6px;font-family:var(--sc);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.ts-count{font-family:var(--sc);font-size:8px;font-weight:500;letter-spacing:.08em;color:var(--icon);border:.75px solid var(--vpale);border-radius:20px;padding:2px 8px;background:var(--paper);white-space:nowrap;}
.ts-range{font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.015em;white-space:nowrap;}
.ts-edit{border:none;background:none;cursor:pointer;color:var(--blue);display:flex;align-items:center;padding:3px;border-radius:3px;transition:background .12s;}
.ts-edit:hover{background:rgba(63,109,150,.08);}
.ts-pickers{display:none;align-items:center;gap:6px;}
.ts-pickers.open{display:flex;}
.ts-date{font-family:var(--sc);font-size:9px;padding:3px 7px;border:.75px solid var(--rule);border-radius:2px;background:var(--white);color:var(--ink);outline:none;letter-spacing:.02em;}
.ts-arr{color:var(--muted);font-size:11px;}
.span-pills{display:flex;gap:6px;}
.sp{font-family:var(--sc);font-size:8.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;padding:5px 13px;border-radius:20px;border:.75px solid var(--rule);background:var(--white);color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap;}
.sp:hover{border-color:var(--l-blue);color:var(--ink);}
.sp.on{border-color:var(--aus-g);background:rgba(77,153,178,.22);color:var(--ink);font-weight:600;}
.ts-nav{font-family:var(--sc);font-size:10px;font-weight:500;text-transform:lowercase;letter-spacing:.05em;color:var(--muted);background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:20px;transition:color .12s,background .12s;white-space:nowrap;}
.ts-nav:hover{color:var(--blue);background:rgba(63,109,150,.06);}
.ts-collapse{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--blue);border-radius:50%;transition:background .12s;}
.ts-collapse:hover{background:rgba(63,109,150,.08);}
.ts-collapse.closed svg{transform:rotate(180deg);}

/* collapsed compact strip — deliberately SLIM */
.ts-compact{display:none;align-items:center;gap:12px;padding:5px 20px;min-height:28px;}
.ts-compact.on{display:flex;}
.ts-compact .ts-range{font-size:12px;}
.ts-compact-kind{font-family:var(--sc);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.ts-mini-nav{font-family:var(--sc);font-size:9px;color:var(--muted);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:20px;transition:color .12s;}
.ts-mini-nav:hover{color:var(--blue);}

/* ── Content stage stub ── */
.stage{flex:1;background:var(--white);display:flex;align-items:center;justify-content:center;min-height:0;}
.stage-hint{font-family:var(--sc);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--rule);}