/* The redesign shell (html[data-shell="r2"]): a printed manifest. Paper, ink rules, block type; nothing rounded,
   nothing boxed, nothing shadowed. Loaded after app.css and look-v2.css; a page's own layer is
   css/r2/<page stylesheet>.css. Colours: r2-tokens.css. */

/* ------------------------------------------------------------ base */
html[data-shell="r2"] { scroll-padding-top: calc(var(--topbar-height) + 12px); }
html[data-shell="r2"] body { font-feature-settings: "tnum" 1; }
html[data-shell="r2"] a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-shell="r2"] ::selection { background: var(--color-primary); color: var(--rail-accent-ink); }
html[data-shell="r2"] :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ------------------------------------------------------------ masthead: the band */
html[data-shell="r2"] .topbar {
  --topbar-height: var(--mast-band);
  gap: 0; padding: 0 var(--gutter) 0 0; align-items: stretch;
  background-image: none;
}
html[data-shell="r2"] .topbar :focus-visible { outline-color: var(--color-topbar-text); outline-offset: -4px; }
.mast-brand {
  display: flex; align-items: center; flex: none; padding: 0 20px 0 var(--gutter);
  color: var(--color-topbar-text); font-size: 21px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.mast-brand:hover { color: var(--color-topbar-text); text-decoration: none; }
.mast-planner {
  display: flex; align-items: center; gap: 10px; flex: none; padding: 0 18px;
  background: var(--rail-bg); color: var(--rail-accent);
  font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
}
.mast-planner:hover, .mast-planner.is-active { background: var(--rail-accent); color: var(--rail-accent-ink); text-decoration: none; }
.mast-planner .icon { transition: transform var(--dur-2) var(--ease-out); }
.mast-planner:hover .icon { transform: translateX(4px); }
.mast-sections { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 8px; }
.mast-sections > a {
  display: flex; align-items: center; padding: 0 13px;
  color: var(--color-nav-text); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
}
.mast-sections > a:hover, .mast-sections > a.is-peek { background: var(--color-nav-hover-bg); color: var(--color-topbar-text); text-decoration: none; }
.mast-sections > a.is-active { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); }

html[data-shell="r2"] .topbar > button.header-search { flex: 0 1 200px; min-width: 44px; margin: 0; padding: 0 0 0 12px; height: auto; align-self: center; }
html[data-shell="r2"] .header-search-box { width: 100%; height: 36px; border-radius: 0; border: 0; }
html[data-shell="r2"] .header-search-label { text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); font-weight: 700; }
html[data-shell="r2"] .topbar > .scan-switch { margin: 0 0 0 8px; align-self: center; }
html[data-shell="r2"] .topbar .scan-btn {
  height: 36px; border-radius: 0; border: 2px solid var(--color-topbar-text); background: transparent; color: var(--color-topbar-text);
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); font-weight: 700;
}
html[data-shell="r2"] .topbar .scan-btn:hover, html[data-shell="r2"] .topbar .scan-btn[aria-expanded="true"] { background: var(--color-topbar-text); color: var(--color-topbar-bg); }
html[data-shell="r2"] .theme-switch { margin: 0 0 0 4px; }
html[data-shell="r2"] .user-menu { margin-left: 4px; align-self: stretch; }
html[data-shell="r2"] .topbar .user-store, html[data-shell="r2"] .topbar .user-toggle > .user-name { display: none; }
html[data-shell="r2"] .avatar { border-radius: 0; font-weight: 700; }
html[data-shell="r2"] .user-menu > .dropdown-menu, html[data-shell="r2"] .scan-pop { top: var(--mast-band); }

