/* In-app windows and the settings window.
 *
 * The difference between software that feels bought and software that feels generated is almost
 * entirely in this file: one-pixel borders instead of shadows, 26-30px title bars instead of 48,
 * hairline separators, hover states that change by a few percent rather than lighting up, and no
 * rounded-everything. A desk tool is dense on purpose - the density is the product.
 */

/* --------------------------------------------------------------- window */

@keyframes win-in { from { opacity: 0; transform: scale(.985) translateY(5px); } to { opacity: 1; transform: none; } }

.win {
  animation: win-in var(--t-pop) var(--ease);
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px rgba(0, 0, 0, .42);
  overflow: hidden;
  color: var(--ink);
}

.win.focused {
  border-color: #3a3a41;
}

/* Moving a window must not repaint text at sub-pixel offsets, which is what makes a drag look
   blurry and cheap. Snap to whole pixels and drop pointer events on the contents mid-drag. */
.win.dragging {
  user-select: none;
}
.win.dragging .win-body { pointer-events: none; }

.win-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0 2px 0 11px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  cursor: default;
}

.win.focused .win-head { background: var(--panel-3); }

.win-title {
  font-family: var(--ui-display);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-ticker);
  color: var(--ink-dim);
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win.focused .win-title { color: var(--ink); }

.win-controls { display: flex; flex: 0 0 auto; }

/* A window control: the system's quiet role, in the title bar's own metrics. */
.win-btn {
  width: 30px;
  height: var(--c-md);
  border-radius: 0;
  font: var(--t-md)/1 var(--ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.win-close:hover { color: var(--sell-hi); }

.win-body {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}

.win-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.win-foot[hidden] { display: none; }

/* Bottom-right resize grip. The diagonal hatch is the universal signal, and it gives the pointer a
   target that is easier to hit than a 6px edge. */
.win-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--ink-faint) 46% 54%, transparent 54% 100%),
    linear-gradient(135deg, transparent 0 72%, var(--ink-faint) 72% 80%, transparent 80% 100%);
  opacity: .5;
}
.win-grip:hover { opacity: 1; }
.win.collapsed .win-body,
.win.collapsed .win-foot,
.win.collapsed .win-grip { display: none; }
.win.maximised { border-radius: 0; }

/* ------------------------------------------------------- settings window */

.set-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* top tab strip */
.set-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 1px;
  padding: 0 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }

/* Thirty-six, not twenty-nine: the strip has to hold a 28px field and the three pixels of focus
   halo around it, and it is a horizontal scroll container - anything taller than the strip is cut
   off rather than overflowing it. At twenty-nine the search box filled the strip edge to edge and
   read as something wedged into a gap. */
.set-tab {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font: var(--t-md)/1 var(--ui);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-tap) var(--ease);
}
.set-tab:hover { color: var(--ink-dim); }
.set-tab.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.set-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
/* Inside an indicator window the split IS the body: without its own height chain the nav and
   pane collapse to content height and the page list stops reaching the foot. */
.ind-root { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ind-split { height: 100%; }
.ind-split .set-pane { flex: 1 1 auto; min-width: 0; overflow: auto; }

/* left nav tree */
.set-nav {
  flex: 0 0 176px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Inset, so the selected row is a PILL sitting in a column rather than a band bleeding into
     the border on one side and the window edge on the other. The band is what made this read as
     a table of contents somebody forgot to style. */
  padding: 6px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.set-navitem {
  display: flex;
  align-items: center;
  gap: 3px;
  /* The default control height. Twenty-seven is not a number anybody chose - it is what a padding
     and a line-height happened to add up to, and it stood alone in eight windows. */
  height: var(--c-md);
  padding: 0 9px 0 5px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  font: var(--t-md)/1 var(--ui);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.set-navitem:hover { color: var(--ink); background: var(--sel); }
.set-navitem.on {
  /* the quiet pill, the same active grammar the indicators nav wears - the square block with
     an accent stripe was the cheap version of this exact statement */
  background: var(--sel);
  color: var(--ink);
}

/* The marked entries are the ones that change what data is loaded, not just how it looks.
   A designed dot, not a dingbat: the ✻ glyph rendered at whatever size and baseline the font
   chose, which is exactly the kind of furniture that reads as generated. */
.set-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  flex: 0 0 13px;
}
.set-navitem.star .set-star::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.set-navitem.star.on .set-star::before { background: var(--accent, var(--ink-dim)); }

/* right pane */
.set-pane {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.set-crumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  background: var(--bg);
}
.set-crumb i { font-style: normal; color: var(--ink-faint); }
.set-crumb b { color: var(--ink); font-weight: var(--w-semi); }

.set-page {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 3px 14px 14px;
}

.set-note {
  padding: 7px 0 9px;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  line-height: var(--lh-text);
  max-width: 62ch;
}

/* A section heading, not an error. Red at the top of a settings page reads as something being
   wrong; these lines are context. */
/* The space ABOVE a heading is what does the work: four pixels off the row before it makes a
   line of bold text, not a division. The weight was also declared twice, which is the sort of
   thing that accumulates in a sheet nobody reads back. */
.set-head {
  padding: 20px 0 6px;
  color: var(--ink-dim);
  font-weight: var(--w-semi);
  font-size: var(--t-sm);
}
.set-page > .set-head:first-child { padding-top: 10px; }

/* A heading or a note belonging to rows their master switch has turned off. It fades with them,
   so a switched-off period reads as one dimmed block rather than live headings over dead rows. */
.set-off { opacity: .42; }

/* A heading that also keys the columns under it. It IS a field row, so it inherits whatever
   horizontal padding the active appearance gives one and cannot drift out of alignment. */
.set-colhead {
  align-items: end;
  border-bottom: 0;
}
.set-colhead .set-head { padding: 10px 0 0; }

/* Each word is exactly as wide as the control it names, in the same order and the same 6px gap
   the row's own `.fld-multi` uses, so the key sits over its columns instead of near them. A key
   that is nearly aligned is worse than no key: the eye reads it as a fourth column of something. */
.set-col {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  letter-spacing: var(--tr-ticker);
}
.set-col:nth-child(1) { width: 16px; }          /* the checkbox */
.set-col:nth-child(2),
.set-col:nth-child(3) { width: 34px; }          /* .cf, swatch plus its border */
.set-col:nth-child(4),
.set-col:nth-child(5) { width: 23px; }          /* .pf, two 11px cells and their gap */

/* a layout row naming a field that does not exist is meant to be loud */
.set-missing {
  margin: 4px 0;
  padding: 5px 8px;
  border-left: 2px solid var(--sell);
  background: rgba(207, 74, 69, .08);
  color: var(--sell-hi);
  font-size: var(--t-sm);
}

/* rows */
.set-page .fld {
  display: grid;
  /* minmax(0, ...) on both, for the reason the base rule carries: `auto` sizes to content and
     refuses to shrink below it, so a wide control - a row of chips, a colour grid - lays out its
     full width and runs off the edge of the dialog instead of wrapping inside it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 16px;
  min-height: 34px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.set-page .fld:last-child { border-bottom: 0; }

/* Rows whose CONTROL is the wide half. The shared grid gives the spare room to the label, which
   is right for a checkbox on the far right and wrong for a colour grid: it left the grid 180px of
   a 480px row and wrapped eight swatches onto two lines. */
.set-page .dw-block {
  align-items: start;
  grid-template-columns: 92px minmax(0, 1fr);
}
.set-page .dw-block .fld-label { padding-top: 6px; }

/* Eight columns, stated. Nested flex rows kept being re-flowed by whichever parent rule won; a
   grid with an explicit column count cannot be reinterpreted by its container. */
/* `dw-palette`, not `dw-grid`: the floating drawing bar already owns dw-grid and dw-swatch for
   its own five-column popover, and two different palettes answering to one class is how a rule
   written for one silently reshapes the other. */
.set-page .dw-palette {
  display: grid;
  grid-template-columns: repeat(8, 20px);
  gap: 3px;
  justify-content: start;
}
.set-page .dw-pswatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform var(--t-tap) var(--ease), box-shadow var(--t-tap) var(--ease);
}
.set-page .dw-pswatch:hover { transform: scale(1.12); }
/* Marked by a RING outside its own edge, not a border on it: a border eats into the colour and
   changes the thing you are judging. */
.set-page .dw-pswatch.on {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--ink);
  border-color: transparent;
}
.set-page .dw-custom { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.set-page .fld-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-dim);
  font-size: var(--t-md);
  line-height: var(--lh-ui);
}
.set-page .fld:hover .fld-label { color: var(--ink); }
/* THE SENTENCE, WHEN IT IS ASKED FOR. See addHelp: it is built the moment the mark is pressed and
   stays under its row until it is pressed again, so a page of fifteen controls is fifteen lines
   until somebody wants the sixteenth. */
.set-page .fld-help {
  display: none;
  grid-column: 1 / -1;
  margin-top: -1px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: var(--lh-text);
  max-width: 62ch;
}
.set-page .fld-help.on { display: block; }

/* THE MARK. A circled question mark is what every dense settings window uses for this and what
   the reader arrives already knowing - see the note in addHelp. Quiet enough to scan past: it
   sits at ink-faint until the row is under the pointer, and it never moves or reserves a second
   line, so a column of them cannot become a column of anything. */
.set-page .fld-why {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font: var(--w-medium) var(--t-2xs)/1 var(--ui);
  cursor: help;
  opacity: .55;
}
.set-page .fld:hover .fld-why { opacity: 1; }
.set-page .fld-why:hover,
.set-page .fld-why.on {
  color: var(--ink);
  border-color: var(--ink-faint);
  opacity: 1;
}
.set-page .fld-why:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
/* A DEVICE WITH NO POINTER NEVER GETS THE HOVER STATE, so the mark would sit at half strength for
   the whole life of the window. It is the only way to the sentence on a phone; it is not allowed
   to be the faintest thing on the row there. */
@media (hover: none) {
  .set-page .fld-why { opacity: 1; }
}
@media (max-width: 560px) {
  /* Fourteen points is a four-millimetre target. The circle grows a little and its REACH grows a
     lot - invisible margin around it, which is the standard way to give a small mark a
     thumb-sized target without letting it push the label around.
     THE REACH IS VERTICAL. It was eleven points on every side, and the sideways eleven hung past
     the end of the row: an absolutely-positioned box outside its parent still counts toward that
     parent's scrollable width, so every settings row on a phone carried eleven points of
     invisible content past its own right edge and the sheet could be dragged sideways into
     nothing. Rows are stacked, so the vertical reach is the one a thumb actually needs, and it is
     the only one taken: the mark is already 22 points wide, and a sideways reach has the label's
     last word on one side of it and the row's own control on the other - it would take presses
     meant for either of them. */
  .set-page .fld-why {
    position: relative;
    width: 22px;
    height: 22px;
    font-size: var(--t-xs);
  }
  .set-page .fld-why::after {
    content: '';
    position: absolute;
    inset: -11px 0;
  }
}
/* The two or three words that say what an abbreviated label means, on the label's own line. It is
   dim and light so the code stays the thing the eye lands on when scanning the column. */
.set-page .fld-gloss {
  margin-left: 9px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
}
.set-page .fld:hover .fld-gloss { color: var(--ink-dim); }
/* On a phone the label column is about 130px, so an inline gloss wraps mid-phrase and reads as a
   broken label - "dHigh highest / trade". Given its own line it reads as what it is. */
