/* NightRider designer — ported from SAFE_PLUS/public/theme-designer-admin/designer.css.
   Card rendering rules moved from .msg (root-scoped vars) onto .nr-card (element-scoped vars,
   set inline by NRDesigner.renderCard so many cards can coexist on one page).
   Panel/control chrome re-skinned onto the NightRider tokens (nr-tokens.css). */

/* ── the card (the ONE shared render target: designer preview + public profile) ── */
.nr-card{
  /* defaults mirror the admin designer's :root values; renderCard overrides inline */
  --card:#18181f;
  --author-color:#ffffff; --message-color:#e8e8ea; --time-color:#a0a0aa;
  --ff-author:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --ff-message:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --avatar-sz:36px; --author-size:14px; --msg-size:18px; --time-size:12px;
  --author-track:0px; --message-track:0px;
  --text-back-rgba:transparent; --text-back-padding:0px;
  --grad-enabled:0; --grad-a:#24314b; --grad-b:#432235; --grad-angle:90deg; --grad-opacity:1;
  --bg-enabled:0; --bg-image:none; --bg-fit:cover; --bg-pos:center; --bg-repeat:no-repeat; --bg-opacity:1;
  --z-media:1; --z-grad:2;
  --card-border-width:2px; --card-border-style:solid; --card-border-color:#23232b;
  --card-border-radius:12px; --card-border-angle:90deg; --card-border-image-source:none;
  --avatar-border-width:1px; --avatar-border-style:solid; --avatar-border-color:#23232b;
  --avatar-border-image-source:none;
  --sel1-fill:#1a2a4a; --sel-opacity:0.85;
  --hover-fill:#222638; --hover-author:#ffffff; --hover-message:#ffffff; --hover-time:#c7c7d0; --hover-opacity:1;
  --dim-enabled:1; --dim-strength:0.45; --dim-color:#000000;
  --avatar-visible:flex; --author-visible:flex; --time-visible:block;

  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  background:var(--card);
  border-width:var(--card-border-width);
  border-style:var(--card-border-style);
  border-color:var(--card-border-color);
  border-radius:var(--card-border-radius);
  border-image-slice:1;
  border-image-source:var(--card-border-image-source);
  position:relative;
  overflow:hidden;
  background-clip:padding-box;
}
/* media (bg image/GIF) + gradient fill live on the two pseudo layers, z-ordered by
   --z-media / --z-grad so "layer order" swaps them without restarting GIF playback */
.nr-card::before,.nr-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;transition:opacity .2s ease, background .2s ease}
.nr-card::before{
  z-index:var(--z-media);
  opacity:calc(var(--bg-enabled) * var(--bg-opacity));
  background-image:var(--bg-image);
  background-size:var(--bg-fit);
  background-position:var(--bg-pos);
  background-repeat:var(--bg-repeat);
}
.nr-card::after{
  z-index:var(--z-grad);
  opacity:calc(var(--grad-enabled) * var(--grad-opacity));
  background:linear-gradient(var(--grad-angle),var(--grad-a),var(--grad-b));
}
.nr-card.grad-radial::after{background:radial-gradient(var(--grad-a),var(--grad-b))}
.nr-card.grad-conic::after{background:conic-gradient(from var(--grad-angle),var(--grad-a),var(--grad-b))}
.nr-card > *{position:relative;z-index:3}

/* card states (live | hover | selected | dim) */
.nr-card[data-state="hover"]::after{opacity:var(--hover-opacity);background:var(--hover-fill)}
.nr-card[data-state="selected"]::after{opacity:var(--sel-opacity);background:var(--sel1-fill)}
.nr-card[data-state="dim"]::after{opacity:calc(var(--dim-enabled) * var(--dim-strength));background:var(--dim-color)}
/* hover state recolors the text elements too (the per-element hover colors) */
.nr-card[data-state="hover"] .nr-card-author{color:var(--hover-author)}
.nr-card[data-state="hover"] .nr-card-message{color:var(--hover-message)}
.nr-card[data-state="hover"] .nr-card-time{color:var(--hover-time)}