/* ------------------------------------------------------------ masthead: the strip of the section's pages */
.mast-sub {
  position: sticky; top: var(--mast-band); z-index: 190;
  height: var(--mast-strip); padding: 0 var(--gutter);
  background: var(--color-page-bg); border-bottom: var(--rule) solid var(--color-text);
}
.mast-pages { display: none; align-items: stretch; gap: 0; height: 100%; overflow-x: auto; scrollbar-width: none; }
.mast-pages::-webkit-scrollbar { display: none; }
.mast-pages.is-shown { display: flex; }
.mast-pages-label {
  display: flex; align-items: center; flex: none; margin-right: 14px; padding: 0 10px; align-self: center; height: 26px;
  background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.mast-pages > a {
  display: flex; align-items: center; flex: none; padding: 0 14px;
  color: var(--color-text); font-size: var(--text-base); font-weight: 600; white-space: nowrap;
  border-bottom: var(--rule) solid transparent; margin-bottom: calc(-1 * var(--rule));
}
.mast-pages > a:hover { background: var(--color-text); color: var(--color-page-bg); text-decoration: none; }
.mast-pages > a.is-active { background: var(--color-primary); color: var(--rail-accent-ink); font-weight: 700; }
.mast-sub.is-empty:not(.is-peeking) { height: 0; border-bottom-width: var(--rule); overflow: hidden; }

/* ------------------------------------------------------------ the index: the whole menu as one sheet on narrow screens */
.rail { display: none; }
.rail-toggle { display: none; }
.rail-scrim { display: none; }

/* ------------------------------------------------------------ page frame: content on the paper, no sheet */
html[data-shell="r2"] .page { background: transparent; padding: 18px var(--gutter) 40px; }
html[data-shell="r2"] .site-footer { background: transparent; padding: 12px var(--gutter) 18px; border-top: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 600; }
html[data-shell="r2"] .app-banner { background: var(--color-primary); color: var(--rail-accent-ink); border: 0; font-weight: 600; padding-left: var(--gutter); padding-right: var(--gutter); }
html[data-shell="r2"] .crumbs ol { margin-bottom: 6px; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 700; }
html[data-shell="r2"] .crumbs a { color: var(--color-text-muted); }
html[data-shell="r2"] .crumbs li + li::before { content: "/"; color: var(--color-text); margin: 0 8px; }
html[data-shell="r2"] .page-header { margin-bottom: 16px; padding-bottom: 10px; border-bottom: var(--rule) solid var(--color-text); align-items: flex-end; }
html[data-shell="r2"] .page-title {
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
html[data-shell="r2"] .page-subtitle { margin-top: 6px; }
html[data-shell="r2"] .count-pill {
  border: 0; border-radius: 0; background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 4px 9px;
}
html[data-shell="r2"] .page-content > * + * { margin-top: 20px; }

/* A form page keeps the same header as every other page (the older joined, tinted header box is not drawn). */
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) { padding-top: 18px; }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .page-header {
  max-width: none; margin: 0 0 16px; padding: 0 0 10px; background: none; border: 0; border-bottom: var(--rule) solid var(--color-text);
}
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .page-header .page-title { color: var(--color-text); }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .crumbs { max-width: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------ the case label: a section's heading on its rule */
.r2-label,
html[data-shell="r2"] .section-title,
html[data-shell="r2"] .panel-header > h2,
html[data-shell="r2"] .page-content > h2 {
  display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0 0 12px; padding: 0 0 0 10px;
  background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-xs); font-weight: 700; line-height: 22px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.r2-label::after,
html[data-shell="r2"] .panel-header > h2::after,
html[data-shell="r2"] .section-title::after,
html[data-shell="r2"] .page-content > h2::after {
  content: ""; flex: 1 1 0; min-width: 12px; margin-left: 10px; background: var(--color-page-bg); border-top: var(--rule) solid var(--color-text);
}
.r2-label > *, html[data-shell="r2"] .section-title > *, html[data-shell="r2"] .page-content > h2 > * { color: inherit; }

html[data-shell="r2"] .panel-header { flex-wrap: nowrap; align-items: flex-start; gap: 0 10px; }
html[data-shell="r2"] .panel-header > h2 { flex: 1 1 auto; margin: 0; }

/* ------------------------------------------------------------ inspector: a ruled column, not cards */
@media screen and (min-width: 981px) {
  html[data-shell="r2"] .page.has-inspector { display: block; }
  html[data-shell="r2"] .page-body.with-sidebar { grid-template-columns: minmax(0, 1fr) 330px; gap: 0; margin: 0; align-items: start; }
  html[data-shell="r2"] .page-body.with-sidebar > .page-content { padding: 0 32px 0 0; display: block; }
  html[data-shell="r2"] .page-sidebar {
    padding: 0 0 0 24px; background: transparent; border: 0; border-left: var(--rule) solid var(--color-text);
    position: sticky; top: calc(var(--topbar-height) + 16px); max-height: calc(100vh - var(--topbar-height) - 32px); overflow-y: auto; scrollbar-width: thin;
  }
  html[data-shell="r2"] .page-sidebar > .sidebar-panel + .sidebar-panel { margin-top: 20px; }
  html[data-shell="r2"] .sidebar-panel > :not(h3):not(.action-list):not(.stat-tiles) { padding-left: 0; }

  /* Actions: out of the column, a menu under the header's Actions button (r2.js places it). */
  html[data-shell="r2"] .page-sidebar > #sidebar-actions { display: none; }
  html[data-shell="r2"] .page-sidebar > #sidebar-actions.is-menu-open {
    display: block; position: fixed; z-index: 220; width: 300px; max-height: min(70vh, 640px); overflow-y: auto;
    margin: 0; padding: 0; background: var(--color-menu-bg); border: 2px solid var(--color-text);
  }
  html[data-shell="r2"] #sidebar-actions.is-menu-open > h3 { display: none; }
  html[data-shell="r2"] #sidebar-actions + .sidebar-panel { margin-top: 0; }
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list a,
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list button { padding: 9px 14px 9px 42px; font-weight: 600; }
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list :is(a, button) > :is(.fa, .icon),
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list :is(a, button)::before { left: 14px; top: 11px; }
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list :is(a, button):hover > :is(.fa, .icon) { color: inherit; }
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list .divider { margin: 0; border-top-color: var(--color-text); }
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list a:hover,
  html[data-shell="r2"] #sidebar-actions.is-menu-open .action-list button:hover { background: var(--color-text); color: var(--color-page-bg); text-decoration: none; }
}
@media screen and (min-width: 981px) {
  /* Nothing but Actions in the column: the content takes the whole width, the menu still opens from the header. */
  html[data-shell="r2"] .page-body.with-sidebar.only-actions { grid-template-columns: minmax(0, 1fr); }
  html[data-shell="r2"] .page-body.with-sidebar.only-actions > .page-content { padding-right: 0; }
  html[data-shell="r2"] .page-body.with-sidebar.only-actions > .page-sidebar { position: static; max-height: none; overflow: visible; padding: 0; border: 0; height: 0; }
}
@media screen and (max-width: 980px) {
  html[data-shell="r2"] .actions-toggle { display: none; }
}
html[data-shell="r2"] .sidebar-panel > h3 {
  border: 0; border-top: var(--rule) solid var(--color-text); padding: 8px 0 6px; margin: 0 0 6px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text);
}

