/* Hallprint LAB — card.css: two things in the language of styles.css.
   1. html.card: the public hall card (card.html, at /cards/<id>) — a standalone page, so it carries its own copy of
      the palette and the type system of styles.css :root, scoped to html.card (loaded in the app, where <html> has no
      such class, these tokens stay inert and the app's own :root rules apply).
   2. dialog.share: the Share dialog of the Reverb page (cards.js), styled with the app's tokens and classes
      (.btn, .check); only the parts the app has no class for are here. */

/* ================================================================== 1. the public hall card */
html.card {
  --bg-top: #0A0C0F;
  --bg-bottom: #060709;
  --panel: #0E1116;
  --panel-light: #141920;
  --panel-hover: #1A2129;
  --panel-pressed: #0F1318;
  --panel-edge: #040506;
  --accent: #2FD3FF;
  --accent-light: #8AE6FF;
  --accent-dark: #1A9FC4;
  --accent-rgb: 47, 211, 255;
  --text: #DDE4EB;
  --text-rgb: 221, 228, 235;
  --text-dim: #9DA7B3;
  --text-dim-rgb: 157, 167, 179;
  --alert: #FF4D4D;
  --alert-rgb: 255, 77, 77;
  --line: #2A313B;
  --line-strong: #3B4552;
  --field: #07090C;
  --amber: #FFB300;
  --amber-rgb: 255, 179, 0;
  --ok: #3DDC84;
  --ok-light: #8CF0BC;
  --ok-rgb: 61, 220, 132;
  --btn-text: #C3CCD6;
  --on-accent: #06090C;
  --tick: #788593;
  --grid-ink: rgba(255, 255, 255, 0.035);
  --grid-bg: linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 8px 8px,
             linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 8px 8px;
  --readout-shadow: inset 0 0 0 1px var(--line), inset 0 2px 5px rgba(0, 0, 0, 0.55);
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239DA7B3' stroke-width='1.4'/></svg>");
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --font-label: var(--font-mono);
  --font-body: var(--font-sans);
  color-scheme: dark;
  background: var(--bg-bottom);
}
html.card, html.card body { margin: 0; padding: 0; color: var(--text); }
body.card {
  background: var(--bg-bottom) linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.card ::selection { background: rgba(var(--accent-rgb), 0.35); color: #FFFFFF; }
.card button { font: inherit; color: inherit; cursor: pointer; }
.card button:disabled { cursor: default; }
.card [hidden] { display: none !important; }

/* the stage: one column, 760 px at most, 16 px gutters, the faint 40 px grid of the app behind the plates */
.card-stage {
  position: relative; box-sizing: border-box;
  max-width: 760px; margin: 0 auto; padding: 22px 16px 28px;
  counter-reset: section;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px;
}

/* the label register */
.card .section-title, .card .card-subtitle, .card .card-meta dt, .card .card-figs dt, .card .card-row > label, .card .card-level > span,
.card .btn, .card .segment, .card .card-bands th, .card .card-tag {
  font-family: var(--font-label); font-weight: 500; text-transform: uppercase;
}

/* corner registration ticks on every framed box */
.card-plate::before, .card-plot-wrap::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 7px no-repeat;
}
.card-plot-wrap::before { --tick: var(--accent); }

/* masthead: the wordmark with its lamp, the subtitle, a rule */
.card-masthead { position: relative; padding: 2px 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--line-strong); }
.card-title {
  margin: 0; font: 600 19px/26px var(--font-mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.card-title::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 14px; vertical-align: 3px;
  background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}
.card-subtitle { margin: 4px 0 0; font-size: 10px; line-height: 16px; letter-spacing: 0.12em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-kind {
  position: absolute; right: 0; top: 6px;
  font: 500 9px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark);
}
.card-kind::before { content: "[ "; color: var(--tick); } .card-kind::after { content: " ]"; color: var(--tick); }
@media (max-width: 480px) { .card-title { font-size: 16px; letter-spacing: 0.2em; } .card-kind { position: static; display: block; margin-top: 4px; } }

/* plates: the engineering grid inside, a hairline, square */
.card-plate {
  position: relative; box-sizing: border-box; margin: 0 0 12px; padding: 12px 18px 16px;
  background: var(--grid-bg), var(--panel);
  border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
@media (max-width: 480px) { .card-plate { padding: 10px 12px 14px; } }

/* numbered section titles with a hairline run to the edge */
.card .section-title {
  display: flex; align-items: center; gap: 10px;
  height: 22px; margin: 0 0 6px; line-height: 22px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--text);
  counter-increment: section;
}
.card .section-title::before { content: counter(section, decimal-leading-zero); flex: 0 0 auto; color: var(--accent); font-weight: 500; }
.card .section-title::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 2px; background: var(--line); }

