/* ============================================================
   The rest of the chrome, in dialkit's language.

   dialkit is a controls library: sliders, toggles, colours, selects. It has no
   app bar, no dock, no layer list, no gallery — so those cannot *be* dialkit,
   and the panel was ending up as a well-dressed stranger in the middle of a
   window built to other rules. This file settles the argument the other way:
   the chrome takes dialkit's shapes, sizes and fills, so the panel stops being
   the odd one out by everything else joining it.

   Loaded last, after each tool's own stylesheet, because it is deliberately
   overriding decisions those files made.

   The four things that actually differed, measured against
   `vendor/dialkit/dialkit.css`:

     radius   dialkit is 8px everywhere; the chrome was pills (9999px) on every
              button and dock. This is the single loudest difference — a pill
              beside a rounded rectangle reads as two design systems, before
              any colour is considered.
     height   36px rows against the chrome's 40px buttons.
     fill     a translucent wash over the surface (4% black, 5% white) rather
              than an opaque grey step. It is what makes dialkit's rows sit
              *in* the panel rather than on it, and it costs nothing to adopt
              because it works over any background.
     type     13px, and numbers in a monospace so a column of readouts lines
              up on the decimal point.
   ============================================================ */

:root {
  /* dialkit's own, restated in our namespace so the chrome and the panel are
     reading the same numbers rather than two sets that happen to agree. */
  --dk-radius: 8px;
  --dk-row: 36px;
  --dk-gap: 6px;

  --dk-fill: rgba(0, 0, 0, 0.04);
  --dk-fill-hover: rgba(0, 0, 0, 0.08);
  --dk-fill-active: rgba(0, 0, 0, 0.1);
  --dk-line: rgba(0, 0, 0, 0.1);
  --dk-line-hover: rgba(0, 0, 0, 0.15);

  --dk-ink: rgba(0, 0, 0, 0.9);
  --dk-ink-label: rgba(0, 0, 0, 0.6);
  --dk-ink-quiet: rgba(0, 0, 0, 0.35);

  --dk-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --dk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 10 11.5 6.5'/%3E%3C/svg%3E");
}

/* The dark half, matched to dialkit's own dark values rather than derived from
   the light ones — an inverted alpha is not the same colour and reads muddier. */
:root[data-theme="dark"] {
  --dk-fill: rgba(255, 255, 255, 0.05);
  --dk-fill-hover: rgba(255, 255, 255, 0.1);
  --dk-fill-active: rgba(255, 255, 255, 0.11);
  --dk-line: rgba(255, 255, 255, 0.1);
  --dk-line-hover: rgba(255, 255, 255, 0.15);

  --dk-ink: rgba(255, 255, 255, 0.95);
  --dk-ink-label: rgba(255, 255, 255, 0.7);
  --dk-ink-quiet: rgba(255, 255, 255, 0.4);
}

/* ---------- buttons ---------- */

/* A rounded rectangle, not a pill, and a row tall rather than a chip tall. */
.md-button {
  height: var(--dk-row);
  border-radius: var(--dk-radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 12px;
}
.md-button.has-icon { padding-inline: 10px 12px; gap: 6px; }

/* Filled, outlined and tonal collapse into two weights: a quiet wash for
   everything, and ink-on-surface for the one action a bar is actually for.
   Three weights of button in a toolbar is a hierarchy nobody is reading. */
.md-button--outlined,
.md-button--tonal {
  background: var(--dk-fill);
  color: var(--dk-ink);
  box-shadow: none;
}
.md-button--outlined:hover:not(:disabled),
.md-button--tonal:hover:not(:disabled) { background: var(--dk-fill-hover); }

.md-button--filled {
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  border-radius: var(--dk-radius);
}

.md-button--text {
  background: none;
  color: var(--dk-ink-label);
  padding: 0 10px;
}
.md-button--text:hover:not(:disabled) { background: var(--dk-fill); color: var(--dk-ink); }

.md-icon-button,
.md-icon-button--small {
  border-radius: var(--dk-radius);
  color: var(--dk-ink-label);
}
.md-icon-button { width: var(--dk-row); height: var(--dk-row); }
.md-icon-button:hover:not(:disabled) { background: var(--dk-fill-hover); color: var(--dk-ink); }

/* The floating action button keeps its own shape: it is the one control that is
   meant to sit above the surface rather than in it. */

/* ---------- segmented controls, and the dock ---------- */

/* dialkit's own segmented control is a wash with a raised current option, so
   ours becomes that: no pill, no hairline, the selection carried by tone. */
.md-segmented,
.segmented {
  border-radius: var(--dk-radius);
  background: var(--dk-fill);
  padding: 3px;
  gap: 2px;
  /* No stroke. dialkit draws a group of options as a fill with the current one
     raised out of it, and never outlines the group — an inset hairline round a
     filled shape is two edges describing the same boundary. */
  box-shadow: none;
}
.md-segmented > button,
.segment {
  border-radius: calc(var(--dk-radius) - 3px);
  height: 30px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dk-ink-label);
  border: none;
  background: none;
}
.md-segmented > button:hover,
.segment:hover:not(:disabled) { color: var(--dk-ink); }
.md-segmented > button[aria-pressed="true"],
.segment[data-on="true"] {
  background: var(--md-sys-color-surface);
  color: var(--dk-ink);
  box-shadow: none;
}

/* The dock and the hint chip float over the canvas, and both were carrying an
   inset hairline to stand off the picture behind them. The stroke goes with the
   others; what replaces it is a more opaque surface and dialkit's own backdrop
   blur, which separates them from a photograph better than a one-pixel line
   ever did — a hairline over a busy image is itself busy. */