@media (max-width: 560px) {
  .set-page .fld-gloss {
    display: block;
    margin: 2px 0 0;
  }
  /* A row carrying four or five controls stacks rather than squeezing: the label and its gloss
     take the full width, the controls sit under them on their own line. Squeezed, the label
     column collapsed to about fifty pixels and three words became four lines behind a checkbox. */
  .set-page .fld-dense {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .set-page .fld-dense .fld-multi {
    justify-content: flex-end;
    padding-top: 4px;
  }
}
.set-page .fld-disabled .fld-label { color: var(--ink-faint); }
.set-page .fld-disabled .fld-gloss { color: #5b6472; }
.set-page .fld-disabled .fld-help { color: #5b6472; }

/* A ROW OF CONTROLS THAT CAN GIVE WAY. `.fld-pick` carries a 154px minimum, which is right on a
   desktop page and impossible on a phone: in the VWAP window at 460px the pick ran 56 pixels past
   the row that holds it, off the side of the screen. The minimum is a preference, so it is stated
   as one here and the control shrinks rather than escaping. */
.fld-multi { display: flex; gap: 6px; align-items: center; min-width: 0; flex-wrap: wrap; }
.fld-multi > .fld-pick,
.fld-multi > .fld-input { min-width: 0; max-width: 100%; }
/* A CHECKBOX DOES NOT SHRINK. In a mixed row - a switch beside the number it enables - the number
   input takes the flexible width and squeezed the switch down to a sliver you could see but not
   read as a checkbox. Its size is fixed by what it IS, not by what is left over. */
.fld-multi > .cf { flex: 0 0 auto; }

/* WHERE A TAG SITS, as a picture of where it sits - see pos-field.js.
   Two columns for the two ends of the line, three rows for above, astride and below it. */
.pf {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
}
.pf-row { display: flex; gap: 1px; }
.pf-cell {
  width: 11px;
  height: 6px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 1px;
  background: none;
  cursor: pointer;
}
.pf-cell:hover { border-color: var(--ink); }
/* Lit in the level's own colour, so the column reads as the levels it belongs to. */
.pf-cell.on {
  background: var(--pf-c, var(--accent));
  border-color: var(--pf-c, var(--accent));
}
/* Following the chart-wide default rather than set here: the same cell, hollow. Both states show
   WHERE the tag is; only the fill says who decided. */
.pf-cell.on.inherit {
  background: none;
  box-shadow: inset 0 0 0 2px var(--pf-c, var(--accent));
  border-color: var(--pf-c, var(--accent));
}
.pf-cell:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* colour swatch: a native input styled down to a chip, because the OS picker is better than
   anything worth hand-rolling */
.swatchwrap { display: inline-flex; }
.swatch {
  width: 34px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch::-webkit-color-swatch { border: 0; border-radius: 1px; }
.swatch::-moz-color-swatch { border: 0; border-radius: 1px; }

/* Read-only blocks. The reference prints fixed facts about the loaded instrument above a source
   page - tick size, contract multiplier, the session range. They are stated, not editable, so they
   are set apart from the control rows rather than dressed up as one. */
.set-info {
  margin: 0;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-dim);
  font: var(--t-sm)/var(--lh-text) var(--mono);
  white-space: pre-wrap;
  overflow-x: auto;
}

.set-source {
  margin: 6px 0 10px;
  padding: 9px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
}
.set-source b { color: var(--ink); font-size: var(--t-md); }
.set-source > span { color: var(--ink-faint); font-size: var(--t-sm); margin-left: 6px; }
.set-source .set-info {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

/* a page-level action, not a row control, so it sits on its own line */
/* One strip of actions, wrapping, with the same gap between them in both directions - so five
   presets read as five choices of one thing rather than as five loose links. */
.set-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 10px;
}
.set-btn {
  height: 28px;
  margin: 0;
  color: var(--ink-dim);
}
.set-btn:hover { color: var(--ink); background: var(--sel); }

/* footer */
.set-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.set-foot .spacer { flex: 1 1 auto; }
/* Square, so the circle is a circle, and the same height as the button that commits beside it -
   at 24 against the footer's 28 it was the one control on the row out of line. */
.set-foot .btn.round {
  width: var(--c-md);
  height: var(--c-md);
  padding: 0;
  border-radius: 50%;
  font-size: var(--t-md);
}

/* ------------------------------------------------------- symbol window */

.sym-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.sym-root .search {
  flex: 0 0 auto;
  margin: 9px 11px;
  width: calc(100% - 22px);
}
.sym-root .symlist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* --------------------------------------------------------------- phone */

@media (max-width: 640px) {
  /* On a phone a floating window is a worse modal, so windows dock to the full screen and keep
     only the close control. Dragging a 360px-wide window around a 390px screen helps nobody. */
  .win {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .win-grip { display: none; }
  .win-btn:not(.win-close) { display: none; }
  .set-nav { flex: 0 0 128px; }
  /* Panel names in the rebuilt tabs are the reference tool's own - "Initial Balance, Stats",
     "Poor High, Poor Low" - and they do not fit a 128px nav on one line. Wrapping to two lines
     keeps the whole name readable; truncating it would leave two panels reading "Poor High, P…". */
  .set-navitem {
    height: auto;
    min-height: 30px;
    padding: 5px 8px 5px 4px;
    align-items: flex-start;
    white-space: normal;
    line-height: var(--lh-tight);
  }
  .set-star { margin-top: 1px; }
  .set-page .fld { min-height: 36px; }
}

/* ------------------------------------------------------ workspaces window */

.ws-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ws-bar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}

.ws-list { flex: 1 1 auto; overflow-y: auto; padding: 5px 7px 12px; }

.ws-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.ws-row:hover .ws-name { color: var(--ink); }
.ws-row.on { background: var(--sel); border-left-color: #6d6d75; }
.ws-tick { width: 12px; flex: 0 0 12px; color: var(--ink); font-size: var(--t-sm); }
.ws-name { flex: 1 1 auto; font-weight: var(--w-medium); font-size: var(--t-md); color: var(--ink-dim); }
.ws-row.on .ws-name { color: var(--ink); }

/* The row actions stay hidden until the row is under the pointer: four icons on every row turns a
   list into a control panel, and the common action is loading, not managing. */
.ws-acts { display: flex; gap: 1px; opacity: 0; }
.ws-row:hover .ws-acts, .ws-row.on .ws-acts { opacity: 1; }

.ws-icon {
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  font: var(--t-sm) var(--mono);
  cursor: pointer;
}
.ws-icon:hover { color: var(--ink); }
.ws-icon:last-child:hover { color: var(--sell-hi); }

/* ------------------------------------------- floating toolbar on a drawing */

/* Sits a few pixels from the object it edits. Deliberately small and dark: it overlays the chart,
   so anything larger hides the thing being edited. */
/* Under the windows, not over them.
 *
 * At 55 it outranked every dialog - including the properties dialog it opens - so selecting a
 * drawing and pressing its own settings button put the bar across the panel that appeared. It
 * floats over the CHART, which is what it is for; a window is a different layer. */
.dw-bar {
  position: fixed;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .45);
  user-select: none;
}

/* The selected-drawing bar: quiet verbs that latch, in the bar's own metrics. */
.dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  height: var(--c-md);
  padding: 0 6px;
  font: var(--t-sm) var(--mono);
}
.dw-del:hover { color: var(--sell-hi); }
.dw-wide { min-width: 54px; }

.dw-dot {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid #00000060;
}
.dw-rule { width: 14px; background: currentColor; border-radius: 1px; }
.dw-wlabel { font-size: var(--t-xs); }
.dw-sep { width: 1px; height: 15px; margin: 0 3px; background: var(--line-2); }

/* popovers hanging off the toolbar */
.dw-pop {
  animation: win-in var(--t-pop) var(--ease);
  position: fixed;
  z-index: 56;
  padding: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .45);
}

.dw-grid {
  display: grid;
  grid-template-columns: repeat(5, 20px);
  gap: 4px;
  align-items: center;
}
.dw-swatch {
  width: 20px;
  height: 20px;
  border: 1px solid #00000060;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.dw-swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }

.dw-list { display: flex; flex-direction: column; min-width: 130px; }
.dw-wrow, .dw-mrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  font: var(--t-sm) var(--ui);
  text-align: left;
  cursor: pointer;
}
.dw-wrow:hover, .dw-mrow:hover { color: var(--ink); }
.dw-wrow.on { background: var(--sel); }
.dw-wrow i { width: 40px; background: currentColor; border-radius: 1px; }
.dw-mrow .tick { width: 11px; color: var(--ink); }

/* the per-drawing settings window reuses the field primitives */
.dw-swatches { display: flex; gap: 4px; align-items: center; }
.dw-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
}
.dw-width.on { border-color: #4a4a52; background: var(--sel); }
.dw-width i { width: 18px; background: var(--ink); border-radius: 1px; }

/* ------------------------------------------------ keyboard reference card */

.kb-root { padding: 16px 18px 4px; }
.kb-head { font-size: var(--t-xl); font-weight: var(--w-semi); letter-spacing: var(--tr-tight); color: var(--ink); }
.kb-sub { margin: 2px 0 16px; font-size: var(--t-sm); color: var(--ink-faint); }

.kb-cols { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.kb-col { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; min-width: 220px; }

.kb-sec {
  padding: 11px 12px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.kb-title {
  margin-bottom: 8px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  
  
}
.kb-rows { display: flex; flex-direction: column; gap: 6px; }
.kb-row { display: flex; align-items: baseline; gap: 10px; }
.kb-keys { display: inline-flex; gap: 3px; flex: 0 0 auto; min-width: 92px; }
.kb-desc { color: var(--ink-dim); font-size: var(--t-sm); line-height: var(--lh-ui); }

/* A key chip, not a button: it is telling you what to press, not offering to be pressed. */
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  background: var(--panel-3);
  border: 1px solid #2f2f36;
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font: var(--t-xs) var(--mono);
  text-align: center;
}

.kb-hint { color: var(--ink-faint); font-size: var(--t-xs); }
/* .btn.danger is the system's, in controls.css - stated once with the rest of the roles. */

/* ---------------------------------------------------- select instrument */

/* The reference's search-dialog grammar: headline search, one row of venue pills, flat list.
   The permanent left sidebar - twelve names in a column - is gone; the owner called it what it
   was. */
.ip-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ip-searchwrap { margin: 12px 14px 8px; }

/* Eleven venues in a seven-hundred-pixel window is more strip than there is room for, so it
   scrolls - and SAYS so, by fading its last few pixels rather than guillotining a name. The
   window's right edge cut "Coinbase" to "Coin" mid-word, which reads as a layout that has broken
   rather than as a strip with more on it. Same answer the drawer's category strip already
   uses, for the same reason. */
.ip-pills {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.ip-pills::-webkit-scrollbar { display: none; }
/* The venue filters in the instrument search. They were capsules, which is the reference's own
   shape for them - but they are FILTERS, the same job the chips in every dialog next door do, and
   two shapes for one job across two windows is exactly the inconsistency this system exists to
   end. They take the field, the latch and the radius every other filter takes. */
.ip-pill { flex: 0 0 auto; }
.ip-pill.soon { color: var(--ink-faint); }
.ip-fav.on { color: #d0a05a; }
.ip-fav.on svg { fill: currentColor; }

.ip-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.ip-tabs {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.ip-tab {
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font: var(--w-regular) var(--t-sm)/var(--lh-tight) var(--ui);
  letter-spacing: var(--tr-none);
  cursor: pointer;
}
.ip-tab:hover { color: var(--ink-dim); }
/* The selected tab gains WEIGHT as well as ink. Colour alone moved a class filter from grey to
   white and left it the same shape, so on a row of six the eye had to compare six greys to find
   the live one. Weight is read before colour is. */
.ip-tab.on { color: var(--ink); font-weight: var(--w-medium); border-bottom-color: var(--accent, #d0a05a); }

.ip-cols {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  overflow: auto;
  padding: 8px 4px 12px;
}
.ip-col { flex: 1 1 0; min-width: 168px; padding: 0 8px; }
/* The venue named inside an empty class tab. It is a destination inside this window, not a link
   off the site, so it wears the in-app convention: the sentence's own colour, brightening and
   underlining under the pointer, rather than the blue that means "you are leaving". */
.ip-goto {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-dim);
  cursor: pointer;
}
.ip-goto:hover { color: var(--ink); text-decoration: underline; }
/* A column head is a CATEGORY, not a peer of the rows under it.
 *
 * This was 13px/600 in full ink - the same size, the same weight and the same colour as the
 * symbols beneath it, so "Inverse USD" and "BTCUSD" were typographically the same object and the
 * list had no top. That is most of what "looks generated" means in practice: not an ugly glyph,
 * but two different jobs set in one style because nobody decided which was which.
 *
 * Small, tracked, uppercase, faint. It stops competing with the data and starts labelling it. */
.ip-colhead {
  padding: 4px 6px 9px;
}
/* The continuation of a column head, drawn for its height and not for its text: the label names
   the block once, and every column in the block starts on the same line. */
.ip-colhead-echo { visibility: hidden; }
/* The builder dex, shown only on a ticker that two of them list. It is a qualifier on the name,
   so it is set smaller and fainter than the name and sits directly after it. */
.ip-dex {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-micro);
  color: var(--ink-faint);
  text-transform: lowercase;
}

.ip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--r);
  cursor: pointer;
}
.ip-row:hover .ip-sym { color: var(--ink); }
.ip-row.on { background: var(--sel); }
.ip-row.on .ip-sym { color: var(--ink); }
/* The same control as the indicators list's star, so the same size. At sixteen against that
   list's twenty-four it was a smaller target for the same job in the window next door. */
.ip-star {
  width: var(--c-sm);
  height: var(--c-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.ip-star:hover { color: var(--ink); }
.ip-star.on { color: #d0a05a; }
/* A star just tapped pops - scale up, settle - the same tactile beat the watchlist's price
   flash keeps. Keyed to the .pop class the picker puts on the fresh node after its repaint. */
@keyframes ipStarPop { 40% { transform: scale(1.35); } }
.ip-star.pop svg { animation: ipStarPop 160ms ease; }
/* THE TICKER.
 *
 * This asked for `--mono`, which the shipping appearance defines as the UI face - so the symbol
 * was set in the interface font at the interface's heaviest weight with a fraction of a pixel of
 * tracking, which is to say in nothing at all. Six capitals at 600 with no join is a wall: the
 * eye cannot see where BTC stops and USDT starts, and three rows of it read as one texture.
 *
 * A ticker is a NAME, so it is set as one, in the UI face in every appearance - the toolbar's
 * monospace is for columns of digits, and an instrument's name is not a column. What it gets
 * instead is what every venue's own screen gives it: the asset in full ink, the settlement half
 * a step back, and one hair of tracking so the capitals do not touch. Medium rather than
 * semibold, because the row is already the loudest thing in the list and 600 was shouting. */
/* THE MARK, before the name. Same rule as the watchlist's: the art is its own shape, so the box
   is drawn only for the initials an asset with no art falls back to - a coin's disc set inside a
   bordered square is the double container that reads as a template rather than as a list. */
.ip-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ip-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font: var(--w-medium) var(--t-2xs)/1 var(--ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ip-mark.art .ip-initials { display: none; }
.ip-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; display: block; }
.ip-liveonly .ip-mark { opacity: .8; }

/* THE SAME WEIGHT AS EVERY OTHER LIST OF INSTRUMENTS IN THIS APPLICATION.
 *
 * The watchlist sets its rows in plain 12px and lets the mark and the numbers do the work. This
 * list set the same tickers a step heavier, so the two windows disagreed about what an instrument
 * name looks like - and a column of four hundred names in medium weight is a wall, which is the
 * thing the mark beside it exists to break. One weight, one size, one letter-spacing, everywhere
 * a symbol is listed. */
.ip-sym {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: var(--t-md);
  letter-spacing: var(--tr-ticker);
  font-variant-numeric: tabular-nums;
}
/* The halves themselves are defined once, in style.css, next to the module that fills them. What
   belongs to the LIST is that a row under the cursor, or the row you are already on, brings its
   settlement half up one step - so the ticker gets louder with the row rather than staying half
   dimmed inside a lit one. */
.ip-row:hover .tk-quote,
.ip-row.on .tk-quote { color: var(--ink-dim); }
/* Row states, wordlessly: fetchable rows carry the download glyph, live-only rows dim. */
.ip-dl { color: var(--ink-faint); display: inline-flex; }
.ip-row:hover .ip-dl { color: var(--ink-dim); }
.ip-liveonly { opacity: .45; }

@media (max-width: 640px) {
  .ip-root { flex-direction: column; }
  /* the pill row already scrolls horizontally; nothing extra to restage on a phone */
  .ip-cols { flex-direction: column; }
  /* Stacked, a column must be as tall as its rows and no taller. With the desktop flex-grow
     left on, two groups shared the window height between them - one symbol at the top, the
     next group half a screen below it, and the gap read as a list that had failed to load. */
  .ip-col { flex: 0 0 auto; min-width: 0; }
}

/* A shortcut with no handler is greyed and labelled rather than listed as if it worked. */
.kb-unbound { opacity: .42; }
.kb-or { color: var(--ink-faint); font-size: var(--t-xs); margin: 0 2px; }

/* ---------------------------------------------- keyboard reference card */

/* A REFERENCE CARD IS ONE SURFACE. It used to be six: each group sat in its own filled, bordered,
   rounded box, so the window was a card containing cards containing rows - three frames deep for
   a list of fifty-five lines. That nesting is what read as decoration rather than reference, and
   it also cost the room: the boxes' own padding and margins were roughly two hundred vertical
   pixels of nothing, which is what put a scrollbar on a card whose whole point is that it does
   not have one. A rule under each group head separates them, and separating them is all a group
   head has to do. */

.keys-root { padding: 13px 16px 9px; }

/* Columns rather than one long list: the point of a reference card is that it is taken in at a
   glance. The column WIDTH leads and the count follows it, so the card reflows to whatever the
   window is instead of insisting on three columns inside a half-screen window and clipping. */
.keys-cols {
  column-width: 232px;
  column-count: 3;
  column-gap: 24px;
}
@media (max-width: 820px) { .keys-cols { column-count: 2; } }
@media (max-width: 560px) { .keys-cols { column-count: 1; } }

.keys-group {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 13px;
}
/* The type is the micro-label's, in style.css - this rule restated it at eleven pixels in title
   case, and because this sheet loads after that one it quietly won. The card's group heads read as
   a different family from every other caption in the product for exactly that reason. */
.keys-group h3 {
  margin: 0 0 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.keys-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
/* Flush right, and last in the row - see the note in shortcuts.js. */
.keys-combo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin-left: auto;
}
.keys-label {
  color: var(--ink-dim);
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  /* A label longer than its column wraps; it does not widen the column and push a third one off
     the card. */
  flex: 0 1 auto;
  min-width: 0;
}

.keys-or { color: var(--ink-faint); font-size: var(--t-xs); font-style: normal; margin: 0 2px; }

/* A shortcut with no handler is greyed and labelled rather than listed as though it worked. A
   card that promises a key which does nothing costs someone a real attempt to use it. */
.keys-unbound { opacity: .45; }
.keys-todo {
  margin-left: auto;
  padding-right: 2px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  white-space: nowrap;
}

/* A keycap is the ONE thing in this interface allowed to look like an object, because it is not a
   control - it is a picture of a key on someone's desk, and it has to be recognisable as one. It
   tells you what to press; it does not offer to be pressed, so no hover and no travel.
   Flat ground, hairline, and a bottom edge one pixel thicker: the shortcut-card convention every
   current tool uses, and the whole of it. No gradient, no lit rim - those belonged to the raised
   button this product no longer has. */
kbd {
  display: inline-block;
  min-width: 19px;
  padding: 2px 5px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font: var(--w-medium) var(--t-sm)/1 var(--mono);
  text-align: center;
}

/* The focused panel dims its own chrome slightly less than the unfocused ones, so which chart the
   menu bar is about is legible without a coloured frame shouting about it. */
body.panel:not(.has-focus) .bar,
body.panel:not(.has-focus) .tabs { opacity: .82; }

/* A per-indicator settings window: the same shell as the chart settings window, minus the left
   nav. One indicator's panels fit across the top, so a second level of navigation would be a
   tree with one branch. */
.ind-root .set-pane { flex: 1 1 auto; min-height: 0; }
.ind-root .set-page { padding: 10px 16px 16px; }

/* --------------------------------------------------------- object tree */

/* The object tree's rules lived here, from when it was a floating window. It was rebuilt as a
   docked panel with its own stylesheet (objects.css, "scoped to .objpanel and .ot-*") and these
   were never deleted - so the newer panel inherited 48px icon buttons, a stray 2px left border
   and a 7px radius from a layout that no longer exists. */


/* ------------------------------------------------------------- templates */

.tpl-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tpl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}
.tpl-scope { color: var(--ink-dim); font-size: var(--t-sm); }
.tpl-list { flex: 1 1 auto; overflow-y: auto; padding: 5px 7px 12px; }

.tpl-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r);
}
.tpl-row:hover .tpl-name { color: var(--ink); }
.tpl-row:hover .tpl-meta { color: var(--ink-dim); }
.tpl-name { flex: 0 0 auto; color: var(--ink-dim); font-size: var(--t-md); font-weight: var(--w-medium); }
.tpl-meta {
  flex: 1 1 auto;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-family: var(--mono);
}
.tpl-apply { flex: 0 0 auto; }
.tpl-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  font: var(--t-sm) var(--mono);
  cursor: pointer;
}
.tpl-x:hover { color: var(--sell-hi); }

/* --------------------------------------------------------- indicators menu */

.im-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* The reference's search is the headline: large, rounded, magnifier set INTO the field. */
.im-searchwrap {
  position: relative;
  display: flex;
  align-items: center;
  margin: 12px 14px 10px;
}
.im-searchwrap > svg {
  position: absolute;
  left: 14px;
  color: var(--ink-faint);
  pointer-events: none;
}
/* The headline rung of the field role - see controls.css. Its own numbers were a stranger in
   every one: 38 tall where a field is 28 or 36, an 8px corner in a product whose corner is
   themed, and the panel ground where every other field is transparent. */
.im-search {
  width: 100%;
  padding: 0 12px 0 38px;
  font: var(--t-md) var(--ui);
}
/* The prompt is a PROMPT, not text somebody typed. Every other search box in this application
   says so - the settings search, the watchlist, the news wire, the alert list all set the
   placeholder in the faintest ink - and this one, which is the first field of the first dialog
   most people open, was left on the browser's default: a machine-faded copy of the input colour,
   which lands at roughly the weight of a real value. So the empty state of the instrument picker
   read as though a search were already running. */
.im-search::placeholder { color: var(--ink-faint); }
/* What you type STATES A VALUE, so it takes the value weight. */
.im-search { font-weight: var(--w-medium); }
.im-search::placeholder { font-weight: var(--w-regular); }


.im-split { display: flex; flex: 1 1 auto; min-height: 0; }

.im-side {
  flex: 0 0 156px;
  padding: 2px 8px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
/* The one word over the category rail. It had the micro-label's ink and size and neither its
   weight nor its case, which at 10px in the faintest ink is a head you cannot see. */
.im-cathead {
  padding: 6px 8px 5px;
}
/* Icon + label rows; the active one sits on a quiet pill, the reference's own nav grammar. */
.im-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  font: var(--t-lg) var(--ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.im-cat svg { color: var(--ink-faint); flex: 0 0 auto; transition: color var(--t-tap) var(--ease); }
.im-cat:hover { color: var(--ink); }
.im-cat:hover svg { color: var(--ink); }
.im-cat.on { background: var(--sel); color: var(--ink); }
.im-cat.on svg { color: var(--ink); }

.im-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 12px; }

.im-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* min-height rather than height: the row now carries a name AND the sentence describing it,
     and a fixed 38 would clip the second line rather than admit it did not fit. */
  min-height: 44px;
  padding: 5px 11px;
  border-radius: var(--r);
  cursor: pointer;
}
/* The pointer's row and the keyboard's row sit on the same quiet plate the category rail uses.
   Ink lift alone was the grammar here, and on a 34-row list it is not enough: the eye tracks the
   plate, and every reference dialog this window is modelled on highlights the whole row.
   Pointer devices only: a touch screen's "hover" is the last tap, and a plate that stays under
   the finger after a toggle reads as a selection nobody made. */
@media (hover: hover) {
  .im-row:hover { background: var(--sel); }
  .im-row:hover .im-name { color: var(--ink); }
}
.im-row.kb { background: var(--sel); }
.im-row.kb .im-name { color: var(--ink); }
/* The keyboard's row shows everything hover would - the star, the gear - or arrow-walking the
   list would land on controls the mouse can see and the keyboard cannot. */
.im-row.kb .im-star, .im-row.kb .im-gear { opacity: 1; }
.im-row.kb .im-note { color: var(--ink-dim); }
/* The star waits for the pointer, exactly like the gear - a column of stars ahead of every name
   turns a list into a control panel. A STARRED one stays visible: state is not hover. */
.im-row .im-star { opacity: 0; }
.im-row:hover .im-star, .im-row .im-star.on { opacity: 1; }
.im-tick { width: 16px; flex: 0 0 16px; color: var(--ink); font-size: var(--t-sm); }
/* The tick a click just earned arrives over the product's own interval; every other tick in the
   column is state, already settled, and draws that way. See `.pop` beside the star rules. */
.im-tick.pop svg { animation: star-in var(--t-pop) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .im-tick.pop svg { animation: none; }
}
.im-row.on .im-name { color: var(--ink); }
.im-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.im-name { color: var(--ink-dim); font-size: var(--t-md); font-weight: var(--w-medium); }
/* The sentence, in the dim ink and one step down: present when you are reading a row, quiet
   enough to disappear when you are scanning names. One line, clipped rather than wrapped, so
   thirty-four rows keep one rhythm. */
.im-note {
  color: var(--ink-faint);
  font-size: var(--t-md);
  line-height: var(--lh-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-row:hover .im-note { color: var(--ink-dim); }
/* A COLUMN, not a word that trails the sentence beside it. These are short codes - Mrk, TSize,
   FRVP - and read down the list they are an index; read ragged they are debris. Fixed width and
   right-aligned, in the figure face, so the column has one edge whatever the code is. */
.im-abbrev {
  flex: 0 0 52px;
  text-align: right;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-family: var(--mono);
}

/* the gear only invites itself when the row is under the pointer */
.im-gear,
.im-gearslot {
  width: var(--c-sm);
  flex: 0 0 auto;
}
.im-gear {
  /* The dense rung, which is what the star at the other end of the same row already stands on.
     Two trailing icon buttons in one list row at 22 and 24 is the kind of near-miss that reads as
     a row that has not been set. */
  height: var(--c-sm);
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.im-row:hover .im-gear { opacity: 1; }
.im-gear:hover { color: var(--ink); }

/* ------------------------------------------------------- colour field */

.cf { display: inline-flex; align-items: center; gap: 6px; }

.cf-swatch {
  width: 26px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  cursor: pointer;
}
.cf-swatch:hover { border-color: #4a4a52; }

/* the hex IS the control, so it gets the width and the mono face */
.cf-hex {
  width: 84px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: var(--t-sm) var(--mono);
  text-transform: lowercase;
}
.cf-hex:hover { border-color: var(--line-2); }
.cf-hex:focus { border-color: #4a4a52; outline: none; }

.cf-pop {
  position: fixed;
  z-index: var(--z-popover);
  padding: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.45);
}
.cf-grid { display: grid; grid-template-columns: repeat(6, 22px); gap: 5px; }
.cf-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #00000055;
  border-radius: var(--r);
  cursor: pointer;
}
.cf-chip.on { outline: 2px solid var(--ink); outline-offset: 1px; }

/* the native picker, demoted to one row at the bottom */
.cf-more {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: var(--t-xs);
  cursor: pointer;
}
.cf-native { width: 22px; height: 18px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; cursor: pointer; }

/* ------------------------------------------------------- native (Win32) windows
   A Win32 tool window is a HARD OBJECT: a 1px border, a solid title bar, square buttons, and no
   soft edge anywhere. Drop shadows, easing and translucency are what make a window look like it
   belongs to a web page rather than to the desktop, so under the native chrome they all go. */
[data-chrome-native] .menu,
/* The focused window's title bar takes the system accent with white text - the single strongest
   signal in the whole Win32 language for "this is the window you are typing into". */

/* Nothing eases. A native control changes state on the frame it is clicked. */

/* A selected LIST ROW is the same solid accent bar, and everything printed on it goes white -
   the symbol, the "on disk" date, the row's meta. The ink variables stay black under the light
   native chrome, so without this the chosen instrument was black-on-blue and its availability
   text green-on-blue, which is to say unreadable and invisible respectively. */
[data-chrome-native] .ip-row.on *,
[data-chrome-native] .ws-row.on *,
[data-chrome-native] .ot-row.on *,
[data-chrome-native] .dw-wrow.on *,
[data-chrome-native] .pp-item.on,

/* Menus: square, hard-bordered, and the highlight is a solid accent bar across the full row. */

/* Win32 scrollbars are square, chunky, and always visible - they are part of the frame, not an
   overlay that fades in. */

/* ---------------------------------------------------------- send feedback */

/* ---------------------------------------------- feedback (HyperDiscipline port)

   Its values, not ours: 22/600 title, a 14/500 question, fields that carry a 1px box-SHADOW ring
   rather than a border (so focus brightens the ring instead of shifting the box), 10px field radius
   against an 8px button, and the reference's own cyan send. Its copy too - "How should we reach out
   to you?", "X, Telegram, or email * (Required)", "Tell us what you think", "Thanks. We'll read
   it." - because the wording is as much of the thing as the type is. */
.fb-root { display: flex; flex-direction: column; padding: 24px 22px 22px; }
.fb-title {
  font-size: var(--t-2xl);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-tight);
  color: #e4e1e9;
  line-height: var(--lh-tight);
  margin-bottom: 18px;
}
.fb-label {
  display: block;
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  color: #e4e1e9;
  margin-bottom: 8px;
}
.fb-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: transparent;
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: var(--r-surface);
  color: #e4e1e9;
  font-size: var(--t-input-touch);
  font-family: inherit;
  outline: none;
  transition: box-shadow var(--t-pop) var(--ease);
  box-sizing: border-box;
}
.fb-input:focus { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.fb-input:disabled { opacity: .6; }
.fb-input::placeholder { color: #86868d; }
.fb-text {
  height: auto;
  min-height: 132px;
  margin-top: 14px;
  padding: 12px 14px;
  line-height: var(--lh-text);
  resize: none;
}
.fb-input + .fb-label { margin-top: 14px; }
.fb-error {
  margin-top: 10px;
  font-size: var(--t-md);
  color: #ff7a8a;
  line-height: var(--lh-text);
  text-align: center;
}
.fb-error[hidden] { display: none; }
.fb-done { padding: 16px 0 6px; }
.fb-done-title { font-size: var(--t-md); color: #e4e1e9; line-height: var(--lh-text); }
.fb-done-sub { margin-top: 6px; font-size: var(--t-sm); color: #8f8e8e; line-height: var(--lh-text); }
.btn:disabled, .btn.primary:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary:disabled:hover { background: var(--primary); border-color: var(--primary); }

/* ------------------------------------------- settings: search and the changed view

   Eight hundred and seventy-five settings. At eighty you browse a tree; at this size finding one
   control means knowing which of sixty pages its author filed it under, and no amount of grouping
   fixes that. These two views answer the two questions a settings window is actually asked -
   "where is the thing that does X", and "what have I changed". */

/* The size says what it is for. At 180 by 22 this was the SMALLEST control in a window of
   eight hundred, and it is the one that reaches all sixty pages - the rest of the strip read
   as the way around and the search as an afterthought bolted to the end of it. */
/* Box, hairline, ground and focus come from the field role in controls.css - the height, the
   corner and the focused hairline were all stated here as their own numbers, and none of the
   three agreed with the field on the row below it. What is left is what this field alone owns:
   how wide it is, and where its glyph sits. */
.set-search {
  flex: 0 0 auto;
  align-self: center;
  width: 232px;
  margin: 0 0 0 10px;
  padding: 0 10px 0 30px;
  font: var(--t-md) var(--ui);
}
.set-search::placeholder { color: var(--ink-faint); }

/* The favourite star on an indicator row. Dim until it is on, because a column of lit stars is
   a decoration and the informative state is the chosen one. */
.im-star {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t-tap) var(--ease), opacity var(--t-tap) var(--ease);
}
.im-star:hover { color: var(--ink-dim); }
.im-star.on { color: #d0a05a; }

/* the mirrored profile sits flush in the liq panel */

/* the build stamp: quiet mono id in the corner, deploy time on hover */
.sb.build { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); cursor: default; }
.sb.build:hover { color: var(--ink-dim); }

/* ------------------------------------------------------------- wallet inspector */
.wt-root { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.wt-head { display: flex; align-items: center; gap: 10px; }
.wt-addr { font-family: var(--mono); font-size: var(--t-md); color: var(--ink); }
.wt-links { margin-left: auto; display: inline-flex; gap: 12px; }
/* Off-site links wear the off-site blue, per the product's own link convention. */
.wt-link { color: #0088DD; font-size: var(--t-sm); text-decoration: none; }
.wt-link:hover { text-decoration: underline; }

/* the two rooms' tabs, in the settings window's own tab grammar */
.wt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.wt-tab {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: var(--t-sm) var(--ui);
  cursor: pointer;
}
.wt-tab:hover { color: var(--ink); }
.wt-tab.on { color: var(--ink); border-bottom-color: var(--accent, var(--ink)); }

.wt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wt-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); }
.wt-stat i { font-style: normal; color: var(--ink-faint); font-size: var(--t-xs); }
.wt-stat b { font-weight: var(--w-medium); font-size: var(--t-md); color: var(--ink); font-variant-numeric: tabular-nums; }
.wt-stat b.up { color: var(--buy-hi); }
.wt-stat b.down { color: var(--sell-hi); }

.wt-table { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.wt-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr 1fr 1fr 1.2fr;
  gap: 8px;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.wt-row:hover .wt-coin { color: var(--ink); }
.wt-cols { color: var(--ink-faint); font-size: var(--t-xs); height: 24px; border-bottom: 1px solid var(--line); border-radius: 0; }
.wt-coin { color: var(--ink); font-weight: var(--w-medium); }
/* the in-app link grammar: same ink, underline only under the pointer. Named apart from
   .wt-link, which is the header's OFF-SITE links in link-blue - two different promises. */
.wt-open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.wt-open:hover { text-decoration: underline; }
.wt-row .up { color: var(--buy-hi); }
.wt-row .down { color: var(--sell-hi); }
.wt-note { color: var(--ink-faint); font-size: var(--t-xs); line-height: var(--lh-text); }

/* the level rows' address is a button now, in the same clothes */
button.lm-addr { border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0; }
button.lm-addr:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------- ask: text / confirm / notice */
.ask-root { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ask-label { color: var(--ink-dim); font-size: var(--t-md); }
.ask-input { width: 100%; height: 30px; }
.ask-msg { color: var(--ink); font-size: var(--t-md); line-height: var(--lh-text); }

/* ------------------------------------------------------------ alert dialog

   The reference tool's layout: a label column on the left, the control on the right, and the
   destructive verb alone at the far left of the foot where it cannot be hit by someone reaching
   for Save. */

.al-root { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
/* Labels align to the TOP of their cell, not its middle. Notifications is five stacked channels,
   and a label centred against that block sits beside the third one, pointing at the wrong row. */
.al-row { display: grid; grid-template-columns: 104px 1fr; align-items: start; gap: 12px; }
.al-label { color: var(--ink-dim); font-size: var(--t-sm); line-height: var(--c-md); }
/* A label whose control is a checkbox list has no field beside it to line up with. */
.al-row:has(.al-chans) .al-label { line-height: var(--lh-text); padding-top: 2px; }
.al-cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-help { color: var(--ink-faint); font-size: var(--t-xs); line-height: var(--lh-ui); }
/* wraps the disabled add-condition button so its 'not built' tooltip stays raisable */
.al-addwrap { display: inline-block; }
.al-sep { height: 1px; background: var(--line); margin: 5px 0; }

/* Box, corner, ground and focus: the field role. Thirty was a fourth height in a product with
   three, and it set the label's line-height beside it, so both moved to the default rung. */
.al-input,
.fld-pick.al-select {
  width: 100%;
  height: var(--c-md);
  padding: 0 9px;
  font: var(--t-md) var(--ui);
}
.al-price { font-variant-numeric: tabular-nums; }
.al-bad { border-color: var(--sell-hi); }
.al-msg { height: auto; padding: 7px 9px; line-height: var(--lh-ui); resize: vertical; }

/* The condition row: the comparison pick and the price share one field row, because they are one
   sentence - "crossing 79,584.5" - and used to sit in three unlabelled stacked rows. */
.al-cond {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 8px;
  min-width: 0;
}
.al-cond .fld-pick.al-select { min-width: 0; }
/* How far the level sits from the last close, in the axis's own numbers. */
.al-dist { color: var(--ink-faint); font-size: var(--t-xs); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }

/* Custom expiry: the date field appears only when the pick says Custom. */
.al-custom { display: grid; }
.al-custom .al-input { height: var(--c-md); }

.al-chans { display: flex; flex-direction: column; gap: 9px; }
.al-chan {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 4px 8px;
  align-items: center;
  cursor: pointer;
}
/* The OS checkbox wears the ink scale, not its default blue: a browser accent inside this dialog
   is the same off-note the OS <select> was. */
.al-chan input[type='checkbox'] { accent-color: var(--ink-dim); }
.al-chan .al-help { grid-column: 2; }
.al-chan-label { color: var(--ink); font-size: var(--t-md); }
/* Channels that cannot work say why once, in one line, rather than as checkboxes that do nothing. */
.al-nobuilt { color: var(--ink-faint); font-size: var(--t-xs); line-height: var(--lh-ui); padding-top: 2px; }

.al-foot { display: flex; align-items: center; gap: 8px; width: 100%; }
.al-spacer { flex: 1 1 auto; }
/* Quiet glyph, no box: a bordered red square at the foot is exactly the chrome this product
   bans. The bin sits in the corner in faint ink and only speaks its colour under the pointer. */
.al-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color var(--t-tap) var(--ease);
}
.al-del:hover { color: var(--sell-hi); background: var(--sel); }

/* ------------------------------------------------------------ alerts manager

   One window per instrument that answers "what is armed, what fired". Rows read top-to-bottom
   like the axis (sorted by price); armed is the normal state and wears no chip, so Fired and
   Expired are the only raised things on the list - the same pointing-at-what-matters the chart's
   dimmed fired lines already do. */

.alw-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.alw-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px 10px; }
.alw-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--r);
}
.alw-row:hover { background: var(--panel-2); }
.alw-dir { color: var(--ink-faint); display: inline-flex; justify-content: center; }
.alw-main { min-width: 0; }
.alw-px { font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--ink); }
.alw-sub {
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alw-side { display: inline-flex; align-items: center; gap: 8px; }
.alw-dist { color: var(--ink-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.alw-chip {
  font-size: var(--t-xs);
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--sel);
}
/* A fired row is history, not a live level: its numbers step back like the chart's dimmed line. */
.alw-row.fired .alw-px { color: var(--ink-dim); }
.alw-row.fired .alw-dir { color: var(--accent); }
.alw-acts { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity var(--t-tap) var(--ease); }
.alw-row:hover .alw-acts, .alw-row.fired .alw-acts { opacity: 1; }
.alw-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: var(--t-xs) var(--ui);
  padding: 0 4px;
}
.alw-act:hover { color: var(--ink); background: var(--sel); }
.alw-rearm { padding: 0 8px; }
/* Empty state: teach the one thing the window does, and offer the button that does it. */
.alw-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-faint);
  padding: 24px;
  text-align: center;
}
.alw-empty-h { color: var(--ink-dim); font-size: var(--t-md); }
.alw-empty .btn { margin-top: 10px; }

/* The toolbar bell, carrying state: lit while a fired alert on this instrument is waiting to be
   dealt with, so the news is visible before any window is opened. */
#alertBtn.live .ic { color: var(--accent); }
#alertBtn.live .lbl { color: var(--ink); }


/* ------------------------------------------------- the search suggestions

   A dropdown, not a filtered page. Typing into a settings search is a request to GO somewhere,
   and a page of eight hundred rebuilt controls is a second thing to read before you can.

   Fixed rather than absolute: the tab strip it sits in is a horizontal scroll container, and a
   scroll container clips its children on both axes - inside it this would be cut off at
   twenty-nine pixels. */
.set-searchwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.set-searchicon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.set-searchwrap:focus-within .set-searchicon { color: var(--ink-dim); }

/* The clear: a quiet verb inside the field. Hover lights its ink and nothing appears behind it -
   the hover law, and a plate behind a 14px glyph inside a 28px box would fill half the field. */
.set-searchclear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}
.set-searchclear:hover { color: var(--ink); }
.set-searchclear[hidden] { display: none; }
/* The text stops clear of it, and only while it is there. */
.set-searchwrap:has(.set-searchclear:not([hidden])) .set-search { padding-right: 26px; }

/* A COLUMN, not a scroller.
 *
 * This sheet used to be one overflowing box with the keyboard hint as its last child, so the hint
 * scrolled with the results and the sheet's own max-height cut it in half: "Up and down to move,
 * Enter to op-" with the descenders sliced off, every time the list was longer than the box. A
 * footer that explains the list cannot be inside the part of the list that scrolls. */
.set-ac {
  position: fixed;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow: hidden;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface);
  /* Two shadows: a tight one that reads as the edge lifting, and a wide soft one that puts real
     distance between the sheet and the page. One alone reads as a border. */
  /* elevation and entrance come from the shared recipe in style.css */
}
.set-ac[hidden] { display: none; }
.set-ac-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@keyframes set-ac-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.set-ac-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  font: var(--t-md) var(--ui);
  text-align: left;
  cursor: pointer;
}
/* Hover and keyboard select are the SAME state, deliberately: a list where the pointer highlights
   one row and the arrow keys highlight another has two cursors in it. */
