/* Direction D (light): applied over the per-page stylesheets, which Dash loads before this one (alphabetical order). Colours and fonts come from 00_tokens.css. */

/* chrome */
.app { font-family:var(--rv-font); color:var(--rv-ink); background:var(--rv-paper); padding:var(--rv-pad); }
.nav-brand { font:600 17px/1 var(--rv-font); letter-spacing:-.01em; text-shadow:none; }
.nav-menu { border:1px solid var(--rv-ink); border-bottom-width:2px; border-radius:0; box-shadow:none; min-width:220px; padding:0; }
.nav-menu a { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:0 12px;
              font:600 14px var(--rv-font); color:var(--rv-ink); border-bottom:1px solid var(--rv-rule-soft); }
.nav-menu a:hover { background:var(--rv-wash); }
.nav-menu a.nav-current { background:var(--rv-ink); color:var(--rv-paper); font-weight:600; }
.nav-menu a.nav-current::before { content:'▶ '; white-space:pre; }

.status { font:400 11px/1.4 var(--rv-mono); color:var(--rv-mute); }
.refresh-box button { min-height:var(--rv-tap); }

.field-label { font:500 10.5px/1.2 var(--rv-font); letter-spacing:.08em; text-transform:uppercase; color:var(--rv-mute); }
.hint, .info { font:400 12px/1.4 var(--rv-font); color:var(--rv-mute); }
.tag { font:500 10px/1.5 var(--rv-mono); border:1px solid var(--rv-rule); border-radius:0; background:var(--rv-paper); color:var(--rv-mute); padding:0 5px; }

/* controls */
.dash-dropdown-trigger { min-height:var(--rv-tap); border:1px solid var(--rv-ink); border-radius:0; background:var(--rv-paper);
                         font:500 13px var(--rv-font); box-shadow:none; }
.dash-dropdown-trigger:focus-visible { outline:2px solid var(--rv-ink); outline-offset:2px; }
.dash-dropdown-content { border:1px solid var(--rv-ink); border-radius:0; box-shadow:none; background:var(--rv-paper); }
.dash-dropdown-option { min-height:var(--rv-tap); font:400 13px var(--rv-font); }
.dash-dropdown-option:hover, .dash-dropdown-option[data-highlighted] { background:var(--rv-wash); }
.dash-dropdown-value-item { border:0; border-radius:0; background:transparent; font:500 13px var(--rv-font); }
.dash-dropdown-search { font:400 13px var(--rv-font); }
.tk-input, .su-num, .su-name, .su-share-link, .dash-input-element { border:1px solid var(--rv-ink); border-radius:0; min-height:var(--rv-tap); padding:0 10px;
                                                    font:400 13px var(--rv-mono); background:var(--rv-paper); box-sizing:border-box; }
.app input[type=checkbox], .app input[type=radio] { accent-color:var(--rv-ink); }

