/*
 * Insider trades pages (layouts/insider_trades). Everything is nested under body.it so it
 * cannot leak into the Bootstrap blog layout, which also loads this file.
 * Tokens follow docs/mockups/asx-director-performance.html.
 */
.it {
  --ground: #F7F8F6;
  --surface: #FFFFFF;
  --ink: #182435;
  --ink-soft: #51607A;
  --line: #E2E6E0;
  --accent: #0E6E5C;
  --accent-ink: #0A5546;
  --gain: #128A52;
  --gain-bg: #E7F4EC;
  --loss: #C0392B;
  --loss-bg: #F9ECEA;
  --gold: #8A6A1F;
  --gold-bg: #F6EFDD;
  --chip-bg: #EDF1EC;
  --notice-bg: #FFF7E0;
  /* Chart series: validated for colour-blind separation (green/red is not) */
  --chart-bought: #2A78D6;
  --chart-sold: #C0392B;
  --cta-height: 64px;

  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  padding-bottom: calc(var(--cta-height) + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;

  @media (prefers-color-scheme: dark) {
    --ground: #131A24;
    --surface: #1B2431;
    --ink: #E8ECF1;
    --ink-soft: #9AA7BA;
    --line: #2C3847;
    --accent: #3FA98F;
    --accent-ink: #62C2AA;
    --gain: #4CC08A;
    --gain-bg: #1B3329;
    --loss: #E0705F;
    --loss-bg: #3A2420;
    --gold: #D4AC53;
    --gold-bg: #33301F;
    --chip-bg: #232E3D;
    --notice-bg: #2E2A1B;
    --chart-bought: #3987E5;
    --chart-sold: #E66767;
  }

  *, *::before, *::after { box-sizing: border-box; }

  a { color: var(--accent-ink); text-decoration: none; }
  a:hover { text-decoration: underline; }
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
  main.wrap { padding-top: 28px; padding-bottom: 48px; }
  main > section, main > .chart { margin-top: 40px; }

  h1, h2 { font-family: Georgia, "Times New Roman", serif; text-wrap: balance; line-height: 1.2; }
  h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; }
  h2 { font-size: 20px; margin: 0 0 12px; }
  .page-sub { color: var(--ink-soft); max-width: 70ch; margin: 0 0 18px; }
  .muted { color: var(--ink-soft); font-size: 13px; }
  .eyebrow { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11.5px; font-weight: 600; color: var(--accent-ink); margin-bottom: 6px; }
  .crumbs { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; }

  /* Header */
  .site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
  .site-header .bar { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .brand { font-family: Georgia, serif; font-size: 19px; font-weight: 700; color: var(--ink); }
  .brand span { color: var(--accent-ink); font-weight: 400; }
  .brand:hover { text-decoration: none; }
  .site-nav { display: flex; gap: 18px; font-weight: 600; font-size: 14px; }
  .site-nav a { color: var(--ink-soft); padding: 4px 0; border-bottom: 2px solid transparent; }
  .site-nav a.current, .site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); text-decoration: none; }
  .markets { display: flex; gap: 6px; padding-bottom: 10px; overflow-x: auto; }
  .market { font-size: 13px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 20px; padding: 2px 11px; white-space: nowrap; }
  .market.current { background: var(--chip-bg); color: var(--ink); font-weight: 600; border-color: transparent; }
  .market:hover { text-decoration: none; color: var(--ink); }

  .search { margin-left: auto; display: flex; gap: 8px; flex: 1 1 200px; max-width: 320px; }
  .search input[type="search"] { width: 100%; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }
  .search.big { margin: 14px 0 8px; max-width: 560px; }
  .button { display: inline-block; font: inherit; font-weight: 600; background: var(--accent); color: #FFFFFF; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
  .button:hover { text-decoration: none; filter: brightness(1.08); }
  @media (prefers-color-scheme: dark) { .button { color: #0B1410; } }

  /* Tables */
  .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; padding: 9px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; }
  td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
  tr:last-child td { border-bottom: none; }
  th.num, td.num { text-align: right; }
  td.director, td.company { white-space: normal; min-width: 130px; }
  td.director a, td.company a { font-weight: 600; }
  td.stock { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
  .role { font-size: 12px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank { font-family: Georgia, serif; font-size: 15px; color: var(--ink-soft); width: 34px; }
  tr.podium .rank { color: var(--gold); font-weight: 700; }

  .roi { font-weight: 700; }
  .roi.up, .up { color: var(--gain); }
  .roi.down, .down { color: var(--loss); }
  .roi-cell { min-width: 150px; }
  .roi-bar { display: inline-block; height: 7px; border-radius: 4px; background: var(--gain); vertical-align: middle; margin-left: 8px; }
  .record { font-size: 13px; }
  .record .w { color: var(--gain); font-weight: 600; }
  .record .l { color: var(--loss); font-weight: 600; }

  .pill { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; letter-spacing: 0.02em; }
  .pill.buy { background: var(--gain-bg); color: var(--gain); }
  .pill.sell { background: var(--loss-bg); color: var(--loss); }
  .pill.other { background: var(--chip-bg); color: var(--ink-soft); }
  .pill.gold { background: var(--gold-bg); color: var(--gold); margin-left: 6px; }
  .chip { display: inline-block; background: var(--chip-bg); color: var(--ink-soft); border-radius: 5px; font-size: 12px; padding: 2px 7px; margin-right: 4px; }
  .code-tag { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; background: var(--chip-bg); border-radius: 5px; padding: 3px 7px; color: var(--ink); }
  .code-tag.big { font-size: 14px; vertical-align: middle; margin-left: 6px; }

  /* Sections */
  .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
  .section-head h2 { margin: 0; }
  .section-head a { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 0; }
  .stat { border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; background: var(--surface); min-width: 0; }
  .stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); font-weight: 600; }
  .stat .value { font-size: 23px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .stat .value.small { font-size: 19px; line-height: 1.6; }
  .stat .detail { font-size: 12px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
  .profile-head h1 { margin-bottom: 4px; }
  .avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 22px; flex-shrink: 0; }
  .lede { font-size: 16.5px; max-width: 68ch; margin: 16px 0 4px; }

  .notice { background: var(--notice-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; max-width: 80ch; margin: 12px 0; }
  .method-note { margin-top: 28px; font-size: 12.5px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 12px; max-width: 90ch; }
  .empty-note { color: var(--ink-soft); padding: 28px 0; }
  .empty { padding: 60px 0; }

  .filters { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 14px; }
  .tabs { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
  .tab { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border-right: 1px solid var(--line); white-space: nowrap; }
  .tab:last-child { border-right: 0; }
  .tab.active { background: var(--chip-bg); color: var(--ink); }
  .tab:hover { text-decoration: none; color: var(--ink); }

  .pager { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 16px; font-weight: 600; font-size: 14px; }

  .results { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .results li { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .results li:last-child { border-bottom: 0; }
  .results a:not(.code-tag) { font-weight: 600; }

  .prose { max-width: 72ch; }
  .prose h2 { margin-top: 30px; }
  .prose li { margin-bottom: 4px; }

  /* Chart */
  .chart { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 10px; margin-left: 0; margin-right: 0; max-width: 720px; }
  .chart figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
  .chart-title { font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
  .legend { font-size: 12.5px; color: var(--ink-soft); }
  .chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 5px 0 10px; vertical-align: baseline; }
  .chart-key.bought { background: var(--chart-bought); }
  .chart-key.sold { background: var(--chart-sold); }
  .chart-plot { position: relative; padding-top: 44px; }
  .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .chart .axis { stroke: var(--line); stroke-width: 1; }
  .chart path.bought { fill: var(--chart-bought); }
  .chart path.sold { fill: var(--chart-sold); }
  .chart .hit { fill: transparent; }
  .chart .column { outline: none; cursor: default; }
  .chart .column:hover path, .chart .column:focus path { filter: brightness(1.15); }
  .chart .column:focus-visible .hit { stroke: var(--accent); stroke-width: 2; }
  .chart text { font-size: 11.5px; text-anchor: middle; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .chart text.value { fill: var(--ink); font-weight: 600; }
  .chart-tip { position: absolute; top: 0; background: var(--ink); color: var(--surface); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; pointer-events: none; white-space: nowrap; z-index: 2; }
  .chart-tip-title { font-weight: 600; opacity: 0.75; }
  .chart-tip-row .chart-key { margin-left: 0; height: 3px; width: 12px; vertical-align: middle; }
  .chart-tip-row strong { margin-right: 6px; }
  .chart details { margin-top: 8px; font-size: 13px; }
  .chart summary { color: var(--ink-soft); cursor: pointer; }
  .chart details table { margin-top: 6px; max-width: 360px; }
  .chart details td, .chart details th { padding: 5px 8px; }

  /* Footer and sticky call to action */
  .site-footer { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px; padding: 20px 0 28px; }
  .site-footer p { margin: 0 0 8px; max-width: 90ch; }

  .cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20, 30, 45, 0.08); padding-bottom: env(safe-area-inset-bottom); }
  .cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--cta-height); }
  .cta-text { min-width: 0; line-height: 1.3; }
  .cta-text strong { display: block; font-size: 14.5px; }
  .cta-text span { color: var(--ink-soft); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Narrow screens: drop the secondary columns rather than scroll sideways */
  @media (max-width: 820px) {
    .wide, .wide-inline { display: none; }
    th, td { padding-left: 9px; padding-right: 9px; }
    .roi-cell { min-width: 0; }
    .roi-bar { display: none; }
    .search { max-width: none; flex-basis: 100%; margin-left: 0; }
    .site-nav { gap: 14px; }
    .role { max-width: 150px; }
    td.director, td.company { min-width: 0; }
    td.date { font-size: 13px; }
  }
  @media (max-width: 600px) {
    /* The SVG scales down with the page; keep its labels legible */
    .chart text { font-size: 19px; }
  }
  @media (max-width: 480px) {
    .cta-text span { display: none; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .button { transition: filter 0.15s ease; }
  }
}