/* CareNow lo-fi wireframes — grayscale, one accent for interactive */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --ink:#222; --mut:#777; --faint:#a0a09c;
  --line:#c9c9c4; --line2:#e2e2dd;
  --fill:#eeeeeb; --paper:#fff; --bg:#e6e6e2;
  --act:#2f5d8a;            /* interactive marker */
  --warn:#8a6d2f;
}
body{
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink); background:var(--bg);
  display:flex; justify-content:center; gap:28px; padding:28px 20px 60px; flex-wrap:wrap;
}
a{ color:inherit; text-decoration:none; }

/* ---------- phone ---------- */
.phone{
  width:390px; height:844px; background:var(--paper);
  border:2px solid var(--ink); border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  flex-shrink:0;
}
.scroll{ flex-grow:1; overflow-y:auto; }
.pad{ padding:14px; display:flex; flex-direction:column; gap:12px; }

/* ---------- top bar ---------- */
.top{ border-bottom:2px solid var(--ink); padding:10px 12px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mark{ width:26px; height:26px; border:2px solid var(--ink); border-radius:50%; flex-shrink:0; }
.search{ flex-grow:1; height:34px; border:1.5px solid var(--line); border-radius:17px;
  display:flex; align-items:center; padding:0 12px; color:var(--faint); font-size:12.5px; background:#fafaf8; }
.icon{ width:34px; height:34px; border:1.5px solid var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--mut); flex-shrink:0; }
.icon.badge{ position:relative; }
.icon.badge::after{ content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px;
  background:var(--ink); border-radius:50%; }
.top.back{ gap:10px; }
.bk{ width:30px; height:30px; border:1.5px solid var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.ttl{ font-weight:600; font-size:14px; }
.sub{ font-size:11px; color:var(--mut); }

/* ---------- tab bar ---------- */
.tabs{ border-top:2px solid var(--ink); display:flex; flex-shrink:0; height:58px; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10px; color:var(--faint); }
.tab .g{ width:20px; height:20px; border:1.5px solid var(--faint); border-radius:5px; }
.tab.on{ color:var(--ink); font-weight:600; }
.tab.on .g{ border-color:var(--ink); border-width:2px; background:var(--fill); }

/* ---------- primitives ---------- */
.card{ border:1.5px solid var(--line); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.card.solid{ background:var(--fill); }
.card.dash{ border-style:dashed; }
.row{ display:flex; align-items:center; gap:10px; }
.row.sb{ justify-content:space-between; }
.col{ display:flex; flex-direction:column; gap:4px; }
.grow{ flex-grow:1; }
.h1{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
.h2{ font-size:15px; font-weight:700; }
.lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:600; }
.mut{ color:var(--mut); font-size:12px; }
.big{ font-size:26px; font-weight:700; letter-spacing:-.5px; }
.ph{ border:1px solid #c4c4c0; border-radius:6px;
  background:
    linear-gradient(45deg, transparent 49%, #c9c9c4 49%, #c9c9c4 51%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, #c9c9c4 49%, #c9c9c4 51%, transparent 51%),
    #eeeeeb;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--mut); }
.btn{ height:44px; border:2px solid var(--ink); border-radius:22px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.sm{ height:34px; border-radius:17px; font-size:12.5px; border-width:1.5px; padding:0 14px; }
.chip{ border:1.5px solid var(--line); border-radius:15px; padding:6px 11px; font-size:12px; color:var(--mut); }
.chip.on{ border-color:var(--ink); background:var(--ink); color:#fff; font-weight:600; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.fld{ height:42px; border:1.5px solid var(--line); border-radius:7px; display:flex; align-items:center;
  padding:0 12px; font-size:13px; color:var(--mut); background:#fafaf8; }
.bar{ height:8px; border:1.5px solid var(--line); border-radius:5px; overflow:hidden; background:#fafaf8; }
.bar > i{ display:block; height:100%; background:var(--ink); }
.sep{ height:1px; background:var(--line2); }
.tag{ font-size:10px; border:1px solid var(--line); border-radius:4px; padding:2px 6px; color:var(--mut); }
.tag.k{ border-color:var(--ink); color:var(--ink); font-weight:600; }
.note{ border-left:3px solid var(--warn); background:#faf6ec; padding:9px 10px; font-size:11.5px; color:#5f4d22; border-radius:0 6px 6px 0; }
.feedmark{ text-align:center; font-size:10.5px; color:var(--faint); padding:6px 0; }

/* interactive marker */
.x{ color:var(--act); }
a.card:hover, a.row:hover, a.btn:hover, a.chip:hover{ outline:2px solid var(--act); outline-offset:2px; }
a .h2, a .ttl{ }

/* ---------- notes panel ---------- */
.notes{ width:330px; flex-shrink:0; font-size:12.5px; line-height:1.55; }
.notes h3{ font-size:15px; margin-bottom:2px; }
.notes .slug{ font-size:11px; color:var(--mut); font-family:ui-monospace,monospace; margin-bottom:12px; }
.notes ul{ padding-left:16px; display:flex; flex-direction:column; gap:8px; }
.notes li::marker{ color:var(--faint); }
.notes .k{ font-weight:600; }
.notes .warnbox{ border:1px solid #d8c99a; background:#faf6ec; padding:9px 10px; border-radius:6px;
  font-size:11.5px; color:#5f4d22; margin-top:12px; }
.nav{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; }
.nav a{ color:var(--act); }

/* ============ v0.2 additions ============ */

/* sticky thin limit bar (sticks once the full card scrolls past) */
.limitbar{ position:sticky; top:0; z-index:5; background:var(--paper);
  border:1.5px solid var(--ink); border-radius:7px; padding:7px 10px;
  display:flex; align-items:center; gap:9px; margin:2px 0; }
.limitbar .n{ font-weight:700; font-size:13.5px; }
.limitbar .mini{ flex-grow:1; height:5px; border:1px solid var(--line); border-radius:3px; background:#fafaf8; }
.limitbar .mini > i{ display:block; height:100%; background:var(--ink); }

/* horizontal scrollers */
.hs{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin:0 -14px; padding-left:14px; padding-right:14px; }
.hs::-webkit-scrollbar{ height:0; }
.hs > *{ flex:0 0 auto; }
.sec{ display:flex; flex-direction:column; gap:9px; }
.sech{ display:flex; align-items:baseline; justify-content:space-between; }
.sech .more{ font-size:11.5px; color:var(--act); }
.tile{ width:150px; border:1.5px solid var(--line); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:7px; }
.tile.wide{ width:210px; }
.tile.sq{ width:112px; }

/* on-the-spot action block */
.here{ border:2.5px solid var(--ink); border-radius:9px; padding:12px; background:var(--fill);
  display:flex; flex-direction:column; gap:9px; }

/* vertical timeline */
.tl{ display:flex; flex-direction:column; }
.tlrow{ display:flex; gap:12px; }
.tlrail{ width:56px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.tlline{ width:2px; background:var(--line); flex-grow:1; min-height:14px; }
.tlline.dash{ background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 9px); }
.avpair{ position:relative; width:52px; height:36px; flex-shrink:0; }
.av{ position:absolute; width:34px; height:34px; border-radius:50%; border:2px solid var(--paper);
  background:var(--fill); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--mut); box-shadow:0 0 0 1.5px var(--line); }
.av.a{ left:0; top:1px; }
.av.b{ right:0; top:1px; background:#fff; }
.tlbody{ flex-grow:1; padding-bottom:16px; min-width:0; }
.tldate{ font-size:11px; color:var(--mut); font-weight:600; }
.tlnow{ border:1.5px solid var(--ink); border-radius:7px; padding:9px 10px; background:var(--fill);
  font-size:11.5px; display:flex; gap:8px; align-items:center; }

/* payment rows grouped by due date */
.due{ border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.duehd{ background:var(--fill); padding:8px 11px; display:flex; justify-content:space-between;
  align-items:center; border-bottom:1.5px solid var(--line); }
.duerow{ padding:9px 11px; display:flex; align-items:center; gap:10px; }
.duerow + .duerow{ border-top:1px solid var(--line2); }
.dot{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink); flex-shrink:0; }
.dot.f{ background:var(--ink); }

/* avatar used as the Akun tab glyph */
.tab .g.me{ border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; }