/* ===========================================================================
 * Pattern Board — app.css                        (extracted from index.html, v4.1.0)
 * ---------------------------------------------------------------------------
 * All page styling. Loaded by index.html as  web/app.css?v=<APP_VERSION>  and
 * served immutable for a year (_headers): BUMP THE STAMP in index.html
 * whenever this file changes, or returning visitors keep the old styles.
 *
 * Layout of this file (in order):
 *   :root + [data-theme=...]   theme variables — every color in the app is a
 *                              var(); the four themes only redefine these
 *   base / typography          body, headings, inputs, buttons
 *   .rail                      the left control column (steps 1-6)
 *   .stage / #canvasHolder     the photo area; canvas pixel size is set by JS
 *   .seg / pills / badges      segmented controls and status chips
 *   #results                   results panel
 *   modal / toast / misc       shot-info dialog, error line, boot box
 *
 * NOTE: index.html and app.js still set ~75 style="" attributes directly;
 * that is why _headers keeps 'unsafe-inline' in style-src (hash allowances
 * cannot cover attributes).
 * ======================================================================== */
/* Shared, non-color tokens */
  :root{
    --radius:10px;
    --mono:"SFMono-Regular",ui-monospace,"Cascadia Code",Consolas,monospace;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }

  /* ===== THEMES =====
     Each theme sets the color tokens. data-theme is applied to <html>.
     Patriot is the default and also lives on :root so the page is themed
     before JS runs. Extra tokens beyond the originals:
       --amber        : PRIMARY accent (var name kept from the old design)
       --amber-soft   : tint behind selected/primary-soft elements
       --btn-on-text  : text color that sits ON a primary (--amber) button
       --stage-1/2    : the image-stage backdrop gradient
       --accent2      : secondary accent (used for the header stripe)        */

  :root,
  html[data-theme="patriot"]{
    --bg:#f4f6fb; --panel:#ffffff; --panel-2:#eef2f9; --line:#d3dbe8;
    --ink:#0f1b33; --ink-dim:#5b6b86;
    --amber:#1e3a8a; --amber-soft:#e3e9f7; --btn-on-text:#ffffff;
    --green:#1e7d3c; --red:#c8102e; --accent2:#c8102e;
    --stage-1:#ffffff; --stage-2:#e7edf7;
    --good-border:#a9d6b5; --soft-border:#c2d0ee; --stage-shadow:rgba(15,27,51,.14);
  }

  /* Original warm "range paper" dark theme */
  html[data-theme="range"]{
    --bg:#14130f; --panel:#1d1b16; --panel-2:#26241d; --line:#3a372d;
    --ink:#ece6d4; --ink-dim:#9b937e;
    --amber:#e8a317; --amber-soft:#3a2f12; --btn-on-text:#1a1407;
    --green:#5fce6b; --red:#f0584f; --accent2:#e8a317;
    --stage-1:#1a1813; --stage-2:#100f0c;
    --good-border:#2f4a32; --soft-border:#4a3c16; --stage-shadow:rgba(0,0,0,.5);
  }

  /* Neutral professional light theme */
  html[data-theme="light"]{
    --bg:#f5f6f7; --panel:#ffffff; --panel-2:#eef0f2; --line:#dcdfe3;
    --ink:#1c2024; --ink-dim:#697079;
    --amber:#3f6f4f; --amber-soft:#e6efe9; --btn-on-text:#ffffff;
    --green:#2f7d4f; --red:#c0392b; --accent2:#3f6f4f;
    --stage-1:#ffffff; --stage-2:#e9ebed;
    --good-border:#bfdcc8; --soft-border:#cfd8d2; --stage-shadow:rgba(20,25,30,.12);
  }

  /* Neutral modern dark (slate blue/grey) theme */
  html[data-theme="slate"]{
    --bg:#0f141b; --panel:#19212c; --panel-2:#222c39; --line:#33404f;
    --ink:#e6edf5; --ink-dim:#8a97a8;
    --amber:#4f9cf0; --amber-soft:#1d2c3f; --btn-on-text:#08121f;
    --green:#54c98a; --red:#f0726b; --accent2:#4f9cf0;
    --stage-1:#1a222d; --stage-2:#0d1219;
    --good-border:#2c4a3a; --soft-border:#2a3d52; --stage-shadow:rgba(0,0,0,.5);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  header{
    border-bottom:1px solid var(--line);
    padding:18px 26px;
    display:flex;align-items:baseline;gap:16px;
    background:linear-gradient(to bottom,var(--panel),var(--bg));
    box-shadow:0 2px 0 0 var(--accent2), 0 4px 0 0 var(--panel), 0 6px 0 0 var(--amber);
    position:relative;z-index:2;
  }
  header h1{
    font-size:19px;font-weight:600;margin:0;letter-spacing:.2px;
  }
  header .sub{margin-left:auto;font-size:12.5px;color:var(--ink-dim)}
  .theme-pick{display:flex;align-items:center;gap:7px;margin-left:18px}
  .theme-pick label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--ink-dim);font-family:var(--mono)}
  .theme-pick select{background:var(--panel-2);color:var(--ink);
    border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;
    font-family:var(--sans);cursor:pointer}
  .theme-pick select:hover{border-color:var(--amber)}
  /* Lock the layout to the viewport so each pane scrolls on its own,
     instead of the whole page scrolling as one long column. */
  .wrap{display:flex;gap:0;height:calc(100vh - 60px);overflow:hidden}
  /* ---- control rail ---- */
  .rail{
    width:340px;flex:none;border-right:1px solid var(--line);
    padding:22px;overflow-y:auto;background:var(--panel);height:100%;
  }
  .step{margin-bottom:26px}
  .step-head{
    display:flex;align-items:center;gap:9px;margin-bottom:12px;
  }
  .step-num{
    font-family:var(--mono);font-size:11px;font-weight:600;
    width:22px;height:22px;flex:none;border-radius:50%;
    border:1px solid var(--line);color:var(--ink-dim);
    display:grid;place-items:center;
  }
  .step.active .step-num{border-color:var(--amber);color:var(--amber)}
  /* v3.8.0: a completed step gets a filled marker so progress is obvious */
  .step.done .step-num{background:var(--green);border-color:var(--green);color:#fff}
  .step-head h2{font-size:13.5px;font-weight:600;margin:0;letter-spacing:.2px}
  /* v3.8.0: marks steps you can skip, so the sequence doesn't look blocked */
  .opt{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.6px;
    text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);
    border-radius:20px;padding:2px 7px;margin-left:auto;flex:none}
  .hint{font-size:12px;color:var(--ink-dim);margin:0 0 12px}
  label.fld{display:block;font-size:12px;color:var(--ink-dim);margin:10px 0 4px}
  input[type=number],input[type=file]{
    width:100%;background:var(--panel-2);border:1px solid var(--line);
    color:var(--ink);border-radius:7px;padding:8px 10px;font-size:13px;
    font-family:var(--sans);
  }
  input[type=file]{padding:7px;font-size:12px}
  .slider-row{margin:14px 0}
  .slider-row .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
  .slider-row .lab b{font-family:var(--mono);color:var(--amber);font-weight:600}
  input[type=range]{width:100%;accent-color:var(--amber);height:4px}
  .seg{display:flex;gap:6px;margin-top:4px}
  .seg button{
    flex:1;background:var(--panel-2);border:1px solid var(--line);
    color:var(--ink-dim);border-radius:7px;padding:7px 4px;font-size:12px;
    cursor:pointer;transition:.12s;
  }
  .seg button.on{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
  .seg button:hover{color:var(--ink)}
  /* v3.4.0: a one-shot tool that is armed and waiting for its click */
  .seg button.arming{animation:armPulse 1.2s ease-in-out infinite}
  @keyframes armPulse{0%,100%{opacity:1}50%{opacity:.55}}
  .clay-list{display:flex;flex-direction:column;gap:7px;margin-top:4px}
  .clay-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);
    border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer;
    transition:.12s;user-select:none}
  .clay-row:hover{border-color:var(--ink-dim)}
  .clay-row.on{border-color:var(--amber);background:var(--amber-soft)}
  .clay-row input{accent-color:var(--amber);width:15px;height:15px;flex:none}
  .clay-row .nm{font-size:13px;flex:1}
  .clay-row.on .nm{color:var(--amber)}
  .clay-row .mm{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
  /* image tabs (multi mode) */
  .img-tabs{display:flex;flex-direction:column;gap:6px;margin-top:12px}
  .img-tab{display:flex;align-items:center;gap:9px;background:var(--panel-2);
    border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;transition:.12s}
  .img-tab:hover{border-color:var(--ink-dim)}
  .img-tab.active{border-color:var(--amber);background:var(--amber-soft)}
  .img-tab img{width:38px;height:30px;object-fit:cover;border-radius:4px;flex:none;background:#000}
  .img-tab .nm{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .img-tab .st{font-family:var(--mono);font-size:9.5px;color:var(--ink-dim)}
  .img-tab .st.done{color:var(--green)}
  .img-tab .del{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:14px;padding:0 2px}
  .img-tab .del:hover{color:var(--red)}
  .img-add{background:var(--panel-2);border:1px dashed var(--line);color:var(--ink-dim);
    border-radius:8px;padding:8px;font-size:12px;cursor:pointer;text-align:center}
  .img-add:hover{border-color:var(--amber);color:var(--amber)}
  /* v3.0.3: shot info modal */
  .shot-modal{position:fixed;inset:0;z-index:60;display:none;
    background:rgba(0,0,0,.45);align-items:center;justify-content:center}
  .shot-modal.open{display:flex}
  .shot-card{background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);width:min(560px,94vw);max-height:90vh;
    overflow-y:auto;padding:20px 22px}
  .shot-card h2{margin:0 0 4px;font-size:16px}
  .shot-card .sect{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--amber);font-weight:700;margin:16px 0 6px;font-family:var(--mono)}
  .shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .shot-grid .full{grid-column:1 / -1}
  .shot-card label{display:block;font-size:11.5px;color:var(--ink-dim);margin:0 0 3px}
  .shot-card input,.shot-card select{width:100%;background:var(--panel-2);
    color:var(--ink);border:1px solid var(--line);border-radius:7px;
    padding:7px 9px;font-size:13px;font-family:var(--sans)}
  .shot-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
  /* v3.6.0: saved gun / ammo profile bar under each section header */
  .prof-bar{display:flex;gap:6px;align-items:center;margin:0 0 8px;flex-wrap:wrap}
  .prof-bar select{flex:1;min-width:120px;background:var(--panel-2);color:var(--ink);
    border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:12.5px}
  .prof-bar .btn-sm{padding:6px 10px;white-space:nowrap}
  .prof-bar .btn-sm.danger{color:var(--red);border-color:var(--soft-border)}
  .prof-hint{font-size:11px;color:var(--ink-dim);margin:0 0 10px}
  .btn{
    width:100%;background:var(--amber);color:var(--btn-on-text);border:none;
    border-radius:8px;padding:12px;font-size:14px;font-weight:600;
    cursor:pointer;margin-top:8px;letter-spacing:.2px;transition:.12s;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn:disabled{opacity:.4;cursor:not-allowed}
  .btn.ghost{background:transparent;color:var(--ink-dim);border:1px solid var(--line)}
  .btn.ghost:hover{color:var(--ink);border-color:var(--ink-dim)}
  /* v3.8.0: side-panel action buttons.
     These used to be faint transparent outlines in dim grey, which read as
     labels rather than things you click. They now have a raised surface, full
     ink-colour text and a visible press state. `.action` is the primary
     click-something-on-the-photo button and spans the full width so it can't
     be mistaken for a caption; `.btn-sm` alone stays for small secondary
     actions (Clear, Reset) that sit beside it. */
  .btn-sm{
    background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
    border-radius:7px;padding:7px 12px;font-size:12.5px;font-weight:500;
    cursor:pointer;transition:.12s;font-family:var(--sans);
  }
  .btn-sm:hover{border-color:var(--ink-dim);background:var(--panel)}
  .btn-sm:active{transform:translateY(1px)}
  .btn-sm.on{background:var(--amber);color:var(--btn-on-text);border-color:var(--amber);font-weight:600}
  /* Primary "go click on the photo" action */
  .btn-sm.action{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px 12px;font-size:13px;font-weight:600;
    border-color:var(--soft-border);color:var(--amber);
    background:var(--amber-soft);
  }
  .btn-sm.action:hover{border-color:var(--amber);background:var(--amber-soft);filter:brightness(1.04)}
  .btn-sm.action.on{background:var(--amber);color:var(--btn-on-text);border-color:var(--amber)}
  /* A row holding a primary action plus its small secondary buttons */
  .act-row{display:flex;gap:7px;align-items:stretch;margin-top:8px}
  .act-row .btn-sm.action{flex:1}
  .act-row .btn-sm:not(.action){flex:none;white-space:nowrap}
  /* Sub-section inside a step: a titled group with a divider above it */
  .sub{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
  .sub:first-of-type{margin-top:12px}
  .sub-t{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    color:var(--ink);margin:0 0 3px;letter-spacing:.1px}
  .sub-d{font-size:11.5px;color:var(--ink-dim);margin:0 0 8px;line-height:1.45}
  /* Numbered instruction line inside a step.
     v3.8.1: the circle style is scoped to the FIRST child only. It used to
     match every <b> in the line, so an inline <b>two points</b> in the
     sentence was squeezed into a 17px circle and the text overlapped itself.
     Inline emphasis now uses <strong>. */
  .do{display:flex;gap:8px;align-items:flex-start;font-size:12px;
    color:var(--ink-dim);margin:0 0 8px;line-height:1.5}
  .do > b:first-child{flex:none;width:17px;height:17px;border-radius:50%;
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    font-size:10px;font-weight:700;display:grid;place-items:center;
    margin-top:1px;font-family:var(--mono)}
  .do strong{font-weight:600;color:var(--ink)}
  .pill{
    display:inline-block;font-family:var(--mono);font-size:11px;
    padding:3px 8px;border-radius:20px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--ink-dim);margin-top:8px;
  }
  .pill.good{color:var(--green);border-color:var(--good-border)}
  /* ---- stage ---- */
  .stage{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;position:relative} /* v3.0.7: anchor zoom badge */
  .canvas-area{
    flex:1;position:relative;display:grid;place-items:safe center;
    padding:26px;overflow:auto;background:
      radial-gradient(circle at 50% 40%,var(--stage-1),var(--stage-2));
  }
  .empty{text-align:center;color:var(--ink-dim);max-width:340px}
  .empty .big{font-size:15px;color:var(--ink);margin-bottom:6px}
  #canvasHolder{position:relative;line-height:0;box-shadow:0 8px 30px var(--stage-shadow)}
  /* v3.0.7: canvas display size is controlled by the zoom system (style
     width/height). Backing pixels are untouched — zoom is display-only. */
  canvas{display:block;border:1px solid var(--line)}
  /* v3.0.10: info bubbles — compact ⓘ dots with hover/click popovers */
  .info-dot{display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;border:1px solid var(--ink-dim);
    color:var(--ink-dim);font-size:10px;font-weight:700;font-family:var(--mono);
    cursor:help;margin-left:6px;vertical-align:middle;user-select:none;flex:none}
  .info-dot:hover,.info-dot.open{border-color:var(--amber);color:var(--amber)}
  #infoPop{position:fixed;z-index:80;max-width:270px;background:var(--panel);
    border:1px solid var(--line);border-radius:8px;padding:9px 11px;
    font-size:12px;line-height:1.5;color:var(--ink);
    box-shadow:0 6px 24px rgba(0,0,0,.22);display:none}
  #infoPop.show{display:block}
  .zoom-badge{position:absolute;top:12px;right:14px;z-index:5;
    background:var(--panel);border:1px solid var(--line);color:var(--ink);
    font-family:var(--mono);font-size:11.5px;padding:4px 9px;border-radius:14px;
    opacity:0;transition:opacity .25s;pointer-events:none}
  .zoom-badge.show{opacity:.92}
  .mode-banner{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    background:var(--amber);color:var(--btn-on-text);font-size:12.5px;font-weight:600;
    padding:7px 16px;border-radius:30px;z-index:5;box-shadow:0 4px 16px rgba(0,0,0,.4);
    white-space:nowrap;
  }
  /* ---- results ---- */
  .results{
    border-top:1px solid var(--line);background:var(--panel);
    padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .results.show{max-height:340px;overflow-y:auto}
  /* v3.1.0: results header + minimized state */
  .results-head{display:flex;align-items:center;gap:12px;padding:8px 26px;
    border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
  .results-head .rh-title{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
    font-weight:700;color:var(--amber);font-family:var(--mono)}
  .results-head .rh-sum{font-size:12px;color:var(--ink-dim);flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .results-head button{background:var(--panel-2);border:1px solid var(--line);
    color:var(--ink);border-radius:6px;width:26px;height:22px;cursor:pointer;
    font-size:13px;line-height:1}
  .results-head button:hover{border-color:var(--amber)}
  .results.show.min{max-height:40px;overflow:hidden}
  .results.min .results-inner{display:none}
  .results-inner{padding:20px 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
  .res-block h3{
    font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--amber);margin:0 0 10px;font-weight:600;
  }
  .big-num{font-size:34px;font-weight:700;line-height:1;font-family:var(--mono)}
  .big-num small{font-size:13px;color:var(--ink-dim);font-weight:400;letter-spacing:0}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  td{padding:3px 0;border-bottom:1px solid var(--line)}
  td.r{text-align:right;font-family:var(--mono);color:var(--ink)}
  td.k{color:var(--ink-dim)}
  .bar{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-top:3px}
  .bar i{display:block;height:100%;background:var(--amber)}
  .dl{display:inline-block;margin-top:6px;color:var(--amber);font-size:12.5px;text-decoration:none}
  .dl:hover{text-decoration:underline}
  .spinner{
    width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--amber);
    border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .err{color:var(--red);font-size:12.5px;margin-top:8px}
  /* v4.0.0-beta: engine-boot progress. The page is visible immediately, but
     the photo input stays disabled behind this bar until the in-browser
     analysis engine (Pyodide + numpy/scipy/OpenCV) reports ready. */
  .boot{margin-top:8px;padding:9px 10px;background:var(--panel-2);
    border:1px solid var(--line);border-radius:7px}
  .boot .bt{font-size:12.5px;color:var(--ink);margin-bottom:6px}
  .boot .bs{font-size:11.5px;color:var(--ink-dim);margin-top:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .boot .bar{height:7px}
  .boot.err .bt{color:var(--red)}
  #file:disabled{opacity:.45;cursor:not-allowed}
  @media(max-width:820px){
    .wrap{flex-direction:column;height:auto;overflow:visible}
    .rail{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--line)}
    .stage{height:auto;overflow:visible}
    .canvas-area{overflow:visible}
  }