/* ============================================================
   Share text (full version) - tool styles  v2
   MagpieToolbox editorial system: 3px hairline frames,
   ink-fill primary buttons, mono labels, one teal accent,
   and the magpie sheen reserved for two signature moments:
   the active tab edge and bytes-in-flight (progress fill).

   Built on the DS tokens + theme.css + shared tool classes
   from invoice.css (.itool-head, .iinput, .iprose, .ifaq...).

   HARD CONTRACT (from the spec):
   - JS toggles the [hidden] ATTRIBUTE on containers. Keep the
     #tool [hidden] guard so no rule defeats it.
   - Active tab styling keys off [aria-selected="true"].
   - #sdxProgressFill is sized via style.width (percent).
   - #sdxDone content is injected by JS; its button/textarea are
     styled generically here.
   ============================================================ */

/* the guard - nothing may defeat the JS hidden toggle */
#tool [hidden]{ display:none !important; }

/* category word in the eyebrow (Utility = DS green) */
.sx-cat{ color:var(--success-text, var(--cat-utility, #15a06b)); font-weight:700; }

/* the tool column: focused, roomy, editorial whitespace */
.sx-tool{ padding-bottom:clamp(2.5rem,5vw,4rem); max-width:860px; }

/* shared editorial card recipe */
.sx-card{ border:var(--hair); border-radius:var(--r-frame); background:var(--surface);
  padding:clamp(var(--space-5),3vw,var(--space-7)); box-shadow:var(--shadow-xs); }

/* ============================================================
   Tab control  (By link | Direct (same wifi))  - tablist
   The active tab carries the signature sheen edge, echoing
   the hub's tool-card hover.
   ============================================================ */
.sx-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--surface-sunken); border:var(--hair); border-radius:var(--r-ctrl);
  margin-bottom:var(--space-5); }
.sx-tab{ position:relative; display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 var(--space-4); cursor:pointer; overflow:hidden;
  border:none; background:transparent; border-radius:calc(var(--r-ctrl) - 2px);
  font-family:var(--font-body); font-size:var(--text-md); font-weight:700; color:var(--text-muted);
  letter-spacing:-0.005em; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.sx-tab svg{ width:18px; height:18px; flex:0 0 auto; transition:color var(--dur-fast) var(--ease-out); }
.sx-tab::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--sheen); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out); }
.sx-tab:hover{ color:var(--text-strong); }
.sx-tab:focus-visible{ outline:none; box-shadow:var(--ring-focus); z-index:1; }
.sx-tab[aria-selected="true"]{ background:var(--surface); color:var(--text-strong); box-shadow:var(--shadow-xs); }
.sx-tab[aria-selected="true"]::before{ transform:scaleX(1); }
.sx-tab[aria-selected="true"] svg{ color:var(--brand); }
@media (max-width:520px){
  .sx-tab{ font-size:var(--text-sm); gap:7px; padding:0 var(--space-2); }
}

/* the two panels + their soft entrance */
.sx-panel{ display:flex; flex-direction:column; gap:var(--space-5); }
@media (prefers-reduced-motion:no-preference){
  .sx-panel:not([hidden]){ animation:sxIn .26s var(--ease-out); }
  #stxResult:not([hidden]), #stxReceived:not([hidden]), #stxCompose:not([hidden]),
  .sx-accept:not([hidden]), .sx-progress:not([hidden]), .sx-error:not([hidden]), .sx-done:not([hidden]){
    animation:sxIn .3s var(--ease-out); }
  @keyframes sxIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
}

/* mono field label above a control */
.sx-label{ display:block; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-subtle); margin-bottom:8px; }

/* a quiet reassurance line under a card */
.sx-fine{ display:flex; align-items:flex-start; gap:9px; margin:0;
  font-size:var(--text-xs); line-height:1.55; color:var(--text-subtle); }
