/* Nello web tools: the app's own palette (teal / cream / coral, see lib/theme/app_theme.dart)
   and the landing page's chrome, so the tool pages read as part of Nello. */
:root {
  --teal: #2E6E6A; --teal-deep: #235957; --coral: #F08A6A; --coral-deep: #c25f3f;
  --ink: #243B3A; --muted: #5d7472; --card: #FBF9F4; --cream: #F4F1EA; --line: #e4ded2; --line-2: #DDE5E2;
  --calm: #6FB6A6; --mixed: #E7B95A; --hard: #E08368;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(240,138,106,.12) 0%, rgba(240,138,106,0) 45%),
    radial-gradient(120% 90% at 95% 5%, rgba(127,179,196,.18) 0%, rgba(127,179,196,0) 50%),
    linear-gradient(170deg,#f6f3ec 0%, #eef0ea 50%, #e9efec 100%);
  background-attachment: fixed;
  color: var(--ink); line-height: 1.6;
}
a { color: var(--teal-deep); }
header.site { background: linear-gradient(180deg,#ffffff 0%, #fbfaf5 100%); border-bottom: 1px solid var(--line); padding: .9rem 1.25rem; }
header.site .inner { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: .75rem; }
header.site img { width: 36px; height: 36px; border-radius: 9px; }
header.site a.brand { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
header.site nav { margin-left: auto; display: flex; gap: 1rem; font-size: .9rem; flex-wrap: wrap; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--teal-deep); }
main.container { max-width: 1040px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { text-decoration: none; }
h1 { font-size: 2rem; line-height: 1.2; margin: .4rem 0 .8rem; color: var(--ink); text-wrap: balance; }
h2 { font-size: 1.35rem; color: var(--teal); margin: 2.2rem 0 .7rem; text-wrap: balance; }
h3 { font-size: 1.05rem; color: var(--teal-deep); margin: 1.2rem 0 .4rem; }
p, li { max-width: 68ch; }
p { margin: .6rem 0; }
ul, ol { padding-left: 1.3rem; margin: .5rem 0; }
.lede { font-size: 1.12rem; color: var(--muted); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 10px; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid transparent; font-size: .98rem; font-family: inherit; line-height: 1.3; }
.btn-primary { background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%); color: #fff; }
.btn-coral { background: linear-gradient(135deg, var(--coral) 0%, #e8744f 100%); color: #fff; }
.btn-secondary { background: transparent; border-color: var(--teal); color: var(--teal); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; }
.note { background: rgba(240,138,106,.12); border: 1px solid rgba(240,138,106,.35); border-radius: 10px; padding: .9rem 1.1rem; font-size: .92rem; color: #7a4a36; margin: 1.5rem 0; max-width: none; }
.note strong { color: var(--coral-deep); }
.quiet { color: var(--muted); font-size: .9rem; }
.faq h3 { margin-top: 1.1rem; }
.related ul { list-style: none; padding: 0; }
.related li { margin: .35rem 0; }
footer.site { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 2rem; }
footer.site a { color: var(--muted); text-decoration: none; margin: 0 .3rem; }

/* forms */
label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin-top: .9rem; }
label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=date], input[type=time], input[type=number], textarea, select {
  width: 100%; font: inherit; padding: .55rem .7rem; border: 1px solid #c9d3cf; border-radius: 9px; background: #fff; color: var(--ink); margin-top: .3rem;
}
textarea { min-height: 3.2rem; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(46,110,106,.35); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .row3 { grid-template-columns: 1fr 1fr; } }
.scale { display: flex; gap: .4rem; margin-top: .4rem; }
.scale label { margin: 0; flex: 1; text-align: center; border: 1px solid #c9d3cf; border-radius: 9px; padding: .5rem 0; background: #fff; cursor: pointer; font-weight: 600; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale input:checked + span { color: #fff; }
.scale label:has(input:checked) { background: var(--coral); border-color: var(--coral); color: #fff; }
.abc-letter { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; margin-right: .45rem; }

/* data tables + heatmap */
.tablewrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { border: 1px solid var(--line-2); padding: .4rem .55rem; text-align: left; vertical-align: top; }
table.data th { background: var(--cream); font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; }
.heat { border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.heat th, .heat td { border: 1px solid var(--line-2); width: 2.7rem; height: 1.9rem; text-align: center; }
.heat th { background: var(--cream); font-weight: 600; }
.heat th.rowh { width: 3.4rem; }
.stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1rem 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; }
.stat b { display: block; font-size: 1.5rem; color: var(--teal-deep); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { font-size: .8rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: .75rem; padding: .15rem .45rem; border-radius: 6px; background: var(--cream); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.status { font-size: .9rem; margin-top: .6rem; min-height: 1.3rem; }
.status.ok { color: #2E9E5B; } .status.bad { color: var(--coral-deep); }

/* the printable ABC chart */
.sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.sheet h2 { margin-top: 0; color: var(--ink); font-size: 1.25rem; }
.sheet .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem 1.2rem; font-size: .9rem; margin: .6rem 0 1rem; }
.sheet .meta span { border-bottom: 1px solid var(--ink); display: inline-block; min-width: 7rem; }
table.sheet-grid { border-collapse: collapse; width: 100%; font-size: .78rem; }
table.sheet-grid th, table.sheet-grid td { border: 1px solid var(--ink); padding: .3rem .35rem; vertical-align: top; }
table.sheet-grid th { background: #eef2f0; font-weight: 600; text-align: left; }
table.sheet-grid td { height: 2.6rem; }
table.sheet-grid th small { display: block; font-weight: 400; color: var(--muted); }
.sheet .key { font-size: .78rem; color: var(--muted); margin-top: .6rem; }
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: #fff; }
  header.site, footer.site, .no-print, .crumbs, nav { display: none !important; }
  main.container { padding: 0; max-width: none; }
  .sheet { border: 0; padding: 0; border-radius: 0; }
  table.sheet-grid td { height: 3.1rem; }
}
@media (max-width: 768px) {
  h1 { font-size: 1.55rem; }
  .btn-row .btn { width: 100%; text-align: center; }
  .row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }