/* ═══════════════════════════════════════════════════════════════════════════
 * Cards — the guest page's language, for the whole platform
 *
 * Taken from what a guest sees when they report something: a soft glass card
 * floating over the landscape, a serif heading, quiet tinted tags and one
 * generous thing to press. The staff app used to be a different product
 * visually; this is the same one.
 *
 * Everything is expressed against a small set of surface tokens so the two
 * themes are one stylesheet, not two. Light puts ivory glass over a daytime
 * park; dark puts deep glass over an evening one. The card is the same card.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── type ────────────────────────────────────────────────────────────
     Fraunces for display. It keeps the editorial, slightly-hotel feeling that
     Cormorant had, but it is a modern optical-size face: it holds its weight
     at 20px where Cormorant thins out and slows the eye down. Elegance that
     survives being read in a corridor.

     Hanken Grotesk stays for everything you read quickly or press, and now
     also carries anything numeric — a room number, a time, a count. Those are
     scanned at speed, and a light display serif is measurably slower to read
     than a bold sans. Character where it is looked at, clarity where it is
     worked with. */
  /* iOS-style frosting. The saturation boost is the part people recognise: a
     plain blur turns whatever is behind into grey mush, while pushing
     saturation past 1 keeps the colour of the landscape alive through the
     glass. Apple's material sits around a 30px radius at ~180% saturation. */
  --sc-blur:saturate(180%) blur(30px);
  --sc-blur-soft:saturate(160%) blur(18px);
  --sc-serif:'Fraunces','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sc-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --sc-num:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --sc-brass:#C9AE7C;
}

/* ── light: ivory glass, as the guest sees it ─────────────────────────── */
/* ── defaults, for pages that have not been converted yet ────────────────
 * Every token below is defined again under [data-theme="light"] and
 * [data-theme="dark"]. Those attributes are set by scene.js, which only the
 * converted pages load — so on the other fifteen there is no theme attribute at
 * all and every var() resolves to nothing. A shared rule like
 * `.abtn.primary{background:var(--sc-btn)}` then paints a transparent button:
 * the label floats with no surface under it.
 *
 * These defaults are the dark set, because the unconverted pages are dark. They
 * cost nothing on a converted page, where the themed block simply wins.
 */
:root{
  --sc-card:rgba(19,31,48,.68);
  --sc-card-solid:#131F30;
  --sc-ink:#F6F1E7;
  --sc-ink-2:#DCE4EC;
  --sc-mute:#A9B6C4;
  --sc-mute-2:#8797A8;
  --sc-rule:rgba(246,241,231,.22);
  --sc-rule-2:rgba(246,241,231,.12);
  --sc-chip:rgba(246,241,231,.06);
  --sc-solid:#1E2E42;
  --sc-solid-hi:#26374E;
  --sc-edge:color-mix(in srgb, var(--sc-brass), transparent 68%);
  --sc-edge-hi:color-mix(in srgb, var(--sc-brass), transparent 40%);
  --sc-brass-deep:#E7D6B0;
  --sc-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --sc-shadow-hi:0 26px 60px -24px rgba(0,0,0,1);
  --sc-btn:#F6F1E7;
  --sc-btn-ink:#14202F;
  --sc-btn-hover:#FFFBF2;
  --sc-field:#0C1523;
  --sc-onscene:#F6F1E7;
}

:root[data-theme="light"]{
  --sc-card:rgba(246,241,231,.92);
  --sc-card-solid:#F6F1E7;
  --sc-ink:#1B2530;
  --sc-ink-2:#3D4B58;
  --sc-mute:#5A6673;
  --sc-mute-2:#7A8794;
  --sc-rule:rgba(12,24,38,.16);
  --sc-rule-2:rgba(12,24,38,.10);
  /* A chip at 6% is a rumour, not a button. Anything you can press needs to
     look pressable before you hover it, so the surface is solid rather than a
     tint of whatever happens to be behind it, and the border is real. */
  --sc-chip:rgba(12,24,38,.055);
  --sc-solid:#EDE6D8;
  --sc-solid-hi:#E3DACA;
  /* the card edge: brass, kept faint so it frames rather than outlines */
  --sc-edge:color-mix(in srgb, var(--sc-brass), transparent 55%);
  --sc-edge-hi:color-mix(in srgb, var(--sc-brass), transparent 25%);
  --sc-brass-deep:#8F7442;
  --sc-shadow:0 18px 44px -28px rgba(4,10,18,.85);
  --sc-shadow-hi:0 26px 58px -26px rgba(4,10,18,.9);
  --sc-btn:#14202F;
  --sc-btn-ink:#F6F1E7;
  --sc-btn-hover:#1E2E42;
  /* An input at 55% white over a card was washing into it; at 3% in dark it was
     invisible. A field is a place you type — it should look like a recess, not
     a suggestion. Solid in both themes. */
  --sc-field:#FFFDF8;
  --sc-onscene:#F6F1E7;
}

/* ── dark: the same card, after sunset ────────────────────────────────── */
:root[data-theme="dark"]{
  --sc-card:rgba(19,31,48,.86);
  --sc-card-solid:#131F30;
  --sc-ink:#F6F1E7;
  --sc-ink-2:#DCE4EC;
  --sc-mute:#A9B6C4;
  --sc-mute-2:#8797A8;
  --sc-rule:rgba(246,241,231,.22);
  --sc-rule-2:rgba(246,241,231,.12);
  --sc-chip:rgba(246,241,231,.06);
  --sc-solid:#1E2E42;
  --sc-solid-hi:#26374E;
  --sc-edge:rgba(201,174,124,.32);
  --sc-edge-hi:rgba(201,174,124,.6);
  --sc-brass-deep:#E7D6B0;
  --sc-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --sc-shadow-hi:0 26px 60px -24px rgba(0,0,0,1);
  --sc-btn:#F6F1E7;
  --sc-btn-ink:#14202F;
  --sc-btn-hover:#FFFBF2;
  --sc-field:#0C1523;
  --sc-onscene:#F6F1E7;
}

/* ── the card ─────────────────────────────────────────────────────────── */
.sc{
  position:relative;
  background:var(--sc-card);
  /* One definition, one edge, and it is brass rather than a neutral grey. A
     grey hairline reads as a boundary; a brass one reads as the material the
     rest of the interface is made of, and it catches the light the same way
     the tabs and the primary action do. Kept light so it frames the card
     without drawing a box around it. */
  border:1px solid var(--sc-edge);
  -webkit-backdrop-filter:var(--sc-blur);
          backdrop-filter:var(--sc-blur);
  border-radius:20px;
  padding:18px 19px;
  margin-bottom:12px;
  box-shadow:var(--sc-shadow);
  color:var(--sc-ink);
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .24s ease;
  animation:sc-rise .42s cubic-bezier(.22,1,.36,1) both;
}
.sc:hover{transform:translateY(-2px);box-shadow:var(--sc-shadow-hi)}
.sc.is-quiet{opacity:.62}
.sc.is-quiet:hover{opacity:.9}

/* a hairline of colour down the left edge, for urgency and nothing else */
.sc[data-accent]::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;
  background:var(--sc-accent,transparent);
}
.sc[data-accent="urgent"]{--sc-accent:#C0453F}
.sc[data-accent="high"]{--sc-accent:#C08A2E}
.sc[data-accent="medium"]{--sc-accent:var(--sc-brass)}
.sc[data-accent="low"]{--sc-accent:transparent}
.sc[data-accent="done"]{--sc-accent:#6E8F62}

/* Opacity only, deliberately. With fill "both" the final keyframe stays applied,
   and transform:none computes to an identity matrix — which STILL makes the
   element a backdrop root, so the card blurs an empty box for the life of the
   page. A frosted card cannot also carry a transform. The rise is worth less
   than the glass, so the card fades in and the movement lives on its contents. */
@keyframes sc-rise{from{opacity:0}to{opacity:1}}
/* the contents still rise; they are not frosted, so they may be transformed */
@keyframes sc-riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1}}
/* No fill mode. "both" keeps transform in the animated set for the life of the
   page, and the filled value computes to an identity matrix — which makes this
   wrapper a backdrop root and switches off the frosting on every badge, tag and
   button inside the card. Opacity is held by the base rule so nothing flashes. */
.sc > *{opacity:1;animation:sc-riseIn .42s cubic-bezier(.22,1,.36,1)}

/* ── the head ─────────────────────────────────────────────────────────── */
.sc-top{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.sc-when{font-size:12px;color:var(--sc-mute-2);margin-left:auto;white-space:nowrap}

.sc-h{
  font-family:var(--sc-serif);font-weight:500;font-size:24px;line-height:1.14;
  margin:0 0 2px;letter-spacing:-.006em;color:var(--sc-ink);
  display:flex;align-items:center;gap:11px;
}
.sc-h .sc-ic{width:22px;height:22px;flex:none;color:var(--sc-brass-deep);opacity:.9}
.sc-h .sc-ic svg{width:100%;height:100%;display:block}

.sc-said{margin:6px 0 0;font-size:15px;line-height:1.62;color:var(--sc-mute);font-style:italic}


/* ── tags ─────────────────────────────────────────────────────────────── */
.sc-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sc-sans);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:var(--sc-chip);color:var(--sc-mute);white-space:nowrap;
}
.sc-tag svg{width:12px;height:12px;flex:none}

/* ── the record ───────────────────────────────────────────────────────── */
/* Boxed on all four sides rather than open at the edges. Ruled only top and
   bottom, the record bled into the sheet and the label column's divider looked
   like a stray line; enclosed, it reads as one object. */
.sc-fields{display:grid;grid-template-columns:1fr;margin:14px 0 0;
  border:1px solid var(--sc-rule);border-radius:14px;overflow:hidden}
.sc-fr{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:baseline;
  border-bottom:1px solid var(--sc-rule-2)}
/* a faint tint behind the labels, so the column reads as a column */
.sc-fr dt{background:var(--sc-chip)}
.sc-fr:last-child{border-bottom:0}
.sc-fr dt{font-family:var(--sc-sans);font-size:12.5px;color:var(--sc-mute-2);font-weight:500;
  padding:8px 14px;border-right:1px solid var(--sc-rule-2)}