/* ------------------------------------------------------------ tables: the part that stays simple */
html[data-shell="r2"] table th {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-th); text-transform: uppercase; color: var(--color-th-text);
}
html[data-shell="r2"] table thead th { border-bottom: var(--rule) solid var(--color-th-border); }

/* ------------------------------------------------------------ controls: square blocks */
html[data-shell="r2"] .btn {
  border-radius: 0; border-width: 2px; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: none;
}
html[data-shell="r2"] .btn:not(.btn-primary):not(.btn-create):not(.btn-danger):not(.btn-warning):not(.btn-link):not(:disabled):hover {
  background: var(--color-text); color: var(--color-page-bg); border-color: var(--color-text); text-decoration: none;
}
html[data-shell="r2"] .btn-create:not(:disabled):hover, html[data-shell="r2"] .btn-primary:not(:disabled):hover { text-decoration: none; }
html[data-shell="r2"] .btn-link { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; }
html[data-shell="r2"] input[type="text"], html[data-shell="r2"] input[type="search"], html[data-shell="r2"] input[type="email"],
html[data-shell="r2"] input[type="password"], html[data-shell="r2"] input[type="number"], html[data-shell="r2"] input[type="date"],
html[data-shell="r2"] input[type="time"], html[data-shell="r2"] input[type="datetime-local"], html[data-shell="r2"] input[type="tel"],
html[data-shell="r2"] input[type="url"], html[data-shell="r2"] select, html[data-shell="r2"] textarea { border-radius: 0; box-shadow: none; }
html[data-shell="r2"] .dropdown-menu { border-radius: 0; border: 2px solid var(--color-text); box-shadow: none; }
html[data-shell="r2"] .actions-toggle { gap: 6px; }