/* 01 hall: the name, the position, the record */
.card-hall-name { margin: 4px 0 0; font: 500 17px/24px var(--font-mono); letter-spacing: 0.02em; color: var(--text); overflow-wrap: anywhere; }
.card-hall-position { margin: 2px 0 0; font: 400 11px/16px var(--font-mono); letter-spacing: 0.02em; color: var(--text-dim); overflow-wrap: anywhere; }
.card-hall-position:empty { display: none; }
.card-meta { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 10px 0 0; }
.card-meta dt, .card-meta dd { margin: 0; box-shadow: inset 0 -1px 0 var(--line); line-height: 24px; min-height: 24px; }
.card-meta dt { font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; }
.card-meta dd { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em; color: var(--text); overflow-wrap: anywhere; }
.card-meta dd:empty::before { content: "–"; color: var(--text-dim); }
.card-notes { margin: 10px 0 0; font-family: var(--font-body); font-size: 11.5px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
.card-notes:empty { display: none; }

/* 02 the decay plot: the image in an accent-ticked frame */
.card-plot-wrap { position: relative; margin-top: 2px; border: 1px solid var(--line); background: var(--field); }
.card-plot-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 300; }
/* on a phone the 760 px plot would shrink to ~40 % and its 9–13 px lettering with it: keep it at 600 px (≈ 80 %) and scroll
   sideways inside the frame; the scroller is an inner box so the corner ticks of the wrap stay put */
.card-plot-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .card-plot-scroll img { width: 600px; max-width: none; }
}
.card-plot-wrap.is-missing { height: 120px; display: flex; align-items: center; justify-content: center; font: 400 10.5px var(--font-mono); color: var(--text-dim); }
.card-plot-wrap.is-missing img, .card-plot-wrap.is-missing .card-plot-scroll { display: none; }

/* 03 figures: four read-outs, the octave-band table */
.card-figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 0 0 12px; }
.card-fig { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; line-height: 24px; box-shadow: inset 0 -1px 0 var(--line); }
.card-figs dt { font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; }
.card-figs dd { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; }
.card-figs dd.is-dim { color: rgba(var(--text-dim-rgb), 0.5); }
@media (max-width: 480px) { .card-figs { grid-template-columns: 1fr; } }
.card-bands { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.01em; }
.card-bands th { padding: 3px 2px 5px; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; color: var(--text-dim); text-align: right; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.card-bands td { padding: 4px 2px; text-align: right; color: var(--text); border-bottom: 1px solid var(--line); white-space: nowrap; }
.card-bands th:first-child, .card-bands td:first-child { text-align: left; padding-left: 0; width: 15%; }
.card-bands th.mid, .card-bands td.mid { border-left: 1px solid var(--line-strong); padding-left: 6px; color: var(--accent); }
.card-bands th.mid { color: var(--accent-dark); }
.card-bands td.is-dim, .card-bands td.mid.is-dim { color: rgba(var(--text-dim-rgb), 0.45); }
.card-bands td:empty::before { content: "–"; color: rgba(var(--text-dim-rgb), 0.45); }
@media (max-width: 480px) { .card-bands { font-size: 9.5px; } .card-bands th { font-size: 8px; letter-spacing: 0.04em; } .card-bands th:first-child, .card-bands td:first-child { width: 17%; } }
.card-note { margin: 8px 0 0; font-family: var(--font-body); font-size: 10.5px; line-height: 1.45; color: var(--text-dim); }
.card-note a { color: var(--accent); text-decoration: none; }
.card-note a:hover { color: var(--accent-light); }

/* 04 the auralisation player */
.card-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 8px; align-items: center; height: 30px; }
.card-row > label, .card-level > span { font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.card select {
  box-sizing: border-box; width: 100%; height: 26px; min-width: 0; padding: 0 22px 0 6px; margin: 0;
  background-color: var(--field); background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 8px center;
  border: 1px solid var(--line); border-radius: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  font: 11px/24px var(--font-mono); letter-spacing: 0; color: var(--text);
  appearance: none; -webkit-appearance: none; text-overflow: ellipsis; outline: none; cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
}
.card select:hover { border-color: var(--line-strong); }
.card select:focus { border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.25); }
.card select :is(option, optgroup) { background: var(--panel-light); color: var(--text); font-family: var(--font-mono); }
.card select:disabled { opacity: 0.4; cursor: default; }
/* iOS Safari zooms the page when a control under 16 px takes focus and the viewport meta leaves the scale free;
   on a phone the select is set at 16 px, the only size that stops it, and its row grows with it */
