/* The page's stylesheets, in the order the page has always applied them. *//* The signed-in app shell — the cf-005 prototype's language (prototypes/governance-mvp/
   template.html) carried onto the real page: Crystal Flash palette exact, warm paper,
   ink chrome, one orange accent doing all the work. */

body.app {
  display: block;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-hi) 0, var(--paper) 320px) var(--paper);
}

/* dvh, not vh: on a phone 100vh is the height with the browser's toolbars hidden, so the
   bottom of the app (the Ask composer) sits under the toolbar until the page scrolls. */
#app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* ── chrome ── */
header.topbar {
  background: var(--ink); color: #fff; display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; border-bottom: 3px solid var(--cf-orange); flex-shrink: 0;
}
header.topbar img { height: 28px; }
/* The brand is the way home: a click opens Ask (Adam, 4 Oct 2026). */
.brandhome { display: flex; align-items: center; gap: 16px; background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.brandhome:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 4px; border-radius: 6px; }
header.topbar .brandrule { width: 1px; height: 24px; background: rgba(255,255,255,.18); }
header.topbar .brand { display: flex; align-items: baseline; gap: 12px; }
header.topbar .appname {
  font-weight: 800; font-size: 22px; letter-spacing: .02em; line-height: 1;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(225,91,40,.5));
}
/* Explicit color AND margin: the login page's bare .sub rule (muted gray, 22px bottom margin)
   reaches this header otherwise — the gray is unreadable on ink, and the phantom margin
   inflates the brand box and shoves the wordmark off vertical center. */
header.topbar .sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255,255,255,.75); margin: 0;
}
/* Identification, not warning: obvious on the ink bar, same light green as the config
   badge, and only ever rendered outside prod. */
.envtag {
  margin-left: 14px; padding: 5px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
  color: #2A5B31; background: #EDF4EE; border: 1px solid #C4DCC7;
}
header.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Hamburger + dropdown: the phone-width chrome. Desktop never sees either — the hamburger
   only displays inside the media query below, and the dropdown only renders when it's tapped. */
.hamburger {
  display: none; border: none; background: none; color: #fff; font-size: 20px;
  line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 6px;
}
.hamburger:hover { background: rgba(255,255,255,.1); }
.mobilemenu {
  background: #fff; border-bottom: 2px solid var(--cf-orange);
  padding: 8px 10px 10px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(43,37,32,.12);
}
.mobilemenu .mi {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  text-align: left; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 15px;
  font-weight: 500; color: var(--cf-text); font-family: inherit;
}
.mobilemenu .mi.active {
  background: var(--cf-peach, #FAE4DB); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--cf-orange); color: var(--ink);
}
.mobilemenu .mi .glyph { width: 18px; text-align: center; opacity: 1; }
.monogram {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--cf-orange); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.25);
}
.who .id { line-height: 1.3; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.18); }
.who .idname { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.who .idrole { display: block; font-size: 11px; color: rgba(255,255,255,.62); }
.signout {
  border: none; background: none; color: rgba(255,255,255,.62);
  border-radius: 6px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  transition: color .15s, background .15s;
}
.signout:hover { color: #fff; background: rgba(255,255,255,.08); }

/* view-as switcher — admin only, one control, not chrome */
.viewas-ctl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #B9B1A6; }

/* Pick menus (js/menu.mjs): the bar's and the banner's choosers, drawn in the app's style. */
/* Above the page so its menus open over it; below the document and stats sheets (z-index 20), which cover the whole phone screen. */
header.topbar { position: relative; z-index: 15; }
.pickmenu { position: relative; display: inline-flex; }
.pickbtn {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12px; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 7px; padding: 4px 8px 4px 10px;
}
.pickbtn:hover, .pickbtn[aria-expanded="true"] { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.pickbtn:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }
.pickbtn svg { opacity: .8; transition: transform .15s; }
.pickbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pickmenu-banner .pickbtn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); border-radius: 6px; padding: 2px 6px 2px 8px; margin: 0 2px; }
.pickscrim { position: fixed; inset: 0; z-index: 40; }
.picklist {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; min-width: 190px; display: flex; flex-direction: column; gap: 1px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px;
  box-shadow: 0 10px 30px -10px rgba(46,42,38,.4), 0 2px 6px rgba(46,42,38,.1); animation: pickin .12s var(--rise) both;
}
.pickmenu-banner .picklist { right: auto; left: 0; }
@keyframes pickin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pickopt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--cf-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.pickopt:hover, .pickopt:focus-visible { background: var(--paper-hi); outline: none; color: var(--ink); }
.pickopt.on { color: var(--ink); font-weight: 600; }
.pickcheck { display: inline-grid; width: 14px; color: var(--cf-orange); }
@media (prefers-reduced-motion: reduce) { .picklist { animation: none; } .pickbtn svg { transition: none; } }

