/* TiMSA dashboard. Palette drawn from a tidal flat: silt, estuary water, mud. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --ink: #1c2b33;        /* text */
  --ink-soft: #4d5f66;   /* secondary text */
  --silt: #eef2f1;       /* page */
  --panel: #ffffff;
  --water: #2b6f86;      /* primary actions, wet side of the ruler */
  --deep: #172a45;
  --mud: #8a7658;        /* dry side of the ruler, quiet accents */
  --rule: #d3dcdc;
  --alert: #a8402b;
  --ok: #3c7a52;
  --radius-s: 4px;
  --radius-m: 8px;
  --panel-w: 420px;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--silt);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
input[type=radio], input[type=checkbox], input[type=range] { accent-color: var(--water); }
body { margin: 0; }
a { color: var(--water); }
a:hover { color: var(--deep); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
code { font-size: .9em; background: var(--silt); padding: 0 .25em; border-radius: var(--radius-s); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:focus-visible { outline: 3px solid #f0b43c; outline-offset: 2px; }

/* --- top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 1rem; background: var(--deep); color: #e6eef0;
}
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand:hover { color: #fff; }
.brand-sub { font-weight: 400; font-size: .85rem; color: #9fc2cc; margin-left: .6rem; }
.topnav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.topnav a, .topnav .link { color: #cfe2e7; }
.who { color: #9fc2cc; }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

/* --- forms -------------------------------------------------------------- */
label { display: block; font-weight: 700; font-size: .9rem; margin: .65rem 0 0; }
label.check { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; }
.hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; margin: .1rem 0 .2rem; }
p.hint { margin: .35rem 0 0; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #b9c6c7; border-radius: var(--radius-s); padding: .4rem .5rem; margin-top: .2rem;
}
input[type=checkbox] { width: auto; }
input[type=range] { padding: 0; border: 0; }
input:user-invalid, textarea:user-invalid, .invalid { border-color: var(--alert); }
button, .button {
  font: inherit; font-weight: 700; padding: .45rem .9rem; border-radius: var(--radius-s);
  border: 1px solid #9fb2b4; background: #fff; color: var(--ink); cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:hover, .button:hover { border-color: var(--water); }
button.primary, .button.primary { background: var(--water); border-color: var(--water); color: #fff; }
button.primary:hover, .button.primary:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
button.quiet { font-weight: 400; border-color: transparent; background: transparent; color: var(--water); padding-left: 0; }
button.danger { color: var(--alert); }
button:disabled { opacity: .5; cursor: not-allowed; }
fieldset { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0 0; padding: .6rem 0 0; }
legend { font-weight: 700; font-size: 1.05rem; padding-right: .5rem; color: var(--deep); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.row3 { display: grid; grid-template-columns: 5.2rem 1fr 1fr; gap: .6rem; }
.error { color: var(--alert); font-weight: 700; }
.msg { min-height: 1.2em; margin: .5rem 0 0; }
.msg.bad { color: var(--alert); }
.msg.good { color: var(--ok); }
.fine { font-size: .82rem; color: var(--ink-soft); }

/* --- narrow pages (sign in, terms) ---------------------------------------- */
.sheet { max-width: 36rem; margin: 3rem auto; padding: 2rem; background: var(--panel); border-radius: var(--radius-m); }
.sheet.wide { max-width: 72rem; }
.lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 34rem; }
.stack button { margin-top: 1.1rem; }
ul.plain { padding-left: 1.1rem; }
ul.plain li { margin: .4rem 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.grid th, table.grid td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--rule); }
.num { text-align: right !important; }

/* --- app layout: panel + map ---------------------------------------------- */
.page-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.workspace { flex: 1; display: flex; min-height: 0; }
.panel {
  width: var(--panel-w); flex: none; overflow-y: auto; background: var(--panel);
  padding: .9rem 1.1rem 2rem; border-right: 1px solid var(--rule);
}
.map { flex: 1; min-width: 0; background: #cfdcdd; }
@media (max-width: 860px) {
  .page-app { height: auto; overflow: visible; }
  .workspace { flex-direction: column-reverse; }
  .panel { width: 100%; border-right: 0; }
  .map { height: 55vh; flex: none; }
  .brand-sub, .who { display: none; }
}

.tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--rule); margin: -.2rem 0 .8rem; }
.tabs button {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: .45rem 0; color: var(--ink-soft);
}
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--water); }