.viewport-dock,
.viewport-hint {
  border-radius: var(--dk-radius);
  background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}

/* ---------- headings ---------- */

/* dialkit titles a section in sentence case at 13px. The chrome was using 11px
   uppercase with a point of tracking, which is a different voice — louder and
   more clerical — and it was landing directly above dialkit's own titles. */
.group-title,
.field-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dk-ink-label);
}

/* ---------- numbers ---------- */

/* Monospace, so a column of readouts lines up and a value changing under the
   pointer does not shuffle the ones around it. */
.md-slider output,
.md-colour-value,
.gradient-where,
output {
  font-family: var(--dk-mono);
  font-size: 12px;
  color: var(--dk-ink-label);
}

/* ---------- inputs ---------- */

.md-select,
.md-colour-input {
  border-radius: var(--dk-radius);
  border-color: var(--dk-line);
  font-size: 13px;
}
.md-select:hover { border-color: var(--dk-line-hover); }

.md-chip { border-radius: var(--dk-radius); }
.md-dialog { border-radius: 12px; }
.md-snackbar { border-radius: var(--dk-radius); }

/* ---------- the panel is not a card ---------- */

/* dialkit's panel paints its own surface — `--dial-glass-bg`, a 1px border, a
   14px radius and a backdrop blur — because it is built to float over a page.
   Inline in a column that already has a surface, all of that is a second card
   inside the first: #212121 sitting on #131313 in dark, and the same story a
   shade apart in light. A panel within a panel, and the eye reads the seam
   before it reads the controls.
   
   So the card comes off and the rows sit on the column's own surface. The
   horizontal padding goes with it, or the rows would be indented from
   everything above and below them by twelve pixels for no reason. The vertical
   padding stays: that is the gap between the last heading and the first row.

   Dropdowns and popovers keep their own background, which they need — they are
   genuinely floating, which is the case this styling was written for. */
.dialkit-root .dialkit-panel-inner {
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-inline: 0;
}

/* ---------- one heading, one rule ---------- */

/* dialkit titles the panel and rules a line under it, then the first folder
   rules a line over itself — two hairlines four pixels apart, which is what
   the double divider was.
   
   The title is a duplicate as well. Every tool already heads this column:
   Mirrors says "Settings" above a panel dialkit also calls "Settings", Plinth
   says "Fine tuning" above "Fine tuning", Refract says "Glass" above "The
   glass". The panel's name is for a floating window that has to say what it
   belongs to; docked under a heading that already said it, it is the same word
   twice and a line nobody asked for.

   So the header goes, and the first folder's own rule becomes the only one. */
.dialkit-root .dialkit-panel-header { display: none; }

/* ---------- the last of the strokes ---------- */

/* Tabs and the small add buttons were drawing their edge with a hairline: an
   inset shadow on the selected tab, a real border on the buttons. Same
   substitution as everywhere else — the fill is the edge.

   Galleries are the deliberate exception below. */
.tab[data-on="true"] { box-shadow: none; }
.add-layer,
.layer-add {
  border: none;
  border-radius: var(--dk-radius);
  background: var(--dk-fill);
}
.add-layer:hover,
.layer-add:hover { background: var(--dk-fill-hover); }

/* A gallery keeps its ring, and it is not an oversight.
 *
 * Everywhere else the selected thing is marked by a fill, because everywhere
 * else the thing is a word on a panel. A gallery item is a photograph of your
 * own composition: a fill behind it is invisible, since the picture covers it.
 * The ring is the only mark that survives being laid over an image, which is
 * why every tool that shows pictures uses one. */

/* ---------- dropdowns ---------- */

/* dialkit draws a select as one filled row — label at the left, value and
   chevron at the right, no border, 36px tall, the same wash every other row
   uses. Ours was a label sitting beside a bordered box, which is the shape a
   form field has rather than the shape a panel row has, and it landed directly
   above dialkit's own selects.
   
   The row becomes the control: `.md-field` takes the fill and the height, and
   the select inside it goes transparent and right-aligns. Its chevron is drawn
   with two gradients rather than an icon, so it survives the background coming
   off — only the colour behind it changes. */
.md-field {
  height: var(--dk-row);
  min-height: var(--dk-row);
  padding: 0 12px;
  gap: 8px;
  border-radius: var(--dk-radius);
  background: var(--dk-fill);
  /* Set on the row, not just its parts, so anything added to it later inherits
     the panel's voice rather than the document's. */
  font-size: 13px;
  font-weight: 500;
}
.md-field:hover { background: var(--dk-fill-hover); }
.md-field > label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dk-ink-label);
}

.md-select {
  flex: 1 1 auto;
  height: 100%;
  padding: 0 18px 0 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--dk-ink-label);
  font-size: 13px;
  font-weight: 500;
  /* The value sits against the chevron on the right, the way dialkit's does,
     rather than against the label it is not part of. */
  text-align: right;
  text-align-last: right;
}
.md-select:hover { background-color: transparent; }
.md-select:focus-visible { outline: 2px solid var(--dk-ink); outline-offset: -2px; }

/* The chevron, rather than the triangle the platform select was wearing.
 *
 * Drawn as a mask filled with the row's own label colour, so it follows the
 * theme without a second copy of the file for dark — a background-image would
 * have to bake the stroke colour in, and there are two of those. Sitting after
 * the select as a flex item gives it dialkit's eight-pixel gap for free instead
 * of a background-position that has to be guessed against the padding. */
.md-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 0;
}
.md-field::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--dk-ink-label);
  -webkit-mask: var(--dk-chevron) center / 16px 16px no-repeat;
  mask: var(--dk-chevron) center / 16px 16px no-repeat;
  pointer-events: none;
}