/* Cura Core · reader.css
   The policy reader shared by the agency portal (#/policies/<ref>), the staff phone pages (#/org/<slug>/p/<ref>),
   the inspector page and the website samples (#/library/<ref>): reader head and meta, the "In short" box, the white
   paper and its masthead, sections, lists, tables, notes, the highlighted agency details, the legend, the sticky
   find bar, the Acknowledge card, the section editor, the aside's key-value and sign-off lists, the pager, print.

   "Bound Manual": the paper is a white sheet on warm stock with one heavy black rule under the masthead. The policy
   text is Newsreader 450 at 17px / 1.7 in full ink on a 60ch serif measure; section heads Newsreader 600; everything a
   person clicks, types or reads in a table is IBM Plex Sans; policy numbers are Plex Mono. Blue = your own wording,
   gold = Premium (the only gold in here is the "Downloads are not in your package" tag the template emits). */

/* ---------------- reader head ---------------- */

.reader-head h1 {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-reader); line-height: 1.12; letter-spacing: -.01em;
  max-width: 24ch; color: var(--ink);
}
.reader-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px;
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.reader-meta .ref { font-size: 12.5px; }
.reader-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 18px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}

/* ---------------- "In short": the summary box above the paper ---------------- */

/* The serif measure. Newsreader's "0" is narrow, so the shared 68ch --measure runs to about 89 characters a line at 17px;
   60ch is about 78, inside the 45–80 band, and the same paragraph still fills most of the paper column at 1440. */
.inshort, .paper { --measure-serif: 60ch; }

.inshort {
  background: var(--teal-soft); border: 1px solid var(--teal-line); border-top: 2px solid var(--teal-ink);
  border-radius: var(--radius-sm); padding: 18px 22px;
}
.inshort h2 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2;
  color: var(--teal-ink); text-wrap: initial;
}
.inshort h2 .i { width: 14px; height: 14px; }
.inshort ul { margin: 0; padding-left: 20px; }
.inshort li { margin: 5px 0; font-family: var(--font-serif); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: var(--measure-serif); }
.inshort li::marker { color: var(--teal-ink); }

/* ---------------- search in this policy: a bar that stays in view while reading ----------------
   The views wrap the bar in a bare <div style="margin-top:18px">, which would be its sticky containing block (a box
   exactly as tall as the bar), so the bar could never move. The wrapper is collapsed with display: contents; the bar
   carries the 18px itself and sticks inside the reading column, under the 60px top bar. */

div:not([class]):has(> .find-bar) { display: contents; }
.find-bar {
  position: sticky; top: calc(var(--top-h) + 10px); z-index: 6;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 18px 0 14px;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.4;
  transition: box-shadow var(--dur-3) var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .find-bar { background: rgba(255, 255, 255, .97); } }
.find-bar .input-icon { flex: 1; min-width: 0; }
.find-bar .input { min-height: 40px; border-color: transparent; background: var(--surface-2); border-radius: var(--radius-sm); }
.find-bar .input:hover { border-color: var(--line-2); }
.find-bar .input:focus { background: #fff; border-color: var(--blue-bright); box-shadow: var(--focus-ring); outline: none; }
.find-count {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; text-align: right; padding: 0 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
.find-count:empty { display: none; }
.find-bar .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--ink-2); }
.find-bar .icon-btn:disabled { opacity: .35; cursor: default; background: none; color: var(--ink-2); }
mark.find-hit { background: var(--hit); color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: 0 0 0 1px var(--hit-line); }
mark.find-hit.on { background: var(--hit-on); box-shadow: 0 0 0 2px var(--hit-on-line); }

/* ---------------- the paper ---------------- */

.paper {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xs); box-shadow: var(--shadow-sm);
  padding: 56px 64px 64px; margin-top: 18px;
  font-family: var(--font-paper); font-weight: 450; font-size: var(--fs-paper); line-height: var(--lh-paper); color: var(--ink);
  font-variant-numeric: lining-nums; font-optical-sizing: auto;
}
.paper p, .paper li { max-width: var(--measure-serif); }
/* everything a person clicks or types inside the paper is set in the sans */
.paper :is(.btn, .badge, .legend, .edit-box, .fm, .link-btn, .switch, .notice) { font-family: var(--font-sans); }
.paper .notice { font-size: 14px; line-height: 1.5; font-weight: 400; }
.paper .notice p { max-width: none; }

/* masthead: agency name over the one heavy rule on the page */
.paper-agency { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px solid var(--rule); }
.paper-agency img {
  max-height: 48px; max-width: 160px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 4px;
}
.paper-agency .n { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.paper-agency .t { margin-top: 4px; font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* the key under the masthead */
.legend { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.legend .fv { font-size: 12px; }
.legend .fm { font-size: 12px; }
.legend .link-btn { font-size: 12.5px; font-weight: 600; margin-left: auto; min-height: 28px; padding: 0 4px; border-radius: 4px; }

/* ---------------- sections ---------------- */

.pol-sec { position: relative; padding: 26px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 72px); }
.pol-sec:first-of-type { border-top: 0; }
.sec-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.sec-head h3 {
  flex: 1 1 220px; min-width: 0; margin: 0;
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-paper-h); line-height: 1.25; letter-spacing: -.005em; color: var(--ink);
}
.sec-head h3 + * { margin-left: auto; }
.sec-head .badge { margin-top: 3px; }
.sec-head .btn { margin-top: -2px; }
/* the section Edit / Restore buttons sit back until the reader reaches for them (always at full strength on touch screens).
   They step back in colour, not opacity: --ink-3 is 6.6:1 on white and 6.2:1 on the blue edited wash, so the resting
   state passes as text; the old opacity: .55 left --ink-2 at 2.8:1 on a live, enabled control. */
.pol-sec .sec-head .btn { color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1) var(--ease); }
.pol-sec:hover .sec-head .btn, .pol-sec:focus-within .sec-head .btn, .sec-head .btn:focus-visible { color: var(--ink); }
@media (hover: none) { .pol-sec .sec-head .btn { color: var(--ink-2); } }

.pol-sec p { margin: 0 0 .7em; }
.pol-sec ul, .pol-sec ol { margin: 0 0 .8em; padding-left: 1.4em; }
.pol-sec li { margin: 6px 0; }
.pol-sec li::marker { color: var(--ink-3); }
.pol-sec .note {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2);
  background: none; border-left: 2px solid var(--line-2); border-radius: 0; padding: 6px 14px; margin: 10px 0 .5em;
}

/* paper tables: ruled rows, no vertical rules, a 1.5px rule above and under the head and the same weight closing the table
   (so the end of a table is marked and the next section's hairline reads as a different line) */
/* contain: inline-size keeps a wide (min-width 480px) table from blowing out a 1fr grid column on phones: the wrap scrolls, the page does not.
   Scroll shadows: the two covers (--wrap-bg) scroll with the content and hide the two fixed shadows at either end, so a
   soft shadow shows at an edge only while more columns remain that way (nothing shows when the table fits). */
