/* =========================================================
   FloodReady — vanilla CSS (authored SCSS-style with nesting)
   Tokens → base → layout → components
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #FCF2EB;
  --surface: #ffffff;
  --surface-2: #F5E8DC;
  --ink: #0E1111;
  --ink-2: #3a3d3d;
  --ink-3: #6a6d6d;
  --ink-4: #9a9d9d;
  --line: #E8DED3;
  --line-2: #EFE6DC;
  --accent: #0047FF;
  --accent-soft: #E0E8FF;
  /* Risk levels (used only in Lige nu warnings) */
  --r-low:    #1E8E3E;
  --r-mod:    #D97B00;
  --r-high:   #C84A1A;
  --r-severe: #B0241A;
  /* A–F grade scale */
  --g-a: #3F8A52;
  --g-b: #7BA84A;
  --g-c: #C9A82E;
  --g-d: #D88A2B;
  --g-e: #C8541F;
  --g-f: #9C2A1A;
  --pad: 18px;
  --radius-sm: 4px;
  --radius:    8px;
  --font-sans: 'Maison Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
}

@font-face {
  font-family:'Maison Neue';
  src:url('MaisonNeue-Book.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- Base ---------- */
* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.mono {
  font-family:var(--font-mono);
}

.display {
  font-family:var(--font-sans);
  letter-spacing:-0.01em;
}

button {
  font:inherit;
  color:inherit;
}

a {
  color:var(--accent);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

::selection {
  background:var(--accent);
  color:#fff;
}

/* ---------- Layout ---------- */
.app {
  max-width:760px;
  margin:0 auto;
  padding:32px 24px 80px;
}

/* ---------- Summary ---------- */
.summary {
  margin-bottom:28px;
}

/* ---------- Summary ---------- */
.summary__meta {
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:12px;
}

/* ---------- Summary ---------- */
.summary__card {
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:flex-start;
}

/* ---------- Summary ---------- */
.summary__badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* ---------- Summary ---------- */
.summary__badge-label {
  font-size:11px;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- Summary ---------- */
.summary__statement {
  margin:0;
  font-size:18px;
  line-height:1.45;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.01em;
}

/* ---------- Risk badge (A–F) ---------- */
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink-3);
  color:#fff;
  font-weight:500;
  line-height:1;
  border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
  font-feature-settings:'tnum';
  flex:none;
  letter-spacing:-0.01em;
}

/* ---------- Risk badge (A–F) ---------- */
.badge--lg {
  width:56px;
  height:56px;
  border-radius:12px;
  font-size:28px;
}

/* ---------- Risk badge (A–F) ---------- */
.badge--md {
  width:36px;
  height:36px;
  border-radius:8px;
  font-size:18px;
}

/* ---------- Risk badge (A–F) ---------- */
.badge--sm {
  width:20px;
  height:20px;
  border-radius:5px;
  font-size:11px;
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="A"] {
  background:var(--g-a);
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="B"] {
  background:var(--g-b);
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="C"] {
  background:var(--g-c);
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="D"] {
  background:var(--g-d);
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="E"] {
  background:var(--g-e);
}

/* ---------- Risk badge (A–F) ---------- */
.badge[data-grade="F"] {
  background:var(--g-f);
}

/* ---------- Tabs ---------- */
.tabs {
  display:flex;
  gap:0;
  border-bottom:1px solid var(--line);
}

/* ---------- Tabs ---------- */
.tabs__btn {
  padding:12px 20px;
  border:0;
  cursor:pointer;
  background:transparent;
  color:var(--ink-3);
  font-size:14px;
  font-weight:400;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s;
}

/* ---------- Tabs ---------- */
.tabs__btn[aria-selected="true"] {
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.panels {
  margin-top:20px;
}

.panel[hidden] {
  display:none;
}

.intro {
  margin:4px 0 20px;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.6;
}

.section-h2 {
  margin:0 0 10px;
  font-size:13px;
  font-weight:400;
  color:var(--ink-3);
}

.sub-label {
  font-size:11px;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-top:18px;
  margin-bottom:8px;
}

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* ---------- Property categories ---------- */
.cats {
  display:grid;
  gap:12px;
}

.cat {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.cat__head {
  width:100%;
  padding:var(--pad) calc(var(--pad) + 2px);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:14px;
  align-items:center;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
}

.cat__title {
  font-size:15px;
  font-weight:400;
  color:var(--ink);
}

.cat__sub {
  font-size:13px;
  color:var(--ink-3);
  margin-top:2px;
}

.cat__grade {
  font-size:12px;
  color:var(--ink-3);
  white-space:nowrap;
}

.cat__chev {
  width:20px;
  height:20px;
  color:var(--ink-3);
  transition:transform .15s;
}

.cat[open] .cat__chev {
  transform:rotate(180deg);
}

.cat__body {
  padding:0 calc(var(--pad) + 2px) var(--pad);
  border-top:1px solid var(--line-2);
}

.cat__summary {
  margin:var(--pad) 0;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.6;
}

.stats {
  margin:0 0 var(--pad);
  display:grid;
  gap:0;
}

.stats__row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:10px 0;
  border-top:1px solid var(--line-2);
  font-size:14px;
}

.stats__row:first-child {
  border-top:0;
}

.stats__k {
  color:var(--ink-3);
  margin:0;
}

.stats__v {
  color:var(--ink);
  font-weight:400;
  margin:0;
}

/* ---------- Editorial figure ---------- */
.editorial {
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}

/* ---------- Editorial figure ---------- */
.editorial__media {
  width:100%;
  aspect-ratio:16/9;
  background:var(--surface-2);
  overflow:hidden;
}

/* ---------- Editorial figure ---------- */
.editorial__img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.92);
}

/* ---------- Editorial figure ---------- */
.editorial__cap {
  padding:12px 14px;
  font-size:11px;
  color:var(--ink-3);
  border-bottom:1px solid var(--line-2);
}

/* ---------- Editorial figure ---------- */
.editorial__body {
  margin:0;
  padding:14px;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}

/* ---------- Map ---------- */
.map {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* ---------- Map ---------- */
.map__inner {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#F0E5D8;
}

/* ---------- Map ---------- */
.map__svg {
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Map ---------- */
.map__legend {
  position:absolute;
  left:10px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 9px 4px 4px;
  background:rgba(255,255,255,0.92);
  border-radius:6px;
  font-size:11px;
  color:var(--ink-2);
  border:1px solid var(--line);
}

/* ---------- Chart wrapper ---------- */
.chart {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
}

/* ---------- Chart wrapper ---------- */
.chart__canvas-wrap {
  position:relative;
  width:100%;
  height:170px;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad) calc(var(--pad) + 2px);
  margin-bottom:12px;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card__label {
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:6px;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card__row {
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card__temp {
  font-size:28px;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.01em;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card__cond {
  color:var(--ink-2);
  font-size:14px;
}

/* ---------- Lige nu — warnings & sensors ---------- */
.now-card__split {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:14px;
  border-top:1px solid var(--line-2);
}

.mini {
  padding:12px 0;
}

.mini--right {
  padding-left:16px;
  border-left:1px solid var(--line-2);
}

.mini__k {
  font-size:12px;
  color:var(--ink-3);
}

.mini__v {
  font-size:16px;
  color:var(--ink);
  margin-top:2px;
  font-weight:400;
}

.warn {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:calc(var(--pad) - 2px) calc(var(--pad) + 2px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
}

.warn__dot {
  width:12px;
  height:12px;
  border-radius:999px;
  flex:none;
}

.warn__dot[data-lvl="low"] {
  background:var(--r-low);
}

.warn__dot[data-lvl="mod"] {
  background:var(--r-mod);
}

.warn__dot[data-lvl="high"] {
  background:var(--r-high);
}

.warn__dot[data-lvl="severe"] {
  background:var(--r-severe);
}

.warn__head {
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}

.warn__head .warn__title {
  font-size:14px;
  font-weight:400;
  color:var(--ink);
}

.warn__head .warn__when {
  font-size:12px;
  color:var(--ink-3);
  font-family:var(--font-mono);
}

.warn__detail {
  font-size:13px;
  color:var(--ink-2);
  margin-top:4px;
  line-height:1.5;
}

.warn__pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px 4px 8px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-size:12px;
  white-space:nowrap;
}

.warn__pill .warn__pill-dot {
  width:8px;
  height:8px;
  border-radius:999px;
}

.warn__pill[data-lvl="low"]    .warn__pill-dot {
  background:var(--r-low);
}

.warn__pill[data-lvl="mod"]    .warn__pill-dot {
  background:var(--r-mod);
}

.warn__pill[data-lvl="high"]   .warn__pill-dot {
  background:var(--r-high);
}

.warn__pill[data-lvl="severe"] .warn__pill-dot {
  background:var(--r-severe);
}

.warn-list {
  display:grid;
  gap:8px;
  margin-bottom:24px;
}

.sensors {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px calc(var(--pad) + 2px);
}

.sensors__row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line-2);
}

.sensors__row:first-child {
  border-top:0;
}

.sensors__k {
  font-size:14px;
  color:var(--ink);
}

.sensors__note {
  font-size:12px;
  color:var(--ink-3);
  margin-top:2px;
}

.sensors__v {
  font-size:15px;
  color:var(--ink);
  font-weight:400;
}

/* ---------- Future panel ---------- */
.timeline-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad) calc(var(--pad) + 2px);
  margin-bottom:24px;
}

/* ---------- Future panel ---------- */
.timeline-card__legend {
  display:flex;
  gap:16px;
  margin-top:12px;
  font-size:12px;
  color:var(--ink-3);
  flex-wrap:wrap;
}

/* ---------- Future panel ---------- */
.timeline-card__legend-spacer {
  margin-left:auto;
}

/* ---------- Future panel ---------- */
.timeline-card__canvas-wrap {
  position:relative;
  width:100%;
  height:230px;
}

.legend-item {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.legend-item__bar {
  width:10px;
  height:2px;
  border-radius:2px;
}

.proj {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px calc(var(--pad) + 2px);
  margin-bottom:16px;
}

.proj__head,
.proj__row {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}

.proj__head {
  padding:12px 0;
  border-bottom:1px solid var(--line-2);
  font-size:12px;
  color:var(--ink-3);
}

.proj__head span:not(:first-child) {
  text-align:right;
}

.proj__row {
  padding:12px 0;
  border-top:1px solid var(--line-2);
  font-size:14px;
  align-items:center;
}

.proj__row:first-child {
  border-top:0;
}

.proj__row .proj__k {
  color:var(--ink-2);
}

.proj__row .proj__now,
.proj__row .proj__y50,
.proj__row .proj__y100 {
  text-align:right;
  font-family:var(--font-mono);
}

.proj__row .proj__now {
  color:var(--ink-3);
}

.proj__row .proj__y50 {
  color:var(--ink-2);
}

.proj__row .proj__y100 {
  color:var(--ink);
  font-weight:400;
}

.note {
  font-size:12px;
  color:var(--ink-3);
  margin:0;
  line-height:1.6;
}

/* ---------- Tweaks panel ---------- */
.tweaks {
  position:fixed;
  right:16px;
  bottom:16px;
  width:260px;
  z-index:50;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:16px;
  font-size:13px;
}

/* ---------- Tweaks panel ---------- */
.tweaks[hidden] {
  display:none;
}

/* ---------- Tweaks panel ---------- */
.tweaks__head {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

/* ---------- Tweaks panel ---------- */
.tweaks__title {
  font-weight:400;
}

/* ---------- Tweaks panel ---------- */
.tweaks__close {
  margin-left:auto;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--ink-3);
  font-size:18px;
  line-height:1;
}

/* ---------- Tweaks panel ---------- */
.tweaks__label {
  display:block;
  font-size:11px;
  color:var(--ink-3);
  margin-bottom:6px;
}

/* ---------- Tweaks panel ---------- */
.tweaks__seg {
  display:flex;
  gap:4px;
}

/* ---------- Tweaks panel ---------- */
.tweaks__seg-btn {
  flex:1;
  padding:6px;
  font-size:11px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-2);
  font-weight:400;
}

/* ---------- Tweaks panel ---------- */
.tweaks__seg-btn[aria-pressed="true"] {
  background:var(--accent-soft);
  color:var(--accent);
}