.nr-card-avatar{
  width:var(--avatar-sz);
  height:var(--avatar-sz);
  border-radius:50%;
  object-fit:cover;
  border-width:var(--avatar-border-width);
  border-style:var(--avatar-border-style);
  border-color:var(--avatar-border-color);
  border-image-slice:1;
  border-image-source:var(--avatar-border-image-source);
  display:var(--avatar-visible);
}
.nr-card-author{
  font:700 var(--author-size)/1.2 var(--ff-author);
  color:var(--author-color);
  letter-spacing:var(--author-track,0);
  display:var(--author-visible);
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.nr-card-message{font:var(--msg-size)/1.28 var(--ff-message);color:var(--message-color);letter-spacing:var(--message-track,0);display:flex;flex-direction:column;align-items:flex-start}
.nr-card-author + .nr-card-message{margin-top:4px}
.nr-card-time{font:var(--time-size)/1 var(--ff-message);color:var(--time-color);display:var(--time-visible);margin-top:4px}
.nr-tb{display:inline;background:var(--text-back-rgba);padding:var(--text-back-padding);border-radius:calc(var(--text-back-padding) + 4px);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* animated (conic-spin) borders — CSS-driven so any number of cards animate with no JS loop.
   renderCard writes --card-border-image-source as a conic-gradient that references the
   registered spin angle; the keyframe animation turns the angle, the border follows. */
@property --card-border-spin{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --avatar-border-spin{syntax:'<angle>';inherits:true;initial-value:0deg}
.nr-card.border-anim{animation:nr-border-spin var(--border-spin-s,6s) linear infinite}
@keyframes nr-border-spin{from{--card-border-spin:0deg}to{--card-border-spin:360deg}}
.nr-card.avatar-border-anim .nr-card-avatar{animation:nr-avatar-border-spin var(--avatar-border-spin-s,6s) linear infinite}
@keyframes nr-avatar-border-spin{from{--avatar-border-spin:0deg}to{--avatar-border-spin:360deg}}

/* ── designer layout: control rail + stage ───────────────────────────────── */
.designer-grid{display:grid;grid-template-columns:410px 1fr;gap:18px;align-items:start}
@media (max-width:960px){.designer-grid{grid-template-columns:1fr}}

.ctrl-rail{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;max-height:calc(100vh - 130px);overflow:auto}
@media (max-width:960px){.ctrl-rail{max-height:none}}
.group{padding:12px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.group:first-child{margin-top:0}
.group h3{margin:0;font-family:var(--mono);font-weight:700;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.18em;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}
.group h3::before{content:"▸";color:var(--ember);font-size:10px;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
.group:not(.collapsed) h3::before{transform:rotate(90deg)}
.group > .group-body{margin-top:10px}
.group.collapsed > .group-body{display:none}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:520px){.grid2{grid-template-columns:1fr 1fr}}
.span-two{grid-column:1 / -1}

.ctrl-rail input,.ctrl-rail select,.ctrl-rail textarea{
  width:100%;
  background:var(--night);
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 10px;
  border-radius:10px;
  font:13px/1.3 var(--body);
}
.ctrl-rail textarea{min-height:70px;resize:vertical}
.ctrl-rail input:disabled{opacity:.4;cursor:not-allowed}
label.inline{display:flex;align-items:center;gap:10px;min-height:32px;font-size:12.5px;color:var(--ink)}
label.inline > input:not([type="checkbox"]), label.inline > select{flex:1;min-width:0}
label.inline > input[type="color"]{flex:0 0 auto;width:42px;padding:0;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--night)}
label.inline > input[type="checkbox"]{flex:0 0 auto;width:auto;accent-color:var(--ember)}
label.inline > input[type="number"]{flex:0 0 auto;width:96px;min-width:76px}
label.inline > input[type="range"]{flex:1;padding:0;border:none;background:transparent;accent-color:var(--ember)}
.unit{flex:0 0 auto;color:var(--dim);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
/* Task 10c B: the unit suffix (px / ° / s) lives INSIDE the field's box — one
   bordered group, number right-aligned against its unit, native spinners off */
.unit-wrap{flex:0 0 auto;display:inline-flex;align-items:center;background:var(--night);border:1px solid var(--line);border-radius:10px}
.unit-wrap:focus-within{outline:2px solid var(--violet);outline-offset:2px}
.unit-wrap > input[type="number"]{flex:0 0 auto;width:52px;min-width:0;border:none;background:transparent;padding:8px 5px 8px 10px;text-align:right;border-radius:10px 0 0 10px}
.unit-wrap > input[type="number"]:focus-visible{outline:none}
.unit-wrap > .unit{padding-right:9px}
.ctrl-rail input[type="number"]{appearance:textfield;-moz-appearance:textfield}
.ctrl-rail input[type="number"]::-webkit-inner-spin-button,.ctrl-rail input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.swatch{width:18px;height:18px;border:1px solid var(--line);border-radius:4px;display:inline-block;flex:0 0 18px}
label.inline.color-line,label.inline.sw-line{flex-wrap:wrap}
label.inline.color-line > span:first-child,label.inline.sw-line > span:first-child{flex:0 0 108px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hexInput{flex:1 1 96px;max-width:120px;background:var(--night);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--ink);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.hexInput.invalid{border-color:var(--ember)}
.font-row{flex-direction:column;align-items:stretch;gap:4px}
.font-row > span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.font-row > input,.font-row > select{width:100%}

.btn{
  background:linear-gradient(120deg,var(--ember),var(--flame));
  color:var(--void);
  border:none;border-radius:10px;
  padding:8px 14px;font-family:var(--body);font-weight:700;font-size:13px;
  cursor:pointer;transition:transform .18s cubic-bezier(0.16,1,0.3,1),box-shadow .25s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,122,61,.25)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.warn{background:transparent;border:1px solid rgba(255,90,90,.5);color:#ff8f8f}
.btn.mini{padding:5px 10px;font-size:11.5px}
.m{color:var(--dim);font-size:12px;line-height:1.5}

/* preset chips */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-chip{
  background:var(--night);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  padding:9px 10px;font:600 12px/1.2 var(--body);cursor:pointer;text-align:left;
  transition:border-color .25s,transform .25s cubic-bezier(0.16,1,0.3,1);
}
.preset-chip:hover{border-color:rgba(255,122,61,.5);transform:translateY(-1px)}
.preset-chip .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:baseline;border:1px solid rgba(255,255,255,.25)}

/* ── the stage ────────────────────────────────────────────────────────────── */
.stage{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}
@media (max-width:960px){.stage{position:static}}
.stage-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stage-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.stage-plate{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:40px 28px 46px;overflow:hidden;
  background:var(--stage-bg,#0f0f12);
  transition:background .4s;
}
.stage-plate::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.4) 30%,rgba(255,180,94,.6) 50%,rgba(255,122,61,.4) 70%,transparent);
  filter:blur(1px);
}
.stage-plate .nr-card{width:min(100%,640px);margin:0 auto}
/* stream preview mode: stage-dark broadcast frame */
.stage-plate.stream-mode{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 110%, rgba(255,122,61,.08), transparent 55%),
    #05060a !important;
  box-shadow:inset 0 0 60px rgba(0,0,0,.8);
}
.stream-tag{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;opacity:0;transition:opacity .3s}
.stage-plate.stream-mode .stream-tag{opacity:1;color:var(--flame)}
.demo-row{display:none;gap:8px;justify-content:center;margin-top:18px}
.stage-plate.stream-mode .demo-row{display:flex}

/* contrast meter */
.meter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meter-chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--dim);
}
.meter-chip.ok{color:#7ee2a0;border-color:rgba(126,226,160,.45)}
.meter-chip.warn{color:var(--flame);border-color:rgba(255,180,94,.5)}
.meter-chip.bad{color:#ff7a7a;border-color:rgba(255,122,122,.55)}
.meter-note{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.meter-note.bad{color:#ff7a7a}
.meter-note.warn{color:var(--flame)}
#backingSuggestBtn{display:none}
#backingSuggestBtn.show{display:inline-block}

/* save row + status lines */
.save-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-line{font-family:var(--mono);font-size:11px;color:var(--dim);min-height:15px}
.status-line.ok{color:#7ee2a0}
.status-line.err{color:#ff7a7a}

/* ── Task 10b: advanced folds, upload-first media, tips ─────────────────────── */

/* per-section Advanced fold — native <details>, quiet mono voice matching group h3 */
details.adv{margin-top:12px;border-top:1px dashed var(--line);padding-top:2px}
details.adv > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:7px;padding:8px 0 6px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;
}
details.adv > summary::-webkit-details-marker{display:none}
details.adv > summary::before{content:"+";color:var(--violet);font-size:12px;line-height:1;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
details.adv[open] > summary::before{content:"−"}
details.adv > summary:hover{color:var(--ink)}
details.adv > .grid2{margin-top:6px}
details.adv > .grid2 + .grid2{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}

/* upload-first media zone — the big friendly door; URL entry lives in Advanced */
.media-drop{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  border:1.5px dashed rgba(255,122,61,.35);border-radius:12px;
  padding:14px;background:rgba(255,122,61,.04);
  transition:border-color .25s,background .25s;
}
.media-drop:hover{border-color:rgba(255,122,61,.6)}
.media-drop.drag-over{border-color:var(--flame);background:rgba(255,122,61,.12);border-style:solid}
.media-drop .drop-hint{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.media-drop .upload-status:empty{display:none}
.pending-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--gold);border:1px solid rgba(255,207,107,.4);border-radius:999px;padding:3px 10px;
}

/* onboarding tip strip — dismissible, first-visit only */
.tip-strip{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid rgba(255,180,94,.35);border-radius:12px;
  background:linear-gradient(120deg,rgba(255,122,61,.09),rgba(139,124,255,.06));
  padding:11px 12px;margin-bottom:10px;
}
.tip-strip .tip-copy{flex:1;display:flex;flex-direction:column;gap:4px}
.tip-strip .tip-line{font-size:12px;line-height:1.5;color:var(--ink)}
.tip-strip .tip-line::before{content:"→ ";color:var(--ember);font-family:var(--mono)}
.tip-strip .tip-dismiss{
  flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:9px;padding:5px 10px;font:600 11px var(--body);cursor:pointer;
}
.tip-strip .tip-dismiss:hover{color:var(--ink);border-color:var(--dim)}

/* floating tooltip bubble (JS-positioned; fixed so the rail's scroll can't clip it) */
.tip-bubble{
  position:fixed;z-index:40;max-width:270px;pointer-events:none;
  background:rgba(12,14,28,.96);border:1px solid rgba(139,124,255,.35);border-radius:10px;
  padding:8px 11px;font-size:11.5px;line-height:1.5;color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
}

@media (prefers-reduced-motion:reduce){
  .nr-card.border-anim,.nr-card.avatar-border-anim .nr-card-avatar{animation-duration:600s}
  .btn,.preset-chip{transition:none}
  details.adv > summary::before,.media-drop{transition:none}
}