/* =============================================================================
   Trader tools — shared page primitives
   -----------------------------------------------------------------------------
   Three pages sit on top of this sheet: Trade Journal (.jr-), Sizing
   (.sz-) and Playbooks (.pb-). It is deliberately a separate file from kit.css
   for two reasons.

   1. kit.css is the product-wide vocabulary — cards, badges, tables, buttons,
      stats. It has no form controls at all, because until these pages there was
      almost nothing in this app for a user to type into. The tools are the
      opposite: they are mostly input. Putting field styling here keeps the kit
      from carrying rules nine tenths of the app would never render.
   2. Modals, drawers, chips, toasts and scroll-lock are interaction furniture
      rather than content components. Keeping them out of the kit keeps the kit
      short enough to read in one sitting, which is the only reason it works.

   Nothing below restates kit.css. Where the kit already has an answer —
   .mi-card, .mi-btn, .mi-badge, .mi-table, .mi-note, .mi-stat, .mi-segmented,
   .mi-grid, .mi-section-head — the pages use the kit class and this sheet stays
   quiet. The one deliberate overlap is .mit-empty, which is a *block* empty
   state inside a card rather than the kit's centred page-level one.

   Prefix .mit-  ·  every rule scoped html[data-ui='v2'][data-v2]
   Every colour is a --v2-* token. There is no literal colour below this line.

   Contents
     1. Page frame
     2. Toolbar
     3. Form controls
     4. Range slider
     5. Switch, checkbox, radio
     6. Chips
     7. Tabs
     8. Modal
     9. Drawer
    10. Toast
    11. Data display — tables, sparklines, P&L colouring, empty state
    12. Editorial — explain callout, preview tag, disclaimer
    13. Narrow screens (720px)
    14. Reduced motion
   ========================================================================== */

/* =============================================================================
   1. PAGE FRAME
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-page {
  max-width: var(--v2-page-max);
  margin: 0 auto;
  /* The shell already supplies the outer gutter; this is only the vertical
     rhythm between the head and the first section. */
  padding-bottom: var(--v2-s9);
}

html[data-ui='v2'][data-v2] .mit-head {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-s5);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s6);
}
html[data-ui='v2'][data-v2] .mit-head-main {
  flex: 1 1 420px;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .mit-title {
  margin: 0;
  font: 600 var(--v2-t-3xl)/1.1 var(--v2-sans);
  letter-spacing: var(--v2-tighter);
  color: var(--v2-ink);
}
/* 70ch is about two and a half seconds of reading. Past that a subtitle stops
   being read at all and becomes decoration. */
html[data-ui='v2'][data-v2] .mit-sub {
  margin: var(--v2-s3) 0 0;
  max-width: 70ch;
  font: 400 var(--v2-t-lg)/1.5 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .mit-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  /* Sits on the title's optical baseline rather than the top of its box. */
  margin-top: var(--v2-s1);
}

/* A page section: heading furniture comes from .mi-section-head in the kit, so
   this is only the spacing between sections. */
html[data-ui='v2'][data-v2] .mit-section + .mit-section { margin-top: var(--v2-s7); }

/* =============================================================================
   2. TOOLBAR
   -----------------------------------------------------------------------------
   The filter/action row above a table. It wraps rather than scrolls, because a
   horizontally scrolling filter bar hides controls the user cannot know exist.
   Sticky is opt-in (--sticky): the shell already has a fixed topbar, so a
   second always-stuck row costs more vertical room than it earns on most pages.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-toolbar {
  display: flex;
  align-items: center;
  gap: var(--v2-s3);
  flex-wrap: wrap;
  padding: var(--v2-s3);
  border-radius: var(--v2-r-lg);
  background: var(--v2-surface);
  box-shadow: var(--v2-e1);
}
html[data-ui='v2'][data-v2] .mit-toolbar--sticky {
  position: sticky;
  top: var(--v2-s2);
  z-index: 4;
}
html[data-ui='v2'][data-v2] .mit-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .mit-toolbar-end { margin-left: auto; }
html[data-ui='v2'][data-v2] .mit-toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: var(--v2-line);
  flex: none;
}

/* =============================================================================
   3. FORM CONTROLS
   -----------------------------------------------------------------------------
   A field is sunk into the surface it sits on: darker fill plus an inset
   shadow, so it reads as a hole you type into rather than a raised button you
   press. Focus is the accent ring only — the fill does not change, because a
   field that changes colour on focus makes a form look like it is validating
   when it is not.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-field {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .mit-field-row {
  display: flex;
  gap: var(--v2-s3);
  flex-wrap: wrap;
  align-items: flex-end;
}
html[data-ui='v2'][data-v2] .mit-field-row > .mit-field { flex: 1 1 160px; }

html[data-ui='v2'][data-v2] .mit-label {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s2);
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
/* The live figure a label often carries — "RISK %  $250". Right-aligned so a
   column of labels stays a clean left edge. */
html[data-ui='v2'][data-v2] .mit-label-value {
  margin-left: auto;
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--v2-t-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-ink-2);
}

html[data-ui='v2'][data-v2] .mit-input,
html[data-ui='v2'][data-v2] .mit-select,
html[data-ui='v2'][data-v2] .mit-textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
  font: 400 var(--v2-t-md)/1.4 var(--v2-sans);
  color: var(--v2-ink);
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-input::placeholder,
html[data-ui='v2'][data-v2] .mit-textarea::placeholder { color: var(--v2-ink-4); }

html[data-ui='v2'][data-v2] .mit-input:hover:not(:disabled),
html[data-ui='v2'][data-v2] .mit-select:hover:not(:disabled),
html[data-ui='v2'][data-v2] .mit-textarea:hover:not(:disabled) {
  box-shadow: var(--v2-e-field), 0 0 0 1px var(--v2-line-2);
}
html[data-ui='v2'][data-v2] .mit-input:focus,
html[data-ui='v2'][data-v2] .mit-select:focus,
html[data-ui='v2'][data-v2] .mit-textarea:focus {
  outline: none;
  box-shadow: var(--v2-e-field), var(--v2-ring);
}

/* Disabled must be legible enough to read but obviously inert — ink-4 is the
   disabled tier and is never used for live copy anywhere in the product. */
html[data-ui='v2'][data-v2] .mit-input:disabled,
html[data-ui='v2'][data-v2] .mit-select:disabled,
html[data-ui='v2'][data-v2] .mit-textarea:disabled {
  color: var(--v2-ink-4);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
  cursor: not-allowed;
}
html[data-ui='v2'][data-v2] .mit-input[readonly] { color: var(--v2-ink-2); }

/* Anything a user compares down a column is mono and tabular: prices, sizes,
   percentages. type=number covers most of it; .mit-input--num is the escape
   hatch for a text input that holds a figure (a price with a thousands
   separator, say, which type=number will not accept). */
html[data-ui='v2'][data-v2] .mit-input[type='number'],
html[data-ui='v2'][data-v2] .mit-input[inputmode='decimal'],
html[data-ui='v2'][data-v2] .mit-input[inputmode='numeric'],
html[data-ui='v2'][data-v2] .mit-input--num {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--v2-t-sm);
  letter-spacing: 0;
}
/* Spinners are removed: they are the wrong affordance for a price, they steal
   12px of field width, and a stray scroll over a focused field silently
   changes a number the user is about to trade on. */
html[data-ui='v2'][data-v2] .mit-input[type='number'] { -moz-appearance: textfield; }
html[data-ui='v2'][data-v2] .mit-input[type='number']::-webkit-outer-spin-button,
html[data-ui='v2'][data-v2] .mit-input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html[data-ui='v2'][data-v2] .mit-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}
html[data-ui='v2'][data-v2] .mit-textarea--mono {
  font-family: var(--v2-mono);
  font-size: var(--v2-t-sm);
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* The select arrow is drawn with two gradient triangles rather than a data-URI
   SVG, because a data URI cannot take a --v2-* token for its fill. */
html[data-ui='v2'][data-v2] .mit-select {
  padding-right: 32px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--v2-ink-3) 50%),
    linear-gradient(135deg, var(--v2-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[data-ui='v2'][data-v2] .mit-select option {
  background: var(--v2-surface);
  color: var(--v2-ink);
}

/* ---- affixes --------------------------------------------------------------
   <span class="mit-input-affix"><span class="mit-affix">$</span>
     <input class="mit-input"></span>
   The wrapper takes over the field treatment and the inner control goes flat,
   so the $ / % / × sits inside the same sunk well as the digits. A bare text
   node instead of .mit-affix still works — the wrapper's own colour is muted. */
html[data-ui='v2'][data-v2] .mit-input-affix {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  padding: 0 12px;
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
  font: 500 var(--v2-t-sm)/1 var(--v2-mono);
  color: var(--v2-ink-3);
  transition: box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-input-affix:focus-within {
  box-shadow: var(--v2-e-field), var(--v2-ring);
}
html[data-ui='v2'][data-v2] .mit-input-affix > .mit-input,
html[data-ui='v2'][data-v2] .mit-input-affix > .mit-select {
  flex: 1 1 auto;
  padding-left: 0;
  padding-right: 0;
  background: none;
  box-shadow: none;
}
html[data-ui='v2'][data-v2] .mit-input-affix > .mit-input:focus,
html[data-ui='v2'][data-v2] .mit-input-affix > .mit-select:focus { box-shadow: none; }
html[data-ui='v2'][data-v2] .mit-affix {
  flex: none;
  color: var(--v2-ink-3);
  user-select: none;
}

/* ---- helper text ---------------------------------------------------------- */
html[data-ui='v2'][data-v2] .mit-help {
  margin: 0;
  font: 400 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
  max-width: 60ch;
}
html[data-ui='v2'][data-v2] .mit-error {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--v2-s1);
  font: 500 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-bear);
}
/* Invalid is a ring, not a fill: a red field is unreadable at 13px on dark. */
html[data-ui='v2'][data-v2] .mit-input.is-invalid,
html[data-ui='v2'][data-v2] .mit-select.is-invalid,
html[data-ui='v2'][data-v2] .mit-textarea.is-invalid {
  box-shadow: var(--v2-e-field), 0 0 0 1px var(--v2-bear);
}
html[data-ui='v2'][data-v2] .mit-input.is-invalid:focus,
html[data-ui='v2'][data-v2] .mit-select.is-invalid:focus,
html[data-ui='v2'][data-v2] .mit-textarea.is-invalid:focus {
  box-shadow: var(--v2-e-field), 0 0 0 1px var(--v2-bear), var(--v2-ring);
}

/* =============================================================================
   4. RANGE SLIDER
   -----------------------------------------------------------------------------
   Note the thumb rules are written out once per engine. A selector list that
   mixes ::-webkit-slider-thumb with ::-moz-range-thumb is thrown away whole by
   both engines, so they can never share a block.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-range {
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
html[data-ui='v2'][data-v2] .mit-range:focus { outline: none; }
html[data-ui='v2'][data-v2] .mit-range:disabled { cursor: not-allowed; opacity: 0.5; }

html[data-ui='v2'][data-v2] .mit-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
}
html[data-ui='v2'][data-v2] .mit-range::-moz-range-track {
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
}
html[data-ui='v2'][data-v2] .mit-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px; /* centres a 16px thumb on a 6px track */
  border: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-accent);
  box-shadow: var(--v2-e-btn);
  cursor: grab;
}
html[data-ui='v2'][data-v2] .mit-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-accent);
  box-shadow: var(--v2-e-btn);
  cursor: grab;
}
html[data-ui='v2'][data-v2] .mit-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .mit-range:focus-visible::-moz-range-thumb { box-shadow: var(--v2-ring); }

/* Tick labels under a slider — "0.1%" … "5%". */
html[data-ui='v2'][data-v2] .mit-range-scale {
  display: flex;
  justify-content: space-between;
  font: 400 var(--v2-t-xs)/1 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-4);
}

/* =============================================================================
   5. SWITCH, CHECKBOX, RADIO
   -----------------------------------------------------------------------------
   Styled on the bare input, so no page has to guess a wrapper structure:
   <input type="checkbox" class="mit-switch"> is enough. The same class name on
   a <label> instead lays the row out, so either markup reads correctly.

   There is no tick glyph on a checked box. A data-URI tick cannot take a
   --v2-* colour, and ::before/::after on a replaced <input> is not reliable
   across engines. A filled inset square is unambiguous and costs nothing.
   ========================================================================== */
html[data-ui='v2'][data-v2] label.mit-check,
html[data-ui='v2'][data-v2] label.mit-switch,
html[data-ui='v2'][data-v2] .mit-check-row {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s2);
  font: 400 var(--v2-t-sm)/1.4 var(--v2-sans);
  color: var(--v2-ink-2);
  cursor: pointer;
  user-select: none;
}
html[data-ui='v2'][data-v2] .mit-check-row:hover { color: var(--v2-ink); }

