/* The World is our Prawn — shared design system.
   Warm outback-sunset dark theme. Loaded LAST on every page so colours, type
   and chrome stay consistent across tabs regardless of a page's own CSS.
   Everything is a CSS var so the whole look can be reskinned from here. */

:root{
  /* surfaces — deep bush-green / ocean-teal black */
  --bg:#0b1a16; --bg2:#0f231e; --card:#132a24; --card2:#1a352d;
  --line:#264a40; --line-soft:#1a352d;
  /* ink */
  --ink:#f2efe4; --muted:#9fb2a8; --faint:#6f867b;
  --on-accent:#0a1613;                /* dark text that sits on rust / amber */
  /* accents — red-dirt rust (primary), sunset amber, ocean teal, bush green */
  --coral:#c74d14; --coral-dim:#a5410f; --coral-glow:rgba(199,77,20,.18);
  --gold:#ffb25c; --teal:#2f9199; --green:#2f6b1e; --plum:#c56b8a;
  --danger:#e5493a; --ok:#4fb477;
  /* shape */
  --r:16px; --r-sm:11px; --r-lg:22px;
  --shadow:0 6px 22px rgba(0,0,0,.38);
  --shadow-soft:0 2px 10px rgba(0,0,0,.28);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --safe-top:env(safe-area-inset-top);
  --safe-bot:env(safe-area-inset-bottom);
}

*{ box-sizing:border-box; }

html,body{
  font-family:var(--sans)!important;
  font-size:15px; line-height:1.5;
  margin:0; padding:0;
}
html{ background:var(--bg)!important; -webkit-text-size-adjust:100%; }
body{ color:var(--ink); background:var(--bg)!important; min-height:100%; }

/* kill Android's tap-to-search highlight app-wide; keep fields selectable */
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
      -webkit-tap-highlight-color:transparent; }
input,textarea,select,[contenteditable]{ -webkit-user-select:text!important; user-select:text!important; }
input,select,textarea,button{ font-family:var(--sans); font-size:1rem; }

/* ---- top bar (every page) ---- */
header.app{
  position:sticky; top:0; z-index:1200;
  background:linear-gradient(180deg,#12271f,#0d1c18);
  border-bottom:1px solid var(--line);
  padding:calc(var(--safe-top) + 13px) 16px 13px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 2px 14px rgba(0,0,0,.3);
}
header.app .title{ display:flex; flex-direction:column; min-width:0; flex:1; }
header.app h1{
  margin:0; font-size:1.12rem; font-weight:800; letter-spacing:-.01em;
  color:var(--ink); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header.app .sub{ font-size:.72rem; color:var(--gold); font-weight:600; margin-top:2px; }
header.app .back{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card2); border:1px solid var(--line); color:var(--ink);
  text-decoration:none; cursor:pointer;
}
header.app .back svg{ width:20px; height:20px; }
header.app .act{
  flex:0 0 auto; height:38px; padding:0 14px; border-radius:11px;
  display:flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem;
  background:var(--coral); color:var(--on-accent); border:none; cursor:pointer;
}
header.app .act.ghost{ background:var(--card2); color:var(--ink); border:1px solid var(--line); }

/* ---- generic building blocks ---- */
.wrap{ max-width:640px; margin:0 auto; padding:16px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-soft);
}
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.serif{ font-family:var(--serif); }

.btn{
  appearance:none; border:1px solid var(--line); background:var(--card2); color:var(--ink);
  border-radius:12px; padding:12px 16px; font-weight:700; font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:scale(.98); }
.btn.primary{ background:var(--coral); color:var(--on-accent); border-color:transparent; }
.btn.gold{ background:var(--gold); color:var(--on-accent); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; }

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  font-size:.76rem; font-weight:700; background:var(--card2); border:1px solid var(--line); color:var(--muted);
}
.chip.on{ background:var(--coral-glow); border-color:var(--coral-dim); color:var(--coral); }

label.fld{ display:block; margin:14px 0 0; }
label.fld > span{
  display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); font-weight:800; margin-bottom:6px;
}
input.in, textarea.in, select.in{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:12px 13px; font-size:1rem; outline:none;
}
input.in:focus, textarea.in:focus, select.in:focus{ border-color:var(--coral-dim); }
textarea.in{ resize:vertical; min-height:88px; line-height:1.5; }

.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* section heading */
.sec-h{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); font-weight:800; margin:22px 4px 10px;
}

/* floating add button */
.fab{
  position:fixed; right:18px; bottom:calc(var(--safe-bot) + var(--fh-bar-h,64px) + 14px);
  z-index:2400; width:60px; height:60px; border-radius:20px;
  background:var(--coral); color:var(--on-accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(199,77,20,.42), var(--shadow);
}
.fab svg{ width:30px; height:30px; }
.fab:active{ transform:scale(.94); }

/* empty state */
.empty{ text-align:center; color:var(--muted); padding:46px 22px; }
.empty .big{ font-size:2.6rem; margin-bottom:8px; }
.empty h3{ margin:0 0 6px; color:var(--ink); font-size:1.05rem; }
.empty p{ margin:0; font-size:.9rem; line-height:1.5; }

::-webkit-scrollbar{ width:0; height:0; }