/*
  ikolori-shell.css — the current iColori, replacing the previous generation.

  Two things happen in this file, and they are separate:

  1. THE THEME. ikolori-theme.css ports an iColori that no longer exists: a
     cream page (#f6f2eb) with a coral accent (#ff5a5f). The iColori running
     today at C:\ikolori.com is dark graphite with an oxidized copper accent,
     and its own app.css says why — the whole screen exists to judge cloth, and
     a colour reads truer against a dark surround than a bright one, the same
     reason a lightbox is grey.

     The good news is that this app's own tokens.css ALREADY holds those
     values: --paper #161410, --card #24201a, --ink #ece4d0, --accent #d8c089
     are byte-identical in both trees, because iColori took them from here.
     What overrode them was the stale --c-* layer. So the re-theme is not a
     repaint of 13,851 lines of CSS: every rule in this app already speaks
     --c-bg / --c-surface-N / --c-text / --c-accent, and redefining those
     names re-themes all of it at once. That is the only reason this is a
     small file.

  2. THE LAYOUT. The .ik-* rules for WorkspaceShellLayoutIkolori.js.

  Loaded after ikolori-v2.css so it wins on specificity ties. The old files are
  left in place and still loaded: the compact inspector rules in ikolori-v2.css
  are worth keeping and are written against .plaidstudio-v2 .cws-right, which
  the new layout still carries. Only its .v2-main / .v2-nav rules go unused,
  because the fourth column they styled no longer exists.
*/

/* ─── 1 · the theme ──────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* surfaces */
  --c-bg: #161410;
  --c-surface-1: #24201a;
  --c-surface-2: #1d1a14;
  --c-surface-3: #100e0a;
  --c-surface-hover: #2c2820;

  /* borders. iColori's note on these: 1.30 against the card was the quietest a
     structural line could be and still be seen, and at panel scale it read as a
     smudge; 1.52 keeps it a hairline. */
  --c-border-faint: #2a261d;
  --c-border-hairline: #463d2d;
  --c-border-strong: #524833;
  --c-border-bright: #756648;

  /* text. The names keep their meaning: ink is what you write with, paper is
     what you write on. In this theme ink is cream and paper is charcoal. */
  --c-text: #ece4d0;
  --c-text-mid: #b3a587;
  --c-text-muted: #948b76;
  --c-text-faint: #6e6450;
  --c-text-on-accent: #1a1610;

  /* accent */
  --c-accent: #d8c089;
  --c-accent-hover: #e6d09c;
  --c-accent-press: #b8a06b;
  --c-accent-muted: #4a4029;
  --c-accent-glow: rgb(216 192 137 / 0.2);
  --c-accent-glow-soft: rgb(216 192 137 / 0.08);
  --c-accent-glow-strong: rgb(216 192 137 / 0.34);
  --c-accent-tint: rgb(216 192 137 / 0.055);
  --c-brand: #d8c089;
  --c-brand-hover: #e6d09c;
  --c-brand-press: #b8a06b;

  /* semantics, taken from iColori's own set rather than darkened guesses:
     madder for warning, royal for info, and a green lifted far enough to hold
     3:1 against the card. */
  --c-success: #8fa07a;
  --c-warning: #d4a14f;
  --c-info: #6e8a9e;

  --bg-vignette: linear-gradient(180deg, #24201a, #1b1813);
  --bg-vignette-hover: linear-gradient(180deg, #2c2820, #221e18);
  --bg-topbar-band: #1d1a14;
  --gradient-surface-up: #24201a;
  --gradient-surface-up-hover: #2c2820;
  --gradient-accent: #d8c089;
  --gradient-accent-hover: #e6d09c;
  --gradient-recessed: #100e0a;
  --gradient-summary-open: #1d1a14;
  --gradient-range-track: linear-gradient(90deg, #d8c089 0%, #100e0a 60%);

  /* On a dark ground a white inset reads as haze, so the highlight goes to the
     cream at low alpha and the depth goes to black rather than to brown. */
  --shadow-inset-soft: inset 0 1px 0 rgb(236 228 208 / 0.06);
  --shadow-inset-press: inset 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-panel: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-modal: 0 24px 64px rgb(0 0 0 / 0.62);

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* iColori's own names, so rules ported from it read unchanged. */
  --paper: #161410;
  --card: #24201a;
  --card-2: #1d1a14;
  --card-3: #100e0a;
  --hover: #2c2820;
  --ink: #ece4d0;
  --ink-2: #b3a587;
  --muted: #948b76;
  --faint: #6e6450;
  --rule: #463d2d;
  --rule-soft: #2a261d;
  --accent: #d8c089;
  --ink-a12: rgb(236 228 208 / 0.14);
  --ink-a22: rgb(236 228 208 / 0.26);
  --ink-a42: rgb(236 228 208 / 0.42);
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --display: "Fraunces", Georgia, serif;

  --rail: 300px;
  --dock: 320px;
}

/* The paper grain. iColori carries it on the body and it is the single cue
   that stops a flat dark page reading as a void. Same SVG, same 4% alpha. */
html,
body {
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  color: var(--c-text);
}

/* Overrides for the light-theme literals ikolori-theme.css hardcoded past its
   own variables. Each of these is a hex that cannot follow a token. */
.app-topbar {
  background: var(--card-2);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}

.cws-shell input,
.cws-shell select,
.cws-shell textarea {
  color: var(--ink);
  background: var(--card-2);
  border-color: var(--rule);
}

.cws-shell button:focus-visible,
.cws-shell input:focus-visible,
.cws-shell select:focus-visible {
  outline-color: var(--accent);
}

.cws-shell ::selection {
  background: rgb(216 192 137 / 0.3);
  color: var(--ink);
}

.app-panel {
  box-shadow: var(--shadow-panel);
}

.panel-header,
.panel-body,
.insp-panel,
.se-panel,
.vp-shell {
  border-color: var(--rule);
}

/* ─── 2 · the layout ─────────────────────────────────────────────────── */

/* iColori's shell is a flex column: header takes its own height, body takes
   the rest. Its CSS makes a point of this — "no magic header height anywhere"
   — and the previous port had two of them (68px, then 64px), so the body was
   wrong by 4px whenever the header disagreed. */
.ik-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh / var(--cws-desktop-ui-zoom, 1));
  min-height: 0;
}