@media (max-width: 600px) and (pointer: coarse) {
  .card-row { height: 36px; }
  .card select { height: 32px; font-size: 16px; line-height: 30px; }
}

.card .btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px 0 calc(12px + 0.1em);
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--panel-light); color: var(--btn-text);
  font-size: 10.5px; letter-spacing: 0.1em; line-height: 28px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}
.card .btn:hover { background: var(--panel-hover); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 0 10px rgba(var(--accent-rgb), 0.16); }
.card .btn:active { background: var(--panel-pressed); box-shadow: none; }
.card .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.card .btn.primary:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--on-accent); }
.card .btn.is-on { background: rgba(var(--ok-rgb), 0.1); border-color: var(--ok); color: var(--ok-light); }
.card .btn:disabled, .card .btn:disabled:hover { opacity: 0.35; background: var(--panel-light); border-color: var(--line-strong); color: var(--btn-text); box-shadow: none; }
.card .btn.primary:disabled, .card .btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card :is(.btn, .segment, select, a):focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.card-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.card #play { flex: 0 0 84px; } .card #stop { flex: 0 0 72px; }   /* scoped: card.css is also loaded by the app */
.card .segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 0; overflow: hidden; margin-left: auto; }
.card .segment {
  box-sizing: border-box; height: 28px; min-width: 0; padding: 0 12px 0 calc(12px + 0.12em); margin: 0;
  border: 0; background: var(--field); color: var(--btn-text);
  font-size: 10px; letter-spacing: 0.12em; white-space: nowrap;
  transition: background-color 120ms, color 120ms;
}
.card .segment + .segment { border-left: 1px solid var(--line-strong); }
.card .segment:hover { background: var(--panel-light); color: var(--text); }
.card .segment[aria-checked="true"], .card .segment[aria-checked="true"]:hover { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.card .segment:focus-visible { outline: 1px solid var(--text); outline-offset: -3px; }
@media (max-width: 480px) { .card .segmented { margin-left: 0; width: 100%; } .card .segment { flex: 1 1 0; padding: 0 6px; font-size: 9.5px; } }

.card-level { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px; column-gap: 8px; align-items: center; height: 26px; margin-top: 8px; cursor: default; }
.card-level output { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; white-space: nowrap; }
.card-range { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.card-range::-webkit-slider-runnable-track { height: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, var(--line) 1px 10%); }
.card-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 0; background: var(--accent); box-shadow: 0 0 0 1px var(--panel); }
.card-range::-moz-range-track { height: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, var(--line) 1px 10%); }
.card-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--accent); box-shadow: 0 0 0 1px var(--panel); }
.card-range:hover::-webkit-slider-thumb, .card-range:focus-visible::-webkit-slider-thumb { background: var(--accent-light); }
.card-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--accent); }

.card-status {
  min-height: 16px; margin: 8px 0 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 16px; letter-spacing: 0.01em; color: var(--text-dim);
  overflow-wrap: anywhere;
}
.card-status::before { content: "\25CF"; display: inline-block; margin-right: 7px; font-size: 7px; vertical-align: 1px; color: var(--tick); }
.card-status:empty::before { display: none; }
.card-status.is-busy { color: var(--amber); } .card-status.is-busy::before { color: var(--amber); }
.card-status.is-playing { color: var(--text); } .card-status.is-playing::before { color: var(--ok); }
.card-status.is-error { color: var(--alert); } .card-status.is-error::before { content: "[ERR]"; font-size: 10.5px; color: var(--alert); vertical-align: 0; }

/* 05 download: a key with the file beside it */
.card-download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.card-download-row .btn { flex: 0 0 auto; }
.card-file { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); overflow-wrap: anywhere; }

/* an error plate ([ERR] in red) */
.card-error { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--alert); }
.card-error::before { content: "[ERR] "; }
.card-error a { color: var(--accent); text-decoration: none; }