.sc-fr dd{margin:0;font-family:var(--sc-sans);font-size:14px;color:var(--sc-ink);font-weight:500;
  font-variant-numeric:tabular-nums;
  min-width:0;overflow-wrap:anywhere;padding:8px 0 8px 14px}
.sc-fr.v-bad dd{color:#C0453F}
.sc-fr.v-warn dd{color:#9A6B12}
.sc-fr.v-go dd{color:#3E5D33}
:root[data-theme="dark"] .sc-fr.v-bad dd{color:#F0A8AE}
:root[data-theme="dark"] .sc-fr.v-warn dd{color:#EBC98A}
:root[data-theme="dark"] .sc-fr.v-go dd{color:#B9D69E}
@media (max-width:520px){
  .sc-fr{grid-template-columns:100px minmax(0,1fr)}
  .sc-fr dt{font-size:12px;padding-right:10px}
  .sc-fr dd{padding-left:10px}
}

/* a quoted note, the way the guest's acknowledgement reads */


/* ── things to press ──────────────────────────────────────────────────────
   Flat and solid, the way the guest's own buttons are. A gradient was my
   invention and it read as a different product. */
.sc-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--sc-rule)}
.sc-btn{
  flex:1 1 auto;min-height:46px;padding:0 18px;border:1px solid var(--sc-rule);border-radius:14px;
  cursor:pointer;background:transparent;color:var(--sc-ink-2);
  font-family:var(--sc-sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1),background-color .2s,color .2s,border-color .2s;
}
.sc-btn svg{width:16px;height:16px;flex:none}
.sc-btn:hover{transform:translateY(-2px);border-color:var(--sc-mute-2);color:var(--sc-ink)}
.sc-btn:active{transform:translateY(0) scale(.982)}
.sc-btn[disabled]{opacity:.5;cursor:default;transform:none}

/* the one you are most likely to press */
.sc-btn.key{background:var(--sc-btn);color:var(--sc-btn-ink);border-color:transparent}
.sc-btn.key:hover{background:var(--sc-btn-hover);color:var(--sc-btn-ink)}
.sc-btn.danger{color:#C0453F}
:root[data-theme="dark"] .sc-btn.danger{color:#F0A8AE}
.sc-btn:focus-visible{outline:2px solid var(--sc-brass);outline-offset:2px}

/* the press itself: a ripple out from where the finger landed */
.sc-btn .rip{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:currentColor;opacity:.16;animation:sc-rip .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sc-rip{to{transform:scale(2.4);opacity:0}}

/* ── over the landscape ───────────────────────────────────────────────── */


/* ── the theme switch ─────────────────────────────────────────────────── */


@media (prefers-reduced-motion:reduce){
  .sc,.sc-btn,.sc-theme button{animation:none !important;transition-duration:.01ms !important}
  .sc:hover,.sc-btn:hover{transform:none}
}

/* ── the floating bar ─────────────────────────────────────────────────────
   Deliberately not full width: a bar that spans the screen reads as browser
   furniture, and the landscape stops at it. Floated clear of the top edge with
   the park visible around it, it reads as part of the page. */
.ch-bar{position:fixed;top:0;left:0;right:0;z-index:1200;
  padding:calc(14px + env(safe-area-inset-top)) 16px 0;
  display:flex;justify-content:center;pointer-events:none}
.ch-pill{
  pointer-events:auto;display:flex;align-items:center;gap:14px;
  max-width:min(96vw,720px);padding:11px 18px;border-radius:999px;
  background:rgba(9,15,24,.82);
  backdrop-filter:var(--sc-blur);-webkit-backdrop-filter:var(--sc-blur);
  border:1px solid rgba(246,241,231,.10);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  color:#F6F1E7;font-family:var(--sc-sans);
}
/* a clock is scanned, not admired */
.ch-time{font-family:var(--sc-num);font-size:19px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ch-sep{width:1px;height:22px;background:rgba(246,241,231,.16);flex:none}
.ch-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-greet{font-size:13.5px;font-weight:600;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ch-date{font-size:11px;color:rgba(246,241,231,.58);line-height:1.15;white-space:nowrap}
.ch-where{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  padding:5px 12px;border-radius:999px;background:rgba(246,241,231,.09);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sc-brass);white-space:nowrap}
.ch-where i{display:grid;place-items:center;width:14px;height:14px}
.ch-where i svg{width:14px;height:14px}
@media (max-width:600px){
  .ch-pill{gap:11px;padding:9px 14px}
  .ch-time{font-size:18px}
  .ch-date{display:none}
  .ch-where{padding:4px 9px;font-size:10.5px}
}

/* ── the sheet's surface ──────────────────────────────────────────────── */
.ch-sheet{background:var(--sc-card-solid);color:var(--sc-ink);
  box-shadow:0 -24px 70px -24px rgba(0,0,0,.85);padding-left:22px;padding-right:22px}
.ch-sheet .m-grab{color:var(--sc-mute)}
.ch-body{padding-top:6px}
/* The title bar stays put while the rest scrolls, so the close button is always
   where you left it. A sheet this tall with the only way out at the very top is
   a sheet you have to scroll back up to escape. */
.ch-head{
  position:sticky;top:0;z-index:3;
  background:var(--sc-card-solid);
  margin:0 -22px;padding:6px 22px 12px;
  border-bottom:1px solid var(--sc-rule);
}
.ch-h{font-family:var(--sc-serif);font-weight:400;font-size:27px;line-height:1.14;
  margin:2px 0 2px;letter-spacing:-.004em;display:flex;align-items:center;gap:13px;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 36}
.ch-sub{margin:0;font-size:13.5px;color:var(--sc-mute)}
.ch-x{
  margin-left:auto;flex:none;width:40px;height:40px;border-radius:999px;cursor:pointer;
  border:1px solid var(--sc-rule);background:transparent;color:var(--sc-mute);
  display:grid;place-items:center;font-size:20px;line-height:1;
  transition:background-color .18s,color .18s,transform .16s var(--m-spring);
}
.ch-x:hover{background:var(--sc-chip);color:var(--sc-ink);transform:scale(1.06)}
.ch-x:active{transform:scale(.94)}
/* the grab handle belongs above the title bar, and sticks with it */
.ch-sheet .m-grab{position:sticky;top:0;z-index:4;background:var(--sc-mute)}

/* ── the badge: what kind of problem this is ──────────────────────────── */
.sc-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 8px;border-radius:999px;
  background:var(--sc-chip);color:var(--sc-ink);
  font-family:var(--sc-sans);font-size:13px;font-weight:600;letter-spacing:.01em;
  animation:m-pop .42s var(--m-spring) both;
}
.sc-badge .m-orb{width:28px;height:28px}
.sc-badge .m-orb svg{width:15px;height:15px}

/* ── one row at the top ───────────────────────────────────────────────────
   The way out on the left, where you are and when in the middle, what this
   page can do on the right. It replaces the orbital menu's own bar and the
   page's title bar, so the top of the screen is one row rather than three. */
.ch-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
/* The status pill is the only part that may shrink; the menu and the controls
   keep their size because a half-visible button is worse than a shorter
   greeting. Without min-width:0 the pill refuses to shrink at all and pushes
   the controls clean off the side of a phone. */
.ch-menu,.ch-tools{flex:0 0 auto}
.ch-pill{flex:1 1 auto;min-width:0}
.ch-mid{min-width:0;flex:1 1 auto}
.ch-greet,.ch-date{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ch-menu{
  pointer-events:auto;display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:11px 18px 11px 15px;border-radius:999px;border:1px solid rgba(246,241,231,.10);
  background:rgba(9,15,24,.82);
  backdrop-filter:var(--sc-blur);-webkit-backdrop-filter:var(--sc-blur);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  color:#F6F1E7;font-family:var(--sc-sans);font-size:14px;font-weight:600;cursor:pointer;
  animation:m-rise .55s var(--m-out) both;
}
.ch-menu svg{width:17px;height:17px;color:var(--sc-brass)}
.ch-menu:hover{background:rgba(14,22,34,.9)}
.ch-tools{
  pointer-events:auto;display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px;
  border-radius:999px;border:1px solid rgba(246,241,231,.10);
  background:rgba(9,15,24,.82);
  backdrop-filter:var(--sc-blur);-webkit-backdrop-filter:var(--sc-blur);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
}
.ch-tools:empty{display:none}
.ch-tool{
  position:relative;width:38px;height:38px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#F6F1E7;display:grid;place-items:center;
  transition:background-color .18s,transform .18s var(--m-spring);
}
.ch-tool svg{width:17px;height:17px}
.ch-tool:hover{background:rgba(246,241,231,.12)}
.ch-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--sc-brass);color:#14202F;
  font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
@media (max-width:720px){
  .ch-menu-l{display:none}
  .ch-menu{padding:11px 13px}
  .ch-pill{gap:9px;padding:9px 13px}
  .ch-tool{width:36px;height:36px}
}
/* One row on a phone. It used to drop the status pill onto a second line,
   which is honest but eats a whole row of screen on the device where screen is
   scarcest. Instead the pill sheds what it can afford to lose — first the date,
   then the greeting — so the time and where-you-are survive alongside the menu
   and the controls. */
@media (max-width:640px){
  .ch-bar{flex-wrap:nowrap;gap:7px;padding-left:12px;padding-right:12px}
  .ch-pill{flex:1 1 auto;min-width:0;padding:8px 11px;gap:8px}
  .ch-date{display:none}
  .ch-time{font-size:17px}
  .ch-greet{font-size:12.5px}
  .ch-sep{height:18px}
  .ch-menu{padding:10px 12px}
  .ch-tools{padding:4px;gap:3px}
  .ch-tool{width:34px;height:34px}
  .ch-tool svg{width:16px;height:16px}
  .ch-where{padding:3px 8px;font-size:10px;letter-spacing:.06em}
}
/* Narrower still: the greeting goes too, and the where-chip becomes its icon.
   The clock is the last thing to survive, because it is the one thing on this
   bar somebody actually reads mid-shift. */
@media (max-width:430px){
  .ch-greet{display:none}
  .ch-where span{display:none}
  .ch-where{padding:4px 6px}
  .ch-pill{gap:7px;padding:8px 10px}
  .ch-sep{display:none}
}
@media (max-width:360px){
  .ch-tools .ch-tool:nth-child(n+4){display:none}   /* keep the first three */
}

/* the two bars this replaces */
.ch-owns-top .orb-bar{display:none !important}
.ch-owns-top .topbar{display:none !important}

/* ── inside a sheet ───────────────────────────────────────────────────────
   Sections, labels and inputs in the same language as the card, so the sheet
   is the card opened rather than a form that appeared. */
.sc-sec{margin-top:20px;padding-top:16px;border-top:1px solid var(--sc-rule)}
.sc-sec:first-of-type{border-top:0;padding-top:0}
.sc-lbl{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:var(--sc-sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sc-mute-2)}
.sc-row{display:flex;gap:9px;align-items:stretch}
.sc-in{
  flex:1;min-width:0;min-height:46px;padding:0 15px;border-radius:14px;
  border:1px solid var(--sc-rule);background:var(--sc-field);color:var(--sc-ink);
  font-family:var(--sc-sans);font-size:15px;
  transition:border-color .18s,box-shadow .18s;
}
.sc-in::placeholder{color:var(--sc-mute-2)}
.sc-in:focus{outline:none;border-color:var(--sc-brass);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-brass),transparent 78%)}
.sc-sec .tl-count{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--sc-chip);color:var(--sc-mute);letter-spacing:0}

/* ── the history, in the sheet's own surface ──────────────────────────────
   These blocks were built for a dark panel and kept their own colours, so in
   the sheet they read as a slab dropped into it. */
.jn{background:var(--sc-chip) !important;border:1px solid var(--sc-rule-2) !important;
  border-radius:16px}
.jn-dot{background:var(--sc-card-solid) !important;border-color:var(--sc-rule) !important;
  color:var(--sc-mute)}
.jn .on .jn-dot,.jn-dot.on{color:var(--sc-brass-deep);border-color:currentColor !important}
.jn-dot svg{width:17px;height:17px}
.jn-lab{color:var(--sc-mute-2) !important}
.jn .on .jn-lab,.jn-lab.on{color:var(--sc-ink) !important}

.tl-chip{background:var(--sc-chip);color:var(--sc-mute);border:1px solid var(--sc-rule-2)}
.tl-chip.on{background:var(--sc-btn);color:var(--sc-btn-ink);border-color:transparent}
.tl-empty,.tl-more{color:var(--sc-mute)}
.tl .ev,.tl-item,.tl-card{background:var(--sc-chip) !important;border-color:var(--sc-rule-2) !important;
  color:var(--sc-ink)}
.tl b,.tl strong{color:var(--sc-ink)}
.tl small,.tl .when,.tl .ago{color:var(--sc-mute-2)}
/* the note field matches every other input in the sheet */
#tdNote,.tl input[type="text"],.tl textarea{
  background:var(--sc-field) !important;border:1px solid var(--sc-rule) !important;
  color:var(--sc-ink) !important;border-radius:14px}
#tdNote::placeholder{color:var(--sc-mute-2)}

/* ── the collapsed bar ────────────────────────────────────────────────────
 * A lava lamp does not fade — it stretches, necks, and snaps. The old version
 * was a max-width transition, which is a shape getting narrower: two states and
 * a straight line between them. This is a keyframed morph where the pills lean
 * toward the menu, stretch as they are pulled in, neck at the join and rebound
 * once absorbed.
 *
 * The gooey filter does the merging: a heavy blur followed by hard contrast
 * makes two shapes bleed together as they approach and part cleanly as they
 * separate. It runs only during the morph, because a filter on this element
 * makes it a backdrop root and would kill the frosting underneath.
 */
.ch-morphing{filter:url(#ch-goo)}
.ch-morphing .ch-menu,.ch-morphing .ch-pill,.ch-morphing .ch-tools{
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  /* Safe to promote HERE and only here: the frosting is already switched off
     for the duration of the morph, so there is no backdrop-filter left for a
     compositor layer to break. Outside the morph these carry no hint at all. */
  will-change:transform,opacity;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
}
/* the layers are released the moment the morph class comes off */
.ch-bar:not(.ch-morphing) .ch-menu,
.ch-bar:not(.ch-morphing) .ch-pill,
.ch-bar:not(.ch-morphing) .ch-tools{will-change:auto}

/* Going in: lean, stretch, neck, absorb.
   Twenty-five steps rather than seven. Seven keyframes means the browser draws
   straight lines between six widely spaced poses, and a lava lamp is all curve
   — the necking in particular is a sine, which a straight line cannot express.
   Every step uses translate3d/scale3d so the whole run stays on the GPU. */
@keyframes goo-in{
  0.0%{transform:translate3d(-0.0px,0,0) scale3d(1.0,1.0,1);opacity:1}
  1.69%{transform:translate3d(-0.09px,0,0) scale3d(0.9999,1.0107,1);opacity:1}
  3.39%{transform:translate3d(-0.36px,0,0) scale3d(0.9995,1.0214,1);opacity:1}
  5.08%{transform:translate3d(-0.81px,0,0) scale3d(0.9987,1.032,1);opacity:1}
  6.78%{transform:translate3d(-1.42px,0,0) scale3d(0.9972,1.0425,1);opacity:1}
  8.47%{transform:translate3d(-2.2px,0,0) scale3d(0.9949,1.0529,1);opacity:1}
  10.17%{transform:translate3d(-3.12px,0,0) scale3d(0.9918,1.063,1);opacity:1}
  11.86%{transform:translate3d(-4.2px,0,0) scale3d(0.9877,1.0729,1);opacity:1}
  13.56%{transform:translate3d(-5.42px,0,0) scale3d(0.9827,1.0825,1);opacity:1}
  15.25%{transform:translate3d(-6.77px,0,0) scale3d(0.9766,1.0917,1);opacity:1}
  16.95%{transform:translate3d(-8.26px,0,0) scale3d(0.9694,1.1005,1);opacity:1}
  18.64%{transform:translate3d(-9.86px,0,0) scale3d(0.9611,1.1089,1);opacity:1}
  20.34%{transform:translate3d(-11.59px,0,0) scale3d(0.9516,1.1168,1);opacity:1}
  22.03%{transform:translate3d(-13.42px,0,0) scale3d(0.941,1.124,1);opacity:1}
  23.73%{transform:translate3d(-15.36px,0,0) scale3d(0.9292,1.1307,1);opacity:1}
  25.42%{transform:translate3d(-17.39px,0,0) scale3d(0.9163,1.1366,1);opacity:1}
  27.12%{transform:translate3d(-19.52px,0,0) scale3d(0.9022,1.1417,1);opacity:1}
  28.81%{transform:translate3d(-21.73px,0,0) scale3d(0.8869,1.146,1);opacity:1}
  30.51%{transform:translate3d(-24.02px,0,0) scale3d(0.8705,1.1494,1);opacity:1}
  32.2%{transform:translate3d(-26.39px,0,0) scale3d(0.853,1.1518,1);opacity:1}
  33.9%{transform:translate3d(-28.82px,0,0) scale3d(0.8345,1.1531,1);opacity:1}
  35.59%{transform:translate3d(-31.31px,0,0) scale3d(0.8149,1.1534,1);opacity:1}
  37.29%{transform:translate3d(-33.85px,0,0) scale3d(0.7943,1.1525,1);opacity:1}
  38.98%{transform:translate3d(-36.44px,0,0) scale3d(0.7728,1.1503,1);opacity:1}
  40.68%{transform:translate3d(-39.07px,0,0) scale3d(0.7503,1.147,1);opacity:1}
  42.37%{transform:translate3d(-41.74px,0,0) scale3d(0.7271,1.1423,1);opacity:1}
  44.07%{transform:translate3d(-44.43px,0,0) scale3d(0.703,1.1362,1);opacity:1}
  45.76%{transform:translate3d(-47.15px,0,0) scale3d(0.6782,1.1289,1);opacity:1}
  47.46%{transform:translate3d(-49.88px,0,0) scale3d(0.6528,1.1201,1);opacity:1}
  49.15%{transform:translate3d(-52.63px,0,0) scale3d(0.6268,1.1099,1);opacity:1}
  50.85%{transform:translate3d(-55.37px,0,0) scale3d(0.6003,1.0983,1);opacity:1}
  52.54%{transform:translate3d(-58.12px,0,0) scale3d(0.5733,1.0852,1);opacity:1}
  54.24%{transform:translate3d(-60.85px,0,0) scale3d(0.546,1.0709,1);opacity:1}
  55.93%{transform:translate3d(-63.57px,0,0) scale3d(0.5184,1.0551,1);opacity:1}
  57.63%{transform:translate3d(-66.26px,0,0) scale3d(0.4907,1.038,1);opacity:0.995}
  59.32%{transform:translate3d(-68.93px,0,0) scale3d(0.4628,1.0196,1);opacity:0.984}
  61.02%{transform:translate3d(-71.56px,0,0) scale3d(0.4349,1.0,1);opacity:0.969}
  62.71%{transform:translate3d(-74.15px,0,0) scale3d(0.4071,0.9793,1);opacity:0.951}
  64.41%{transform:translate3d(-76.69px,0,0) scale3d(0.3795,0.9575,1);opacity:0.929}
  66.1%{transform:translate3d(-79.18px,0,0) scale3d(0.3522,0.9347,1);opacity:0.905}
  67.8%{transform:translate3d(-81.61px,0,0) scale3d(0.3252,0.9111,1);opacity:0.878}
  69.49%{transform:translate3d(-83.98px,0,0) scale3d(0.2987,0.8867,1);opacity:0.849}
  71.19%{transform:translate3d(-86.27px,0,0) scale3d(0.2727,0.8617,1);opacity:0.818}
  72.88%{transform:translate3d(-88.48px,0,0) scale3d(0.2474,0.8362,1);opacity:0.784}
  74.58%{transform:translate3d(-90.61px,0,0) scale3d(0.2229,0.8103,1);opacity:0.748}
  76.27%{transform:translate3d(-92.64px,0,0) scale3d(0.1992,0.7843,1);opacity:0.711}
  77.97%{transform:translate3d(-94.58px,0,0) scale3d(0.1765,0.7582,1);opacity:0.671}
  79.66%{transform:translate3d(-96.41px,0,0) scale3d(0.1549,0.7322,1);opacity:0.629}
  81.36%{transform:translate3d(-98.14px,0,0) scale3d(0.1345,0.7066,1);opacity:0.586}
  83.05%{transform:translate3d(-99.74px,0,0) scale3d(0.1153,0.6814,1);opacity:0.541}
  84.75%{transform:translate3d(-101.23px,0,0) scale3d(0.0975,0.6568,1);opacity:0.494}
  86.44%{transform:translate3d(-102.58px,0,0) scale3d(0.0811,0.6331,1);opacity:0.445}
  88.14%{transform:translate3d(-103.8px,0,0) scale3d(0.0664,0.6104,1);opacity:0.395}
  89.83%{transform:translate3d(-104.88px,0,0) scale3d(0.0533,0.5923,1);opacity:0.343}
  91.53%{transform:translate3d(-105.8px,0,0) scale3d(0.0419,0.5829,1);opacity:0.29}
  93.22%{transform:translate3d(-106.58px,0,0) scale3d(0.0325,0.5749,1);opacity:0.235}
  94.92%{transform:translate3d(-107.19px,0,0) scale3d(0.025,0.5685,1);opacity:0.178}
  96.61%{transform:translate3d(-107.64px,0,0) scale3d(0.0195,0.5638,1);opacity:0.12}
  98.31%{transform:translate3d(-107.91px,0,0) scale3d(0.0161,0.561,1);opacity:0.061}
  100.0%{transform:translate3d(-108.0px,0,0) scale3d(0.015,0.56,1);opacity:0.0}
}

/* the return: a damped spring */
@keyframes goo-out{
  0.0%{transform:translate3d(-108.0px,0,0) scale3d(0.012,1.0,1);opacity:0.0}
  1.69%{transform:translate3d(-97.74px,0,0) scale3d(0.1059,1.0275,1);opacity:0.042}
  3.39%{transform:translate3d(-86.97px,0,0) scale3d(0.2044,1.0501,1);opacity:0.085}
  5.08%{transform:translate3d(-76.02px,0,0) scale3d(0.3046,1.0682,1);opacity:0.127}
  6.78%{transform:translate3d(-65.17px,0,0) scale3d(0.4038,1.0818,1);opacity:0.169}
  8.47%{transform:translate3d(-54.65px,0,0) scale3d(0.5001,1.0913,1);opacity:0.212}
  10.17%{transform:translate3d(-44.65px,0,0) scale3d(0.5916,1.0972,1);opacity:0.254}
  11.86%{transform:translate3d(-35.3px,0,0) scale3d(0.6771,1.0998,1);opacity:0.297}
  13.56%{transform:translate3d(-26.71px,0,0) scale3d(0.7556,1.0995,1);opacity:0.339}
  15.25%{transform:translate3d(-18.95px,0,0) scale3d(0.8266,1.0968,1);opacity:0.381}
  16.95%{transform:translate3d(-12.06px,0,0) scale3d(0.8897,1.0921,1);opacity:0.424}
  18.64%{transform:translate3d(-6.05px,0,0) scale3d(0.9447,1.0858,1);opacity:0.466}
  20.34%{transform:translate3d(-0.9px,0,0) scale3d(0.9918,1.0784,1);opacity:0.508}
  22.03%{transform:translate3d(3.4px,0,0) scale3d(1.0311,1.0701,1);opacity:0.551}
  23.73%{transform:translate3d(6.91px,0,0) scale3d(1.0632,1.0613,1);opacity:0.593}
  25.42%{transform:translate3d(9.68px,0,0) scale3d(1.0885,1.0524,1);opacity:0.636}
  27.12%{transform:translate3d(11.76px,0,0) scale3d(1.1076,1.0434,1);opacity:0.678}
  28.81%{transform:translate3d(13.22px,0,0) scale3d(1.121,1.0348,1);opacity:0.72}
  30.51%{transform:translate3d(14.14px,0,0) scale3d(1.1294,1.0266,1);opacity:0.763}
  32.2%{transform:translate3d(14.58px,0,0) scale3d(1.1334,1.0189,1);opacity:0.805}
  33.9%{transform:translate3d(14.62px,0,0) scale3d(1.1338,1.012,1);opacity:0.847}
  35.59%{transform:translate3d(14.32px,0,0) scale3d(1.131,1.0058,1);opacity:0.89}
  37.29%{transform:translate3d(13.74px,0,0) scale3d(1.1257,1.0003,1);opacity:0.932}
  38.98%{transform:translate3d(12.95px,0,0) scale3d(1.1185,0.9957,1);opacity:0.975}
  40.68%{transform:translate3d(11.99px,0,0) scale3d(1.1097,0.9919,1);opacity:1.0}
  42.37%{transform:translate3d(10.92px,0,0) scale3d(1.0999,0.9889,1);opacity:1.0}
  44.07%{transform:translate3d(9.78px,0,0) scale3d(1.0895,0.9865,1);opacity:1.0}
  45.76%{transform:translate3d(8.61px,0,0) scale3d(1.0788,0.9849,1);opacity:1.0}
  47.46%{transform:translate3d(7.44px,0,0) scale3d(1.0681,0.9839,1);opacity:1.0}
  49.15%{transform:translate3d(6.3px,0,0) scale3d(1.0576,0.9834,1);opacity:1.0}
  50.85%{transform:translate3d(5.2px,0,0) scale3d(1.0476,0.9835,1);opacity:1.0}
  52.54%{transform:translate3d(4.17px,0,0) scale3d(1.0381,0.9839,1);opacity:1.0}
  54.24%{transform:translate3d(3.21px,0,0) scale3d(1.0294,0.9846,1);opacity:1.0}
  55.93%{transform:translate3d(2.35px,0,0) scale3d(1.0215,0.9857,1);opacity:1.0}
  57.63%{transform:translate3d(1.57px,0,0) scale3d(1.0144,0.9869,1);opacity:1.0}
  59.32%{transform:translate3d(0.89px,0,0) scale3d(1.0081,0.9883,1);opacity:1.0}
  61.02%{transform:translate3d(0.3px,0,0) scale3d(1.0027,0.9897,1);opacity:1.0}
  62.71%{transform:translate3d(-0.2px,0,0) scale3d(0.9982,0.9912,1);opacity:1.0}
  64.41%{transform:translate3d(-0.61px,0,0) scale3d(0.9945,0.9927,1);opacity:1.0}
  66.1%{transform:translate3d(-0.93px,0,0) scale3d(0.9915,0.9941,1);opacity:1.0}
  67.8%{transform:translate3d(-1.18px,0,0) scale3d(0.9892,0.9955,1);opacity:1.0}
  69.49%{transform:translate3d(-1.36px,0,0) scale3d(0.9875,0.9968,1);opacity:1.0}
  71.19%{transform:translate3d(-1.49px,0,0) scale3d(0.9864,0.9979,1);opacity:1.0}
  72.88%{transform:translate3d(-1.55px,0,0) scale3d(0.9858,0.999,1);opacity:1.0}
  74.58%{transform:translate3d(-1.57px,0,0) scale3d(0.9856,0.9999,1);opacity:1.0}
  76.27%{transform:translate3d(-1.55px,0,0) scale3d(0.9858,1.0007,1);opacity:1.0}
  77.97%{transform:translate3d(-1.5px,0,0) scale3d(0.9863,1.0013,1);opacity:1.0}
  79.66%{transform:translate3d(-1.42px,0,0) scale3d(0.987,1.0018,1);opacity:1.0}
  81.36%{transform:translate3d(-1.33px,0,0) scale3d(0.9878,1.0022,1);opacity:1.0}
  83.05%{transform:translate3d(-1.22px,0,0) scale3d(0.9889,1.0025,1);opacity:1.0}
  84.75%{transform:translate3d(-1.1px,0,0) scale3d(0.99,1.0027,1);opacity:1.0}
  86.44%{transform:translate3d(-0.97px,0,0) scale3d(0.9911,1.0027,1);opacity:1.0}
  88.14%{transform:translate3d(-0.85px,0,0) scale3d(0.9923,1.0027,1);opacity:1.0}
  89.83%{transform:translate3d(-0.72px,0,0) scale3d(0.9934,1.0027,1);opacity:1.0}
  91.53%{transform:translate3d(-0.6px,0,0) scale3d(0.9945,1.0026,1);opacity:1.0}
  93.22%{transform:translate3d(-0.49px,0,0) scale3d(0.9955,1.0024,1);opacity:1.0}
  94.92%{transform:translate3d(-0.38px,0,0) scale3d(0.9965,1.0022,1);opacity:1.0}
  96.61%{transform:translate3d(-0.29px,0,0) scale3d(0.9974,1.002,1);opacity:1.0}
  98.31%{transform:translate3d(-0.2px,0,0) scale3d(0.9982,1.0017,1);opacity:1.0}
  100.0%{transform:translate3d(-0.12px,0,0) scale3d(0.9989,1.0015,1);opacity:1.0}
}

@keyframes goo-swallow{
  0.0%{transform:scale3d(1.0,1.0,1)}
  1.69%{transform:scale3d(1.0148,1.0148,1)}
  3.39%{transform:scale3d(1.0288,1.0288,1)}
  5.08%{transform:scale3d(1.0421,1.0421,1)}
  6.78%{transform:scale3d(1.0545,1.0545,1)}
  8.47%{transform:scale3d(1.0661,1.0661,1)}
  10.17%{transform:scale3d(1.0768,1.0768,1)}
  11.86%{transform:scale3d(1.0867,1.0867,1)}
  13.56%{transform:scale3d(1.0958,1.0958,1)}
  15.25%{transform:scale3d(1.104,1.104,1)}
  16.95%{transform:scale3d(1.1115,1.1115,1)}
  18.64%{transform:scale3d(1.1181,1.1181,1)}
  20.34%{transform:scale3d(1.124,1.124,1)}
  22.03%{transform:scale3d(1.1291,1.1291,1)}
  23.73%{transform:scale3d(1.1334,1.1334,1)}
  25.42%{transform:scale3d(1.1371,1.1371,1)}
  27.12%{transform:scale3d(1.14,1.14,1)}
  28.81%{transform:scale3d(1.1422,1.1422,1)}
  30.51%{transform:scale3d(1.1438,1.1438,1)}
  32.2%{transform:scale3d(1.1447,1.1447,1)}
  33.9%{transform:scale3d(1.145,1.145,1)}
  35.59%{transform:scale3d(1.1447,1.1447,1)}
  37.29%{transform:scale3d(1.1438,1.1438,1)}
  38.98%{transform:scale3d(1.1423,1.1423,1)}
  40.68%{transform:scale3d(1.1402,1.1402,1)}
  42.37%{transform:scale3d(1.1376,1.1376,1)}
  44.07%{transform:scale3d(1.1345,1.1345,1)}
  45.76%{transform:scale3d(1.1309,1.1309,1)}
  47.46%{transform:scale3d(1.1267,1.1267,1)}
  49.15%{transform:scale3d(1.1222,1.1222,1)}
  50.85%{transform:scale3d(1.1171,1.1171,1)}
  52.54%{transform:scale3d(1.1117,1.1117,1)}
  54.24%{transform:scale3d(1.1059,1.1059,1)}
  55.93%{transform:scale3d(1.0997,1.0997,1)}
  57.63%{transform:scale3d(1.0932,1.0932,1)}
  59.32%{transform:scale3d(1.0863,1.0863,1)}
  61.02%{transform:scale3d(1.0792,1.0792,1)}
  62.71%{transform:scale3d(1.0718,1.0718,1)}
  64.41%{transform:scale3d(1.0642,1.0642,1)}
  66.1%{transform:scale3d(1.0565,1.0565,1)}
  67.8%{transform:scale3d(1.0486,1.0486,1)}
  69.49%{transform:scale3d(1.0405,1.0405,1)}
  71.19%{transform:scale3d(1.0324,1.0324,1)}
  72.88%{transform:scale3d(1.0243,1.0243,1)}
  74.58%{transform:scale3d(1.0161,1.0161,1)}
  76.27%{transform:scale3d(1.008,1.008,1)}
  77.97%{transform:scale3d(0.9999,0.9999,1)}
  79.66%{transform:scale3d(0.9994,0.9994,1)}
  81.36%{transform:scale3d(0.9995,0.9995,1)}
  83.05%{transform:scale3d(0.9997,0.9997,1)}
  84.75%{transform:scale3d(0.9998,0.9998,1)}
  86.44%{transform:scale3d(0.9999,0.9999,1)}
  88.14%{transform:scale3d(1.0001,1.0001,1)}
  89.83%{transform:scale3d(1.0001,1.0001,1)}
  91.53%{transform:scale3d(1.0002,1.0002,1)}
  93.22%{transform:scale3d(1.0003,1.0003,1)}
  94.92%{transform:scale3d(1.0003,1.0003,1)}
  96.61%{transform:scale3d(1.0004,1.0004,1)}
  98.31%{transform:scale3d(1.0004,1.0004,1)}
  100.0%{transform:scale3d(1.0004,1.0004,1)}
}

.ch-pill,.ch-tools{transform-origin:right center}
.ch-condensed .ch-pill,.ch-condensed .ch-tools{
  animation:goo-in .58s cubic-bezier(.55,.06,.36,1) forwards;
  pointer-events:none;
}
.ch-condensed .ch-tools{animation-delay:.04s}      /* the far one leaves last */
.ch-bar:not(.ch-condensed).ch-morphing .ch-pill,
.ch-bar:not(.ch-condensed).ch-morphing .ch-tools{
  animation:goo-out .62s cubic-bezier(.34,1.2,.42,1) both;
}
.ch-bar:not(.ch-condensed).ch-morphing .ch-tools{animation-delay:.06s}
.ch-morphing .ch-menu{animation:goo-swallow .58s cubic-bezier(.4,0,.3,1)}

/* the collapsed button keeps the page name */
.ch-menu-where{display:none}
.ch-condensed .ch-menu-where{
  display:inline-flex;align-items:center;gap:6px;margin-left:2px;padding-left:11px;
  border-left:1px solid rgba(246,241,231,.16);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sc-brass);white-space:nowrap;
  animation:m-fade .3s .22s var(--m-out) both;
}
.ch-condensed .ch-menu-where i{display:grid;place-items:center;width:14px;height:14px}
.ch-condensed .ch-menu-where i svg{width:14px;height:14px}
.ch-condensed .ch-menu-l{display:inline}
@media (prefers-reduced-motion:reduce){
  .ch-condensed .ch-pill,.ch-condensed .ch-tools{animation:none;opacity:0;
    visibility:hidden;width:0;overflow:hidden}
  .ch-morphing{filter:none}
}

/* ── the question sheet ───────────────────────────────────────────────────
   Its own layer above whatever asked it, rising from the same edge. */
/* Higher specificity than .m-scrim, and above any page's own scrim: motion.css
   loads after this file, so a bare .ch-ask lost the z-index to .m-scrim and the
   question rendered behind the sheet that asked it. */
/* Both shared sheets sit above any page's own scrim. motion.css loads after
   this file, so a bare class loses the z-index to .m-scrim on equal
   specificity and the sheet renders behind what opened it. */
.m-scrim.ch-ask{z-index:400}
.m-scrim.ch-scrim{z-index:300}
.ch-asksheet{max-height:none;padding-top:0}
.ch-askbody{padding:8px 0 4px}
.ch-askhead{display:flex;gap:15px;align-items:flex-start;padding:6px 0 4px}
.ch-askhead h3{margin:2px 0 0;font-family:var(--sc-serif);font-weight:400;font-size:24px;
  line-height:1.17;letter-spacing:-.004em;color:var(--sc-ink);
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 32}
.ch-askhead p{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:var(--sc-mute)}
.m-orb.danger{color:#C0453F}
:root[data-theme="dark"] .m-orb.danger{color:#F0A8AE}
.sc-btn.key.warnkey{background:#C0453F;color:#fff}
.sc-btn.key.warnkey:hover{background:#A93A35}

/* ── journey and history, self-contained ──────────────────────────────────
   These were styled inside tickets.html for a dark panel. Defined here so any
   page showing a history reads the same, and so the light theme is not an
   afterthought. */
.jn{display:flex;align-items:center;gap:0;padding:14px 16px;border-radius:16px;
  background:var(--sc-chip);border:1px solid var(--sc-rule-2)}
.jn-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.jn-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--sc-card-solid);border:1px solid var(--sc-rule);color:var(--sc-mute-2)}
.jn-step.on .jn-dot{color:var(--sc-brass-deep);border-color:currentColor}
.jn-lab{font-size:11.5px;font-weight:600;color:var(--sc-mute-2);white-space:nowrap}
.jn-step.on .jn-lab{color:var(--sc-ink)}

.jn-line.on{background:var(--sc-brass-deep);opacity:.55}

.tl{margin-top:14px}
.tl-day{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sc-mute-2);background:var(--sc-chip);
  padding:4px 10px;border-radius:999px;margin-bottom:10px}


.tl-card{flex:1;min-width:0;background:var(--sc-chip);border:1px solid var(--sc-rule-2);
  border-radius:13px;padding:10px 13px}


/* ── the completion moment ────────────────────────────────────────────────
   The sheet gives itself over to the confirmation rather than the mark being
   tucked into a corner of it. */
/* Hold a height while the mark plays. Swapping a tall sheet for a short one
   makes it snap down the screen, which reads as the sheet breaking rather than
   the job completing. */
.ch-sheet.ch-done{max-height:none;min-height:min(52vh,460px);
  display:flex;flex-direction:column;justify-content:center;
  transition:min-height .3s var(--m-out)}
/* the grab handle is a flex sibling; without this it shares the row and shoves
   the mark off to one side */
.ch-sheet.ch-done .m-grab{position:absolute;left:0;right:0;margin:10px auto}
.ch-sheet.ch-done .m-in{width:100%}
.ch-donewrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:44px 22px 40px;gap:4px}
.ch-donemark{color:#3E7A4E;margin-bottom:14px}
:root[data-theme="dark"] .ch-donemark{color:#9ED4A8}
.ch-donemark svg{display:block}
.ch-doneh{margin:0;font-family:var(--sc-serif);font-weight:400;font-size:29px;line-height:1.12;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40;
  letter-spacing:-.008em;color:var(--sc-ink);
  animation:m-rise .4s .34s var(--m-out) both}
.ch-donep{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--sc-mute);max-width:34ch;
  animation:m-rise .4s .44s var(--m-out) both}
/* the ring gets a soft halo as it lands */
.ch-donemark .m-draw{position:relative;display:inline-block}
.ch-donemark .m-draw::after{content:'';position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(closest-side,currentColor,transparent 70%);opacity:0;
  animation:ch-halo .9s .3s var(--m-out) both}
@keyframes ch-halo{0%{opacity:0;transform:scale(.6)}45%{opacity:.16}100%{opacity:0;transform:scale(1.25)}}

/* a note field, and the quiet line under a control */
/* .sc-in carries flex:1, which does nothing outside a flex row — a field
   dropped straight into a section came out as a narrow box. */
.sc-sec > .sc-in{width:100%;display:block}
.sc-ta{width:100%;display:block;min-height:96px;padding:12px 15px;line-height:1.55;
  resize:vertical;font-family:var(--sc-sans);font-size:15px}
.ch-note{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--sc-mute-2)}
.ch-askhead .ch-x{align-self:flex-start}
#actScrim .quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
#actScrim .quick button{border:1px solid var(--sc-rule);background:var(--sc-chip);color:var(--sc-ink);
  border-radius:999px;padding:7px 13px;font:600 12.5px var(--sc-sans);cursor:pointer;
  transition:transform .16s var(--m-spring),background-color .18s}
#actScrim .quick button:hover{transform:translateY(-1px);background:var(--sc-rule)}
#actScrim .err{margin-top:10px;font-size:13.5px;color:#C0453F}

/* a route line: icon then destination, the icon sized rather than free */
.sc-route{font-style:normal;display:flex;align-items:center;gap:9px}
.sc-rico{flex:none;width:17px;height:17px;display:grid;place-items:center;color:var(--sc-mute-2)}
.sc-rico svg{width:17px;height:17px;display:block}
.sc-h em{font-style:normal;font-size:.62em;font-weight:600;color:var(--sc-mute);
  font-family:var(--sc-sans);letter-spacing:.02em}

/* ── the one big action ───────────────────────────────────────────────────
   Tickets calls it Report, concierge calls it Log. Same button: brass, bottom
   right, always in the same place. Defined once so the two cannot drift — the
   page only supplies the word and what it opens. */
.sc-fab,.fab{
  position:fixed;right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));z-index:70;
  height:56px;padding:0 22px;border:0;border-radius:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--sc-brass);color:#10141A;
  font-family:var(--sc-sans);font-size:15.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 16px 34px -10px rgba(0,0,0,.7);
  transition:transform .18s var(--m-spring),box-shadow .22s,background-color .2s;
}
.sc-fab svg,.fab svg{width:20px;height:20px}
.sc-fab:hover,.fab:hover{transform:translateY(-3px);box-shadow:0 24px 46px -12px rgba(0,0,0,.75)}
.sc-fab:active,.fab:active{transform:translateY(0) scale(.96)}
.sc-fab:focus-visible,.fab:focus-visible{outline:2px solid var(--sc-brass);outline-offset:3px}