/* the impersonation banner — always the real name (R7) */
.viewas {
  background: linear-gradient(90deg, #8a6d00, #a5851a); color: #fff; font-size: 12.5px;
  padding: 7px 20px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.viewas b { font-weight: 650; }
.viewas > button {
  margin-left: auto; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12);
  color: #fff; border-radius: 7px; padding: 3px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.viewas > button:hover { background: rgba(255,255,255,.25); }

/* ── layout ── */
.applayout { flex: 1; min-height: 0; display: flex; }
nav.side {
  /* The page colour, divided by a line (Adam, 4 Oct 2026): the menu is part of the page; a near-match tint read as muddy. */
  width: 196px; flex-shrink: 0; background: var(--paper); border-right: 1px solid #D3CABD;
  display: flex; flex-direction: column; padding: 14px 10px 12px;
}
nav.side .menuitems { flex: none; }
/* Expanded, the items stop short of the edge so the centred collapse button never touches a selected item. */
.applayout:not(.navcollapsed) nav.side .menuitems { padding-right: 4px; }
nav.side .menufoot { border-top: 1px dashed var(--line); padding-top: 9px; }
nav.side .menufoot .mi { color: var(--cf-muted); font-size: 13px; }
nav.side .menufoot .mi:hover { color: var(--cf-orange); }
nav.side button.mi {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
  font-weight: 500; color: var(--cf-text); transition: background .12s; font-family: inherit;
}
nav.side button.mi:hover:not(.active) { background: var(--paper-hi); }
nav.side button.mi.active {
  background: var(--cf-peach, #FAE4DB); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--cf-orange); color: var(--ink);
}
nav.side button.mi .glyph { width: 20px; text-align: center; opacity: 1; font-size: 17px; line-height: 1; }
/* Collapsed, the icons carry the menu alone, so they take more of the column (Adam, 4 Oct 2026). */
.navcollapsed nav.side button.mi .glyph { width: auto; font-size: 22px; }
/* A hairline outline so pale emoji (the App Feedback bulb) hold their shape on the light menu; colours unchanged. */
nav.side button.mi .glyph, .mobilemenu .mi .glyph { filter: drop-shadow(0 0 .6px rgba(46, 42, 38, .7)); }
nav.side .sect {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  color: var(--label, #8A8177); margin: 13px 12px 4px;
}
main.screen { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 26px 60px; }
/* A quiet scrollbar: a thin warm thumb on a transparent track, so a full-width header meets the edge
   without a grey slab beside it (Adam, 4 Oct 2026). */
main.screen { scrollbar-width: thin; scrollbar-color: #D3CABD transparent; }
main.screen::-webkit-scrollbar { width: 8px; }
main.screen::-webkit-scrollbar-track { background: transparent; }
main.screen::-webkit-scrollbar-thumb { background: #D3CABD; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
main.screen::-webkit-scrollbar-thumb:hover { background: #B9AE9F; background-clip: content-box; }

/* The menu rail (cf-025 R5): glyphs, badges and the health dot stay; labels and headings go. */
/* The collapse button sits on the menu's edge level with the first item, so no band is held empty above it (Adam, 4 Oct 2026). */
nav.side { transition: width .18s var(--rise); position: relative; z-index: 3; padding-top: 14px; }
/* The toggle rides the menu's right edge, half over the border, the Linear and Jira pattern. */
.navedge {
  position: absolute; top: 20px; right: -13.5px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  /* The menu's own colour and line, so it reads as part of the menu edge, not a white disc (Adam, 4 Oct 2026). */
  display: grid; place-items: center; background: var(--paper); color: var(--cf-text); cursor: pointer;
  border: 1px solid var(--line); box-shadow: -2px 1px 4px rgba(46,42,38,.16);
}
.navedge:hover { border-color: var(--cf-orange); color: var(--cf-orange); background: #fff; }
.navedge:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 2px; }
.navcollapsed nav.side { width: 58px; padding-left: 7px; padding-right: 7px; }
/* Collapsed, the selected item reaches the edge, so the button sits in a small band above the icons instead of beside Ask. */
.navcollapsed nav.side { padding-top: 44px; }
.navcollapsed .navedge { top: 10px; right: -13.5px; }
.navcollapsed nav.side .milabel { display: none; }
/* Collapsed, a section heading becomes a thin line, so the user, owner and admin groups stay apart (Adam, 4 Oct 2026). */
.navcollapsed nav.side .sect { height: 0; padding: 0; margin: 2px 8px; font-size: 0; line-height: 0; overflow: hidden; border-top: 1.5px solid #C7BDB0; }

/* On the rail a count or the health mark stacks under its icon, so it never covers it. */
.navcollapsed nav.side button.mi { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 0; }
.navcollapsed nav.side .mi .qbadge { margin: 0; font-size: 9.5px; padding: 1px 5px; line-height: 1.3; }
.navcollapsed nav.side .mi .healthdot { margin: 0; font-size: 11px; line-height: 1; }
/* Collapsed, each item names itself to the right after a fifth of a second, the icon toggles' label style. */
.navcollapsed nav.side button.mi { position: relative; }
.navcollapsed nav.side button.mi[data-label]::after {
  content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-3px, -50%); z-index: 30;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 4px 9px; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.navcollapsed nav.side button.mi[data-label]:hover::after, .navcollapsed nav.side button.mi[data-label]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: .2s, .2s, .2s;
}
@media (prefers-reduced-motion: reduce) { nav.side { transition: none; } }

/* Tablet widths: the topbar sheds its secondary text. A topbar wider than the screen makes a
   phone browser zoom the whole app out to fit it, which breaks every screen at once. */
@media (max-width: 900px) {
  header.topbar { gap: 12px; padding: 10px 14px; }
  header.topbar .sub, header.topbar .brandrule, .who .id { display: none; }
  .envtag { margin-left: 0; padding: 4px 9px; font-size: 11px; letter-spacing: .1em; }
}
/* Phone widths: the sidebar gives way to the hamburger, whose menu is the phone's scope
   (Ask and Browse) plus who is signed in and Sign out. */
@media (max-width: 640px) {
  nav.side { display: none; }
  .hamburger { display: block; }
  header.topbar { gap: 10px; padding: 10px 12px; }
  .envtag, .viewas-ctl, .who .signout { display: none; }
  main.screen { padding: 14px 14px 40px; }
}
.menuwho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--line-soft);
}
.menuwho .idname { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.menuwho .idrole { display: block; font-size: 12px; color: var(--cf-muted); }
main.screen::-webkit-scrollbar { width: 10px; }
main.screen::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--paper); }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* Entrance animations play on arrival only (js/continuity.mjs): an element with data-arrive
   gets .arrived the paint it first appears, and never again while it stays. Every entrance
   animation hangs off .arrived, never off the base class — a base-class animation replays on
   every repaint, which is the flicker. --elapsed is how far into its animation a repaint
   caught it (the animation continues rather than restarting); --stagger is a deliberate
   delay. Neither inherits, so a row's stagger never leaks into what is inside it. */
@property --stagger { syntax: '<time>'; inherits: false; initial-value: 0ms; }
@property --elapsed { syntax: '<time>'; inherits: false; initial-value: 0ms; }
.arrived { --adelay: calc(var(--stagger) - var(--elapsed)); }
/* The screen arrives when someone navigates to it; its children rise in a short stagger. */
main.screen.arrived { --screen-elapsed: var(--elapsed); }
main.screen.arrived > * { animation: rise .34s var(--rise) calc(var(--stagger) - var(--screen-elapsed, 0ms)) both; }
main.screen.arrived > *:nth-child(2) { --stagger: .04s; }
main.screen.arrived > *:nth-child(3) { --stagger: .08s; }
main.screen.arrived > *:nth-child(4) { --stagger: .12s; }
/* The frame of a rebuild: fresh nodes take their hover and focus styles at once instead of
   transitioning into them again (continuity.mjs, holdTransitions). */
.repainting, .repainting * { transition: none !important; }
main.screen h1 { font-size: 21px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); margin: 0 0 5px; }
/* Title row with the screen's primary action right beside the title — not floated to the
   far edge, where it reads as chrome and gets missed. */
.screenhead { display: flex; align-items: center; gap: 16px; }
.screenhead h1 { margin: 0; }
/* "Scanning" while a requested pass runs: the dots cycle . .. ... in a fixed-width box, so the
   button never changes size; with reduced motion they sit still at three. */
.dots { display: inline-block; width: 3ch; text-align: left; }
.dots::after { content: '...'; display: inline-block; overflow: hidden; vertical-align: bottom; width: 1ch; animation: dots 1.2s steps(3, end) infinite; }
@keyframes dots { from { width: 1ch; } to { width: 4ch; } }
@media (prefers-reduced-motion: reduce) { .dots::after { animation: none; width: 3ch; } }
/* The title-line buttons share one height; the ＋ glyph on the Add buttons is a pixel taller than text. */
.screenhead .act.sm { min-height: 27px; }
.crumb { font-size: 12.5px; color: var(--cf-muted); margin-bottom: 3px; }
.lede { color: var(--cf-muted); margin: 0 0 16px; max-width: 74ch; line-height: 1.55; font-size: 13.5px; }

/* honest blanks */
.blankpage { text-align: center; padding: 90px 20px 0; color: var(--cf-muted); }
.blankpage .big { font-size: 34px; margin-bottom: 12px; opacity: .45; }
.blankpage h1 { margin-bottom: 8px; }
.blankpage p { font-size: 13.5px; max-width: 44ch; margin: 0 auto; line-height: 1.6; }

/* ── governance inbox ── */
.qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.sitelink { color: var(--cf-blue); text-decoration: none; font-weight: 500; }
.sitelink:hover { color: var(--cf-orange); text-decoration: underline; }
.scanrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
button.act {
  background: var(--cf-orange); border: none; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; font-family: inherit;
}
button.act:hover:not(:disabled) { background: #C94E20; }
button.act:active:not(:disabled) { transform: translateY(1px); }
button.act:disabled { opacity: .45; cursor: default; }
button.act.secondary { background: #fff; color: var(--ink); border: 1px solid var(--cf-border, #D9D9D9); }
button.act.secondary:hover:not(:disabled) { background: #fff; border-color: var(--cf-orange); color: var(--cf-orange); }
button.act.sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }
.scanresult { font-size: 13px; color: var(--cf-muted); }
.scanresult.arrived { animation: fadein .3s var(--adelay) both; }
.scanresult b { color: var(--ink); }
.spin {
  display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: spinr .7s linear infinite; vertical-align: -2px;
}
@keyframes spinr { to { transform: rotate(360deg); } }
.scanerr {
  padding: 11px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 12px;
  border: 1px solid var(--bad); color: var(--bad); background: #FDF3F2; white-space: pre-wrap;
}
.scanerr.arrived { animation: rise .25s var(--rise) var(--adelay) both; }

/* filter — one line of state, a staged panel behind it */
.filterbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; font-size: 13px; flex-wrap: wrap; }
.filterbar .fstate { color: var(--cf-muted); }
.filterbar .fstate b { color: var(--ink); font-weight: 600; }
.docsearch {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 14px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-soft, #EFE9E0); border-radius: 999px; padding: 10px 20px;
  width: 340px; max-width: 100%; transition: box-shadow .15s, border-color .15s;
  box-shadow: 0 1px 3px rgba(74,56,36,.08), 0 6px 18px -10px rgba(74,56,36,.18);
}
.docsearch::placeholder { color: var(--cf-muted); }
.docsearch:hover { box-shadow: 0 1px 4px rgba(74,56,36,.12), 0 10px 24px -10px rgba(74,56,36,.24); }
.docsearch:focus {
  outline: none; border-color: var(--line);
  box-shadow: 0 1px 4px rgba(74,56,36,.12), 0 10px 26px -10px rgba(74,56,36,.28), 0 0 0 4px rgba(225,91,40,.08);
}
.searchcount { font-size: 12px; color: var(--cf-muted); white-space: nowrap; }
.filterbtn {
  border: 1px solid var(--cf-border, #D9D9D9); background: #fff; border-radius: 14px;
  padding: 3px 12px; font-size: 12px; cursor: pointer; color: var(--cf-text); font-family: inherit;
}
.filterbtn:hover { border-color: var(--cf-orange); color: var(--cf-orange); }
/* A selected chip is tinted, never filled: a solid orange fill with white text is a button (Adam, 6 Oct 2026). */
.filterbtn.narrowed { background: #FCEBDD; border-color: var(--cf-orange); color: #B4501A; font-weight: 600; }
/* A chip that explains itself (Adam, 4 Oct 2026): the document page's label style, wrapped to a readable width, above the chip after a fifth of a second. */
/* The app's own hover box for every title (installQuickTips in app.mjs), the same look as the labels above. */
.quicktip {
  position: fixed; left: 0; top: 0; z-index: 1000; max-width: 280px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 6px 10px; font-size: 12px; line-height: 1.4; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.quicktip.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.filterbtn[data-tip], .historytoggle[data-tip] { position: relative; }
.filterbtn[data-tip]::after, .historytoggle[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: 260px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 7px 10px; font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left;
  display: none; pointer-events: none;
}
/* Hidden tips are display: none, not visibility: hidden: an invisible absolute box still widens
   the scroll area, and the chips near the right edge made Governance scroll sideways. */
.filterbtn[data-tip]:hover::after, .filterbtn[data-tip]:focus-visible::after, .historytoggle[data-tip]:hover::after, .historytoggle[data-tip]:focus-visible::after {
  display: block; animation: tipin .1s ease .2s both;
}
@keyframes tipin { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* The chip bar's history (Adam, 4 Oct 2026): set apart from the work and folded away by default. */
.chipdivider { width: 1px; height: 18px; background: var(--line); margin: 0 4px; align-self: center; }
.historytoggle { border: none; background: none; padding: 3px 6px; font-size: 12px; color: var(--cf-muted); cursor: pointer; font-family: inherit; }
.historytoggle:hover, .historytoggle.open { color: var(--cf-text); }
.historytoggle .twisty { font-size: 10px; margin-left: 2px; }
.historychips { display: inline-flex; gap: 6px; animation: rise .15s var(--rise) both; }
.filterbtn.history { background: transparent; color: var(--cf-muted); }
.filterbtn.history.narrowed { color: var(--cf-orange); }
.filterpanel {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  margin-bottom: 12px; box-shadow: var(--shadow-card);
  max-width: 420px;
}
.filterpanel.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.filterpanel .fhead {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650;
  color: var(--label, #8A8177); margin-bottom: 9px; display: flex; gap: 12px; align-items: baseline;
}
.filterpanel .fhead .sel { margin-left: auto; display: flex; gap: 10px; }
.filterpanel .fhead button {
  border: none; background: none; color: var(--cf-blue); font-size: 11.5px; cursor: pointer;
  padding: 0; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.filterpanel .fhead button:hover { text-decoration: underline; }
.filterpanel label.dept {
  display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 13.5px;
  color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--line-soft, #EFE9E0);
}
.filterpanel label.dept:last-of-type { border-bottom: none; }
.filterpanel input[type=checkbox] { accent-color: var(--cf-orange); width: 15px; height: 15px; }
.filterpanel .factions { display: flex; gap: 8px; margin-top: 11px; align-items: center; justify-content: flex-end; }
.filterpanel .factions .fzero { margin-right: auto; }
.filterpanel .factions .act { min-width: 84px; text-align: center; }
.filterpanel .fzero { font-size: 11.5px; color: var(--bad); }

/* Every screen's header on the dark band (Adam, 4 Oct 2026, back from a white trial: "I liked headers
   darker"): what the screen is, set apart from the work. The gradient is lighter than the top bar so the
   two read as separate bars, and it carries no orange rule, which stays on the top bar and on headers
   that label data. The description is quiet so the title and controls carry the band. Ask has none. */
.pagehead {
  margin: -24px -26px 18px; padding: 18px 26px 16px;
  /* The same ink as the detail pages' header and the table column headers (Adam, 4 Oct 2026). */
  background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%);
}
.pagehead h1, main.screen .pagehead h1 { color: #F6F1E9; }
.pagehead .crumb, .pagehead .scanresult, .pagehead .searchcount { color: #CFC6B8; }
.pagehead .scanresult.bad { color: #F2B8B0; }
.pagehead .lede, main.screen .pagehead .lede { color: #CFC6B8; font-size: 13px; margin-bottom: 0; max-width: 110ch; } /* a header note, not body text: wider than the reading measure, never full width */
.pagehead .qhead { margin-bottom: 10px; }
.pagehead > :last-child, .pagehead > .qhead:last-child { margin-bottom: 0; }
.pagehead a { color: #A9CFEF; }
@media (max-width: 900px) { .pagehead { margin: -14px -14px 14px; padding: 14px; } }

tr.browserow { cursor: pointer; }

/* the queue table */
table.queue {
  width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card);
}
table.queue th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 650; color: #E8E2D8; padding: 9px 13px;
  /* The ink chrome — same treatment as the topbar and panel headers, so headers read as headers. */
  border-bottom: 2px solid var(--cf-orange); background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%);
}
/* Only the colour fades: the header's gradient cannot fade into a solid background, so a background
   transition dropped the gradient at once and faded in from transparent, flashing the table's white. */
table.queue th.sortable { cursor: pointer; user-select: none; transition: color .12s; white-space: nowrap; }
table.queue th.sortable:hover { color: #fff; background: #46403A; }
/* Only the primary-sort column ever shows an arrow; the span still renders on every
   header (at zero opacity) so widths never shift when the sort moves. */
table.queue th .sarrow {
  display: inline-block; margin-left: 7px; font-size: 13px; line-height: 1;
  vertical-align: -1px; opacity: 0; transition: opacity .12s;
}
table.queue th .sarrow.on { opacity: 1; color: #8FC1EA; }
table.queue th .sarrows .a.on { opacity: 1; color: var(--cf-blue); }
table.queue th.on { color: #A9CFEF; background: #46403A; }
table.queue col.on { background: #FBF5EE; }
table.queue td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft, #EFE9E0); font-size: 13.5px; vertical-align: top; }
table.queue tr:last-child td { border-bottom: none; }
table.queue tr.doc.unread td:first-child { font-weight: 650; }
table.queue tr.doc:hover { background: #FDF6F1; box-shadow: inset 3px 0 0 var(--cf-orange); }
table.queue tr.landed.arrived { animation: rowland 2.4s ease-out var(--adelay) both; }
@keyframes rowland { 0% { background: #FCE4A6; } 100% { background: transparent; } }
.fn { font-size: 11.5px; color: var(--cf-muted); font-weight: 400; margin-top: 1px; }
.doclink { color: inherit; text-decoration: none; }
.doclink:hover { color: var(--cf-orange); text-decoration: underline; }
.deptlink { color: var(--cf-blue); text-decoration: none; white-space: nowrap; }
.deptlink:hover { color: var(--cf-orange); text-decoration: underline; }
.deptlink .ext { font-size: 10px; opacity: .75; margin-left: 2px; }

/* provenance markers (R9) — a value never renders unmarked */
.prov {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  border-radius: 9px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; white-space: nowrap;
}
.prov.sp { background: #EDF3F8; color: #54748C; }
.prov.inf { background: #FAF3E2; color: #8A7440; }
.prov.ods { background: #E9F2EA; color: #4E7352; }

.when { font-size: 12px; color: var(--label, #8A8177); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tag-new {
  display: inline-block; margin-left: 7px; background: #EDF3F8; color: #54748C;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; border-radius: 9px; padding: 1px 8px;
}

/* ── admin screens (cf-009) — the prototype's panel language ── */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-card); max-width: 900px;
}
.panel h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650;
  color: #fff; background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%);
  margin: -16px -18px 13px; padding: 9px 18px 8px; border-radius: 11px 11px 0 0;
}
.envrow { display: flex; align-items: flex-start; gap: 16px; }
.envbadge {
  flex-shrink: 0; text-transform: uppercase; font-weight: 800; letter-spacing: .06em;
  font-size: 15px; border-radius: 10px; padding: 10px 16px;
}
/* Light green DEVELOPMENT badge; production renders no badge at all (the amber topbar tag
   is likewise dev-only) — the environment is still named in the text line either way. */
.envbadge.dev { background: #EDF4EE; color: #2A5B31; border: 1px solid #C4DCC7; }
.envline { font-size: 13.5px; line-height: 1.6; margin-bottom: 4px; }
.envline b { color: var(--ink); }
.probe-ok { font-size: 12.5px; color: var(--ok, #2e7d32); margin-left: 8px; }
.probe-bad { font-size: 12.5px; color: var(--bad, #b3261e); }
.adminnotice {
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 12px;
  border: 1px solid #C4DCC7; color: #2A5B31; background: #F1F8F2;
}
.adminnotice.arrived { animation: rise .25s var(--rise) var(--adelay) both; }
.formrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
/* Labeled field column: helper text above each type-in box. */
.field { display: flex; flex-direction: column; gap: 4px; }
.field.grow { flex: 1; }
.field .adm-input { width: 100%; }
.flabel {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--label, #8A8177); padding-left: 2px;
}
/* Save then Cancel (save is the natural next step from typing) on their own second line,
   right-aligned — and the fields above grow to fill line 1, so no dead gap at the row's end. */
.formactions { display: flex; gap: 8px; flex-basis: 100%; justify-content: flex-start; }
/* Hard line break inside a formrow — name/email on line one, department/role on line two. */
.formbreak { flex-basis: 100%; height: 0; }
/* The add panels hug their fields instead of spanning the content column; the helper
   crumb below just wraps to more lines at this width. */
.panel.addbox { max-width: 640px; }
.formactions .act { min-width: 92px; text-align: center; padding: 9px 18px; font-size: 12.5px; }
.adm-input {
  font-family: inherit; font-size: 13px; color: var(--ink); background: #fff;
  border: 1px solid var(--cf-border, #D9D9D9); border-radius: 8px; padding: 7px 11px; min-width: 150px;
}
.adm-input.wide { min-width: 320px; flex: 1; }
.docsearch.usersearch { width: 280px; padding: 8px 16px; font-size: 13.5px; }
#newUserLocal { width: 150px; min-width: 0; }
.adm-input.uname { font-weight: 600; color: var(--ink); min-width: 170px; }
.chipdivider { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
/* A slight rule between the person's name and the email pair — separate facts. */
.fielddivider { width: 1px; height: 33px; background: var(--line); margin: 0 4px; align-self: flex-end; }
/* The email name and its domain are one address: fused into a single control, the shared
   edge collapsed, so the pair can't read as two unrelated fields. */
.emailjoin { display: inline-flex; align-items: stretch; width: 100%; }
.emailjoin .adm-input { flex: 1; width: auto; }
.emailjoin .adm-input { border-radius: 8px 0 0 8px; border-right: none; }
.emailjoin .adm-select {
  border-radius: 0 8px 8px 0; background: var(--paper-hi); color: var(--cf-muted);
}
.emailjoin .adm-input:focus + .adm-select { border-left-color: var(--cf-orange); }
/* The ingestion-contract panel under a row — the handoff Matt's routine will receive. */
tr.ingestrow td { background: var(--paper-hi); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.ingesthead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ingestparams {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6;
  background: #211D19; color: #C9E4C6; border-radius: 10px; padding: 12px 15px; margin: 0 0 10px;
  overflow-x: auto; max-width: 720px;
}
nav.side .mi .healthdot { margin-left: auto; font-weight: 800; font-size: 13px; }
.healthdot.ok { color: #2e7d32; }
.healthdot.bad { color: #b3261e; }
.healthdot.warn { color: #b26a00; }
/* Unprocessed-count marker (cf-010 R10): right of the text, same placement as the health check. */
nav.side .mi .qbadge, .mobilemenu .mi .qbadge {
  margin-left: auto; background: var(--cf-orange); color: #fff; border-radius: 9px;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
#newUserName { width: 210px; min-width: 0; }
#newUserDept { min-width: 280px; }
/* Both department fields split the panel width — the folder gets the larger share, since a
   folder path outgrows a department name. */
#newGroupName { min-width: 140px; }
#newGroupFolder { min-width: 200px; }
.formrow .field.grow:has(#newGroupFolder) { flex: 1.6; }
/* The edit-row inputs fill their table cells — a folder path is ~40 characters. */
#editGroupName, #editGroupFolder { width: 100%; min-width: 230px; }
.adm-input:focus { outline: none; border-color: var(--cf-orange); }
.adm-select {
  font-family: inherit; font-size: 13px; color: var(--ink); background: #fff;
  border: 1px solid var(--cf-border, #D9D9D9); border-radius: 8px; padding: 7px 9px; cursor: pointer;
}
.admtable { max-width: 1100px; }
.admtable td { vertical-align: middle; }
.rowactions { white-space: nowrap; text-align: right; }
tr.inactive td { opacity: .55; }
.chip {
  display: inline-block; font-size: 11.5px; font-weight: 500; border-radius: 20px;
  padding: 2px 10px; margin: 1px 3px 1px 0; background: #F2F0EB; color: #8A8177; white-space: nowrap;
}
.chip.flagged { background: #F9EDEB; color: #B0655C; }
.chip.ok { background: #EDF4EE; color: #5F8763; }
.meta-toggle { border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--cf-blue); padding: 0; }
.meta-toggle:hover { text-decoration: underline; }
.mempanel { padding: 4px 0; }
.mempanel label.dept {
  display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; cursor: pointer;
}
.mempanel input[type=checkbox] { accent-color: var(--cf-orange); }
.mempanel .factions { display: flex; gap: 6px; margin-top: 7px; }
/* The Departments screen: a compact row per department, its record opened in place below it. */
table.depttable tr.grouprow, table.admtable tr.userrow { cursor: pointer; }
table.depttable tr.grouprow:hover td, table.admtable tr.userrow:hover td { background: #FDF6F1; }
table.depttable tr.grouprow.open td, table.admtable tr.userrow.open td { background: var(--paper-hi); border-bottom-color: transparent; }
table.depttable tr.grouprow.open td:first-child, table.admtable tr.userrow.open td:first-child { box-shadow: inset 3px 0 0 var(--cf-orange); }
table.depttable tr.grouprecord > td, table.admtable tr.grouprecord > td { padding: 0 0 12px; background: var(--paper-hi); }
.tagcode { font-size: 12px; color: var(--cf-muted); background: transparent; }
.deptrecord { margin: 0 12px; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
.deptrecord.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.deptrecord .formrow { align-items: flex-end; }
.deptrecord .formrow .field.grow:has(#editGroupFolder) { flex: 1.6; }
.deptnofolder { margin-top: 10px; font-size: 13.5px; }
/* In the add form it is a row of its own inside the flex row; the row gap already spaces it. */
.formrow .deptnofolder { flex-basis: 100%; margin-top: 0; }
.deptcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.deptcol .flabel { display: block; margin-bottom: 6px; }
.deptcol label.dept { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; cursor: pointer; }
.deptcol input[type=checkbox] { accent-color: var(--cf-orange); }
.deptcol .crumb { margin-top: 6px; }
.deptmember { font-size: 13px; padding: 2px 0; }
.crumb.inline { display: inline; margin: 0 0 0 4px; }
.mempanel label.dept.locked { opacity: 0.55; cursor: not-allowed; }
.crumb.warn { color: #B0655C; margin-top: 4px; max-width: 220px; }
.crumb.warn.wide { max-width: none; margin-top: 12px; }
.depttag code { font-size: 13px; background: var(--paper-hi); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px; }
.deptactions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); align-items: center; }
.formactions .grow { flex: 1; }
@media (max-width: 640px) {
  .deptrecord { margin: 0 4px; padding: 12px; }
}
button.act.deny { background: #fff; color: var(--bad, #b3261e); border: 1px solid #E0B6B0; }
button.act.deny:hover:not(:disabled) { border-color: var(--bad, #b3261e); background: #FBF4F3; }
button.act.danger { background: var(--bad, #b3261e); }
button.act.danger:hover:not(:disabled) { background: #96190f; }
.modcell { font-size: 12.5px; color: var(--cf-muted); white-space: nowrap; }
.modcell b { color: var(--cf-text); font-weight: 500; }
.emptyq { color: var(--cf-muted); padding: 18px 13px; font-size: 13.5px; }
/* The Feedback screen's vote page (cf-017): the answer as it was shown, what it cited, who did what. */
.fbanswer { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--cf-text); }
.fbsources, .fbhistory { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.fbhistory b { font-weight: 500; }

/* ── Stats & Usage: counted numbers, no chrome competing with them ── */
.statrow { display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
  flex: 1 1 180px; min-width: 150px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #FCFAF7;
}
.panel h3 .window { color: var(--cf-muted); font-weight: 400; font-size: 12px; margin-left: 8px; }
/* A tile that drills down is a button and says so on hover (cf-010 R6): border warms, a
   chevron fades in. The open tile speaks the app's "you are here" language — the same peach
   and inset orange bar as the active nav item — so tile and sheet read as one thing. */
button.stat {
  font: inherit; text-align: left; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
button.stat:hover { border-color: var(--cf-orange); box-shadow: 0 3px 12px -8px rgba(74,56,36,.4); }
button.stat:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 2px; }
button.stat::after {
  content: "›"; position: absolute; top: 10px; right: 12px; color: var(--cf-orange);
  font-size: 15px; opacity: 0; transition: opacity .15s, transform .15s; transform: translateX(-3px);
}
button.stat:hover::after { opacity: 1; transform: none; }
button.stat.open { background: var(--cf-peach); box-shadow: inset 3px 0 0 var(--cf-orange); }
button.stat.open::after { opacity: 1; transform: none; }
.statnum { font-size: 30px; line-height: 1.05; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; }
.statlabel {
  margin-top: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 650; color: #8A8177;
}
.stat .crumb { margin-top: 3px; }
.statstable { max-width: 560px; }
/* The subtotal is the row the others add up to, so it reads as a rule under them rather
   than as one more department. */
.statstable tr.totalrow td { border-top: 2px solid var(--line); border-bottom: none; background: #FCFAF7; }

/* ── The drill-down sheet (cf-010 R6/R8): the docsheet box, filled with a list ── */
.statsheet .sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line-soft); }
.statsheet .sheet-head h2 { margin: 0 0 2px; font-size: 16px; }
.statsheet .sheet-body { overflow-y: auto; padding: 6px 0 30px; }
.sheet-filters { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: var(--paper-hi); flex-wrap: wrap; }
button.chip {
  font: inherit; font-size: 12px; padding: 3px 11px; border-radius: 20px; cursor: pointer;
  background: #fff; border: 1px solid var(--cf-border); color: var(--cf-text);
}
button.chip:hover { border-color: var(--cf-orange); }
button.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* One question per row: the question first, the evidence beneath, one click to the sources. */
.qrow { border-bottom: 1px solid var(--line-soft); }
.qrow.arrived, .prow.arrived { animation: rise .3s var(--rise) var(--adelay) both; }
.qrow > button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: 11px 18px 9px; cursor: pointer; }
.qrow > button:hover { background: var(--paper-hi); }
.qrow .q { font-size: 13.5px; color: var(--ink); line-height: 1.45; margin-bottom: 5px; }
.qmeta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--cf-muted); flex-wrap: wrap; }
.meter { width: 54px; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; flex: none; }
.meter i { display: block; height: 100%; background: var(--cf-orange); border-radius: 2px; }
.qband { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--label); }
.qband.none { color: var(--bad); }
.qdetail { padding: 2px 18px 13px; font-size: 12.5px; }
.qdetail.arrived { animation: rise .22s var(--rise) var(--adelay) both; }
.qdetail .qsrc { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 10px; border-left: 2px solid var(--line); margin: 2px 0; }
.qdetail .qsrc b { font-weight: 500; color: var(--ink); }
.qdetail .qsrc .sim { color: var(--cf-muted); font-variant-numeric: tabular-nums; flex: none; }
.qdetail .qsumm { color: var(--cf-muted); margin-top: 7px; line-height: 1.5; }
.qdetail .qgap { color: var(--bad); background: #FDF3F2; border: 1px solid #F2D9D6; border-radius: 8px; padding: 7px 11px; }
/* People rows: who the active tile counted, and when they were last seen. */
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.prow .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--cf-peach); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650; flex: none;
}
.prow .pnm { font-size: 13.5px; color: var(--ink); }
.prow .pem { font-size: 11.5px; color: var(--cf-muted); }
.prow .plast { margin-left: auto; font-size: 12px; color: var(--cf-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .arrived, main.screen.arrived > * { animation: none !important; }
}

/* ── Ask (cf-011): history rail · thread · composer, the second-brain chat shape ── */
/* The screen is a column the chat fills, at every width: a fixed height of the window less 110 px
   ran 26 to 28 px past the screen's padding, so the whole Ask area scrolled a little beside its own
   conversation scroll (Matt, 6 Oct 2026; on develop too). */
main.screen:has(> .askapp) { display: flex; flex-direction: column; padding-bottom: 10px; }
.askapp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
.histhide { background: none; border: 0; color: var(--cf-muted); cursor: pointer; padding: 0 10px; font-size: 16px; opacity: 0; }
.histhide:hover { color: var(--bad); }
.askchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
/* The conversation keeps a reading width, centred, with its scrollbar still at the screen edge.
   Its header carries the switcher (the title, which opens the conversation list) and New. */
.chathead { position: relative; z-index: 8; display: flex; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 6px; padding: 0 max(6px, calc((100% - 900px) / 2)); }
/* The header sits above the list's click-away layer, so New works and the title closes the list in one click. */
button.act.withicon { display: inline-flex; align-items: center; gap: 6px; }
.chathead [data-newconv] { margin-left: auto; flex: none; }
.convswitch {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 5px 9px; margin-left: -9px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.convswitch:hover, .convswitch[aria-expanded="true"] { background: #fff; border-color: var(--cf-border, #D9D9D9); }
.convswitch svg { flex: none; color: var(--label); }
.chattitle { font-weight: 650; color: var(--ink); font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The conversation list (cf-025 R4): a dropdown under the switcher, or over the landing. */
.convscrim { position: fixed; inset: 0; z-index: 6; }
.convpop {
  position: absolute; z-index: 7; top: 42px; left: max(6px, calc((100% - 900px) / 2)); width: min(420px, calc(100% - 12px));
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 10px 30px -10px rgba(46,42,38,.35), 0 2px 6px rgba(46,42,38,.08); max-height: min(480px, var(--room, 70vh)); box-sizing: border-box;
}
/* On the landing the list opens in place over the recent cards it extends. */
.landrecents .convpop { top: -4px; left: -4px; width: calc(100% + 8px); }
.convsearch input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--ink); background: #fff;
  border: 1px solid var(--cf-border, #D9D9D9); border-radius: 8px; padding: 7px 10px;
}
.convsearch input:focus { outline: none; border-color: var(--cf-orange); }
.convrows { overflow-y: auto; min-height: 0; }
.convrow { position: relative; display: flex; align-items: center; border-radius: 7px; }
.convrow:hover { background: var(--paper-hi); }
.convrow.active { background: var(--cf-peach); }
.convopen { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 7px 10px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: var(--cf-text); }
.convopen .cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.convopen .ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convopen .cm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--cf-muted); }
.convmore { display: block; margin: 6px 10px 2px; color: var(--cf-blue); font-weight: 600; font-size: 12.5px; }
.convmore:hover:not(:disabled) { color: var(--cf-orange); text-decoration: underline; }
.convopen .cd { flex: none; font-size: 11.5px; color: var(--cf-muted); font-variant-numeric: tabular-nums; }
.convrow.active .convopen { color: var(--ink); font-weight: 600; }
.convnote { color: var(--cf-muted); font-size: 12.5px; padding: 6px 10px; line-height: 1.5; }
/* The remove button takes no width until the row is hovered, so titles use the whole row. */
.convrow .histhide { position: absolute; right: 0; top: 0; bottom: 0; padding: 0 9px; display: none; background: var(--paper-hi); border-radius: 0 7px 7px 0; }
.convrow.active .histhide { background: var(--cf-peach); }
.convrow:hover .histhide, .convrow .histhide:focus-visible { display: block; opacity: 1; }
@media (hover: none) { .convrow .histhide { display: block; } .convopen { padding-right: 30px; } }

/* Landing recents (cf-025 R4): the last four conversations under the question box. */
.landrecents { position: relative; width: 100%; max-width: 900px; margin: 20px auto 0; box-sizing: border-box; }
.landrecents .flabel { margin: 0 0 7px 4px; }
.landgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.landcard {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 13px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13px; color: var(--cf-text);
}
.landcard:hover { border-color: var(--cf-orange); color: var(--ink); }
.landcard span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landcard svg { flex: none; color: var(--label); }
.alllink { margin: 9px 0 0 4px; color: var(--cf-blue); font-weight: 600; font-size: 12.5px; }
.alllink:hover { color: var(--cf-orange); text-decoration: underline; }
@media (max-width: 640px) { .landgrid { grid-template-columns: 1fr; } }
.msgs { flex: 1; overflow-y: auto; padding: 4px max(6px, calc((100% - 900px) / 2)) 12px; display: flex; flex-direction: column; }
.askhead { text-align: center; margin: auto 0; padding: 40px 12px; }
.askhead h1 { font-size: 24px; margin: 0 0 8px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.askhead .sparky { width: 44px; height: auto; flex: none; }
/* The landing (cf-025 R1): heading and composer are one centred block until the first question. */
.askapp.landing .askchat { justify-content: center; padding-bottom: 12vh; }
.askapp.landing .msgs { flex: 0 0 auto; overflow: visible; }
.askapp.landing .askhead { margin: 0; padding: 0 12px 22px; }
.askapp.landing .askhead h1 { font-size: 30px; }
.askapp.landing .composer { padding: 16px 14px 16px 20px; }
/* Bottom-anchored like every chat box, so a long question grows the box above the button; the
   nudge centres it on a single line of text. */
.askapp.landing .composer .act { margin-bottom: 3px; }
/* One line tall, so the Ask button lines up with the text; the box's size comes from padding. */
.askapp.landing .composer textarea { font-size: 16px; }
.askhead .lede { margin: 0 auto; text-align: center; }
.msg-user { align-self: flex-end; background: var(--cf-blue); color: #fff; border-radius: 15px 15px 4px 15px; padding: 10px 15px; max-width: 75%; margin: 14px 0 0; box-shadow: 0 4px 14px -8px rgba(43,123,185,.5); line-height: 1.5; }
.msg-ai { align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; box-shadow: var(--shadow-card); margin-top: 12px; }
.msg-user.arrived, .msg-ai.arrived { animation: rise .3s var(--rise) var(--adelay) both; }
.answer p { margin: 0 0 8px; line-height: 1.6; }
.answer ol, .answer ul { margin: 4px 0 10px; padding-left: 26px; }
.answer li { margin-bottom: 5px; line-height: 1.55; }
.answer a.cite { color: var(--cf-blue); text-decoration: none; font-size: 12px; vertical-align: super; margin-left: 1px; }
.answer a.cite:hover { color: var(--cf-orange); }
.srcline { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line-soft); font-size: 12.5px; color: var(--cf-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.srclabel { font-weight: 600; }
.srcchip { color: var(--cf-blue); text-decoration: none; font-weight: 600; font-size: 12.5px; }
.srcchip:hover { color: var(--cf-orange); text-decoration: underline; }
.srchint { opacity: .7; }
.msgfoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.scanerr.inline { display: inline; padding: 0; background: none; border: 0; }
.chip.conf-high { background: #E8F3EA; color: var(--ok); }
.chip.conf-medium { background: #FFF3E0; color: #9a5b00; }
.chip.conf-low, .chip.conf-none { background: #F3F0EB; color: var(--cf-muted); }
.tdots { color: var(--cf-muted); }
.tdots span { animation: blink 1.2s infinite; font-weight: 700; }
.tdots span:nth-child(2) { animation-delay: .2s; } .tdots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.composer { display: flex; gap: 8px; align-items: flex-end; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; box-shadow: var(--shadow-card); margin-top: 8px; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.composer textarea { flex: 1; border: 0; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5; padding: 8px 0; min-height: 24px; max-height: 160px; background: transparent; color: var(--ink); }
.composer textarea:focus { outline: none; }
.composer:focus-within { border-color: var(--cf-orange); }
.composer .act { min-width: 64px; }
@media (max-width: 900px) {
  .msg-user { max-width: 90%; }
  .composer { margin-bottom: env(safe-area-inset-bottom, 0); }
}
@media (max-width: 640px) {
  .msg-ai { padding: 14px 15px; }
  .answer ol, .answer ul { padding-left: 22px; }
  /* A superscript [1] is too small a target for a thumb. */
  .answer a.cite { padding: 2px 3px; }
  /* 16px or more, or iOS zooms the page in when the field takes focus. */
  .composer textarea, .docsearch { font-size: 16px; }
  /* Room for a placeholder that wraps to two lines at phone width. */
  .composer textarea { min-height: 66px; }
  .askapp.landing .askhead h1 { font-size: 22px; gap: 8px; }
  .askhead .sparky { width: 32px; }
}
/* Touch has no hover, so the rail's hide button is shown rather than revealed. */
@media (hover: none) { .histhide { opacity: .55; } }

/* ── answer feedback (cf-013): thumbs under each answer, the reason chooser under a thumbs-down ── */
.votes { display: inline-flex; gap: 4px; margin-left: auto; }
.votebtn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 3px 9px; cursor: pointer;
  font-size: 15px; line-height: 1.3; filter: grayscale(1); opacity: .7; transition: opacity .15s, border-color .15s, background .15s;
}
.votebtn:hover:not(:disabled) { opacity: 1; filter: none; border-color: var(--cf-orange); }
.votebtn.on { filter: none; opacity: 1; background: var(--cf-peach); border-color: var(--cf-orange); }
.votebtn:disabled { cursor: default; }
.votebtn:disabled:not(.on) { opacity: .35; }
.voteack { font-size: 12.5px; color: var(--cf-muted); }
.voteack.arrived { animation: fadein .3s var(--adelay) both; }
.fbchooser { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-hi); }
.fbchooser.arrived { animation: rise .22s var(--rise) var(--adelay) both; }
.fbchooser .flabel { display: block; margin-bottom: 6px; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fbfield { display: block; margin-bottom: 10px; }
.fbfield .adm-select { min-width: 220px; max-width: 100%; }
.fbcomment {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink); background: #fff;
  border: 1px solid var(--cf-border, #D9D9D9); border-radius: 8px; padding: 8px 10px; resize: vertical;
}
.fbcomment:focus { outline: none; border-color: var(--cf-orange); }
.fbactions { display: flex; gap: 8px; }
.fbactions .act { min-width: 84px; text-align: center; }
@media (max-width: 640px) {
  .votebtn { padding: 7px 12px; font-size: 17px; }
  .reasons { flex-direction: column; align-items: stretch; }
  .reasons .reasonchip { text-align: left; padding: 9px 12px; font-size: 14px; border-radius: 9px; }
  .fbfield .adm-select { width: 100%; font-size: 16px; }
  .fbcomment { font-size: 16px; }
  .fbactions .act { flex: 1; padding: 10px; font-size: 14px; }
}

/* ── the in-app reader (cf-011) ── */
.srcpair { display: inline-flex; align-items: center; gap: 2px; }
.srcchip { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--cf-blue); font-weight: 600; font-size: 12.5px; }
.srcchip:hover { color: var(--cf-orange); text-decoration: underline; }
.srcdate { color: var(--cf-muted); font-size: 12px; margin-left: 5px; white-space: nowrap; }
.srcext { color: var(--cf-muted); text-decoration: none; font-size: 12px; padding: 0 3px; }
.srcext:hover { color: var(--cf-orange); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.doclink.linkbtn { color: var(--cf-blue); font-weight: 500; }
.doclink.linkbtn:hover { color: var(--cf-orange); text-decoration: underline; }
.docsheet { position: fixed; top: 52px; right: 0; bottom: 0; width: min(560px, 100vw); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 34px -22px rgba(74,56,36,.35); display: flex; flex-direction: column; z-index: 20; }
.docsheet.arrived { animation: rise .25s var(--rise) var(--adelay) both; }
.docsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line-soft); }
.docsheet-title h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.docsheet-actions { display: flex; gap: 6px; flex: none; align-items: center; }
/* On Ask and Browse, with room for both, the reader is a column beside the conversation or the
   list, which narrows to make room (cf-025 R6). Full screen widens the reader and keeps the
   conversation or the list as a narrow column beside it, so a person can still pick the next
   citation or document (Matt, 5 Oct 2026). Narrower, and on every other screen, it stays an
   overlay: a pushed screen under 1100px leaves the chat too narrow to read, and the other
   screens' tables need their width. */
.applayout button.docsize { display: none; }
@media (min-width: 1100px) {
  .readerbeside > .docsheet:not(.statsheet) { position: relative; top: auto; right: auto; bottom: auto; flex: 0 0 min(560px, 48%); width: auto; z-index: 1; box-shadow: none; }
  .readerbeside button.docsize { display: inline-flex; }
  /* Beside the reader the conversation or list keeps at least 380 px, the document giving way
     first. Full screen gives the document everything but a quarter of the screen for the
     conversation or list (400 to 560 px), so it is clearly bigger on any monitor (Matt, 6 Oct 2026). */
  .readerbeside > main.screen { min-width: 380px; }
  .readerexpanded > main.screen { flex: 0 0 clamp(400px, 25%, 560px); min-width: 400px; }
  /* Browse's list keeps its four columns readable (Matt, 6 Oct 2026: the wider list over a bigger
     document): at least 520 px, a third of the screen on a large monitor, beside and full screen. */
  .readeronbrowse > main.screen { min-width: 520px; }
  .readerexpanded.readeronbrowse > main.screen { flex: 0 0 clamp(520px, 33%, 720px); }
}
/* Below 1500 px the 520 px list leaves full screen nothing (1280 px and under) or about 70 px to
   give, so Browse does not offer it there (Matt, 6 Oct 2026). */
@media (min-width: 1100px) and (max-width: 1499px) {
  .readeronbrowse button.docsize { display: none; }
  .readerexpanded.readeronbrowse > main.screen { flex: 1 1 auto; }
  .readerexpanded > .docsheet:not(.statsheet) { flex: 1 1 auto; }
  .readerexpanded > .docsheet .docsheet-body { padding-left: max(18px, calc((100% - 860px) / 2)); padding-right: max(18px, calc((100% - 860px) / 2)); }
}
.docsheet-actions .act { text-decoration: none; display: inline-block; line-height: 1.4; }
.docsheet-note { font-size: 12px; color: var(--cf-muted); padding: 8px 18px; background: var(--paper-hi); border-bottom: 1px solid var(--line-soft); }
.docsheet-body { overflow-y: auto; padding: 14px 18px 30px; font-size: 14px; line-height: 1.6; }
.docsheet-body h2, .docsheet-body h3, .docsheet-body h4 { margin: 18px 0 6px; color: var(--ink); }
.docsheet-body h2 { font-size: 15px; } .docsheet-body h3 { font-size: 14px; } .docsheet-body h4 { font-size: 13.5px; }
.docsheet-body p { margin: 0 0 9px; }
.docsheet-body mark { background: #FFF1C2; padding: 1px 2px; border-radius: 3px; }
@media (max-width: 640px) {
  /* The reader takes the whole phone screen. Close and the SharePoint link share the top row,
     Close on the left where a back control sits; the title gets the full width below them. */
  .docsheet { top: 0; width: 100vw; }
  .docsheet-head { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 12px 14px 10px; }
  .docsheet-actions { justify-content: space-between; }
  .docsheet-actions #docClose { order: -1; }
  .docsheet-title h2 { font-size: 17px; }
  .docsheet-body { padding: 12px 14px 30px; }
}

/* Browse beside the reader keeps every column (Matt, 6 Oct 2026); in the narrower list the date and
   the headings wrap and the cells tighten, so the last column is never cut off. */
@media (min-width: 1100px) {
  .readerbeside table.browselist th, .readerbeside table.browselist .modcell { white-space: normal; }
  .readerbeside table.browselist th, .readerbeside table.browselist td { padding-left: 10px; padding-right: 10px; }
  .readerbeside table.browselist td .doclink { overflow-wrap: anywhere; }
  .readerbeside table.browselist .filename { overflow-wrap: anywhere; }
}

/* ── Browse at narrow widths: each document is a card, not a table row ── */
.browselist .rowmeta { display: none; }
@media (max-width: 900px) {
  table.browselist, .browselist tbody, .browselist tr, .browselist td { display: block; }
  .browselist thead { display: none; }
  .browselist td:not(:first-child) { display: none; }
  .browselist td { padding: 11px 14px; }
  .browselist .rowmeta { display: block; margin: 3px 0 0; }
  .browselist .filename { display: none; }
}
@media (max-width: 640px) {
  .browselist .srcext { display: none; }
  .browselist .doclink.linkbtn { font-size: 15px; }
  main.screen .browselede { display: none; }
  /* Departments ride one row that scrolls sideways, rather than wrapping into a block. */
  .browsechips { flex-wrap: nowrap; overflow-x: auto; margin-right: -14px; padding-right: 14px; scrollbar-width: none; }
  .browsechips::-webkit-scrollbar { display: none; }
  .browsechips .filterbtn { flex: none; }
  .docsearch { width: 100%; }
}

.dochtml h1 { font-size: 17px; margin: 18px 0 8px; }
.dochtml h2 { font-size: 15.5px; margin: 16px 0 6px; }
.dochtml h3, .dochtml h4 { font-size: 14px; margin: 14px 0 6px; }
.dochtml p { margin: 0 0 9px; }
.dochtml ul, .dochtml ol { margin: 4px 0 10px; padding-left: 24px; }
.dochtml li { margin-bottom: 4px; }
.dochtml table { border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; max-width: 100%; display: block; overflow-x: auto; }
.dochtml td, .dochtml th { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; }
.dochtml img { max-width: 100%; height: auto; display: block; margin: 8px 0 12px; border: 1px solid var(--line-soft); border-radius: 6px; }
.dochtml mark { background: #FFF1C2; padding: 1px 2px; border-radius: 3px; }

/* ── The governance gate (cf-014): the inbox and the document page ── */
.chip.review { background: #FFF3E0; color: #9a5b00; }
.chip.archived { background: #ECEAE5; color: #6F675E; }
.chip.sm { font-size: 10.5px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
/* Why a line is under review: small outlined tags beneath the status, in the fixed order. */
.reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reason { font-size: 10.5px; line-height: 1.5; padding: 0 7px; border: 1px solid #E5C9A0; border-radius: 999px; color: #9a5b00; background: #fff; white-space: nowrap; }
.linewhy .reason { margin-right: 6px; vertical-align: 1px; }
table.govqueue .comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 60ch; line-height: 1.45; }
/* Hovering the row shows the whole comment in place, at once; a floating card would be clipped by the table. */
table.govqueue tr.doc:hover .comment { -webkit-line-clamp: unset; }
.linewhy { margin: 4px 0 10px; font-size: 13px; }
.linewhy .linecomment { margin-left: 2px; color: var(--cf-text); }
.chip.idx.indexing { background: #FFF8E6; color: #8A6D00; }
.chip.idx.indexed { background: #EDF4EE; color: #5F8763; }
.chip.idx.not-indexed { background: #F9EDEB; color: #B0655C; }
.crumb.idx { display: block; margin: 2px 0 0; font-size: 11.5px; }
.crumb.idx.not-indexed { color: #B0655C; }
table.govqueue tr.doc { cursor: pointer; }
table.govqueue td.filetype { font-size: 11.5px; letter-spacing: 0.04em; color: var(--cf-muted); white-space: nowrap; }
table.govqueue td.reviewdate { white-space: nowrap; font-weight: 600; }
table.govqueue .subfolder { white-space: normal; }
table.govqueue td .doclink.linkbtn { color: var(--ink); font-weight: 600; }
table.govqueue tr.doc:hover .doclink.linkbtn { color: var(--cf-orange); }
.scanresult.bad { color: var(--bad); }

/* The document page: header with the fact line, two slide-downs, the full-width preview. */
.docback { margin-bottom: 14px; }
.backbtn { font-weight: 600; }
.filterbar.deptline { margin-bottom: 8px; }
/* The search bar and the header row stay in view as a long list scrolls (Governance, Users).
   clip, not hidden: hidden makes the table its own scroll box and the header would never stick. */
.filterbar.stickybar { position: sticky; top: -24px; z-index: 3; margin: 0 -26px; padding: 12px 26px 12px; }
main.screen.scrolled .filterbar.stickybar { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
table.queue.stickyhead { overflow: clip; }
table.queue.stickyhead th { position: sticky; top: calc(var(--stickbar, 0px) - 24px); z-index: 2; }
.docpage.arrived { animation: rise .3s var(--rise) var(--adelay) both; }
.dochead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
/* The document's header as one card (Adam, 4 Oct 2026): the title and path on the ink chrome the
   queue's column headers use, the fact line and the actions on white below it, so the chips keep
   their colours and the buttons their usual ground. */
.docpage > .dochead { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
/* Full width at the top of the panel (Adam, 4 Oct 2026): the header spans the screen edge to edge; the
   sections below keep the same edges as the list views, so detail and list pages line up. */
.docpage > .dochead { margin: -24px -26px 18px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.docpage > .dochead > .dochead-band { border-radius: 0; padding-left: 26px; padding-right: 26px; }
.docpage > .dochead > .dochead-row { padding-left: 26px; padding-right: 26px; }
/* Properties and Version history open from the header they belong to, full width under its row,
   pushing the rest of the page down (Adam, 4 Oct 2026). */
.dochead > .drawer, .dochead > .revsheet { margin: 0; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.dochead > .drawer > .sheettop, .dochead > .revsheet > .sheettop { border-radius: 0; padding-left: 26px; padding-right: 26px; }
.dochead > .drawer > .propgrid { padding-left: 26px; padding-right: 26px; border-radius: 0; }
.dochead > .revsheet table.revtable th:first-child, .dochead > .revsheet table.revtable td:first-child { padding-left: 26px; }
/* An open drawer is part of the header, so the orange rule closes the header below it; between the
   band and the drawer's strip a hairline marks the seam (Adam, 4 Oct 2026). */
.dochead:has(> .drawer, > .revsheet) > .dochead-band { border-bottom: 1px solid rgba(246, 241, 233, .2); }
.dochead > .drawer, .dochead > .revsheet { border-top: none; }
.dochead > .drawer > .sheettop, .dochead > .revsheet > .sheettop { border-bottom: none; }
.dochead > .drawer + .revsheet > .sheettop { border-top: 1px solid rgba(246, 241, 233, .2); }
.dochead > .drawer:last-child, .dochead > .revsheet:last-child { border-bottom: 2px solid var(--cf-orange); }
@media (max-width: 900px) {
  .docpage > .dochead { margin: -14px -14px 14px; }
  .docpage > .dochead > .dochead-band, .docpage > .dochead > .dochead-row { padding-left: 14px; padding-right: 14px; }
}
.dochead-band {
  padding: 14px 20px 12px; border-radius: 11px 11px 0 0;
  background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%); border-bottom: 2px solid var(--cf-orange);
}
.dochead-band h1, main.screen .dochead-band h1 { margin: 0 0 4px; line-height: 1.3; color: #F6F1E9; }
/* Status and reason beside the title (Adam, 4 Oct 2026): what state it is in and why it is here, read
   with the title. Both carry their own solid ground, so they keep their colours on the band. */
.bandtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; }
.bandtitle h1, main.screen .bandtitle h1 { margin: 0; }
.bandchips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The status and the reason side by side in one size and shape (Adam, 4 Oct 2026): the status filled, the reason outlined. */
.bandchips .chip, .bandchips .reason { font-size: 12px; line-height: 1.4; padding: 3px 10px; border-radius: 999px; font-weight: 600; margin: 0; vertical-align: middle; }
.bandchips .reason { border-width: 1px; }
/* Back to the queue sits in the band: everything on this page that acts on the document lives in its header. */
.bandback { display: inline-block; border: 1px solid rgba(246, 241, 233, .45); border-radius: 14px; background: none; padding: 3px 11px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #E8E2D8; cursor: pointer; font-family: inherit; }
.bandback:hover, .bandback:focus-visible { color: #fff; border-color: #fff; outline: none; }
.dochead-band .crumb { color: #CFC6B8; }
.dochead-band .sitelink { color: #A9CFEF; }
.dochead-band .sitelink:hover { color: #fff; }
/* One header block (Adam, 4 Oct 2026: "does having this white bar not fold into header buy us anything?"):
   the facts, the icons, the actions and the what-changed line join the title in the dark band. Actions sit
   top right beside the title; the rest stays in the left column. */
.dochead-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
.dochead-band > * { grid-column: 1; }
/* Back to the queue keeps its own line at the top left; the actions sit at the bottom right, level with the facts (Adam, 4 Oct 2026). */
.dochead-band > .bandback { justify-self: start; }
.dochead-band > .bandicons { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; display: flex; gap: 8px; }
/* The top bar sits above the icons, so their names open below, ending at the icon's right edge. */
.bandicons .icontoggle[data-label]::after { bottom: auto; top: calc(100% + 7px); left: auto; right: 0; transform: translateY(-3px); z-index: 6; }
.bandicons .icontoggle[data-label]:hover::after, .bandicons .icontoggle[data-label]:focus-visible::after { transform: none; }
.dochead-band > .dochead-actions { grid-column: 2; grid-row: 2 / span 3; align-self: end; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dochead-band .factline { margin-top: 8px; color: #CFC6B8; }
.dochead-band .factline .fact + .fact::before { color: rgba(246, 241, 233, .45); }
.dochead-band .whyline { color: #B9AE9F; margin-top: 6px; }
.dochead-band .crumb.hazardbeside { color: #E8E2D8; }
.dochead-band .icontoggle { background: transparent; border-color: rgba(246, 241, 233, .45); color: #E8E2D8; }
.dochead-band .icontoggle:hover { border-color: #fff; color: #fff; }
.dochead-band .icontoggle.on { background: rgba(246, 241, 233, .16); border-color: #fff; color: #fff; }
.dochead-band .act.secondary, .dochead-band .act.deny { background: transparent; border: 1px solid rgba(246, 241, 233, .55); color: #F6F1E9; }
.dochead-band .act.secondary:hover, .dochead-band .act.deny:hover { border-color: #fff; color: #fff; background: rgba(246, 241, 233, .08); }
/* button.act.deny's own hover paints a light ground and outranks the rule above, so its text takes red
   to stay readable, the way Re-pull's takes orange. */
.dochead-band button.act.deny:hover:not(:disabled) { color: var(--bad, #b3261e); }
/* The filled action carries the outlined ones' 1px border, invisible, so the header's buttons share one height. */
.dochead-band .dochead-actions button.act:not(.secondary):not(.deny) { border: 1px solid transparent; }
.dochead-band .act:disabled { opacity: .55; }
@media (max-width: 900px) {
  .dochead-band { grid-template-columns: minmax(0, 1fr); }
  .dochead-band > .dochead-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 10px; }
  .dochead-band > .bandicons { grid-column: 1; grid-row: 1; }
}
.dochead-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 20px; }
.dochead-row .factline { margin-top: 0; flex: 1; min-width: 0; }
.whyline { flex-basis: 100%; font-size: 12.5px; color: var(--cf-muted); line-height: 1.45; margin-top: -2px; }
.dochead-main { min-width: 0; flex: 1; }
.dochead-main h1 { margin: 0 0 3px; line-height: 1.3; }
.dochead-actions { display: flex; gap: 8px; flex: none; align-items: center; }
.noticepage .noticewhat { font-size: 15px; color: var(--ink); margin: 14px 0 6px; }
.factline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 13px; color: var(--cf-text); }
.factline .fact { white-space: nowrap; }
.factline .fact + .fact::before { content: "·"; color: var(--cf-muted); margin-right: 10px; }
.icontoggle {
  border: 1px solid var(--cf-border); background: #fff; border-radius: 8px; width: 30px; height: 28px;
  cursor: pointer; font-size: 15px; line-height: 1; color: var(--cf-muted); transition: border-color .12s, color .12s, background .12s;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.icontoggle:hover { border-color: var(--cf-orange); color: var(--cf-orange); }
/* A quick label for the two icon toggles, the info notes' style: a short pause, then above the icon. */
.icontoggle[data-label] { position: relative; }
.icontoggle[data-label]::after {
  content: attr(data-label); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 3px);
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 4px 9px; font-size: 12px; line-height: 1.3; white-space: nowrap; font-family: inherit;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.icontoggle[data-label]:hover::after, .icontoggle[data-label]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .2s, .2s, .2s; }
.icontoggle.on { background: var(--cf-peach); border-color: var(--cf-orange); color: var(--ink); }
.revline { font-size: 13.5px; color: var(--cf-text); margin: 0 0 12px; line-height: 1.55; max-width: 100ch; }
.revline b { color: var(--ink); }
.denyreason { margin: -6px 0 12px; }
.panel.denybox { max-width: 640px; }
.panel.denybox.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.denybox textarea.adm-input { width: 100%; resize: vertical; font-family: inherit; line-height: 1.5; }
.propgrid {
  display: grid; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; box-shadow: var(--shadow-card);
}
.propgrid.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.prop .plabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--label); margin-bottom: 2px; }
.prop .pvalue { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.revsheet { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
/* The Properties drawer, the same card and title strip as Version history. */
.drawer { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.drawer.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.drawer .propgrid { border: none; border-radius: 0 0 12px 12px; box-shadow: none; margin: 0; }
/* Fixed rows sized to what they hold (cf-036): the title the full width, short values side by side. */
.drawer .propset { display: grid; gap: 14px 28px; }
.drawer .propset.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer .propset.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drawer .propset > .prop { min-width: 0; }
.drawer .propsub { display: flex; align-items: center; gap: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--label); }
.drawer .propsub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.drawer .propnote { font-size: 12.5px; color: var(--cf-muted); }
.drawer .propfoot { font-size: 12px; color: var(--cf-muted); border-top: 1px solid var(--line-soft); padding-top: 10px; }
/* A note in a row's right-hand column opens leftward, so it stays on the screen. */
.drawer .propset.two > .prop:last-child .tippop, .drawer .propset.three > .prop:last-child .tippop { left: auto; right: -10px; }
.drawer .propset.two > .prop:last-child .tippop::before, .drawer .propset.three > .prop:last-child .tippop::before { left: auto; right: 13px; }
@media (max-width: 700px) {
  .drawer .propset.two, .drawer .propset.three { grid-template-columns: minmax(0, 1fr); }
  .drawer .propset.two > .prop:last-child .tippop, .drawer .propset.three > .prop:last-child .tippop { left: -10px; right: auto; }
  .drawer .propset.two > .prop:last-child .tippop::before, .drawer .propset.three > .prop:last-child .tippop::before { left: 13px; right: auto; }
  .tippop { width: min(280px, calc(100vw - 40px)); }
}
/* An editable value's pencil reads as a control; it dims while another value is being edited. */
.drawer .editval .pencil { stroke: var(--cf-orange); opacity: .75; }
.drawer .editval:hover .pencil, .drawer .editval:focus-visible .pencil { opacity: 1; }
.editval.dim { cursor: default; opacity: .5; }
/* The title editor: the full row, wrapping, the actions beneath so they never take its width. */
.drawer .titleedit .titleinput { display: block; width: 100%; resize: none; overflow: hidden; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink); padding: 7px 10px; }
.drawer .titleedit .editbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.drawer .titleedit .editbar .crumb { margin: 0; flex: 1; min-width: 240px; }
.drawer .titleedit .editactions { margin-left: 0; }
/* The header summary is one control: a click opens Properties. */
.factline .summary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; background: none; border: none; padding: 2px 6px; margin: 0 0 0 -6px; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.factline .summary:hover, .factline .summary:focus-visible { background: rgba(246, 241, 233, .08); color: #F6F1E9; outline: none; }
.sheettools { display: flex; align-items: center; gap: 12px; }
/* A button's keyboard shortcut, on hover or keyboard focus (cf-036 R4, F9): the icon labels' style,
   below the button, each key drawn as a keycap. Primary actions end at their right edge; Back starts at its left. */
[data-keyhint] { position: relative; }
.keytip {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 6; display: inline-flex; align-items: center; gap: 4px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-card);
  padding: 4px 9px; font: 400 12px/1.3 var(--font-ui); white-space: nowrap; text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-3px); transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.bandback .keytip { left: 0; right: auto; }
/* A keyboard hint is for a keyboard: a touch screen has none, and a hidden hint still has a box that hangs
   off the screen's edge when its button sits at the edge, as the reader's Close does on a phone. */
@media (hover: none) { .keytip { display: none; } }
.keytip .keysep { color: var(--cf-muted); margin: 0 2px; }
.keytip .keyplus { color: var(--cf-muted); font-size: 11px; }
.keytip kbd { font: 600 11px/1 var(--font-ui); color: var(--ink); background: var(--paper-hi); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; }
[data-keyhint]:hover > .keytip, [data-keyhint]:focus-visible > .keytip { opacity: 1; visibility: visible; transform: none; transition-delay: .4s, .4s, .4s; }
/* Hide folds the panel away; Back to the queue's outline, so it reads as a control. */
.hidebtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(246, 241, 233, .45); border-radius: 14px; background: none; padding: 2px 10px 2px 11px; font: 600 12px/1.4 var(--font-ui); color: #E8E2D8; cursor: pointer; }
.hidebtn span { font-size: 13px; line-height: 1; transform: translateY(2px); }
.hidebtn:hover, .hidebtn:focus-visible { color: #fff; border-color: #fff; outline: none; background: rgba(246, 241, 233, .08); }
.drawerclose { border: none; background: none; font-size: 18px; line-height: 1; padding: 0 2px; color: #CFC6B8; cursor: pointer; font-family: inherit; }
.drawerclose:hover, .drawerclose:focus-visible { color: #fff; outline: none; }
/* The three page strips (Properties, Version history, Preview) on the same ink chrome. */
.drawer > .sheettop, .revsheet > .sheettop, .docpreview > .sheettop {
  background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%); border-bottom: 2px solid var(--cf-orange);
}
.drawer > .sheettop { border-radius: 11px 11px 0 0; }
.drawer > .sheettop .sheettitle, .revsheet > .sheettop .sheettitle, .docpreview > .sheettop .sheettitle { color: #E8E2D8; }
.revsheet > .sheettop .toggle, .docpreview > .sheettop .crumb { color: #CFC6B8; }
/* Under a dark strip, the version table's own column row steps down to a light sub-header. */
.revsheet table.revtable th { background: #fff; color: var(--label); border-bottom: 1px solid var(--line); }
.revsheet.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.sheettop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.sheettitle { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; color: var(--label); }
.toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--cf-text); cursor: pointer; }
.toggle input { accent-color: var(--cf-orange); width: 15px; height: 15px; }
table.revtable { border: none; border-radius: 0; box-shadow: none; }
table.revtable td.whatchanged { font-size: 13px; line-height: 1.5; max-width: 60ch; }
table.revtable tr.served td { background: #FCFAF7; }
table.revtable tr.pending td { background: #FFFBF4; }
/* The value is the edit control (cf-015): a quiet pencil after it, orange on hover and focus. */
.editval { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; }
.editval .pencil { fill: none; stroke: var(--label); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.editval:hover, .editval:focus-visible { color: var(--ink); outline: none; }
.editval:hover .pencil, .editval:focus-visible .pencil { stroke: var(--cf-orange); }
.editval:focus-visible { box-shadow: 0 0 0 2px rgba(225, 91, 40, .25); }
.propedit .pvalue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.propedit .adm-input { flex: 1; min-width: 220px; }
.propedit .editactions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.propedit .editactions { display: flex; gap: 6px; }
.propedit .crumb { flex-basis: 100%; }
.discarded { margin: 0 0 10px; }
td.filetype .version { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Before you approve: what blocks approval, each with a Fix now (cf-015). */
.notset { color: #B0655C; font-weight: 600; }
.lockwarn { border: 1px solid #E6CFA3; background: #FBF5E8; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: 13.5px; color: var(--ink); }
.lockwarn.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.lockwarn-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #9A7A2E; margin-bottom: 4px; }
.blockers { border: 1px solid #E4B8B3; background: #FDF4F3; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.blockers.arrived { animation: rise .2s var(--rise) var(--adelay) both; }
.blockers-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #B0655C; margin-bottom: 6px; }
.blockers ul { list-style: none; margin: 0; padding: 0; }
.blockers li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); padding: 4px 0; }
.blocker-mark { width: 8px; height: 8px; border-radius: 50%; background: #B0655C; flex: none; }
.blocker-text { flex: 1; }
/* The info mark (Adam, 4 Oct 2026): help opens over the page after a short pause, never pushing it down. */
.tipwrap { position: relative; display: inline-block; margin-left: 3px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.infotip { border: none; background: none; padding: 0 2px; font-size: 11px; line-height: 1; color: var(--cf-muted); cursor: help; font-family: inherit; }
.infotip:hover, .infotip:focus-visible { color: var(--cf-orange); outline: none; }
.tippop {
  position: absolute; left: -10px; bottom: calc(100% + 8px); z-index: 20; width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  visibility: hidden; opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
/* Above the label, so the note never covers the field it explains; the caret points down at the mark. */
.tippop::before { content: ''; position: absolute; bottom: -5px; left: 13px; width: 8px; height: 8px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.tipline { display: block; }
.tipline + .tipline { margin-top: 6px; color: var(--cf-text); }
.tipwrap:hover .tippop { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: .45s, .45s, .45s; }
/* Never sticks: a mouse click does not pin it; only keyboard focus holds it, until Tab or Escape. */
.tipwrap:has(.infotip:focus-visible) .tippop { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.optionhelp { flex-basis: 100%; font-size: 12.5px; color: var(--cf-text); }
/* One block or flag: what in bold, why muted beside it, what to do on its own line (cf-031 R3). */
.blockers li { align-items: flex-start; }
.blockers li .blocker-mark { margin-top: 6px; }
.blocker-why { color: var(--cf-text); }
.blocker-todo { display: block; margin-top: 2px; }
/* A pair's other documents, one per line under the heading; a conflict's sentence beneath its file. */
.flagfile { display: block; margin-top: 3px; color: var(--cf-text); overflow-wrap: anywhere; }
.flagnote { display: block; color: var(--cf-muted); font-style: italic; }
.findingline .flagfile { font-size: 12.5px; }
.blockers.flags { border-color: #E6CFA3; background: #FBF5E8; }
.blockers.flags .blockers-title { color: #9A7A2E; }
.blockers.flags .blocker-mark { background: #C9A14A; }
.flagsnote { margin-top: 4px; }
.findingline { margin-top: 4px; font-size: 12.5px; }
/* Hazard Level: SharePoint's own pills, solid and saturated so Danger never reads as Denied (cf-015 Phase 3). */
.chip.hazard { font-weight: 600; border: 1px solid transparent; }
.chip.hazard.danger { background: #A4262C; color: #FFFFFF; border-color: #A4262C; }
.chip.hazard.warning { background: #FFB900; color: #323130; border-color: #FFB900; }
h1 .chip.hazard { font-size: 12px; vertical-align: middle; }
.hazardwhy { flex-basis: 100%; }
.hazardbeside { margin-left: 8px; }
table.revtable tr.evrow td { background: var(--paper-hi); color: var(--cf-text); }
table.revtable tr.evrow .evtype { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--label); padding-left: 14px; }
table.revtable tr.ev-approved .evtype { color: #5F8763; }
table.revtable tr.ev-denied .evtype { color: #B0655C; }
.docpreview { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.docpreview .dochtmlwrap { padding: 18px 26px 40px; max-width: none; }
@media (max-width: 900px) {
  .dochead { flex-direction: column; }
  .dochead-actions { width: 100%; justify-content: flex-start; }
  .docpreview .dochtmlwrap { padding: 14px 16px 30px; }
}
@media (max-width: 640px) {
  /* The revision sheet stacks each row: five columns do not fit a phone, and governance is
     desktop work by scope; this only keeps a narrowed window from clipping. */
  table.revtable, .revtable tbody, .revtable tr, .revtable td { display: block; }
  .revtable tr:has(th) { display: none; }
  .revtable tr { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .revtable td { padding: 3px 14px; border-bottom: none; }
  .revtable td.rowactions { text-align: left; }
  table.govqueue { display: block; overflow-x: auto; }
}

/* System Health's scan log (cf-019): a failed or taken-over scan reads red. */
table.scanlog tr.bad td { color: var(--bad, #b3261e); }
table.scanlog tr.bad td .crumb { color: var(--bad, #b3261e); }

/* A list that scrolls keeps the position it had when something inside it changes. The browser's
   scroll anchoring would otherwise shift it to follow whatever it picked as the anchor. */
[data-keepscroll] { overflow-anchor: none; }

/* The document as it is (cf-038): PDF.js pages with their text layer, and Microsoft's sheet viewer. */
.docsheet-body.asis { flex: 1 1 auto; min-height: 0; min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.docsheet.asis { min-width: 0; overflow: hidden; }
.readerexpanded > .docsheet .docsheet-body.asis { padding: 0; }
@media (min-width: 1100px) {
  .readerbeside > .docsheet.asis:not(.statsheet) { flex: 0 1 min(820px, 55%); }
  .readerexpanded > .docsheet.asis:not(.statsheet) { flex: 1 1 auto; }
  .docsheet.asis { width: min(820px, 100vw); }
}
/* Below a laptop's width a document is the whole screen: beside a list it would be too narrow to read. */
@media (max-width: 1099px) {
  .readerbeside > .docsheet.asis:not(.statsheet), .docsheet.asis { position: fixed; top: 52px; right: 0; bottom: 0; left: 0; width: auto; flex: none; z-index: 20; }
}
@media (max-width: 640px) { .docsheet.asis { top: 0; } }
.pdfview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; background: #ECE8E2; }
.pdfbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; background: var(--paper-hi, #faf8f4); border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--cf-muted); }
.pdfbar .act.sm { min-width: 30px; padding: 3px 8px; }
.pdfzoom, .pdfpassages { display: inline-flex; align-items: center; gap: 6px; }
.pdfpct { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.pdfpageno { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.pdfpageno label { display: inline-flex; align-items: center; gap: 5px; }
.pdfpagebox { width: 3.4em; padding: 2px 4px; text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); border: 1px solid var(--cf-border, #D9D9D9); border-radius: 6px; background: #fff; }
.pdfpagebox:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 0; }
.pdfpassages { margin-left: auto; color: var(--ink); }
.pdfscroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; scrollbar-gutter: stable; touch-action: pan-x pan-y; padding: 12px; overscroll-behavior: contain; }
.dochtmlwrap .pdfscroll { max-height: 78vh; }
.pdfpages { display: flex; flex-direction: column; gap: 12px; width: max-content; min-width: 100%; transform-origin: top center; }
.pdfpage { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); margin: 0 auto; }
.pdfpage canvas { display: block; }
.pdfloading { padding: 16px; }
.pdftiming { padding: 4px 12px; font-size: 11px; background: var(--paper-hi, #faf8f4); border-top: 1px solid var(--line-soft); }
.pdfpage .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; transform-origin: 0 0; z-index: 0; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.pdfpage .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.pdfpage .textLayer > :not(.markedContent), .pdfpage .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.pdfpage .textLayer .markedContent { display: contents; }
.pdfpage .textLayer ::selection { background: rgba(0, 100, 255, .25); }
.pdfpage .textLayer span.pdfmark { background: rgba(255, 196, 0, .38); border-radius: 2px; }
.pdfpage .textLayer span.pdfmark.current { background: rgba(255, 150, 0, .55); box-shadow: 0 0 0 2px rgba(255, 150, 0, .35); }
.sheetview { width: 100%; height: 75vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.docsheet-body.asis .sheetview { flex: 1 1 auto; height: auto; border: 0; border-radius: 0; }
/* The sheet fades in once Microsoft's viewer has painted; until then the loading line holds its place. */
.sheetwrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sheetwrap .sheetview { opacity: 0; transition: opacity .25s ease; }
.sheetwrap.shown .sheetview { opacity: 1; }
.sheetwrap .sheetloading { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding-top: 56px; pointer-events: none; }
.docpreview .sheetwrap { height: calc(100vh - 52px - 44px - 14px); min-height: 360px; }
.docpreview .sheetwrap .sheetview { height: 100%; }
@media (max-width: 700px) {
  .pdfbar { padding: 6px 10px; gap: 6px 10px; }
  .pdfbar .pdfzoom .act:last-child { display: none; }
  .pdfscroll { padding: 6px; }
  .pdfpages { gap: 6px; }
}
.docpreview .dochtmlwrap.asview { padding: 0; overflow: visible; }
/* Scrolled to the top of the page (ScrollPageFirst), the preview fills the screen under the app
   bar: the bar, the preview's own header, and a little air. */
.docpreview .dochtmlwrap.asview .pdfview { height: calc(100vh - 52px - 44px - 14px); min-height: 360px; }
.docpreview .dochtmlwrap.asview .pdfscroll { max-height: none; }
.pdfview.clean .pdfpage .textLayer span.pdfmark { background: none; box-shadow: none; }
.pdfmarks { margin-left: 6px; }

/* A video as itself (cf-041): the player, then its transcript; each line plays from its second. */
.videowrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1 1 auto; }
.videoview { width: 100%; max-height: 52vh; background: #000; border-radius: 8px; }
.docsheet-body.asis .videowrap { padding: 12px; overflow: hidden; }
.transcript { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 120px; max-height: 40vh; }
.docsheet-body.asis .transcript { max-height: none; }
.transcript li { margin: 0; }
.tline { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--cf-text); cursor: pointer; }
.tline:hover { background: rgba(43, 123, 185, .07); }
.transcript li.now .tline { background: rgba(225, 91, 40, .10); }
.tstamp { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cf-blue); min-width: 3.4em; }
.transcript li.now .tstamp { color: var(--cf-orange); font-weight: 600; }
.srcat { font-weight: 400; color: var(--cf-muted); }

/* Browse as SharePoint shows it (cf-042): the breadcrumb, then folders before documents. */
.crumbpath { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 4px 0 10px; font-size: 13.5px; color: var(--cf-muted); }
.crumbpath > span:last-child { color: var(--ink); font-weight: 600; }
.folderrow td { padding-top: 9px; padding-bottom: 9px; }
.folderrow .doclink { font-weight: 600; }
.foldericon { font-size: 15px; }
.rowfolder { color: var(--cf-muted); }

/* Voice input (cf-043): the mic beside Ask; recording shows a red stop, a timer and Cancel. */
.composer .voicebtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 31px; padding: 0; box-sizing: border-box; }
.composer .voicebtn.recording { background: #C62828; border-color: #C62828; color: #fff; position: relative; }
.composer .voicerec { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.composer .voicetime { font-variant-numeric: tabular-nums; font-size: 13px; color: #C62828; font-weight: 600; min-width: 2.6em; }
.composer .voicecancel { font-size: 12.5px; }
.recdot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .recdot { animation: none; } }
.voiceerr { max-width: 900px; margin: 6px auto 0; font-size: 13px; color: #B3261E; padding: 0 4px; }
/* While a spoken question is turned into words: three dots where the words will land (cf-043).
   In an empty box they sit where the text starts; after typed text they sit at the end of the row. */
.composer { position: relative; }
.voicedots { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 5px; align-items: center; pointer-events: none; }
.askapp.landing .composer .voicedots { left: 22px; }
.voicedots.after { position: static; transform: none; align-self: center; margin-right: 2px; }
.voicedots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cf-orange); opacity: .35; animation: voicedot 1s ease-in-out infinite; }
.voicedots i:nth-child(2) { animation-delay: .15s; }
.voicedots i:nth-child(3) { animation-delay: .3s; }
@keyframes voicedot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .voicedots i { animation: none; opacity: .7; } }

/* A guide for using ODS in the reader (cf-033): a page on the backdrop that fits the reader's
   width, as a document's Fit width does, and scales with it: text, headings, tables and margins
   are sized from the reader's width, so Full screen shows a bigger page, not a wider margin. */
.guidescroll { padding: 16px; scroll-padding-top: 16px; container-type: inline-size; }
.guidepage { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); margin: 0 auto; font-size: clamp(14px, 1.9cqi, 22px); padding: 4.8em 6.6em 7em; line-height: 1.65; color: var(--ink); overflow-wrap: break-word; }
.guidepage h2 { font-size: 1.32em; line-height: 1.3; margin: 2.2em 0 .65em; padding-bottom: .35em; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 12px; }
.guidepage h2:first-child { margin-top: 0; }
.guidepage h3 { font-size: 1.1em; margin: 1.6em 0 .5em; scroll-margin-top: 12px; }
.guidepage h4 { font-size: 1em; margin: 1.2em 0 .4em; }
.guidepage p { margin: 0 0 .75em; }
.guidepage ul, .guidepage ol { margin: .3em 0 .8em; padding-left: 1.5em; }
.guidepage li { margin-bottom: .35em; }
.guidepage li > ul, .guidepage li > ol { margin: .35em 0 0; }
.guidepage hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.6em 0; }
.guidepage code { font-size: .9em; background: var(--paper-hi, #faf8f4); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 .3em; }
.guidepage table { width: 100%; border-collapse: collapse; margin: .7em 0 1.1em; font-size: .9em; line-height: 1.5; }
.guidepage th { text-align: left; background: var(--paper-hi, #faf8f4); font-weight: 600; }
.guidepage td, .guidepage th { border: 1px solid var(--line); padding: .45em .65em; vertical-align: top; }
.guidepage a { color: var(--cf-blue, #1F6FB2); }
.guidepage mark { background: #FFF1C2; padding: 1px 2px; border-radius: 3px; }
@media (max-width: 640px) {
  .guidescroll { padding: 0; scrollbar-gutter: auto; }
  .guidepage { box-shadow: none; font-size: 15px; padding: 18px 16px 40px; }
  .guidepage table { display: block; overflow-x: auto; font-size: 12.5px; }
}

/* The two-tier safety notice (cf-044): the box only when a condition fires; the line on every
   answer from documents, quiet. Amber for GHS Warning, the hazard chip's own family. */
.safetybox { margin: 12px 0 4px; padding: 10px 14px 10px 12px; border: 1px solid #E8B547; border-left: 4px solid #D99A00; border-radius: 8px; background: #FFF8E6; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.safetysignal { font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.safetybox ul { margin: 2px 0 6px; padding-left: 20px; }
.safetybox li { margin-bottom: 2px; }
.safetybox p { margin: 0; font-weight: 600; }
.standingline { margin-top: 8px; font-size: 11.5px; color: var(--cf-muted); }
/* App Feedback modal (cf-024), loaded by js/screens/app-feedback.mjs on first open. Same shape
   as second-brain-app's FeedbackWidget: it opens over the screen the person is on, so
   Capture screenshot takes that screen. */

.af-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(46, 42, 38, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
}
.af-backdrop.is-hidden { visibility: hidden; }
@media print { .af-backdrop { display: none !important; } }

.af-modal {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 620px;
  box-shadow: 0 12px 40px rgba(46, 42, 38, .25); display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); overflow: hidden; color: var(--ink);
}
.af-head {
  /* The ink band the detail pages carry (Adam, 4 Oct 2026), so the dialog reads as part of the app. */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 24px 14px; background: linear-gradient(120deg, var(--ink) 0, #3E3833 100%); border-bottom: 2px solid var(--cf-orange);
}
.af-head h2 { font-size: 22px; font-weight: 650; margin: 0 0 6px; line-height: 1.15; color: #F6F1E9; }
.af-sub { font-size: 13px; color: #CFC6B8; margin: 0; line-height: 1.45; }
/* Answer quality belongs to the thumbs down in Ask, where the vote carries the answer and its documents. */
.af-redirect { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(246, 241, 233, .16); font-size: 12.5px; line-height: 1.45; color: #E8E2D8; }
.af-close {
  width: 32px; height: 32px; border: 1px solid rgba(246, 241, 233, .45); border-radius: 8px; background: transparent; color: #E8E2D8;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.af-close:hover, .af-close:focus-visible { color: #fff; border-color: #fff; background: rgba(246, 241, 233, .08); outline: none; }
.af-close svg, .af-type svg, .af-capture svg { width: 16px; height: 16px; }

.af-form { padding: 20px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.af-field { display: flex; flex-direction: column; gap: 6px; }
.af-label { font-size: 13px; font-weight: 600; }
.af-req { color: var(--cf-orange); }
.af-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-type {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.af-type.is-active { border-color: var(--cf-orange); background: #FDF0EA; color: var(--cf-orange); box-shadow: 0 0 0 1px var(--cf-orange); }
.af-textarea {
  font: inherit; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; resize: vertical; min-height: 64px;
}
.af-textarea:focus { outline: none; border-color: var(--cf-orange); }
.af-count { font-size: 11.5px; color: var(--cf-muted); text-align: right; margin: 0; }
.af-capture {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--paper-hi); color: var(--ink);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.af-capture:disabled { opacity: .6; cursor: default; }
.af-shot-wrap { position: relative; }
.af-shot { display: block; width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.af-shot-remove {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; border-radius: 999px;
  background: rgba(46, 42, 38, .75); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.af-shot-remove svg { width: 14px; height: 14px; }
.af-error { border: 1px solid var(--bad); color: var(--bad); background: #FDF3F2; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.af-success {
  display: flex; gap: 14px; align-items: flex-start; margin: 20px 24px 24px; padding: 20px 22px;
  background: #F1F8F2; border: 1px solid #C4DCC7; border-radius: 10px; color: #2A5B31;
}
.af-success-icon svg { width: 28px; height: 28px; flex-shrink: 0; }
.af-success-title { margin: 2px 0 6px; font-size: 16px; font-weight: 650; }
.af-success-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3B6B42; }
.af-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 14px; border-radius: 8px; cursor: pointer; }
.af-btn:disabled { opacity: .55; cursor: default; }
.af-btn-secondary { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.af-btn-primary { background: var(--cf-orange); border: 1px solid var(--cf-orange); color: #fff; }
.af-btn-primary:hover:not(:disabled) { background: #C94E20; }
.af-spin { animation: af-spin .9s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .af-backdrop { padding: 0; align-items: stretch; }
  .af-modal { max-width: none; max-height: none; border-radius: 0; }
}
/* The sign-in card (index.html), kept last so it wins where it always won. */
  /* Crystal Flash palette and login card, matching the governance prototype
     (prototypes/governance-mvp/template.html) so the real sign-in and the
     reviewed design are the same screen. */
  :root {
    --cf-orange:#E15B28; --cf-blue:#2B7BB9; --cf-text:#333333;
    --cf-muted:#757575; --ink:#2E2A26;
    --paper:#F4F1EC; --paper-hi:#FBF8F3; --line:#E4DDD2;
    --ok:#2e7d32; --bad:#b3261e;
    --font-ui:"Avenir Next","Avenir","Segoe UI Variable Text","Segoe UI",Helvetica,Arial,sans-serif;
    --font-ms:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    --shadow-card:0 1px 2px rgba(74,56,36,.05), 0 14px 34px -22px rgba(74,56,36,.22);
    --rise:cubic-bezier(.22,.72,.28,1);
  }
  :root { --cf-peach:#FAE4DB; --label:#8A8177; --line-soft:#EFE9E0; --cf-border:#D9D9D9; }
  * { box-sizing:border-box; }
  body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
         padding:30px; color:var(--cf-text); font:14.5px/1.55 var(--font-ui);
         background: radial-gradient(900px 480px at 70% -20%, rgba(225,91,40,.09), transparent 60%),
                     linear-gradient(180deg, var(--paper-hi), var(--paper)); }
  body.app .logincard { display:none; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .logincard { width:410px; max-width:100%; background:#fff; border:1px solid var(--line);
               border-radius:14px; box-shadow:var(--shadow-card); padding:34px 36px 26px;
               animation:rise .4s var(--rise) both; }
  .cflogo { height:34px; margin-bottom:20px; }
  h1 { font-size:19px; margin:0 0 4px; color:var(--ink); }
  .sub { color:var(--cf-muted); font-size:13px; margin:0 0 22px; line-height:1.5; }

  /* Microsoft's button is their own specification — border, radius and type are
     deliberately not this page's tokens. Google's matches its shape so the two
     sit together without one looking like an afterthought. */
  button[data-provider] { display:flex; align-items:center; gap:11px; width:100%;
    border:1px solid #8C8C8C; background:#fff; padding:10px 14px; margin-bottom:10px;
    font-family:var(--font-ms); font-size:14px; color:#2F2F2F; cursor:pointer;
    border-radius:2px; transition:background .15s; text-align:left; }
  button[data-provider]:hover:not(:disabled) { background:#F3F2F1; }
  button[data-provider]:disabled { opacity:.5; cursor:not-allowed; }
  button[data-provider]:focus-visible { outline:2px solid var(--cf-orange); outline-offset:2px; }
  .mslogo { display:inline-grid; grid-template-columns:9px 9px; gap:1.5px; flex:none; }
  .mslogo span { width:9px; height:9px; }
  .glogo { flex:none; }

  #out { margin-top:16px; border:1px solid var(--line); background:#fff; border-radius:10px;
         padding:9px 14px; font:inherit; color:var(--cf-text); cursor:pointer; }
  #out:hover { border-color:var(--cf-orange); }

  .note { font-size:12px; color:var(--cf-muted); margin:-2px 0 14px; line-height:1.5; }
  .msg { padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;
         border:1px solid var(--line); white-space:pre-wrap; }
  .msg.bad { border-color:var(--bad); color:var(--bad); background:#FDF3F2; }
  .msg.ok  { border-color:var(--ok); color:var(--ok); background:#F1F8F2; }
  dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13.5px; }
  dt { color:var(--cf-muted); }
  dd { margin:0; color:var(--ink); }
  .devicenote { margin-top:18px; padding-top:13px; border-top:1px dashed var(--line);
                font-size:11.5px; color:var(--cf-muted); font-style:italic; line-height:1.5; }
  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }