/* Additions to the prototype's styles for the real app. */

/* Rail links behave like the prototype's rail buttons. */
a.railbtn { text-decoration: none; }
.railbtn.newbtn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.railbtn.newbtn[aria-disabled="true"]:hover { background: none; }

/* Settings menu: next to the Settings button, aligned to its bottom; below it on narrow screens. */
.popmenu.setmenu { left: 92px; bottom: 14px; }
.menuscrim { position: fixed; inset: 0; z-index: 25; }
.pmsoon { margin: 0 10px 6px; font-size: 12px; color: var(--faint); }
.pmfoot form { margin: 0; }
.popmenu .pmfoot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.signin-form .linkish { align-self: center; margin-top: 4px; font-size: 13px; }
.signin-card > .btn { text-align: center; text-decoration: none; }
@media (max-width: 820px) {
  .popmenu.setmenu { left: auto; right: 8px; bottom: auto; top: 56px; }
}

/* Read-only values on the case panel (editing arrives in the next stage). */
.drow .dv.ro.isempty { color: var(--faint); }
.ownname { font-weight: 500; }

/* Sign-in page. */
.signin { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.signin-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.signin-card .brand { background: var(--rail-bg); color: #fff; margin: 0; }
.signin-card h1 { font-size: 22px; }
.signin-form { display: flex; flex-direction: column; gap: 6px; }
.signin-form label { font-size: 13px; font-weight: 600; margin-top: 6px; }
.signin-form input[type=email], .signin-form input[type=password], .signin-form input[type=text], .signin-form input:not([type]) { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.signin-form .signin-keep { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--muted); }
.signin-form .btn { margin-top: 10px; padding: 9px 12px; }
.signin-err { color: var(--crit); font-size: 12.5px; margin: 2px 0 0; }

/* Form fields left empty when they are required turn red. */
.form label.invalid input, .form label.invalid select, .form label.invalid textarea { border-color: var(--crit); }

/* Directory search box beside its controls. */
.dirctl input#dq, .dirctl input.dq { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 200px; }

/* Pages that arrive in a later stage. */
.soon { max-width: 60ch; }


/* Case header: no line under the title; the dividing line sits between the relationships and the stages below them */
.dh .rels { border-top: 0; padding-top: 0; }
/* The space above the stages matches the header's bottom padding below them (14px, 12px on narrow screens). */
.dh .dpeople ~ .spath { margin: 4px -24px 0; padding: 14px 24px 0; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .dh .dpeople ~ .spath { margin-inline: -16px; padding: 12px 16px 0; } }
/* Stage arrows overlap by 4px; the last one has nothing to overlap, so its tip would be clipped. */
.sprow .sp:last-child { margin-right: 0; }

/* Log activity: "Now" sits quietly at the left of the footer; an earlier time opens a small date-time box there. */
.mfoot .whenbtn, .mfoot .whenin { margin-right: auto; }
.whenbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 500; }
.whenbtn:hover { color: var(--accent); }
.whenin { display: inline-flex; align-items: center; gap: 4px; }
.whenin label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.whenin input { font: inherit; font-size: 13px; padding: 4px 6px; }
.dtype .whenbtn, .dtype .whenin { text-transform: none; letter-spacing: 0; font-weight: 500; vertical-align: middle; }
.dtype .whenbtn { font-size: 12px; }

/* Case contacts: a quiet line of "Name  Job title" items instead of boxed cards; the name opens the contact. */
.pcard { display: inline-flex; align-items: baseline; gap: 6px; border: 0; border-radius: 0; padding: 0; background: none; max-width: none; }
.pcard { padding-left: 10px; border-left: 1px solid var(--line); }
.pcard .pn { all: unset; cursor: pointer; font-size: 13.5px; color: var(--fg); white-space: nowrap; }
.pcard .pn:hover { color: var(--accent); text-decoration: underline; }
.pcard .pn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pcard .ptitle { font-size: 12.5px; }
.pcard .cx { align-self: center; }
/* Hover card with how to reach the contact; it waits a moment so passing the mouse over names doesn't flash it. */
.pwrap { position: relative; }
.phover { position: absolute; left: -12px; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 200px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.35; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s; }
.phover::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.phover span { display: inline-flex; align-items: center; gap: 7px; }
.phover svg { color: var(--muted); flex: none; }
.pwrap:hover .phover, .pn:focus-visible + .phover { opacity: 1; visibility: visible; transition: opacity .12s .35s, visibility 0s .35s; }
@media (hover: none) { .phover { display: none; } }
.ctcases { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 2px 0 8px; }

/* Amounts line up against their currency picker. */
.moneyin input { text-align: right; }

/* Today: "Someone else…" picker next to My cases / My team, styled like the switch and highlighted when in use. */
/* "Someone else…" looks like the My cases / My team switch next to it: an unchosen option's colour until a person or
   department is picked, then the chosen option's. Drawn by the app (not the browser) so Safari shows the same colours. */
.scopesel { appearance: none; -webkit-appearance: none; border: 0; background-color: var(--sunk); border-radius: 8px; padding: 7px 28px 7px 11px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; max-width: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a909b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.scopesel.on { background-color: var(--panel); color: var(--fg); box-shadow: 0 0 0 3px var(--sunk), 0 1px 2px rgba(0,0,0,.08); }
.t2scope .scopesel { background-color: var(--t2-glass); }
.t2scope .scopesel.on { background-color: var(--t2-glass-hi); box-shadow: var(--t2-shadow); }
.scopesel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Case rows on hover or keyboard focus: a very faint wash and a thin border in the case type's colour, a thicker
   stripe and the title in the link colour, so the row stands out instead of greying out. */
.row { transition: background-color .12s; }
.row:hover, .row:focus-visible { background: color-mix(in srgb, var(--c) 4%, var(--panel)); outline: none; }
.row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.row:hover .stripe, .row:focus-visible .stripe { box-shadow: 3px 0 0 var(--c); }
.row:hover .title, .row:focus-visible .title { color: var(--accent); }
.row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
/* The list has rounded corners (10px, inside a 1px border); the first and last rows follow them so the hover border isn't clipped. */
.rows > .row:first-child { border-top-left-radius: 9px; border-top-right-radius: 9px; }
.rows > .row:last-child { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }

/* List changes (next steps): a removed item flashes, slides out and its space closes;
   a new item flashes in. Durations match ListMotion.LeaveMs. */
@keyframes nv-leave {
  0% { background: var(--accent-soft); }
  35% { background: var(--accent-soft); opacity: 1; transform: none; }
  70% { opacity: 0; transform: translateX(40px); max-height: var(--nv-h); }
  100% { opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; }
}
@keyframes nv-enter {
  0% { opacity: 0; transform: translateY(-6px); background: var(--accent-soft); }
  20% { opacity: 1; transform: none; background: var(--accent-soft); }
  100% { }
}
.leaving { --nv-h: 160px; overflow: hidden; pointer-events: none; animation: nv-leave .8s ease-in-out forwards; }
.plan.leaving { --nv-h: 90px; }
.entering { animation: nv-enter 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  @keyframes nv-leave { 0%, 60% { background: var(--accent-soft); } 100% { opacity: 0; background: var(--accent-soft); } }
  .entering { animation-duration: 1.2s; }
}

/* No rubber-band bounce: scrolling stops at the edges of the page, the case panel, popups and tables. */
html, body, * { overscroll-behavior: none; }
/* The page scrolls up and down only and fits the window's width; wide tables scroll sideways inside their own frame. */
main { overflow-x: hidden; overflow-y: auto; }
/* Browsers put an 8px margin around the page by default; the app fills the window edge to edge. */
body { margin: 0; }
/* Case lists: type label and number keep their size; the title takes what's left. */
.lk .lt .tchip, .lk .lt .key { flex: none; }

/* Linked cases: remove "×" beside the relation on hover; the add link under the list; the case picker. */
.lk .rel { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lk .rel .cx { width: 18px; height: 18px; font-size: 13px; opacity: 0; transition: opacity .15s; }
.lk:hover .rel .cx, .lk:focus-within .rel .cx { opacity: 1; }
.links + .linkadd { margin-top: 8px; }
.linkpick .lk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; border: 1px solid transparent; }
.linkpick .lk:hover { border-color: var(--line); }
.linkpick .lk.on { border-color: var(--accent); background: var(--accent-soft); }
.linkpick .lparty { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* A white page and more room between things: the light theme's page background is white (dark theme unchanged),
   and lists, rows and the case panel are spaced more generously. */
:root:not([data-theme="dark"]) { --bg: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1b2029; } }
.wrap { padding-block: 36px 72px; }
.row { padding: 16px 20px 16px 0; }
.row .stripe { margin: -16px 0; }
.row .main { gap: 5px; }
td { padding-block: 13px; }
.dside { gap: 30px; }
.kv { gap: 11px 12px; }
.steps .plan { padding: 10px 0; }
.dtl .ti { padding: 12px 0; }

/* Board (spec §8): the page uses the full width when the columns need it; card top line with the owner on the right. */
.wrap:has(.board.wide) { max-width: none; }
.card .ctop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .ctop .tchip, .card .ctop .key { flex: none; }
.card > :not(:first-child) { margin-left: 0; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.col-h { flex-wrap: wrap; }
.donedays { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.donedays select { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 5px 8px; font: inherit; color: var(--fg); }

/* Board cards name the primary party's relationship before it. */
.card .prel { color: var(--faint); font-weight: 500; }
.card .prel::after { content: " · "; }

/* A contact's phones and emails: kind picker, value, remove; and the kind shown after each link. */
.cprow { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 400; }
.form .cprow { grid-template-columns: 130px minmax(0, 1fr); }
.cprow select, .cprow input { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--fg); min-width: 0; }
.cprm { border: 0; background: none; color: var(--faint); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.cprm:hover { color: var(--crit); background: var(--crit-soft); }
.cpadd { align-self: flex-start; font-weight: 500; font-size: 13px; }
.cplist { display: flex; flex-direction: column; gap: 3px; }
.cpitem { display: inline-flex; align-items: baseline; gap: 6px; }
.cpkind { color: var(--faint); font-size: 12px; }
.cinfo .cpkind { color: var(--faint); }

/* Board header: the admin's link to the type's stages beside the finished-stages period. */
.boardact { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* Loading placeholders: grey shapes in the layout of what is coming, gently pulsing between two greys.
   They fade in after a moment, so quick loads don't flash. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skel { display: flex; flex-direction: column; gap: 10px; animation: skin .25s ease .15s both; }
.sk { --ska: color-mix(in srgb, var(--sunk) 40%, var(--line)); --skb: color-mix(in srgb, var(--line) 75%, var(--faint));
  display: block; height: 12px; border-radius: 6px; background: var(--ska); flex: none;
  animation: skpulse 1.6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 110ms); }
.sk.sm { height: 9px; }
.sk.h { height: 14px; margin-top: 8px; }
.sk.h1 { height: 22px; border-radius: 7px; }
.sk.block { height: 64px; border-radius: 10px; }
.sk.field { height: 34px; border-radius: 8px; margin-bottom: 8px; }
.sk.chip { height: 26px; border-radius: 999px; }
@keyframes skpulse { 0%, 100% { background: var(--ska); } 50% { background: var(--skb); } }
/* On the board's grey columns the shapes need to be a step darker to show. */
.skcolumn > .sk { --ska: color-mix(in srgb, var(--line) 80%, var(--faint)); --skb: color-mix(in srgb, var(--line) 55%, var(--faint)); }
@keyframes skin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sk { animation-duration: 3s; } .skel { animation: none; } }
.skchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.skcol { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.skel .rows { margin-bottom: 14px; }
.skline { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--line); }
.skline:first-child { border-top: 0; }
.skcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow: hidden; }
.skcolumn { background: var(--col-bg); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.skcard { background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.skpanel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.skstages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 10px; }
.skstages .sk { height: 26px; border-radius: 6px; }
.skbody { display: flex; gap: 28px; margin-top: 8px; }
.skbody .skcol { gap: 12px; }
.skbody .side { flex: 0 0 34%; border-left: 1px solid var(--line); padding-left: 24px; gap: 16px; }
.skform { max-width: 640px; gap: 6px; }
.skrow td { padding-top: 14px; padding-bottom: 14px; }
.skrow.sr td { padding: 0; border: 0; }
tr.skrow { cursor: default; pointer-events: none; }
.drawer > .skel { padding: 20px 24px; overflow: hidden; }
@media (max-width: 900px) { .skbody { flex-direction: column; } .skbody .side { border-left: 0; padding-left: 0; } .drawer > .skel { padding: 16px; } }

/* Case relationships: the organization's name and its contacts' names sit on one text line, at the bottom of the row. */
.relrow2 { align-items: end; align-items: last baseline; }
.relrow2 .rbody { align-items: baseline; }
.relrow2 .rorg2 { align-items: baseline; }

/* Case panel: why the case ranks where it does on Today, as coloured tags at the top of the side column (the score is never shown). */
.dwhy { display: flex; flex-direction: column; gap: 8px; }
.whytags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.whytag { --t: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--fg);
  background: var(--sunk); border: 1px solid var(--line); }
.whytag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); flex: none; }
.whytag.crit { --t: var(--crit); }
.whytag.warn { --t: var(--warn); }

