/* The raised look (the owner's pick, 2026-11-01: the design canvas's "Sleek" board, look="raised"): buttons that stand
   up off the page like keys and press in when they're on, a Sora face, small coloured marks for each group. Admin uses
   it everywhere (templates/admin/layout.html); NoRep Studio can take it the same way. Builds on style.css's tokens.

   Turning it on: put .raised on the page's <main> (a layout's main_class block: "page dash-page admin-page raised") and
   include templates/_raised_head.html in its head block (Sora's preload and @font-face, then this file). Everything
   below is under .raised, so a page without it looks exactly as before.

   Tokens (dark first; light under the two light-theme rules at the end of this block, the device's choice or Light
   picked in Settings). Every value text passes 4.5:1 on the buttons it sits on, every icon colour 3:1, in both themes.
     --font               Sora for the page's own text (labels, buttons, body); --font-display stays Barlow Condensed
     --r-card --r-card-line --r-card-shadow       a panel, a stat tile, the side menu's card
     --r-btn --r-btn-text --r-raise --r-raise-hover --r-press      a raised button: face, words, its shadow, lifted, pushed
     --r-on --r-on-ring --r-on-text --r-on-icon    pressed in: the current page, the chosen tab
     --r-red --r-red-face --r-red-raise --r-red-text     red: the primary button's face and shadow, red words
     --r-people --r-content --r-money --r-messages --r-system    the groups' colours (a mark, an icon)
     --r-good --r-warn --r-bad --r-note            value words: all right, worth a look, wrong, plain
     --r-dot-good --r-dot-warn --r-dot-bad         status dots (they only repeat what the words say)
     --r-label                                     a group's small uppercase name

   Components (any element; the colours come from the tokens):

     Raised button. Primary: red. On (aria-pressed="true" / aria-current / .is-on): pressed in.
       <a class="r-btn" href="…">Export</a>
       <button class="r-btn r-btn-primary" type="submit">Save</button>

     Chips or tabs: a row of small raised buttons, the chosen one pressed in (aria-current, aria-pressed="true" or
     aria-selected="true"). The row scrolls sideways on a phone.
       <nav class="r-chips" aria-label="…">
         <a class="r-chip" href="…" aria-current="page">Week</a> <a class="r-chip" href="…">Month</a>
       </nav>

     Raised card: a panel's surface. <section class="r-card">…</section>

     Value: a short live number or word beside a name, its tone in a class (.is-good / .is-warn / .is-bad; plain by
     default), optionally led by a status dot. A badge: a red count that wants attention.
       <span class="r-val is-good"><span class="r-dot" aria-hidden="true"></span>None</span>
       <span class="r-badge">3<span class="visually-hidden"> waiting</span></span>

     Status dot on its own: <span class="r-dot is-warn" aria-hidden="true"></span> (beside words that say the same).

     Lead card: one red-outlined link above a menu (Admin's Training), with its icon square, a title, a line and a chevron.
       <a class="r-lead" href="…">
         <span class="r-lead-icon">…svg…</span>
         <span class="r-lead-text"><span class="r-lead-title">Training</span><span class="r-lead-sub">8 members</span></span>
         <svg class="icon r-lead-chev" …/>   (the Comic Ink chevron-right, comic_icon(), in red)
       </a>

     The side menu (.dash-nav, shared by Admin and NoRep Studio): every link is a raised button row and the open page is
     pressed in. Optional: a head row, groups with a coloured mark (.r-g-people / -content / -money / -messages /
     -system set --g, the colour the row icons and the mark take), a value or a badge on the right of a row. A row is
     the markup both menus already have: its icon (an svg with class icon, or a .r-ico wrapper) then a <span> name.
       <nav class="dash-nav" aria-label="…">
         <div class="r-nav-head"><p class="r-nav-title">Admin</p>
           <span class="r-nav-status"><span class="r-dot" aria-hidden="true"></span>All systems OK</span></div>
         <a href="…" aria-current="page">…svg (class icon)…<span>Overview</span>
           <span class="r-val">36 videos</span></a>
         <div class="r-nav-group r-g-people" role="group" aria-label="People">
           <p class="r-nav-label" aria-hidden="true">People</p>
           <a href="…">…svg…<span>Accounts</span><span class="r-val">17</span></a>
         </div>
         <a class="r-nav-back" href="/">…Back to site</a>   (a quiet row under a line)
       </nav>
     On phones (900 px and under, dash.css's strip) the rows become raised chips in one sideways strip; the head, group
     names and Studio's channel block hide or shrink there.
   --------------------------------------------------------------------------------------------------------------------- */

