
:root{
  --green:#1f6f43;
  --green-dark:#155333;
  --green-soft:#edf6ef;
  --green-border:#b9d2c0;
  --ink:#183126;
  --muted:#5b6b63;
  --line:#d4ded7;
  --panel:#ffffff;
  --panel-alt:#f8fbf9;
  --blue:#245f91;
  --blue-soft:#edf4fb;
  --amber:#b67800;
  --amber-soft:#fff4d6;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(29,72,47,.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fbfcfb;
  line-height:1.45;
}
button,input,select{font:inherit}
button{touch-action:manipulation}
a{color:#17653a}
.app-header{
  border-bottom:1px solid #e1e8e3;
  background:linear-gradient(180deg,#fff,#f7faf8);
}
.app-header-inner{
  max-width:1380px;
  margin:0 auto;
  padding:24px 28px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.app-header h1{font-size:clamp(1.55rem,2.4vw,2.2rem);margin:0;color:#173d29}
.app-header p{margin:.45rem 0 0;color:var(--muted)}
.app-shell{max-width:1380px;margin:0 auto;padding:20px 28px 40px}
.top-tabs,.sub-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  background:#f5f8f6;
  border:1px solid #d5e0d8;
  border-radius:12px;
  margin-bottom:18px;
}
.tab-button,.subtab-button{
  border:1px solid #9eb2a4;
  background:#fff;
  color:#354b40;
  font-weight:800;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.tab-button.active,.subtab-button.active{
  background:#e9f5ec;
  border-color:#43825b;
  color:#165d36;
  box-shadow:0 1px 5px rgba(0,0,0,.08);
}
.tab-panel,.subtab-panel{display:none}
.tab-panel.active,.subtab-panel.active{display:block}
h2{margin:12px 0 6px;color:#163e29}
h3{color:#194e31}
.note,.info,.warning,.ai-instruction{
  padding:11px 13px;
  margin:10px 0;
  border-radius:7px;
}
.note{background:#eef6f0;border-left:5px solid #2e7d32}
.info{background:#edf4fb;border-left:5px solid #326a9a}
.warning{background:#fff4d6;border-left:5px solid #b67800}
.ai-instruction{background:#e8f3ff;border:2px solid #245f91}
.workflow-panel,.manual-panel,.control-card,.guide-panel,.docs-panel{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin:14px 0;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.manual-panel{
  border-color:#9fb3a7;
  border-left:5px solid #6f8f7a;
  background:#f8faf8;
}
.panel-kicker{
  font-weight:800;
  color:#17653a;
  letter-spacing:.04em;
  font-size:1.02rem;
  margin-bottom:8px;
}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.inline-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.button-row{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0}

.process-action-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0;
}
.process-action-row.align-end{align-self:end;margin:0}
.action-progress{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:6px 10px;
  border:1px solid #bfd4c5;
  border-radius:999px;
  background:#f0f7f2;
  color:#24553a;
  font-size:.9rem;
  font-weight:700;
}
.mini-spinner{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  border:3px solid rgba(31,111,67,.22);
  border-top-color:var(--green);
  animation:spin .75s linear infinite;
}
.prompt-strategy-toolbar{margin-bottom:4px}
.seg-prompt-toolbar{align-items:center}

.result-drawer{
  margin:10px 0;
  border:1px solid #d3ded6;
  border-radius:9px;
  overflow:hidden;
  background:#fbfdfb;
}
.result-drawer>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  color:#315241;
  font-weight:800;
  background:#f2f7f3;
  user-select:none;
}
.result-drawer>summary::-webkit-details-marker{display:none}
.result-drawer>summary::after{
  content:"▾";
  font-size:1rem;
  transition:transform .18s ease;
}
.result-drawer[open]>summary::after{transform:rotate(180deg)}
.result-drawer .drawer-content{
  padding:2px 10px 10px;
  animation:drawer-reveal .18s ease-out;
}
.prompt-drawer .drawer-content{padding:10px}
@keyframes drawer-reveal{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width: 700px){
  .process-action-row{align-items:stretch}
  .process-action-row>.action-button{width:100%}
  .action-progress{width:100%;justify-content:center;border-radius:8px}
}
.wide-button{width:100%;margin:10px 0}
.align-end{align-self:end}
label{display:flex;flex-direction:column;gap:5px;color:#33473d;font-weight:600}
.field-label{font-weight:700;color:#2c4538;margin-bottom:5px}
input[type="text"],input[type="number"],select{
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border:1px solid #bdc9c1;
  border-radius:7px;
  background:#fff;
  color:#203b2d;
}
input[type="range"]{width:100%;accent-color:var(--green)}
input[type="file"]{margin-top:8px}
.checkbox-label{justify-content:center;align-items:flex-start}
.checkbox-label input{width:auto}
.value-chip{
  display:inline-flex;
  width:max-content;
  padding:2px 8px;
  margin-left:4px;
  border-radius:999px;
  background:#e7f2e9;
  color:#175e36;
  font-size:.88rem;
}
.action-button,.secondary-button,.download-button{
  min-height:42px;
  padding:9px 14px;
  border-radius:7px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.action-button{
  background:var(--green);
  color:#fff;
  border:1px solid var(--green-dark);
}
.action-button:hover{background:var(--green-dark)}
.action-button:disabled{background:#8ca79a;color:#f6f6f6;cursor:not-allowed}
.secondary-button{background:#fff;border:1px solid #95a89b;color:#345345}
.secondary-button.active{background:#e4f1e7;border-color:#4b7b5f;color:#164c30}
.prompt-positive.active{background:#e4f6e9;border-color:#268a4c;color:#155c31}
.prompt-negative.active{background:#fde9e9;border-color:#c84d52;color:#8d252a}
.download-button{border:1px solid #1f6f43;background:#edf6ef;color:#165b36}
.download-button.disabled{opacity:.45;pointer-events:none}
.field-block{min-width:0}
.image-stage{
  position:relative;
  width:100%;
  min-height:260px;
  border:1px solid #c9d4cc;
  border-radius:9px;
  background:#111512;
  overflow:hidden;
}
/* Keep the base canvas box aligned with absolute overlays when a very wide
   image would otherwise be shorter than the stage min-height. */
.image-stage > .image-canvas{min-height:inherit}
.upload-stage{cursor:pointer}
.clickable{cursor:crosshair}
.image-canvas,.output-canvas,.pixel-patch-canvas{
  display:block;
  width:100%;
  height:auto;
  max-height:720px;
  object-fit:contain;
  background:#101513;
}
.output-canvas:empty{min-height:170px}
.overlay-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.drawing-layer{pointer-events:auto;touch-action:none}
.empty-image-state{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:20px;
  text-align:center;
  color:#d8e0db;
  background:linear-gradient(145deg,#172019,#26332b);
}
.empty-image-state span{font-size:.9rem;color:#aebbb3}
.hidden{display:none!important}
.model-loader{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px;
  background:rgba(9,21,14,.72);
  color:#fff;
  text-align:center;
  pointer-events:all;
}
.model-loader strong{
  font-size:clamp(1rem,2.4vw,1.65rem);
  text-shadow:0 1px 4px rgba(0,0,0,.65);
}
.spinner{
  width:clamp(54px,9vw,96px);
  aspect-ratio:1;
  border-radius:50%;
  border:8px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.output-card{
  margin:10px 0;
  border:1px solid #d8e1db;
  border-radius:9px;
  overflow:hidden;
  background:#f8faf8;
}
.output-card figcaption{
  padding:8px 10px;
  border-bottom:1px solid #d8e1db;
  color:#344c3f;
  font-weight:700;
}
.status-box{
  min-height:39px;
  padding:9px 10px;
  border:1px solid #d6dfd9;
  border-radius:7px;
  background:#f8faf9;
  color:#485950;
  margin:8px 0;
  white-space:pre-wrap;
}
.compact-controls{display:grid;gap:9px;margin:0}
.download-panel{padding:16px;border:1px dashed #a8b8ad;border-radius:10px;background:#f8fbf9}
.pixel-patch-canvas{max-height:800px;background:#fff}
.step-strip{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 18px}
.step-box{
  display:flex;align-items:center;gap:8px;min-width:145px;flex:1;
  background:#edf6ef;border:1px solid #b9d2c0;border-radius:9px;padding:9px 12px;color:#194e31
}
.step-box span{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:#1f6f43;color:white;font-weight:800
}
.comparison-card{
  border:1px solid #cfdad2;
  border-radius:12px;
  overflow:hidden;
  background:#f8faf9;
  margin:10px 0;
}
.comparison-card-header{
  min-height:130px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px;
}
.comparison-card-header>span:first-child{position:absolute;top:12px;left:14px;font-weight:800}
.comparison-card-header strong{font-size:clamp(2.2rem,6vw,4rem);color:#183b27}
.winner-badge{font-weight:800;color:#7e5a00}
.comparison-card.winner .comparison-card-header{
  background:#fff1aa;
  box-shadow:inset 0 0 0 3px #deb416;
}
.comparison-card.tie .comparison-card-header{background:#e5eee8}
.metrics-wrap{margin:8px 0 12px}
.metrics-title{font-weight:800;color:#194e31;margin-bottom:7px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px}
.metric-card{border:1px solid #d4ded7;border-radius:8px;padding:10px;background:#f8fbf9}
.metric-card span{display:block;font-size:.82rem;color:#596660}
.metric-card strong{display:block;font-size:1.35rem;color:#153c28;margin-top:3px}
.lab-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(260px,1fr);gap:18px}
.lab-side{min-width:0}
.guide-panel,.docs-panel{line-height:1.42}
.guide-panel h3,.docs-panel h3{margin-top:0}
.docs-panel{position:sticky;top:12px}
.threshold-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.threshold-item{
  display:flex;flex-direction:column;gap:5px;
  padding:9px;border:1px solid #d5dfd8;border-radius:7px;background:#fff
}
.docs-inline{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.doc-list{line-height:1.7}
.app-footer{
  border-top:1px solid #dfe6e1;
  background:#f6f9f7;
  color:#52645a;
  padding:18px 28px;
  text-align:center;
  font-size:.9rem;
}
@media(max-width:980px){
  .lab-layout{grid-template-columns:1fr}
  .docs-panel{position:static}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .threshold-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .app-header-inner{flex-direction:column}
  .app-shell{padding:14px 12px 30px}
  .two-col,.grid-2,.grid-4{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .threshold-grid{grid-template-columns:1fr}
  .step-box{min-width:45%}
  .image-stage{min-height:220px}
}

.startup-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #b42318;
  border-radius: 0.65rem;
  background: #fff1f0;
  color: #7a271a;
}

/* ============================================================
   UX v5 - self-contained guidance and first-use assistance
   ============================================================ */
.header-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.header-help-button,.header-tour-button,.text-button,.help-link,.inline-help-button{
  font:inherit;
  cursor:pointer;
}
.header-help-button,.header-tour-button{
  min-height:38px;
  padding:7px 11px;
  border-radius:8px;
  font-weight:800;
}
.header-help-button{background:#fff;border:1px solid #9db2a4;color:#24553a}
.header-tour-button{background:var(--green);border:1px solid var(--green-dark);color:#fff}
.header-tour-button:hover{background:var(--green-dark)}
.first-use-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  margin:-2px 0 18px;
  border:1px solid #bdd6c4;
  border-radius:10px;
  background:linear-gradient(90deg,#f0f8f2,#fbfdfb);
  box-shadow:var(--shadow);
}
.first-use-banner>div:first-child{display:flex;flex-direction:column;gap:2px}
.first-use-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.text-button{
  border:0;
  background:transparent;
  color:#53675c;
  text-decoration:underline;
  padding:8px;
}
.section-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px 0 16px;
  padding:13px 14px;
  border:1px solid #bfd5c5;
  border-left:5px solid var(--green);
  border-radius:9px;
  background:#f3f8f4;
}
.section-intro p{margin:.25rem 0 0;color:#42584c}
.help-link{
  display:inline-flex;
  width:max-content;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  margin:5px 0 8px;
  padding:6px 10px;
  border:1px solid #9eb4a5;
  border-radius:999px;
  background:#fff;
  color:#215b39;
  font-weight:800;
}
.help-link:hover{background:#eef6f0}
.inline-help-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-left:4px;
  border-radius:50%;
  border:1px solid #9eb4a5;
  background:#fff;
  color:#24553a;
  font-weight:900;
}
.task-hint{
  padding:10px 12px;
  margin:6px 0 12px;
  border-radius:8px;
  background:#f3f7f4;
  border:1px solid #d1ded5;
  color:#3d5548;
}
.context-help{
  margin:12px 0;
  border:1px solid #ccd9d0;
  border-radius:9px;
  background:#fbfdfb;
  overflow:hidden;
}
.context-help>summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:800;
  color:#28553b;
  background:#f2f7f3;
}
.context-help-body{padding:2px 14px 12px}
.dataset-availability,.runtime-status{
  padding:8px 9px;
  border-radius:7px;
  background:#f4f7f5;
  border:1px solid #d4ded7;
  color:#53665b;
  font-size:.88rem;
  font-weight:650;
}
.dataset-unavailable{background:#fafafa}
.dataset-unavailable .dataset-availability{
  background:#fff4d6;
  border-color:#e7c978;
  color:#72520c;
}
.runtime-status.info{background:#edf6ef;border-color:#bdd6c4;color:#24553a}
.runtime-status.warning{background:#fff4d6;border-color:#e7c978;color:#72520c}
.small-help{font-size:.9rem;color:#607068}

.help-dialog{
  width:min(720px,calc(100vw - 28px));
  max-height:min(82vh,820px);
  padding:0;
  border:1px solid #b9cbbf;
  border-radius:14px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 24px 70px rgba(12,35,22,.22);
}
.help-dialog::backdrop{background:rgba(12,28,18,.48)}
.help-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #dce5df;
  background:#f4f8f5;
}
.help-dialog-header h2{margin:0;font-size:1.25rem}
.help-dialog-body{padding:14px 18px 18px;overflow:auto}
.help-dialog-body code{
  padding:2px 5px;
  border-radius:5px;
  background:#edf2ee;
  color:#204e33;
}
.dialog-close{
  width:36px;
  height:36px;
  border:1px solid #b7c7bc;
  border-radius:50%;
  background:#fff;
  color:#345345;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

.tour-layer{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}
.tour-card{
  position:fixed;
  right:20px;
  bottom:20px;
  width:min(440px,calc(100vw - 28px));
  padding:15px;
  border:1px solid #9fb8a7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 60px rgba(11,35,21,.28);
  pointer-events:auto;
}
.tour-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-step-label{font-size:.83rem;font-weight:900;color:#2a6843;text-transform:uppercase;letter-spacing:.04em}
.tour-card h3{margin:8px 0 5px}
.tour-card p{margin:0 0 12px;color:#455a4e}
.tour-actions{display:flex;justify-content:flex-end;gap:8px}
.tour-highlight{
  position:relative!important;
  z-index:999!important;
  outline:4px solid #39a866!important;
  outline-offset:5px!important;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(7,23,13,.38)!important;
}

.progress-guide{position:sticky;top:12px}
.progress-checklist{
  list-style:none;
  padding:0;
  margin:10px 0 12px;
  display:grid;
  gap:7px;
}
.progress-checklist li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:1px solid #d4ded7;
  border-radius:8px;
  padding:5px 7px;
  background:#fbfdfb;
}
.progress-checklist button{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  padding:5px;
  background:transparent;
  color:#345345;
  text-align:left;
  font-weight:750;
  cursor:pointer;
}
.progress-checklist button span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#dfe8e2;
  color:#385344;
  font-weight:900;
}
.progress-checklist small{color:#6a786f;font-weight:700}
.progress-checklist li.done{border-color:#abd0b7;background:#edf7f0}
.progress-checklist li.done button span{background:#2f8a50;color:#fff}
.progress-checklist li.done small{color:#22663d}

@media(max-width:760px){
  .header-actions{justify-content:flex-start}
  .first-use-banner,.section-intro{align-items:stretch;flex-direction:column}
  .first-use-actions{justify-content:flex-start}
  .help-link{width:100%}
  .tour-card{right:14px;bottom:14px}
  .tour-highlight{outline-width:3px!important;outline-offset:3px!important}
  .progress-guide{position:static}
}

/* UX v7: dataset leggibile, giorni dalla semina e supporti didattici */
.optional-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  margin-left:4px;
  border-radius:999px;
  background:#eef4ef;
  border:1px solid #cad9ce;
  color:#53675b;
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.035em;
  vertical-align:middle;
}
.dataset-day-field{display:grid;gap:7px;margin-top:2px}
.dataset-day-selector{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,minmax(28px,1fr));
  align-items:start;
  gap:0;
  padding:3px 0 0;
}
.dataset-day-selector::before{
  content:"";
  position:absolute;
  left:6.25%;
  right:6.25%;
  top:13px;
  height:3px;
  border-radius:999px;
  background:#c9d6cd;
}
.dataset-day-dot{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:5px;
  min-width:0;
  padding:3px 0 0;
  border:0;
  background:transparent;
  color:#53675b;
  cursor:pointer;
  font:inherit;
}
.dataset-day-marker{
  width:20px;
  height:20px;
  border:3px solid #91a69a;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px #fff;
}
.dataset-day-label{font-size:.79rem;font-weight:800;line-height:1}
.dataset-day-dot:hover .dataset-day-marker{border-color:#4b8b62}
.dataset-day-dot.active{color:#1f673d}
.dataset-day-dot.active .dataset-day-marker{border-color:#2f8a50;background:#2f8a50}
.dataset-day-dot:focus-visible{outline:2px solid #2f8a50;outline-offset:3px;border-radius:6px}
.dataset-day-dot:disabled{cursor:not-allowed;opacity:.48}

.coverage-rule-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(90px,1fr));
  gap:12px;
  margin:14px 0;
}
.coverage-rule-card{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:10px;
  border:1px solid #d0ddd4;
  border-radius:9px;
  background:#fff;
  text-align:center;
  color:#385245;
}
.coverage-rule-card svg{display:block;width:min(100%,94px);aspect-ratio:1;border-radius:3px}
.coverage-rule-card strong{font-size:.88rem}

.preflight-docs{
  margin:10px 0 16px;
  padding:14px;
  border:1px solid #c7d7cc;
  border-left:5px solid #2f8a50;
  border-radius:10px;
  background:#f7faf8;
}
.preflight-docs>strong{font-size:1.02rem;color:#28553b}
.preflight-docs p{margin:.35rem 0 .7rem;color:#485d51}
.preflight-docs .secondary-button{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

.hybrid-figure{
  margin:14px 0 4px;
  padding:12px;
  border:1px solid #d0ddd4;
  border-radius:10px;
  background:#f8faf8;
}
.hybrid-figure svg{display:block;width:min(100%,560px);margin:0 auto;background:#ecefeb;border-radius:8px}
.hybrid-figure p{margin:9px 0 0!important;font-size:.9rem;color:#4d6155}

@media(max-width:760px){
  .coverage-rule-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}
  .dataset-day-label{font-size:.72rem}
  .dataset-day-marker{width:18px;height:18px}
  .dataset-day-selector::before{top:12px}
}

/* ============================================================
   UX v7.5 - information controls and AI entry emphasis
   ============================================================ */
.header-help-button,
.help-link[data-help-topic],
.inline-help-button{
  border-color:#79a8d8;
  background:#eaf4ff;
  color:#174f82;
  box-shadow:0 1px 2px rgba(24,79,130,.08);
}
.header-help-button:hover,
.help-link[data-help-topic]:hover,
.inline-help-button:hover{
  border-color:#4d87c2;
  background:#dcecff;
  color:#103f6c;
}
.info-button-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:1.25em;
  height:1.25em;
  border:2px solid currentColor;
  border-radius:50%;
  font-family:Georgia, "Times New Roman", serif;
  font-size:.82em;
  font-style:italic;
  font-weight:900;
  line-height:1;
}
.inline-help-button{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:.95rem;
  font-weight:900;
}
.ai-start-drawer{
  border-color:#9b8bc9;
  box-shadow:0 2px 8px rgba(71,48,129,.12);
}
.ai-start-drawer>summary{
  min-height:46px;
  padding:11px 14px;
  background:linear-gradient(135deg,#5b3f9f,#7455b8);
  color:#fff;
  font-size:1.02rem;
  letter-spacing:.01em;
}
.ai-start-drawer>summary:hover{
  background:linear-gradient(135deg,#4b328b,#6546a6);
}
.ai-start-drawer[open]>summary{
  background:#4b328b;
}
.ai-start-drawer>summary::before{
  content:"✦";
  margin-right:2px;
  color:#f2eaff;
  font-size:1.05rem;
}
.ai-start-drawer>summary::after{
  color:#fff;
}



/* ============================================================
   UX v7.8 - clearer entry pages, calibration details and summary
   ============================================================ */
.age-tabs-label{
  margin:2px 0 7px;
  color:#385245;
  font-weight:850;
  letter-spacing:.01em;
}
.selection-intro,.activity-choice-panel{
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin:12px 0 20px;
  padding:22px;
  border:1px dashed #b7c9bd;
  border-radius:12px;
  background:#fafcfb;
  color:#42584c;
  text-align:center;
}
.selection-intro strong,.activity-choice-panel strong{font-size:1.05rem;color:#294d39}
.activity-choice-panel p{margin:.25rem 0 0;max-width:720px}
.activity-choice-tabs{justify-content:center}
.activity-choice-tabs .subtab-button{min-width:min(260px,100%)}
.collapsible-manual{padding:0;overflow:hidden}
.collapsible-manual>summary{
  cursor:pointer;
  padding:13px 14px;
  color:#345345;
  font-weight:800;
  background:#f4f7f5;
  list-style:none;
}
.collapsible-manual>summary::-webkit-details-marker{display:none}
.collapsible-manual>summary::after{content:"▾";float:right;transition:transform .18s ease}
.collapsible-manual[open]>summary::after{transform:rotate(180deg)}
.collapsible-manual-body{padding:2px 14px 14px}
.results-summary{margin-top:8px}
.summary-table-wrap{overflow-x:auto;border:1px solid #d5e0d8;border-radius:9px;background:#fff}
.summary-table{width:100%;border-collapse:collapse;min-width:520px}
.summary-table th,.summary-table td{padding:10px 12px;border-bottom:1px solid #e2e9e4;text-align:left}
.summary-table th{background:#f1f7f3;color:#315241;font-size:.9rem}
.summary-table td:nth-child(2),.summary-table td:nth-child(3),
.summary-table th:nth-child(2),.summary-table th:nth-child(3){text-align:right}
.summary-table tbody tr:last-child td{border-bottom:0}
@media(max-width:760px){
  .age-tabs-label{text-align:left}
  .top-tabs .tab-button{flex:1 1 calc(50% - 6px)}
  .activity-choice-tabs .subtab-button{width:100%}
}
