/* ============================================================
   EWAT · Extreme Weather Action Team
   Apple-inspired design system
   ============================================================ */

:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-2:#fafafc;
  --ink:#1d1d1f;
  --ink-2:#515154;
  --ink-3:#86868b;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.05);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 2px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.09);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.14);
  --green:#34c759; --amber:#ff9500; --red:#ff3b30; --blue:#0071e3;
  --green-soft:#e8f9ee; --amber-soft:#fff3e0; --red-soft:#ffebe9; --blue-soft:#e8f2fd;
  --ease:cubic-bezier(.32,.72,0,1);
  --accent:#ff6b3d; --accent-2:#ff3b30;
  --accent-soft:#fff1ec;
  --hero-grad:linear-gradient(120deg,#2a1a12 0%,#7a2b12 45%,#e2571f 80%,#ffb24d 108%);
  font-size:16px;
}

body[data-theme="heat"]   { --accent:#ff6b3d; --accent-2:#ff3b30; --accent-soft:#fff1ec; --hero-grad:linear-gradient(120deg,#231007 0%,#7a2b12 45%,#e2571f 80%,#ffb24d 108%); }
body[data-theme="cold"]   { --accent:#3d8bff; --accent-2:#5e5ce6; --accent-soft:#ecf3ff; --hero-grad:linear-gradient(120deg,#0b1b33 0%,#123a6e 45%,#2f7fd6 82%,#9fd4ff 110%); }
body[data-theme="wind"]   { --accent:#2fb5a8; --accent-2:#0e8f83; --accent-soft:#e9f8f6; --hero-grad:linear-gradient(120deg,#0c2624 0%,#0e5c54 48%,#2fb5a8 85%,#b8efe8 112%); }
body[data-theme="flood"]  { --accent:#0a84ff; --accent-2:#0060cd; --accent-soft:#e9f3ff; --hero-grad:linear-gradient(120deg,#061a2e 0%,#0a3a66 45%,#0a84ff 85%,#7cc4ff 112%); }
body[data-theme="lightning"]{ --accent:#af52de; --accent-2:#7d3ac1; --accent-soft:#f6edfc; --hero-grad:linear-gradient(120deg,#160b26 0%,#3c1a63 45%,#8145cf 82%,#e2b1ff 110%); }
body[data-theme="fog"]    { --accent:#8e8e93; --accent-2:#636366; --accent-soft:#f1f1f3; --hero-grad:linear-gradient(120deg,#1c1c1e 0%,#48484a 50%,#8e8e93 85%,#d8d8dc 112%); }

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
input,select,textarea{font:inherit; color:inherit;}
a{color:inherit; text-decoration:none;}
[hidden]{display:none !important;}

/* ================= App bar ================= */
.appbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(251,251,253,.78); border-bottom:1px solid var(--line-2);
}
.appbar-inner{
  max-width:1200px; margin:0 auto; padding:0 24px; height:56px;
  display:flex; align-items:center; gap:28px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em;}
.brand-mark{
  width:32px;height:32px; display:grid; place-items:center; border-radius:9px;
  background:var(--hero-grad); color:#fff; font-size:16px;
  box-shadow:var(--shadow-sm);
}
.brand-text{font-size:1.05rem; line-height:1.05; display:flex; flex-direction:column;}
.brand-sub{font-size:.62rem; font-weight:500; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;}
.appnav{display:flex; gap:4px; flex:1;}
.appnav a{
  padding:7px 13px; border-radius:999px; font-size:.86rem; font-weight:500; color:var(--ink-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.appnav a:hover{background:rgba(0,0,0,.05);}
.appnav a.active{background:var(--ink); color:#fff;}
.appbar-right{display:flex; align-items:center; gap:10px; position:relative;}
.event-pill{
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-2); white-space:nowrap;
}
.icon-btn{
  width:32px; height:32px; display:grid; place-items:center; border-radius:999px; color:var(--ink-2);
  transition:background .2s;
}
.icon-btn:hover{background:rgba(0,0,0,.06);}
.menu{
  position:absolute; right:0; top:44px; min-width:220px; padding:6px;
  background:var(--surface); border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--line-2);
  display:flex; flex-direction:column; z-index:80;
  animation:menuIn .28s var(--ease);
}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px) scale(.98);} to{opacity:1; transform:none;}}
.menu button{text-align:left; padding:9px 12px; border-radius:9px; font-size:.88rem; font-weight:500;}
.menu button:hover{background:var(--surface-2);}
.menu button.danger{color:var(--red);}
.menu hr{border:0; border-top:1px solid var(--line-2); margin:5px 8px;}

/* ================= Layout ================= */
#app{flex:1; width:100%;}
.view{max-width:1200px; margin:0 auto; padding:34px 24px 80px;}
.view.enter{animation:viewIn .55s var(--ease);}
@keyframes viewIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.appfoot{
  max-width:1200px; margin:0 auto; width:100%; padding:22px 24px 34px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.75rem; color:var(--ink-3); border-top:1px solid var(--line-2);
}

/* ================= Type ================= */
.eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:10px;
}
h1.display{font-size:clamp(2rem,4.4vw,3.1rem); font-weight:700; letter-spacing:-.03em; line-height:1.06;}
.lede{font-size:1.05rem; color:var(--ink-2); margin-top:12px; max-width:640px; line-height:1.55;}
.section-title{font-size:1.35rem; font-weight:700; letter-spacing:-.02em;}
.section-sub{font-size:.9rem; color:var(--ink-3); margin-top:4px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:44px 0 18px;}

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px; font-size:.92rem; font-weight:600;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, opacity .2s;
  will-change:transform;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-accent{background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow-sm);}
.btn-accent:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-ghost{background:rgba(0,0,0,.05); color:var(--ink);}
.btn-ghost:hover{background:rgba(0,0,0,.09);}
.btn-quiet{color:var(--blue); font-weight:600; padding:8px 10px;}
.btn-quiet:hover{text-decoration:underline;}
.btn[disabled]{opacity:.4; pointer-events:none;}
.btn-sm{padding:7px 15px; font-size:.83rem;}

/* ================= Cards ================= */
.card{
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--line-2);
  padding:26px;
}
.card-hover{transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.card-hover:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}

