/* service.kraemerpfleiderer.com — the one stylesheet. Assembled by build-style.py from the
   house library: tokens.css verbatim, then the components the surface uses, then the
   delivery components from mockups/shared/delivery.css. Re-assemble, never edit. */

/* ---- IBM Plex, vendored (house rule: local assets only) ---- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/_/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/_/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/_/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/_/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* =============================================================================
   Kraemer & Pfleiderer — house design tokens.
   The single source of truth for colour, type, shape and spacing across every
   K&P digital tool (internal or commercial). Copy this block verbatim into a
   new tool; do not re-derive the values.

   Fonts are vendored locally as woff2 in production — never a runtime CDN.
   Point the @font-face `src` at /vendor/fonts/… (see fonts.css in any tool).
   ========================================================================== */

:root {
  /* ---- Interface chrome (intentionally neutral / greyscale) ---- */
  /* The 3D scene's own ground in a viewport tool, set from Settings → Appearance. SEPARATE
     from --bg on purpose: the scene is the user's to colour, the chrome is the house's. Wiring
     a viewport colour to --bg repaints every panel and rail in the tool — kp-cad spent months
     grey because of it. */
  --viewport-bg: #f5f6f8;
  --bg:          #f5f6f8;   /* page background                          */
  --panel:       #ffffff;   /* cards, toolbars, modals                  */
  --border:      #e2e5ea;   /* borders and dividers                     */
  --text:        #1d2230;   /* primary text                             */
  --muted:       #6b7280;   /* secondary text, labels, hints            */
  --accent:      #3d4250;   /* primary actions, active / selected state */
  --accent-text: #ffffff;   /* text / icons on the accent               */
  --danger:      #c0392b;   /* destructive actions, errors              */
  --ok:          #2e7d32;   /* success, "you're editing" affordance     */
  --hover:       #eceef2;   /* default control hover fill               */
  --marker:      #e23b3b;   /* "now" / today and similar attention cues */
  --contents-bg: #f3f4f6;   /* recessed fill: set-aside / archived rows  */

  /* ---- Semantic roles the dark theme needs ----
     A hex literal cannot follow a theme: `#fbeeec` is the sentence "a very pale red", which is
     only true in a light interface. Name the ROLE instead and the dark block below can say what
     that role is when the chrome is dark. Introduced when kp-cad went dark (2026-08-10); use
     these in a new tool from the start rather than typing the literals again. */
  --border-strong: #c9ced7;  /* hover border on cards and pickable tiles     */
  --icon:          #515b6b;  /* line icons in chrome (brighter than --muted) */
  --warn:          #b8731b;  /* caution text                                 */
  --warn-bg:       #fff4e6;
  --warn-border:   #d8c08a;
  --danger-bg:     #fbeeec;  /* fill behind a destructive control on hover   */
  --danger-border: #e6c4bf;
  --ok-text:       #1c8a4a;  /* "done" as TEXT (a filled badge uses --ok-solid) */
  --ok-solid:      #2f855a;  /* filled state badge — always carries white text  */
  --info-solid:    #2563eb;
  /* The accent used as TEXT rather than as a fill. Identical in the light theme; the dark one
     is where the two must part company, because one colour cannot be both a readable label on
     a panel and a fill that carries white text. */
  --accent-ink:    var(--accent);

  /* A faint computed rule for in-panel section dividers. */
  --divider:     color-mix(in srgb, var(--border) 70%, transparent);

  /* ---- Data palette (categorical / data colour ONLY — never chrome) ----
     A blue-to-teal range for chart series, item identity, legends, etc. */
  --data-1: #003087;
  --data-2: #0066FF;
  --data-3: #3399FF;
  --data-4: #029CA6;
  --data-5: #02B891;

  /* ---- Type ---- */
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Shape (radii) ---- */
  --radius-control: 6px;    /* buttons, inputs, segmented controls       */
  --radius-panel:   8px;    /* content / floating panels                 */
  --radius-modal:   10px;   /* modals / dialogs                          */
  --radius-pill:    999px;  /* fully-rounded pills, chips, swatches       */

  /* ---- Spacing rhythm ---- */
  --pad-toolbar: 8px 16px;
  /* The ONE height every control in the page header shares — buttons, icon buttons, the view
     switch and each of its segments, selects, the search field, the launcher and the cog. It
     is a token rather than a number repeated in a dozen rules because that pair of end buttons
     is also what sets the bar's content-driven height, so the two can never be changed apart.
     Moved 34px → 30px on 2026-08-08: height is the scarce resource in a tool that is mostly
     content, and the 34px target was sized for touch on a bar that is used with a mouse.
     NOTE the bar did not shrink by the full 4px, and will not shrink further. At 34px the
     controls were the tallest thing in it; at 30px the 22px headline's line box (30.8px at
     line-height 1.4) is, so the bar is ~48px and `.brand` — not this token — now sets it.
     Measured, not assumed: scripts/house-header-check.py reports the driver per tool. Session cues — the user chip, notification pills — keep their own
     compact 28px and are NOT controls. */
  --h-header-control: 30px;
  --pad-content: 16px;
  --pad-modal:   20px;

  /* ---- Elevation ---- */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.06);   /* floating card over a scene */
  --shadow-pill:  0 6px 20px rgba(0,0,0,0.12);  /* lifted pill / dropdown     */
  --shadow-modal: 0 12px 40px rgba(0,0,0,0.2);  /* modal over backdrop        */
}

