/* ============================================================================
   Schema Studio: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Driven entirely by nitrosites' design tokens
   (src/styles/tokens.css) and its component recipes (.btn/.btn-primary/
   .btn-ghost, .card, .panel-static, .field), loaded globally by BaseLayout.
   No raw brand colours, fonts, spacing or radii: only var(--…) host tokens.
   There are NO brand-simulation cards in this tool, so NO literal hex here.

   Cascade note: on the live site app.css loads BEFORE the host bundle, so where
   we override a property a host class sets (e.g. .field's margin), we use a
   PARENT selector to win on specificity rather than load order.
   ========================================================================== */
.scm{
  --scm-ok: var(--color-success);
  --scm-bad: var(--color-danger);
  --scm-warn: var(--color-status-partial);
  --scm-mut: var(--color-muted);

  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}
.scm *{box-sizing:border-box}
.scm ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* tone helpers */
.tone-ok{--tone:var(--scm-ok)} .tone-bad{--tone:var(--scm-bad)} .tone-warn{--tone:var(--scm-warn)} .tone-mut{--tone:var(--scm-mut)}

/* ---------- tabs ---------- */
.scm-tabs{display:flex; gap:var(--sp-2); justify-content:center; margin:var(--sp-4) 0 var(--sp-5); flex-wrap:wrap}
.scm-tab{padding:var(--sp-2) var(--sp-5); font-size:var(--fs-base); gap:var(--sp-2)}
.scm-tab-ico{display:inline-flex; width:1.1em; height:1.1em}
.scm-tab-ico svg{width:100%; height:100%}
.scm-tab.is-active{color:var(--color-primary); border-color:var(--color-primary); background:rgba(248,249,4,.04); box-shadow:0 0 0 1px var(--color-primary), 0 0 24px var(--color-glow-soft)}

.scm-pane[hidden]{display:none}

/* ---------- validate form ---------- */
.scm-vform{display:flex; gap:var(--sp-2); align-items:stretch; margin:0 auto var(--sp-2); max-width:46rem}
.scm-vform .scm-vfield{flex:1; min-width:0; margin:0}
.scm-vinput{font-size:var(--fs-base); font-family:var(--font-mono); resize:vertical; min-height:2.9em}
.scm-vinput:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.scm-vbtn{white-space:nowrap; align-self:flex-start}
.scm-vbtn-ico{display:inline-flex; width:1.1em; height:1.1em}
.scm-vbtn-ico svg{width:100%; height:100%}

/* ---------- status / error / idle ---------- */
.scm-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-base)}
.scm-status.is-live{color:var(--color-primary-soft)}
.scm-spin{display:inline-block; width:1em; height:1em; border:2px solid var(--color-border); border-top-color:var(--color-primary);
  border-radius:var(--r-full); animation:scm-spin .7s linear infinite; vertical-align:-2px; margin-right:var(--sp-2)}
@keyframes scm-spin{to{transform:rotate(360deg)}}
.scm-error{display:flex; gap:var(--sp-3); align-items:flex-start; max-width:38rem; margin:var(--sp-6) auto; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface))}
.scm-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.scm-error strong{color:var(--color-danger)}
.scm-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}
.scm-idle{max-width:42rem; margin:var(--sp-5) auto; text-align:center}
.scm-idle-t{color:var(--color-muted)}
.scm-idle-ex{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:center; margin-top:var(--sp-3)}
.scm-idle-lbl{color:var(--color-muted); font-size:var(--fs-sm); font-weight:700}
.scm-chip{padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full); border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-accent-2); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-xs)}
.scm-chip:hover{border-color:var(--color-primary); color:var(--color-text)}

/* ---------- results ---------- */
.scm-results:not(:empty){margin-top:var(--sp-5); animation:scm-rise var(--dur) var(--ease) both}
@keyframes scm-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.scm-note{margin:var(--sp-4) 0; padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); border:1px dashed var(--color-border-strong);
  background:var(--color-surface); color:var(--color-muted); font-size:var(--fs-sm)}