html[data-ui='v2'][data-v2] input.mit-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: var(--v2-r-xs);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-e-field);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] input.mit-check[type='radio'] { border-radius: var(--v2-r-pill); }
html[data-ui='v2'][data-v2] input.mit-check:checked {
  background: var(--v2-accent);
  box-shadow: inset 0 0 0 3px var(--v2-accent-ink);
}
html[data-ui='v2'][data-v2] input.mit-check:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] input.mit-check:disabled { background: var(--v2-sunk); cursor: not-allowed; }

html[data-ui='v2'][data-v2] input.mit-switch {
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: var(--v2-r-pill);
  background-color: var(--v2-sunk-2);
  /* The knob is a background layer, not a pseudo-element, for the same
     replaced-element reason as the checkbox above. Sliding it is a
     background-position transition, which every engine animates. */
  background-image: radial-gradient(circle 8px at 11px 11px, var(--v2-ink-3) 98%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  box-shadow: var(--v2-e-field);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--v2-fast) var(--v2-ease),
              background-position var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] input.mit-switch:checked {
  background-color: var(--v2-accent);
  background-image: radial-gradient(circle 8px at 11px 11px, var(--v2-accent-ink) 98%, transparent 100%);
  background-position: 16px 0;
  box-shadow: none;
}
html[data-ui='v2'][data-v2] input.mit-switch:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] input.mit-switch:disabled { cursor: not-allowed; opacity: 0.5; }

/* =============================================================================
   6. CHIPS
   -----------------------------------------------------------------------------
   Two jobs, one look: a toggle filter (.mit-chip--on when selected) and a
   removable tag (.mit-chip-x). Always a real <button>, never a styled span,
   because both jobs are clicks.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .mit-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s1);
  padding: 4px var(--v2-s3);
  border: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
  font: 550 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-chip:hover { background: var(--v2-hover); color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .mit-chip:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .mit-chip--on,
html[data-ui='v2'][data-v2] .mit-chip[aria-pressed='true'] {
  background: var(--v2-accent-soft);
  box-shadow: 0 0 0 1px var(--v2-accent-line);
  color: var(--v2-accent-text);
}
html[data-ui='v2'][data-v2] .mit-chip:disabled { opacity: 0.45; cursor: not-allowed; }
/* Static (non-interactive) chip — market/timeframe labels on a playbook card. */
html[data-ui='v2'][data-v2] .mit-chip--static { cursor: default; }
html[data-ui='v2'][data-v2] .mit-chip--static:hover { background: var(--v2-sunk); color: var(--v2-ink-2); }

html[data-ui='v2'][data-v2] .mit-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: -4px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: none;
  color: inherit;
  opacity: 0.6;
  font-size: var(--v2-t-xs);
  line-height: 1;
  cursor: pointer;
}
html[data-ui='v2'][data-v2] .mit-chip-x:hover { opacity: 1; background: var(--v2-hover-2); }
html[data-ui='v2'][data-v2] .mit-chip-x:focus-visible { outline: none; box-shadow: var(--v2-ring); }

/* =============================================================================
   7. TABS
   -----------------------------------------------------------------------------
   Underline tabs, used inside the journal composer. The underline is drawn on
   the container so the inactive tabs sit on a continuous hairline rather than
   each carrying their own.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-tabs {
  display: flex;
  gap: var(--v2-s1);
  border-bottom: 1px solid var(--v2-line);
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-ui='v2'][data-v2] .mit-tabs::-webkit-scrollbar { display: none; }
html[data-ui='v2'][data-v2] .mit-tab {
  flex: 0 0 auto;
  padding: var(--v2-s3) var(--v2-s4);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: 550 var(--v2-t-sm)/1.2 var(--v2-sans);
  color: var(--v2-ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-tab:hover { color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .mit-tab:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .mit-tab[aria-selected='true'],
html[data-ui='v2'][data-v2] .mit-tab.is-active {
  color: var(--v2-ink);
  border-bottom-color: var(--v2-accent);
}

/* =============================================================================
   8. MODAL
   -----------------------------------------------------------------------------
   Structure the JS expects:

     <div class="mit-modal-backdrop" hidden aria-hidden="true">
       <div class="mit-modal" role="dialog" aria-modal="true" aria-labelledby="…">
         <div class="mit-modal-head">…<button class="mit-modal-close">…</button></div>
         <div class="mit-modal-body">…</div>
         <div class="mit-modal-foot">…</div>
       </div>
     </div>

   [hidden] is restated with display:none because display:flex would otherwise
   beat the attribute's UA rule and the dialog would never hide.

   The scrim is a color-mix of --v2-page rather than an rgba() literal, so it
   stays a token even though it needs an alpha the palette does not carry.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--v2-s6) var(--v2-s4);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--v2-page) 78%, transparent);
  animation: mit-fade var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-modal-backdrop[hidden] { display: none; }
/* Optional explicit scrim element for pages that want the click target to be a
   sibling of the dialog rather than its parent. */
