/* ===========================================================================
   mgtx-xlwings-utils — shared visualization stylesheet (the visual language)
   ---------------------------------------------------------------------------
   Every colour visualization page links this file:  <link rel="stylesheet"
   href="assets/viz.css">  and composes the documented classes below. Do NOT
   invent ad-hoc inline colours — use these roles so all pages stay consistent.

   CLASS VOCABULARY
   ----------------
   Page chrome
     body > .page            page wrapper (centres content)
     h1 / h2 / h3            headings (h2 carries the section rule)
     p.lead                  grey intro paragraph under the h1
     .nav                    top breadcrumb / "back to docs" bar
     .card                   white rounded section container (one scenario)
     .card.hidden            hidden (used with .controls toggles)
     .step                   numbered step heading inside a card

   Status badges            <span class="badge safe|refused|info|new">TEXT</span>
     safe (green) · refused (red) · info (blue) · new (teal)

   Before/after layout
     .two-cols               2-column grid (Before | After), stacks on mobile
     .col-title              small uppercase label above a grid ("BEFORE")
     .arrow-between          big → between the two columns

   Excel grid               <div class="grid" style="--cols:7">… cells …</div>
     .grid                   CSS-grid Excel mockup; set --cols to data col count
     .col-label / .row-label header letter / row number chrome cells
     .cell                   a worksheet cell (white by default)
     cell role modifiers (add to .cell):
       .title        merged table-title band      (blue, bold, spans cols)
       .header       managed-table header cell     (strong blue)
       .data         live data cell                (light blue)
       .new-col      newly added column on widen    (green, dashed-emphasis)
       .selected     "highlight/select this before init"  (amber ring)
       .cleared      cell cleared by an operation    (grey, dashed, italic)
       .shift-zone   rows inserted/shifted           (yellow)
       .danger       danger-zone / would-be-clobbered(orange)
       .neighbor     a stacked neighbour table       (purple)
       .refused      cell involved in a refused op   (red)
       .empty        intentionally empty / gap       (faint)
     .cell .tag                tiny corner tag inside a cell
     .gap-row                  full-width "(gap)" divider row inside a grid
     .marker                   full-width dashed annotation line in a grid

   Legend                   <div class="legend"> <span class="legend-item">
                              <span class="swatch header"></span> Header</span> …
   Controls (optional)      <div class="controls"> <button class="active">…
   Callout / note           <p class="note"> … </p>   (left-bordered tip)
   Plate well               .well (square) inside .grid for plate layouts
   =========================================================================== */

* { box-sizing: border-box; }