/* the menu it opens */
.sc-pick{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.sc-pickitem{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid var(--sc-rule);
  background:var(--sc-chip);color:var(--sc-ink);font-family:var(--sc-sans);
  transition:transform .16s var(--m-spring),border-color .18s,background-color .18s;
}
.sc-pickitem:hover{transform:translateY(-2px);border-color:var(--sc-mute-2)}
.sc-picktext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sc-picktext b{font-size:16px;font-weight:600}
.sc-picktext em{font-style:normal;font-size:13px;color:var(--sc-mute)}
.sc-pickgo{flex:none;color:var(--sc-mute-2)}

/* ── search, with the filter inside it ────────────────────────────────────
   One control rather than two. The search box is used constantly and belongs
   on the page; the filters are set once and belong behind a tap. Putting the
   funnel inside the box means they read as one thing — narrow this list —
   instead of two controls competing for the same corner. */
.sc-search{
  display:flex;align-items:center;gap:10px;
  /* This sits on the park with nothing behind it, so it needs to be its own
     surface rather than a tint. A search box you cannot see is not a search
     box — it was reading as a faint outline over the treeline. */
  background:var(--sc-card-solid);border:1px solid var(--sc-rule);border-radius:16px;
  padding:0 6px 0 15px;min-height:52px;margin-bottom:12px;
  box-shadow:var(--sc-shadow);
  backdrop-filter:var(--sc-blur);-webkit-backdrop-filter:var(--sc-blur);
  transition:border-color .18s,box-shadow .2s;
}
.sc-search:focus-within{border-color:var(--sc-brass);
  box-shadow:var(--sc-shadow),0 0 0 3px color-mix(in srgb,var(--sc-brass),transparent 80%)}
.sc-search > svg,.sc-search .sc-searchic{width:18px;height:18px;flex:none;color:var(--sc-mute-2)}
.sc-search input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--sc-ink);
  font-family:var(--sc-sans);font-size:15.5px;min-height:50px;padding:0;
}
.sc-search input:focus{outline:none}
.sc-search input::placeholder{color:var(--sc-mute)}
.sc-search .clr{
  flex:none;width:34px;height:34px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--sc-mute-2);font-size:19px;line-height:1;
  display:grid;place-items:center;transition:background-color .18s,color .18s}