html[data-ui='v2'][data-v2] .mit-modal-veil { position: absolute; inset: 0; }

html[data-ui='v2'][data-v2] .mit-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - var(--v2-s9));
  display: flex;
  flex-direction: column;
  margin: auto;
  border-radius: var(--v2-r-xl);
  background: var(--v2-surface);
  box-shadow: var(--v2-e3);
  animation: mit-rise var(--v2-med) var(--v2-ease-out);
}
html[data-ui='v2'][data-v2] .mit-modal--wide { max-width: 980px; }
html[data-ui='v2'][data-v2] .mit-modal--narrow { max-width: 460px; }

html[data-ui='v2'][data-v2] .mit-modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-s4);
  padding: var(--v2-s5) var(--v2-s5) var(--v2-s4);
  border-bottom: 1px solid var(--v2-line);
}
html[data-ui='v2'][data-v2] .mit-modal-title {
  margin: 0;
  font: 600 var(--v2-t-xl)/1.25 var(--v2-sans);
  letter-spacing: var(--v2-tight);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .mit-modal-sub {
  margin: var(--v2-s1) 0 0;
  max-width: 64ch;
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .mit-modal-body {
  padding: var(--v2-s5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
html[data-ui='v2'][data-v2] .mit-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  padding: var(--v2-s4) var(--v2-s5);
  border-top: 1px solid var(--v2-line);
  background: var(--v2-sunk);
  border-radius: 0 0 var(--v2-r-xl) var(--v2-r-xl);
}
html[data-ui='v2'][data-v2] .mit-modal-foot .mit-foot-end { margin-left: auto; display: flex; gap: var(--v2-s2); }

html[data-ui='v2'][data-v2] .mit-modal-close {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--v2-r-sm);
  background: none;
  color: var(--v2-ink-3);
  font-size: var(--v2-t-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-modal-close:hover { background: var(--v2-hover); color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .mit-modal-close:focus-visible { outline: none; box-shadow: var(--v2-ring); }

/* Scroll lock. Applied to <body> by MITools.openModal and removed only when the
   last modal in the stack closes. */
html[data-ui='v2'][data-v2] body.mit-modal-open { overflow: hidden; }

@keyframes mit-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mit-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mit-slide-in { from { transform: translateX(100%); } to { transform: none; } }

/* =============================================================================
   9. DRAWER
   -----------------------------------------------------------------------------
   Right-side slide-over for "everything about one row". Uses the same backdrop
   element and the same MITools.openModal machinery — a drawer is a modal that
   happens to be pinned to an edge.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 14100;
  display: flex;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--v2-page) 68%, transparent);
  animation: mit-fade var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mit-drawer-backdrop[hidden] { display: none; }

html[data-ui='v2'][data-v2] .mit-drawer {
  position: relative;
  width: min(560px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  box-shadow: var(--v2-e3);
  animation: mit-slide-in var(--v2-med) var(--v2-ease-out);
}
html[data-ui='v2'][data-v2] .mit-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-s4);
  padding: var(--v2-s5);
  border-bottom: 1px solid var(--v2-line);
}
html[data-ui='v2'][data-v2] .mit-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--v2-s5);
}
html[data-ui='v2'][data-v2] .mit-drawer-foot {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  padding: var(--v2-s4) var(--v2-s5);
  border-top: 1px solid var(--v2-line);
  background: var(--v2-sunk);
}

/* =============================================================================
   10. TOAST
   -----------------------------------------------------------------------------
   One host is appended to <body> on first use and holds a polite live region,
   so a confirmation is announced without stealing focus.
   ========================================================================== */
html[data-ui='v2'][data-v2] .mit-toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--v2-s6);
  transform: translateX(-50%);
  z-index: 14500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-s2);
  pointer-events: none;
  max-width: min(560px, calc(100vw - var(--v2-s6)));
}
html[data-ui='v2'][data-v2] .mit-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface);
  box-shadow: var(--v2-e3);
  font: 500 var(--v2-t-sm)/1.4 var(--v2-sans);
  color: var(--v2-ink);
  animation: mit-rise var(--v2-med) var(--v2-ease-out);
}
html[data-ui='v2'][data-v2] .mit-toast::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-3);
  flex: none;
}
html[data-ui='v2'][data-v2] .mit-toast--ok::before { background: var(--v2-bull); }
html[data-ui='v2'][data-v2] .mit-toast--warn::before { background: var(--v2-warn); }
html[data-ui='v2'][data-v2] .mit-toast--bear::before { background: var(--v2-bear); }
html[data-ui='v2'][data-v2] .mit-toast.is-leaving { opacity: 0; transition: opacity var(--v2-med) var(--v2-ease); }

