/* /tools/extraction-schema — "Design the JSON you want back." Base widget from
   _shared/tools.css; below are only the field-editor specifics (sc-*). */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/tools.css";
@import "../../_shared/audience-switcher.css";

.sc-rows { margin: 0; padding: 13px 15px; height: clamp(300px, 44vh, 440px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sc-row { display: grid; grid-template-columns: 1fr 6.5em 1.2fr auto; gap: 8px; align-items: center; }
.sc-name, .sc-desc, .sc-type { font-family: var(--font-code); font-size: 12.5px; color: var(--text-primary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; min-width: 0; transition: border-color 160ms ease; }
.sc-type { color: var(--text-secondary); font-size: 12px; padding: 8px; cursor: pointer; }
.sc-desc { color: var(--text-secondary); }
.sc-name::placeholder, .sc-desc::placeholder { color: var(--text-quaternary); }
.sc-name:focus, .sc-desc:focus, .sc-type:focus { outline: none; border-color: var(--border); }
.sc-del { appearance: none; -webkit-appearance: none; background: none; border: none; color: var(--text-quaternary); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 160ms ease; }
.sc-del:hover { color: var(--text-primary); }

/* Mobile: the field-by-field builder is fiddly on a phone. Hide the editable
   Fields pane + the meter and keep the example chips + the read-only output
   (with Copy), so the tool still shows the typed schema it produces. Full
   field editing lives on a larger screen. Scoped to this page (the .t-* atoms
   are shared with the other tools via _shared/tools.css). */
.t-mobile-note { display: none; }
@media (max-width: 760px) {
  .t-stage { display: block; }
  .t-stage > .t-pane:first-child { display: none; } /* editable Fields pane */
  .t-meter { display: none; }
  .t-mobile-note {
    display: block;
    font-family: var(--font-base);
    font-size: 14px; line-height: 1.5;
    color: var(--text-secondary);
    margin: 8px 0 16px; max-width: 60ch;
  }
}