/* Tools pages (hub, Profit, Risk, Tax & Fees, SIP, Screener, Compare,
   Dividends). Layout only — colours come from the tm-* tokens in
   components/_iq_theme.html. Every page extends templates/tools/_base_tools.html. */

/* ── Page ── */
.tl-page { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2.5rem; }
.tl-page > * { min-width: 0; }
.tl-grid { display: grid; gap: 1rem; }
.tl-grid > * { min-width: 0; }
.tl-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-grid.cols-form { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
.tl-grid.cols-main-aside { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.tl-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tl-footnote { font-size: .66rem; line-height: 1.5; color: var(--tm-faint); }
.tl-footnote a { color: var(--tm-accent); font-weight: 700; }

/* ── Strip ── */
.tl-nav { position: relative; z-index: 25; align-items: center; }
.tl-nav .tm-tab.is-on, .tl-nav .tm-tab.is-on:hover { color: var(--analysis-control-text); background: var(--analysis-control-bg); box-shadow: inset 0 0 0 1px var(--analysis-control-ring); }
.tl-brand { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; margin-right: .25rem; border-radius: 10px; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: var(--tm-info); background: var(--tm-info-bg); }
.tl-brand.is-on { box-shadow: inset 0 0 0 1px var(--tm-info); }

/* ── Buttons ── */
.tl-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .9rem; border: 1px solid transparent; border-radius: 9px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; color: var(--tm-text-2); }
.tl-btn.primary { color: #fff; background: var(--tm-accent); }
.tl-btn.primary:hover { filter: brightness(1.08); }
.tl-btn.ghost { background: var(--tm-bg); border-color: var(--tm-line); }
.tl-btn.ghost:hover { background: var(--tm-bg-soft); color: var(--tm-text); }
.tl-btn.soft { color: var(--tm-accent); background: var(--tm-accent-bg); }
.tl-btn.sm { height: 28px; padding: 0 .6rem; font-size: .6rem; }
.tl-btn.block { width: 100%; }
.tl-btn i { font-size: .62rem; }
.tl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── KPI grids ── */
.tl-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tl-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tm-kpi > b { font-variant-numeric: tabular-nums; }
.tm-kpi > b.up { color: var(--tm-up); } .tm-kpi > b.down { color: var(--tm-down); } .tm-kpi > b.warn { color: var(--tm-warn); }

/* ── Cards ── */
.tl-count { font-size: .66rem; color: var(--tm-muted); white-space: nowrap; }
.tl-count b { color: var(--tm-text); }
.tl-empty { padding: 2rem 1rem; text-align: center; color: var(--tm-muted); font-size: .74rem; }
.tl-empty i { display: block; margin-bottom: .5rem; font-size: 1.4rem; color: var(--tm-faint); }
.tl-empty b { display: block; margin-bottom: .2rem; font-size: .8rem; color: var(--tm-text); }
.tl-note { padding: .55rem 1rem .8rem; font-size: .66rem; line-height: 1.5; color: var(--tm-muted); }
.tl-rows { margin: 0; padding: 0; list-style: none; }
.tl-rows li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 1rem; border-bottom: 1px solid var(--tm-line-soft); font-size: .72rem; }
.tl-rows li:last-child { border-bottom: 0; }
.tl-rows .k { color: var(--tm-muted); }
.tl-rows .v { font-weight: 800; color: var(--tm-text); text-align: right; font-variant-numeric: tabular-nums; }
.tl-rows .v small { display: block; font-weight: 500; font-size: .6rem; color: var(--tm-muted); }
.tl-rows li.total { background: var(--tm-bg-soft); }
.tl-rows li.total .k { color: var(--tm-text); font-weight: 800; }
.tl-alert { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 1rem; border-radius: 14px; font-size: .72rem; line-height: 1.45; }
.tl-alert.warn { color: var(--tm-warn); background: var(--tm-warn-bg); }
.tl-alert.down { color: var(--tm-down); background: var(--tm-down-bg); }
.tl-alert.info { color: var(--tm-info); background: var(--tm-info-bg); }
.tl-alert.up { color: var(--tm-up); background: var(--tm-up-bg); }
.tl-alert i { margin-top: .15rem; }
.tl-alert b { color: inherit; }

/* Hub cards */
.tl-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.tl-tool { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--tm-line); background: var(--tm-bg); text-decoration: none; color: inherit; min-width: 0; }
.tl-tool:hover { border-color: var(--tm-accent); }
.tl-tool .ic { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; font-size: .9rem; color: var(--tm-accent); background: var(--tm-accent-bg); }
.tl-tool h2, .tl-tool h3 { margin: 0; font-size: .82rem; font-weight: 800; color: var(--tm-text); }
.tl-tool p { margin: 0; font-size: .68rem; line-height: 1.45; color: var(--tm-muted); }
.tl-tool .foot { margin-top: auto; padding-top: .4rem; font-size: .62rem; font-weight: 800; color: var(--tm-accent); }