/* footer: a status bar of two cells */
.card-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-strong);
  font: 400 9.5px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}
.card-footer a { color: var(--text-dim); text-decoration: none; }
.card-footer .card-site { text-transform: none; letter-spacing: 0.04em; }   /* the domain keeps its case, as .footer-right does in the app */
.card-footer a:hover { color: var(--accent); }
.card-footer .card-app::before { content: "\2197 "; color: var(--accent-dark); }

/* ================================================================== 2. the Share dialog of the app (cards.js) */
dialog.share {
  position: relative;
  width: 470px; max-width: calc(100vw - 40px); padding: 24px 28px 20px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--grid-bg), var(--panel); color: var(--text);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7); text-align: left;
  font-family: var(--font-body);
  counter-reset: share;
}
dialog.share::backdrop { background: rgba(3, 4, 6, 0.78); }
dialog.share::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 7px no-repeat;
}
.share h2 { margin: 0; font: 600 16px/24px var(--font-mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text); }
.share .share-sub { margin: 2px 0 0; font: 500 10px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.share-hall { margin: 12px 0 0; padding: 5px 10px 6px; background: var(--field); box-shadow: var(--readout-shadow); }
.share-hall-name { font: 500 13px/20px var(--font-mono); letter-spacing: 0.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-hall-format { font: 400 9.5px/14px var(--font-mono); letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.share h3 {
  margin: 0 0 6px; padding-top: 12px; border-top: 1px solid var(--line);
  font: 500 9.5px/14px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
  counter-increment: share;
}
.share h3:first-of-type { margin-top: 14px; }
.share h3::before { content: counter(share, decimal-leading-zero) "  "; color: var(--accent-dark); }
.share-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 6px; align-items: center; height: 30px; }
.share-row > label { font: 500 9.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.share input[type="password"], .share input[type="text"] {
  box-sizing: border-box; width: 100%; height: 24px; min-width: 0; padding: 0 6px; margin: 0;
  background-color: var(--field); border: 1px solid var(--line); border-radius: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  font: 11px/22px var(--font-mono); letter-spacing: 0.01em; color: var(--text); outline: none; caret-color: var(--accent);
  transition: border-color 120ms, box-shadow 120ms;
}
.share input::placeholder { color: rgba(var(--text-dim-rgb), 0.75); font-style: normal; }
.share input:hover { border-color: var(--line-strong); }
.share input:focus { border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.25); }
.share input:disabled { opacity: 0.4; }
.share-help { margin: 2px 0 0; font-family: var(--font-body); font-size: 10.5px; line-height: 1.45; color: var(--text-dim); }
.share-checks { display: flex; gap: 22px; height: 24px; align-items: center; }
.share-link {
  display: block; height: 24px; padding: 0 8px; box-sizing: border-box;
  font: 400 10.5px/24px var(--font-mono); letter-spacing: 0.01em; color: var(--text);
  background: var(--field); box-shadow: var(--readout-shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; -webkit-user-select: text;
}
.share-link.is-empty { color: var(--text-dim); }
.share-status {
  height: 32px; margin: 8px 0 0; font: 400 10.5px/16px var(--font-mono); letter-spacing: 0.01em; color: var(--text-dim);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.share-status.is-ok { color: var(--ok-light); }
.share-status.is-warn { color: var(--amber); }
.share-status.is-error { color: var(--alert); }
.share-status.is-error::before { content: "[ERR] "; }
.share.is-busy .share-status { color: var(--amber); }
.share.is-busy .share-status::before { content: "\25CF "; font-size: 7px; vertical-align: 1px; color: var(--amber); }
.share-actions { display: flex; gap: 6px; margin-top: 12px; }
.share .btn { position: static; flex: 1 1 0; min-width: 0; height: 28px; padding: 0 4px 0 calc(4px + 0.08em); font-size: 10px; letter-spacing: 0.08em; cursor: pointer; }   /* the selector-key register: four keys share ~76 px each, a 9-character label needs 72 */
.share .btn.share-close { flex: 0 0 76px; margin-left: 6px; }
.share .btn.is-armed, .share .btn.is-armed:hover { background: var(--alert); border-color: var(--alert); color: var(--on-accent); font-weight: 600; box-shadow: 0 0 10px rgba(var(--alert-rgb), 0.35); }