/* ---------- summary strip ---------- */
.scm-summary{display:flex; flex-direction:column; gap:var(--sp-3)}
.scm-sum-counts{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.scm-pill{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--color-surface-2); border:1px solid var(--color-border); font-size:var(--fs-xs); color:var(--color-muted)}
.scm-pill b{color:var(--color-text); font-variant-numeric:tabular-nums}
.scm-pill-l{opacity:.85}
.scm-sum-types{display:flex; flex-wrap:wrap; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--color-border)}
.scm-tchip{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--color-surface-2); border:1px solid var(--tone,var(--color-border)); font-size:var(--fs-sm)}
.scm-tchip b{color:var(--color-text); font-family:var(--font-mono); font-size:var(--fs-xs)}
.scm-tchip-m{color:var(--tone,var(--color-muted)); font-weight:800}

/* ---------- parse errors ---------- */
.scm-parse-err{margin:var(--sp-3) 0; padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md);
  border:1px solid var(--color-danger); border-left-width:4px; background:color-mix(in srgb, var(--color-danger) 8%, var(--color-surface))}
.scm-parse-err-h{display:flex; align-items:center; gap:var(--sp-2)}
.scm-parse-err-ico{color:var(--color-danger); font-weight:800}
.scm-parse-err-msg{margin-top:var(--sp-1); color:var(--color-text); font-size:var(--fs-sm)}
.scm-parse-err-ex{display:block; margin-top:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  background:var(--color-bg); border:1px solid var(--color-border); font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); word-break:break-all}

/* ---------- entity cards ---------- */
.scm-ent{margin-top:var(--sp-4); padding:var(--sp-5)}
.scm-ent-head{display:flex; gap:var(--sp-4); align-items:center}
.scm-ent-badge{flex:none; width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--fs-xl); color:var(--tone,var(--color-muted));
  border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 12%, transparent)}
.scm-ent-type{font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--color-text)}
.scm-ent-verdict{font-size:var(--fs-sm); font-weight:700; color:var(--tone,var(--color-muted))}
.scm-ent-notes{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2)}
.scm-ent-note{font-size:var(--fs-sm); color:var(--color-muted)}
.scm-ent-note.info{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); background:var(--color-surface-2); border:1px solid var(--color-border)}

/* ---------- property table ---------- */
.scm-prop-tbl{margin-top:var(--sp-4); border:1px solid var(--color-border); border-radius:var(--r-md); overflow:hidden}
.scm-prop{display:grid; grid-template-columns:1.6em 10rem 1fr auto; gap:var(--sp-3); align-items:baseline;
  padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--color-border); background:var(--color-bg)}
.scm-prop:first-child{border-top:0}
.scm-prop-mark{width:1.4em; height:1.4em; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.72em; font-weight:800; color:var(--color-primary-fg); align-self:center}
.scm-prop-mark.ok{background:var(--scm-ok)} .scm-prop-mark.bad{background:var(--scm-bad)} .scm-prop-mark.warn{background:var(--scm-warn)}
.scm-prop-name{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--color-text); word-break:break-word}
.scm-prop-val{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); word-break:break-word; min-width:0}
.scm-prop-status{font-size:var(--fs-xs); font-weight:700; white-space:nowrap; text-align:right}
.scm-prop-status.ok{color:var(--scm-ok)} .scm-prop-status.bad{color:var(--scm-bad)} .scm-prop-status.warn{color:var(--scm-warn)}
.scm-prop-bad{background:color-mix(in srgb, var(--scm-bad) 6%, var(--color-bg))}
.scm-prop-warn{background:color-mix(in srgb, var(--scm-warn) 6%, var(--color-bg))}

/* ---------- raw disclosure ---------- */
.scm-raw{margin-top:var(--sp-3)}
.scm-raw summary{cursor:pointer; color:var(--color-muted); font-size:var(--fs-sm); font-weight:700; list-style:revert}
.scm-raw summary:hover{color:var(--color-text)}
.scm-raw-pre{margin:var(--sp-2) 0 0; padding:var(--sp-3); border-radius:var(--r-md); background:var(--color-bg); border:1px solid var(--color-border);
  overflow-x:auto; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text); line-height:1.5}