.sc-search .clr:hover{background:var(--sc-chip);color:var(--sc-ink)}

/* the funnel, sitting in the box */
.sc-filterbtn{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 15px;margin-left:2px;border:0;border-radius:14px;cursor:pointer;
  background:var(--sc-chip);color:var(--sc-ink);
  font-family:var(--sc-sans);font-size:14px;font-weight:600;
  transition:transform .16s var(--m-spring),background-color .2s;
}
.sc-filterbtn svg{width:16px;height:16px;color:var(--sc-brass-deep)}
.sc-filterbtn:hover{transform:translateY(-1px);background:var(--sc-rule)}
.sc-filterbtn:active{transform:none}
.sc-filterbtn .n{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--sc-brass);color:#14202F;font-size:11.5px;font-weight:700;
  display:grid;place-items:center;line-height:1}
.sc-filterbtn .n:empty,.sc-filterbtn .n[hidden]{display:none}
@media (max-width:560px){
  .sc-filterbtn span:not(.n){display:none}
  .sc-filterbtn{padding:0 12px}
}

/* ── things you press get a real surface ──────────────────────────────────
   Chips were painted with --sc-chip, a 6% tint. Over the park that reads as
   almost nothing, and a control you cannot see is not a control. These use a
   solid fill and a visible border instead, so a chip looks like a chip whether
   it is sitting on glass, on a sheet, or over a bright sky. */