/* ============================================================ shared blocks (every page uses these, never its own copy)

   .r2-label     a section heading: the case label on its 3px rule (h2.section-title gets it without the class)
   .r2-toolbar   one row of controls above a table: search, filters, then actions pushed right
                 <div class="r2-toolbar"> ... <div class="r2-toolbar-end"> ... </div></div>
   .r2-strip     a row of figures: <dl class="r2-strip"><div class="r2-stat [is-accent|is-good|is-bad]"><dt>Label</dt><dd>$1,200.00</dd></div>…</dl>
   .r2-tabs      section tabs: <nav class="r2-tabs" aria-label="…"><a href="#x" aria-current="true">Items <span class="r2-tab-count">18</span></a>…</nav>
   .r2-card      a ruled section (not a box): <section class="r2-card"><header class="r2-card-head"><h2>Title</h2> actions…</header> body </section>
   .r2-quick     poster blocks: <nav class="r2-quick"><a class="r2-quick-item [is-accent]" href><svg icon><strong>Label</strong><span>Hint</span></a>…</nav>
   .r2-steps     where a record is in its life: <ol class="r2-steps"><li class="is-done">Draft</li><li class="is-current" aria-current="step">Quotation</li><li>Order</li></ol>
   .r2-kv        label and value pairs in columns: <dl class="r2-kv"><div><dt>Owner</dt><dd>Zoe</dd></div>…</dl>
   ============================================================ */
.r2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.r2-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.r2-toolbar input[type="search"], .r2-toolbar input[type="text"] { min-width: 0; }

.r2-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin: 0; border-top: var(--rule) solid var(--color-text); border-bottom: 1px solid var(--color-text); overflow: hidden; }
.r2-stat { min-width: 0; padding: 7px 12px 8px; margin: 0 0 -1px -1px; border-left: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); }
.r2-stat > dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-stat > dd { margin: 3px 0 0; font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; }
.r2-stat > dd a { color: inherit; }
.r2-stat > dd small { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); }
.r2-stat.is-accent > dd { display: inline-block; max-width: 100%; padding: 1px 6px 2px; margin-left: -6px; background: var(--color-primary); color: var(--rail-accent-ink); }
.r2-stat.is-good > dd { color: var(--color-success-ink); }
.r2-stat.is-bad > dd { color: var(--color-error-ink); }

.r2-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: var(--rule) solid var(--color-text); scrollbar-width: none; background: var(--color-page-bg); }
.r2-tabs::-webkit-scrollbar { display: none; }
.r2-tabs > a, .r2-tabs > button {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.r2-tabs > a:hover, .r2-tabs > button:hover { background: var(--color-surface-sunken); text-decoration: none; }
.r2-tabs > [aria-current], .r2-tabs > [aria-selected="true"], .r2-tabs > .is-active { background: var(--color-text); color: var(--color-page-bg); }
.r2-tab-count { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; opacity: .75; }

.r2-card { border: 0; border-top: var(--rule) solid var(--color-text); background: none; padding: 12px 0 0; }
.r2-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.r2-card-head > h2, .r2-card-head > h3 { margin-right: auto; font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }

.r2-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px; border: 2px solid var(--color-text); background: var(--color-text); }
.r2-quick-item {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 0;
  padding: 10px 14px; background: var(--color-page-bg);
  color: var(--color-text); text-decoration: none;
}
.r2-quick-item > .icon { width: 18px; height: 18px; margin-bottom: 6px; }
.r2-quick-item > strong { font-size: var(--text-base); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.r2-quick-item > span { font-size: var(--text-sm); color: var(--color-text-muted); }
.r2-quick-item:hover { background: var(--color-text); color: var(--color-page-bg); text-decoration: none; }
.r2-quick-item:hover > span { color: inherit; }
.r2-quick-item.is-accent { background: var(--color-create-strong); color: var(--color-on-button); }
.r2-quick-item.is-accent > span { color: inherit; }
.r2-quick-item.is-accent:hover { background: var(--color-text); color: var(--color-page-bg); }

.r2-steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: r2step; }
.r2-steps > li {
  counter-increment: r2step; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 10px; margin-right: -2px; border: 2px solid var(--color-text);
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
}
.r2-steps > li::before { content: counter(r2step, decimal-leading-zero); font-family: var(--font-mono); font-weight: 700; }
.r2-steps > li.is-done { background: var(--color-text); color: var(--color-page-bg); }
.r2-steps > li.is-current { background: var(--color-primary); color: var(--rail-accent-ink); }