.raised {
  --font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-card: #151518;
  --r-card-line: rgba(255, 255, 255, 0.07);
  --r-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 0 #070708, 0 14px 30px rgba(0, 0, 0, 0.32);
  --r-menu: #141416;
  --r-menu-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --r-btn: #202024;
  --r-btn-text: #e2e2e7;
  --r-raise: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #070708, 0 6px 14px rgba(0, 0, 0, 0.35);
  --r-raise-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 3px 0 #070708, 0 10px 20px rgba(0, 0, 0, 0.45);
  --r-press: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --r-on: #3a0d13;
  --r-on-ring: inset 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(225, 27, 34, 0.55);
  --r-on-text: #ffffff;
  --r-on-icon: #ff6b70;
  --r-red: #E11B22;
  --r-red-face: #CC0022;
  --r-red-face-hover: #dc0a2c;
  --r-red-raise: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #5c0010, 0 6px 14px rgba(204, 0, 34, 0.35);
  --r-red-raise-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 0 #5c0010, 0 10px 20px rgba(204, 0, 34, 0.42);
  --r-red-text: #ff6b70;
  --r-red-wash: rgba(225, 27, 34, 0.08);
  --r-people: #4c8dff;
  --r-content: #a78bfa;
  --r-money: #2fbf71;
  --r-messages: #ff6b70;
  --r-system: #c4c4cc;
  --r-good: #7fdba5;
  --r-warn: #f5b14c;
  --r-bad: #ff8a8e;
  --r-note: #9a9aa2;
  --r-dot-good: #2fbf71;
  --r-dot-warn: #f5b14c;
  --r-dot-bad: #ff4d55;
  --r-label: #9a9aa2;
  --r-sub: #b0b0b7;
  --r-line: rgba(255, 255, 255, 0.06);
  --r-glow: 0.55;                      /* how strong an icon's glow is (its colour at this opacity) */
  font-family: var(--font);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .raised {
    --r-card: #f7f7f9;
    --r-card-line: rgba(15, 15, 16, 0.07);
    --r-card-shadow: inset 0 1px 0 #fff, 0 2px 0 #dcdce1, 0 10px 24px rgba(15, 15, 16, 0.06);
    --r-menu: #f2f2f4;
    --r-menu-shadow: 0 10px 28px rgba(15, 15, 16, 0.07);
    --r-btn: #ffffff;
    --r-btn-text: #1d1d22;
    --r-raise: 0 1px 0 #fff inset, 0 2px 0 #d4d4da, 0 6px 14px rgba(15, 15, 16, 0.08);
    --r-raise-hover: 0 1px 0 #fff inset, 0 3px 0 #cacad1, 0 10px 20px rgba(15, 15, 16, 0.12);
    --r-press: inset 0 2px 4px rgba(15, 15, 16, 0.16);
    --r-on: #fbe9eb;
    --r-on-ring: inset 0 2px 5px rgba(120, 0, 12, 0.12), inset 0 0 0 1px rgba(204, 0, 34, 0.45);
    --r-on-text: #0f0f10;
    --r-on-icon: #b4232a;
    --r-red: #CC0022;
    --r-red-face: #c8102e;
    --r-red-face-hover: #b00d28;
    --r-red-raise: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 #7a0a1c, 0 6px 14px rgba(200, 16, 46, 0.25);
    --r-red-raise-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 0 #7a0a1c, 0 10px 20px rgba(200, 16, 46, 0.3);
    --r-red-text: #b4232a;
    --r-red-wash: rgba(204, 0, 34, 0.06);
    --r-people: #1d5fd6;
    --r-content: #6d3fd1;
    --r-money: #167a43;
    --r-messages: #c41c20;
    --r-system: #5c5c66;
    --r-good: #167a43;
    --r-warn: #9a4a06;
    --r-bad: #b4232a;
    --r-note: #5c5c66;
    --r-dot-good: #1f9d57;
    --r-dot-warn: #d97706;
    --r-dot-bad: #d71f23;
    --r-label: #5c5c66;
    --r-sub: #55555e;
    --r-line: rgba(15, 15, 16, 0.08);
    --r-glow: 0.28;
  }
}
:root[data-theme="light"] .raised {
  --r-card: #f7f7f9;
  --r-card-line: rgba(15, 15, 16, 0.07);
  --r-card-shadow: inset 0 1px 0 #fff, 0 2px 0 #dcdce1, 0 10px 24px rgba(15, 15, 16, 0.06);
  --r-menu: #f2f2f4;
  --r-menu-shadow: 0 10px 28px rgba(15, 15, 16, 0.07);
  --r-btn: #ffffff;
  --r-btn-text: #1d1d22;
  --r-raise: 0 1px 0 #fff inset, 0 2px 0 #d4d4da, 0 6px 14px rgba(15, 15, 16, 0.08);
  --r-raise-hover: 0 1px 0 #fff inset, 0 3px 0 #cacad1, 0 10px 20px rgba(15, 15, 16, 0.12);
  --r-press: inset 0 2px 4px rgba(15, 15, 16, 0.16);
  --r-on: #fbe9eb;
  --r-on-ring: inset 0 2px 5px rgba(120, 0, 12, 0.12), inset 0 0 0 1px rgba(204, 0, 34, 0.45);
  --r-on-text: #0f0f10;
  --r-on-icon: #b4232a;
  --r-red: #CC0022;
  --r-red-face: #c8102e;
  --r-red-face-hover: #b00d28;
  --r-red-raise: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 #7a0a1c, 0 6px 14px rgba(200, 16, 46, 0.25);
  --r-red-raise-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 0 #7a0a1c, 0 10px 20px rgba(200, 16, 46, 0.3);
  --r-red-text: #b4232a;
  --r-red-wash: rgba(204, 0, 34, 0.06);
  --r-people: #1d5fd6;
  --r-content: #6d3fd1;
  --r-money: #167a43;
  --r-messages: #c41c20;
  --r-system: #5c5c66;
  --r-good: #167a43;
  --r-warn: #9a4a06;
  --r-bad: #b4232a;
  --r-note: #5c5c66;
  --r-dot-good: #1f9d57;
  --r-dot-warn: #d97706;
  --r-dot-bad: #d71f23;
  --r-label: #5c5c66;
  --r-sub: #55555e;
  --r-line: rgba(15, 15, 16, 0.08);
  --r-glow: 0.28;
}