/* A case number after its type name takes the type's colour. */
.key.typed { color: var(--c); }
/* The whose-cases switch and the someone-else list stand side by side at one height. */
.t2scope .seg, .scopesel { box-sizing: border-box; height: 34px; align-items: center; }
.scopesel { padding-top: 0; padding-bottom: 0; }

/* Sign-in: the passkey button under the password form, and the Sign-in security page. */
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: -4px 0; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.signin-form .btn[data-passkey] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.signin-card.wide { width: min(600px, 100%); }
.signin-card.wide h2 { font-size: 15px; margin: 0 0 6px; }
.secsec { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.secsec p { margin: 0; }
.secinline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.secinline form { margin: 0; }
.secinline input { flex: 1; min-width: 140px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.secrow label { font-weight: 600; font-size: 13px; }
.seclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seclist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.seclist li > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seclist form { margin: 0; }
.secsteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.secsteps li { display: flex; flex-direction: column; gap: 8px; }
.secqr { width: 168px; height: 168px; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--line); }
.secqr svg { width: 100%; height: 100%; display: block; }
.secsteps code, .seccodes code { font-family: var(--f-mono); font-size: 12.5px; }
.secon { display: inline-block; font-size: 11px; font-weight: 600; color: var(--good); background: var(--good-soft); padding: 1px 8px; border-radius: 999px; margin-right: 4px; }
.seccodes { border: 1px solid var(--line); background: var(--sunk); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.seccodes ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.secreq { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 12px; font-size: 13.5px; }
.secreq form { margin: 4px 0 0; }
.secmsg { margin: 0; font-size: 13.5px; color: var(--good); }

/* System health (system admins only). */
.syspage { overflow: visible; max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; display: flex; flex-direction: column; gap: 28px; }
.syshead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.syshead h1 { font-size: 24px; margin: 0 0 4px; }
.syshead p { margin: 0; }
.sysacts { display: flex; gap: 8px; align-items: center; }
.sysacts form { margin: 0; }
.sysacts .btn { text-decoration: none; }
.syspage h2 { font-size: 15px; margin: 0 0 10px; }
.syscards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.syscard { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
.syscard:hover { border-color: var(--faint); }
.sysname { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sysdot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.sysdot.good { background: var(--good); } .sysdot.warn { background: var(--warn); } .sysdot.crit { background: var(--crit); }
.sysstate { font-size: 13px; color: var(--muted); }
.sysstate.crit { color: var(--crit); font-weight: 600; } .sysstate.warn { color: var(--warn); font-weight: 600; }
.syserr { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sysfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.sysfacts div { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.sysfacts dt { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.sysfacts dd { margin: 0; font-weight: 600; }
.sysfacts dd.warn { color: var(--warn); }
.sysempty { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 0; color: var(--muted); }
.systable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.systable th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.systable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.systable tr:last-child td { border-bottom: none; }
.systable .mono { font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.systable details summary { cursor: pointer; color: var(--accent); font-size: 12px; margin-top: 4px; }
.systable pre { white-space: pre-wrap; font-size: 11.5px; max-height: 260px; overflow: auto; background: var(--sunk); padding: 8px; border-radius: 6px; }
@media (max-width: 640px) { .seccodes ul { grid-template-columns: 1fr; } .systable th:nth-child(3), .systable td:nth-child(3) { display: none; } }

/* All cases: the Columns menu and the Excel download, at the end of the filter bar. */
.fbar .fend { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.fbar a.fbtn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.pmnote { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }
.fcols { min-width: 260px; max-height: min(70vh, 560px); overflow: auto; }
.fcolrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 10px; font-size: 13px; }
.fcolrow label, label.fcolrow { justify-content: flex-start; display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.fcolmove { display: inline-flex; gap: 2px; }
.fcolmove .icon-btn { width: 24px; height: 24px; }
.fcolmove .icon-btn:disabled { opacity: .3; cursor: default; }
.fcolmore { display: flex; flex-direction: column; }
.fcolreset { margin: 8px 10px 6px; font-size: 12.5px; }
th .thplain { font: inherit; }

/* Board: the finished-stages choice, with the admins' "Edit stages" gear beside it. */
.donerow { display: flex; align-items: center; gap: 6px; }
.icon-btn.stagegear { width: 32px; height: 32px; color: var(--muted); }
.icon-btn.stagegear:hover { background: var(--t2-glass-hi, var(--sunk)); color: var(--fg); }
.icon-btn.stagegear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The Today background behind every page but Settings (MainLayout); below the page content without making the
   content a layer of its own, so popups and dialogs still sit above the side rail. */
.t2bg.appbg { z-index: -1; }

/* All cases grows with its columns: at least the usual width, at most the window, then the table scrolls. */
.wrap:has(> .casespage) { max-width: none; }
.casespage { width: fit-content; min-width: min(1124px, 100%); max-width: 100%; margin: 0 auto; }
.casespage > :is(.head, .vtabs, .fbar, .bulkbar, .note, .lmore) { width: 0; min-width: 100%; box-sizing: border-box; }
.casespage th { white-space: nowrap; }
.casespage td.ttl { min-width: 220px; }
.casespage td.clip { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Directory: the Excel download at the end of the filter row. */
.dirctl a.direxport { margin-left: auto; text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
/* Directory: relationship chips and tags in one row, as Today's case type chips. */
.chips.dirchips { margin: 0 0 12px; }
.form .lbl.full { grid-column: 1 / -1; }
.modal .seg[aria-label="Kind of party"] { align-self: flex-start; }
.form .checks label { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); }
.form > div.full { grid-column: 1 / -1; }

/* Tick boxes and radio buttons in forms keep their own size (.form input stretches text fields). */
.form input[type=checkbox], .form input[type=radio] { width: auto; padding: 0; border: 0; flex: none; }

/* The side menu's account button shows the person's initials; its popup starts with who is signed in. */
.railav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 11px var(--f-body); letter-spacing: .02em; }
.railbtn[aria-expanded="true"] .railav, .railbtn[aria-current="page"] .railav { box-shadow: 0 0 0 2px var(--rail-active-fg); }
.popmenu .pmwho { font-size: 12px; color: var(--faint); padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popmenu form { margin: 0; }
.popmenu .pmtheme { border-top: 1px solid var(--line); margin-top: 4px; }

/* Profile page. */
.profpanel { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.profhead { display: flex; align-items: center; gap: 12px; }
.av.profav { width: 44px; height: 44px; font-size: 16px; }
.profpanel input[readonly] { background: var(--sunk); color: var(--muted); }
.secsec a.btn { text-decoration: none; }