.saved { display: flex; gap: .4rem; align-items: center; }
.saved select { margin: 0; }
.actions { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-end; margin-top: 1rem; }
.save-as { display: flex; gap: .4rem; flex: 1; }
.save-as input { margin: 0; }

/* --- depths: the ruler is the one bold element --------------------------- */
.depths { display: grid; grid-template-columns: 100px 1fr; gap: .8rem; align-items: start; }
.ruler { width: 100px; height: 250px; margin-top: .5rem; position: sticky; top: .5rem; }
.ruler .air { fill: #f3ecdc; }
.ruler .sea { fill: #dcebee; }
.ruler .waterline { stroke: var(--water); stroke-width: 2.5; }
.ruler .tick { stroke: #8fa3a6; stroke-width: 1; }
.ruler text { font-size: 10px; fill: var(--ink-soft); font-family: inherit; }
.ruler .lbl-dry { fill: var(--mud); font-weight: 700; }
.ruler .lbl-wet { fill: var(--water); font-weight: 700; }
.ruler .band { opacity: .85; }
.ruler .thr { stroke: var(--deep); stroke-width: 2; stroke-dasharray: 4 3; }
.window-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; padding: .3rem 0 .5rem; border-bottom: 1px dashed var(--rule); }
.window-row .w-name { grid-column: 1 / -1; }
.window-row label { margin-top: .4rem; }
.window-row button { grid-column: 1 / -1; justify-self: start; padding: .2rem 0; font-size: .85rem; }
.swatch { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .3em; vertical-align: baseline; }

/* --- estimate --------------------------------------------------------------- */
.estimate { margin-top: 1.1rem; padding: .7rem .8rem; border-radius: var(--radius-m); background: var(--silt); font-size: .9rem; }
.estimate:empty { display: none; }
.estimate.over { background: #f6e4df; }
.estimate dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; }
.estimate dt { color: var(--ink-soft); }
.estimate dd { margin: 0; font-weight: 700; }
.estimate ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--alert); }

/* --- runs list and run page ------------------------------------------------- */
.runs { list-style: none; padding: 0; margin: 0; }
.runs li { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.runs .title { font-weight: 700; }
.runs .meta { font-size: .85rem; color: var(--ink-soft); }
.runs .empty { color: var(--ink-soft); border: 0; }

/* Progress drawn as a tide gauge filling with water. */
.gauge { position: relative; height: 10px; border-radius: 5px; background: #e4ebea; overflow: hidden; margin: .35rem 0; }
.gauge > span { position: absolute; inset: 0 auto 0 0; background: var(--water); border-radius: 5px; transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .gauge > span { transition: none; } }

.status { margin: .3rem 0 1rem; }
.status .state { font-weight: 700; }
.status .state.failed, .status .state.canceled { color: var(--alert); }
.status .state.done { color: var(--ok); }
.status pre { white-space: pre-wrap; font-size: .82rem; background: var(--silt); padding: .5rem; border-radius: var(--radius-s); }
.back { margin: 0 0 .4rem; font-size: .9rem; }
.layer-list label { font-weight: 400; display: flex; gap: .5rem; margin: .3rem 0; }
.layer-list input { width: auto; margin: 0; }
.legend { margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); }
.legend .bar {
  height: 12px; border-radius: 3px; margin: .25rem 0;
  background: linear-gradient(90deg, #efe2bd, #c4dcbf, #86c0b2, #4a9aa0, #2b6f86, #1f4766, #172a45);
}
.legend .ends { display: flex; justify-content: space-between; }
table.summary { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.summary th, table.summary td { text-align: left; padding: .3rem .2rem; border-bottom: 1px solid var(--rule); }
details { margin-top: 1.2rem; }
summary { cursor: pointer; font-weight: 700; }
dl.settings { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .88rem; }
dl.settings dt { color: var(--ink-soft); }
dl.settings dd { margin: 0; }
#log { font-size: .78rem; white-space: pre-wrap; max-height: 20rem; overflow: auto; background: var(--silt); padding: .5rem; }
#run-download { margin-top: 1.2rem; }

/* Leaflet box for the run domain */
.domain-box { stroke: var(--deep); }