.r2-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.r2-kv > div { min-width: 0; }
.r2-kv dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.r2-kv dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ narrow: one band, the menu is a full sheet */
@media screen and (max-width: 1399px) {
  html[data-shell="r2"] .user-name { display: none; }
  .mast-sections > a { padding: 0 10px; }
  .mast-brand { padding-right: 14px; font-size: 18px; }
}
@media screen and (max-width: 1239px) {
  html[data-shell="r2"] .header-search-label, html[data-shell="r2"] .header-search kbd { display: none; }
  html[data-shell="r2"] .topbar > button.header-search { flex: none; width: 44px; }
}
@media screen and (max-width: 1099px) {
  .mast-sections, .mast-sub { display: none; }
  html[data-shell="r2"] .topbar { padding-right: 8px; }
  .mast-brand { padding: 0 12px 0 4px; margin-right: auto; }
  .mast-planner { padding: 0 12px; }
  .rail-toggle {
    display: grid; place-items: center; flex: none; width: 52px; border: 0; background: none; color: var(--color-topbar-text); cursor: pointer;
  }
  .rail-toggle:hover { background: var(--color-nav-hover-bg); }
  .rail {
    position: fixed; inset: var(--mast-band) 0 0 0; z-index: 210; display: none; flex-direction: column; overflow-y: auto;
    background: var(--color-page-bg); color: var(--color-text); padding: 8px 16px 32px;
  }
  body.rail-open .rail { display: flex; }
  body.rail-open { overflow: hidden; }
  .rail a { color: inherit; text-decoration: none; }
  .rail-brand, .rail-planner { display: none; }
  .rail-nav { display: block; }
  .rail-link.is-top, .rail-group > summary {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; border-bottom: var(--rule) solid var(--color-text); cursor: pointer; list-style: none;
    font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
  }
  .rail-group > summary::-webkit-details-marker { display: none; }
  .rail-group > summary > span { flex: 1; }
  .rail-group > summary > .icon:first-child, .rail-link.is-top > .icon { display: none; }
  .rail-group:not([open]) .rail-caret { transform: rotate(-90deg); }
  .rail-group > ul { list-style: none; margin: 0; padding: 0 0 8px; }
  .rail-group > ul .rail-link { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-bottom: 1px solid var(--color-border); font-size: var(--text-md); font-weight: 600; }
  .rail-link.is-active { background: var(--color-primary); color: var(--rail-accent-ink); }
  .rail-new {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 48px; margin-top: 20px;
    background: var(--color-create-strong); color: var(--color-on-button) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
  }
  html[data-shell="r2"] .page { padding: 20px var(--gutter) 40px; }
}
@media screen and (max-width: 600px) {
  .r2-strip { grid-template-columns: 1fr 1fr; }
  .r2-stat > dd { overflow: hidden; text-overflow: ellipsis; }
  html[data-shell="r2"] .theme-switch, html[data-shell="r2"] .scan-btn-label, html[data-shell="r2"] .scan-listen { display: none; }
  html[data-shell="r2"] .topbar .scan-btn { width: 40px; padding: 0; justify-content: center; }
  html[data-shell="r2"] .topbar > .scan-switch { margin-left: 6px; }
  .rail-toggle { width: 44px; }
  .mast-brand { font-size: 16px; letter-spacing: 0.02em; }
  .mast-planner > span { display: none; }
  .mast-planner { padding: 0 14px; }
  html[data-shell="r2"] .page-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mast-planner .icon { transition: none; }
}
@media print {
  .rail, .rail-scrim, .rail-toggle, .actions-toggle, .mast-sub, html[data-shell="r2"] .topbar, html[data-shell="r2"] .app-banner { display: none !important; }
  html[data-shell="r2"], html[data-shell="r2"] body, html[data-shell="r2"] .page { background: none !important; }
}

/* The older look's faded corner marks and row underlines are not drawn: state is a flat square dot or block. */
html[data-shell="r2"] .corner-mark:not(tr)::after, html[data-shell="r2"] .dash-tile::after,
html[data-shell="r2"] :is(.term-table, .sp-num-table) td.is-modified::after,
html[data-shell="r2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child::after,
html[data-shell="r2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child + :is(td, th)::after { content: none; }
html[data-shell="r2"] :is(.term-table, .sp-num-table) td.is-modified { box-shadow: inset 4px 0 0 var(--color-warning); }
html[data-shell="r2"] tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th)::after,
html[data-shell="r2"] tr:is([class*="state-"], .corner-mark, .act-row)::after,
html[data-shell="r2"] .corner-mark::after { content: none !important; }

/* The shared tab row (partials/tabs.php) reads like .r2-tabs and scrolls sideways instead of wrapping. */
html[data-shell="r2"] .tabs { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: var(--rule) solid var(--color-text); }
html[data-shell="r2"] .tabs::-webkit-scrollbar { display: none; }
html[data-shell="r2"] .tab { flex: none; padding: 9px 14px; font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); white-space: nowrap; transition: none; }
html[data-shell="r2"] .tab:hover { background: var(--color-surface-sunken); }
html[data-shell="r2"] .tab.is-active { background: var(--color-text); color: var(--color-page-bg); box-shadow: none; }

/* ------------------------------------------------------------ forms everywhere: no tinted panel, ruled sections */
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) { padding-top: 18px; }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .crumbs { max-width: none; margin: 0; padding: 0; }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .page-header {
  max-width: none; margin: 0 0 16px; padding: 0 0 10px; background: none; border: 0; border-bottom: var(--rule) solid var(--color-text);
}
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .page-header .page-title { color: var(--color-text); }
html[data-shell="r2"] .page-content .form-panel {
  max-width: var(--form-panel-width); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-shell="r2"] .page-content .form-panel + .form-panel { margin-top: 40px; }
html[data-shell="r2"] .form-panel + .setup-last-changed { margin-left: 0; }
html[data-shell="r2"] .form-panel > :is(h2, .panel-header > h2) { font-size: var(--text-sm); }

html[data-shell="r2"] .form-panel .form-section { display: block; min-width: 0; padding: 0 0 28px; border: 0; }
html[data-shell="r2"] .form-panel .form-section:first-of-type { padding-top: 0; }
html[data-shell="r2"] .form-panel .setup-form-intro + .form-section { margin-top: 16px; }
html[data-shell="r2"] .form-panel .form-section > .form-section-icon { display: none; }
/* A section's legend is its case label (the same drawing as .r2-label). */
html[data-shell="r2"] .form-panel .form-section > :is(legend, .form-section-title) {
  float: left; width: 100%; display: flex; align-items: stretch; margin: 0 0 16px; padding: 0 0 0 10px;
  background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-xs); font-weight: 700; line-height: 22px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