/* ================= Setup / event chooser ================= */
.setup-hero{text-align:center; padding:44px 0 8px;}
.setup-hero .lede{margin-inline:auto;}
.type-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:36px;
}
.type-card{
  position:relative; border-radius:var(--radius-lg); padding:26px 20px 22px; text-align:center;
  background:var(--surface); border:1.5px solid var(--line); cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.type-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.type-card.selected{border-color:var(--ink); box-shadow:var(--shadow-md);}
.type-card .t-icon{
  width:58px;height:58px; margin:0 auto 14px; display:grid; place-items:center;
  font-size:28px; border-radius:18px; color:#fff; box-shadow:var(--shadow-sm);
}
.type-card h3{font-size:1rem; font-weight:700; letter-spacing:-.01em;}
.type-card p{font-size:.78rem; color:var(--ink-3); margin-top:5px; line-height:1.4;}
.type-card .t-check{
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:999px;
  background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px;
  opacity:0; transform:scale(.5); transition:all .3s var(--ease);
}
.type-card.selected .t-check{opacity:1; transform:scale(1);}
.setup-form{max-width:680px; margin:34px auto 0;}
.setup-actions{display:flex; justify-content:center; margin-top:28px;}

/* ================= Forms ================= */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-2);}
.field .hint{font-size:.75rem; color:var(--ink-3); font-weight:400;}
.control{
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:.95rem; transition:border-color .2s, box-shadow .2s, background .2s;
  width:100%;
}
.control:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft);}
textarea.control{resize:vertical; min-height:88px; line-height:1.5;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media (max-width:640px){.field-row,.field-row-3{grid-template-columns:1fr;}}

/* Segmented control */
.segmented{
  display:inline-flex; background:rgba(0,0,0,.055); border-radius:12px; padding:3px; gap:2px;
}
.segmented button{
  padding:8px 16px; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--ink-2);
  transition:all .25s var(--ease);
}
.segmented button.on{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12);}
.segmented.seg-status button.on[data-val="full"]{color:#1d8a43;}
.segmented.seg-status button.on[data-val="gaps"]{color:#b56a00;}
.segmented.seg-status button.on[data-val="critical"]{color:#c92a22;}
.segmented.seg-rag button.on[data-val="green"]{background:var(--green); color:#fff;}
.segmented.seg-rag button.on[data-val="amber"]{background:var(--amber); color:#fff;}
.segmented.seg-rag button.on[data-val="red"]{background:var(--red); color:#fff;}

/* Toggle */
.toggle{position:relative; width:46px; height:28px; border-radius:999px; background:rgba(0,0,0,.14); transition:background .25s var(--ease); flex:none;}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:999px;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .25s var(--ease);
}
.toggle.on{background:var(--green);}
.toggle.on::after{transform:translateX(18px);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0;}
.toggle-row .t-label{font-size:.92rem; font-weight:600;}
.toggle-row .t-sub{font-size:.78rem; color:var(--ink-3); margin-top:2px;}

/* ================= Dashboard hero ================= */
.hero{
  border-radius:26px; background:var(--hero-grad); color:#fff; overflow:hidden;
  position:relative; padding:38px 40px; box-shadow:var(--shadow-md);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 140% at 90% -20%, rgba(255,255,255,.22), transparent 55%);
  pointer-events:none;
}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; position:relative; z-index:1;}
.hero .eyebrow{color:rgba(255,255,255,.75);}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.08;}
.hero .hero-dates{margin-top:10px; font-size:.95rem; color:rgba(255,255,255,.85); font-weight:500;}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.hero-badge{
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1;}
.hero .btn-light{background:#fff; color:var(--ink);}
.hero .btn-glass{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3);}
.hero .btn-glass:hover{background:rgba(255,255,255,.26);}

/* ================= KPI tiles ================= */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px;}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi{
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm); padding:20px 22px; display:flex; flex-direction:column; gap:4px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); cursor:pointer;
}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.kpi .k-label{font-size:.78rem; font-weight:600; color:var(--ink-3); letter-spacing:.02em;}
.kpi .k-value{font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; display:flex; align-items:baseline; gap:7px;}
.kpi .k-value .k-unit{font-size:.95rem; font-weight:600; color:var(--ink-3);}
.kpi .k-foot{font-size:.78rem; color:var(--ink-3); margin-top:3px;}
.kpi .k-bar{height:5px; border-radius:999px; background:rgba(0,0,0,.07); margin-top:10px; overflow:hidden;}
.kpi .k-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .8s var(--ease);}
.rag-dots{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap;}
.rag-dot{width:14px; height:14px; border-radius:5px;}
.rag-dot.green{background:var(--green);} .rag-dot.amber{background:var(--amber);} .rag-dot.red{background:var(--red);}
.rag-dot.none{background:rgba(0,0,0,.10);}