.app button { font:500 13px var(--rv-font); border:1px solid var(--rv-ink); border-radius:0; background:var(--rv-paper); color:var(--rv-ink); }
.app button:hover:not(:disabled) { background:var(--rv-wash); }
.app button:disabled { opacity:1; color:var(--rv-faint); border-color:var(--rv-rule); cursor:progress; }
.app button.rv-primary { background:var(--rv-ink); color:var(--rv-paper); }
.app button.rv-primary:hover:not(:disabled) { background:#333; }
.app button.rv-primary:disabled { background:var(--rv-wash); color:var(--rv-mute); }  /* "Refreshing…": dark text on the light fill (the white of .rv-primary would vanish) */
.su-tools button, .su-del { min-height:32px; padding:0 10px; }
.help-close { font:500 13px var(--rv-font); border:1px solid var(--rv-ink); border-radius:0; background:var(--rv-paper); color:var(--rv-ink); }
.help-close:hover { background:var(--rv-wash); }
.app :focus-visible, .nav summary:focus-visible { outline:2px solid var(--rv-ink); border-radius:0; }

/* tabs */
.tk-tabs { border-top:1px solid var(--rv-ink); border-bottom:1px solid var(--rv-rule-soft); }
.tk-tabs .tk-tab { padding:0 14px !important; min-height:var(--rv-tap); font:500 14px var(--rv-font); color:var(--rv-mute); }
.tk-tabs .tk-tab--on { color:var(--rv-ink) !important; font-weight:600; border-bottom:2px solid var(--rv-ink) !important; }
@media (max-width:700px) {
  .tk-tabs .tab-parent, .tk-tabs .tab-container { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .tk-tabs .tk-tab { flex:none; }
}

/* headline tiles */
.tk-kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:0;
           border-top:1px solid var(--rv-ink); border-left:1px solid var(--rv-ink); margin:14px 0 4px; }
.tk-kpi { border:0; border-right:1px solid var(--rv-ink); border-bottom:1px solid var(--rv-ink); border-radius:0; background:var(--rv-paper); padding:10px 12px; }
.tk-kpi-label { font:500 10.5px var(--rv-font); letter-spacing:.08em; text-transform:uppercase; color:var(--rv-mute); }
.tk-kpi-value { font:500 20px/1.2 var(--rv-mono); color:var(--rv-ink); }
.tk-kpi-sub   { font:400 11px/1.4 var(--rv-mono); color:var(--rv-mute); }
@media (max-width:700px) { .tk-kpis { grid-template-columns:1fr 1fr; } .tk-kpi-value { font-size:18px; } }
.tk-title { font-family:var(--rv-font); }
.tk-h2, .tk-h, .tk-sub { font-family:var(--rv-font); }

/* notices */
.notice, .su-descriptive { border:1px solid var(--rv-ink); border-left:6px solid var(--rv-ink); border-radius:0; background:var(--rv-paper);
                           color:var(--rv-ink); font:400 12px/1.45 var(--rv-font); padding:8px 12px; }
.notice.stale { border-left-color:var(--rv-down); }

/* chips and help */
.tk-chip, .mx-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--rv-ink) !important; border-radius:0; background:var(--rv-paper);
                     color:var(--rv-ink) !important; font:500 11px/16px var(--rv-font); padding:0 7px; }
.rv-g.up { color:var(--rv-up); }  .rv-g.down { color:var(--rv-down); }  .rv-g.faint { color:var(--rv-faint); }
.help-btn, .xh-help { width:24px; height:24px; line-height:22px; border:1px solid var(--rv-ink); border-radius:0; background:var(--rv-paper);
                      color:var(--rv-ink); font:500 12px var(--rv-mono); box-sizing:border-box; }
.help-btn:hover, .xh-help:hover { background:var(--rv-ink); color:var(--rv-paper); }
.xh-doc { background:var(--rv-wash); border-left:2px solid var(--rv-ink); font:400 12px/1.5 var(--rv-font); color:var(--rv-ink); }
.xh-doc h4 { font:600 12px var(--rv-font); color:var(--rv-ink); }
.xh-modal .xh-doc { border:1px solid var(--rv-ink); border-radius:0; box-shadow:none; background:var(--rv-paper); }
@media (max-width:700px) {
  .xh-modal { align-items:flex-end; }
  .xh-modal .xh-doc { width:100%; max-width:none; max-height:70vh; border-width:2px 0 0; padding-bottom:calc(14px + env(safe-area-inset-bottom)); box-sizing:border-box; }
}
@media (pointer:coarse) { .help-btn, .xh-help { width:32px; height:32px; line-height:30px; } }

