:root{
    --pad: 12px;
    --border:#e6e6e6;
    --borderSoft:#f0f3f7;
    --muted:#64748b;

    --banner1:#1e3a5f;
    --banner2:#27496d;

    --hover:#eef4fb;

    --divisionStripe:#2563eb;
    --divisionBg:#ffffff;

    --sectionBg:#f9fbfd;
    --subBg:#ffffff;
  }

  /* ===== Page sizing: header stays fixed, results scroll ===== */
  html, body { height:100%; }
  body{
    margin:0;
    overflow:hidden;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color:#0f172a;
    background:#fff;
  }

  /* ===== Banner header ===== */
  .banner{
    background: linear-gradient(180deg, var(--banner1) 0%, var(--banner2) 100%);
    color:#fff;
    padding: 18px 18px 14px;
    display:flex;
    flex-direction:column;
    gap: 14px;
  }

  .banner h1{
    margin:0;
    text-align:center;
    font-size:18px;
    font-weight:800;
    letter-spacing:.2px;
  }

  /* Controls row inside banner */
  .banner .controls{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  input[type="search"]{
    padding:10px 14px;
    min-width:320px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    outline:none;
  }
  input[type="search"]:focus{
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
    border-color:#93c5fd;
  }

  button{
    padding:10px 14px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
  }
  button:hover{ background:#f7f7f7; }

  .muted{ color:var(--muted); }

  /* ===== App wrap ===== */
  .wrap{
    padding: 14px 18px 22px;
    height: calc(100vh - 120px); /* banner height-ish */
    overflow:hidden;            /* important: results area scrolls */
  }

  .table{
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }

  /* Sticky header row (column labels) */
  #tableHeader{
    position:sticky;
    top:0;
    z-index:5;
    background:#fafafa;
    box-shadow: 0 1px 0 var(--border);
  }

  /* Results scroll container */
  .tableBody{
    height: calc(100vh - 120px - 58px - 28px); /* banner - headerRow - wrap padding-ish */
    overflow-y:auto;
  }

  /* ===== Rows ===== */
  .row{
    display:grid;
    gap:12px;
    padding:10px var(--pad);
    border-top:1px solid var(--borderSoft);
    align-items:center;
    font-size:14px;
  }
  .row.header{
    border-top:0;
    font-weight:700;
    background:#fafafa;
  }
  .row:not(.header):hover{ background:var(--hover); }

  .cell{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
  }

  /* Gutter + toggle */
  .gutter{ display:flex; align-items:center; }
  .toggle{
    width:20px;
    height:20px;
    border:1px solid var(--border);
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    background:#fff;
    font-weight:800;
    line-height:1;
    flex:0 0 auto;
  }
  .toggle.hidden{ visibility:hidden; }

  mark{
    background:#fff2a8;
    padding:0 2px;
    border-radius:3px;
  }

  .noResults{
    padding:12px;
    color:var(--muted);
  }

  /* ===== Columns show/hide ===== */
  .hideCsi .csiCol{ display:none; }

  /* Desktop grid templates:
     1:gutter 2:division 3:csi 4:cost 5:desc  */
  .hideCsi .row{
    grid-template-columns: 44px 80px 120px minmax(300px, 1fr);
  }
  .showCsi .row{
    grid-template-columns: 44px 80px 120px 120px minmax(300px, 1fr);
  }

  /* ===== Type styling (desktop) ===== */
  .type-division{
    background: var(--divisionBg);
    border-top:1px solid #d6e4f5;
    box-shadow: inset 3px 0 0 var(--divisionStripe);
  }
  .type-division .cell{ font-weight:800; color:#162433; }

  .type-section{ background: var(--sectionBg); }
  .type-section .cell:last-child{ font-weight:650; color:#243447; }

  .type-subsection{
    background: var(--subBg);
    font-size:13.5px;
  }
  .type-subsection .cell:last-child{
    font-weight:450;
    color:#334155;
  }

  /* Codes in monospace (CSI + Cost column) */
  .csiCol,
  .showCsi .row > .cell:nth-child(4),
  .hideCsi .row > .cell:nth-child(3){
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  /* ===== Desktop hierarchy indentation =====
     - indent CSI/Cost/Desc for section/subsection rows
     - keep gutter indentation purely for toggle */
  .showCsi .row.type-section .csiCol,
  .showCsi .row.type-section .cell:nth-child(4),
  .showCsi .row.type-section .cell:nth-child(5){
    padding-left: 14px;
  }
  .showCsi .row.type-subsection .csiCol,
  .showCsi .row.type-subsection .cell:nth-child(4),
  .showCsi .row.type-subsection .cell:nth-child(5){
    padding-left: 28px;
  }

  /* When CSI column is hidden (collapsed browse), the columns shift:
     1 gutter, 2 division, 3 cost, 4 desc */
  .hideCsi .row.type-section .cell:nth-child(3),
  .hideCsi .row.type-section .cell:nth-child(4){
    padding-left: 14px;
  }
  .hideCsi .row.type-subsection .cell:nth-child(3),
  .hideCsi .row.type-subsection .cell:nth-child(4){
    padding-left: 28px;
  }

  /* Pills (global: desktop + mobile) */
  /* .pill{
    display:inline-flex;
    align-items:center;
    height:18px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid #dbe3ee;
    background:#f6f8fb;
    color:#0f172a;
    font-size:12px;
    font-weight:850;
    vertical-align:middle;
    flex:0 0 auto;
  }

  .pill.division{ background:#eaf2ff; border-color:#cfe0ff; color:#123a7a; }
  .pill.section{ background:#f1f5f9; }
  .pill.subsection{ background:#ffffff; } */

  .pill{ display:none; } /* desktop-only for now; mobile styles below */

  /* ===== Mobile: list layout + pills + stripe ===== */
  @media (max-width:720px){
    .banner{
      padding: 14px 12px 12px;
      gap: 12px;
    }
    .banner h1{ font-size:17px; }

    .banner .controls{ gap:8px; }
    input[type="search"]{ min-width:0; width:100%; }
    button{ width:100%; }
    .banner .controls button{ flex:1 1 48%; }

    .wrap{
      padding: 10px 12px 14px;
      height: calc(100vh - 126px);
    }

    /* rows become 2 columns: gutter + content */
    .hideCsi .row,
    .showCsi .row{
      grid-template-columns: 44px 1fr;
      gap: 6px 10px;
      align-items:start;
    }

    .row:not(.header){
      padding: 12px var(--pad);
      position:relative;
    }

    /* hide desktop header labels */
    .row.header .cell:nth-child(2),
    .row.header .cell:nth-child(3),
    .row.header .cell:nth-child(4),
    .row.header .cell:nth-child(5){ display:none; }

    /* gutter stays left; never stacks */
    .row > .cell:nth-child(1){
      grid-column:1;
      grid-row:1 / span 3;
      padding-left:0 !important;
      display:flex;
      align-items:flex-start;
    }

    .toggle{
      width:28px;
      height:28px;
      border-radius:8px;
    }

    /* always show CSI on mobile */
    .hideCsi .csiCol{ display:block; }

    /* wrap content */
    .row:not(.header) .cell{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
    }

    /* content cells live in column 2 */
    .row:not(.header) .cell:nth-child(2),
    .row:not(.header) .cell:nth-child(3),
    .row:not(.header) .cell:nth-child(4),
    .row:not(.header) .cell:nth-child(5){
      grid-column:2;
    }

    /* hide the desktop "Division" column cell on mobile */
    .row:not(.header) .cell:nth-child(2){ display:none; }

    /* Title row (your JS should add titleCell/titleText + pill) */
    .row:not(.header) .titleCell{
      grid-row:1;
      display:flex;
      align-items:baseline;
      gap:8px;
      font-weight:900;
      line-height:1.2;
    }
    .titleText{ min-width:0; }

    .pill{
      display:inline-flex;
      align-items:center;
      height:20px;
      padding:0 8px;
      border-radius:999px;
      border:1px solid #dbe3ee;
      background:#f6f8fb;
      color:#0f172a;
      font-size:12px;
      font-weight:850;
      flex:0 0 auto;
    }
    .pill.division{ background:#eaf2ff; border-color:#cfe0ff; color:#123a7a; }
    .pill.section{ background:#f1f5f9; }
    .pill.subsection{ background:#ffffff; }

    /* CSI line */
    .row:not(.header) .cell:nth-child(3){
      grid-row:2;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12.5px;
      color:#111827;
    }
    .row:not(.header) .cell:nth-child(3)::before{
      content:"CSI: ";
      color:var(--muted);
      font-weight:650;
      font-family:inherit;
    }

    /* Cost line */
    .row:not(.header) .cell:nth-child(4){
      grid-row:3;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12.5px;
      color:#111827;
    }
    .row:not(.header) .cell:nth-child(4)::before{
      content:"Cost: ";
      color:var(--muted);
      font-weight:650;
      font-family:inherit;
    }

    /* left stripe */
    .row:not(.header)::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      background:#e5e7eb;
    }
    .row.type-division::before{ background:#1d4ed8; }
    .row.type-section::before{ background:#94a3b8; }
    .row.type-subsection::before{ background:#cbd5e1; }

    /* indent content by hierarchy */
    .row.type-section .titleCell,
    .row.type-section .cell:nth-child(3),
    .row.type-section .cell:nth-child(4){ padding-left:10px; }

    .row.type-subsection .titleCell,
    .row.type-subsection .cell:nth-child(3),
    .row.type-subsection .cell:nth-child(4){ padding-left:22px; }
  }