.sc-tag,
.sc-badge,
.sc-btn:not(.key),
.sc-filterbtn,
.sc-pickitem,
.ch-tool,
.m-orb,
.sc-search,
.tl-chip:not(.on),
.jn-dot{
  background:var(--sc-solid);
  border:1px solid var(--sc-rule);
}
.sc-btn:not(.key):hover,
.sc-filterbtn:hover,
.sc-pickitem:hover,
.tl-chip:not(.on):hover{background:var(--sc-solid-hi)}
.ch-tool:hover{background:rgba(246,241,231,.16)}

/* the coloured tags keep their own tint, but at a weight that reads */
:root[data-theme="light"] .sc-tag.hk,
:root[data-theme="dark"] .sc-tag.mt,
:root[data-theme="dark"] .sc-tag.hk,

/* the card itself stops being see-through enough to read the park through it */
/* Frosted, not opaque. I had pushed these to 96% to fix legibility, which
   solved the wrong problem — at that point it is a painted panel, not glass.
   The blur is what makes it readable; the opacity only has to stop the
   landscape competing with the text. */
:root[data-theme="light"]{--sc-card:rgba(246,241,231,.74)}
:root[data-theme="dark"]{--sc-card:rgba(19,31,48,.68)}

/* ── the last translucent surfaces ────────────────────────────────────────
   Measured across all four pages in both themes. Everything below was between
   3% and 13% opaque — visible to a colour picker, not to a person at a desk. */