html[data-shell="r2"] .form-panel .form-section > :is(legend, .form-section-title)::after {
  content: ""; flex: 1 1 0; min-width: 12px; margin-left: 10px; background: var(--color-page-bg); border-top: var(--rule) solid var(--color-text);
}
html[data-shell="r2"] .form-panel .form-section > :is(legend, .form-section-title) + * { clear: both; }
html[data-shell="r2"] .form-panel .form-grid { gap: 18px 32px; }
html[data-shell="r2"] .form-panel :is(.form-row > label, .setup-pref-label > label, .form-label) { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
html[data-shell="r2"] .form-panel :is(.field-hint, .form-hint, .setup-summary-help) { color: var(--color-text-muted); }
html[data-shell="r2"] .setup-form .form-row:target,
html[data-shell="r2"] .setup-form .form-row.is-flash { outline: 0; background: color-mix(in srgb, var(--color-primary) 30%, var(--color-page-bg)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 30%, var(--color-page-bg)); }

/* Buttons sit under the fields; on a long form (several sections, or four fields or more) the save bar stays at the foot of the window. */
html[data-shell="r2"] .page-content .form-panel .form-actions {
  position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px;
  margin: 16px 0 0; padding: 0; background: none; border: 0; box-shadow: none;
}
html[data-shell="r2"] .page-content .form-panel form:is(:has(> .form-section ~ .form-section), .setup-form:has(.form-row ~ .form-row ~ .form-row ~ .form-row)) > .form-actions {
  position: sticky; bottom: 0; z-index: 4; margin-top: 8px; padding: 12px 0;
  background: var(--color-page-bg); border-top: var(--rule) solid var(--color-text);
}

/* Per-setting menu and changed marker: square, ink. */
html[data-shell="r2"] .setup-pref-tools-btn { border-color: var(--color-text); background: none; color: var(--color-text); }
html[data-shell="r2"] .setup-pref-tools-btn:hover,
html[data-shell="r2"] .setup-pref-tools-btn:focus-visible,
html[data-shell="r2"] .setup-pref-tools.is-open > .setup-pref-tools-btn { background: var(--color-text); color: var(--color-page-bg); border-color: var(--color-text); }
html[data-shell="r2"] .setup-modified-note { color: var(--color-text); }
html[data-shell="r2"] .setup-modified-note::before { background: var(--color-primary); box-shadow: none; border-radius: 50%; }


/* .r2-label outranks the older per-module heading rules. */
html[data-shell="r2"] :is(h2, h3, h4).r2-label { display: flex; padding: 0 0 0 10px; background: var(--color-text); color: var(--color-page-bg); font-size: var(--text-xs); font-weight: 700; line-height: 22px; letter-spacing: var(--tracking-label); text-transform: uppercase; border: 0; }

/* Compact pass: figure labels fit their cell, the inspector's rows sit closer. */
.r2-stat > dt { font-size: var(--text-dense); letter-spacing: 0.05em; }
html[data-shell="r2"] .page-sidebar .detail-grid > dt, html[data-shell="r2"] .page-sidebar .detail-grid > dd,
html[data-shell="r2"] .page-sidebar .opp-attrs > dt, html[data-shell="r2"] .page-sidebar .opp-attrs > dd { padding-top: 5px; padding-bottom: 5px; border-bottom-color: var(--color-border); }
html[data-shell="r2"] .page-sidebar .detail-grid > dt, html[data-shell="r2"] .page-sidebar .opp-attrs > dt { font-size: var(--text-dense); letter-spacing: 0.05em; }
html[data-shell="r2"] .sidebar-panel > h3 { padding: 6px 0 2px; margin-bottom: 2px; }
html[data-shell="r2"] .page-sidebar > .sidebar-panel + .sidebar-panel { margin-top: 14px; }

/* ------------------------------------------------------------ the question before something acts (app.js, window.grmsConfirm) */
dialog.ask-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 2px solid var(--color-text); border-radius: 0;
  background: var(--color-menu-bg); color: var(--color-text); box-shadow: none;
}
dialog.ask-dialog::backdrop { background: var(--color-backdrop); }
.ask-dialog-head { padding: 7px 18px; background: var(--color-text); color: var(--color-page-bg); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ask-dialog-text { margin: 0; padding: 18px 18px 6px; font-size: var(--text-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ask-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; }
.ask-dialog-actions .btn { min-height: 40px; min-width: 96px; justify-content: center; }
@media (max-width: 480px) { .ask-dialog-actions { flex-direction: column-reverse; } .ask-dialog-actions .btn { width: 100%; min-height: 44px; } }

/* A folded panel hides everything under its heading, whatever layout its contents were given. */
html[data-shell="r2"] .sidebar-panel.is-collapsed > :not(h3) { display: none !important; }