/* =============================================================================
   Dark interface — a TOKEN SWAP, not a second stylesheet.

   Opt in per tool: write `data-theme="dark"` on <html> (synchronously, in the <head>, from a
   local echo of the user's saved preference — a deferred script runs after the first paint,
   which is the white flash it was meant to prevent) and every rule written against the tokens
   above follows for free. The rules that do NOT follow are the ones still holding literals;
   that is the work, and the semantic roles above exist to make it small.

   The values are re-chosen, not inverted: an inverted greyscale gives #0a0d10 panels that
   vibrate against pure-white text. Warm-neutral panels at #1b1f26, text at #e6e9ef (≈13:1),
   borders lifted enough to carry structure on their own — a black drop-shadow does nothing
   over a dark ground, so elevation moves from the shadow to the border.

   Measure it, do not eyeball it: kp-cad's scripts/ui_sim/dark-probe.mjs walks the live page,
   reports the worst text contrast and flags any surface still painting near-white. It found
   the accent-as-text problem (2.4:1) that --accent-ink now solves.
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:      #14171c;
  --panel:   #1b1f26;
  --border:  #2f3540;
  --text:    #e6e9ef;
  --muted:   #99a2b0;
  /* Lighter than the light theme's #3d4250: the accent must sit ABOVE the panel here, or a
     primary button reads as a hole. Its text stays white, so it also has to stay dark enough
     to carry it — this pair measures 5.6:1. */
  --accent:  #5b6577;
  --accent-text: #ffffff;
  --danger:  #e06a5c;
  --ok:      #4caf6a;
  --hover:   #262c36;
  --contents-bg: #191d24;
  --marker:  #ef5a5a;
  --viewport-bg: #1a1d23;

  --border-strong: #3d4553;
  --icon:          #aab3c0;
  --warn:          #e0a94a;
  --warn-bg:       color-mix(in srgb, #e0a94a 16%, var(--panel));
  --warn-border:   color-mix(in srgb, #e0a94a 38%, var(--border));
  --danger-bg:     color-mix(in srgb, var(--danger) 20%, var(--panel));
  --danger-border: color-mix(in srgb, var(--danger) 45%, var(--border));
  --ok-text:       #5ec37f;
  --ok-solid:      #2f855a;
  --info-solid:    #2f6fe0;
  /* Derived, not fixed, so a customer accent or a user-chosen one still drives it: the same
     hue lifted toward white until it reads (≈7:1 at the default). */
  --accent-ink:    color-mix(in srgb, var(--accent) 55%, #ffffff);

  /* The data palette's two darkest steps are unreadable on a dark ground — a person's identity
     chip would become a black hole. Shifted up the same ramp, keeping the blue→teal identity. */
  --data-1: #4d7fd6;
  --data-2: #3d8bff;

  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-pill:  0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.65);

  /* The UA's own dark widget chrome, and a recessed fill so a field reads as somewhere to type
     rather than as another panel. */
  color-scheme: dark;
}
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #14181e; }
:root[data-theme="dark"] input[type="color"] { background: transparent; }

/* ---- Base reset + typography ----------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.4 var(--font);   /* body / controls: 14px, line-height 1.4, 400 */
  color: var(--text);
  background: var(--bg);
}

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }  /* page title */
h2 { font-size: 16px; font-weight: 600; margin: 0; }                            /* dialog / panel title */