:root {
  --c-header:   #b9d7ff;  --c-header-bd:#2873d3;  --c-header-fg:#0d3a7a;
  --c-data:     #d4e7ff;  --c-data-bd:  #4a90e2;  --c-data-fg:  #1a5490;
  --c-new:      #d4edda;  --c-new-bd:   #155724;  --c-new-fg:   #155724;
  --c-sel:      #fff3cd;  --c-sel-bd:   #e0a800;  --c-sel-fg:   #7a5b00;
  --c-clear:    #f0f0f0;  --c-clear-bd: #aaaaaa;  --c-clear-fg: #888888;
  --c-shift:    #fff8e1;  --c-shift-bd: #f0ad4e;  --c-shift-fg: #6b4a14;
  --c-danger:   #ffe6cc;  --c-danger-bd:#e88c2e;  --c-danger-fg:#8b4500;
  --c-neighbor: #ede7f6;  --c-neighbor-bd:#7e57c2;--c-neighbor-fg:#4527a0;
  --c-refused:  #f8d7da;  --c-refused-bd:#dc3545; --c-refused-fg:#721c24;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1d1d1f; background: #f5f6f8; line-height: 1.55; margin: 0;
}
.page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.2px; }
h2 {
  font-size: 19px; margin: 34px 0 12px; padding-bottom: 6px;
  border-bottom: 2px solid #e3e6ea; display: flex; align-items: center; gap: 12px;
}
h3 { font-size: 15px; margin: 18px 0 8px; color: #333; }
p { margin: 9px 0; }
p.lead { color: #5a5f66; font-size: 15px; margin-bottom: 22px; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "SF Mono", Consolas, monospace; font-size: 0.9em;
       background: #eef1f4; padding: 1px 5px; border-radius: 4px; }

.nav { font-size: 13px; color: #888; margin-bottom: 18px; }

.card {
  background: #fff; padding: 20px 24px; border-radius: 12px;
  border: 1px solid #e3e6ea; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.card.hidden { display: none; }
.step { font-weight: 700; color: #0066cc; margin: 14px 0 6px; }

.badge {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 12px;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.badge.safe    { background: #d4edda; color: #155724; }
.badge.refused { background: #f8d7da; color: #721c24; }
.badge.info    { background: #cfe2ff; color: #084298; }
.badge.new     { background: #c9f0e4; color: #0b6e54; }

.two-cols {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: center; margin-top: 14px;
}
.two-cols.no-arrow { grid-template-columns: 1fr 1fr; }
.arrow-between { font-size: 30px; color: #9aa0a6; text-align: center; }
.col-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #8a8f96; font-weight: 700; margin-bottom: 8px;
}

.grid {
  display: grid;
  grid-template-columns: 34px repeat(var(--cols, 6), minmax(40px, 1fr));
  gap: 3px; font-size: 11px;
  font-family: "SF Mono", Consolas, monospace;
}
.grid .col-label, .grid .row-label {
  background: #eceef1; color: #6b7177; text-align: center; padding: 5px 0;
  border-radius: 3px; font-weight: 600;
}
.cell {
  background: #fff; border: 1px solid #e0e3e7; border-radius: 3px;
  text-align: center; padding: 7px 2px; position: relative; min-height: 30px;
}
.cell.title    { grid-column: 2 / -1; background: var(--c-header);
                 border-color: var(--c-header-bd); color: var(--c-header-fg); font-weight: 700; }
.cell.header   { background: var(--c-header); border-color: var(--c-header-bd);
                 color: var(--c-header-fg); font-weight: 700; }
.cell.data     { background: var(--c-data); border-color: var(--c-data-bd); color: var(--c-data-fg); }
.cell.new-col  { background: var(--c-new); border: 2px solid var(--c-new-bd); color: var(--c-new-fg); font-weight: 700; }
.cell.selected { background: var(--c-sel); border: 2px solid var(--c-sel-bd); color: var(--c-sel-fg);
                 font-weight: 700; box-shadow: 0 0 0 2px rgba(224,168,0,0.25); }
.cell.cleared  { background: var(--c-clear); border: 1px dashed var(--c-clear-bd);
                 color: var(--c-clear-fg); font-style: italic; }
.cell.shift-zone { background: var(--c-shift); border: 2px solid var(--c-shift-bd); color: var(--c-shift-fg); font-weight: 600; }
.cell.danger   { background: var(--c-danger); border: 2px solid var(--c-danger-bd); color: var(--c-danger-fg); font-weight: 600; }
.cell.neighbor { background: var(--c-neighbor); border-color: var(--c-neighbor-bd); color: var(--c-neighbor-fg); font-weight: 600; }
.cell.refused  { background: var(--c-refused); border: 2px solid var(--c-refused-bd); color: var(--c-refused-fg); font-weight: 700; }
.cell.empty    { background: #fafbfc; border: 1px solid #eef0f2; color: #c4c8cc; }
.cell .tag {
  position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 700;
  opacity: 0.7; text-transform: uppercase;
}
.gap-row, .marker {
  grid-column: 1 / -1; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 6px;
}
.gap-row { color: #9aa0a6; text-align: center; font-style: italic; background: #fafbfc; border-radius: 3px; }
.marker  { color: #155724; border-top: 2px dashed #5cb85c; margin: 1px 0; }
.marker.danger { color: var(--c-danger-fg); border-top-color: var(--c-danger-bd); }

.well { min-height: 36px; display: flex; align-items: center; justify-content: center; font-size: 10px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; font-size: 12px; color: #555; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #ccc; display: inline-block; }
.swatch.header { background: var(--c-header); border-color: var(--c-header-bd); }
.swatch.data { background: var(--c-data); border-color: var(--c-data-bd); }
.swatch.new-col { background: var(--c-new); border-color: var(--c-new-bd); }
.swatch.selected { background: var(--c-sel); border-color: var(--c-sel-bd); }
.swatch.cleared { background: var(--c-clear); border-color: var(--c-clear-bd); }
.swatch.shift-zone { background: var(--c-shift); border-color: var(--c-shift-bd); }
.swatch.danger { background: var(--c-danger); border-color: var(--c-danger-bd); }
.swatch.neighbor { background: var(--c-neighbor); border-color: var(--c-neighbor-bd); }
.swatch.refused { background: var(--c-refused); border-color: var(--c-refused-bd); }

.controls { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
button {
  padding: 8px 14px; font-size: 13px; background: #fff; border: 1px solid #d0d4d8;
  border-radius: 7px; cursor: pointer; font-family: inherit;
}
button.active { background: #0066cc; color: #fff; border-color: #0066cc; }
button:hover:not(.active) { background: #f0f2f5; }

.note {
  background: #f1f7ff; border-left: 4px solid #4a90e2; padding: 10px 14px;
  border-radius: 0 6px 6px 0; margin: 14px 0; font-size: 14px; color: #2c3e50;
}
.note.warn { background: #fff8ee; border-left-color: #e88c2e; }

@media (max-width: 760px) {
  .two-cols, .two-cols.no-arrow { grid-template-columns: 1fr; }
  .arrow-between { transform: rotate(90deg); }
}