/* =============================================================================
   11. DATA DISPLAY
   ========================================================================== */
/* Any table wide enough to overflow scrolls inside its own box. The page body
   must never scroll sideways — that is what makes a dashboard feel broken. */
html[data-ui='v2'][data-v2] .mit-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--v2-r-md);
}
html[data-ui='v2'][data-v2] .mit-table-wrap > table { min-width: 640px; }

/* Sortable header: the caret is a text node the JS swaps, so it needs no icon
   font and reads correctly to a screen reader through aria-sort. */
html[data-ui='v2'][data-v2] .mit-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .mit-sort-btn:hover { color: var(--v2-ink-2); }
html[data-ui='v2'][data-v2] .mit-sort-btn:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .mit-sort-caret { color: var(--v2-accent-text); font-size: 9px; }

html[data-ui='v2'][data-v2] .mit-spark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* P&L colouring. Green is profit, red is loss, and neither is ever used for
   chrome — a flat figure stays ink so a column of zeros does not shout. */
html[data-ui='v2'][data-v2] .mit-num-pos,
html[data-ui='v2'][data-v2] .mit-num-neg,
html[data-ui='v2'][data-v2] .mit-num-flat {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
}
html[data-ui='v2'][data-v2] .mit-num-pos { color: var(--v2-bull); }
html[data-ui='v2'][data-v2] .mit-num-neg { color: var(--v2-bear); }
html[data-ui='v2'][data-v2] .mit-num-flat { color: var(--v2-ink-3); }

/* Block empty state — sits inside a card where the kit's page-level .mi-empty
   would be too tall and too centred. */