code, kbd, .mono { font-family: var(--mono); }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); }
.mono { font-family: var(--mono); }
.hint { color: var(--muted); font-size: 12px; }
h2 { font-size: 16px; font-weight: 600; margin: 0; }

/* ---- components.css, copied verbatim (the house library; do not re-type) ---- */

.spacer { flex: 1; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-panel); padding: var(--pad-content); margin-bottom: 16px;
}
.panel > h2 { margin: 0 0 4px; }
.panel > .section-hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

button {
  font: inherit; padding: 6px 12px; border: 1px solid var(--border);
  background: var(--panel); border-radius: var(--radius-control); cursor: pointer; color: var(--text);
}
button:hover { background: var(--hover); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.12); }
button.danger { color: var(--danger); border-color: #e6c4bf; background: var(--panel); }
button.danger:hover { background: #fbeeec; }            /* soft red tint, not the neutral hover */
button.small { padding: 4px 8px; font-size: 12px; }
button:disabled { opacity: 0.45; cursor: default; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: var(--radius-control);
  color: var(--muted); background: transparent; border: 1px solid transparent;
}
.icon-btn:hover { color: var(--text); background: var(--hover); border-color: var(--border); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.danger { color: var(--danger); }

.segmented { display: inline-flex; }
.segmented button { border-radius: 0; border-right: none; }
.segmented button:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.segmented button:last-child  { border-radius: 0 var(--radius-control) var(--radius-control) 0; border-right: 1px solid var(--border); }
.segmented button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

label.field { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
label.field input, label.field select, label.field textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--panel);
}
label.field input:focus, label.field select:focus, label.field textarea:focus {
  outline: none; border-color: var(--accent);
}
label.field textarea { resize: vertical; min-height: 58px; }

label.check, .check {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text);
}
.check input { margin: 0; flex: 0 0 auto; width: auto; }

.index-list {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 900px; margin: 0 auto;
}
.index-card {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: 9px 14px;   /* compact row height — ~41px. Never a chunky card. */
}
/* Hover lifts the border only. No shadow: a long list of shadowed rows reads as noise. */
.index-card:hover { border-color: #c9ced7; }
.index-card .index-name { font-weight: 600; font-size: 15px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-card .index-meta { color: var(--muted); font-size: 12px; font-family: var(--mono);
  flex: 0 0 138px; width: 138px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The date column. A fixed width, right-aligned, so dates line up down the list
   however long the names are — the thing that makes the column scannable. */
.index-card .index-when {
  color: var(--muted); font-size: 12px; flex: 0 0 auto; white-space: nowrap;
  min-width: 96px; text-align: right;
}
.index-card .index-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
/* An archived / retired record: still openable, visibly set aside. The dashed border
   carries the state without relying on the fill alone. */

.badge {
  display: inline-flex; align-items: center; font: 500 11px var(--mono);
  padding: 1px 6px; border-radius: 4px; background: var(--hover); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

/* =============================================================================
   The delivery surface (mockups 12–14), as built. Layered on tokens.css + the
   components copied above. The surface wears NO tool chrome — no launcher,
   no cog, no user chip: the reader is a client, not a member. It borrows the
   dossier's two registers: the dark cover band and the quiet reading bar.
   ========================================================================== */

body { background: var(--bg); }

/* The reading bar — the same bar the dossier carries, now with a breadcrumb. */
.svc-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; min-height: 36px;
  padding: 6px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  font: 500 11px var(--mono); color: var(--muted); letter-spacing: .03em;
}
.svc-bar .wordmark { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.svc-bar .crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12px var(--font); letter-spacing: 0; }
.svc-bar .crumbs a { color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.svc-bar .crumbs a:hover { text-decoration: underline; }
.svc-bar .crumbs .sep { color: var(--muted); }
.svc-bar .crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-bar .spacer { flex: 1; }
.svc-bar a.quiet { color: var(--muted); text-decoration: none; font: 500 12px var(--font); letter-spacing: 0; white-space: nowrap; }
.svc-bar a.quiet:hover { color: var(--text); }

/* The head band — the dossier cover, shortened to a delivery's identity. */
.svc-head { background: #111418; color: #f5f6f8; padding: 44px 48px 36px; }
.svc-head-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.svc-head .kicker {
  font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,246,248,.7); margin: 0 0 14px;
}
.svc-head h1 { font: 700 34px/1.12 var(--font); letter-spacing: -0.02em; margin: 0 0 8px; }
.svc-head .sub { font: 400 15px/1.45 var(--font); color: rgba(245,246,248,.72); margin: 0; max-width: 640px; }
.svc-head .ident { flex: 1 1 420px; min-width: 0; }
.svc-head .meta {
  flex: 0 1 auto; display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 0;
  font-size: 12.5px; align-self: flex-end;
}
.svc-head .meta dt { color: rgba(245,246,248,.55); }
.svc-head .meta dd { margin: 0; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .svc-head { padding: 28px 20px 24px; }
  .svc-head h1 { font-size: 26px; }
  .svc-head .meta { grid-template-columns: auto 1fr; }
}

/* The folder shell follows the record-list width ladder. */
main.svc { max-width: 900px; margin: 0 auto; padding: 20px 16px 40px; }
@media (min-width: 1240px) { main.svc { max-width: 1180px; } }

/* Actions row above the list: one primary on the left, the view switch right. */
.svc-actions { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.svc-actions .count { color: var(--muted); font-size: 12.5px; }
.svc-actions .spacer { flex: 1; }

/* Group dividers inside the folder — the dossier's book divider, smaller. */
.svc-group {
  display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px;
  font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.svc-group:first-of-type { margin-top: 2px; }
.svc-group::after { content: ""; flex: 1; border-bottom: 1px solid var(--border); transform: translateY(-3px); }

/* A folder row = the house index-card, with a kind icon in the badge slot. */
.index-list { max-width: none; }
.index-card { text-decoration: none; color: inherit; }
.index-card .kind {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--radius-control); background: var(--hover); color: var(--icon);
}
.index-card .kind svg { width: 16px; height: 16px; }
.index-card .kind.folder { background: color-mix(in srgb, var(--accent) 12%, var(--hover)); color: var(--accent-ink); }
.index-card .index-name { font-size: 14.5px; }
.index-card .index-sub { display: block; font: 400 11.5px var(--font); color: var(--muted); margin-top: 1px; }
.index-card .index-meta { font-size: 11.5px; }
.index-card button { font-size: 12.5px; padding: 3px 10px; }
@media (max-width: 720px) {
  .index-card .index-meta, .index-card .index-when { display: none; }
  .index-card { padding: 9px 12px; }
}

/* Photo tiles — the folder's other face. Chosen by content: a folder that is mostly
   pictures opens as tiles; documents open as rows. The switch is the house segmented. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden;
}
.tile:hover { border-color: var(--border-strong); }
.tile .ph { aspect-ratio: 4 / 3; }
.tile .ph.video::after {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17,20,24,.72); border: 1.5px solid rgba(245,246,248,.55);
  -webkit-mask: none;
}
.tile .ph { position: relative; }
.tile .ph .play { position: absolute; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; color: #f5f6f8; }
.tile .ph .play svg { width: 14px; height: 14px; margin-left: 2px; }
.tile-cap { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 8px; min-width: 0; }
.tile-cap .name { flex: 1 1 auto; min-width: 0; font: 500 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-cap .size { flex: 0 0 auto; font: 400 11px var(--mono); color: var(--muted); }
.tile.folder .ph { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent-ink); }
.tile.folder .ph svg { width: 28px; height: 28px; opacity: .8; }
.tile.folder .tile-cap .name { font: 600 13px var(--font); }

/* Footer — the dossier's, verbatim in spirit. */
.svc-foot {
  max-width: 1180px; margin: 36px auto 24px; padding: 16px 16px 0;
  border-top: 1px solid var(--border); display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.svc-foot .spacer { flex: 1; }
.svc-foot a { color: var(--muted); }

/* ---- The unlock page (mockup 12) ---------------------------------------- */
main.unlock { max-width: 440px; margin: 0 auto; padding: 44px 16px 40px; }
.unlock .panel { padding: 26px 28px 24px; }
.unlock h2 { margin: 0 0 6px; font-size: 18px; }
.unlock .lead { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.unlock label.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.unlock .pw { display: flex; gap: 8px; align-items: stretch; }
.unlock .pw input { border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text); background: var(--panel); flex: 1 1 auto; min-width: 0; font: 500 15px var(--mono); letter-spacing: .08em; padding: 8px 10px; height: auto; }
.unlock .pw .icon-btn { height: auto; width: 38px; }
.unlock button.primary { width: 100%; justify-content: center; margin-top: 14px; padding: 9px 14px; font-size: 14px; }
.unlock .remember { margin: 14px 0 0; }
.unlock .remember label.check { font-size: 12.5px; color: var(--muted); }
.unlock .foot-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.unlock .foot-note a { color: var(--accent-ink); }
.unlock .err { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 8px 10px; border-radius: var(--radius-control);
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); font-size: 12.5px; }

/* Buttons that carry a line icon: the icon is 14px and sits before the label. */
.svc button, .svc-actions button, .unlock .pw .icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.svc button svg { width: 14px; height: 14px; flex: 0 0 auto; }
.svc .icon-btn svg { width: 16px; height: 16px; }
.index-card .index-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The bar on a phone: the current folder always shows; its ancestors and the decorative
   address give way first (the breadcrumb "ellipsises from the left"). */
.svc-bar .crumbs { flex: 1 1 auto; overflow: hidden; }
.svc-bar .url { white-space: nowrap; }
@media (max-width: 720px) {
  .svc-bar { padding: 6px 14px; gap: 10px; }
  .svc-bar .url, .svc-bar .crumbs a, .svc-bar .crumbs .sep { display: none; }
}

/* ---- the surface's own additions, beyond the mockups ---- */
.tile .ph { background: var(--hover); }
.tile .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile .ph .play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17,20,24,.72); border: 1.5px solid rgba(245,246,248,.55); display: grid; place-items: center; color: #f5f6f8; }
.tile .ph .play svg { width: 14px; height: 14px; margin-left: 2px; }
a.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; padding: 6px 12px; border: 1px solid var(--border);
  background: var(--panel); border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
a.btn:hover { background: var(--hover); }
a.btn svg { width: 14px; height: 14px; }
.segmented a.btn { border-radius: 0; border-right: none; }
.segmented a.btn:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.segmented a.btn:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; border-right: 1px solid var(--border); }
.segmented a.btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
a.icon-btn { text-decoration: none; }
/* The row: its name's link covers the whole card; the action links sit above the cover. */
.index-card { position: relative; }
.index-card .index-name a { color: inherit; text-decoration: none; }
.index-card .index-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-panel); }
.index-card .index-actions { position: relative; z-index: 1; }
.index-card a.btn { font-size: 12.5px; padding: 3px 10px; }
.svc-actions a.btn .mono { color: var(--muted); font-size: 11.5px; }
.svc-front { max-width: 440px; margin: 0 auto; padding: 44px 16px 40px; }
.svc-front .panel { padding: 26px 28px 24px; }
.svc-front p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }