/* --- TAF Timeline UI + Day/Night Shading (lanes only) --- */
:root{
  --bg:#f6f8fc;
  --surface:#fff;
  --text:#0b1020;
  --border:#d7dce7;

  /* flight categories */
  --VFR:#28a745;
  --MVFR:#0080f0;
  --IFR:#dc3545;
  --LIFR:#9722ce;

  /* axis + layout */
  --gutter-left: 0px;
  --chart-right: 0px;
  --axis-h: 40px;

  /* sizes */
  --lane-min-h: 44px;
  --font-xs: 10px;
  --font-sm: 11px;

  /* day/night shades & lines */
  --shade-day: rgba(255, 234, 119, 0.22);   /* day = soft yellow */
  --shade-night: rgba(0, 0, 0, 0.24);       /* night = soft black */
  --sunrise-line: rgba(255, 204, 0, 0.95);
  --sunset-line:  rgba(255, 128, 0, 0.95);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.page{max-width:1200px;margin:24px auto;padding:0 16px}
.bar h1{margin:0 0 10px;font-size:18px}
.row.gap{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
textarea{width:100%;min-height:110px;font:12px/1.35 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.col{display:flex;gap:8px;align-items:center}
.btn{appearance:none;border:1px solid #cfd5e3;background:#111827;color:#fff;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
.btn.ghost{background:#fff;color:#111;border-color:#cfd5e3}

/* Chart container */
.chart{
  position:relative;
  margin-top:16px;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  padding:10px}

.daynight{
  position:relative;
  margin-top:6px;
  margin-bottom:6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:var(--surface);
  padding:10px
}

.chart-head{display:flex;gap:16px;margin:4px 0 8px;color:#111;flex-wrap:wrap}
.chart-head strong{font-weight:800}

/* Axis */
.axis{position:relative;height:var(--axis-h);margin:3px 0 8px}
.axis .base{position:absolute;left:var(--gutter-left);right:var(--chart-right);top:28px;border-top:2px solid #222}
.axis .grid{position:absolute;left:var(--gutter-left);right:var(--chart-right);top:0;bottom:0}
.axis .tick{position:absolute;top:16px;bottom:0;width:1px;background:#222;opacity:.25;transform:translateX(-.5px)}
.axis .time{position:absolute;top:0;transform:translateX(-50%);font-size:var(--font-xs);font-weight:700;color:#111}
.axis .daycap{position:absolute;top:12px;width:12px;height:12px;border:2px solid #111;border-radius:50%;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.axis .daylab{position:absolute;top:-10px;transform:translateX(-50%);font-size:var(--font-sm);font-weight:800}

/* === Lanes wrapper (new) === */
.lane-wrap{
  position:relative;
  margin:0 0 8px 0; /* spacing above Raw TAF */
  /* height is auto; children absolutely-positioned to this box */
}

/* Day/Night shading behind lanes */
.dn-bands{
  position:absolute;
  left:var(--gutter-left);
  right:var(--chart-right);
  top:0;
  bottom:0; /* clipped to lanes area only */
  pointer-events:none;
  z-index:0;
}
.dn-band{
  position:absolute;
  top:0; bottom:0;
  left:var(--l);
  width:var(--w);
}
.dn-band.day   { background: var(--shade-day); }
.dn-band.night { background: var(--shade-night); }

/* Lanes (blocks) */
.lanes{position:relative; z-index:1; display:flex;flex-direction:column}
.lane{display:grid;grid-template-columns:1fr;align-items:start}
.lane-title{display:none}
.lane-body{
  position:relative;
  min-height:var(--lane-min-h);
  padding:0;
  border:0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #cfd5e3;
  overflow:visible;
}

/* Sun lines + labels above lanes */
.sunlines{
  position:absolute;
  left:var(--gutter-left);
  right:var(--chart-right);
  top:0;
  bottom:0;
  pointer-events:none;
  z-index:2; /* above blocks so lines are visible */
}
.sunline{
  position:absolute;
  top:0; bottom:0;
  width:2px;
  transform:translateX(-1px);
}
.sunline.sr{ background: var(--sunrise-line); }
.sunline.ss{ background: var(--sunset-line); }
.suntag{
  position:absolute;
  top:2px; /* just under the axis baseline */
  transform:translateX(-50%);
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:999px;
  background:#fff;
  color:#111;
  border:1px solid #e3e6ef;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.suntag.sr{ color:#7a4b00 }
.suntag.ss{ color:#8a2f00 }

/* Midnight lines inside each lane */
.midline{position:absolute;top:0;bottom:0;width:2px;background:#111;opacity:.15;transform:translateX(-1px)}

/* Blocks */
.block{
  position:absolute;
  left:var(--l);
  width:var(--w);
  min-height:32px;
  border-radius:10px;
  color:#fff;
  padding:4px 6px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  overflow:visible;
}
.block .mini{opacity:.9;font-weight:700;font-size:10px}

/* Weather details */
.block .bgrid{
  display:grid;
  grid-template-columns:1fr;

}
.block .bgrid > div{min-width:0;white-space:normal;overflow-wrap:anywhere}

/* Category fills */
.cat-vfr{background:var(--VFR)}
.cat-mvfr{background:var(--MVFR)}
.cat-ifr{background:var(--IFR)}
.cat-lifr{background:var(--LIFR)}

/* TEMPO: diagonal stripes + badges */
.tempo{
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.18) 0,
      rgba(255,255,255,.18) 8px,
      rgba(255,255,255,0)   8px,
      rgba(255,255,255,0)   16px);
}
.tempo.prob40{opacity:.9}
.tempo.prob30{opacity:.7}
.block.tempo::after{
  content: "TEMPO";
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: #111;
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
  pointer-events: none;
  z-index: 3;
}
.block.tempo.prob40::after { content: "40%"; }
.block.tempo.prob30::after { content: "30%"; }

/* Raw TAF */
.raw-wrap{margin:8px 0 16px}
.raw-title{font-weight:800;font-size:12px;margin:6px 0}
.raw-taf{white-space:pre-wrap;padding:8px;border:1px solid var(--border);border-radius:8px;background:#fff;
  font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace}

/* Small screens */
@media (max-width:900px){
  .axis .daylab{font-size:10px}
  .block .bgrid{font-size:11px}
}


/* day/night bands behind lanes */
.dn-bands{
  position:absolute;
  left:var(--gutter-left);
  right:var(--chart-right);
  top:0;
  bottom:0;
  pointer-events:none;
  z-index:0;
}
.dn-band{ position:absolute; top:0; bottom:0; left:var(--l); width:var(--w); }
.dn-band.day   { background: var(--shade-day); }   /* yellow */
.dn-band.night { background: var(--shade-night); } /* black */



/* SR/SS lines + time tags at the top of lanes */
.sunlines{
  position:absolute;
  left:var(--gutter-left);
  right:var(--chart-right);
  top:0;
  bottom:0;
  pointer-events:none;
  z-index:2;
}
.sunline{ position:absolute; top:0; bottom:0; width:2px; transform:translateX(-1px); }
.sunline.sr{ background: rgba(255,204,0,.95); }   /* sunrise */
.sunline.ss{ background: rgba(255,128,0,.95); }   /* sunset */

.suntag{
  position:absolute; top:2px; transform:translateX(-50%);
  font-size:10px; font-weight:800; padding:2px 6px; border-radius:999px;
  background:#fff; color:#111; border:1px solid #e3e6ef; box-shadow:0 1px 1px rgba(0,0,0,.08);
}
/* SR/SS labels on the axis */
.sunlabel{
  position:absolute;
  top: 14px;                 /* sits just under hour labels */
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff;

  border: 1px solid var(--border);
  white-space: nowrap;
  z-index: 3;
}
.sunlabel.sr{ background:#80cfee; border-color:#f6d649;   color: #000000;}  /* soft yellow */
.sunlabel.ss{ background:#133068; border-color:#ffa060;   color: #ffffff;}  /* soft orange */