/* Raised button ------------------------------------------------------------------------------------------------- */

.raised .r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 0; border-radius: 12px; background: var(--r-btn); color: var(--r-btn-text); box-shadow: var(--r-raise);
  font: 600 14px/1.2 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, color 0.15s ease;
}
.raised .r-btn:hover { transform: translateY(-1px); box-shadow: var(--r-raise-hover); }
.raised .r-btn:active { transform: translateY(2px); box-shadow: var(--r-press); }
.raised .r-btn-primary { background: var(--r-red-face); color: #fff; box-shadow: var(--r-red-raise); }
.raised .r-btn-primary:hover { background: var(--r-red-face-hover); box-shadow: var(--r-red-raise-hover); }
.raised .r-btn-primary:active { box-shadow: var(--r-press); }
.raised .r-btn[aria-pressed="true"], .raised .r-btn[aria-current], .raised .r-btn.is-on {
  transform: none; background: var(--r-on); color: var(--r-on-text); box-shadow: var(--r-on-ring); font-weight: 700;
}
.raised .r-btn:focus-visible, .raised .r-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Chips and tabs ------------------------------------------------------------------------------------------------ */

.raised .r-chips {
  display: flex; gap: 8px; min-width: 0; max-width: 100%; margin: -4px; padding: 4px 4px 6px; overflow-x: auto;
  scrollbar-width: none;
}
.raised .r-chips::-webkit-scrollbar { display: none; }
.raised .r-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0;
  border-radius: 11px; background: var(--r-btn); color: var(--r-btn-text); box-shadow: var(--r-raise);
  font: 600 13.5px/1.2 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.raised .r-chip:hover { transform: translateY(-1px); box-shadow: var(--r-raise-hover); }
.raised .r-chip:active { transform: translateY(2px); box-shadow: var(--r-press); }
.raised .r-chip[aria-current]:not([aria-current="false"]), .raised .r-chip[aria-pressed="true"],
.raised .r-chip[aria-selected="true"] {
  transform: none; background: var(--r-on); color: var(--r-on-text); box-shadow: var(--r-on-ring); font-weight: 700;
}

/* Raised card --------------------------------------------------------------------------------------------------- */

.raised .r-card {
  background: var(--r-card); border: 1px solid var(--r-card-line); border-radius: 18px; box-shadow: var(--r-card-shadow);
}

/* Values, badges, dots ------------------------------------------------------------------------------------------ */

.raised .r-val {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--r-note);
  font: 500 12px/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.raised .r-val.is-good { color: var(--r-good); }
.raised .r-val.is-warn { color: var(--r-warn); font-weight: 600; }
.raised .r-val.is-bad { color: var(--r-bad); font-weight: 600; }
.raised .r-dot {
  flex: none; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--r-dot-good);
  box-shadow: 0 0 6px color-mix(in srgb, var(--r-dot-good) 80%, transparent);
}
.raised .is-warn > .r-dot, .raised .r-dot.is-warn {
  background: var(--r-dot-warn); box-shadow: 0 0 6px color-mix(in srgb, var(--r-dot-warn) 70%, transparent);
}
.raised .is-bad > .r-dot, .raised .r-dot.is-bad {
  background: var(--r-dot-bad); box-shadow: 0 0 6px color-mix(in srgb, var(--r-dot-bad) 70%, transparent);
}
.raised .r-badge, .raised .dash-nav-count {
  flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: auto; padding: 0 7px;
  border-radius: 11px; background: var(--r-red-face); color: #fff; box-shadow: 0 4px 10px rgba(204, 0, 34, 0.4);
  font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums;
}

