@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F1EFEA; --surface:#FFFFFF; --ink:#23211D; --ink2:#57544D; --ink3:#8B877D;
  --line:#E7E3DB; --accent:#C6613F; --accent-ink:#9C4728; --accent-soft:#F6E7DF;
  --ok:#4C9A6B; --wait:#B8822A; --bad:#C0492E; --next:#3B7EA1; --muted:#8B877D;
  --career:#C6613F; --home:#3B7EA1; --marriage:#C2557A; --children:#4C9A6B;
  --vps:#7A5CC0; --finances:#BE8A2C; --health:#3F9E6E; --systems:#6B7280;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The HTML `hidden` attribute is only `display:none` in the UA stylesheet, so
   any author rule that sets `display` (flex, grid…) silently beats it and the
   element stays visible. This makes `hidden` mean hidden, everywhere. */
[hidden]{display:none !important}
/* The drawer owns the screen while it's open. */
body.fb-locked{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}

/* nav */
.nav{background:#211F1B;color:#fff;position:sticky;top:0;z-index:50}
.nav-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 22px;height:56px}
.brand{font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:#fff}
.brand span{color:var(--accent)}
.nav a.item{color:#C9C5BD;font-size:14px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav a.item:hover{color:#fff;text-decoration:none}
.nav a.item.on{color:#fff;border-bottom-color:var(--accent)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav .who{display:flex;align-items:center;gap:8px;font-size:13px;color:#C9C5BD}
.nav .who img{width:26px;height:26px;border-radius:50%}
.nav form{display:inline}
.nav button.link{background:none;border:none;color:#8B877D;font-size:13px;cursor:pointer;font-family:inherit}
.nav button.link:hover{color:#fff}
.ext{font-size:13px;color:#C9C5BD;border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:999px}
.ext:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}

.wrap{max-width:1240px;margin:0 auto;padding:22px}
.page-h{margin-bottom:16px}
.page-h h1{font-size:26px}
.page-h p{color:var(--ink2);font-size:14px;margin-top:5px;max-width:78ch}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card.pad0{padding:0;overflow:hidden}
.card h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.card h3{font-size:17px;margin:2px 0 8px}
.card p{font-size:14px;color:var(--ink2);margin:7px 0}
.card .mini{font-size:12px;color:var(--ink3);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#2A2723,#211F1B);border-radius:16px;padding:28px 30px;color:#fff;margin-bottom:16px}
.hero:before{content:"";position:absolute;top:-120px;right:-70px;width:320px;height:320px;background:radial-gradient(circle,rgba(198,97,63,.4),transparent 68%)}
.hero .eyebrow{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D9B9A6}
.hero h1{position:relative;font-size:25px;margin:9px 0 6px;color:#fff;max-width:52ch}
.hero p{position:relative;color:#C9C5BD;font-size:14px;max-width:74ch}
.hero .chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stat{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px;font-size:12.5px;color:#EDEAE3}
.stat b{color:#fff}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* chips */
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.chip.ok{background:#E3F0E7;color:#2F6B45}
.chip.wait{background:#F6ECD6;color:#8A6316}
.chip.bad{background:#F8E2DE;color:#B03A20}
.chip.next{background:#EAF1F5;color:#2C6180}
.chip.muted{background:#EFEDE8;color:#6E6961}
.chip.p1,.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}

/* tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;background:#FAF9F7;position:sticky;top:56px}
.tbl td{font-size:13.5px;color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#FBFAF8}
.tbl td.pri{color:var(--ink);font-weight:600}
.tbl td.pri a{color:var(--ink)}
.grouphead td{background:#F4F2EE;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);padding:9px 14px}

/* lists */
.rows{list-style:none}
.rows li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line);align-items:flex-start}
.rows li:first-child{border-top:none}
.rows .tt{font-size:13.5px;font-weight:600;color:var(--ink)}
.rows .mm{font-size:12.5px;color:var(--ink2);margin-top:2px}
.bul{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}

/* brain index */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:.15s}
.tile:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.tile .t{font-family:'Fraunces',serif;font-size:16px;font-weight:600;color:var(--ink)}
.tile .b{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.4}
.group-h{margin:26px 0 10px}
.group-h h2{font-size:17px;font-family:'Fraunces',serif;text-transform:none;letter-spacing:0;color:var(--ink)}
.group-h p{font-size:13px;color:var(--ink3);margin-top:2px}

/* record detail */
.fields{display:flex;flex-direction:column}
.field{padding:14px 0;border-top:1px solid var(--line)}
.field:first-child{border-top:none}
.field .lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.field .val{font-size:14px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.field .val.empty{color:var(--ink3);font-style:italic}
.field .note{font-size:11.5px;color:var(--ink3);margin-top:4px}
.edit-in{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#FEFDFB;border:1px solid var(--line);border-radius:9px;padding:9px 11px;line-height:1.5}
.edit-in:focus{outline:none;border-color:var(--accent);background:#fff}
textarea.edit-in{min-height:120px;resize:vertical}
.saved{font-size:11px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .2s}
.saved.on{opacity:1}
.lock{font-size:10px;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:1px 7px;font-weight:600}

/* search */
.search{display:flex;gap:8px;margin-bottom:14px}
.search input{flex:1;font-family:inherit;font-size:14px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#fff}
.search input:focus{outline:none;border-color:var(--accent)}
.search button{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:0 18px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}

/* buttons */
/* One accent action per view. The floating chat button owns the clay; anything
   inside the hero is a quiet secondary so the two never compete. */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;padding:10px 17px;border-radius:10px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:#b5572f;text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.hero .btn{position:relative;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  color:#EDEAE3;font-weight:500;font-size:13px;padding:8px 14px}
.hero .btn:hover{background:rgba(255,255,255,.17);color:#fff}

.crumb{font-size:12.5px;color:var(--ink3);margin-bottom:8px}
.crumb a{color:var(--ink3)}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}
.login{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:38px 36px;max-width:430px;width:100%;text-align:center}
.login h1{font-size:24px;margin-bottom:6px}
.login p{color:var(--ink2);font-size:14px;margin-bottom:22px}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;background:#fff;border:1px solid #DADCE0;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600;color:#3C4043;cursor:pointer;font-family:inherit}
.gbtn:hover{background:#F8F9FA;text-decoration:none;color:#3C4043}
.err{background:#F8E2DE;color:#B03A20;border-radius:9px;padding:11px 13px;font-size:13px;margin-bottom:18px;text-align:left}

/* brief viewer */
.brief-frame{width:100%;height:calc(100vh - 150px);border:1px solid var(--line);border-radius:14px;background:#fff}

.empty{text-align:center;padding:38px 20px;color:var(--ink3);font-size:14px}
.empty b{display:block;color:var(--ink2);font-size:15px;margin-bottom:5px}

@media(max-width:900px){
  .grid>*{grid-column:span 12!important}
  .nav-in{gap:14px;overflow-x:auto}
  .hero h1{font-size:21px}
}