/* Variables scoped to the tool wrapper — keeps them from conflicting with site CSS */
.lz-wrap {
  --bg:#E4E7E9;--panel:#F4F5F6;--ink:#161A1D;--muted:#5B646B;
  --line:#B9C0C5;--laser:#00A651;--poi:#FF6A13;--warn:#B3261E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lz-wrap{
    --bg:#1B2024;--panel:#242A2F;--ink:#E8EBED;--muted:#9AA4AB;--line:#3A444B;--warn:#FF8A80;
  }
}
:root[data-theme="dark"] .lz-wrap{
  --bg:#1B2024;--panel:#242A2F;--ink:#E8EBED;--muted:#9AA4AB;--line:#3A444B;--warn:#FF8A80;
}

/* Layout */
.lz-wrap{
  max-width:1180px;margin:0 auto;padding:24px 16px 48px;
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;
  color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif;
}
@media (max-width:860px){.lz-wrap{grid-template-columns:1fr}}

.lz-wrap header{grid-column:1/-1}
.lz-wrap header p{color:var(--muted);max-width:70ch;margin:.4rem 0 0}
.lz-wrap h1,.lz-wrap h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;letter-spacing:.01em;margin:0}
.lz-wrap h1{font-size:2.2rem;line-height:1.05}
.lz-wrap h2{font-size:1.3rem;margin-bottom:.5rem}

.lz-wrap section{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}

.lz-wrap label{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:8px;margin:6px 0;font-size:.92rem}
.lz-wrap input,.lz-wrap select{
  font:inherit;padding:5px 7px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--ink);width:100%;font-variant-numeric:tabular-nums;
}
.lz-wrap select{grid-column:1/-1}
.lz-wrap label.full{grid-template-columns:1fr}

.lz-wrap #az h3{font:700 1.1rem "Barlow Condensed",sans-serif;margin:16px 0 4px}
.lz-wrap #az .g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media (max-width:560px){.lz-wrap #az .g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lz-wrap #az figure{margin:0;text-align:center;font-size:.85rem}
.lz-wrap #az svg{width:100%;max-width:130px;height:auto;display:block;margin:0 auto 4px}
.lz-wrap #az figcaption b{display:block;font:700 1rem "Barlow Condensed",sans-serif}
.lz-wrap #az .key{font-size:.82rem;color:var(--muted)}
.lz-wrap #az .key i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin:0 4px 0 10px}

.lz-wrap .row{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:8px;margin:6px 0;font-size:.92rem}
.lz-wrap .info{width:20px;height:20px;border-radius:50%;border:1px solid var(--muted);background:transparent;color:var(--ink);font:600 12px/1 "IBM Plex Sans",sans-serif;padding:0;cursor:pointer;vertical-align:1px}
.lz-wrap .info[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.lz-wrap .pop{border:1px solid var(--line);border-radius:4px;background:var(--bg);padding:10px 12px;margin:4px 0 10px;font-size:.84rem}
.lz-wrap .pop p{margin:0 0 8px}
.lz-wrap .pop table{font-size:.84rem;margin-bottom:8px}
.lz-wrap .pop td,.lz-wrap .pop th{padding:3px 6px}
.lz-wrap button.use{font:600 .84rem "IBM Plex Sans",sans-serif;background:transparent;color:var(--ink);border:1px solid var(--line);padding:2px 8px;border-radius:3px}
.lz-wrap button.use:hover{border-color:var(--ink)}

.lz-wrap input:focus-visible,.lz-wrap select:focus-visible,.lz-wrap button:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.lz-wrap .hint{color:var(--muted);font-size:.82rem;margin:2px 0 10px}
.lz-wrap fieldset{border:0;border-top:1px solid var(--line);margin:12px 0 0;padding:10px 0 0}
.lz-wrap legend{font-weight:600;font-size:.9rem;padding-right:6px}

.lz-wrap .result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.lz-wrap .result div{border-left:4px solid var(--poi);padding:4px 10px}
.lz-wrap .result div.l{border-color:var(--laser)}
.lz-wrap .result b{display:block;font:700 1.8rem/1.1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.lz-wrap .result span{color:var(--muted);font-size:.85rem}

.lz-wrap .tbl{overflow-x:auto}
.lz-wrap table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.9rem}
.lz-wrap th,.lz-wrap td{padding:4px 8px;text-align:right;border-bottom:1px solid var(--line)}
.lz-wrap th:first-child,.lz-wrap td:first-child{text-align:left}
.lz-wrap tr.z td{font-weight:600}

.lz-wrap .warn{color:var(--warn);font-size:.88rem;margin:8px 0 0}
.lz-wrap .note{margin:-4px 0 12px;padding:8px 10px;border-left:4px solid var(--warn);background:var(--bg);font-size:.88rem;max-width:70ch}
.lz-wrap .status{color:var(--muted);font-size:.85rem;margin-left:10px}

.lz-wrap button{font:600 1rem "IBM Plex Sans",sans-serif;background:var(--ink);color:var(--bg);border:0;border-radius:4px;padding:10px 16px;cursor:pointer}
.lz-wrap .sheet{background:#fff;border:1px solid var(--line);max-width:100%;overflow:auto;margin-top:12px}
.lz-wrap .sheet svg{display:block;width:100%;height:auto}

@media print{
  @page{size:letter;margin:0}
  body{background:#fff}
  .lz-wrap>*:not(#out),#out>*:not(.sheet){display:none!important}
  .lz-wrap{display:block;padding:0;max-width:none}
  #out{border:0;padding:0;background:none}
  .sheet{border:0;margin:0;overflow:visible}
  .sheet svg{width:8.5in!important;height:11in!important}
  body.pm #sheet,body:not(.pm) #msheet{display:none!important}
}