.paper .table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 14px; min-width: 0; contain: inline-size;
  --wrap-bg: #fff;
  background-image:
    linear-gradient(90deg, var(--wrap-bg) 30%, transparent),
    linear-gradient(270deg, var(--wrap-bg) 30%, transparent),
    radial-gradient(farthest-side at 0 50%, rgba(28, 26, 23, .18), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(28, 26, 23, .18), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.pol-sec.edited .table-wrap { --wrap-bg: #F3F7F9; }   /* the blue wash composited on white */
.orig-box .table-wrap { --wrap-bg: var(--surface-2); }
.pol-sec table {
  width: 100%; border-collapse: collapse; margin: 0; border-top: 1.5px solid var(--rule-2); border-bottom: 1.5px solid var(--rule-2);
  font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.pol-sec th, .pol-sec td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.pol-sec th:first-child, .pol-sec td:first-child { padding-left: 2px; }
.pol-sec tbody tr:last-child td { border-bottom: 0; }
.pol-sec th {
  background: none; font-weight: 600; font-size: 12px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1.5px solid var(--rule-2);
}
.pol-sec caption {
  caption-side: top; text-align: left; padding: 0 0 6px;
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--ink-2);
}

/* the agency's own details (teal wash + underline) and the details still missing (amber marker with a dashed edge) */
.fv { background: rgba(30, 156, 138, .08); border-bottom: 1px solid rgba(11, 107, 94, .7); border-radius: 2px; padding: 0 2px; }
.fm {
  background: var(--amber-mark); color: var(--amber-ink); border: 1px dashed var(--amber); border-radius: 3px; padding: 0 4px;
  font-family: var(--font-sans); font-weight: 600; font-size: .85em; line-height: 1.3; white-space: nowrap;
}
.hide-fields .fv { background: none; border: 0; padding: 0; }

/* a section in the agency's own wording: a faint blue wash and a blue rule (blue = yours, gold = Premium) */
.pol-sec.edited { background: rgba(23, 91, 135, .05); box-shadow: inset 3px 0 0 var(--blue); margin: 0 -24px; padding-left: 24px; padding-right: 24px; border-radius: 0; }

/* ---------------- the section editor ---------------- */

.edit-box {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin: 4px 0 8px;
  font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.edit-box .field + .field { margin-top: 12px; }
.edit-box .input { background: #fff; }
.edit-box textarea.input { min-height: 200px; font-size: 14.5px; line-height: 1.6; }
.edit-box .hint { max-width: var(--measure); }
.edit-box .edit-table { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; background: none; }
.edit-table table { width: 100%; border-collapse: collapse; margin: 0; border-top: 0; border-bottom: 0; min-width: 0; }
.edit-table th, .edit-table td { border: 1px solid var(--line); padding: 4px; background: #fff; vertical-align: top; }
.edit-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
/* a two-column (key / value) table: the short Item column takes 30%, the Detail textareas get the rest (.wide = three or more columns) */
.edit-table:not(.wide) th:first-child, .edit-table:not(.wide) td:first-child { width: 30%; }
.edit-table th { background: var(--surface-2); border-bottom: 1.5px solid var(--rule-2); font-size: inherit; letter-spacing: 0; text-transform: none; }
.edit-table .input { min-height: 36px; font-size: 13.5px; line-height: 1.45; padding: 6px 8px; }
.edit-table th .input { font-weight: 600; }
.edit-table textarea.input { min-height: 56px; resize: vertical; }
.edit-table .icon-btn { width: 32px; height: 32px; margin-top: 2px; color: var(--ink-3); }
.edit-table .icon-btn:hover { color: var(--red); background: var(--red-soft); }
.edit-box .row-between { margin-top: 14px; flex-wrap: wrap; }
.edit-box .btn-group { margin-left: auto; }
.orig-note { margin: 10px 0; padding: 10px 12px; font-size: 13.5px; align-items: center; }
.orig-box {
  margin: 0 0 14px; padding: 14px 16px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1.6;
}
.orig-box .orig-label, .orig-box > .small {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; color: var(--ink-3);
  margin-bottom: 8px;
}
.orig-box p:last-child, .orig-box ul:last-child, .orig-box ol:last-child { margin-bottom: 0; }

/* ---------------- the aside ---------------- */

.aside .card + .card { margin-top: 14px; }
.aside .card-pad { padding: 20px; }
.aside h3 {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 12px; text-wrap: initial;
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; line-height: 1.4; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
/* "An inspector may ask": quoted questions in the serif italic; the Forms list reuses it with mono refs */
.asks { margin: 0; padding-left: 18px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.asks li { margin: 6px 0; }
.asks li::marker { color: var(--ink-3); }
.asks .ref { font-style: normal; margin-right: 2px; }
.asks a { font-family: var(--font-sans); font-style: normal; font-size: 14px; font-weight: 500; }
.asks a .i { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.who-signed { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; }
.who-signed li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.who-signed li:first-child { border-top: 0; padding-top: 0; }
.who-signed li:last-child { padding-bottom: 0; }
.who-signed .status-ok { font-size: 13px; font-weight: 600; color: var(--teal-ink); font-variant-numeric: tabular-nums lining-nums; }
.who-signed .muted { color: var(--ink-3); }

/* ---------------- previous / next ---------------- */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.pager a {
  display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: inherit;
  box-shadow: var(--shadow-sm); text-decoration: none !important;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease);
}
.pager a:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); color: inherit; }
.pager small {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; color: var(--ink-3);
}
.pager small .i { width: 14px; height: 14px; }
.pager .next { text-align: right; }
.pager .next small { justify-content: flex-end; }
.pager b { display: block; margin-top: 4px; font-family: var(--font-serif); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink); text-wrap: pretty; }

/* ---------------- the Acknowledge card at the end of a policy (staff pages; the portal previews it) ---------------- */

.ack-card {
  margin-top: 22px; padding: 22px 20px; background: #fff;
  border: 1px solid var(--teal-line); border-top: 3px solid var(--teal-ink); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}
.ack-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.ack-head .ico-chip { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--teal-soft); color: var(--teal-ink); }
.ack-head .ico-chip .i { width: 18px; height: 18px; }
.ack-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
.ack-head .sub { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.ack-statement {
  margin: 0 0 16px; padding: 12px 14px; max-width: var(--measure);
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--ink);
  background: var(--surface-2); border: 0; border-left: 2px solid var(--teal-ink); border-radius: 0 4px 4px 0;
}
/* typing one's name in the serif feels like signing */
#ack-name { min-height: 48px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; letter-spacing: 0; }
#ack-name::placeholder { color: var(--ink-3); font-style: italic; }
.ack-card .btn-lg { white-space: normal; height: auto; min-height: 52px; padding: 12px 20px; line-height: 1.3; text-align: center; font-size: 16px; border-radius: var(--radius-sm); }
.ack-card .small { font-size: 12.5px; line-height: 1.45; }

/* ---------------- staff phone pages and the inspector page (.solo) ---------------- */

.solo .find-bar { top: 68px; padding: 6px; border-radius: var(--radius); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
.solo .find-bar .input { min-height: 44px; font-size: 16px; }
.solo .find-bar .icon-btn { width: 40px; height: 40px; }
.solo .paper { padding: 40px 44px 48px; border-radius: var(--radius-sm); }
.solo .reader-meta { font-size: 13px; }
.solo .reader-meta .status-ok { font-weight: 600; font-size: 13px; }

/* ---------------- responsive rules for this area (the ≤900 / ≤640 / ≤560 values that were in legacy-responsive.css live here) ---------------- */

@media (max-width: 900px) {
  .reader-head h1 { font-size: 28px; max-width: none; }
  .paper { padding: 22px 18px; font-size: 16.5px; line-height: 1.65; }
  .solo .paper { padding: 24px 18px 28px; }
  .paper-agency .n { font-size: 19px; }
  .paper-agency img { max-height: 40px; }
  .sec-head h3 { font-size: 20px; }
  .pol-sec { padding-top: 22px; }
  .pol-sec.edited { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .pol-sec table { font-size: 13.5px; }
  .find-bar { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--radius); }
}
@media (max-width: 640px) {
  .inshort { padding: 16px 18px; }
  /* only a table with three or more columns (.wide, set by the template) keeps a 480px floor and scrolls; a two-column
     key / value table wraps in place. The wrap bleeds to the paper's edge so a scrolling table is cut at the card
     border, not 18px inside it, and the fixed shadow sits on that edge. */
  .pol-sec .table-wrap.wide table { min-width: 480px; }
  .paper .table-wrap:not(.edit-table) { margin-inline: -18px; padding-inline: 18px; }
  /* the two-column section editor stacks each row: Item over Detail, then the remove button */
  .edit-table:not(.wide) table, .edit-table:not(.wide) thead, .edit-table:not(.wide) tbody,
  .edit-table:not(.wide) tr, .edit-table:not(.wide) th, .edit-table:not(.wide) td { display: block; width: auto; }
  .edit-table:not(.wide) th, .edit-table:not(.wide) td { border: 0; padding: 3px 0; background: none; }
  .edit-table:not(.wide) th:first-child, .edit-table:not(.wide) td:first-child { width: auto; }
  .edit-table:not(.wide) td:first-child textarea.input { height: 52px; min-height: 52px; }   /* the short Item label: two lines, over the full-height Detail box */
  .edit-table:not(.wide) th:empty { display: none; }
  .edit-table:not(.wide) thead { padding-bottom: 6px; border-bottom: 1.5px solid var(--rule-2); }
  .edit-table:not(.wide) tbody tr { padding: 8px 0; border-top: 1px solid var(--line); }
  .edit-table:not(.wide) tbody tr:first-child { border-top: 0; }
  .ack-card { padding: 18px; }
}
@media (max-width: 560px) {
  .pager { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* phones hide the scrollbar; a wide table always overflows here, so say so above it */
  .paper .table-wrap.wide::before {
    content: 'Swipe sideways to see the whole table'; display: block; padding: 0 0 6px;
    font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
  }
}
@media (pointer: coarse) {
  .find-bar .icon-btn { width: 44px; height: 44px; }
  .legend .link-btn { min-height: 40px; }
}

/* ---------------- Bento layer (October 2026): the reader as plates ----------------
   Scoped to the portal (the website's sample pages keep site.css). The paper is a rounded white
   plate; the find bar floats as a frosted pill under the floating top bar; "In short", the pager, the
   Acknowledge card and the editor round off; the pager cards lift. Policy text and tables are untouched. */

:where(#app > :not(.site)) .paper { border: 0; border-radius: var(--r-plate); box-shadow: var(--plate); }
:where(#app > :not(.site)) .inshort { border-radius: var(--r-plate-md); border-top-width: 1px; box-shadow: inset 0 3px 0 var(--teal-ink); }
:where(#app > :not(.site)) .find-bar {
  border: 0; border-radius: 999px; padding: 6px 8px 6px 6px;
  box-shadow: 0 0 0 1px rgba(227, 221, 209, .9) inset, 0 12px 30px -14px rgba(22, 34, 44, .3);
}
:where(#app > :not(.site)) .find-bar .input { border-radius: 999px; }
:where(#app > :not(.site)) .find-bar .icon-btn { border-radius: 999px; }
/* under the floating top bar (14px gap + 60px bar), on phones 10px + 60px */
.shell .find-bar { top: calc(var(--top-h) + 24px); }
.shell .pol-sec { scroll-margin-top: calc(var(--top-h) + 90px); }
:where(#app > :not(.site)) .reader-actions { border-bottom: 0; padding-bottom: 0; margin: 20px 0 24px; }
:where(#app > :not(.site)) .edit-box, :where(#app > :not(.site)) .orig-box { border-radius: var(--r-plate-md); }
:where(#app > :not(.site)) .ack-card {
  border: 0; border-radius: var(--r-plate); padding: 26px 24px;
  box-shadow: 0 0 0 1px var(--teal-line), inset 0 4px 0 var(--teal-ink), var(--plate);
}
:where(#app > :not(.site)) .ack-head .ico-chip { border-radius: 11px; }
:where(#app > :not(.site)) .ack-statement { border-radius: 0 12px 12px 0; }
:where(#app > :not(.site)) .ack-card .btn-lg { border-radius: 999px; }
:where(#app > :not(.site)) .pager a {
  border: 0; border-radius: var(--r-plate-md); padding: 16px 20px; box-shadow: var(--plate);
  position: relative; transition: transform .35s var(--ease-plate), box-shadow .35s var(--ease-plate);
}
@media (hover: hover) {
  :where(#app > :not(.site)) .pager a:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--plate-hi); border-color: transparent; }
}
:where(#app > :not(.site)) .pager a:focus-visible { transform: translateY(-6px) scale(1.012); box-shadow: var(--plate-hi); outline-offset: 4px; }
@media (hover: none) { :where(#app > :not(.site)) .pager a:active { transform: translateY(-3px) scale(1.006); box-shadow: var(--plate-hi); } }
@media (max-width: 900px) {
  .shell .find-bar { top: calc(var(--top-h) + 20px); border-radius: 999px; }
  :where(#app > :not(.site)) .paper { border-radius: 20px; }
}

/* ---------------- print: the paper, borderless and black on white ---------------- */

@media print {
  .side, .topbar, .solo-top, .reader-actions, .aside, .pager, .crumbs, .toasts, .signbar, .legend, .sec-head .btn,
  .site-head, .site-foot, .find-bar, .ack-card, .orig-note, .orig-box, .hero-art, .grid-bg, .notice, .scrim, .tabs, .chips, .toolbar,
  .signin-art::after, .s-hero::after { display: none !important; }
  .shell { display: block; } .content, .solo-body { padding: 0; max-width: none; }
  body, .paper, .inshort, .card { background: #fff !important; color: #000; box-shadow: none !important; }
  .paper { border: 0; padding: 0; font-size: 12pt; line-height: 1.55; } .paper p, .paper li { max-width: none; }
  .paper-agency { border-bottom: 2px solid #000; }
  .inshort { border: 1px solid #000; border-top-width: 1px; } .inshort h2, .inshort li { color: #000; }
  .pol-sec.edited { background: none !important; box-shadow: none !important; margin: 0; padding-left: 0; padding-right: 0; }
  .pol-sec .note { border-left-color: #000; }
  .fv { background: none; border: 0; } .fm { background: none; border: 1px dashed #000; color: #000; }
  mark.find-hit, mark { background: none; box-shadow: none; }
  .pol-sec table { min-width: 0; border-color: #000; } .pol-sec th, .pol-sec td { border-color: #000; }
  .table-wrap { overflow: visible; } .paper .table-wrap { background: none; margin: 6px 0 14px; padding: 0; } .paper .table-wrap::before { display: none; }
  .split { display: block; } a { color: inherit; text-decoration: none; }
  h1, h2, h3 { break-after: avoid; } .pol-sec { break-inside: avoid-page; } tr { break-inside: avoid; }
}