:root{--navy-950:#08131f;
  --navy-900:#0d1d2b;
  --navy-800:#142a3a;
  --slate-700:#3d5260;
  --slate-500:#60747f;
  --slate-300:#c7d3d8;
  --mist:#eef3f4;
  --surface:#fff;
  --surface-soft:#f6f9fa;
  --teal:#0d8b86;
  --teal-dark:#086662;
  --blue:#2b6cb0;
  --amber:#d79532;
  --coral:#a94438;
  --line:#d8e2e5;
  --shadow:0 14px 38px rgb(7 27 40 / 9%);
  --radius:12px}

*{box-sizing:border-box}
html{background:var(--mist)}
body{min-width:320px;
  margin:0;
  background:radial-gradient(circle at 92% 0%,rgb(24 139 134 / 10%),transparent 28rem),var(--mist);
  color:var(--navy-900);
  font:15px/1.55 "Trebuchet MS","Segoe UI",sans-serif}

.masthead{min-height:66px;
  padding:0 clamp(18px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#f4fbfc;
  background:var(--navy-950);
  border-bottom:1px solid rgb(255 255 255 / 9%);
  box-shadow:0 2px 14px rgb(3 17 27 / 18%)}
.brand{color:inherit;
  text-decoration:none;
  font:800 13px/1.15 "Segoe UI",sans-serif;
  letter-spacing:.13em}
.brand::before{content:"◎";
  display:inline-block;
  margin-right:9px;
  color:#59d8cf;
  font-size:18px;
  vertical-align:-2px}
.brand span{display:inline-block;
  margin-left:12px;
  padding-left:12px;
  color:#9db2bb;
  border-left:1px solid #536974;
  font:500 12px/1 "Trebuchet MS",sans-serif;
  letter-spacing:.02em}
.badge{max-width:48vw;
  padding:6px 10px;
  color:#b7f1e8;
  background:rgb(13 139 134 / 18%);
  border:1px solid rgb(89 216 207 / 35%);
  border-radius:999px;
  font:700 11px/1.2 "Segoe UI",sans-serif;
  letter-spacing:.03em;
  white-space:nowrap}

main{max-width:1240px;
  margin:auto;
  padding:34px clamp(18px,5vw,72px) 80px}
.loading{margin-top:0}
.panel{margin-top:20px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)}
.hero{position:relative;
  margin:0 0 24px;
  padding:10px 0 25px 20px;
  border-bottom:1px solid var(--line)}
.hero::before{position:absolute;
  top:12px;
  bottom:26px;
  left:0;
  width:4px;
  content:"";
  background:linear-gradient(var(--teal),var(--blue));
  border-radius:4px}
.hero h1{max-width:800px;
  margin:0 0 8px;
  color:var(--navy-950);
  font:800 clamp(32px,5vw,56px)/1.04 "Trebuchet MS","Segoe UI",sans-serif;
  letter-spacing:-.045em}
.eyebrow{margin:0 0 10px;
  color:var(--teal-dark);
  font:800 10px/1.2 "Segoe UI",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase}
.lede{max-width:640px;
  margin:0;
  color:var(--slate-700);
  font-size:18px}
.section-title{display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.section-title h2{margin:0;
  color:var(--navy-900);
  font:800 20px/1.2 "Trebuchet MS","Segoe UI",sans-serif;
  letter-spacing:-.02em}
.section-title span{color:var(--slate-500);
  font-size:12px}
.facts{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start}
.fact{min-width:0;
  padding:12px 14px;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:7px}
.fact small{display:block;
  color:var(--slate-500);
  font:800 10px/1.2 "Segoe UI",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase}
.fact strong{display:block;
  margin-top:4px;
  overflow-wrap:anywhere;
  font-size:15px}
.reading-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px}
.reading{min-width:0;
  padding:16px;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:9px}
.reading h3{margin:0;
  overflow-wrap:anywhere;
  color:var(--slate-700);
  font-size:14px}
.reading .value{margin:12px 0 2px;
  overflow-wrap:anywhere;
  color:var(--navy-950);
  font:800 29px/1.05 "Trebuchet MS",sans-serif}
.unit,.meta,.quiet{color:var(--slate-500);
  font-size:12px}
.flag{display:inline-block;
  margin-left:7px;
  color:var(--coral);
  font:800 10px "Segoe UI",sans-serif;
  letter-spacing:.05em}