/* ---------- validate footer ---------- */
.scm-vfooter{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6);
  padding-top:var(--sp-4); border-top:1px solid var(--color-border)}
.scm-mini{padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.scm-mini-ico{display:inline-flex; width:1.1em; height:1.1em}
.scm-mini-ico svg{width:100%; height:100%}
.scm-mini.done{color:var(--scm-ok); border-color:var(--scm-ok)}
.scm-crosslink{display:inline-flex; align-items:center; gap:var(--sp-2); background:transparent; border:0; cursor:pointer;
  color:var(--color-accent-2); font-size:var(--fs-sm); font-weight:700; font-family:var(--font-display)}
.scm-crosslink:hover{color:var(--color-primary)}

/* =====================================================================
   GENERATE TAB
   ===================================================================== */
.scm-gen-top{max-width:46rem; margin:0 auto var(--sp-5)}
.scm-gen-typefield{margin:0}
.scm-gen-typesel{font-size:var(--fs-lg)}
.scm-gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:start}
.scm-gen-formcol{min-width:0}
.scm-gen-outcol{min-width:0; position:sticky; top:var(--sp-4)}

/* generator fields */
.scm-gfield{margin-bottom:var(--sp-4)}
.scm-in{padding:var(--sp-3) var(--sp-4); border:1px solid var(--color-border); border-radius:var(--r-md); background:var(--color-bg);
  color:var(--color-text); font:inherit; width:100%}
.scm-in:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
textarea.scm-in{resize:vertical}
.scm-star{color:var(--color-primary); font-size:.9em}
.scm-help{margin-top:var(--sp-1); font-size:var(--fs-xs); color:var(--color-muted)}

/* groups + repeatables */
.scm-group{border:1px solid var(--color-border); border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-4); min-width:0}
.scm-group legend{padding:0 var(--sp-2); font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--color-text)}
.scm-group-body{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-3)}
.scm-repeat-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.scm-repeat-row{display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-md); background:var(--color-surface); border:1px solid var(--color-border)}
.scm-repeat-fields{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.scm-repeat-fields .scm-gfield{margin:0}
.scm-rowdel{flex:none; width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--color-border); background:var(--color-surface-2);
  color:var(--color-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.scm-rowdel svg{width:15px; height:15px}
.scm-rowdel:hover{border-color:var(--color-danger); color:var(--color-danger)}
.scm-addbtn{margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); gap:var(--sp-2)}
.scm-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.scm-list-row{display:flex; gap:var(--sp-2); align-items:center}

/* opening hours widget */
.scm-hours{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.scm-hours-day{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm);
  border:1px solid var(--color-border); background:var(--color-surface); font-size:var(--fs-xs); cursor:pointer}
.scm-hours-times{display:flex; gap:var(--sp-4)}
.scm-hours-times label{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-xs); color:var(--color-muted)}
.scm-hours-time{max-width:9rem}

/* output pane */
.scm-out{padding:0; overflow:hidden}
.scm-out-head{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--color-border); background:var(--color-surface-2)}
.scm-out-title{font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--color-text)}
.scm-wrap-lbl{display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-xs); color:var(--color-muted); cursor:pointer; margin-left:auto}
.scm-wrap-cb{accent-color:var(--color-primary)}
.scm-out-pre{margin:0; padding:var(--sp-4); overflow-x:auto; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text);
  line-height:1.55; max-height:32rem; white-space:pre}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .scm-gen-grid{grid-template-columns:1fr}
  .scm-gen-outcol{position:static}
  .scm-group-body{grid-template-columns:1fr}
}
@media(max-width:560px){
  .scm-vform{flex-direction:column}
  .scm-vbtn{align-self:stretch}
  .scm-prop{grid-template-columns:1.6em 1fr; gap:var(--sp-1) var(--sp-2)}
  .scm-prop-val{grid-column:2}
  .scm-prop-status{grid-column:2; text-align:left}
  .scm-vfooter{flex-direction:column; align-items:flex-start}
}