/* Lead card ----------------------------------------------------------------------------------------------------- */

.raised .r-lead {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--r-red);
  background: var(--r-red-wash); color: var(--text); text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.12s ease, background-color 0.15s ease;
}
.raised .r-lead:hover, .raised .r-lead:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r-red) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--r-red) 18%, transparent);
}
.raised .r-lead:active { transform: translateY(1px); box-shadow: none; }
.raised .r-lead-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--r-red-face); color: #fff; box-shadow: 0 6px 16px rgba(204, 0, 34, 0.45);
  --ci-p: #fff; --ci-k: #5c0010; --ci-o: #5c0010; --ci-r: #ffd0d3;
}
.raised .r-lead-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.raised .r-lead-title { font: 700 16px/1.2 var(--font); color: var(--r-red-text); }
.raised .r-lead-sub { font: 400 12px/1.3 var(--font); color: var(--r-sub); overflow-wrap: anywhere; }
.raised .r-lead-chev { flex: none; color: var(--r-red-text); --ci-p: var(--r-red-text); --ci-r: var(--r-red-text); }
.raised .r-lead[aria-current]:not([aria-current="false"]) { background: color-mix(in srgb, var(--r-red) 14%, transparent); }
.raised .r-lead[aria-current]:not([aria-current="false"]) .r-lead-title { font-weight: 800; }

/* The side menu (.dash-nav: Admin and NoRep Studio) -------------------------------------------------------------- */

.raised .dash-nav {
  gap: 5px; padding: 16px 12px 12px; background: var(--r-menu); border: 1px solid var(--r-card-line); border-radius: 22px;
  box-shadow: var(--r-menu-shadow);
}
.raised .dash-nav > *, .raised .r-nav-group > * { flex-shrink: 0; }  /* (a menu taller than its box scrolls; nothing squeezes) */
.raised .r-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 10px; }
.raised .r-nav-title {
  margin: 0; font: italic 800 26px/1 "Barlow Condensed", var(--font-display); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text);
}
.raised .r-nav-status {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 500 11.5px/1.2 var(--font); color: var(--r-note);
  text-align: right;
}
.raised .r-nav-status .r-dot { width: 8px; height: 8px; }
.raised .r-nav-status.is-warn { color: var(--r-warn); font-weight: 600; }
.raised .r-nav-status.is-bad { color: var(--r-bad); font-weight: 600; }
.raised .r-nav-group { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; }
.raised .r-nav-label {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 2px 8px 4px;
  font: 600 11px/1.2 var(--font); letter-spacing: 0.13em; text-transform: uppercase; color: var(--r-label);
}
.raised .r-nav-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--g, var(--r-red)); }
.raised .r-g-people { --g: var(--r-people); }
.raised .r-g-content { --g: var(--r-content); }
.raised .r-g-money { --g: var(--r-money); }
.raised .r-g-messages { --g: var(--r-messages); }
.raised .r-g-system { --g: var(--r-system); }