/* ── Forms (calculators) ── */
.tl-form { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.tl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .8rem; }
.tl-fields label, .tl-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tl-fields .wide, .tl-field.wide { grid-column: 1 / -1; }
.tl-fields input, .tl-fields select, .tl-field input, .tl-field select, .tl-fields .px-select-search > input { width: 100%; min-height: 36px; padding: 0 .6rem; border: 1px solid var(--tm-line); border-radius: 9px; background: var(--tm-bg); color: var(--tm-text); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tl-fields input:focus, .tl-fields select:focus, .tl-field input:focus, .tl-field select:focus, .tl-fields .px-select-search > input:focus { outline: none; border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-bg); }
.tl-fields .hint, .tl-field .hint { font-size: .62rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tm-muted); }
.tl-fields input[type="range"] { min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--tm-accent); }
.tl-slider { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .5rem; align-items: center; }
.tl-lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.tl-lookup-note { font-size: .64rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tm-accent); min-height: 1em; }
.tl-error { padding: .55rem .8rem; border-radius: 10px; font-size: .7rem; font-weight: 700; color: var(--tm-down); background: var(--tm-down-bg); }
.tl-error[hidden] { display: none; }
.tl-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tl-form-actions .spacer { flex: 1; }
.tl-form .status { font-size: .62rem; color: var(--tm-faint); }

/* Result blocks — tone classes the script writes by sign */
.tl-page td.up, .tl-page span.up, .tl-page b.up { color: var(--tm-up); } .tl-page td.down, .tl-page span.down, .tl-page b.down { color: var(--tm-down); } .tl-page td.warn, .tl-page span.warn, .tl-page b.warn { color: var(--tm-warn); }
.tl-result[data-tl-idle] .when-ready { display: none; }
.tl-result:not([data-tl-idle]) .when-idle { display: none; }
.tl-verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--tm-line); background: var(--tm-bg-soft); }
.tl-verdict .label { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tl-verdict .big { display: block; margin-top: .1rem; font-size: 1.6rem; font-weight: 900; line-height: 1.1; color: var(--tm-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-verdict .big.up { color: var(--tm-up); } .tl-verdict .big.down { color: var(--tm-down); } .tl-verdict .big.warn { color: var(--tm-warn); }
.tl-verdict .sub { display: block; margin-top: .15rem; font-size: .68rem; color: var(--tm-muted); }
.tl-verdict.up { border-color: var(--tm-up); background: var(--tm-up-bg); } .tl-verdict.down { border-color: var(--tm-down); background: var(--tm-down-bg); } .tl-verdict.warn { border-color: var(--tm-warn); background: var(--tm-warn-bg); }
.tl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem 1rem; }
.tl-tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-tiles > .span { grid-column: 1 / -1; }
.tl-tiles > .tile { min-width: 0; padding: .5rem .6rem; border-radius: 10px; background: var(--tm-bg-soft); border: 1px solid var(--tm-line-soft); }
.tl-tiles > .tile > span { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tl-tiles > .tile > b { display: block; margin-top: .1rem; font-size: .84rem; font-weight: 800; color: var(--tm-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-tiles > .tile > b.up { color: var(--tm-up); } .tl-tiles > .tile > b.down { color: var(--tm-down); } .tl-tiles > .tile > b.warn { color: var(--tm-warn); }
.tl-tiles > .tile > small { display: block; font-size: .6rem; color: var(--tm-muted); }
.tl-tiles > .tile.accent { border-color: var(--tm-accent); } .tl-tiles > .tile.accent > b { color: var(--tm-accent); }

/* Price ladder (risk) */
.tl-ladder { padding: .5rem 1rem 1rem; }
.tl-ladder .bar { position: relative; height: 10px; border-radius: 999px; background: var(--tm-bg-sunk); overflow: hidden; }
.tl-ladder .bar i { position: absolute; top: 0; bottom: 0; }
.tl-ladder .bar .loss { background: var(--tm-down); } .tl-ladder .bar .gain { background: var(--tm-up); } .tl-ladder .bar .entry { width: 2px; background: var(--tm-text); }
.tl-ladder .marks { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .6rem; font-weight: 700; color: var(--tm-muted); }
.tl-ladder .marks b { color: var(--tm-text); }

/* Share bar (SIP) */
.tl-share { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--tm-bg-sunk); margin: 0 1rem .4rem; }
.tl-share i { display: block; height: 100%; }
.tl-share .inv { background: var(--tm-info); } .tl-share .ret { background: var(--tm-up); }
.tl-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0 1rem .8rem; font-size: .64rem; color: var(--tm-muted); }
.tl-legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.tl-legend .inv i { background: var(--tm-info); } .tl-legend .ret i { background: var(--tm-up); }
.tm-table .bar { display: inline-block; width: 5rem; height: 5px; border-radius: 999px; background: var(--tm-bg-sunk); vertical-align: middle; margin-left: .4rem; overflow: hidden; }
.tm-table .bar i { display: block; height: 100%; background: var(--tm-info); }
.tm-table .bar.up i { background: var(--tm-up); }

/* Tabs (tax, dividends) */
.tl-tabs { align-items: center; }
.tl-tabs .tm-tab { cursor: pointer; background: none; }
.tl-tabs .tm-tab.is-on, .tl-tabs .tm-tab.is-on:hover { color: var(--analysis-control-text); background: var(--analysis-control-bg); box-shadow: inset 0 0 0 1px var(--analysis-control-ring); }
.tl-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; font-size: .58rem; font-weight: 900; background: var(--tm-bg-sunk); color: var(--tm-text-2); }
[data-tl-pane][hidden] { display: none; }

/* Filters */
.tl-page .pxf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--tm-line); }
.tl-filters { padding: .75rem 1rem .9rem; }
.tl-filters .tl-filter-actions { display: flex; gap: .4rem; align-items: end; }
.tl-filters .tl-filter-actions > * { flex: 1; }
.tl-filters-title { display: flex; align-items: center; gap: .5rem; }
.tl-filters-title h2 { margin: 0; font-size: .8125rem; font-weight: 800; color: var(--tm-text); }

