/* Layout: sticky filter bar over a dense case list; one column on phones, two on wide screens. */
:root{
  --ink:#16213b; --ink-soft:#52607d; --ink-faint:#8b96ac;
  --paper:#f6f7f9; --card:#ffffff; --line:#dfe3ea;
  --navy:#16213b; --amber:#d08b1f; --amber-soft:#fbf2e0;
  --urgent:#b4452c; --urgent-soft:#fbeae6;
  --ok:#2c6e4f;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e8ecf4; --ink-soft:#a3aec4; --ink-faint:#7b869c;
  --paper:#11151f; --card:#1a2030; --line:#2c3447;
  --navy:#e8ecf4; --amber:#e8a93f; --amber-soft:#2e2718;
  --urgent:#e58568; --urgent-soft:#331d17;
  --ok:#6fbf95;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#e8ecf4; --ink-soft:#a3aec4; --ink-faint:#7b869c;
  --paper:#11151f; --card:#1a2030; --line:#2c3447;
  --navy:#e8ecf4; --amber:#e8a93f; --amber-soft:#2e2718;
  --urgent:#e58568; --urgent-soft:#331d17;
  --ok:#6fbf95;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);margin:0;line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}

header.top{background:var(--navy);color:#f6f7f9}
:root[data-theme="dark"] header.top,
:root:not([data-theme="light"]) header.top{background:#1a2030;border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) header.top{background:#16213b;border-bottom:0}}
header.top .wrap{padding-block:18px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
h1{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.1rem);margin:0;color:#fff;font-weight:400;letter-spacing:-.01em}
:root[data-theme="dark"] h1,:root:not([data-theme="light"]) h1{color:var(--ink)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) h1{color:#fff}}
.sub{font-size:.84rem;color:#aab4c8;margin:3px 0 0}
/* ------------------------------------------------------------------ header

   The site's real header renders on these pages too, using the site's own
   classes out of /css/styles.css. One problem to solve: both stylesheets
   declare --ink, --line, --navy, --amber and --paper on :root, with opposite
   values — app.css is a dark theme, the site header is a light one — and
   app.css loads second, so the header would have taken the dark values and
   drawn near-white link text on a near-white bar.

   Rather than renaming anything, the five names are pinned back to the site's
   values for the subtree that needs them. The header is then immune to the
   page's theme, light or dark, which is the point: it should look the same
   here as it does on cpr.html. */
.site-header{
  --ink:#1d2733; --muted:#5a6b7a; --line:#e3e8ec;
  --navy:#0D1B2A; --teal:#0E7C7B; --amber:#F4A025;
  --paper:#ffffff; --paper-soft:#f7f9fa;
  color:var(--ink);
}
/* app.css styles .btn for the dark pages; inside the header the site's own
   button styling has to win back. */
.site-header .btn{font-family:var(--body);border:0;border-radius:9px;
  padding:.55rem .95rem;font-size:.9rem;font-weight:700;line-height:1;
  text-decoration:none;display:inline-flex;align-items:center}
.site-header .btn--amber{background:#F4A025;color:#1d2733}
.site-header .btn--amber:hover{background:#d8860d;color:#1d2733}


.top-wa{font:500 .8rem/1 var(--body);color:#cbd3e2;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:9px 13px}
.top-wa:hover,.top-wa:focus-visible{border-color:var(--amber);color:#fff}

.filters{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
.filters .wrap{padding-block:11px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.fpair{display:flex;align-items:center;gap:7px;min-width:0}
.filters label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:500}
select,input[type=search]{font:400 .86rem var(--body);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:7px 9px;min-width:0}
input[type=search]{flex:1 1 150px}
select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.count{margin-left:auto;font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.count b{color:var(--ink);font-weight:700}

main{padding-block:18px 48px}
/* Cards stretch to match the tallest in their row, rather than each sitting at
   its own height and leaving a hole underneath the short one. .case is already
   a column flex with .acts pinned by margin-top:auto, so stretching lines the
   Apply buttons up along the bottom instead of leaving them floating. */
.grid{display:grid;gap:11px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}

.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px 12px;display:flex;flex-direction:column;gap:9px;min-width:0;position:relative}
.case.is-urgent{border-left:3px solid var(--urgent);padding-left:12px}
.chead{display:flex;gap:9px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.place{font-family:var(--display);font-size:1.12rem;line-height:1.2;margin:0;min-width:0}
.zip{color:var(--ink-faint);font-weight:400;font-size:.92rem}
.code{font:500 .7rem/1 var(--body);letter-spacing:.07em;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:4px 7px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:.71rem;letter-spacing:.03em;padding:3px 7px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.tag.lang{background:var(--amber-soft);border-color:transparent;color:var(--amber);font-weight:500}
.tag.urg{background:var(--urgent-soft);border-color:transparent;color:var(--urgent);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:.66rem}
dl.sched{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:.85rem;min-width:0}
dl.sched dt{color:var(--ink-faint);font-size:.69rem;text-transform:uppercase;letter-spacing:.07em;padding-top:3px}
dl.sched dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* The office's notes, filtered. Sits under the schedule and reads as prose —
   it is the part an aide lingers on, so it gets room rather than a tag. */
.details{font-size:.84rem;line-height:1.5;color:var(--ink-soft);margin:0;
  border-top:1px solid var(--line);padding-top:9px;overflow-wrap:anywhere}
.agency{font-size:.8rem;color:var(--ink-soft);margin:0;border-top:1px solid var(--line);padding-top:9px}
.agency b{color:var(--ink);font-weight:500}
.acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.btn{font:500 .83rem/1 var(--body);border-radius:7px;padding:9px 13px;cursor:pointer;
  border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-apply{background:var(--amber);color:#1a1205;border-color:var(--amber)}
.btn-apply:hover{filter:brightness(1.07)}
.btn-tell{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-tell:hover{border-color:var(--ink-faint)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--paper);color:var(--ink-faint);
  border-color:var(--line);cursor:default;filter:none}
.note{font-size:.76rem;color:var(--ink-faint);margin:0}

.empty{grid-column:1/-1;text-align:center;padding:48px 16px;color:var(--ink-soft)}
.empty p{margin:0 0 6px}

dialog{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);
  padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:0 18px 50px rgba(10,16,30,.3)}
dialog::backdrop{background:rgba(10,16,30,.55)}
.dlg{padding:18px}
.dlg h2{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 3px}
.dlg .lead{font-size:.86rem;color:var(--ink-soft);margin:0 0 14px}
.field{margin-bottom:12px}
.field span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:4px}
.addr{font:500 .9rem var(--body);background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:9px 11px;user-select:all;overflow-wrap:anywhere}
.addr.missing{color:var(--ink-faint);font-weight:400;font-style:italic}
textarea{width:100%;font:400 .85rem/1.5 var(--body);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:10px 11px;resize:vertical;min-height:122px}
.dlgacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:4px}
.toast{font-size:.8rem;color:var(--ok);font-weight:500;margin-right:auto;align-self:center}

/* ---------------------------------------------------------------- footer ---
 * The site footer from recruitmentnyc.com, reproduced so /cases does not end
 * in a different-looking page.
 *
 * The site's palette is declared on .site-footer rather than on :root. This
 * page's own --navy and --amber are a deeper navy and a darker amber, tuned for
 * the case cards, and overwriting them at the root to match the footer would
 * restyle every card on the page. Scoped here, the footer gets the site's
 * colours and nothing above it changes.
 *
 * .wrap is widened to the site's 1180px inside the footer for the same reason:
 * the footer has to line up with the one on every other page, while the case
 * list keeps its narrower 1080px measure.
 */
.site-footer{
  --navy:#0D1B2A; --teal:#0E7C7B; --amber:#F4A025;
  background:var(--navy);color:rgba(255,255,255,.75);
  padding-block:clamp(40px,6vw,64px) 2rem;margin-top:48px;
  font-family:var(--body)
}
.site-footer .wrap{max-width:1180px;padding-inline:clamp(20px,5vw,64px)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.site-footer h4{color:#fff;font-family:var(--body);font-weight:700;font-size:.9rem;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem}
.site-footer a{color:rgba(255,255,255,.75);font-size:.95rem;display:block;
  padding:.25rem 0;text-decoration:none;font-weight:400}
.site-footer a:hover{color:var(--amber);text-decoration:none}
.site-footer .foot-plain{display:block;padding:.25rem 0;font-size:.9rem}

.footer-brand p{font-size:.92rem;max-width:30ch;margin:0}
/* The logo sits on a white card because the artwork is dark on transparent and
   would otherwise disappear into the navy. width:max-content stops the card
   stretching to the full column. */
.footer-logo{display:inline-block;width:max-content;max-width:100%;
  background:#fff;padding:12px 14px;border-radius:14px;line-height:0;
  margin-bottom:.9rem}
.footer-logo img{height:96px;width:auto;display:block}

.footer-social{display:flex;gap:10px;margin-top:1rem}
.footer-social a{display:inline-flex;width:34px;height:34px;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;padding:0;transition:background .15s ease}
.footer-social a:hover{background:var(--teal);color:#fff}
.footer-social svg{width:18px;height:18px}

.footer-disclaimer{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.5);
  max-width:920px;margin:2.2rem auto 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);text-align:center}

.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:1.6rem;
  padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.55)}
.footer-bottom a{display:inline;font-size:.85rem;padding:0}
.foot-staff{color:inherit;text-decoration:none}
.foot-read{display:inline;margin-left:1.2rem;color:rgba(255,255,255,.4)}

@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-logo img{height:84px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- added for the live PHP build: real forms, flash messages, stacking ---- */
.form-page{max-width:660px;margin:0 auto}
.fieldset{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.fieldset h2{font-family:var(--display);font-weight:400;font-size:1.15rem;margin:0 0 3px}
.fieldset .hint{font-size:.82rem;color:var(--ink-soft);margin:0 0 14px}
.row{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:12px}
.row:last-of-type{margin-bottom:0}
@media(min-width:620px){.row.two{grid-template-columns:1fr 1fr}}
.f label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:4px;font-weight:500}
.f label .req{color:var(--urgent);font-weight:700}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=time],.f input[type=date],.f select,.f textarea{
  width:100%;font:400 .9rem/1.4 var(--body);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px}
.f textarea{min-height:84px;resize:vertical}
.f .help{font-size:.76rem;color:var(--ink-faint);margin:4px 0 0}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--urgent)}
.f .err{font-size:.76rem;color:var(--urgent);margin:4px 0 0;font-weight:500}
.flash{border-radius:var(--r);padding:13px 15px;margin-bottom:16px;font-size:.88rem;border:1px solid}
.flash.ok{background:var(--amber-soft);border-color:transparent;color:var(--ink)}
.flash.bad{background:var(--urgent-soft);border-color:transparent;color:var(--urgent);font-weight:500}
.flash b{display:block;font-weight:700;margin-bottom:2px}
.btn-primary{background:var(--amber);color:#1a1205;border-color:var(--amber);font-weight:700}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.stack{border-top:1px dashed var(--line);margin-top:4px;padding-top:9px}
.stack p{margin:0 0 5px;font-size:.76rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em}
/* Read-only chips. No hover, no pointer, nothing that invites a click: they
   state what else is open in the area, they are not a way to get to it. */
.stack .fit{display:inline-block;font-size:.8rem;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 8px;margin:0 5px 5px 0;
  cursor:default}
/* "×2" when more than one case has the same hours and zip. */
.stack .also{color:var(--amber);font-weight:600;font-size:.74rem}
.notified{font-size:.76rem;color:var(--ok);font-weight:500}
.staleflag{background:var(--urgent-soft);color:var(--urgent);font-size:.8rem;padding:9px 14px;text-align:center}
.f label.chk{text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink);
  font-weight:400;margin-bottom:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.f label.chk:has(input:checked){border-color:var(--amber);background:var(--amber-soft)}

/* notify.php hand-off page — one beat between applying and the agency's form */
.handoff{max-width:34rem;margin:0 auto;text-align:center;
  min-height:min(62vh,440px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,9vh,90px)}
.handoff .big{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,4vw,1.9rem);
  line-height:1.2;color:var(--ink);margin:0 0 12px}
.handoff p{color:var(--ink-soft);margin:0 0 10px}
.handoff .note{font-size:.88rem;color:var(--ink-faint)}
.handoff .note a{color:var(--amber);font-weight:500}

/* "Where do I find this?" under the registry field */
.finder{margin-top:6px}
.finder summary{font-size:.78rem;color:var(--amber);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px;font-weight:500}
.finder summary::-webkit-details-marker{display:none}
.finder summary::before{content:"?";display:inline-grid;place-items:center;width:14px;height:14px;
  border:1px solid currentColor;border-radius:50%;font-size:.62rem;font-weight:700}
.finder[open] summary{margin-bottom:7px}
.finder-body{border-left:2px solid var(--line);padding:2px 0 2px 11px}
.finder-body p{font-size:.8rem;line-height:1.5;color:var(--ink-soft);margin:0 0 7px}
.finder-body p:last-child{margin-bottom:0}
.finder-body b{color:var(--ink)}
.finder-body i{font-style:normal;background:var(--amber-soft,rgba(244,160,37,.16));
  padding:0 4px;border-radius:3px;color:var(--ink);white-space:nowrap}
.finder-body .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.95em}
.finder-note{color:var(--ink-faint)!important;font-size:.76rem!important}
.reglink{margin-top:4px}
.reglink a{color:var(--amber);font-weight:500}
.regstuck{margin-top:4px}
.regstuck b{color:var(--ink)}
.regstuck a{color:var(--amber);font-weight:500}

/* Consent checkboxes in the apply dialog */
.consents{display:flex;flex-direction:column;gap:9px;margin:2px 0 4px}
/* The filter bar's .chk sets white-space:nowrap for the "Urgent only" toggle.
   These are sentences, not a toggle, so that has to be undone or every line
   runs off the right edge of the dialog. */
.consents .chk{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;line-height:1.45;
  color:var(--ink-soft);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;
  border:0;padding:0;background:none;white-space:normal}
.consents .chk span{min-width:0}
.consents .chk input{flex:0 0 auto;align-self:flex-start;width:15px;height:15px;
  margin-top:2px;accent-color:var(--amber)}
.consents .chk a{color:var(--amber)}
.consents .chk .req{color:var(--urgent);font-weight:700;white-space:nowrap}

/* A disclosure for an action we do not want anybody taking by accident —
   currently "I no longer want this case" on an aide's document page. Styled
   down on purpose: it should read as a way out, not as one of the choices. */
.quiet{margin:1.4rem 0;border-top:1px solid var(--line);padding-top:.9rem}
.quiet>summary{cursor:pointer;color:var(--ink-soft);font-size:.95rem;
  padding:.35rem 0;list-style:none;display:flex;align-items:center;gap:.4rem}
.quiet>summary::-webkit-details-marker{display:none}
.quiet>summary::before{content:"›";display:inline-block;transition:transform .15s}
.quiet[open]>summary::before{transform:rotate(90deg)}
.quiet>summary:hover{color:var(--ink)}
.quiet>p{color:var(--ink-soft);font-size:.95rem;margin:.5rem 0}

/* ------------------------------------------------- the day-by-day schedule
   One row per day: tick, start, end. Replaces seven checkboxes above a single
   pair of times, which could only express "the same hours every day" — and a
   real week often is not. The row lights up when it is ticked so a coordinator
   can see at a glance which days she has actually set.

   Deliberately a grid and not a table: at phone width the time inputs need to
   drop under the day name rather than squeeze, and a table cannot do that. */
.daygrid{display:flex;flex-direction:column;gap:6px}
.dayrow{display:grid;grid-template-columns:5.5rem 1fr auto 1fr;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.dayrow.on{border-color:var(--amber);background:var(--amber-soft)}
/* It is a <label>, so it inherits the form's small muted uppercase label
   style. Here the day name is the content of the row, not a caption for
   a field, so it is set back to ordinary readable text. */
.daychk{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0;
  font:600 .95rem/1 var(--body);text-transform:none;letter-spacing:0;color:var(--ink)}
.daychk input{width:16px;height:16px;accent-color:var(--amber);flex:0 0 auto}
.dayrow input[type=time]{width:100%;min-width:0}
.dayto{color:var(--ink-faint);font-size:.85rem}
.dayrow{grid-template-columns:5.5rem 1fr auto 1fr 6.5rem}
.sameabove{border:0;background:none;padding:4px 2px;cursor:pointer;text-align:right;
  font:500 .76rem/1.2 var(--body);color:var(--ink-faint);text-decoration:underline;
  text-underline-offset:2px}
.sameabove:hover{color:var(--amber)}
.sameabove[hidden]{display:none}
/* Live-in asks a different question, so it replaces the grid rather than
   greying it out: when she reports, and when she is released. */
.liveinbox{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--amber);
  border-radius:9px;background:var(--amber-soft)}
.liveinbox[hidden]{display:none}
.rr{display:grid;grid-template-columns:5.5rem auto 1fr;gap:8px;align-items:center}
.rrlab{font:600 .95rem/1 var(--body);color:var(--ink)}
.rr select,.rr input[type=time]{min-width:0}
.rrnote{margin:0;color:var(--ink-soft)}
/* Live-in stays. One stay shows no header at all, so an ordinary live-in looks
   the same as it always did; the second one makes both of them numbered. */
.stays{display:flex;flex-direction:column;gap:10px}
.stay{display:flex;flex-direction:column;gap:8px}
.stay + .stay{border-top:1px dashed var(--amber);padding-top:10px}
.stayhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stayhd[hidden]{display:none}
.staynum{font:600 .78rem/1 var(--body);color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.07em}
.staydrop{border:0;background:none;padding:2px;cursor:pointer;
  font:500 .76rem/1.2 inherit;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.staydrop:hover{color:var(--urgent)}
.stayadd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.stayadd[hidden],#addstay[hidden]{display:none}
.stayhelp{font-size:.8rem;color:var(--ink-soft)}

/* "Copy someone else" on /newcase. Same shape as the stays rows above: the
   remove control is quiet text rather than a button, so the only thing that
   looks pressable in the block is the one that adds a row. */
.ccrows{display:flex;flex-direction:column;gap:8px}
.ccrow{display:flex;align-items:center;gap:10px}
.ccrow input{flex:1 1 auto;min-width:0}
.ccrow.bad input{border-color:var(--urgent)}
.ccdrop{flex:0 0 auto;border:0;background:none;padding:2px;cursor:pointer;
  font:500 .76rem/1.2 inherit;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.ccdrop:hover{color:var(--urgent)}
.ccdrop[hidden]{display:none}
/* The button is a separate action from the boxes above it, so it gets a clear
   gap rather than sitting tight under the last row as though it belonged to it. */
.ccadd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.cchelp{font-size:.78rem;color:var(--ink-faint);flex:1 1 14rem;min-width:0;line-height:1.4}
/* Sits inside the "Who you are" tile with the other fields, so it needs the
   breathing room a .row two would otherwise have given it — above, and below,
   where the "work at an agency we already deal with?" line follows it. */
.ccfield{margin-top:4px;margin-bottom:16px}
#addcc[disabled]{opacity:.5;cursor:default}
@media (max-width:560px){ .rr{grid-template-columns:1fr auto 1fr} .rrlab{grid-column:1 / -1} }
/* The live-in tick sits above the grid and changes what the grid asks for, so
   it is given room rather than tucked in with the other checkboxes. */
/* white-space:normal undoes the nowrap .chk sets for the filter bar's one-word
   "Urgent only" toggle. This is a sentence, not a toggle: left on nowrap it
   refuses to wrap and runs straight out through the right-hand border. The
   consent checkboxes in the apply dialog needed exactly the same undoing. */
.livein{display:flex;gap:9px;align-items:flex-start;margin:0 0 14px;cursor:pointer;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  white-space:normal}
.livein input{width:16px;height:16px;accent-color:var(--amber);flex:0 0 auto;margin-top:2px}
/* min-width:0 lets the text actually shrink — a flex item will not wrap below
   the width of its longest unbreakable run without it. */
.livein span{font-size:.9rem;color:var(--ink-soft);min-width:0;line-height:1.45}
.livein input:checked ~ span{color:var(--ink)}
@media (max-width:560px){
  .dayrow{grid-template-columns:1fr auto 1fr;gap:6px 8px}
  .daychk{grid-column:1 / -1}
  .sameabove{grid-column:1 / -1;text-align:left}
  .sameabove-sp{display:none}
}
.tag.live{background:#e8f0fb;color:#1d4e89;border-color:#c6daf4}
.posted{color:var(--ink-faint)}
.agency .posted + .notified::before{content:"·";margin:0 .45em;color:var(--ink-faint)}