/* The TradingView-familiar look.
 *
 * The same principle theme-familiar.css states for Exocharts: this is a THEME, not a rewrite.
 * Same layout, same controls, same positions - what changes is the palette, the radius, the
 * density and where the emphasis goes. A trained eye reads the shape of a toolbar before it reads
 * the labels, so a familiar grammar is worth more than a novel one.
 *
 * What actually distinguishes their chrome, once you stop looking at the colours:
 *
 *   - FLAT. No gradients, no raised faces, no contact shadows, no press travel. A control is text
 *     or a glyph; hover puts a quiet ground under it; active tints it with the one accent. Every
 *     skeuomorphic ingredient the base stylesheet builds - the lit rim, the darker bottom edge,
 *     the 1px translate on press - reads as a 2010 web page next to their chrome, so this theme
 *     removes all of it wholesale.
 *   - ONE ACCENT, their blue, and it is the only colour the chrome is allowed. Active tool,
 *     checked box, focused field, primary button: same blue. Everything else is grey.
 *   - STRUCTURE LINES. Toolbar, rail, status bar and axis are separated from the plot by real
 *     1px rules in one border colour. The bands are the same ground as the chart; the lines are
 *     what carry the layout. That skeleton is most of what makes their window read as an
 *     instrument rather than a page.
 *   - ONE FACE. No monospace anywhere in the chrome - their tick fields, dates and shortcut hints
 *     are all set in the UI face with tabular figures. A second family in a toolbar is noise.
 *
 * The values are ours in their grammar; the layout underneath does not change.
 */

:root[data-appearance='tv'] {
  --r: 4px;
  /* THE TIGHT CORNER, one value. This was 3px while the window furniture rounds at 2 - see "THE
     WINDOW FURNITURE IS NOT A PAGE" in style.css - which put two nearly-identical small radii in
     one appearance. A pair of corners a pixel apart is not a distinction anybody can see and is
     exactly the drift the control system's ONE RADIUS rule exists to stop, so the small corner
     and the chrome corner are the same corner. */
  --r-sm: 2px;
  --r-surface: 6px;
  /* THE THEME TUNES THE TOKEN; THE SURFACE USES IT. This appearance had written its own shadow
     twice - a window at .5 over 48px and a menu at .45 over 32px - which is two answers to "a
     surface is floating" inside one theme, and neither of them reachable from the base sheet
     that defines the other two. A tighter, deeper pair than the base is a legitimate choice for
     this grammar; having it live anywhere but here is not. */
  --elev-pop: 0 2px 4px rgba(0, 0, 0, .2), 0 8px 32px rgba(0, 0, 0, .45);
  --elev-win: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 48px rgba(0, 0, 0, .5);
  /* The product's own face, not the host platform's. See the note in style.css. */
  --ui: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ui-display: var(--ui);
  /* The chrome never uses a monospace: values are the same face with tabular figures. That is
     their grammar and it is right for a toolbar - but it is NOT a licence to set an instrument's
     name in it and call the result typography. A ticker is a name, so it is set as one, in the
     UI face with its own tracking, in every appearance; `--mono` here reaches tick fields and
     accelerators, which are columns of digits and belong in the column. */
  --mono: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* One rung larger than the base look, all the way up the scale: their chrome is roomier and
     the type carries that, so every rung moves rather than the three that used to be named. */
  --t-2xs: 10px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 18px;
  --t-2xl: 24px;
  --t-3xl: 29px;
  --h-menu: 26px;
  /* THE BANDS DO NOT TAKE THE EXTRA RUNG. Everything else in this appearance does - it is a port
     of a roomier chrome and the type carries that deliberately - but the window furniture is
     glanced at rather than read, and at 38px this toolbar was the reason the top of the window
     read as a web page. See "THE WINDOW FURNITURE IS NOT A PAGE" in style.css, which re-points
     the control tokens inside a band; these are the bands those controls stand in. */
  --h-tabs: 26px;
  --h-bar: 30px;
  --h-status: 20px;
  --accent: #2962ff;
  --accent-hover: #1e53e5;
  /* The blue-black ground, stated here as the stylesheet fallback. The chrome-theme machinery
     writes the same family inline once settings load; this is what the first frame and a fresh
     install stand on. */
  --bg: #131722;
  --panel: #131722;
  --panel-2: #1e222d;
  --panel-3: #2a2e39;
  --line: #2a2e39;
  --line-2: #363a45;
  --grid: #1c2030;
  --ink: #d1d4dc;
  --ink-dim: #9598a1;
  --ink-faint: #6a6d78;
  --sel: #2a2e39;
  --focus: #2962ff;
  /* The quiet chip ground (tab period chips and the like) - a wash, not a well. */
  --track: rgba(255, 255, 255, .06);
  /* The primary action is the accent, filled - not an inversion of the ground. */
  --primary: #2962ff;
  --primary-hover: #1e53e5;
  --primary-ink: #ffffff;
}