/* Tables */
.tm-table .num { font-variant-numeric: tabular-nums; }
.tm-table td.strong, .tm-table .strong { font-weight: 800; color: var(--tm-text); }
.tm-table td.muted { color: var(--tm-muted); }
.tm-table .sub { display: block; font-size: .6rem; font-weight: 600; color: var(--tm-muted); white-space: normal; }
.tm-table td.best { background: var(--tm-up-bg); color: var(--tm-up); font-weight: 800; }
.tm-table th.sortable a { color: inherit; text-decoration: none; }
.tm-table th.sortable.is-on a { color: var(--tm-accent); }
.tl-kind { display: inline-flex; align-items: center; padding: .12rem .45rem; border-radius: 6px; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tl-kind.bonus { color: var(--tm-info); background: var(--tm-info-bg); } .tl-kind.right { color: var(--tm-warn); background: var(--tm-warn-bg); } .tl-kind.cash { color: var(--tm-up); background: var(--tm-up-bg); }

/* Compare */
.tl-cmp-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; padding: .75rem 1rem; }
.tl-cmp-head { min-width: 0; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-bg-soft); }
.tl-cmp-head .sym { font-size: .9rem; font-weight: 900; color: var(--tm-text); text-decoration: none; }
.tl-cmp-head .sym:hover { color: var(--tm-accent); }
.tl-cmp-head small { display: block; font-size: .62rem; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cmp-head b { display: block; margin-top: .3rem; font-size: 1rem; font-weight: 800; color: var(--tm-text); font-variant-numeric: tabular-nums; }

/* ── Phones ── */
@media (max-width: 639px) {
  .tl-page { gap: .75rem; }
  .tl-grid.cols-2, .tl-grid.cols-3, .tl-grid.cols-form, .tl-grid.cols-main-aside { grid-template-columns: 1fr; }
  .tl-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tl-brand { padding: .3rem .55rem; font-size: .56rem; }
  .tl-btn { height: 32px; padding: 0 .7rem; font-size: .62rem; }
  .tm-head { flex-wrap: wrap; }
  .tl-fields { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .tl-fields .wide { grid-column: 1 / -1; }
  .tl-tiles, .tl-tiles.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .6rem .75rem; }
  .tl-verdict { grid-template-columns: 1fr; padding: .75rem; }
  .tl-verdict .big { font-size: 1.3rem; }
  .tl-rows li, .tl-note, .tl-ladder, .tl-legend { padding-left: .75rem; padding-right: .75rem; }
  .tl-share { margin-left: .75rem; margin-right: .75rem; }
  .tl-form { padding: .75rem .75rem .9rem; }
  .tl-cmp-heads { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .6rem .75rem; }
  .tm-table .bar { width: 2.5rem; }
  .tl-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}