/* loading and empty states */
.rv-runner { width:96px; image-rendering:auto; }
.tk-kpis-load .rv-runner { width:54px; }
.rv-load { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px; border:1px solid var(--rv-ink); background:var(--rv-paper); }
.tk-kpis-load .rv-load { padding:8px; flex-direction:row; }
.rv-load-label { font:400 10.5px var(--rv-mono); color:var(--rv-mute); }
.su-none, .mx-none, .tk-pending:not(:has(*)) { background-image:radial-gradient(#cfcfcf 1px, transparent 1px); background-size:8px 8px; background-repeat:repeat;
    border:1px solid var(--rv-ink); padding:60px 16px 24px; text-align:center; color:var(--rv-ink); font:600 15px var(--rv-font); position:relative; }
.su-none::before, .mx-none::before { content:''; position:absolute; top:10px; left:50%; width:64px; height:44px; transform:translateX(-50%);
    background:url('/assets/platypus.svg') center/contain no-repeat; }

/* tables (the HTML ones; DataTables take theirs from apps/rv_table.py) */
.tk-table, .su-sum-table { font:400 12px/1.4 var(--rv-mono); }
.tk-table th, .su-sum-table th { font:600 10.5px var(--rv-font); letter-spacing:.06em; text-transform:uppercase; color:var(--rv-ink);
                                               background:var(--rv-paper); border-top:2px solid var(--rv-ink); border-bottom:1px solid var(--rv-ink); }
.tk-table td, .su-sum-table td { border-bottom:1px solid var(--rv-rule-soft); }
.tk-table a { color:var(--rv-ink); }
.mx-scroll { border:1px solid var(--rv-ink); border-radius:0; }
.su-up { color:var(--rv-up); } .su-down { color:var(--rv-down); }
.mx { font-family:var(--rv-font); }
.mx-cell, .mx-empty, .mx-chip { border-radius:0; border-color:var(--rv-rule); }
.tk-kpi, .tk-table { font-variant-numeric:tabular-nums; }
.dash-table-container td, .dash-table-container th { height:34px; }
.dash-table-container .dash-filter input { height:26px; border:1px solid #bdbdbd; border-radius:0; background:var(--rv-paper); font:400 11px var(--rv-mono); }
.dash-table-container .dash-filter input::placeholder { color:#767676; }
.dash-table-container .dash-cell-value a { color:var(--rv-ink); text-decoration:none; } .dash-table-container .dash-cell-value a:hover { text-decoration:underline; }
.dash-table-container .previous-next-container button, .dash-table-container .page-number button { min-width:var(--rv-tap); min-height:var(--rv-tap); border:1px solid var(--rv-ink); border-radius:0; }
@media (pointer:coarse) { .dash-table-container td, .dash-table-container th { height:var(--rv-tap); } .dash-table-container .dash-filter input { height:36px; } }

/* chart chrome */
.xh-label { background:var(--rv-ink); border-radius:0; font:500 10.5px var(--rv-mono); }
.xh-head { font:400 11px/18px var(--rv-mono); }
.xh-head .xh-title { font:600 10.5px var(--rv-font); letter-spacing:.08em; text-transform:uppercase; color:var(--rv-mute); }
.xh-head .xh-item { border:1px solid var(--rv-ink); padding:0 6px; background:var(--rv-paper); color:var(--rv-ink) !important; }
.xh-head .xh-off { opacity:1; border-color:var(--rv-rule); color:var(--rv-faint) !important; text-decoration:line-through; }
.xh-head .xh-cat { background:var(--rv-paper); color:var(--rv-ink); border:1px solid var(--rv-ink); border-radius:0; }
.xh-sticky { background:var(--rv-paper); border-bottom:1px solid var(--rv-ink); font-family:var(--rv-mono); }
@media (pointer:coarse) { .modebar-container { display:none !important; } }

/* settings: always open on a wide screen (the bar is hidden); a folding bar on a phone */
.rv-settings > .rv-settings-bar { display:none; }
@media (max-width:700px) {
  .rv-settings > .rv-settings-bar { display:flex; align-items:center; justify-content:space-between; min-height:var(--rv-tap); cursor:pointer; list-style:none;
                                    border-top:1px solid var(--rv-ink); border-bottom:1px solid var(--rv-rule-soft); font:600 14px var(--rv-font); }
  .rv-settings > .rv-settings-bar::-webkit-details-marker { display:none; }
  .rv-settings > .rv-settings-bar::after { content:'+'; font:500 16px var(--rv-mono); }
  .rv-settings[open] > .rv-settings-bar::after { content:'−'; }
}
.dash-dropdown-trigger .dash-input-element, .dash-dropdown-trigger input, .dash-dropdown-search, .dash-dropdown-content input { border:0 !important; min-height:0; padding:0; background:transparent; }
.app button.dash-dropdown { border:0; padding:0; background:transparent; min-height:0; width:100%; }  /* the bordered box is the trigger inside it */
.app button.dash-dropdown:hover:not(:disabled) { background:transparent; }

/* top bar: the menu, then the page's name; a rule under it */
.topbar { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--rv-ink); margin-bottom:12px; }
.topbar .nav { margin-bottom:0; }
.crumb { font:400 13px var(--rv-mono); color:var(--rv-mute); padding-bottom:6px; }
.nav-menu a .nav-sub { font:400 11px var(--rv-mono); color:var(--rv-mute); }
.nav-menu a.nav-current .nav-sub { color:#cfcfcf; }
.nav-menu a.nav-current { font-size:16px; }

/* segmented controls: Period, Large =, the tabs of the setups page */
.seg { display:inline-flex; border:1px solid var(--rv-ink); }
.seg > label { display:flex; margin:0; cursor:pointer; color:var(--rv-ink); background:var(--rv-paper); border-right:1px solid var(--rv-ink); min-width:56px; }
.seg > label:last-child { border-right:0; }
.seg > label, .seg > label:hover, .seg > label:focus-within { color:var(--rv-ink); }  /* Dash tints a hovered / focused option with its own blue: keep the ink */
.seg > label:has(input:checked), .seg > label:has(input:checked):hover, .seg > label:has(input:checked):focus-within { background:var(--rv-ink); color:var(--rv-paper); }
.seg > label:hover:not(:has(input:checked)) { background:var(--rv-wash); }
.seg > label:has(input:focus-visible) { outline:2px solid var(--rv-ink); outline-offset:2px; }
.seg .dash-options-list-option-wrapper { position:absolute; opacity:0; width:0; height:0; overflow:hidden; }
.seg-lbl { display:flex; flex:1; align-items:center; justify-content:center; min-height:var(--rv-tap); padding:0 14px; box-sizing:border-box; font:600 13px var(--rv-mono); color:inherit; }
@media (max-width:700px) { .seg { display:flex; } .seg > label { flex:1 1 0; min-width:0; } .seg-lbl { padding:0 4px; } }
.seg-pair { display:inline-flex; margin-left:auto; }
.app .seg-pair button { min-height:var(--rv-tap); min-width:64px; font:600 13px var(--rv-mono); }
.app .seg-pair button + button { border-left:0; }
.app .seg-pair button.on { background:var(--rv-ink); color:var(--rv-paper); }
.tk-ctl { align-items:flex-start; }
.tk-ctl .tk-intro { flex:1 1 280px; max-width:70ch; margin:18px 0 0; }
.tk-periodbar .field { flex:0 0 auto; }
@media (min-width:701px) { .tk-periodbar { justify-content:flex-end; margin-top:-70px; } }  /* the period sits at the right of the title row */


/* the token page: title with the ticker in a black badge, tabs at their own width on the left */
.tk-title { display:flex; align-items:center; gap:10px; margin:6px 0 2px; font:600 28px/1.1 var(--rv-font); letter-spacing:-.01em; }
.tk-badge { background:var(--rv-ink); color:var(--rv-paper); font:500 12px/1 var(--rv-mono); padding:5px 6px; letter-spacing:0; }
.tk-tabs .tab, .tk-tabs .tk-tab { flex:none !important; width:auto; }
.tk-tabs { display:flex; margin-top:14px; }
.tk-tabs .tk-tab { background:none !important; border:0; border-bottom:2px solid transparent; }
.tk-pane { padding-top:14px; }

/* headline tiles: the unit after a value is small; a delta is green / red */
.tk-kpi-unit { font:400 11px var(--rv-mono); color:var(--rv-mute); letter-spacing:0; }
.tk-kpi-value.up, .tk-kpi-sub.up { color:var(--rv-up); }  .tk-kpi-value.down, .tk-kpi-sub.down { color:var(--rv-down); }

/* setups: "Long when" as a box with numbered conditions */
.su-when { background:var(--rv-wash); border:1px solid var(--rv-rule); padding:10px 14px; margin:10px 0; max-width:900px; }
.su-when-list { list-style:none; margin:6px 0 0; padding:0; }
.su-when-list li { display:flex; gap:12px; font:400 14px/1.5 var(--rv-font); padding:2px 0; }
.su-n { font:500 12px/1.9 var(--rv-mono); color:var(--rv-mute); min-width:14px; }

/* chart headers: chips on rows with air between them, the "?" at the top right, room under the previous plot */
.xh-head { box-sizing:border-box; padding-right:34px; gap:4px 12px; line-height:20px; align-items:center; }
.xh-head .xh-help { position:absolute; top:0; right:0; align-self:auto; }
.xh-head .xh-item, .xh-head .xh-cat { line-height:18px; }
.xh-head .xh-date { font-weight:600; }
@media (max-width:700px) { .xh-head { gap:4px 8px; } }

.tk-tabs, .tk-tabs .tab-container { flex-direction:row !important; }  /* Dash stacks tabs on a narrow screen */

/* the header's "?" is the same size everywhere and the header is never shorter than it, so it cannot spill into the plot */
.xh-head { min-height:28px; }
.xh-head .xh-help { width:28px; height:28px; line-height:26px; }
@media (pointer:coarse) { .xh-head .xh-help { width:28px; height:28px; line-height:26px; } }

/* ============ Direction D, as measured on the mockups (D light · Token desktop / Explorer / Market) ============ */
.tk-kpi-sub .up { color:var(--rv-up); } .tk-kpi-sub .down { color:var(--rv-down); }
.tk-kpi-sub.up, .tk-kpi-sub.down { color:var(--rv-mute); }  /* only the number is coloured, the words stay muted */

/* header row: platypus and name side by side, 6px above and below, a 2px rule; status and Refresh at the top right on the same row */
.topbar { padding:6px 0; margin-bottom:0; border-bottom:2px solid var(--rv-ink); gap:10px; }
.nav-brand { flex-direction:row; align-items:center; gap:10px; height:44px; padding:0; font:600 17px/1 var(--rv-font); letter-spacing:-.01em; }
.nav-mascot { height:36px; width:auto; margin:0; z-index:auto; position:static; }
.nav-menu { top:calc(100% + 6px); left:0; }
.crumb { font:400 12px var(--rv-mono); color:var(--rv-mute); padding:0; }
.refresh-box { position:absolute; top:var(--rv-pad); right:var(--rv-pad); height:56px; z-index:5; display:flex; align-items:center; gap:14px; }
.refresh-box .status { font:400 11px/1.4 var(--rv-mono); color:var(--rv-mute); text-align:right; max-width:60ch; }
.app .refresh-box button { height:36px; min-height:36px; padding:0 16px; }
@media (max-width:700px) {
  .refresh-box { display:contents; }
  .app .refresh-box button { position:absolute; top:calc(var(--rv-pad) + 6px); right:calc(var(--rv-pad) - 8px); width:44px; height:44px; min-height:44px; padding:0; font-size:0; }
  .app .refresh-box button::before { content:'↻'; font:500 22px/1 var(--rv-mono); }
  .refresh-box .status { display:flex; align-items:center; gap:7px; font-size:10.5px; text-align:left; max-width:none; padding:10px 0 0; }
  .refresh-box .status::before { content:''; width:6px; height:6px; background:var(--rv-ink); flex:none; }
}

/* the title row: name, badge and facts on the left, the period at the right (300px, 36px high) */
.tk-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-top:18px; }
.tk-head .tk-title { margin:0; font:600 26px/1.15 var(--rv-font); letter-spacing:-.02em; }
.tk-head .hint { font:400 11px var(--rv-mono); color:var(--rv-mute); margin-top:4px; }
.tk-period { width:300px; max-width:100%; }
.tk-period .field-label { margin-bottom:4px; }
.tk-period .seg { display:flex; }
.tk-period .seg-lbl { min-height:36px; }
@media (max-width:700px) { .tk-period { width:100%; } .tk-period .seg-lbl { min-height:44px; } .tk-head .tk-title { font-size:24px; } }

/* headline tiles: 6 across, 10px 14px, number 20px mono */
.tk-kpis { margin:16px 0 0; grid-template-columns:repeat(6, 1fr); }
.tk-kpi { padding:10px 14px; min-height:82px; }
.tk-kpi-value { margin-top:3px; letter-spacing:-.01em; }
@media (max-width:1100px) { .tk-kpis { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px) { .tk-kpis { grid-template-columns:repeat(2, 1fr); } }

/* tabs: 44px, a rule above and a light one below, 20px under the tiles */
.tk-tabs { margin:20px 0 0; border-top:1px solid var(--rv-ink); border-bottom:1px solid var(--rv-rule-soft); }

/* the controls row under the tabs: "Large = at least" (36px), what the chart is, Log / Linear as chips at the right */
.tk-ctl { align-items:center; gap:24px; padding-top:16px; }
.tk-ctl .seg-lbl { min-height:36px; font-size:12px; padding:0 12px; }
.tk-ctl .tk-intro { margin:0; font:400 12px/1.4 var(--rv-font); color:var(--rv-mute); max-width:540px; flex:0 1 540px; }
.seg-pair { gap:6px; margin-left:auto; }
.app .seg-pair button { min-height:32px; height:32px; min-width:0; padding:0 10px; font:500 12px var(--rv-font); border:1px solid var(--rv-ink); }
.app .seg-pair button + button { border-left:1px solid var(--rv-ink); }
@media (max-width:700px) { .tk-ctl { gap:12px; } .seg-pair { margin-left:0; } .tk-ctl .seg-lbl { min-height:44px; } }

/* each subplot's header: small chips, rows 3px apart, items 6px apart, 4px under it */
.xh-head { font:400 10.5px/1.5 var(--rv-mono); gap:3px 6px; padding-right:26px; min-height:20px; align-items:center; }
.xh-head b { font-weight:500; }
.xh-head .xh-item { padding:0 5px; font-size:10px; line-height:15px; }
.xh-head .xh-cat { font:500 9px/15px var(--rv-font); letter-spacing:.08em; padding:0 5px; }
.xh-head .xh-title { font:600 10px/15px var(--rv-font); }
.xh-head .xh-help, .xh-head .xh-help:hover { width:20px; height:20px; line-height:18px; font-size:10px; }
@media (pointer:coarse) { .xh-head .xh-help { width:20px; height:20px; line-height:18px; } }
.xh-main { gap:24px; }
.xh-docs-col { width:300px; }
.xh-doc { border-left:2px solid var(--rv-ink); background:var(--rv-wash); padding:8px 12px; font:400 12px/1.5 var(--rv-font); color:#222; }
.xh-doc p { margin:0; }
.xh-doc p b { display:block; font:500 10.5px var(--rv-font); letter-spacing:.08em; text-transform:uppercase; color:var(--rv-mute); margin-top:6px; }
.xh-doc h4 { margin:0 0 3px; }

/* the heatmap: 116 x 64 cells 3px apart, the rank column pinned with a rule, a framed highlight */
.mx-scroll { border:1px solid var(--rv-ink); }
.mx-table { border-spacing:3px; }
.mx-table th { border-bottom:2px solid var(--rv-ink); background:var(--rv-paper); }
.mx-table .mx-corner, .mx-table .mx-rank { border-right:1px solid var(--rv-ink); width:34px; min-width:34px; max-width:34px; font:400 12px var(--rv-mono); color:var(--rv-mute); }
.mx-table .mx-corner { border-bottom:2px solid var(--rv-ink); }
.mx-top { font:600 13px var(--rv-font); } .mx-mid { font:400 10.5px var(--rv-mono); color:var(--rv-mute); } .mx-year { font:400 10.5px var(--rv-mono); color:var(--rv-mute); }
.mx-cell { border:1px solid var(--rv-rule); } .mx-cell.hl { border:2px solid var(--rv-ink); }
.mx-sym { font:600 13px var(--rv-font); } .mx-val { font:500 12px var(--rv-mono); } .mx-sub { font:400 10.5px var(--rv-mono); color:var(--rv-mute); }
.mx-in { padding:6px; text-align:left; }
th .mx-in { padding:4px 6px; }

/* last touches against the mockups */
.refresh-box .status { white-space:nowrap; max-width:none; }
@media (max-width:700px) { .refresh-box .status { white-space:normal; } }
.status:empty { display:none !important; }
.tk-period .seg > label, .tk-ctl .seg > label { flex:1 1 0; min-width:0; }
.tk-ctl .seg { width:220px; max-width:100%; }
@media (max-width:700px) { .tk-ctl .seg { width:100%; } }
.tk-pane { padding-top:0; }
.tk-tabs .tab, .tk-tabs .tk-tab { display:flex; align-items:center; box-sizing:border-box; }
.tk-tabs .tk-tab { height:44px; min-height:44px; padding:0 14px !important; }

/* room under the header rule, a "Large =" row that fits its six choices, a "?" that does not touch its neighbours, tables that never widen the page */
.topbar { margin-bottom:20px; }
.tk-ctl .seg { width:auto; }
.tk-ctl .seg > label { flex:0 0 auto; min-width:60px; }
@media (max-width:700px) { .tk-ctl .seg { width:100%; } .tk-ctl .seg > label { flex:1 1 0; min-width:0; } }
.field-label-row { min-height:28px; margin-bottom:6px; gap:8px; }
.field-label-row .help-btn { width:20px; height:20px; line-height:18px; font-size:10px; flex:none; }
.tk-row > * { max-width:100%; }
.tk-summary { overflow-x:auto; padding-top:0; }
.tk-paths { min-width:0; }
.tk-sub { margin:20px 0 8px; font:600 15px var(--rv-font); }
.xh-sw { vertical-align:-1px; margin-right:2px; }
.xh-head .xh-item { display:inline-flex; align-items:center; gap:4px; }
.xh-head .xh-off .xh-sw { opacity:.4; }

/* the header sits higher; the title is close under its rule; menu entries are plain names */
.app { padding-top:var(--rv-top); }
.refresh-box { top:var(--rv-top); }
.app .refresh-box button { top:auto; }
@media (max-width:700px) {
  .app .refresh-box button, .app .refresh-box button.rv-primary { top:calc(var(--rv-top) + 7px); right:var(--rv-pad); width:44px; height:44px; background:transparent; color:var(--rv-ink); border:0; justify-content:center; }  /* a plain icon inside the gutter, level with the title */
  .app .refresh-box button:disabled { background:transparent; color:var(--rv-faint); }
  .controls { row-gap:14px; }
  .controls + .controls { margin-top:14px; }
  .rv-settings { margin-top:16px; }
  .rv-settings > .rv-settings-bar { margin-top:0; }
}
.topbar { margin-bottom:14px; }
.tk-head { padding-top:0; }
.nav-menu a { justify-content:flex-start; gap:6px; }
body { margin:0; }
.tk-head { align-items:flex-start; }
.tk-head .tk-title { margin-top:2px; }

/* loading: the first load of a block is a dotted block with the runner in its middle; later loads dim what is there and put the runner over it */
.rv-spin:not([data-seen]):has(> div > .rv-load) { background-image:radial-gradient(#cfcfcf 1px, transparent 1px); background-size:8px 8px; border:1px solid var(--rv-rule); }
.rv-spin:not([data-seen]):has(> div > .rv-load) > div:first-child { visibility:hidden !important; }
.rv-spin[data-seen] > div:first-child { transition:opacity .15s; }
.rv-spin .rv-load { box-shadow:0 0 0 6px rgba(255,255,255,.7); }
.tk-kpis-load:not([data-seen]):has(> div > .rv-load) { border:0; background:none; }  /* the tiles' row is small: the runner alone */

/* the plot headers' layout (.xh-in, the phone's two rows): in tvcharts.css, which the embeds load too */

/* tabs: the row itself is Dash's .tab-container, so it is the thing that scrolls sideways when the names do not fit */
.tk-tabs { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tk-tabs::-webkit-scrollbar { display:none; }
.tk-tabs .tk-tab { white-space:nowrap; }

/* number / text inputs: ONE 1px outline around the input and its - / + buttons (the container's), square corners, a hairline before each button */
.dash-input-container.dash-input { border:1px solid var(--rv-ink); border-radius:0; }
.dash-input-container .dash-input-element { border:0 !important; border-radius:0; }
.app button.dash-input-stepper { border:0; border-left:1px solid var(--rv-ink); border-radius:0; }
.app button.dash-input-stepper:disabled { border-left-color:var(--rv-rule); }
.app button.dash-stepper-decrement { border-left:0; border-right:1px solid var(--rv-ink); }
.app button.dash-stepper-decrement:disabled { border-right-color:var(--rv-rule); }
.app button.dash-input-stepper:disabled { cursor:default; }  /* not the wait cursor of a busy Refresh */

/* support coin: a pixel-art gold coin that turns beside Refresh and hops now and then; a click opens the support note (assets/support.js) */
.app .coin-btn { position:absolute; z-index:5; top:calc(var(--rv-top) + 10px); right:var(--rv-pad); width:36px; height:36px; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; perspective:200px; }
@media (min-width:701px) { .refresh-box { right:calc(var(--rv-pad) + 48px); } }  /* room for the coin at the corner */
@media (min-width:701px) { .refresh-box { right:calc(var(--rv-pad) + 48px); } }  /* room for the coin at the corner */
.app .coin-btn:hover:not(:disabled) { background:transparent; }
.app .coin-btn img { width:28px; height:28px; image-rendering:pixelated; display:block; animation:coin-turn 2.4s steps(12, end) infinite, coin-hop 6s ease-in-out infinite; }
.app .coin-btn:hover img { animation-duration:1.2s, 6s; }
@keyframes coin-turn { 0% { transform:scaleX(1); } 25% { transform:scaleX(.45); } 50% { transform:scaleX(.08); } 75% { transform:scaleX(.45); } 100% { transform:scaleX(1); } }
@keyframes coin-hop { 0%, 80%, 100% { translate:0 0; } 86% { translate:0 -5px; } 92% { translate:0 0; } 96% { translate:0 -2px; } }
@media (prefers-reduced-motion:reduce) { .app .coin-btn img { animation:none; } }
@media (max-width:700px) { .app .coin-btn { top:calc(var(--rv-top) + 7px); right:calc(var(--rv-pad) + 44px); width:44px; height:44px; } }

.support-modal h4 { font:600 14px var(--rv-font); margin:0 0 6px; }
.support-modal p { margin:0 0 10px; }
.support-addr { margin:0 0 10px; }
.support-addr b { display:block; font:500 10.5px var(--rv-font); letter-spacing:.08em; text-transform:uppercase; color:var(--rv-mute); }
.support-addr small { display:block; color:var(--rv-mute); font-size:11px; }
.support-addr .row { display:flex; gap:8px; align-items:center; margin-top:3px; }
.support-addr code { flex:1 1 auto; min-width:0; font:400 11px/1.4 var(--rv-mono); word-break:break-all; background:var(--rv-wash); padding:4px 6px; }
.support-addr button { flex:none; }
/* a long status (both syncs reporting) must not run under the brand: capped to the room left of the button, scrolled sideways without a scrollbar */
@media (min-width:701px) {
  .refresh-box .status { max-width:calc(100vw - 2 * var(--rv-pad) - 560px); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
  .refresh-box .status::-webkit-scrollbar { display:none; }
}
/* a compact segmented control beside a table's intro (the cohort table's shorts / longs toggle) */
.seg-sm .seg > label { min-width:0; }
.seg-sm .seg-lbl { min-height:26px; padding:0 10px; font-size:12px; font-weight:500; }
/* the positions chart's caption: one bold-titled item per panel */
.tk-how ul { margin:4px 0 0; padding-left:18px; }
.tk-how li { margin:2px 0; }

/* the data sources, once, at the foot of every page */
.site-footer { font:400 10px/1.4 var(--rv-font); color:var(--rv-mute); text-align:center; padding:16px 8px 12px; opacity:.8; }
.rv-tz-pick { margin-top:6px; }
.rv-tz-pick select { font:400 10px/1.4 var(--rv-font); color:var(--rv-mute); background:transparent; border:1px solid var(--rv-rule); border-radius:2px; padding:1px 2px; }
.rv-tz-pick select:hover, .rv-tz-pick select:focus-visible { color:var(--rv-ink); border-color:var(--rv-ink); outline:none; }