/* ==========================================================================
   Workspace — the modular operating surface
   --------------------------------------------------------------------------
   Modules are plates on a twelve-column bench. Each one is dragged by its
   bezel, resized from its lower-right corner, collapsed to its bezel, and
   configured from its own sheet. The arrangement follows the account, not
   the device.
   ========================================================================== */

.workspace {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ---- dock: the module rail --------------------------------------------- */

.dock {
  position: sticky;
  top: 52px;
  align-self: start;
  height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--s3) 0;
  border-right: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-100) 45%, transparent);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 5;
}

.dock::-webkit-scrollbar { display: none; }

.dock__btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink-600);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color var(--m-quick) var(--ease-out), background var(--m-quick) var(--ease-out);
}

.dock__btn:hover { color: var(--ink-999); background: color-mix(in oklab, var(--ink-300) 62%, transparent); }

.dock__btn[data-on="true"] {
  color: var(--dock-ink, var(--sig-brand));
  background: color-mix(in oklab, var(--dock-ink, var(--sig-brand)) 13%, transparent);
}

.dock__btn[data-on="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--dock-ink, var(--sig-brand));
}

.dock__rule { width: 18px; height: 1px; background: var(--plate-line); margin: var(--s2) 0; flex: none; }

/* ---- bench -------------------------------------------------------------- */

.bench {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s3) var(--s4) var(--s9);
}

.bench__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: row dense;
  /* Row gap is zero on purpose: a module spanning N rows would otherwise pick
     up N-1 gaps and balloon. Vertical rhythm comes from the module margin. */
  column-gap: var(--s3);
  row-gap: 0;
  align-content: start;
  min-height: 0;
}

.bench__head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s2) var(--s2) var(--s4);
  flex-wrap: wrap;
}

.module {
  position: relative;
  grid-column: span var(--w, 4);
  grid-row: span var(--rows, 30);
  margin-bottom: var(--s3);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: opacity var(--m-quick) var(--ease-out), box-shadow var(--m-move) var(--ease-out);
}

.module[data-collapsed="true"] { grid-row: span 5; }
.module[data-collapsed="true"] .module__body { display: none; }
.module[data-collapsed="true"] .module__resize { display: none; }

.module[data-dragging="true"] { opacity: 0.35; }

.module[data-drop="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  box-shadow: inset 0 0 0 1px var(--sig-brand);
  background: color-mix(in oklab, var(--sig-brand) 8%, transparent);
  pointer-events: none;
}

.module__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.module__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The resize grip repeats the chamfer motif at the corner it controls. */
.module__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  z-index: 9;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 46%, color-mix(in oklab, var(--ink-600) 70%, transparent) 46% 52%, transparent 52%),
    linear-gradient(135deg, transparent 0 66%, color-mix(in oklab, var(--ink-600) 55%, transparent) 66% 72%, transparent 72%);
  opacity: 0;
  transition: opacity var(--m-quick) var(--ease-out);
}

.module:hover .module__resize { opacity: 1; }

.module__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-num);
  font-size: var(--t-micro);
  color: var(--ink-600);
}

/* ---- shared module internals -------------------------------------------- */

.mrow {
  display: grid;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s4);
  border-bottom: 1px solid color-mix(in oklab, var(--plate-line) 32%, transparent);
  font-size: var(--t-small);
  transition: background var(--m-quick) var(--ease-out);
}

.mrow:hover { background: color-mix(in oklab, var(--ink-250) 46%, transparent); }
.mrow--click { cursor: pointer; }
.mrow__sym { font-family: var(--font-num); font-weight: 500; color: var(--ink-999); letter-spacing: 0.02em; }
.mrow__meta { font-size: var(--t-micro); color: var(--ink-500); }

.mhead {
  display: grid;
  gap: var(--s3);
  padding: 5px var(--s4);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-150) 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 2;
}

.mtools {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--kerf);
  flex-wrap: wrap;
}

.mstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--kerf);
}

/* ---- copilot dock -------------------------------------------------------- */

.copilot {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: var(--z-overlay);
  width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  max-height: min(640px, 78vh);
}

.copilot[data-min="true"] { max-height: 44px; }
.copilot[data-min="true"] .copilot__body,
.copilot[data-min="true"] .copilot__compose { display: none; }

.copilot__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.turn { display: flex; flex-direction: column; gap: 6px; }
.turn--user { align-items: flex-end; }

.turn__bubble {
  max-width: 92%;
  padding: 9px var(--s3);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-800);
  background: color-mix(in oklab, var(--ink-200) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 60%, transparent);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.turn--user .turn__bubble {
  color: var(--ink-999);
  background: color-mix(in oklab, var(--sig-brand) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-brand) 30%, transparent);
}

.turn__evidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 4px;
}

.evidence {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: color-mix(in oklab, var(--ink-100) 66%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 46%, transparent);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  font-size: var(--t-micro);
}

.evidence b { font-family: var(--font-num); color: var(--ink-900); font-weight: 500; letter-spacing: -0.01em; }

.turn__foot { display: flex; align-items: center; gap: var(--s2); }

.copilot__compose {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border-top: 1px solid var(--kerf);
}

.copilot__input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  font-size: var(--t-small);
  color: var(--ink-999);
  background: color-mix(in oklab, var(--ink-100) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.copilot__prompts { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 var(--s4) var(--s3); }

/* ---- token intelligence surface ----------------------------------------- */

.token {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
  gap: var(--s3);
  padding: var(--s4);
  align-items: start;
}

.token__masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  flex-wrap: wrap;
}

.token__price { display: flex; align-items: baseline; gap: var(--s3); }
.token__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s4); padding: var(--s5); }
.token__chart { padding: var(--s4) var(--s5) var(--s5); }
.token__chart canvas { width: 100%; height: 210px; }

/* ---- discovery ----------------------------------------------------------- */

.discover { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); flex: 1; min-height: 0; }
.discover__filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; padding: var(--s4); }
.discover__filters .field { min-width: 128px; }
.discover__table { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---- account ------------------------------------------------------------- */

.account { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); align-items: start; max-width: 1400px; margin: 0 auto; width: 100%; }
.account__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 68px; }

.account__tab {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s3);
  font-size: var(--t-small);
  color: var(--ink-700);
  text-align: left;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: background var(--m-quick) var(--ease-out), color var(--m-quick) var(--ease-out);
}

.account__tab:hover { background: color-mix(in oklab, var(--ink-250) 60%, transparent); color: var(--ink-999); }
.account__tab[aria-selected="true"] { background: color-mix(in oklab, var(--sig-brand) 12%, transparent); color: var(--ink-999); box-shadow: inset 2px 0 0 var(--sig-brand); }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .token { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .dock {
    position: sticky;
    top: 52px;
    flex-direction: row;
    height: auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--kerf);
    padding: var(--s2) var(--s3);
    overflow-x: auto;
  }
  .dock__rule { width: 1px; height: 18px; margin: 0 var(--s2); }
  .bench { padding: var(--s3); }
  .bench__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module { grid-column: span 4 !important; }
  .copilot { left: var(--s3); right: var(--s3); width: auto; }
  .account { grid-template-columns: 1fr; padding: var(--s4); }
  .account__nav { position: static; flex-direction: row; overflow-x: auto; }
}