/* ================= Weather strip ================= */
.weather-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
@media (max-width:900px){.weather-strip{grid-template-columns:repeat(2,1fr);}}
.wday{
  background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm); padding:18px 16px 16px; text-align:center; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wday:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.wday .w-day{font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.wday .w-date{font-size:.72rem; color:var(--ink-3); margin-top:1px;}
.wday .w-icon{font-size:2rem; margin:10px 0 6px;}
.wday .w-temp{font-size:1.55rem; font-weight:700; letter-spacing:-.02em;}
.wday .w-temp small{font-size:.85rem; color:var(--ink-3); font-weight:600;}
.wday .w-meta{font-size:.72rem; color:var(--ink-3); margin-top:6px; line-height:1.5;}
.wday .w-trigger{
  margin-top:10px; font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:999px; display:inline-block;
}
.w-trigger.t-none{background:var(--green-soft); color:#1d8a43;}
.w-trigger.t-watch{background:var(--amber-soft); color:#b56a00;}
.w-trigger.t-action{background:var(--red-soft); color:#c92a22;}
.wday.peak::before{
  content:"PEAK"; position:absolute; top:10px; right:-26px; transform:rotate(38deg);
  background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#fff;
  font-size:.58rem; font-weight:800; letter-spacing:.1em; padding:3px 28px;
}

/* Weather editor table */
.wtable{width:100%; border-collapse:collapse; font-size:.88rem;}
.wtable th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line);
}
.wtable td{padding:8px 8px; border-bottom:1px solid var(--line-2); vertical-align:middle;}
.wtable .control{padding:8px 10px; font-size:.86rem;}

/* Trigger matrix */
.matrix{width:100%; border-collapse:collapse; font-size:.86rem;}
.matrix th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:10px 12px; border-bottom:1px solid var(--line);}
.matrix td{padding:11px 12px; border-bottom:1px solid var(--line-2);}
.matrix tr.hit td{background:var(--accent-soft);}
.matrix .m-temp{font-weight:700; white-space:nowrap;}

/* ================= Unit grid ================= */
.unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px;}
.unit-card{
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm); padding:22px; cursor:pointer; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column; gap:12px;
}
.unit-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.unit-card .u-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.unit-card h3{font-size:1.06rem; font-weight:700; letter-spacing:-.01em;}
.unit-card .u-kind{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:2px;}
.rag-chip{
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.03em;
}
.rag-chip.green{background:var(--green-soft); color:#1d8a43;}
.rag-chip.amber{background:var(--amber-soft); color:#b56a00;}
.rag-chip.red{background:var(--red-soft); color:#c92a22;}
.rag-chip.none{background:rgba(0,0,0,.06); color:var(--ink-3);}
.u-progress{display:flex; align-items:center; gap:10px;}
.u-progress .p-track{flex:1; height:5px; border-radius:999px; background:rgba(0,0,0,.07); overflow:hidden;}
.u-progress .p-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .8s var(--ease);}
.u-progress .p-num{font-size:.74rem; font-weight:700; color:var(--ink-3); min-width:52px; text-align:right;}
.u-meta{display:flex; flex-wrap:wrap; gap:6px;}
.u-tag{font-size:.7rem; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2);}
.u-tag.warn{background:var(--amber-soft); color:#b56a00; border-color:transparent;}
.u-tag.bad{background:var(--red-soft); color:#c92a22; border-color:transparent;}
.u-cta{display:flex; align-items:center; gap:5px; font-size:.85rem; font-weight:600; color:var(--blue); margin-top:auto;}
.u-cta svg{transition:transform .3s var(--ease);}
.unit-card:hover .u-cta svg{transform:translateX(3px);}

/* ================= Wizard ================= */
.wiz-head{display:flex; align-items:center; gap:16px; margin-bottom:8px;}
.wiz-head .back{display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--blue);}
.wiz-title-row{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:10px 0 26px;}

/* Flow rail */
.flow{
  display:flex; align-items:flex-start; margin:0 0 30px; position:relative;
  overflow-x:auto; padding:10px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.flow::-webkit-scrollbar{display:none;}
.flow-step{
  flex:1; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:9px;
  position:relative; cursor:pointer; user-select:none;
}
.flow-step::before{
  content:""; position:absolute; top:19px; left:calc(-50% + 22px); right:calc(50% + 22px);
  height:2.5px; background:rgba(0,0,0,.10); border-radius:2px; z-index:0;
}
.flow-step:first-child::before{display:none;}
.flow-step.done::before, .flow-step.active::before{background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.flow-node{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center; z-index:1;
  background:var(--surface); border:2.5px solid rgba(0,0,0,.13); color:var(--ink-3);
  font-size:.86rem; font-weight:700;
  transition:all .4s var(--ease);
}
.flow-step.active .flow-node{
  border-color:var(--accent); color:var(--accent-2); transform:scale(1.14);
  box-shadow:0 0 0 6px var(--accent-soft);
}
.flow-step.done .flow-node{background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff;}
.flow-label{font-size:.72rem; font-weight:600; color:var(--ink-3); text-align:center; max-width:110px; line-height:1.3; transition:color .3s;}
.flow-step.active .flow-label{color:var(--ink);}

/* Slides */
.wiz-viewport{overflow:hidden; border-radius:var(--radius-lg);}
.wiz-track{display:flex; transition:transform .55s var(--ease); will-change:transform;}
.wiz-slide{
  flex:0 0 100%; min-width:0; padding:2px;
  opacity:.25; transform:scale(.97); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.wiz-slide.current{opacity:1; transform:none;}
.wiz-slide .card{padding:32px;}
@media (max-width:640px){.wiz-slide .card{padding:22px;}}
.slide-head{margin-bottom:22px;}
.slide-head .s-step{font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2);}
.slide-head h2{font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-top:6px;}
.slide-head p{font-size:.92rem; color:var(--ink-2); margin-top:7px; line-height:1.55; max-width:560px;}
.wiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:12px;}
.wiz-nav .spacer{flex:1;}
.save-hint{font-size:.76rem; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px;}
.save-hint .dot{width:7px; height:7px; border-radius:999px; background:var(--green); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* Repeat lists (works / risks) */
.rep-list{display:flex; flex-direction:column; gap:12px;}
.rep-item{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:14px; padding:16px;
  display:grid; gap:10px; position:relative; animation:repIn .4s var(--ease);
}
@keyframes repIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.rep-item .rep-del{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; color:var(--ink-3); background:rgba(0,0,0,.05); font-size:13px;
}
.rep-item .rep-del:hover{background:var(--red-soft); color:var(--red);}
.rep-add{
  border:1.5px dashed rgba(0,0,0,.18); border-radius:14px; padding:13px; text-align:center;
  font-size:.88rem; font-weight:600; color:var(--ink-2); width:100%;
  transition:all .25s var(--ease);
}
.rep-add:hover{border-color:var(--accent); color:var(--accent-2); background:var(--accent-soft);}
.rep-empty{font-size:.85rem; color:var(--ink-3); text-align:center; padding:6px 0 2px;}

/* Review slide */
.review-grid{display:grid; gap:10px;}
.review-row{
  display:flex; gap:14px; align-items:flex-start; padding:13px 16px;
  background:var(--surface-2); border-radius:12px; border:1px solid var(--line-2);
}
.review-row .r-ico{width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; font-size:13px; background:#fff; border:1px solid var(--line-2);}
.review-row .r-body{min-width:0;}
.review-row h4{font-size:.84rem; font-weight:700;}
.review-row p{font-size:.8rem; color:var(--ink-2); margin-top:2px; line-height:1.45; white-space:pre-line;}
.review-row .r-flag{margin-left:auto; flex:none;}
.done-splash{text-align:center; padding:30px 10px 10px;}
.done-splash .big-check{
  width:74px; height:74px; margin:0 auto 18px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(120deg,var(--green),#22a04a); color:#fff; font-size:34px;
  animation:popCheck .6s var(--ease);
  box-shadow:0 10px 30px rgba(52,199,89,.35);
}
@keyframes popCheck{0%{transform:scale(.3); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;}}

/* ================= Command tables ================= */
.cmd-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.cmd-table th{
  text-align:left; padding:10px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:700; border-bottom:1px solid var(--line);
}
.cmd-table td{padding:7px 8px; border-bottom:1px solid var(--line-2);}
.cmd-table td:first-child{font-weight:600; white-space:nowrap; padding-left:12px;}
.cmd-table .control{padding:8px 10px; font-size:.86rem;}
.cmd-state{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 22px; border-radius:var(--radius-md); margin-bottom:18px;
  background:var(--accent-soft); border:1px solid transparent;
}
.cmd-state .cs-text{flex:1; min-width:220px;}
.cmd-state h4{font-size:.95rem; font-weight:700;}
.cmd-state p{font-size:.8rem; color:var(--ink-2); margin-top:3px;}

/* ================= Risk list (dashboard) ================= */
.risk-rows{display:flex; flex-direction:column;}
.risk-row{
  display:flex; gap:14px; align-items:flex-start; padding:14px 4px; border-bottom:1px solid var(--line-2);
}
.risk-row:last-child{border-bottom:0;}
.risk-row .rk-ico{
  width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:16px;
  background:var(--accent-soft);
}
.risk-row h4{font-size:.92rem; font-weight:700;}
.risk-row .rk-unit{font-size:.72rem; font-weight:700; color:var(--accent-2); text-transform:uppercase; letter-spacing:.06em;}
.risk-row p{font-size:.83rem; color:var(--ink-2); margin-top:3px; line-height:1.5;}
.risk-row .rk-mit{font-size:.8rem; color:var(--ink-3); margin-top:4px;}
.risk-row .rk-mit b{color:var(--ink-2); font-weight:600;}
.empty-note{
  text-align:center; color:var(--ink-3); font-size:.88rem; padding:26px 10px;
}

/* Two-col dashboard section */
.dash-cols{display:grid; grid-template-columns:1.6fr 1fr; gap:14px; align-items:start;}
@media (max-width:900px){.dash-cols{grid-template-columns:1fr;}}
.mini-cmd-list{display:flex; flex-direction:column; gap:2px;}
.mini-cmd{display:flex; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line-2); font-size:.86rem;}
.mini-cmd:last-child{border-bottom:0;}
.mini-cmd .mc-role{color:var(--ink-3); font-weight:500;}
.mini-cmd .mc-name{font-weight:600; text-align:right;}
.mini-cmd .mc-name.missing{color:var(--amber); font-weight:600;}

/* ================= Document view ================= */
.doc-actions{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px;}
.doc-preview{
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line-2);
  box-shadow:var(--shadow-md); padding:0; overflow:hidden;
}
.doc-preview-inner{max-height:75vh; overflow-y:auto; padding:40px clamp(20px,6vw,70px);}

/* ================= Toast ================= */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:rgba(29,29,31,.94); color:#fff; padding:11px 22px; border-radius:999px;
  font-size:.88rem; font-weight:500; z-index:100; box-shadow:var(--shadow-lg);
  animation:toastIn .4s var(--ease);
  backdrop-filter:blur(10px);
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translate(-50%,0);}}

/* ================= C&C Document (shared screen + print) ================= */
.ccdoc{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:#111; line-height:1.5; font-size:10.5pt;}
.ccdoc .pg{page-break-after:always; padding:0 0 30px;}
.ccdoc .pg:last-child{page-break-after:auto;}
.ccdoc .official{
  text-align:center; font-size:8pt; letter-spacing:.25em; color:#999; font-weight:700;
  padding:6px 0 18px; text-transform:uppercase;
}
.ccdoc .cover{
  min-height:520px; border-radius:18px; color:#fff; padding:60px 54px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--hero-grad); position:relative; overflow:hidden;
}
.ccdoc .cover .cv-icon{font-size:52px; position:absolute; top:48px; left:54px;}
.ccdoc .cover .cv-route{font-size:11pt; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85;}
.ccdoc .cover h1{font-size:30pt; font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:14px 0 10px;}
.ccdoc .cover .cv-sub{font-size:13pt; opacity:.9;}
.ccdoc .cover .cv-dates{margin-top:26px; font-size:11pt; font-weight:600; background:rgba(255,255,255,.16); display:inline-block; align-self:flex-start; padding:8px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.3);}
.ccdoc h2{
  font-size:15pt; font-weight:700; letter-spacing:-.01em; margin:26px 0 10px;
  padding-bottom:7px; border-bottom:2.5px solid var(--accent);
}
.ccdoc h3{font-size:11.5pt; font-weight:700; margin:18px 0 7px;}
.ccdoc p{margin:7px 0;}
.ccdoc ul{margin:7px 0 7px 20px;}
.ccdoc li{margin:4px 0;}
.ccdoc table{width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:9.5pt;}
.ccdoc th{
  background:#f2f2f4; text-align:left; padding:7px 10px; font-weight:700;
  border:1px solid #ddd; font-size:8.5pt; text-transform:uppercase; letter-spacing:.04em;
}
.ccdoc td{border:1px solid #ddd; padding:7px 10px; vertical-align:top;}
.ccdoc .muted{color:#666;}
.ccdoc .tag-green{color:#1d8a43; font-weight:700;} .ccdoc .tag-amber{color:#b56a00; font-weight:700;} .ccdoc .tag-red{color:#c92a22; font-weight:700;}
.ccdoc .callout{
  background:#f7f7f9; border-left:4px solid var(--accent); border-radius:6px; padding:12px 16px; margin:12px 0;
}
.ccdoc .docmeta td:first-child{font-weight:700; width:34%; background:#fafafa;}

@media print{
  body *{visibility:hidden;}
  .appbar,.appfoot,#app,.toast{display:none !important;}
  #docPrint{display:block !important; visibility:visible; position:absolute; inset:0;}
  #docPrint *{visibility:visible;}
  .ccdoc .cover{border-radius:0; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .ccdoc th{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  @page{margin:16mm 14mm;}
}

/* ================= Responsive tweaks ================= */
@media (max-width:760px){
  .appnav{display:none;}
  .hero{padding:28px 24px;}
  .section-head{flex-direction:column; align-items:flex-start; gap:8px;}
}