/* the page-context chip in the top bar */
.ch-where{background:rgba(246,241,231,.16)}

/* a selected state has to look selected */
.cchip.on,.kindopt.on,.tl-chip.on,.seg button.on,.filters button.on{
  background:var(--sc-btn) !important;color:var(--sc-btn-ink) !important;
  border-color:transparent !important;
}
/* and an unselected one still has to look like a control */
.cchip,.kindopt,.seg button,.filters button{
  background:var(--sc-solid);border:1px solid var(--sc-rule);color:var(--sc-ink)}

/* the icon ring reads as a ring, not a smudge */
.m-orb{background:var(--sc-solid);border:1px solid var(--sc-rule)}
.m-orb::after{opacity:0}

/* the workload banner and the advisor panel */
.workload,.workload.hot,.advis{background:var(--sc-card) !important;
  border:1px solid var(--sc-rule) !important}
.workload.hot{border-left:3px solid var(--sc-brass) !important}

/* ── the tabs are brass, everything else is frosted ───────────────────────
 * Two materials, one rule for telling them apart: the tabs are how you move
 * around, so they take the brand accent and are the only brass on screen.
 * Everything else is frosted glass — translucent, but with a blur behind it.
 *
 * The blur is the whole point. A translucent surface WITHOUT one is just a
 * faint tint that disappears over the park, which is what was wrong before.
 * With the blur, the same opacity reads as a solid pane of glass that happens
 * to have the landscape softly behind it.
 */

/* ── brass: the tabs ── */
.tabs{gap:8px}
.tab{
  /* The same brass as Report and Log. Not a tint of it — the same fill, so the
     tabs and the one big action read as the same material. The selected tab is
     told apart by a dark ring inside it rather than by being a different
     colour, which keeps every tab brass. */
  background:var(--sc-brass);
  border:1px solid var(--sc-brass);
  color:#10141A;
  border-radius:999px;padding:10px 17px;
  font-family:var(--sc-sans);font-size:14px;font-weight:600;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.55);
  transition:transform .16s var(--m-spring),box-shadow .2s,filter .2s;
}
/* Explicit colours rather than brightness()/saturate(). A filter promotes the
   element to its own layer and, on Chromium, anything inside it stops
   contributing to a backdrop-filter's sample. None of these sit above a card
   today, but the rule is simpler to keep than to remember: no filters in the
   shared layer. */