.work-card{position:relative;
  margin:14px 0;
  padding:20px 20px 18px;
  background:linear-gradient(110deg,#fff 0%,#f8fbfb 100%);
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:0 5px 16px rgb(7 27 40 / 5%)}
.work-card::after{position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  content:"";
  background:linear-gradient(90deg,var(--teal),var(--blue));
  border-radius:9px 9px 0 0}
.work-card h3{margin:4px 0 8px;
  overflow-wrap:anywhere;
  color:var(--navy-950);
  font-size:19px}
.work-card>p:not(.eyebrow){color:var(--slate-700)}
.actions{display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px}
.button{padding:9px 14px;
  color:#fff;
  background:var(--teal-dark);
  border:1px solid var(--teal-dark);
  border-radius:7px;
  cursor:pointer;
  font:800 12px "Segoe UI",sans-serif}
.button:hover{background:#0a7571}
.button.secondary{color:var(--teal-dark);
  background:transparent}
.button.secondary:hover{background:#e3f3f2}
.button:disabled{opacity:.45;
  cursor:wait}
.dimension-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:10px}
.dimension{--dimension-ink:#6b21a8;
  --dimension-tint:#f3e8ff;
  min-width:0;
  padding:15px;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-top:3px solid var(--dimension-ink);
  border-radius:8px}
.dimension:nth-child(2){--dimension-ink:#1d4ed8;--dimension-tint:#eff6ff}
.dimension:nth-child(3){--dimension-ink:#0f766e;--dimension-tint:#f0fdfa}
.dimension:nth-child(4){--dimension-ink:#92400e;--dimension-tint:#fffbeb}
.dimension h3{margin:0 0 10px;
  overflow-wrap:break-word;
  color:var(--slate-700);
  font-size:14px}
.dimension strong{display:inline-block;
  max-width:100%;
  padding:5px 8px;
  color:var(--dimension-ink);
  background:var(--dimension-tint);
  border-radius:5px;
  white-space:normal;
  overflow-wrap:anywhere;
  font:800 10px/1.4 "Segoe UI",sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase}
.dimension p{margin:10px 0 0;
  overflow-wrap:anywhere;
  color:var(--slate-500);
  font-size:13px}
.technical-disclosure{margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--line)}
.technical-disclosure summary{cursor:pointer;
  color:var(--teal-dark);
  font:800 11px "Segoe UI",sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase}
.decision{margin-top:12px;
  padding:14px;
  background:#f0f7fa;
  border-left:3px solid var(--blue);
  border-radius:6px}
.decision h3{margin:0;
  font-size:16px}
.pending-response{border-left:4px solid var(--amber)}
.notice{padding:12px 14px;
  color:#7a351f;
  background:#fff1e5;
  border:1px solid #f2d4bf;
  border-radius:8px}
.notice.success{color:var(--teal-dark);
  background:#e5f6f2;
  border-color:#b9e4dd}
.empty{padding:16px;
  color:var(--slate-500);
  background:var(--surface-soft);
  border-radius:7px}

.drawer{width:min(720px,calc(100% - 28px));
  max-height:90dvh;
  margin:auto;
  padding:0;
  border:0;
  background:transparent}
.drawer::backdrop{background:rgb(4 18 29 / 70%)}
.drawer-card{max-height:90dvh;
  overflow-y:auto;
  padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 22px 70px rgb(0 0 0 / 25%)}
.field{display:grid;
  gap:5px;
  margin:13px 0}
.field label{color:var(--slate-700);
  font:800 12px "Segoe UI",sans-serif}
.field-checkbox{display:flex;
  align-items:center;
  gap:12px}
.field-checkbox input[type=checkbox]{width:20px;
  height:20px;
  flex:0 0 auto;
  accent-color:var(--teal)}
.field-checkbox label{flex:1}
.field textarea,.field input,.field select{width:100%;
  padding:10px 11px;
  color:var(--navy-900);
  background:#fbfdfd;
  border:1px solid var(--slate-300);
  border-radius:6px;
  font:15px "Trebuchet MS",sans-serif}
.sr-only{position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0)}
.button:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,summary:focus-visible{outline:3px solid var(--navy-950);
  outline-offset:3px}

@media (max-width:720px){.masthead{min-height:62px;
  padding-inline:18px}
.brand{font-size:11px;
  letter-spacing:.08em}
.brand span{display:block;
  margin:4px 0 0 27px;
  padding:0;
  border:0}
.badge{max-width:44vw;
  white-space:normal}
main{padding-top:24px}
.panel{padding:18px}
.reading-grid,.dimension-grid{grid-template-columns:1fr}
.facts{grid-template-columns:1fr}
.hero h1{font-size:40px}
.section-title{display:block}
.section-title span{display:block;
  margin-top:5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;
  transition:none!important}
}

@media (min-width: 1100px) {
  .workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
    grid-template-areas: "work source" "field status" "field evidence";
    gap: 20px;
    align-items: start;
  }
  .workspace-grid > .panel { margin-top: 0; }
  .workspace-grid > .work-panel { grid-area: work; }
  .workspace-grid > .field-panel { grid-area: field; margin-top: 0; }
  .workspace-grid > .source-panel { grid-area: source; }
  .workspace-grid > .status-panel { grid-area: status; }
  .workspace-grid > .evidence-panel { grid-area: evidence; }
}