/* ------------------------------------------------------------------ flatness
 *
 * This is where a forty-line block used to live that un-did the base stylesheet's raised button:
 * its gradient body, its lit rim, its thick bottom edge, its contact shadow and its pixel of
 * press travel, listed control by control. It is gone because the thing it was fighting is gone -
 * controls.css defines a flat control for every appearance, so this theme has nothing to remove.
 *
 * It is worth naming what that block cost while it existed, because it is the reason this work
 * was asked for. It named the controls it flattened, and the toolbar's welded groups - the symbol
 * box and the period box, the two most-looked-at controls in the window - were not on the list.
 * So the SHIPPING look, this one, carried a lit rim and a contact shadow on exactly those two
 * boxes: a raised 2008 button sitting in the middle of an otherwise flat modern chrome. A theme
 * that has to un-do a default by name will always eventually miss one.
 *
 * A tile keeps a body here, which is not skeuomorphism: their own grammar gives a CARD a ground
 * and a hairline, and a 96px tile with no ground is simply invisible. */
:root[data-appearance='tv'] .newtab-view {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
:root[data-appearance='tv'] .newtab-view:hover { background: var(--panel-3); }
:root[data-appearance='tv'] .newtab-view.off,
:root[data-appearance='tv'] .newtab-view.off:hover {
  background: transparent;
  border: 1px dashed var(--line-2);
}

/* ------------------------------------------------------------- the toolbar */

/* The bands are the chart's own ground, separated by real rules. */
:root[data-appearance='tv'] .bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  gap: 2px;
}
:root[data-appearance='tv'] .bar-end {
  background: var(--bg);
  /* What scrolls under the pinned group fades out instead of being guillotined mid-glyph. */
  box-shadow: -14px 0 10px -6px var(--bg);
}

:root[data-appearance='tv'] .ctl { color: var(--ink-dim); }
/* The hover law again, at this appearance's specificity. `:not(.on)` is load-bearing: an
   appearance-scoped selector out-ranks the system's two-class latch, so without it hovering a
   control that is currently ON took its ground away - the state blinking off under the pointer,
   which reads as the control failing. */
:root[data-appearance='tv'] .ctl:not(.on):hover,
:root[data-appearance='tv'] .toggles button:not(.on):hover,
:root[data-appearance='tv'] .tfq:not(.on):hover {
  background: transparent;
  color: var(--ink);
}


/* The symbol button: their toolbar leads with the instrument in a plain strong face. */
:root[data-appearance='tv'] .ctl.strong {
  font-weight: var(--w-semi);
  font-size: var(--t-md);
  letter-spacing: var(--tr-ticker);
  color: var(--ink);
}


