/* ==========================================================================
   home-industries/ind-side.css   ·   INDUSTRIES WE SERVE on phones
   "Side Index" — option 02 of round 2, chosen by the owner 2026-10-02
   (preview: /home-industries-mobile-10/round-2.html).  Applied 2026-10-02.

   WHAT IT IS
   ----------
   At 959px and under (760px until 2026-10-03), the section's card is one fixed box:
     · the group (Consumer (B2C) / Enterprise & B2B) across the top, on its own
       deeper band — two soft keys, the open one white
     · the industries down the left as an index that scrolls inside the box
     · the open industry is white and open to the pane beside it: one white
       path from the group, through the industry, into its content
     · the business types scroll down inside the box, with the site's quiet
       position bar turned on its side
   The box is the same height for every industry, so the page never grows.
   No blue line marks a selected state anywhere: white is what is open.

   HOW IT IS APPLIED
   -----------------
   ind-side.js builds a new element, .isx, straight after the existing
   .v03-card and reads the page's own IW2_DATA — not one word is copied or
   changed. This file shows .isx and hides .v03-card at <=959px only. From
   960px .isx is display:none and the desktop card is exactly what it was:
   nothing here touches a .v03- rule.

   The hide rule carries EIGHT ids because ind-fix.css paints .v03- with seven
   and !important; every other rule only has to name .isx- classes, which no
   other stylesheet knows.

   2026-10-03 — TABLETS TOO (761–959px). Between 761 and 959px the section
   still showed the older stacked card (index.html's .v03 rules at 900px and
   ind-fix.css / ind-launcher.css at 959px: a sideways row of industry tiles
   and word chips, both cut by the card's edge), which the owner had replaced
   on phones. The Side Index now covers every width up to 959px; the desktop
   two-column card, which starts at 960px, is unchanged.
   To return to 760px: put 760px back in the two media queries marked below and
   in ind-side.js (backup: desktop-parity/_live-backup/20261003/home-industries/).

   UNDO: delete the ind-side.css and ind-side.js lines from index.html.
         Backup: home-industries/_live-backup/20261002-side-index/
   ========================================================================== */

#indwork .isx{ display:none; }