.tab:hover{transform:translateY(-1px);background:#D8C098;border-color:#D8C098}
.tab:active{transform:translateY(0) scale(.98)}
.tab.on,.tab[aria-selected="true"]{
  font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(16,20,26,.55),0 10px 24px -10px rgba(0,0,0,.6);
}
/* an unselected tab steps back a little without leaving the material */
.tab:not(.on){background:#BFA678;border-color:#BFA678;color:#1A1408}
.tab:not(.on):hover{background:#CBB287;border-color:#CBB287}
.tab .n,.tab .cnt,.tab b{
  background:rgba(20,32,47,.16);color:inherit;border-radius:999px;
  padding:1px 7px;font-size:12px;margin-left:7px}
.tab.on .n,.tab.on .cnt{background:rgba(20,32,47,.20)}

/* ── frosted glass: everything else ── */
.sc-tag,.sc-badge,
/* .sc-search is not in this list: it sits on the landscape with nothing behind
   it, so it needs a surface of its own rather than a tint of the page. */
.sc-btn:not(.key),.sc-filterbtn,.sc-pickitem,
.ch-tool,.m-orb,
.tl-chip:not(.on),.jn-dot{
  -webkit-backdrop-filter:var(--sc-blur);
          backdrop-filter:var(--sc-blur);
  background:color-mix(in srgb,var(--sc-ink),transparent 92%);
  border:1px solid color-mix(in srgb,var(--sc-ink),transparent 82%);
  color:var(--sc-ink);
}
.sc-btn:not(.key):hover,.sc-filterbtn:hover,.sc-pickitem:hover,.tl-chip:not(.on):hover{
  background:color-mix(in srgb,var(--sc-ink),transparent 87%)}

/* the frosted chips that carry meaning keep their colour in the glass */
.sc-tag.mt,.sc-tag.warn{background:color-mix(in srgb,#C08A2E,transparent 76%);
  border-color:color-mix(in srgb,#C08A2E,transparent 55%)}
.sc-tag.hk,.sc-tag.go{background:color-mix(in srgb,#5E8452,transparent 76%);
  border-color:color-mix(in srgb,#5E8452,transparent 55%)}
.sc-tag.bad{background:color-mix(in srgb,#B4453F,transparent 74%);
  border-color:color-mix(in srgb,#B4453F,transparent 52%)}
:root[data-theme="light"] .sc-tag.mt,:root[data-theme="light"] .sc-tag.warn{color:#5E3F09}
:root[data-theme="light"] .sc-tag.hk,:root[data-theme="light"] .sc-tag.go{color:#2C4522}
:root[data-theme="light"] .sc-tag.bad{color:#6E2A26}
:root[data-theme="dark"] .sc-tag.mt,:root[data-theme="dark"] .sc-tag.warn{color:#F3DDAC}
:root[data-theme="dark"] .sc-tag.hk,:root[data-theme="dark"] .sc-tag.go{color:#CFE6BB}
:root[data-theme="dark"] .sc-tag.bad{color:#F7C4C7}

/* the badge is glass with the icon ring inside it */
.sc-badge .m-orb{background:color-mix(in srgb,var(--sc-ink),transparent 88%);
  border-color:color-mix(in srgb,var(--sc-ink),transparent 78%);
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ── the quiet-hours notice ───────────────────────────────────────────────
   Its text was a pale blue meant for a dark panel; on a cream card it vanished.
   And the moon beside it was an emoji, which renders as a different picture on
   every device. */
.nightbar{color:var(--sc-mute) !important}
.nightbar b,.nightbar strong{color:var(--sc-ink) !important}
.nightbar span,.nightbar div{color:inherit}

/* the top row spans the page rather than stopping halfway */
.ch-bar{padding-left:16px;padding-right:16px}
.ch-pill{flex:1 1 auto}

/* The top-row tools sit on a dark pill in BOTH themes, so their icons follow the
   pill, not the page. My frosted rule set them to --sc-ink, which is dark navy
   in daylight — dark icons on a dark pill, invisible. */
.ch-tool{background:rgba(246,241,231,.10);border:1px solid rgba(246,241,231,.14);
  color:#F6F1E7}
.ch-tool svg{color:#F6F1E7}
.ch-tool:hover{background:rgba(246,241,231,.20)}
.ch-badge{background:var(--sc-brass);color:#14202F}
/* the moon glyphs are drawn icons now */
.moon svg,.nb-moon svg{display:block;color:var(--sc-brass-deep)}
.moon,.nb-moon{display:grid;place-items:center}

/* ── the square behind the tabs ───────────────────────────────────────────
   A sheen pseudo-element (a skewed white gradient that sweeps across on hover)
   sits on .tab in several page stylesheets. It is positioned but never clipped
   to the pill, so its rectangle shows through the translucent brass as a hard
   square corner. The tabs are brass now and do not need a shine on top. */
.tab::after,.tab::before{content:none !important}
.tab{overflow:hidden}

/* ── buttons on cards ─────────────────────────────────────────────────────
   "Open board", "Show it" and their kin were outlined pills in the accent,
   which reads as decoration rather than a control. They take the same shape as
   the buttons on a ticket: dark, solid, gently rounded \u2014 not a pill. */
.cpanel .dbtn,.cpanel .abtn,.cpanel button:not(.tab):not(.sc-fab):not(.ch-tool),
.warn .dbtn,.warn button:not(.tab),
.cp-head .dbtn,.cp-head .abtn{
  min-height:42px;padding:0 18px;border-radius:14px;
  background:var(--sc-btn);color:var(--sc-btn-ink);border:1px solid transparent;
  font-family:var(--sc-sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:none;
  transition:transform .16s var(--m-spring),background-color .2s;
}
.cpanel .dbtn:hover,.warn .dbtn:hover,.cp-head .dbtn:hover{
  transform:translateY(-1px);background:var(--sc-btn-hover)}
.cpanel .dbtn:active,.warn .dbtn:active{transform:none}
.cpanel .dbtn svg,.warn .dbtn svg{width:15px;height:15px;color:currentColor}
/* the sheen does not belong on these either */
.cpanel .dbtn::after,.warn .dbtn::after,.cp-head .dbtn::after{content:none !important}

/* ── the glass edge ───────────────────────────────────────────────────────
   Real frosted panels catch the light along their top edge. Without it a
   translucent card reads as a hole cut in the page rather than a pane laid on
   it — it is what separates iOS material from plain transparency. */
.sc,.cpanel,.ch-pill,.ch-menu,.ch-tools,.m-sheet,#taxiList,#resvList,#parcelList{
  box-shadow:var(--sc-shadow),
             inset 0 1px 0 color-mix(in srgb,#fff,transparent 62%);
}
:root[data-theme="dark"] .sc,
:root[data-theme="dark"] .cpanel,
:root[data-theme="dark"] .m-sheet,
:root[data-theme="dark"] #taxiList,
:root[data-theme="dark"] #resvList{
  box-shadow:var(--sc-shadow),
             inset 0 1px 0 color-mix(in srgb,#fff,transparent 88%);
}

/* Less tint, more blur — the blur is what makes it legible, so the surface can
   step back and let the landscape show as colour rather than shape. */
:root[data-theme="light"]{--sc-card:rgba(246,241,231,.62)}
:root[data-theme="dark"]{--sc-card:rgba(16,27,42,.58)}

/* Where the browser cannot frost, the surface has to carry the legibility on
   its own — otherwise the low tint that the blur was compensating for leaves
   text sitting on bare landscape. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-theme="light"]{--sc-card:rgba(246,241,231,.96)}
  :root[data-theme="dark"]{--sc-card:rgba(16,27,42,.95)}
  .sc-search,.sc-tag,.sc-badge,.sc-btn:not(.key),.sc-filterbtn,.m-orb{
    background:var(--sc-solid)}
}

/* ── the primary button, everywhere ───────────────────────────────────────
   Every .primary across the app was still brass on brass-coloured text — the
   pre-existing look. Brass is now the tabs and the one big action; a primary
   button inside a card or a sheet is the solid dark one, so "the important
   thing to press here" reads the same whichever screen you are on.

   Written against .abtn.primary / .dbtn.primary / .btn.primary rather than a
   bare .primary, so it beats the page rules on specificity without !important. */
.abtn.primary,.dbtn.primary,.btn.primary,.repbtn.primary,
.actbtn.primary,.sg-btn.primary,.note-btn.primary,.acctbtn.primary{
  background:var(--sc-btn);
  color:var(--sc-btn-ink);
  border:1px solid transparent;
  border-radius:14px;
  min-height:44px;padding:0 18px;
  font-family:var(--sc-sans);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:none;
  transition:transform .16s var(--m-spring),background-color .2s;
}
.abtn.primary:hover,.dbtn.primary:hover,.btn.primary:hover,.repbtn.primary:hover{
  background:var(--sc-btn-hover);color:var(--sc-btn-ink);transform:translateY(-1px)}
.abtn.primary:active,.dbtn.primary:active,.btn.primary:active{transform:none}
.abtn.primary svg,.dbtn.primary svg,.btn.primary svg{color:currentColor}
/* the sweep-shine belongs to the old look */
.abtn.primary::after,.dbtn.primary::after,.btn.primary::after{content:none !important}

/* a destructive primary stays red — that meaning outranks the house style */
.abtn.primary.danger,.dbtn.primary.danger,.btn.primary.danger,.sc-btn.key.warnkey{
  background:#B4453F;color:#FFF4F3;border-color:transparent}
.abtn.primary.danger:hover,.dbtn.primary.danger:hover{background:#9E3A35}

/* Resolve is the primary action on a note, so it looks like one rather than a
   pale green tint. */
.note-btn.res{background:var(--sc-btn);color:var(--sc-btn-ink);border:1px solid transparent;
  border-radius:14px;min-height:42px;padding:0 16px;font-weight:600}
.note-btn.res:hover{background:var(--sc-btn-hover);transform:translateY(-1px)}
.note-btn.ghost{background:transparent;border:1px solid var(--sc-rule);color:var(--sc-ink);
  border-radius:14px;min-height:42px;padding:0 16px;font-weight:600}
.note-btn:not(.res):not(.ghost){background:var(--sc-solid);border:1px solid var(--sc-rule);
  color:var(--sc-ink);border-radius:14px;min-height:42px;padding:0 16px;font-weight:600}

/* ── secondary buttons ────────────────────────────────────────────────────
   "Manage", "Manage messages", "Open board" and their kin were still brass
   text in a brass outline. Brass is the tabs and the one big action; every
   other button on a card is neutral, so brass keeps meaning something. */
.abtn:not(.primary):not(.tab):not(.danger),
.dbtn:not(.primary):not(.tab):not(.danger),
.btn:not(.primary):not(.tab):not(.danger),
.repbtn:not(.primary):not(.danger),
.actbtn:not(.primary):not(.danger),
.acctbtn:not(.primary){
  background:var(--sc-solid);
  border:1px solid var(--sc-rule);
  color:var(--sc-ink);
  border-radius:14px;
  min-height:42px;padding:0 16px;
  font-family:var(--sc-sans);font-size:14px;font-weight:600;
  box-shadow:none;
}
.abtn:not(.primary):not(.tab):not(.danger):hover,
.dbtn:not(.primary):not(.tab):not(.danger):hover,
.btn:not(.primary):not(.tab):not(.danger):hover{
  background:var(--sc-solid-hi);border-color:var(--sc-mute-2);color:var(--sc-ink)}
.abtn:not(.primary) svg,.dbtn:not(.primary) svg,.btn:not(.primary) svg{
  color:var(--sc-brass-deep)}
/* the sweep-shine belonged to the brass look */
.abtn::after,.dbtn::after,.btn::after,.repbtn::after,.actbtn::after{content:none !important}

/* small round controls (refresh, carousel arrows) stay round but lose the brass */
.abtn.icon,.dbtn.icon,.iconbtn,.carbtn,.tx-refresh{
  background:var(--sc-solid);border:1px solid var(--sc-rule);color:var(--sc-ink);
  border-radius:999px}
.abtn.icon svg,.dbtn.icon svg,.iconbtn svg,.carbtn svg,.tx-refresh svg{color:var(--sc-ink)}

/* ── the press ripple ─────────────────────────────────────────────────────
   It was painted with `currentColor` at .34 alpha and scaled to 2.4. That was
   fine when a card's text was light on a dark panel; since the cards became
   ivory, currentColor is dark ink — so pressing a room stamped a large, nearly
   black disc across it. A ripple should suggest a touch, not repaint the card.

   Fixed neutral, low alpha, and a smaller reach. It also has to be clipped:
   without overflow the disc escapes the rounded corner. */
.rip{
  background:currentColor !important;
  opacity:.10 !important;
  mix-blend-mode:normal;
}
:root[data-theme="light"] .rip{background:#0C1826 !important;opacity:.07 !important}
:root[data-theme="dark"]  .rip{background:#F6F1E7 !important;opacity:.09 !important}
@keyframes ripple{to{transform:scale(1.9);opacity:0}}
.sc,.card,.abtn,.btn,.chip,.m-thumb,.tl-chip{overflow:hidden}

/* the menu pills get the same restraint */
.orb-stage .navcard .rip{opacity:.10 !important;background:#F6F1E7 !important}

/* ── frosted things inside a sheet ────────────────────────────────────────
   A sheet has to carry a transform: that is how it slides up and down. Anything
   inside it therefore cannot sample the page behind, so a backdrop-filter there
   blurs nothing and leaves a bare tint. Inside a sheet the same chips use a
   solid surface instead, which looks identical and is honest about it. */
.m-sheet .sc-tag,.m-sheet .sc-badge,.m-sheet .sc-btn:not(.key),
.m-sheet .sc-filterbtn,.m-sheet .m-orb,.m-sheet .sc-pickitem,
.sheet .sc-tag,.sheet .sc-badge,.sheet .sc-btn:not(.key),.sheet .m-orb,
.panel .sc-tag,.panel .sc-badge,.panel .m-orb{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--sc-solid);
}
.m-sheet .sc-tag.bad,.sheet .sc-tag.bad{background:#E2C4C2}
.m-sheet .sc-tag.warn,.m-sheet .sc-tag.mt,.sheet .sc-tag.warn{background:#E8D6B0}
.m-sheet .sc-tag.go,.m-sheet .sc-tag.hk,.sheet .sc-tag.go{background:#CFE0C2}
:root[data-theme="dark"] .m-sheet .sc-tag.bad,
:root[data-theme="dark"] .sheet .sc-tag.bad{background:#5A2B2A}
:root[data-theme="dark"] .m-sheet .sc-tag.warn,
:root[data-theme="dark"] .m-sheet .sc-tag.mt{background:#4A3A1C}
:root[data-theme="dark"] .m-sheet .sc-tag.go,
:root[data-theme="dark"] .m-sheet .sc-tag.hk{background:#2E4425}

/* An .ovl panel keeps a scale transform even when open, so it is permanently a
   backdrop root — anything frosted inside it blurs nothing. Solid surfaces in
   there instead, which is what it already looked like, only now honestly. */
.ovl .sc-tag,.ovl .sc-badge,.ovl .m-orb,.ovl .sc-btn:not(.key),
.ovl .advis,.ovl .amend-opt,.ovl .sc-filterbtn{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--sc-solid);
}

/* a card lifts toward the light when you touch it */
.sc:hover{border-color:var(--sc-edge-hi)}

/* the same edge on the other shared surfaces, so nothing is framed differently */
.m-sheet,.ch-pill,.ch-menu,.ch-tools,.sc-search{border-color:var(--sc-edge)}

@supports not (background: color-mix(in srgb, red, transparent 50%)){
  :root[data-theme="light"]{--sc-edge:rgba(201,174,124,.45);--sc-edge-hi:rgba(201,174,124,.75)}
  :root[data-theme="dark"]{--sc-edge:rgba(201,174,124,.32);--sc-edge-hi:rgba(201,174,124,.6)}
}


/* ── frosting has a budget ────────────────────────────────────────────────
 * Every backdrop-filter is a separate compositing layer that has to sample and
 * blur what is behind it. Rooms renders 84 cards, each with a badge, an icon
 * ring and its tags — 232 frosted elements on one page. Chromium quietly stops
 * honouring backdrop-filter once a page asks for too many, which is why rooms
 * came out flat while the dashboard's handful of panels frosted correctly.
 *
 * The card itself keeps its glass, because that is the surface you actually
 * see. The small things INSIDE a card do not: they sit on the card, not on the
 * landscape, so a blur there was only ever sampling the card anyway. A tint of
 * the card gives the identical result for no layer at all.
 */
.sc .sc-tag,.sc .sc-badge,.sc .m-orb,
.sc .sc-btn:not(.key),.sc .sc-filterbtn,.sc .tl-chip{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.sc .sc-badge,.sc .m-orb{background:color-mix(in srgb,var(--sc-ink),transparent 92%)}
.sc .sc-btn:not(.key),.sc .sc-filterbtn{background:var(--sc-solid)}
@supports not (background: color-mix(in srgb, red, transparent 50%)){
  .sc .sc-badge,.sc .m-orb{background:rgba(12,24,38,.08)}
  :root[data-theme="dark"] .sc .sc-badge,
  :root[data-theme="dark"] .sc .m-orb{background:rgba(246,241,231,.08)}
}

/* ── a sheet leaves the way it arrived ────────────────────────────────────
   Closing simply removed the class, so the sheet vanished — which reads as a
   glitch rather than a dismissal, and gives no sense of where it went. It
   slides back down now, and the scrim fades with it.

   The transform is only present while it is moving. A sheet at rest carries no
   transform, because one would make it a backdrop root and switch off the
   frosting of everything inside it. */
.m-scrim.closing,.ovl.closing{
  pointer-events:none;
  opacity:0;
  transition:opacity .26s ease;
}
.m-scrim.closing .m-sheet,
.m-scrim.closing .ch-sheet,
.ovl.closing > .panel,
.ovl.closing > .txw{
  transform:translateY(14%);
  transition:transform .28s cubic-bezier(.4,0,.7,.2);
}
@media (prefers-reduced-motion:reduce){
  .m-scrim.closing,.ovl.closing{transition:none}
  .m-scrim.closing .m-sheet,.ovl.closing > .panel,.ovl.closing > .txw{transition:none;transform:none}
}

/* ── the pointer says what is pressable ───────────────────────────────────
   Buttons built at runtime often carry no cursor of their own, so the pointer
   stayed an arrow over things that are plainly controls. */
button,
[role="button"],
label[for],
summary,
.sc-btn,.sc-fab,.fab,.abtn,.dbtn,.btn,.tab,.navcard,.tile,
.sc-tag[data-q],.sc-filterbtn,.sc-pickitem,.ch-tool,.ch-menu,
.cal-cell:not(.empty),.cal-nav,.hchip,.tx-ref,.car-arrow,.cx,.acct-x,.ch-x,
.m-tap,.inv-item button,.fb-item button{
  cursor:pointer;
}
button:disabled,.abtn:disabled,.dbtn:disabled,.btn:disabled,
button[aria-disabled="true"]{cursor:not-allowed}
input,textarea,select{cursor:auto}
select,input[type="date"],input[type="checkbox"],input[type="radio"]{cursor:pointer}
/* a card you can open is pressable; one you cannot is not */
.sc[data-openroom],.sc[data-open],.card,.lrow,.notecard,.clcard{cursor:pointer}

/* ── a closed overlay costs nothing ───────────────────────────────────────
   A page can carry a dozen modals, all closed. Their scrims still declared a
   backdrop-filter, and Chromium counts a declared filter whether or not the
   element is visible — so rooms was spending most of its blur budget on sheets
   nobody had opened. The blur belongs to the open state only. */
.ovl:not(.open),
.m-scrim:not(.open),
.scrim:not(.open){
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.orb-ov:not(.open){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* ── what a phone can afford ──────────────────────────────────────────────
 * A 30px blur and an SVG filter are cheap on a desktop GPU and expensive on a
 * phone. The gooey morph in particular runs an SVG filter over the whole top
 * bar every frame while the pills move, which is enough on its own to make the
 * bar stutter — and a stuttering top bar is the first thing anyone notices.
 *
 * On a coarse pointer the blur comes down and the goo comes off. The pills
 * still collapse, they just do it without the SVG filter behind them. Nobody
 * is admiring a lava lamp on a phone at the front desk.
 */
@media (pointer:coarse){
  :root{
    --sc-blur:saturate(150%) blur(14px);
    --sc-blur-soft:saturate(140%) blur(10px);
  }
  .ch-morphing{filter:none !important}
  /* the goo filter's whole purpose is the merge; without it a plain fade reads
     better than a half-finished morph */
  .ch-condensed .ch-pill,.ch-condensed .ch-tools{
    animation:none !important;opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .ch-bar:not(.ch-condensed) .ch-pill,
  .ch-bar:not(.ch-condensed) .ch-tools{
    animation:none !important;opacity:1;visibility:visible;
  }
}
/* the same on a small screen, since a laptop trackpad reports a fine pointer */
@media (max-width:820px){
  :root{--sc-blur:saturate(150%) blur(14px)}
  .ch-morphing{filter:none !important}
}


/* The button radii here are literals again, as they were before the
   square-button change. */