.sx-fine svg{ flex:0 0 auto; width:15px; height:15px; margin-top:1px; color:var(--text-subtle); }
.sx-fine b{ color:var(--text-muted); font-weight:700; }
.sx-fine--tight{ margin-bottom:calc(-1 * var(--space-1)); }

/* ============================================================
   By link  -  compose
   ============================================================ */
.sx-compose{ display:flex; flex-direction:column; gap:var(--space-4); }
.sx-compose textarea.iinput{ min-height:170px; line-height:1.6; font-size:var(--text-base); }

/* meter: fill track + human label */
.sx-meter{ display:flex; flex-direction:column; gap:9px; }
.sx-meter__track{ height:6px; border-radius:99px; background:var(--border-default); overflow:hidden; }
.sx-meter__fill{ height:100%; width:0; border-radius:99px; background:var(--brand);
  transition:width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.sx-meter__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.sx-meter__label{ font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); margin:0; }
.sx-meter__count{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; }
/* level colouring, driven by data-level on .sx-meter */
.sx-meter[data-level="ok"]   .sx-meter__fill{ background:var(--brand); }
.sx-meter[data-level="ok"]   .sx-meter__label{ color:var(--text-body); }
.sx-meter[data-level="warn"] .sx-meter__fill{ background:var(--warning, #d9882b); }
.sx-meter[data-level="warn"] .sx-meter__label{ color:var(--warning-text, var(--warning, #d9882b)); font-weight:600; }
.sx-meter[data-level="bad"]  .sx-meter__fill{ background:var(--danger, #db4b5a); }
.sx-meter[data-level="bad"]  .sx-meter__label{ color:var(--danger-text, var(--danger, #db4b5a)); font-weight:600; }

.sx-compose__foot{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.sx-compose__foot .btn--primary{ flex:1 1 auto; justify-content:center; min-height:50px; }
.sx-compose__foot .btn--primary:disabled{ opacity:.5; cursor:not-allowed; }
.sx-compose__foot .sx-clear{ flex:0 0 auto; }
.sx-compose__hint{ flex-basis:100%; margin:0; font-size:var(--text-2xs); color:var(--text-subtle); text-align:center; }

/* ============================================================
   By link  -  result (link + QR)
   ============================================================ */
.sx-result__head{ display:flex; align-items:center; gap:var(--space-3);
  padding-bottom:var(--space-4); margin-bottom:var(--space-5); border-bottom:var(--hair); }
.sx-tick{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--r-icon); background:var(--success-soft, color-mix(in srgb,var(--success) 16%, var(--surface))); color:var(--success-text, var(--success)); }
.sx-tick svg{ width:21px; height:21px; }
@media (prefers-reduced-motion:no-preference){
  #stxResult:not([hidden]) .sx-tick svg{ animation:sxPop .5s var(--ease-spring) both; }
  @keyframes sxPop{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
}
.sx-result__head h3{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.02em; color:var(--text-strong); margin:0; }
.sx-result__head p{ margin:2px 0 0; font-size:var(--text-sm); color:var(--text-muted); }

.sx-result__body{ display:flex; gap:clamp(var(--space-5),4vw,var(--space-7)); align-items:flex-start; }
.sx-result__left{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sx-linkrow{ display:flex; gap:var(--space-2); }
.sx-linkrow .iinput{ flex:1; min-width:0; font-family:var(--font-mono); font-size:var(--text-sm);
  text-overflow:ellipsis; cursor:text; }
.sx-linkrow .btn{ flex:0 0 auto; min-width:96px; }
.sx-result__acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-5); }

/* copy buttons flip to a confirmed state for 2s */
.btn.is-copied, .sx-done button.is-copied{
  background:var(--success, #15a06b) !important; border-color:var(--success, #15a06b) !important; color:#fff !important; }
.btn.is-copied svg{ transform:none !important; }

.sx-qr{ flex:0 0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.sx-qr__box{ width:176px; height:176px; background:#fff; border:1px solid var(--border-default); border-radius:var(--r-frame); padding:10px; box-sizing:content-box; box-shadow:var(--shadow-xs); }
.sx-qr__box svg{ display:block; width:100%; height:100%; }
.sx-qr__note{ font-size:var(--text-2xs); line-height:1.5; color:var(--text-subtle); max-width:22ch; margin:0; }

/* ============================================================
   By link  -  received (opened via #s= link)
   ============================================================ */
.sx-received__head{ display:flex; align-items:center; gap:var(--space-3);
  padding-bottom:var(--space-4); margin-bottom:var(--space-5); border-bottom:var(--hair); }
.sx-received__ic{ flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-icon); background:var(--brand-soft); color:var(--brand); }
.sx-received__ic svg{ width:20px; height:20px; }
.sx-received__head h3{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.02em; color:var(--text-strong); margin:0; }
.sx-received__head p{ margin:2px 0 0; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--text-subtle); }
textarea.sx-readout{ width:100%; box-sizing:border-box; min-height:150px; resize:vertical; margin:0;
  font-family:var(--font-body); font-size:var(--text-md, var(--text-base, .95rem)); line-height:1.65; white-space:pre-wrap; word-break:break-word;
  background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--r-ctrl); padding:var(--space-5); color:var(--text-strong); }
.sx-received__acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }

/* ============================================================
   Direct  -  two cards side by side
   Send = teal, Receive = blue: tell the two apart at a glance
   (the usual pair is a laptop and a phone).
   ============================================================ */
.sx-direct{ display:flex; flex-direction:column; gap:var(--space-5); }
.sx-direct__cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-items:start; }
.sx-dcard{ display:flex; flex-direction:column; gap:var(--space-4); min-height:100%; }
.sx-dcard__head{ display:flex; align-items:center; gap:10px; }
.sx-dcard__ic{ flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-icon); border:var(--hair); background:var(--surface-sunken); color:var(--brand); }
.sx-dcard__ic svg{ width:18px; height:18px; }
.sx-dcard--send .sx-dcard__ic{ color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 26%, var(--border-default)); background:var(--brand-soft); }
.sx-dcard--recv .sx-dcard__ic{ color:var(--blue-500, #2e63e8);
  border-color:color-mix(in srgb,var(--blue-500, #2e63e8) 26%, var(--border-default));
  background:color-mix(in srgb,var(--blue-500, #2e63e8) 11%, var(--surface)); }
.sx-dcard__head h2{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.02em; color:var(--text-strong); margin:0; }
.sx-dcard__head p{ margin:1px 0 0; font-size:var(--text-xs); color:var(--text-muted); }

/* stacked flows inside the cards own their rhythm (no ad-hoc margins) */
.sx-send__idle, .sx-recv__idle{ display:flex; flex-direction:column; gap:var(--space-4); }
.sx-send__wait{ display:none; flex-direction:column; gap:var(--space-4); }
#sdxSend:has(#btnSdxCancelSend:not([hidden])) .sx-send__idle{ display:none; }
#sdxSend:has(#btnSdxCancelSend:not([hidden])) .sx-send__wait{ display:flex; }
#sdxRecv:has(#btnSdxCancelRecv:not([hidden])) .sx-recv__idle{ display:none; }
.sx-recv__idle .sx-label{ margin-bottom:0; }
.sx-recv__idle .sx-help{ margin:-4px 0 0; }

/* text is the primary send input; Join sits at the card bottom */
.sx-sendtext{ display:flex; flex-direction:column; gap:var(--space-2); }
.sx-sendtext textarea.iinput{ min-height:128px; line-height:1.55; }
.sx-dcard--recv .sx-recv__idle{ flex:1 1 auto; }
.sx-recv__idle #btnSdxJoin{ margin-top:auto; }

/* drop zone (Choose a file / drop) - is-drag toggled by JS */
.sx-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:var(--space-6) var(--space-5); border:1.5px dashed var(--border-strong); border-radius:var(--r-frame);
  background:var(--surface-sunken); color:var(--text-muted);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sx-drop__ic{ display:inline-flex; color:var(--brand); transition:transform var(--dur-base) var(--ease-spring); }
.sx-drop__ic svg{ width:26px; height:26px; }
.sx-drop__or{ font-size:var(--text-xs); color:var(--text-subtle); }
.sx-drop.is-drag{ border-color:var(--brand); border-style:solid; background:var(--brand-soft); color:var(--text-strong); }
.sx-drop.is-drag .sx-drop__ic{ transform:translateY(-3px) scale(1.08); }
.sx-drop.is-drag .sx-drop__or{ color:var(--brand); font-weight:700; }
label.sx-choose{ cursor:pointer; }

/* picked-file line */
.sx-picked{ margin:0; padding:var(--space-3) var(--space-4);
  border:1px solid color-mix(in srgb, var(--brand) 32%, var(--border-default)); border-radius:var(--r-ctrl);
  background:var(--brand-soft); font-size:var(--text-sm); font-weight:600; color:var(--text-strong); }
.sx-picked:empty{ display:none; }
.sx-iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto;
  border:1px solid transparent; background:transparent; color:var(--text-subtle); border-radius:var(--r-ctrl); cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.sx-iconbtn svg{ width:16px; height:16px; }
.sx-iconbtn:hover{ background:var(--danger-soft); color:var(--danger-text, var(--danger)); border-color:color-mix(in srgb,var(--danger) 30%,transparent); }
.sx-iconbtn:focus-visible{ outline:none; box-shadow:var(--ring-focus); }

/* "Send text instead" disclosure */
.sx-texttoggle{ border:var(--hair); border-radius:var(--r-ctrl); background:var(--surface); overflow:hidden; }
.sx-texttoggle > summary{ display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  padding:11px var(--space-4); font-size:var(--text-sm); font-weight:600; color:var(--text-strong);
  transition:background var(--dur-fast) var(--ease-out); }
.sx-texttoggle > summary:hover{ background:var(--surface-sunken); }
.sx-texttoggle > summary:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--r-ctrl); }
.sx-texttoggle > summary::-webkit-details-marker{ display:none; }
.sx-texttoggle > summary .sx-chevron{ margin-left:auto; color:var(--text-subtle); transition:transform var(--dur-fast) var(--ease-out); }
.sx-texttoggle > summary .sx-chevron svg{ width:16px; height:16px; display:block; }
.sx-texttoggle[open] > summary .sx-chevron{ transform:rotate(180deg); }
.sx-texttoggle > summary svg.sx-tt-ic{ width:16px; height:16px; color:var(--text-subtle); }
.sx-texttoggle__body{ padding:0 var(--space-4) var(--space-4); }
.sx-texttoggle__body textarea.iinput{ min-height:96px; line-height:1.55; }

/* the code hero (sender's 6-char pairing code) - the money moment.
   Per-character underline: JetBrains Mono means every glyph advances
   exactly 1ch + the letter-spacing, so a repeating gradient draws one
   crisp segment under each character. Glanceable from a metre away. */
.sx-codeblock{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  padding:var(--space-7) var(--space-4) var(--space-6); border:var(--hair); border-radius:var(--r-frame);
  background:var(--brand-soft); text-align:center; overflow:hidden; }
.sx-codeblock::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--sheen); }
.sx-codeblock__eyebrow{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-subtle); }
.sx-code{ display:inline-block; font-family:var(--font-mono); font-weight:700; line-height:1;
  font-size:clamp(2.7rem, 1.2rem + 7vw, 4.4rem); letter-spacing:.14em;
  color:var(--text-strong); font-variant-numeric:tabular-nums;
  padding-bottom:16px;
  --sx-seg:linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent) 0 100%);
  background-image:var(--sx-seg), var(--sx-seg), var(--sx-seg), var(--sx-seg), var(--sx-seg), var(--sx-seg);
  background-size:1ch 5px; background-repeat:no-repeat;
  background-position:
    0 100%,
    calc(1 * (1ch + .14em)) 100%,
    calc(2 * (1ch + .14em)) 100%,
    calc(3 * (1ch + .14em)) 100%,
    calc(4 * (1ch + .14em)) 100%,
    calc(5 * (1ch + .14em)) 100%; }
.sx-code__hint{ font-size:var(--text-sm); color:var(--text-muted); margin:0; max-width:30ch; line-height:1.5; }
.sx-code__ttl{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.06em;
  color:var(--text-subtle); font-variant-numeric:tabular-nums; }
.sx-code__ttl b{ color:var(--text-muted); font-weight:600; }

.sx-status{ margin:0; font-size:var(--text-sm); color:var(--text-muted); }
.sx-status:empty{ display:none; }
.sx-status b{ color:var(--text-strong); font-weight:700; }
.sx-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--text-subtle); }
.sx-dot--wait{ background:var(--warning, #d9882b); animation:sxPulse 1.4s ease-in-out infinite; }
.sx-dot--live{ background:var(--success, #15a06b); animation:sxPulse 1.1s ease-in-out infinite; }
.sx-dot--err{ background:var(--danger, #db4b5a); }
.sx-dot--done{ background:var(--success, #15a06b); }
@keyframes sxPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }
@media (prefers-reduced-motion:reduce){ .sx-dot--wait, .sx-dot--live{ animation:none; } }

/* code input (receiver) - mirrors the hero so the pair reads as one ritual */
.sx-codein{ font-family:var(--font-mono); font-weight:700; font-size:var(--text-4xl);
  letter-spacing:.32em; text-transform:uppercase; text-align:center; padding-left:.32em;
  min-height:96px; font-variant-numeric:tabular-nums; }
.sx-codein::placeholder{ letter-spacing:.3em; color:var(--text-subtle); font-weight:600; }
.sx-help{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.02em; color:var(--text-subtle); margin:8px 0 0; }

/* accept panel - a human decision, not a timer */
.sx-accept{ border:1px solid color-mix(in srgb,var(--blue-500, #2e63e8) 32%, var(--border-default)); border-radius:var(--r-ctrl);
  background:color-mix(in srgb,var(--blue-500, #2e63e8) 8%, var(--surface)); padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-4); }
.sx-accept__row{ display:flex; align-items:center; gap:var(--space-3); }
.sx-accept__ic{ flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-icon); background:var(--surface); color:var(--blue-500, #2e63e8); border:var(--hair); }
.sx-accept__ic svg{ width:22px; height:22px; }
.sx-accept__meta{ min-width:0; }
.sx-accept__lab{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); display:block; margin-bottom:2px; }
.sx-accept__name{ display:block; font-size:var(--text-md); font-weight:700; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-accept__size{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); }
.sx-accept__acts{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-2); }
.sx-accept__acts .btn{ justify-content:center; }

/* generic action row + full-width primary */
.sx-actionrow{ display:flex; gap:var(--space-2); }
.sx-actionrow .btn{ flex:1 1 auto; justify-content:center; }
.sx-recv__statusrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.sx-recv__statusrow .sx-status{ flex:1; min-width:0; }
.sx-recv__statusrow .btn{ flex:0 0 auto; }
.btn--block{ width:100%; justify-content:center; }
.btn--danger{ color:var(--danger-text, var(--danger)); border-color:color-mix(in srgb,var(--danger) 36%, transparent); }
.btn--danger:hover{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger-text, var(--danger)); }

/* ============================================================
   Direct  -  shared surface below the two cards
   (progress, error, done - "one place")
   ============================================================ */
.sx-shared{ display:flex; flex-direction:column; gap:var(--space-4); }
.sx-shared:empty{ display:none; }

/* live progress - the one place the iridescent sheen moves */
.sx-progress{ border:var(--hair); border-radius:var(--r-ctrl); background:var(--surface); padding:var(--space-4) var(--space-5); }
.sx-progress__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:10px; }
.sx-progress__title{ display:inline-flex; align-items:center; gap:9px; font-size:var(--text-sm); font-weight:700; color:var(--text-strong); }
.sx-progress__pct{ font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.sx-progress__track{ height:9px; border-radius:99px; background:var(--border-default); overflow:hidden; }
.sx-progress__fill{ height:100%; width:0; border-radius:99px; background:var(--sheen); transition:width .18s linear; }
.sx-progress__label{ display:block; margin-top:9px; font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:.02em; color:var(--text-subtle); font-variant-numeric:tabular-nums; }

/* error line (one place; must hold the longest strings at full width) */
.sx-error{ margin:0; padding:var(--space-4) var(--space-5);
  border:1px solid color-mix(in srgb, var(--danger, #db4b5a) 34%, var(--border-default)); border-radius:var(--r-ctrl);
  background:var(--danger-soft); font-size:var(--text-sm); line-height:1.55; font-weight:500; color:var(--text-strong); }

/* done surface (JS injects the contents: Save button OR textarea + Copy) */
.sx-done{ border:1px solid color-mix(in srgb,var(--success) 30%, var(--border-default)); border-radius:var(--r-ctrl);
  background:var(--success-soft, color-mix(in srgb,var(--success) 12%, var(--surface))); padding:var(--space-5); }
.sx-done__head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--space-4); }
.sx-done__ic{ flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-icon); background:var(--surface); color:var(--success-text, var(--success)); }
.sx-done__ic svg{ width:19px; height:19px; }
@media (prefers-reduced-motion:no-preference){
  .sx-done:not([hidden]) .sx-done__ic svg{ animation:sxPop .5s var(--ease-spring) both; }
}
.sx-done__head b{ font-size:var(--text-md); font-weight:700; color:var(--text-strong); }
/* generic styling for JS-injected controls */
.sx-done textarea{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:var(--text-md); line-height:1.6;
  color:var(--text-strong); background:var(--surface); border:1.6px solid var(--border-strong); border-radius:var(--r-ctrl);
  padding:12px var(--space-3); min-height:110px; resize:vertical; margin-bottom:var(--space-3); }
.sx-done textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent); }
.sx-done button{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:46px; padding:0 var(--space-5);
  font-family:var(--font-body); font-size:var(--text-md); font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid var(--text); border-radius:var(--r-ctrl); background:var(--text); color:var(--surface);
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out); }
.sx-done button svg{ width:17px; height:17px; }
.sx-done button:hover{ background:color-mix(in srgb,var(--text) 86%, var(--canvas, var(--surface-sunken))); }
.sx-done button:active{ transform:scale(.985); }
.sx-done button:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.sx-done__file{ display:flex; align-items:center; gap:var(--space-4); }
.sx-done__file-info{ flex:1; min-width:0; }
.sx-done__file-info b{ display:block; font-size:var(--text-md); color:var(--text-strong); }
.sx-done__file-info span{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-subtle); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:680px){
  .sx-direct__cards{ grid-template-columns:1fr; }
  .sx-result__body{ flex-direction:column; align-items:stretch; }
  .sx-qr{ order:-1; align-self:center; }
  .sx-accept__acts{ grid-template-columns:1fr 1fr; }
  .sx-compose__foot .sx-clear{ flex:1 1 auto; }
}

/* dark-mode: keep the tinted panels legible on midnight surfaces */
[data-theme="dark"] .sx-codeblock{ background:color-mix(in srgb,var(--brand) 12%, var(--surface)); }
[data-theme="dark"] .sx-drop{ background:color-mix(in srgb,var(--surface) 70%, #000); }
[data-theme="dark"] .sx-qr__box{ border-color:transparent; }