@media (max-width:959px){   /* 760px until 2026-10-03; tablets too since then — see the note in the header */

  /* the previous phone card steps aside */
  html body #indwork#indwork#indwork#indwork#indwork#indwork#indwork#indwork .v03-card{ display:none !important; }

  html body #indwork .isx{
    --isx-ink:#0E1E35; --isx-ink2:#2C3A52; --isx-tx:#505C6C; --isx-tx2:#5B6778; --isx-tx3:#41506A; --isx-tab:#33415A; --isx-icn:#5E6B7C;
    --isx-blue:#004594; --isx-surf:#DCE7F8; --isx-band:#C9D8F0; --isx-edge:#D3DAE6;
    --isx-track:#C3D1E7; --isx-knob:#FAFBFC; --isx-knob-ring:#B4C2D8;
    display:block; margin-top:24px; background:#fff; border:1px solid var(--isx-edge); color:var(--isx-ink);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  }
  html body #indwork .isx *{ box-sizing:border-box; }
  /* :where() keeps this reset below every .isx- rule that follows, whatever it names */
  html body #indwork :where(.isx button){ margin:0; padding:0; border:0; border-radius:0; background:none; font:inherit; color:inherit; cursor:pointer;
    -webkit-tap-highlight-color:transparent; }
  html body #indwork .isx svg{ display:block; }
  html body #indwork .isx :focus-visible{ border-radius:0; }

  /* ---- Level 1 · the group: its own deeper band, two soft keys, the open one white ---- */
  html body #indwork .isx-band{ background:var(--isx-band); padding:8px; }
  html body #indwork .isx-grp{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  html body #indwork .isx-grp button{ height:44px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 6px;
    font-size:13.5px; font-weight:700; line-height:1.2; color:var(--isx-tx3); background:rgba(255,255,255,.42); white-space:nowrap; }
  html body #indwork .isx-grp button svg{ width:18px; height:18px; flex:none; }
  html body #indwork .isx-grp button[aria-pressed="true"]{ background:#fff; color:var(--isx-blue); }

  /* ---- the fixed box: one height, whatever is inside ---- */
  html body #indwork .isx-body{ display:grid; grid-template-columns:98px minmax(0,1fr); height:456px; }

  /* ---- Level 2 · the index: scrolls inside the box; both ends soften where it runs on ---- */
  html body #indwork .isx-rail{ position:relative; min-height:0; background:var(--isx-surf); overflow-y:auto; overflow-x:hidden;
    scrollbar-width:none; scroll-snap-type:y proximity;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--ft,26px), #000 calc(100% - var(--fb,36px)), transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 var(--ft,26px), #000 calc(100% - var(--fb,36px)), transparent 100%); }
  html body #indwork .isx-rail::-webkit-scrollbar{ display:none; }
  html body #indwork .isx-rail.is-top{ --ft:0px; }
  html body #indwork .isx-rail.is-bottom{ --fb:0px; }
  html body #indwork .isx-it{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; min-height:78px;
    padding:9px 6px; text-align:center; font-size:12.5px; font-weight:600; line-height:1.2; color:var(--isx-tab); scroll-snap-align:start; }
  html body #indwork .isx-it svg{ width:23px; height:23px; color:var(--isx-icn); }
  /* white is what is open: the open industry has the pane's own white and no edge between them */
  html body #indwork .isx-it[aria-selected="true"]{ background:#fff; color:var(--isx-ink); font-weight:800; }
  html body #indwork .isx-it[aria-selected="true"] svg{ color:var(--isx-blue); }

  /* ---- Level 3 · the pane ---- */
  html body #indwork .isx-pane{ min-width:0; min-height:0; display:flex; flex-direction:column; padding:18px 12px 8px 16px; }
  html body #indwork#indwork .isx-nm{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--isx-ink) !important; }
  html body #indwork .isx-desc{ margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--isx-tx); }
  html body #indwork .isx-lbl{ margin:14px 0 0; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; line-height:1.4;
    letter-spacing:.04em; text-transform:uppercase; color:var(--isx-tx2); text-wrap:balance; }
  html body #indwork .isx-tz{ flex:1; min-height:0; min-width:0; margin-top:6px; display:flex; flex-direction:column; }

  /* the business types scroll down inside the box; the box does not move */
  html body #indwork .isx-well{ position:relative; flex:1; min-height:0; }
  html body #indwork .isx-list{ height:100%; margin:0; padding:0 28px 0 0; list-style:none; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--ft,18px), #000 calc(100% - var(--fb,30px)), transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 var(--ft,18px), #000 calc(100% - var(--fb,30px)), transparent 100%); }
  html body #indwork .isx-list::-webkit-scrollbar{ display:none; }
  html body #indwork .isx-list.is-top{ --ft:0px; }
  html body #indwork .isx-list.is-bottom{ --fb:0px; }
  html body #indwork .isx-list li{ position:relative; margin:0; padding:8px 0 8px 15px; font-size:14px; font-weight:500; line-height:1.14; color:var(--isx-ink2); }
  html body #indwork .isx-list li::before{ content:""; position:absolute; left:0; top:50%; margin-top:-3px; width:6px; height:6px; background:#9DB4D8; }

  /* the site's quiet position bar (home-allwork-ourwork/ourwork.css .mw-bar), turned on its side: press it or drag it */
  html body #indwork .isx-vbar{ position:absolute; right:0; top:2px; bottom:8px; width:20px; cursor:pointer; touch-action:none; }
  html body #indwork .isx-vbar::before{ content:""; position:absolute; top:0; bottom:0; left:8px; width:4px; border-radius:4px; background:var(--isx-track); }
  html body #indwork .isx-vbar i{ position:absolute; left:6px; top:0; width:8px; min-height:28px; border-radius:8px; background:var(--isx-knob);
    box-shadow:inset 0 0 0 1px var(--isx-knob-ring); }
  html body #indwork .isx-vbar.is-off{ visibility:hidden; }
}

/* a wide phone or a phone on its side: the pane is wide enough for two columns of business types */
@media (min-width:560px) and (max-width:959px){
  html body #indwork .isx-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:18px; grid-auto-rows:34px; align-content:start; }
  html body #indwork .isx-list li{ display:flex; align-items:center; padding-top:0; padding-bottom:0; }
}
@media (max-width:380px){
  html body #indwork .isx-list li{ font-size:13.5px; }
}
@media (max-width:350px){
  html body #indwork .isx-it{ font-size:12px; letter-spacing:-.01em; }
  html body #indwork .isx-pane{ padding-left:13px; }
  html body #indwork#indwork .isx-nm{ font-size:20px; }
  html body #indwork .isx-lbl{ letter-spacing:0; }
  html body #indwork .isx-grp button{ font-size:13px; }
  html body #indwork .isx-grp button svg{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  html body #indwork .isx *{ scroll-behavior:auto !important; }
}