.set-ac-row.on { background: var(--panel-3); }
.set-ac-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The matched run. Marked because half these rows are found by acronym or synonym, where the
   letters typed appear nowhere in the label and the row otherwise looks like a mistake. */
.set-ac-label b { font-weight: var(--w-medium); color: var(--ink); }
.set-ac-row:not(.on) .set-ac-label { color: var(--ink-dim); }
.set-ac-where {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.set-ac-empty { padding: 10px 12px; color: var(--ink-faint); font-size: var(--t-sm); }

/* A caption over each kind of result. The sheet answers two questions at once - where do I go,
   and which control is it - and without a word over each list the order reads as arbitrary. */
.set-ac-cap {
  padding: 8px 10px 4px;
}
.set-ac-cap:first-child { padding-top: 4px; }

/* A destination reads as one: the name in full ink, because the page is the thing being named
   rather than a property of something else. */
.set-ac-row.place .set-ac-label { color: var(--ink); }

/* The two keys that drive the list, said once at the foot rather than guessed at. */
/* Pinned: it belongs to the sheet, not to the list inside it. */
.set-ac-hint {
  flex: 0 0 auto;
  padding: 7px 10px 3px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

/* Landing on the row, not merely on its page: a page can hold forty controls, and "it is
   somewhere below" is most of the problem the search exists to solve. Fades out on its own. */
.fld-found { animation: fld-found 1.4s ease-out; border-radius: var(--r); }
@keyframes fld-found {
  0%   { background: color-mix(in srgb, var(--focus) 26%, transparent); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .set-ac { animation: none; }
  .fld-found { animation: none; }
}

/* The Changed filter sits with the tabs because it IS a view of the same thing, not a control. */
/* NOT A TAB. It wears the tab class for its type and its metrics, and it is a FILTER: it does
   not take you anywhere, it changes what the page shows. As bare text at the end of the strip
   it read as a seventh tab that had been disabled. A chip that fills in when it is on says
   both things - that it is pressable, and which state it is in. */
.set-filter {
  flex: 0 0 auto;
  align-self: center;
  /* The dense control height, not a twenty-second of its own: the strip already holds a 28px
     field and 36px tabs, and a third number in the same row is what makes a strip look assembled
     rather than designed. */
  height: var(--c-sm);
  margin-right: 2px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line);
  border-radius: 999px;
  font-size: var(--t-sm);
}
.set-filter:hover { border-color: var(--line-2); color: var(--ink-dim); }
.set-filter.on {
  border-color: transparent;
  background: var(--sel);
  color: var(--ink);
}

.set-results { padding-top: 2px; }

/* A result names itself and then says where it lives. Without the address a result teaches
   nothing: found once, and still unfindable next time without searching again. */
.set-rlabel { display: block; }
.set-where {
  display: block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: var(--t-xs) var(--ui);
  text-align: left;
  cursor: pointer;
}
.set-where:hover { color: var(--accent, var(--ink)); text-decoration: underline; }

/* On a phone the search box takes the width it needs and the tab strip scrolls past it. */
[data-mobile] .set-search { width: 148px; }

/* A setting that works but has no page. Dimmed rather than hidden: it is reachable from search,
   which is better than invisible, and saying so is better than a jump button that goes nowhere. */
.set-orphan { color: var(--ink-faint); font-style: italic; cursor: default; }
.set-orphan:hover { color: var(--ink-faint); text-decoration: none; }

/* ------------------------------------------------------- liquidations panel

   What the map ADDS UP TO. The distance column is the one a bar against a price axis cannot show,
   and it is the one that decides whether a level matters today. */
.lm-root { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.lm-head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 8px; }
.lm-coin { font-size: var(--t-lg); font-weight: var(--w-semi); letter-spacing: var(--tr-ticker); color: var(--ink); }
.lm-meta { color: var(--ink-faint); font-size: var(--t-xs); }

.lm-title {
  margin: 12px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: var(--t-sm);
}

/* ---- the summary rail, one to one with the reference's own panel (his screenshots, 08-25) ---- */
.lm-hlabel {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  margin-bottom: 10px;
}
.lm-side-block + .lm-side-block { margin-top: 14px; }
.lm-side-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* The side's own colour: a long is green and a short is red, the position's direction. A row in
   the lists below takes the colour of its DISTANCE instead - see .lm-lusd. */
.lm-side { color: var(--ink); font-size: var(--t-sm); display: inline-flex; align-items: baseline; gap: 5px; }
.lm-arrow { font-style: normal; font-size: var(--t-sm); }
.lm-side.long .lm-arrow { color: var(--buy-hi); }
.lm-side.short .lm-arrow { color: var(--sell-hi); }
.lm-side-sz {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.lm-side-sub {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.lm-sbar { height: 4px; margin-top: 7px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lm-sbar i { display: block; height: 100%; border-radius: 999px; }
.lm-sbar i.long { background: var(--buy); }
.lm-sbar i.short { background: var(--sell); }

/* A section head, and NO rule under it: theirs is a line of white type over the rows it names, and
   a border there is one more horizontal line in a panel that is already a stack of them. */
.lm-sect {
  margin: 18px 0 4px;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: var(--w-semi);
}

/* One list row: address over size-at-price, notional over distance. */
.lm-lrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-tap) var(--ease);
}
.lm-lrow:hover { background: var(--sel); }
.lm-lleft { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lm-lright { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lm-lsz {
  color: var(--ink-dim);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lm-lusd { font-size: var(--t-sm); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.lm-laway { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.lm-lusd.up, .lm-laway.up { color: var(--buy-hi); }
.lm-lusd.down, .lm-laway.down { color: var(--sell-hi); }
.lm-lusd.none, .lm-laway.none { color: var(--ink-faint); }

.lm-rows { display: flex; flex-direction: column; }
/* The side panel's list: four columns on one baseline, scanned down. */
.lm-row {
  display: grid;
  /* The address column is sized to its content. At a fixed 62px the elided form - eleven mono
     characters - needed about sixty-nine, so every address in the list overran its track by a few
     pixels and sat under the column beside it. max-content is safe here because the elision is
     done before the text reaches the DOM, so the widest possible value is a known short string. */
  grid-template-columns: max-content 1fr 58px 66px;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

/* THE DRILL-DOWN ROW IS A BUTTON, and it reads as two columns rather than four: what they hold and
   where it goes on the left, what it is worth and how far away on the right. Only the six-character
   address used to be clickable - a forty-pixel target in a four-hundred-pixel row - so "click a
   level to see whose it is" ended at a row that looked inert. This is the shape of the drill-down
   it is a port of, and it is a separate class from .lm-row because the side panel's four-column
   list is a different object that happens to live next door. */
.lm-drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-tap) var(--ease);
}
.lm-drow:hover { background: var(--sel); }
.lm-rleft { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-rsize {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-rat { color: var(--ink-faint); font-weight: var(--w-regular); }
.lm-rright { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lm-row:last-child { border-bottom: 0; }
.lm-rows > .lm-drow + .lm-drow { border-top: 1px solid var(--line); border-radius: 0; }
/* An address is one token: wrapped across lines it stops looking like one. As an anchor it
   underlines on hover, the off-site link convention. */
.lm-addr {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-xs);
  white-space: nowrap;
  flex: 0 0 auto;
  text-decoration: none;
}
a.lm-addr:hover { color: var(--ink); text-decoration: underline; }
.lm-px { color: var(--ink-dim); }
/* Coloured by DIRECTION, not by side: at a glance the question is whether this level is above you
   or below you. */
/* The distance is a tinted chip, not loose text: a column of them is meant to be read straight
   down, and the tint carries the side without a second word. Long liquidations are the sell
   colour - a long being forced out IS selling - and shorts the buy colour. */
.lm-away {
  align-self: flex-end;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lm-away.up, .lm-away.short { color: var(--buy-hi); background: color-mix(in srgb, var(--buy) 14%, transparent); }
/* No mark to measure from: the column says so rather than wearing a direction it does not have. */
.lm-away.none { color: var(--ink-faint); background: transparent; }
.lm-away.down, .lm-away.long { color: var(--sell-hi); background: color-mix(in srgb, var(--sell) 14%, transparent); }
.lm-usd { text-align: right; font-weight: var(--w-medium); }
.lm-usd.long { color: var(--sell-hi); }
.lm-usd.short { color: var(--buy-hi); }

.lm-empty { color: var(--ink-faint); font-size: var(--t-sm); padding: 8px 0; line-height: var(--lh-text); }
.lm-note { margin-top: 14px; color: var(--ink-faint); font-size: var(--t-xs); line-height: var(--lh-text); }


/* ---- the drawing's settings window (lib/drawing-dialog.js) - the reference's double-click
        dialog: tabs, live-apply rows, Ok keeps, Cancel restores ---- */
.dd-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dd-tabs { display: flex; gap: 2px; padding: 4px 10px 0; border-bottom: 1px solid var(--line); }
.dd-tab {
  padding: 7px 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-dim);
  font: var(--w-semi) var(--t-md) var(--ui);
  cursor: pointer;
}
.dd-tab:hover { color: var(--ink); }
.dd-tab.on { color: var(--ink); border-bottom-color: var(--accent, var(--ink)); }
.dd-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dd-row { display: flex; align-items: center; gap: 10px; }
.dd-label { flex: 0 0 112px; white-space: nowrap; color: var(--ink-dim); font: var(--t-md) var(--ui); }
/* The same circled mark the settings window hangs a sentence on, on the same terms: it never
   reserves a line, and it sits back until the row is under the pointer. */
.dd-label .fld-why {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font: var(--w-medium) var(--t-2xs)/1 var(--ui);
  cursor: help;
  opacity: .55;
}
.dd-row:hover .dd-label .fld-why { opacity: 1; }
.dd-label .fld-why:hover { color: var(--ink); border-color: var(--ink-faint); opacity: 1; }
.dd-label .fld-why:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.dd-zone { display: inline-flex; align-items: center; gap: 6px; }
.dd-swatches { display: inline-flex; gap: 5px; }
.dd-swatch { width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.dd-swatch.on { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; }
.dd-seg {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.dd-segbtn {
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: var(--t-sm) var(--ui);
  cursor: pointer;
}
.dd-segbtn:hover { color: var(--ink); }
.dd-segbtn.on { background: var(--sel); color: var(--ink); }
.dd-stepval { min-width: 26px; text-align: center; color: var(--ink); font: var(--w-medium) var(--t-sm) var(--ui); font-variant-numeric: tabular-nums; }
.dd-text {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--ink);
  font: var(--t-md) var(--ui);
}
.dd-text:focus { outline: 0; border-color: var(--focus); }
.dd-price { width: 130px; }
/* This comment named the fault exactly - `.fld-pick` carried only its layout, so any host that
   did not dress it rendered the BROWSER'S own light grey chip - and then every host dressed it
   again by hand, which is the same drift said four times. The field role in controls.css dresses
   it once, so what is left here is what this dialog alone decides: how wide, and how dense. */
.dd-page .fld-pick {
  min-width: 148px;
  height: var(--c-sm);
  padding: 3px 6px;
  font: var(--t-sm) var(--ui);
}
/* A dash pick sits beside a checkbox and a swatch on a level's row, so it takes only the width its
   sample needs - at the field's full 148px the three controls would wrap and the row would read as
   three rows. */
.dd-page .fld-pick.dd-dashpick { min-width: 84px; }
/* A group heading inside the page: the seam between the two references' vocabularies, stated
   rather than left for the reader to infer from the row names. */
.dd-head {
  margin: 6px 0 -2px;
}
.dd-head:first-child { margin-top: 0; }
/* A row that belongs to the switch above it. Indented, not boxed: a box around four rows is a
   panel inside a panel, and the reference just indents them. */
.dd-sub .dd-label { padding-left: 14px; }
.dd-note { color: var(--ink-dim); font: var(--t-sm) var(--ui); line-height: var(--lh-text); }
/* The template button sits at the FAR LEFT of the footer, with the commit buttons pushed to the
   right - both references put it there, and it is the honest place for it: it is not a way of
   leaving the dialog, so it must not sit in the row of buttons that are. */
.dd-footgap { flex: 1 1 auto; }
.dd-tpl { display: inline-flex; align-items: center; gap: 6px; }
.dd-tpl svg { color: var(--ink-faint); }
/* The span track on a Visibility row. Narrow, because the two numbers beside it are the reading
   and this is the handle. */
.dd-visrange {
  width: 78px;
  height: 3px;
  margin: 0 2px;
  accent-color: var(--ink-dim);
  cursor: pointer;
}
.dd-foot { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }

/* Anchored-VWAP dialog rows: checkbox + fields sit together on the value side. */
.dd-bandrow { display: inline-flex; align-items: center; gap: 8px; }
.dd-visnum { width: 52px; text-align: right; }

/* ------------------------------------------------ liq map side panel (HD port)

   Ported from HyperDiscipline's LiqSidePanel: the total, ONE divided bar carrying the long/short
   balance, then the two sides as separate ranked lists. Its own `lvs-` namespace rather than the
   panel's `lm-` classes, because a modifier landing on a component class is exactly how the
   feed's PnL chip ended up laid out as a floating window. */
.lvs-msg { padding: 14px; font-size: var(--t-sm); color: var(--ink-dim); line-height: var(--lh-text); }
.lvs-head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lvs-hlabel { font-size: var(--t-sm); color: var(--ink-dim); }
.lvs-whales { font-size: var(--t-xs); color: var(--ink-faint); }
.lvs-total {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  color: var(--ink);
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.lvs-legend {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  margin: 12px 0 7px;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.lvs-lg-long { color: var(--sell-hi); }
.lvs-lg-short { color: var(--buy-hi); }
.lvs-legend b { color: var(--ink); font-weight: var(--w-medium); }
/* Long left, short right - the same hands as the map above it. */
.lvs-bar {
  display: flex;
  /* The panel is a column flex container and its content overflows it, so the default
     flex-shrink squeezed a declared 6px bar to ZERO - present in the DOM, painted nowhere. A
     fixed-height child of a flex column has to say it will not shrink. */
  flex: 0 0 6px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.lvs-bar-long { background: var(--sell-hi); transition: width 220ms ease; }
.lvs-bar-short { flex: 1; background: var(--buy-hi); }

/* ------------------------------------------------ the two sides, each with its own line

   Replaces the legend and the single divided bar above, on 2026-08-23, with the reference's own
   arrangement: per side, the size in coins, the number of positions or orders behind it, the
   dollars, and a bar measured against the HEAVIER side rather than against the total. Two bars
   that always fill the width state the same fact twice; two measured against the bigger one say
   how much heavier that side is, which is the thing the panel exists to answer. */
/* Under the headline number, in the ink of a footnote: it qualifies the figure above it rather
   than being one of its own. */
.lvs-fresh { flex: 0 0 auto; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-faint); }
.lvt { flex: 0 0 auto; margin-top: 10px; }
.lvt-side { margin-top: 9px; }
.lvt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lvt-name { font-size: var(--t-sm); color: var(--ink-dim); }
.lvt-side.long .lvt-name { color: var(--sell-hi); }
.lvt-side.short .lvt-name { color: var(--buy-hi); }
.lvt-sz {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lvt-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
/* The count is the quiet half of the line - "9,373 positions" is context for the dollars beside
   it, not a figure anyone reads on its own. */
.lvt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvt-usd { color: var(--ink-dim); }
/* A RULE, NOT A PROGRESS BAR - the same argument as the one below: a share is a length, and it
   needs no capsule, no track and no radius to be read as one. */
/* The track token, not a white wash: the light appearances invert it, and a six-per-cent white
   line on a pale ground is an invisible bar rather than an empty one. */
.lvt-bar { margin-top: 5px; height: 2px; background: var(--track); }
.lvt-fill { height: 100%; transition: width 220ms ease; }
.lvt-side.long .lvt-fill { background: var(--sell-hi); }
.lvt-side.short .lvt-fill { background: var(--buy-hi); }

/* THE LADDER: three moves, two columns, cumulative. A table, so the eye reads down a column rather
   than across a sentence - and the figures are tabular for the same reason the feed's are. */
/* THE BLOCK THAT HOLDS FULL-BLEED ROWS IS ITSELF FULL-BLEED. Its rows reach the panel's edge with
   a negative margin, which made this box eight pixels wider than the box holding it - the intent
   was real and only the row declared it, so every layout audit read the container as a leak.
   Bleeding and re-padding leaves the content column exactly where it was and says what is going
   on in the one place that was silent about it. */
.lvl { flex: 0 0 auto; margin: 0 -8px; padding: 0 8px; }
.lvl-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
/* A row that frames its own band is a control, so it says so on hover - and it is a row rather
   than a button-looking thing, because the panel is a table and a plate in the middle of one reads
   as a mistake. */
.lvl-row.opens {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  margin: 0 -8px;
  padding: 3px 8px;
  width: calc(100% + 16px);
}
.lvl-row.opens:hover { background: var(--sel); }
.lvl-head { color: var(--ink-faint); font-size: var(--t-xs); padding-bottom: 1px; }
.lvl-pct { color: var(--ink-dim); }
.lvl-up { text-align: right; color: var(--buy-hi); }
.lvl-down { text-align: right; color: var(--sell-hi); }
.lvl-head .lvl-up, .lvl-head .lvl-down { color: var(--ink-faint); }
/* A zero is a reading, so it keeps its column and its alignment - but it is not news, so it does
   not keep the direction colour that means money is sitting there. */
.lvl-up.nil, .lvl-down.nil { color: var(--ink-faint); }

/* HyperDiscipline's section head: sentence case in full ink, separated by its margin rather than
   by shouting. The uppercase micro-label that stood here belonged to a denser panel. */
.lvs-section {
  margin: 16px 0 2px;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  color: var(--ink);
}
/* The chevron takes the row's own colour, and sits on the text's baseline rather than being
   centred against a line box it does not belong to. */
/* A RULE, NOT A PROGRESS BAR. Five pixels of rounded pill in a saturated brand colour is the
   single most recognisable piece of dashboard furniture there is, and it was carrying one number -
   this side's share of the total. A share is a length; it does not need a capsule around it, a
   track behind it, or a radius. Two pixels, square ends, on a hairline of ground: the same fact,
   read the same way, without the row looking like a download in progress. */
/* The rows bleed eight pixels either side so a hover highlight reaches into the panel's padding -
   the reference's own trick. Declared on the LIST rather than left to the rows, so the bleed is
   the container's intention instead of every child overflowing it. */
.lvs-list { margin: 2px -8px 0; }
.lvs-none { margin: 8px 0 4px; font-size: var(--t-xs); color: var(--ink-faint); }
.lvs-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-tap) var(--ease);
}
.lvs-row:hover { background: rgba(255, 255, 255, 0.03); }
.lvs-left { min-width: 0; display: flex; flex-direction: column; }
.lvs-sz {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lvs-at { color: var(--ink-faint); font-weight: var(--w-regular); }
.lvs-addr { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-faint); }
.lvs-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lvs-usd { font-size: var(--t-md); font-weight: var(--w-medium); color: var(--ink); font-variant-numeric: tabular-nums; }
/* HOW FAR AWAY, AS A NUMBER, not as a badge. This was a tinted pill - padding, a radius and a
   ground mixed from the side's own colour - which is the shape a web application uses for a STATUS:
   something categorical, one of a small set, worth stopping on. This is none of those. It is a
   continuous measurement, it is on every row, and a column of forty coloured capsules is a column
   nobody can read down. The colour already says which side; the figure says how far. */
.lvs-away {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}
.lvs-away.long { color: var(--sell-hi); }
.lvs-away.short { color: var(--buy-hi); }

/* Stops have a DIRECTION, not a side: a buy stop fires as buying and is green wherever it
   appears, so .up and .down mean one colour each with no exceptions to remember. */
.lvs-away.up { color: var(--buy-hi); }
.lvs-away.down { color: var(--sell-hi); }
.lvs-more {
  display: block;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 4px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-dim);
  text-align: center;
  transition: color var(--t-tap) var(--ease);
}
.lvs-more:hover { color: var(--ink); }

/* ------------------------------------------ wallet tracker (HyperDiscipline port)

   Its values, not ours. The reference's type scale (27/600 hero, 17/500 value, 10.5/500 uppercase
   label, 11.5/400 sub), its palette (#4ade80 / #ff7a8a / #8f8e8e / rgba(255,255,255,0.06)), its
   16px row inset and its eleven-column positions grid. Matching this application's theme instead
   would produce a page that resembles the reference rather than one that IS it, and one-to-one was
   the instruction. */
.wv-root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  --hd-green: #4ade80;
  --hd-red: #ff7a8a;
  --hd-text: #e4e1e9;
  --hd-muted: #8f8e8e;
  --hd-dim: #86868d;
  --hd-border: rgba(255, 255, 255, 0.06);
  /* HD_CARD_BG in his own build (WatchedWalletPage.jsx) - the surface its KPI row, stats column
     and chart all sit on. This view carries that product's palette on purpose. */
  --hd-card: var(--panel-2);
}
/* .wv-head geometry now comes from the shared .panel-head base (panel.css). */
/* .wv-head geometry now comes from the shared .panel-head base (panel.css). */
.wv-head {
  flex: 0 0 auto;
}
.wv-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wv-addr {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-tight);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.wv-copy, .wv-ext {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--hd-muted);
  cursor: pointer;
  text-decoration: none;
}
.wv-copy:hover, .wv-ext:hover { color: var(--hd-text); }
.wv-status { margin-left: auto; font-size: var(--t-sm); color: var(--hd-dim); }

/* Four tiles across, the last right-aligned - the reference's own arrangement. */
/* ON A CARD, like everything else on his page: the KPI row, the stats column and the chart all
   sit on HD_CARD_BG with a hairline ring. Ours floated bare over the page with a divider under it,
   which is the one structural difference you see before you read a number. */
.wv-kpis {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 6px 16px 0;
  padding: 14px 20px;
  border-radius: var(--r-surface);
  background: var(--hd-card);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--hd-border);
}
.wv-kpi.right { text-align: right; }
/* type-exempt: the wallet view carries the HyperDiscipline palette on purpose - its own muted
   ink, its own border - because it is that product's surface living inside this one. Folding its
   captions into the chrome's would be the drift, not the fix. */
/* SENTENCE CASE, because his page sets them that way: "Total Value", not "TOTAL VALUE". An
   uppercased caption over a hero number is a dashboard convention this product uses for TABLE
   heads - and using it here made the leverage badge read "4.16X". */
.wv-klabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  color: var(--hd-muted);
  line-height: var(--lh-ui);
}
.wv-kpi.right .wv-klabel { justify-content: flex-end; }
/* A plain badge is quiet metadata - no pill, no border. Only the red warning keeps a chip,
   because a leverage above ten times is a signal worth colouring. */
.wv-badge { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--hd-muted); font-variant-numeric: tabular-nums; }
.wv-badge.red {
  color: #fca5a5;
  background: rgba(255, 122, 138, 0.10);
  border: 1px solid rgba(255, 122, 138, 0.30);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: var(--lh-tight);
}
.wv-kvalue {
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: #f4f3f5;
  font-variant-numeric: tabular-nums;
}
.wv-kvalue.hero { font-size: var(--t-3xl); font-weight: var(--w-semi); letter-spacing: var(--tr-tight); line-height: var(--lh-tight); color: #fff; }
.wv-ksub { margin-top: 6px; font-size: var(--t-sm); font-weight: var(--w-regular); color: var(--hd-muted); line-height: var(--lh-ui); }

.wv-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wv-initials { font-style: normal; font-size: 8px; font-weight: var(--w-semi); color: var(--ink-dim); letter-spacing: .02em; }
.wv-mark .wv-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.wv-mark.art .wv-logo { display: block; }
.wv-mark.art .wv-initials { display: none; }
.wv-asset { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wv-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  margin: 12px 16px 0;
  padding: 3px;
  background: var(--panel-2);
  border-radius: calc(var(--r) + var(--r-sm));
  align-self: flex-start;
}
.wv-tab {
  padding: 6px 14px;
  background: none;
  border: 0;
  border-radius: var(--r);
  font: inherit;
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  color: var(--hd-muted);
  cursor: pointer;
}
.wv-tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--hd-text); }
.wv-tab.on { background: rgba(255, 255, 255, 0.09); color: #fff; }

/* The body is a ROW of one table, except on the activity room, where the venue's sub-tab strip
   sits above it - so it stacks when a strip is present rather than putting the strip beside the
   table it belongs to. */
.wv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
.wv-body:has(.wv-subs) { flex-direction: column; }
.wv-table { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wv-msg { padding: 24px 16px; font-size: var(--t-md); color: var(--hd-muted); }
/* The grid is wider than most windows, so it scrolls itself rather than the page. */
.wv-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wv-inner { width: max-content; min-width: 100%; }
.wv-hrow, .wv-row {
  display: grid;
  align-items: center;
  gap: 6px;
  padding: 16px;
  border-bottom: 1px solid var(--hd-border);
}
.wv-hrow {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
}
.wv-h {
  /* type-exempt: the wallet view's own palette - see .wv-klabel above. */
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--hd-muted);
}
.wv-h.right, .wv-n.right { text-align: right; }
.wv-row { font-size: var(--t-md); color: var(--hd-text); }
.wv-row:hover { background: rgba(255, 255, 255, 0.02); }
.wv-asset { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.wv-coin { font-size: var(--t-lg); font-weight: var(--w-semi); letter-spacing: var(--tr-ticker); color: #fff; }
/* The chip that hangs off a name. It carries a DEX - the builder namespace a HIP-3 asset is
   deployed under - and a dex name is a label, so it is set as one. */
.wv-dex {
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--t-2xs);
  /* type-exempt: a chip, not a caption over a group, and in the wallet view's own palette. */
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--hd-muted);
}
/* The same chip is also used for a shortened ADDRESS, and an address is not a label. Uppercasing
   one printed `0X15A4...DFDB`: the 0x prefix is lower-case by every convention there is, and hex
   digits are conventionally lower-case too, so the board was showing a string that does not exist
   anywhere else - not on the venue, not on a block explorer, not in the clipboard when you copy
   it. Its own case, its own face: an address is the one string in this product where a fixed width
   genuinely earns itself, because it is read by its ends. */
.wv-addrchip {
  text-transform: none;
  font-family: var(--mono);
  letter-spacing: var(--tr-none);
  font-variant-numeric: tabular-nums;
}
.wv-side { font-size: var(--t-md); font-weight: var(--w-medium); }
.wv-side.long, .long { color: var(--hd-green); }
.wv-side.short, .short { color: var(--hd-red); }
.wv-val { display: flex; flex-direction: column; gap: 2px; }
.wv-val-usd { font-size: var(--t-md); font-weight: var(--w-medium); color: #fff; font-variant-numeric: tabular-nums; }
.wv-val-sz { font-size: var(--t-sm); color: var(--hd-muted); font-variant-numeric: tabular-nums; }
.wv-pnl { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
.wv-pnl.up, .up { color: var(--hd-green); }
.wv-pnl.down, .down { color: var(--hd-red); }
.wv-roe { font-size: var(--t-sm); opacity: 0.85; }
.wv-n { font-variant-numeric: tabular-nums; }
.wv-n.liq { color: #e8b14d; }
/* The level and the distance to it, stacked like the PnL cell above - one reading, two lines. */
.wv-liq { display: flex; flex-direction: column; gap: 2px; }
.wv-away { font-size: var(--t-sm); color: var(--hd-muted); }
.wv-away.near { color: var(--hd-red); }
.wv-n.dim { color: var(--hd-dim); }

/* ---- the tracker's own furniture, in the same borrowed palette ----

   The board, the star, the sortable headings and the skeleton are ours rather than the reference's
   - it has no tracked list - so they are built from the values already declared above rather than
   from a second set of colours. */
.wv-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--hd-dim);
  cursor: pointer;
  transition: color var(--t-tap) var(--ease), background var(--t-tap) var(--ease);
}
.wv-star:hover { background: rgba(255, 255, 255, 0.06); color: var(--hd-text); }
/* Tracked is a state, so it is filled rather than merely brighter: an outline that got 20% lighter
   is not an answer to "is this one on my list". */
.wv-star.on { color: #e8b14d; }

/* The tile row is the account page's furniture. On the board there are no tiles, and an empty
   grid still holds its padding - a 24px band of nothing between the header and the first row. */

/* ------------------------------------------------- the account's curve (lib/wallet-chart.js)

   Sits under the KPI tiles and over the tables, which is where HyperDiscipline puts it and the
   only place that answers how the account got to the numbers above it. The canvas draws its own
   grid, trace and amounts; everything here is the chrome around it. */
/* THE ACTIVITY LEDGER'S OWN SUB-TABS - nine views of one ledger, the strip the venue itself puts
   above that table. Quieter than the room tabs above them: these choose a slice, not a subject. */
.wv-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 16px 7px;
  border-bottom: 1px solid var(--hd-border);
}
.wv-sub {
  padding: 2px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--hd-dim);
  cursor: pointer;
  white-space: nowrap;
}
.wv-sub:hover { color: var(--hd-text); }
.wv-sub.on { color: var(--hd-text); box-shadow: inset 0 -1px 0 var(--hd-text); }

/* HIS PAGE'S SPLIT: a stats column of fixed width, the curve taking the rest. Below the width the
   card can hold its four sections legibly, the column stacks over the chart rather than squeezing
   it - which is what his own build does on a phone. */
.wv-mid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  padding: 14px 16px 4px;
  border-bottom: 1px solid var(--hd-border);
}
/* `display: grid` beats the browser's own [hidden] rule, so the row has to say it here or the
   board keeps painting an empty one. See mountBoard in wallet-view.js. */
.wv-mid[hidden] { display: none; }
@media (max-width: 860px) { .wv-mid { grid-template-columns: 1fr; } }
.wv-side-card {
  border-radius: var(--r-surface);
  background: var(--hd-card, var(--panel-2));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--hd-border);
  overflow: hidden;
}
.wv-sect { padding: 9px 16px; }
.wv-sect + .wv-sect { border-top: 1px solid var(--hd-border); }
.wv-slab { font-size: var(--t-sm); color: var(--hd-dim); margin-bottom: 5px; }
.wv-sbig {
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  color: var(--hd-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  margin-bottom: 6px;
}
.wv-sbig.long { color: var(--buy-hi); }
.wv-sbig.short { color: var(--sell-hi); }
.wv-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-sm);
}
.wv-srow + .wv-srow { margin-top: 8px; }
.wv-slabel { color: var(--hd-dim); }
.wv-sval { color: var(--hd-text); font-variant-numeric: tabular-nums; }
.wv-sval.long { color: var(--buy-hi); }
.wv-sval.short { color: var(--sell-hi); }
.wv-sval.mute { color: var(--hd-dim); }
.wv-sbar { height: 4px; margin-top: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.wv-sbar i { display: block; height: 100%; border-radius: 999px; }
.wv-sbar i.long { background: color-mix(in srgb, var(--buy) 55%, transparent); }
.wv-sbar i.short { background: color-mix(in srgb, var(--sell) 55%, transparent); }
/* The two shares as dots, then the box that paints them from both edges with the notional on it. */
.wv-shares { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.wv-share { display: inline-flex; align-items: center; gap: 4px; }
.wv-share i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.wv-share.long { color: var(--buy-hi); }
.wv-share.long i { background: var(--buy-hi); }
.wv-share.short { color: var(--sell-hi); }
.wv-share.short i { background: var(--sell-hi); }
.wv-dist {
  position: relative;
  height: 32px;
  margin-top: 6px;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px var(--hd-border);
}
.wv-dist i { position: absolute; top: 0; bottom: 0; display: block; }
.wv-dist i.long { left: 0; background: color-mix(in srgb, var(--buy) 20%, transparent); }
.wv-dist i.short { right: 0; background: color-mix(in srgb, var(--sell) 20%, transparent); }
.wv-distv {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.wv-distv.long { color: var(--buy-hi); }
.wv-distv.short { color: var(--sell-hi); }

/* The curve sits on the same card as the column beside it - his page draws both as one matched
   pair, and a bare canvas next to a carded column is the tell that one of them was added later. */
.wv-chart {
  flex: 0 0 auto;
  min-width: 0;
  padding: 14px 16px 6px;
  border-radius: var(--r-surface);
  background: var(--hd-card);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--hd-border);
}
.wv-chart[hidden] { display: none; }
/* The module mounts everything inside one root of its own, so a host can place it without
   knowing what it contains. */
.wc-root { display: block; }
/* Retired when the server has no portfolio route - see `absent` in wallet-chart.js. An author
   `display` outranks the UA's [hidden] rule, so the attribute only works if this says so. */
.wc-root[hidden] { display: none; }
.wc-bar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.wc-pills, .wc-modes { display: flex; gap: 2px; }
/* The window and the metric are the same kind of control - a place you are, not a button you
   press - so they wear the tab strip's own clothes rather than inventing a third shape. */
.wc-pill, .wc-mode {
  padding: 3px 9px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  font: var(--w-semi) var(--t-sm) var(--ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wc-pill:hover, .wc-mode:hover { color: var(--ink); }
.wc-pill.on, .wc-mode.on { background: var(--sel); color: var(--ink); }
/* The metric pair is a different question from the window, so a rule separates them rather than a
   gap - at the same gap size the six controls read as one row of six. */
.wc-modes { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
/* The headline is the number the chart exists to state, so it sits at the far end where a reader
   lands last and stays. */
.wc-headline { margin-left: auto; text-align: right; min-width: 0; }
.wc-hlabel { font: var(--t-sm) var(--ui); color: var(--ink-faint); letter-spacing: var(--tr-ticker); }
.wc-hvalue {
  font: var(--w-medium) var(--t-xl) var(--ui);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
.wc-hvalue.up { color: var(--buy-hi); }
.wc-hvalue.down { color: var(--sell-hi); }
.wc-stage { position: relative; }
.wc-canvas { display: block; width: 100%; touch-action: none; }
.wc-card {
  position: absolute;
  top: 8px;
  z-index: 2;
  padding: 6px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  pointer-events: none;
  white-space: nowrap;
}
.wc-card[hidden] { display: none; }
.wc-card-t { font: var(--t-xs) var(--ui); color: var(--ink-faint); }
.wc-card-v { font: var(--w-medium) var(--t-md) var(--ui); font-variant-numeric: tabular-nums; margin-top: 1px; }
.wc-card-v.up { color: var(--buy-hi); }
.wc-card-v.down { color: var(--sell-hi); }

@media (max-width: 640px) {
  /* The metric pair keeps its rule but loses the headline's shoulder: at this width the six
     controls and an eighteen-pixel number cannot share a line. */
  .wc-bar { flex-wrap: wrap; }
  .wc-headline { margin-left: auto; }
  .wv-chart { padding: 10px 10px 2px; }
}

.wv-kpis:empty, .wv-tabs:empty { display: none; }
/* The one text column after five numeric ones needs a gutter, or "4.36x" and "BTC long $77.18M"
   read as one run-on value. */
.wv-big { padding-left: 18px; }
/* Numbers the venue could not refresh: still readable, visibly not current. */
.wv-stale { opacity: .62; }

.wv-sortable { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.wv-h.right.wv-sortable { justify-content: flex-end; }
.wv-sortable:hover { color: var(--hd-text); }
.wv-caret { opacity: .85; }

/* A row of the board is a door, and says so under the pointer. Its template lives on the root as
   a variable because the row count is one thing and the cell's width is another - see fitBoard. */
.wv-brow, .wv-brow-h { grid-template-columns: var(--wv-board, 1fr); }
.wv-brow { cursor: pointer; }
/* Folded away rather than squeezed: the two columns that answer "how are they doing" stay at every
   width, and the ones that answer "how big" go first. */
.wv-root[data-board="mid"] .wv-brow > :nth-child(6),
.wv-root[data-board="mid"] .wv-brow-h > :nth-child(6),
.wv-root[data-board="tight"] .wv-brow > :nth-child(n+4),
.wv-root[data-board="tight"] .wv-brow-h > :nth-child(n+4) { display: none; }
.wv-brow:hover { background: rgba(255, 255, 255, 0.045); }
.wv-link { cursor: pointer; }
.wv-link:hover .wv-coin { text-decoration: underline; text-underline-offset: 3px; }

/* TP / SL is two numbers in one column, and the slash between them is punctuation rather than
   data, so it is dimmer than both. */
.wv-exits { white-space: nowrap; }
.wv-slash { color: var(--hd-dim); }

/* THE SKELETON. Bars where the numbers will be, in the widths those numbers take - a centred word
   "Loading" tells the reader to wait and then moves the whole table when the rows arrive. */
.wv-skel { pointer-events: none; }
.wv-bar {
  display: block;
  height: 10px;
  width: 62%;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  animation: wv-breathe 1.4s ease-in-out infinite;
}
.wv-skel span:nth-child(2n) .wv-bar { width: 44%; }
.wv-skel span:nth-child(3n) .wv-bar { width: 74%; }
@keyframes wv-breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}
/* A skeleton is a hint, not an animation to watch: it holds still for anyone who asked their
   system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  .wv-bar { animation: none; }
}

@media (max-width: 900px) {
  .wv-kpis { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ------------------------------------------------------------ the FPBS window
   Row slots in the nav: dragged to reorder, dimmed when off, a grip that shows under the
   pointer. The reference's own left column. */
.fp-nav .set-navitem.fp-row { position: relative; padding-left: 22px; }
.fp-nav .set-navitem.fp-row.off { color: var(--ink-faint); }
.fp-nav .set-navitem.fp-row.dragging { opacity: .45; }
.fp-nav .set-navitem.fp-row.drop-before { box-shadow: inset 0 2px 0 var(--ink-dim); }
.fp-grip {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); opacity: 0; cursor: grab;
}
.fp-nav .set-navitem.fp-row:hover .fp-grip { opacity: 1; }
.fp-rule { height: 1px; margin: 6px 0; background: var(--line); }
.fp-links { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.fp-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 2px 0;
  color: var(--ink-dim); font: var(--t-sm) var(--ui); cursor: pointer;
}
.fp-link:hover { color: var(--ink); }
.fp-link.danger { color: var(--sell-hi); }
.fp-link.danger:hover { color: var(--sell-hi); opacity: .85; }
.fld-pair { display: inline-flex; align-items: center; gap: 8px; }
.fld-why { margin-left: 10px; color: var(--ink-faint); font: var(--t-xs) var(--ui); }

/* ------------------------------------------- the selected drawing's bar, the reference's set
   Colour buttons wear their colour as a bar under the glyph; the colour pop is the palette
   grid with a custom "+" and a drawn opacity slider. */
.dw-colbtn { position: relative; flex-direction: column; gap: 2px; padding: 0 7px; }
/* The underline beneath a colour glyph states the colour AND its opacity, over the same
   checkerboard the colour control uses - so a fill at ten per cent reads as nearly nothing, which
   is what it is, rather than as a solid bar of a duller colour. */
.dw-colbar {
  position: relative;
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background-image:
    linear-gradient(45deg, #35353c 25%, transparent 25%, transparent 75%, #35353c 75%),
    linear-gradient(45deg, #35353c 25%, transparent 25%, transparent 75%, #35353c 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}
.dw-colbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1px;
  background: var(--cc-c, #fff);
  opacity: var(--cc-a, 1);
}
/* Switched off entirely: the empty rule, so a rectangle with no border does not advertise one. */
.dw-colbar.dw-coloff { background-image: none; box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.dw-colbar.dw-coloff::after { background: none; }
.dw-dashbtn { min-width: 36px; }
.dw-dashsample { display: block; width: 18px; border-top: 2px solid currentColor; }
.dw-dashsample[data-dash="Dashed"], .dw-dashsample[data-dash="dashed"] { border-top-style: dashed; }
.dw-dashsample[data-dash="Dotted"], .dw-dashsample[data-dash="dotted"] { border-top-style: dotted; }
.dw-wrow svg { flex: 0 0 auto; }

/* A BARE SHEET has no title bar: its first row is its own header (the instrument picker's
   search pill). Everything else about the sheet - rounded top, dim, spring - stays. */
.win.sheet.win-bare .win-head { display: none; }
.win.sheet.win-bare .win-body { height: 100%; }