/* THE EDITOR, IN HARDYSTEM'S CLOTHES.
 *
 * The editor is one page, shared with the workshop, and its own palette is a near-black panel
 * with a blue slider -- right for a tool on a laptop and wrong in the middle of a cream shop,
 * where it reads as somebody else's software bolted on. Founder, 2026-09-22: "adjust the UI to
 * match the specific website's design."
 *
 * So nothing here restyles the editor. It redefines the --ed-* palette that pot.html now draws
 * itself from, in terms of THIS SITE'S tokens, which means a change to the brand colour or the
 * typeface arrives here without anybody editing the editor. Another site gets its own copy of
 * this file and the editor follows it.
 *
 * Loaded after tokens.css and theme.css, so every var() below resolves.
 */
:root {
  /* Type. The shop's own faces, not the system stack. */
  --ed-font: var(--font-body);
  --ed-mono: var(--font-mono);

  /* Ground and panel. The canvas takes the page cream so the pot sits on the same colour it
     does in the photographs; the panel takes white so it reads as a form rather than a slab. */
  --ed-bg:        var(--surface);
  --ed-panel:     var(--surface-2);
  --ed-canvas:    #F2EFE6;

  /* The scene's own furniture. The grid and the dimension chips are drawn by the renderer, not
     by CSS, and they were picked for a near-black ground -- left alone they come out as a black
     net and a row of dark stickers on the cream. The grid is the page rule, a shade either side
     of it so the metre lines still read; the chips are the page ground with the page's ink. */
  --ed-grid:      #D8D1BF;
  --ed-grid-fine: #E9E3D5;
  --ed-dim-line:  #B6AF9C;
  --ed-dim-bg:    rgba(255, 255, 255, 0.92);
  --ed-dim-ink:   #474D3D;

  /* Rules. One warm hairline, which is what the rest of the site is ruled with. */
  --ed-rule:       var(--rule);
  --ed-rule-field: var(--rule);
  --ed-rule-box:   var(--rule);
  --ed-rule-sw:    var(--ink-4);

  /* Ink. Straight off the site's own ramp, so every label and note is at the contrast that ramp
     was measured at. --ink-4 is never running text here either: it is the swatch outline only. */
  --ed-ink:        var(--ink);
  --ed-ink-strong: var(--ink);
  --ed-ink-mute:   var(--ink-3);
  --ed-ink-ghost:  var(--ink-2);

  /* One accent on the page and it is the thing you act with -- rule 1.14, the same as the buy
     button on a product page. The slider fill and the primary button are that green. */
  --ed-accent:    var(--fill);
  --ed-on-accent: var(--on-fill);
  --ed-ghost:     var(--surface-2);

  /* Status. Warm, low-chroma, and legible on cream rather than glowing on black. */
  --ed-ok:   #1F7A43;
  --ed-bad:  #A32020;
  --ed-warn: #8A5A12;

  --ed-bad-bg:   #FBF0EF;  --ed-bad-edge:  #E4C3C0;  --ed-bad-ink:  #7E1B1B;
  --ed-warn-bg:  #FBF5E9;  --ed-warn-edge: #E2D2AE;  --ed-warn-ink: #6B4710;
  --ed-stop-bg:  #FBF0EF;  --ed-stop-ink:  #7E1B1B;  --ed-stop-head: #5E1414;

  /* The readout sits over the model, so it needs a ground it can be read on without a box that
     shouts. Cream at 90% over the canvas, and the same hairline as everything else. */
  --ed-stats-bg: color-mix(in oklab, var(--surface) 90%, transparent);
  --ed-shadow:   0 8px 24px rgba(34, 39, 27, .14);

  --ed-shot-bg:  #CBC1AC;

  /* Corners follow the site's own radius scale rather than the tool's. */
  --ed-r-sm:    var(--r-1);
  --ed-r:       var(--r-2);
  --ed-r-field: var(--r-2);
  --ed-r-lg:    var(--r-3);

  --ed-panel-w: 380px;
}

/* The readout box wants a hairline on a light ground; on black it was legible without one. */
#stats { border: 1px solid var(--rule) }

/* The panel's headings are the shop's display face, so the editor opens the way a page does. */
aside h1 { font-family: var(--font-display); font-size: var(--t-h4); line-height: var(--lh-h4) }

/* A form control on cream needs its own ground to read as a control at all. */
input[type=text], input[type=number], select { background: var(--surface) }

/* The primary button is the one accent, so the secondary ones must not compete: on the dark
   theme a filled grey read as secondary, on cream it reads as disabled. Outline instead. */
button.ghost, button.tiny { border: 1px solid var(--rule); color: var(--ink-2) }
button.ghost:hover, button.tiny:hover { border-color: var(--ink-4) }

/* One quiet exit instead of a second masthead inside the editor. It sits with the object rather
   than taking the first screenful of the controls, and the shadow keeps it legible over every
   product colour. */
.canvas-back{position:absolute;left:14px;top:14px;z-index:4;display:inline-flex;align-items:center;
  min-height:38px;padding:8px 12px;border:1px solid rgb(255 255 255/.72);border-radius:var(--r-pill);
  background:rgb(255 255 255/.9);box-shadow:0 3px 14px rgb(32 40 28/.18);backdrop-filter:blur(8px);
  color:var(--ink);font-size:var(--t-caption);line-height:1;text-decoration:none;
  transition:transform var(--dur-1) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard)}
.canvas-back:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgb(32 40 28/.24);color:var(--accent)}
.canvas-back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

:root{--ed-bg:#fff;--ed-panel:#fff;--ed-canvas:#f4f4f6;
 --ed-ink:#15161b;--ed-ink-strong:#15161b;--ed-ink-mute:#62646c;
 --ed-ink-ghost:#62646c;--ed-accent:#6828d9;--ed-on-accent:#fff;
 --ed-rule:#d9d9de;--ed-rule-field:#b7b7bf;--ed-rule-box:#d9d9de;
 --ed-rule-sw:#9d9da6;--ed-ghost:#fff;--ed-grid:#d9d9de;--ed-grid-fine:#eeeef0;
 --ed-font:'Libre Franklin',sans-serif;--ed-mono:monospace;
 --ed-dim-ink:#62646c;--ed-dim-bg:rgba(255,255,255,.95);--ed-shot-bg:#f4f4f6}
[hidden],#vaseLiner,#grpSaucer{display:none!important}
#standsOn,#solidNote,#colourNote{display:none!important}
#blurb,#presetNote{display:none!important}
aside .note:not(.vase-care):not(#presetNote):not(#requestNote){display:none!important}
.vase-intro h1{font:normal 38px/1.05 'Instrument Serif',serif;margin:18px 0}
.vase-intro p{font-size:14px;line-height:1.6;color:#62646c}
#vaseConstruction[hidden]{display:none!important}
aside{min-width:0}button,select,input{max-width:100%}