/* Life Observer components. app.css is a fixed Tailwind build; anything it does not ship lives here.
 *
 * Palette — "field notebook" (chosen 2026-10-12, option C): warm paper with teal and brown.
 *   OCEAN  --brand #186b7e                          links, primary buttons, the teal in the logo
 *   EARTH  --brand-dark #4a3020 (walnut)            headings, footer, the brown end of the banner
 *          --accent #8b5a2b (saddle brown)          call-to-action, cautions, low confidence
 *   SKY    --sky #2577b5, --sky-tint #eaf4fc        birds and the sky: banner top, info notes, bird badges
 *   PAPER  --paper #faf6ef, --muted #efe6d8         page and quiet section backgrounds
 *   INK    --ink #2b1d14                            body text
 * The overrides are at the END of this file (app.css is a fixed Tailwind build, loaded first).
 * Add a colour by deriving it from these, not by picking a new hue.
 */

:root{
  --lo-line:#d7e3e8;
  --lo-warn:#7a4a18;
  --lo-warn-bg:#fbf2e8;
  --lo-priv:#53696f;
}

/* ---- media ---- */
.lo-figure{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:.6rem;background:#e7eef1}
.lo-figure img{width:100%;height:100%;object-fit:cover;display:block}
.lo-figure--tall{aspect-ratio:1/1}
.lo-figure--empty{display:flex;align-items:center;justify-content:center;color:#7f98a2;font-size:.8rem}

.lo-gallery{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.lo-gallery .lo-figure{aspect-ratio:1/1}

.lo-hero-img{width:100%;max-height:520px;object-fit:contain;background:#0d2a33;border-radius:.75rem}

/* ---- cards / grid ---- */
.lo-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lo-card{display:flex;flex-direction:column;gap:.55rem;background:#fff;border:1px solid #e2e8f0;
  border-radius:.75rem;overflow:hidden;box-shadow:0 1px 2px #0000000a;transition:box-shadow .15s,transform .15s}
.lo-card:hover{box-shadow:0 4px 10px #00000014;transform:translateY(-1px)}
.lo-card__body{padding:.25rem .9rem 1rem}
.lo-card__name{font-weight:700;color:var(--ink);line-height:1.25}
.lo-sci{font-style:italic;color:#4f6670}

/* ---- badges ---- */
.lo-badge{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.15rem .6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.lo-badge--private{background:#eceff1;color:var(--lo-priv)}
.lo-badge--shared{background:#e6eef6;color:#28566e}
.lo-badge--public{background:#e2eff3;color:#115965}
.lo-badge--group{background:#eef3f5;color:#3f565f;font-weight:600}
.lo-badge--ai{background:#f6ece2;color:#8a5024}

/* ---- confidence ---- */
.lo-conf{display:flex;align-items:center;gap:.5rem}
.lo-conf__bar{flex:1;height:6px;border-radius:999px;background:#e3ebef;overflow:hidden;min-width:60px}
.lo-conf__fill{height:100%;border-radius:999px;background:var(--brand)}
.lo-conf__fill[data-level="low"],.lo-conf__fill[data-level="very low"]{background:#b0672c}
.lo-conf__num{font-size:.75rem;font-weight:700;color:#3f565f;font-variant-numeric:tabular-nums}

/* ---- suggestions ---- */
.lo-suggest{border:1px solid var(--lo-line);border-radius:.6rem;padding:.8rem .9rem;background:#fff;
  display:flex;flex-direction:column;gap:.45rem}
.lo-suggest + .lo-suggest{margin-top:.6rem}
.lo-suggest__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem}
.lo-suggest__marks{font-size:.86rem;color:#3f565f;line-height:1.55}
.lo-caution{font-size:.82rem;line-height:1.5;color:var(--lo-warn);background:var(--lo-warn-bg);
  border-left:3px solid var(--accent);padding:.45rem .65rem;border-radius:0 .35rem .35rem 0}

/* ---- key/value ---- */
.lo-kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;font-size:.9rem;align-items:baseline}
.lo-kv dt{color:#4f6670;font-weight:600}
.lo-kv dd{margin:0;color:var(--ink)}

/* ---- notices ---- */
.lo-note{border-left:3px solid var(--brand);background:#eaf3f7;padding:.7rem .9rem;border-radius:0 .4rem .4rem 0;
  font-size:.88rem;line-height:1.6;color:#25454f}
.lo-note--warn{border-left-color:var(--accent);background:var(--lo-warn-bg);color:var(--lo-warn)}

/* ---- dropzone ---- */
.lo-drop{border:2px dashed #adc6d0;border-radius:.75rem;padding:1.6rem 1rem;text-align:center;
  background:#f8fbfc;cursor:pointer;transition:border-color .15s,background .15s}
.lo-drop:hover,.lo-drop.is-over{border-color:var(--brand);background:#edf4f7}
.lo-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.lo-thumbs{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin-top:.8rem}
.lo-thumb{position:relative;border-radius:.5rem;overflow:hidden;border:1px solid var(--lo-line);background:#e7eef1}
.lo-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.lo-thumb__bar{display:flex;gap:.25rem;padding:.3rem;background:#fff;border-top:1px solid var(--lo-line)}
.lo-thumb__bar button{flex:1;font-size:.68rem;font-weight:700;padding:.2rem;border-radius:.25rem;
  border:1px solid var(--lo-line);background:#fff;cursor:pointer;color:#3b535d}
.lo-thumb__bar button:hover{background:#edf4f7;border-color:var(--brand);color:var(--brand)}
.lo-thumb.is-busy{opacity:.55}

/* ---- two-column form ---- */
.lo-cols{display:grid;gap:1.5rem}
@media (min-width:56rem){ .lo-cols{grid-template-columns:1fr 360px;align-items:start} }

.lo-field-row{display:grid;gap:.75rem}
@media (min-width:36rem){ .lo-field-row--2{grid-template-columns:1fr 1fr} }

/* ---- visibility chooser ---- */
.lo-vis{display:grid;gap:.5rem}
.lo-vis label{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--lo-line);
  border-radius:.5rem;padding:.65rem .8rem;cursor:pointer;background:#fff}
.lo-vis label:hover{border-color:var(--brand)}
.lo-vis input{margin-top:.25rem;accent-color:var(--brand)}
.lo-vis input:checked + span strong{color:var(--brand)}
.lo-vis span{font-size:.86rem;line-height:1.5;color:#4f6670}
.lo-vis strong{display:block;color:var(--ink);font-size:.95rem}

/* ---- table ---- */
.lo-table{width:100%;border-collapse:collapse;font-size:.9rem}
.lo-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:#5d7480;padding:.5rem .6rem;border-bottom:1px solid var(--lo-line);white-space:nowrap}
.lo-table td{padding:.6rem;border-bottom:1px solid #e7eef1;vertical-align:top}
.lo-table tr:last-child td{border-bottom:0}
.lo-table td.num{font-variant-numeric:tabular-nums;text-align:right}

.lo-empty{text-align:center;padding:2.5rem 1rem;color:#5d7480}
.lo-spin{display:inline-block;width:.85em;height:.85em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:lo-spin .6s linear infinite;vertical-align:-.1em}
@keyframes lo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lo-spin{animation:none}.lo-card{transition:none}}

/* ---- taxonomic lineage ---- */
.lo-lineage{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .1rem;font-size:.78rem;line-height:1.5}
.lo-lineage a{color:#4f6670;text-decoration:none;padding:.05rem .3rem;border-radius:.25rem;white-space:nowrap}
.lo-lineage a:hover{background:var(--brand);color:#fff}
.lo-lineage a + a::before{content:"›";color:#9db3bd;margin-right:.35rem;margin-left:-.2rem}
.lo-lineage a:first-child{padding-left:0}

/* ---- shared-with-me list cards ---- */
.lo-listcard{display:block;background:#fff;border:1px solid var(--lo-line);border-radius:.7rem;padding:1rem 1.1rem;
  text-decoration:none;transition:box-shadow .15s,transform .15s}
.lo-listcard:hover{box-shadow:0 4px 10px #00000014;transform:translateY(-1px)}

/* ==== Field notebook theme (2026-10-12) ======================================================
   Overrides app.css's palette variables, so every bg-brand-dark / text-brand-dark / btn-accent /
   bg-muted / bg-paper in the views follows without touching them. */
:root{
  --brand:#186b7e;          /* teal stays: links, primary buttons */
  --brand-dark:#4a3020;     /* walnut: headings, footer, banner start */
  --accent:#8b5a2b;         /* saddle brown: call to action */
  --ink:#2b1d14;
  --paper:#faf6ef;
  --muted:#efe6d8;
  --lo-line:#e3d6c3;
  --lo-warn:#6b3f17;
  --lo-warn-bg:#f8eedf;
}
body{background:var(--paper)}
.btn-accent{color:#fff}                      /* white on #8b5a2b: 6.1:1 */
.btn-accent:hover{background:#74481f}
.card,.lo-card{background:#fffdf9;border-color:#e6d9c6}
/* Section headings in brown - but not on the banner or the teal/walnut bands, where they stay white. */
main section:not([style*="gradient"]):not(.bg-brand):not(.bg-brand-dark) h2,
main section:not([style*="gradient"]):not(.bg-brand):not(.bg-brand-dark) h3{color:var(--brand-dark)}
.lo-figure{background:#ece3d6}
.lo-figure--empty{color:#8a7864}
.lo-sci{color:#6b5846}
.lo-hero-img{background:#2b1d14}
/* Quiet surfaces warmed to the paper. The private/shared/public badges keep their cool tints on
   purpose: those colours carry meaning, not decoration. */
.lo-drop{border-color:#cdb99d;background:#fdfaf4}
.lo-drop:hover,.lo-drop.is-over{background:#f5ede1}
.lo-thumb__bar button:hover{background:#f5ede1}
.lo-conf__bar{background:#e8ddcd}
.lo-lineage a + a::before{color:#b3a08a}

/* ---- Sky blue: birds and the sky (2026-10-12) ----------------------------------------------
   The banner reads top to bottom as sky, water, earth. #2577b5 keeps white text at 4.9:1. */
:root{--sky:#2577b5;--sky-tint:#eaf4fc;--sky-line:#bcdcf3}
main section[style*="linear-gradient"]{background-image:linear-gradient(170deg,var(--sky) 0%,#186b7e 55%,var(--brand-dark) 100%)!important}
header.sticky{border-bottom:2px solid var(--sky-line)}
/* Info notes are "air": sky tint with a sky rule. Cautions (lo-note--warn) stay earth. */
.lo-note{background:var(--sky-tint);border-left-color:var(--sky)}
.lo-note--warn{background:var(--lo-warn-bg);border-left-color:var(--accent)}
/* Birds get the sky's colour wherever a sighting is labelled. */
.lo-badge--bird{background:var(--sky-tint);color:#1d5f93}

/* ---- Orange: the sun (2026-10-13) ----------------------------------------------------------
   Sky above, earth below, and now the sun: a sunrise glow on the banner, orange call-to-action
   buttons, an orange rule under section headings, and orange for the AI's suggestions.
   #c2550f carries white text at 4.6:1; #b4530f is the orange used for small text (4.7:1 on paper);
   #e8772e is decorative only (rules, glows, dots). Cautions stay earth brown. */
:root{--sun:#e8772e;--sun-deep:#c2550f;--sun-text:#b4530f;--sun-tint:#fdf0e4;--sun-line:#f6c9a3}
main section[style*="linear-gradient"]{background-image:
  radial-gradient(circle at 86% 14%,rgb(255 214 140 / .95) 0,rgb(253 176 72 / .85) 3.5%,rgb(240 128 50 / .55) 8%,rgb(232 119 46 / .18) 18%,transparent 32%),
  linear-gradient(170deg,var(--sky) 0%,#186b7e 55%,var(--brand-dark) 100%)!important}
.btn-accent{background:var(--sun-deep);color:#fff}
.btn-accent:hover{background:#a8470b;filter:none}
header.sticky{border-bottom:0}
header.sticky::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--sky-line),var(--sky) 45%,var(--sun) 100%)}
main section:not([style*="gradient"]):not(.bg-brand):not(.bg-brand-dark) h2::after{
  content:"";display:block;width:2.75rem;height:3px;border-radius:2px;margin-top:.45rem;background:var(--sun)}
main section.text-center:not([style*="gradient"]) h2::after,main .text-center h2::after,main h2.text-center::after{margin-left:auto;margin-right:auto}
footer{border-top:4px solid var(--sun)}
a:hover{text-decoration-color:var(--sun)}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.lo-badge--ai{background:var(--sun-tint);color:var(--sun-text)}
.bg-accent{background-color:var(--sun-deep);color:#fff}
.text-accent{color:var(--sun-text)}