/* A row: a raised button. (Studio's channel block at the top and the quiet Back row aren't buttons.) */
.raised .dash-nav a:not(.dash-nav-channel):not(.studio-channel):not(.r-lead):not(.r-nav-back) {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px;
  border-radius: 13px; background: var(--r-btn); color: var(--r-btn-text); box-shadow: var(--r-raise);
  font: 500 14.5px/1.2 var(--font); text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.raised .dash-nav a:not(.dash-nav-channel):not(.studio-channel):not(.r-lead):not(.r-nav-back):hover {
  transform: translateY(-1px); background: var(--r-btn); color: var(--r-btn-text); box-shadow: var(--r-raise-hover);
}
.raised .dash-nav a:not(.dash-nav-channel):not(.studio-channel):not(.r-lead):not(.r-nav-back):active { transform: translateY(2px); box-shadow: var(--r-press); }
.raised .dash-nav a:not(.dash-nav-channel):not(.studio-channel):not(.r-lead):not(.r-nav-back)[aria-current] {
  transform: none; background: var(--r-on); color: var(--r-on-text); box-shadow: var(--r-on-ring); font-weight: 700;
  --g: var(--r-on-icon);
}
.raised .dash-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The row's icon in its group's colour (red outside a group: Overview), with a soft glow. A Comic Ink icon takes the
   colour as its paper and its red marks; an older line icon as its stroke. */
.raised .dash-nav a:not(.r-lead):not(.r-nav-back):not(.dash-nav-channel):not(.studio-channel) > .icon, .raised .r-ico {
  flex: none; color: var(--g, var(--r-red)); --ci-p: var(--g, var(--r-red)); --ci-r: var(--g, var(--r-red));
  --ci-o: color-mix(in srgb, var(--g, var(--r-red)) 45%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g, var(--r-red)) calc(var(--r-glow) * 100%), transparent));
}
.raised .dash-nav a > .icon + span, .raised .r-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raised .dash-nav a .r-val { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
.raised .dash-nav a[aria-current] .r-val.is-note { color: color-mix(in srgb, var(--r-on-text) 72%, var(--r-on)); }
.raised .dash-nav .r-lead { margin-bottom: 4px; }
.raised .dash-nav-sep { margin: 8px 4px 0; background: var(--r-line); }
.raised .dash-nav .r-nav-back {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 10px; margin-top: 6px;
  border-top: 1px solid var(--r-line); border-radius: 0; color: var(--text-2); font: 500 14px/1.2 var(--font);
  background: none; box-shadow: none;
}
.raised .dash-nav .r-nav-back:hover { color: var(--text); background: none; }
.raised .dash-nav-title { color: var(--r-label); }

@media (prefers-reduced-motion: reduce) {
  .raised .r-btn, .raised .r-chip, .raised .r-lead, .raised .dash-nav a { transition: none; }
  .raised .r-btn:hover, .raised .r-chip:hover, .raised .r-lead:hover, .raised .dash-nav a:hover,
  .raised .r-btn:active, .raised .r-chip:active, .raised .r-lead:active, .raised .dash-nav a:active { transform: none; }
}
@media (forced-colors: active) {
  .raised .dash-nav a[aria-current], .raised .r-chip[aria-current], .raised .r-chip[aria-pressed="true"],
  .raised .r-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Phones (dash.css turns the menu into one sideways strip at 900 px and under): raised chips a thumb can hit (44 px),
   the lead card first, values small beside the names, group names and the head hidden */
@media (max-width: 900px) {
  .raised .dash-nav {
    flex-direction: row; align-items: center; gap: 8px; padding: 4px 16px 12px; background: none; border: 0;
    border-bottom: 1px solid var(--r-line); border-radius: 0; box-shadow: none;
  }
  .raised .r-nav-head, .raised .r-nav-label, .raised .dash-nav-sep { display: none; }
  .raised .r-nav-group { display: contents; }
  .raised .dash-nav a:not(.dash-nav-channel):not(.studio-channel):not(.r-lead):not(.r-nav-back) {
    flex: none; min-height: 44px; padding: 0 13px; gap: 8px; border-radius: 12px; font-size: 14px; white-space: nowrap;
  }
  .raised .dash-nav a > .icon + span, .raised .r-nav-name { flex: none; overflow: visible; }
  .raised .dash-nav a .r-val { max-width: 9em; }
  .raised .dash-nav .r-lead { flex: none; margin: 0; padding: 5px 12px 5px 5px; min-height: 44px; border-radius: 13px; gap: 9px; }
  .raised .r-lead-icon { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
  .raised .r-lead-text { flex: none; }
  .raised .r-lead-title { font-size: 14px; }
  .raised .r-lead-sub { white-space: nowrap; font-size: 11.5px; }
  .raised .r-lead-chev { display: none; }
  .raised .dash-nav .r-nav-back { flex: none; margin: 0; border: 0; padding: 0 10px; }
}