/* Values in the chrome wear the UI face, not a monospace. */
:root[data-appearance='tv'] .ctl.tiny,
:root[data-appearance='tv'] .ctl.date,
:root[data-appearance='tv'] .val,
:root[data-appearance='tv'] input.txt,
:root[data-appearance='tv'] .railtip b,
:root[data-appearance='tv'] .ctx-accel {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
:root[data-appearance='tv'] .ctl.date { width: 100px; }

/* The current period is the accent, and only the current one. */
:root[data-appearance='tv'] .tf-quick { box-shadow: none; gap: 0; border: 0; background: transparent; }
:root[data-appearance='tv'] .tfq { color: var(--ink-dim); font-weight: var(--w-regular); }
:root[data-appearance='tv'] .tfq.on {
  color: var(--accent);
  font-weight: var(--w-semi);
  background: transparent;
}


/* Indicator toggles are a set: on is ink on a quiet ground, never five accent words in a row. */
:root[data-appearance='tv'] .toggles button {
  color: var(--ink-dim);
  border-bottom: 0;
  padding: 5px 7px;
}

/* The book's control strip is a set of LATCHES, like the indicator toggles above, so it gets the
   same answer here: on is ink on a quiet ground. The flattening rule at the top of this file
   strips every control's ground in this appearance - correct for the verbs in a toolbar, wrong
   for a state, and it was silently winning over the strip's own on-rule because the two have
   identical specificity and this sheet loads second. Stated rather than fought with a specificity
   trick, which is how every other on-state in this theme is handled. */
:root[data-appearance='tv'] .ladder-bar .ctl.on {
  background: var(--panel-3);
  color: var(--ink);
  box-shadow: none;
}

/* ONE FRAME for the toolbar's control groups - the owner's words: "the box that is around the
   tick size bar, I want that for the BTCUSD and all the things at the top, so it's matching."
   The stepper's quiet outline becomes the shared treatment: symbol, timeframe row, tick. The
   VERBS (Indicators, Alert, Replay) stay text - framing every word turns a toolbar into a
   calculator; the frame marks the controls that carry a VALUE. */
/* AS TALL AS THE CONTROL INSIDE IT, from the token, not a number written beside it. This was a
   literal 26 - correct on the day --h-ctl was 26 - so when the furniture came down to 22 the three
   welded groups stayed 26 while every plain button in the same row became 22: four pixels of dead
   band above and below three values, and a row of controls at two heights. */
:root[data-appearance='tv'] .stepper,
:root[data-appearance='tv'] .sym-group,
:root[data-appearance='tv'] .tf-group { height: var(--h-ctl, 22px); }
:root[data-appearance='tv'] .sym-group { padding: 0 3px; display: inline-flex; align-items: center; }
:root[data-appearance='tv'] .tf-group { padding: 0 2px; display: inline-flex; align-items: center; }
:root[data-appearance='tv'] .sym-group .ctl,
:root[data-appearance='tv'] .tf-group .ctl { border: 0; background: transparent; }
:root[data-appearance='tv'] .stepper .ctl,
:root[data-appearance='tv'] .stepper .val {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-appearance='tv'] .stepper .ctl:hover { color: var(--ink); }
:root[data-appearance='tv'] .stepper .ctl:active { transform: none; }
:root[data-appearance='tv'] .val:focus { background: var(--panel-2); }

/* The LIVE badge: a dot and a word, not a bordered chip. */
:root[data-appearance='tv'] .live.on {
  border: 0;
  padding: 1px 4px;
  color: var(--buy-hi, #26a69a);
}

/* The dividers are real rules between GROUPS, nothing between members of a group. */
:root[data-appearance='tv'] .bar .div { width: 1px; height: 14px; background: var(--line); margin: 0 4px; }

/* ------------------------------------------------------------------ the rail */

/* The rail is not themed here. Its ramp is written once, in rail.css, in --panel / --sel /
   --line-2 - which are exactly this appearance's own three greys - so there is nothing left to
   override and no second place for the column's colours to drift out of step. */

/* ------------------------------------------------------------------- tabs */

:root[data-appearance='tv'] .tabs {
  background: var(--bg);
  /* The strip is the tab plus its seat, and nothing else: eight pixels of padding around a 24px
     pill made a 33px band to switch between two names in. Two and the pill's own 22 come to the
     token above it, which is the point of having a token. */
  padding: 2px 5px;
  gap: 2px;
}
/* ONE rule at the foot, not three. The canvas already draws its own hairline over the time axis,
   and the status bar carries a top border - a third line on the tab strip stacked three rules
   within twenty pixels, which is the "bunch of lines at the bottom" read. The strip sits on the
   bare ground between the two. */
:root[data-appearance='tv'] body.panel .tabs { border-top: 0; }
:root[data-appearance='tv'] .tab {
  color: var(--ink-dim);
  border: 0;
  /* FROM THE TOKEN, not from a number beside it. This said 24 while --h-tabs said 30 and the base
     sheet sized the same pill at --h-tabs minus 4 - so the strip's height and the height of the
     thing in it were two independent facts, and moving the band left the pill where it was. */
  height: calc(var(--h-tabs) - 4px);
}
:root[data-appearance='tv'] .tab:hover { color: var(--ink); }
/* NO WELL INSIDE A WELL - see the note on .tab-tf in style.css. The period qualifies the tab's
   name; it is not a second object sitting on the first one. */
:root[data-appearance='tv'] .tab-tf {
  background: transparent;
  color: var(--ink-faint);
}
:root[data-appearance='tv'] .tab.on .tab-tf { color: var(--ink); }

/* The viewport controls at the strip's end: flat, latched-quiet, seated flush to the corner
   behind a hairline - the reference's own arrangement, in this grammar. */
:root[data-appearance='tv'] .tabstrip-nav {
  border-left: 1px solid var(--line);
  padding: 0 4px 0 8px;
  gap: 0;
}
:root[data-appearance='tv'] .navbtn {
  color: var(--ink-dim);
  border-radius: var(--r);
}
:root[data-appearance='tv'] .navbtn:hover { color: var(--ink); background: transparent; }
:root[data-appearance='tv'] .navbtn.on {
  background: var(--panel-3);
  color: var(--ink);
  box-shadow: none;
}
:root[data-appearance='tv'] .navbtn:active { transform: none; }

/* ------------------------------------------------------------- status bar */

:root[data-appearance='tv'] .statusbar {
  background: var(--bg);
  border-top: 1px solid var(--line);
  height: var(--h-status);
}
:root[data-appearance='tv'] .sb-btn:hover { color: var(--ink); }
:root[data-appearance='tv'] .sb.dim { color: var(--ink-faint); }

/* ---------------------------------------------------------------- the windows */

:root[data-appearance='tv'] .win {
  border-radius: var(--r-surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--elev-win);
}
:root[data-appearance='tv'] .win-head {
  height: 44px;
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-tight);
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* Their settings rows are TALL and quiet: a label on the left, a control on the right, plenty of
   air, and a hairline between rows rather than a box around each. */
:root[data-appearance='tv'] .fld {
  min-height: 38px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
}
:root[data-appearance='tv'] .fld:last-child { border-bottom: 0; }

/* AND THE PROSE BETWEEN THEM STARTS WHERE THEIR LABELS DO.
 *
 * The 14px above is what insets a row's label from the hairline that runs under it - a full-bleed
 * rule with the content held in from it, which is what makes the page read as a list rather than
 * as a stack of boxes. Everything the page can hold that is NOT a row - the notes, the section
 * headings, the button strips, the "not in the tree" markers - was left at the page's own padding
 * and so began a clean fourteen pixels to the left of every label and every help line around it.
 * One paragraph out of line down the middle of a page is the fault the eye finds without being
 * able to name it. */
:root[data-appearance='tv'] .set-page > .set-note,
:root[data-appearance='tv'] .set-page > .set-head,
:root[data-appearance='tv'] .set-page > .set-btnrow,
:root[data-appearance='tv'] .set-page > .set-missing,
:root[data-appearance='tv'] .set-page > .set-source {
  padding-left: 14px;
  padding-right: 14px;
}
:root[data-appearance='tv'] .fld-label { font-size: var(--t-md); color: var(--ink); }

/* Twenty-eight is the height of a FIELD - a text box, a number, a picker. It was applied to
   every .fld-input, and a checkbox is one: sixteen pixels wide by twenty-eight tall, a tall
   thin rectangle, on every one of the eight hundred rows in this window. Nothing about it looks
   deliberate, which is most of what "cheaply built" means. */
:root[data-appearance='tv'] .fld-input:not([type='checkbox']) {
  background: transparent;
  border-color: var(--line-2);
  border-radius: var(--r);
  height: 28px;
}
/* The focused hairline is NOT restated here. This appearance sets --focus to its accent, and the
   field role draws the focused border in --focus - so an appearance saying it a second time is how
   a field ended up with two blue lines a pixel apart around it. */
:root[data-appearance='tv'] .fld-input:hover { border-color: var(--ink-faint); }
:root[data-appearance='tv'] input.txt { background: transparent; border-color: var(--line-2); }
:root[data-appearance='tv'] .search { background: transparent; border-color: var(--line-2); }

/* Checked is the accent. A grey checkbox cannot answer "is it on" from across the room. */
/* Size is NOT restated here. It comes from the base sheet on a mouse and from touch.css under a
   coarse pointer, and a theme repeating it at desktop numbers outranks both - which would have
   shrunk every checkbox on a phone from a 24px target to a 16px one. The theme says colour and
   corner; how big a target is belongs to the pointer. */
:root[data-appearance='tv'] input[type="checkbox"].fld-input {
  border-radius: var(--r-sm);
  border-color: var(--line-2);
  background: transparent;
}
:root[data-appearance='tv'] input[type="checkbox"].fld-input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
:root[data-appearance='tv'] input[type="checkbox"].fld-input:hover { border-color: var(--ink-faint); }
:root[data-appearance='tv'] input[type="checkbox"].fld-input:checked:hover { border-color: var(--accent); }
:root[data-appearance='tv'] input[type="checkbox"].fld-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

:root[data-appearance='tv'] .chip:hover { border-color: var(--ink-faint); color: var(--ink); }

:root[data-appearance='tv'] .set-tab { border-radius: var(--r) var(--r) 0 0; }
:root[data-appearance='tv'] .set-tab.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
:root[data-appearance='tv'] .set-navitem.on {
  background: var(--panel-2);
  border-left-color: var(--accent);
  color: var(--ink);
}

/* The primary action is the accent, filled - the only filled button on screen. The outline
   button's own frame, radius and height are the system's; this theme only says what its primary
   is filled with. */
:root[data-appearance='tv'] .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:root[data-appearance='tv'] .btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* The pickers: the active row is marked by the accent, not by a grey bar. */
:root[data-appearance='tv'] .symrow.on { border-left-color: var(--accent); }
:root[data-appearance='tv'] .symrow { border-radius: var(--r); }

/* ------------------------------------------------------------------- menus */

:root[data-appearance='tv'] .ctxmenu {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface);
  padding: 4px;
  box-shadow: var(--elev-pop);
}
:root[data-appearance='tv'] .ctx-item { border-radius: var(--r); min-height: 30px; }
:root[data-appearance='tv'] .ctx-item:hover { color: var(--ink); }
:root[data-appearance='tv'] .railtip {
  background: var(--panel-2);
  border-color: var(--line-2);
  border-radius: var(--r);
}

/* --------------------------------------------------------------- scrollbars */

:root[data-appearance='tv'] * { scrollbar-color: var(--line-2) transparent; }

/* ------------------------------------------------------------------- focus */

/* Same shape as the base sheet: the ring is for controls that have no border to change, and text
   entry states focus with its own hairline plus the halo the field role draws. Painting both put
   two blue lines a pixel apart around every search box in this appearance. */
:root[data-appearance='tv'] :focus-visible:not(input, select, textarea) {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
:root[data-appearance='tv'] input[type="checkbox"]:focus-visible,
:root[data-appearance='tv'] input[type="radio"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* The checkbox tick is themed ink now, and this appearance fills a checked box with its accent -
   so the tick has to stay white here or it becomes near-black on blue. */
:root[data-appearance='tv'] input[type="checkbox"].fld-input:checked::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}