.ik-bar {
  flex: none;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}

.ik-brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ik-brand {
  display: block;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.ik-brand .app-brand-logo {
  display: block;
  width: auto;
  height: 26px;
}

/* One engine, two sub-modes — so a segmented control, not a mode list. */
.ik-submodes {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--card-3);
}

.ik-chip {
  padding: 4px 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ik-chip:hover {
  color: var(--ink-2);
  background: var(--hover);
}

.ik-chip.is-active {
  background: var(--accent);
  color: var(--on-accent, #1a1610);
}

/* One option means a readout, not a chooser; the chips above already say which
   sub-mode is live. Kept in the DOM because the host reads and writes it. */
.ik-mode-select {
  display: none;
}

.ik-title-block {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.ik-name {
  overflow: hidden;
  font-family: var(--display);
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ik-status,
.ik-canonical {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The palette sits in the bar because everything below it draws from here. */
.ik-palette {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--rule);
}

.ik-palette .label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ik-pool {
  display: flex;
  gap: 3px;
}

.ik-pool > * {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink-a42);
  border-radius: 2px;
}

.ik-favourites {
  display: flex;
  gap: 3px;
  align-items: center;
}

.ik-favourites .v2-palette-empty {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
}

.ik-acts {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ik-btn {
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--card-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ik-btn:hover {
  background: var(--hover);
  border-color: var(--rule-bright, #756648);
}

.ik-btn.is-open {
  border-color: var(--accent);
  color: var(--accent);
}

.ik-btn--icon {
  padding: 6px 9px;
  font-size: 13px;
  letter-spacing: 0;
}

.ik-menu-wrap {
  position: relative;
}

/* The share and more menus hang off the right edge of the bar; anchoring them
   left would push them past the viewport. */
.tb-menu--right {
  right: 0;
  left: auto;
}

.tb-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
}

.ik-pill {
  padding: 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card-3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10.5px;
}

/* rail | stage | dock */
.ik-main {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--dock);
  gap: 12px;
  height: auto;
  padding: 12px 16px 16px;
  flex: 1;
  min-height: 0;
  background: transparent;
}

/* Scoped to .plaidstudio-v2 to match, not beat, the specificity of
   `.plaidstudio-v2 .cws-left { display: none }` in ikolori-v2.css — V2 hid the
   source-editor column outright because it had moved its contents into the
   dock. It has its own column again, so it is shown again; loading later is
   what settles the tie. */
.plaidstudio-v2 .ik-rail,
.plaidstudio-v2 .ik-stage,
.plaidstudio-v2 .ik-dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.ik-rail,
.ik-dock {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--card);
  overflow: hidden;
}

.ik-rail > *,
.ik-dock > * {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.ik-stage {
  padding: 0;
  background: transparent;
}

/* Below this the three columns cannot all hold their minimum, which is the
   same point iColori folds its own shell to one column. */
@media (max-width: 1180px) {
  .ik-bar,
  .ik-main {
    grid-template-columns: 1fr;
  }

  .ik-palette {
    padding-right: 0;
    border-right: none;
  }

  .ik-shell {
    height: auto;
    min-height: 100vh;
  }

  .ik-main {
    flex: none;
  }

  .ik-stage {
    height: 60vh;
  }
}