html[data-ui='v2'][data-v2] .mit-empty {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  padding: var(--v2-s6);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .mit-empty-title {
  font: 550 var(--v2-t-md)/1.4 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .mit-empty-actions {
  display: flex;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  margin-top: var(--v2-s2);
}

/* =============================================================================
   12. EDITORIAL
   ========================================================================== */
/* "Why this matters" — a quiet card with an accent rule down the left. Used
   heavily on the sizing page, where every number needs a sentence next to it
   or it is just arithmetic. */
html[data-ui='v2'][data-v2] .mit-explain {
  padding: var(--v2-s4) var(--v2-s5);
  border-left: 2px solid var(--v2-accent-line);
  border-radius: 0 var(--v2-r-md) var(--v2-r-md) 0;
  background: var(--v2-sunk);
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
  max-width: 76ch;
}
html[data-ui='v2'][data-v2] .mit-explain-title {
  display: block;
  margin-bottom: var(--v2-s1);
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .mit-explain p { margin: 0 0 var(--v2-s2); }
html[data-ui='v2'][data-v2] .mit-explain p:last-child { margin-bottom: 0; }
/* The one-sentence "so do this" line every education card ends on. */
html[data-ui='v2'][data-v2] .mit-explain-do {
  display: block;
  margin-top: var(--v2-s3);
  font-weight: 550;
  color: var(--v2-ink);
}

/* Marks a step that is a front-end simulation of work a model does later.
   Amber because it is a caution, not an error and not a feature badge. */
html[data-ui='v2'][data-v2] .mit-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s1);
  padding: 2px var(--v2-s2);
  border-radius: var(--v2-r-xs);
  background: var(--v2-warn-soft);
  color: var(--v2-warn);
  font: 600 var(--v2-t-xs)/1.5 var(--v2-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

html[data-ui='v2'][data-v2] .mit-disclaimer {
  margin: var(--v2-s7) 0 0;
  max-width: 80ch;
  font: 400 var(--v2-t-xs)/1.6 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .mit-disclaimer strong { color: var(--v2-ink-2); font-weight: 600; }

/* Screen-reader-only text, for the labels an icon-only control still needs. */
html[data-ui='v2'][data-v2] .mit-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   13. NARROW SCREENS
   -----------------------------------------------------------------------------
   One column below 720px, full-bleed dialogs, and nothing that can push the
   page sideways.
   ========================================================================== */
@media (max-width: 720px) {
  html[data-ui='v2'][data-v2] .mit-title { font-size: var(--v2-t-2xl); }
  html[data-ui='v2'][data-v2] .mit-sub { font-size: var(--v2-t-md); }
  html[data-ui='v2'][data-v2] .mit-head { gap: var(--v2-s4); }
  html[data-ui='v2'][data-v2] .mit-head-main { flex: 1 1 100%; }
  html[data-ui='v2'][data-v2] .mit-head-actions { width: 100%; }
  html[data-ui='v2'][data-v2] .mit-head-actions > .mi-btn { flex: 1 1 auto; }

  html[data-ui='v2'][data-v2] .mit-toolbar { padding: var(--v2-s3) var(--v2-s3); }
  html[data-ui='v2'][data-v2] .mit-toolbar--sticky { position: static; }
  html[data-ui='v2'][data-v2] .mit-toolbar-end { margin-left: 0; }
  html[data-ui='v2'][data-v2] .mit-toolbar-sep { display: none; }

  html[data-ui='v2'][data-v2] .mit-field-row { flex-direction: column; align-items: stretch; }
  html[data-ui='v2'][data-v2] .mit-field-row > .mit-field { flex: 1 1 auto; width: 100%; }

  /* Any grid a tool page sets up with --mit-cols collapses to one column. */
  html[data-ui='v2'][data-v2] .mit-cols { grid-template-columns: minmax(0, 1fr) !important; }

  html[data-ui='v2'][data-v2] .mit-modal-backdrop { padding: 0; align-items: stretch; }
  html[data-ui='v2'][data-v2] .mit-modal {
    max-width: none;
    max-height: 100%;
    min-height: 100%;
    border-radius: 0;
    margin: 0;
  }
  html[data-ui='v2'][data-v2] .mit-modal-foot { border-radius: 0; }
  html[data-ui='v2'][data-v2] .mit-drawer { width: 100%; }

  html[data-ui='v2'][data-v2] .mit-toast-host {
    left: var(--v2-s3);
    right: var(--v2-s3);
    transform: none;
    max-width: none;
  }
  html[data-ui='v2'][data-v2] .mit-toast { width: 100%; }
}

/* A grid helper the pages opt into, so section 13 has something to collapse
   without every page inventing its own breakpoint. */
html[data-ui='v2'][data-v2] .mit-cols {
  display: grid;
  gap: var(--v2-s4);
  grid-template-columns: repeat(var(--mit-cols, 2), minmax(0, 1fr));
}

/* =============================================================================
   14. REDUCED MOTION
   -----------------------------------------------------------------------------
   Dialogs and toasts still appear and disappear; they just stop moving.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-ui='v2'][data-v2] .mit-modal-backdrop,
  html[data-ui='v2'][data-v2] .mit-drawer-backdrop,
  html[data-ui='v2'][data-v2] .mit-modal,
  html[data-ui='v2'][data-v2] .mit-drawer,
  html[data-ui='v2'][data-v2] .mit-toast { animation: none; }

  html[data-ui='v2'][data-v2] .mit-input,
  html[data-ui='v2'][data-v2] .mit-select,
  html[data-ui='v2'][data-v2] .mit-textarea,
  html[data-ui='v2'][data-v2] .mit-input-affix,
  html[data-ui='v2'][data-v2] .mit-chip,
  html[data-ui='v2'][data-v2] .mit-tab,
  html[data-ui='v2'][data-v2] .mit-modal-close,
  html[data-ui='v2'][data-v2] .mit-toast.is-leaving,
  html[data-ui='v2'][data-v2] input.mit-check,
  html[data-ui='v2'][data-v2] input.mit-switch { transition: none; }
}