/* CAST Imaging sizing calculator v2 -- styles, all scoped under .imaging-sizing so the calculator can sit
   inside another site (Hugo user documentation) without clashing with its theme. Light / dark tokens:
   the OS preference, overridden by data-theme / data-bs-theme ("light" / "dark") on <html> or on the
   wrapper. body.isz-page: the standalone pages only. */
.imaging-sizing{
  --bg:#f5f6f7; --surface:#ffffff; --surface-2:#eef0f1; --border:#dde1e4;
  --text:#181b1d; --text-dim:#5b6266; --accent:#2f6f6a; --accent-ink:#ffffff;
  --warn:#b3541e; --warn-bg:#fbeee4; --ok:#2f6f6a; --ok-bg:#e7f0ef;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) .imaging-sizing:not([data-theme="light"]){
    --bg:#15181a; --surface:#1d2124; --surface-2:#25292c; --border:#33393d;
    --text:#e9ebec; --text-dim:#9aa3a8; --accent:#5fb3ab; --accent-ink:#0d1413;
    --warn:#e0966a; --warn-bg:#2e2019; --ok:#5fb3ab; --ok-bg:#16211f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] .imaging-sizing, :root[data-bs-theme="dark"] .imaging-sizing, .imaging-sizing[data-theme="dark"]{
  --bg:#15181a; --surface:#1d2124; --surface-2:#25292c; --border:#33393d;
  --text:#e9ebec; --text-dim:#9aa3a8; --accent:#5fb3ab; --accent-ink:#0d1413;
  --warn:#e0966a; --warn-bg:#2e2019; --ok:#5fb3ab; --ok-bg:#16211f;
  color-scheme:dark;
}
body.isz-page{margin:0; padding:0; background:#f5f6f7;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.isz-page{background:#15181a;} }
:root[data-theme="dark"] body.isz-page{background:#15181a;}

.imaging-sizing{
  background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.45;
  padding:24px 16px 48px; max-width:1180px; margin:0 auto; text-align:left;
}
.imaging-sizing *, .imaging-sizing *::before, .imaging-sizing *::after{box-sizing:border-box;}
.imaging-sizing [hidden]{display:none !important;}
.imaging-sizing h1, .imaging-sizing h2, .imaging-sizing h3, .imaging-sizing h4{color:var(--text); line-height:1.3; border:none; padding:0;}
.imaging-sizing ul{list-style:disc;}
.imaging-sizing p{margin:0;}
.imaging-sizing h1.isz-title, .imaging-sizing h2.isz-title{font-size:1.5rem; font-weight:700; margin:0 0 10px; letter-spacing:-0.01em; border:none; padding:0;}
.imaging-sizing .sub{
  color:var(--text-dim); font-size:0.88rem; line-height:1.6; margin:0 0 28px; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 20px;
}
.imaging-sizing .sub p + p{margin-top:8px;}
.imaging-sizing .inputs-layout{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin-bottom:28px;}
.imaging-sizing .panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px;}
.imaging-sizing .panel h2{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:0 0 16px; font-weight:600;}
.imaging-sizing .panel .p-note{font-size:0.74rem; color:var(--text-dim); margin:-8px 0 14px; line-height:1.4;}
.imaging-sizing .panel .p-note.p-note-end{margin:0;}
.imaging-sizing .panel .p-note.p-note-top{margin:0 0 10px;}
.imaging-sizing .field{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.imaging-sizing .field label{font-size:0.88rem; color:var(--text); margin:0; font-weight:400;}
.imaging-sizing .field .hint{display:block; font-size:0.74rem; color:var(--text-dim); margin-top:2px;}
.imaging-sizing input[type="number"]{
  width:100px; padding:7px 9px; border-radius:7px; border:1px solid var(--border); margin:0;
  background:var(--surface-2); color:var(--text); font:inherit; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:0.9rem; text-align:right; -moz-appearance:textfield; appearance:textfield;
}
.imaging-sizing input[type="number"]::-webkit-inner-spin-button, .imaging-sizing input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.imaging-sizing select{
  padding:6px 8px; border-radius:7px; border:1px solid var(--border); margin:0; height:auto;
  background:var(--surface-2); color:var(--text); font:inherit; font-size:0.85rem;
}
.imaging-sizing input[type="number"]:focus, .imaging-sizing select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.imaging-sizing .results{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px;}
.imaging-sizing .card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px;
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
.imaging-sizing .card h3{margin:0; font-size:0.98rem; font-weight:600;}
.imaging-sizing .card h4{margin:8px 0 0; font-size:0.84rem; font-weight:600; color:var(--text-dim);}
.imaging-sizing .card.wide{grid-column:1 / -1;}
.imaging-sizing .card.review{border-color:var(--warn);}
.imaging-sizing .card ul{margin:4px 0 0; padding-left:18px; font-size:0.84rem; line-height:1.55;}
.imaging-sizing .metric{display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid var(--border);}
.imaging-sizing .metric:first-of-type{border-top:none; padding-top:2px;}
.imaging-sizing .metric .k{font-size:0.78rem; color:var(--text-dim);}
.imaging-sizing .metric .v{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.imaging-sizing .metric .v.long{font-size:0.76rem; font-weight:500; line-height:1.5; white-space:pre-line;}
.imaging-sizing .badge{
  display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:600;
  padding:2px 8px; border-radius:100px; width:fit-content; letter-spacing:0.02em;
}
.imaging-sizing .badge.ok{background:var(--ok-bg); color:var(--ok);}
.imaging-sizing .badge.warn{background:var(--warn-bg); color:var(--warn);}
.imaging-sizing .explain{
  font-size:0.78rem; color:var(--text-dim); background:var(--surface-2); border-radius:6px; padding:10px 12px; line-height:1.6;
}
.imaging-sizing .disclaimer{
  margin-top:28px; font-size:0.8rem; color:var(--text-dim); line-height:1.6;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 20px; width:100%;
}
.imaging-sizing .disclaimer h2.disclaimer-title{font-size:0.95rem; font-weight:700; margin:0 0 4px;}
.imaging-sizing .disclaimer h3.disclaimer-sub{font-size:0.82rem; font-weight:600; color:var(--text-dim); margin:0 0 6px;}
.imaging-sizing .disclaimer .isz-version{margin-top:10px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:0.74rem;}
.imaging-sizing .warnbox, .imaging-sizing .rangebox{
  background:var(--warn-bg); border:1px solid var(--warn); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; font-size:0.82rem; color:var(--warn); line-height:1.5;
}
.imaging-sizing .notebox, .imaging-sizing .prereqbox{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; font-size:0.82rem; color:var(--text-dim); line-height:1.5;
}
.imaging-sizing .warnbox ul, .imaging-sizing .rangebox ul, .imaging-sizing .notebox ul, .imaging-sizing .prereqbox ul, .imaging-sizing .banner ul{margin:4px 0 0; padding-left:18px;}
.imaging-sizing .warnbox li{margin-bottom:4px;}
.imaging-sizing .prereqbox strong, .imaging-sizing .notebox strong{color:var(--text);}
.imaging-sizing .table-wrap{overflow-x:auto;}
.imaging-sizing table.grid{border-collapse:collapse; width:100%; font-size:0.82rem; margin:0; border:none; display:table;}
.imaging-sizing table.grid th, .imaging-sizing table.grid td{border:none; border-top:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:top; background:transparent; color:var(--text);}
.imaging-sizing table.grid th{color:var(--text-dim); font-weight:600; font-size:0.74rem; white-space:nowrap;}
.imaging-sizing table.grid td{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; overflow-wrap:break-word;}
.imaging-sizing .banner{
  background:var(--warn-bg); border:2px solid var(--warn); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; font-size:0.82rem; color:var(--warn); line-height:1.5;
}
.imaging-sizing .banner summary{cursor:pointer; font-weight:600;}
.imaging-sizing .node-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; font-size:0.8rem;}
.imaging-sizing .node-row input[type="number"]{width:64px;}
.imaging-sizing .node-id{font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--text-dim); width:24px;}
.imaging-sizing fieldset.techs{display:block; border:0; padding:0; margin:0 0 12px; min-width:0;}
.imaging-sizing fieldset.techs legend{font-size:0.88rem; color:var(--text); padding:0; margin-bottom:8px;}
.imaging-sizing fieldset.techs .hint{display:block;}
.imaging-sizing fieldset.techs .check{margin-bottom:6px;}
.imaging-sizing .check{display:flex; align-items:center; gap:8px; font-size:0.85rem; margin-bottom:10px;}
.imaging-sizing .tabs{display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap;}
.imaging-sizing .tab, .imaging-sizing .btn{
  font:inherit; font-size:0.86rem; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; line-height:1.3;
}
.imaging-sizing .tab{border:1px solid var(--border); background:var(--surface); color:var(--text-dim);}
.imaging-sizing .tab[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.imaging-sizing .tab:focus-visible, .imaging-sizing .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.imaging-sizing .step{display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--accent); margin-right:6px;}
/* a select gets its own line under its label, full width: long choices are never cut off */
.imaging-sizing .field:has(> select){flex-direction:column; align-items:stretch; gap:4px;}
.imaging-sizing .field > select{width:100%; max-width:100%;}
.imaging-sizing .rescan-rows .field{flex-direction:row; align-items:center; justify-content:space-between;}
.imaging-sizing .rescan-rows .field > select{width:auto; flex:0 1 auto; min-width:0;}
.imaging-sizing .req{color:var(--warn); font-weight:600;}
.imaging-sizing select.missing{outline:2px solid var(--warn); outline-offset:1px;}
.imaging-sizing .check-panel, .imaging-sizing details.advanced{grid-column:1 / -1;}
.imaging-sizing details.advanced > summary{cursor:pointer; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); font-weight:600;}
.imaging-sizing details.advanced[open] > summary{margin-bottom:16px;}
.imaging-sizing .adv-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px 28px;}
.imaging-sizing .isz-section{margin-bottom:16px;}
.imaging-sizing .section-title{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:24px 0 10px; font-weight:600;}
.imaging-sizing .section-title .step{font-size:0.78rem;}
.imaging-sizing .export{display:flex; gap:10px; flex-wrap:wrap;}
.imaging-sizing .btn{border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);}
.imaging-sizing .btn.secondary{background:var(--surface); color:var(--accent);}
.imaging-sizing details.detail-cards > summary{cursor:pointer; font-size:0.86rem; font-weight:600; color:var(--text-dim); margin:24px 0 12px;}
.imaging-sizing .print-only{display:none;}
/* Phones: each table row becomes a block, each cell under its column name (no sideways scroll). */
@media (max-width: 600px){
  .imaging-sizing table.grid, .imaging-sizing table.grid tbody, .imaging-sizing table.grid tr, .imaging-sizing table.grid td{display:block; width:auto;}
  .imaging-sizing table.grid tr.head{display:none;}
  .imaging-sizing table.grid tr{border-top:1px solid var(--border); padding:6px 0;}
  .imaging-sizing table.grid td{border:none; padding:2px 0; font-family:inherit;}
  .imaging-sizing table.grid td[data-label]:not([data-label=""])::before{content:attr(data-label) ": "; color:var(--text-dim); font-weight:600;}
}
@media print{
  .imaging-sizing{--bg:#fff; --surface:#fff; --surface-2:#f3f3f3; --border:#bbb; --text:#000; --text-dim:#333; --warn:#7a3000; --warn-bg:#fff; color-scheme:light;
    padding:0; max-width:none; font-size:11pt;}
  .imaging-sizing .sub, .imaging-sizing .tabs, .imaging-sizing .inputs-layout, .imaging-sizing .export, .imaging-sizing .isz-banner-slot,
  .imaging-sizing .no-print, .imaging-sizing details.detail-cards{display:none !important;}
  .imaging-sizing .card, .imaging-sizing .warnbox, .imaging-sizing .rangebox, .imaging-sizing .notebox, .imaging-sizing .prereqbox, .imaging-sizing .disclaimer{break-inside:avoid; border-color:#bbb;}
  .imaging-sizing .print-only{display:block !important;}
  body.isz-page{background:#fff;}
}