/* =============================================================================
   Life Events — shared styles
   Loaded by every page. Nothing page specific belongs here.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');


:root{
  --navy:#0F172A; --brand:#0B7A8D; --t800:#065462; --t100:#CDE6EB; --t50:#E9F3F5;
  --ink:#161E27; --slate:#54646F; --mute:#8695A0;
  --paper:#EDF0EF; --card:#fff; --rule:#D8DFDD;
  --sage:#3F6F55; --sage-bg:#E3EDE7; --brick:#983322; --brick-bg:#F7E6E2;
  --ochre:#8E6210; --ochre-bg:#F6EEDA;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:0 20px 64px}
header{background:var(--brand);padding:22px 20px;text-align:center}
header h1{margin:0;font-size:19px;font-weight:500;color:#fff;letter-spacing:-.01em}
header p{margin:3px 0 0;font-size:12px;color:var(--t100)}
.strip{height:4px;background:var(--navy)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;
      padding:22px;margin-top:22px}
h2{margin:0 0 4px;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--t800)}
.sub{color:var(--slate);font-size:13.5px;margin:0 0 18px}
label{display:block;font-size:13px;color:var(--slate);margin-bottom:5px}
input{width:100%;font-family:inherit;font-size:16px;padding:11px 12px;
      border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
input.code{font-family:var(--mono);font-size:22px;letter-spacing:.32em;text-align:center}
button{font-family:inherit;font-size:15px;padding:11px 16px;border-radius:2px;cursor:pointer;
       border:1px solid var(--brand);background:var(--brand);color:#fff;width:100%;margin-top:14px}
button:hover:not(:disabled){background:var(--t800);border-color:var(--t800)}
button:disabled{opacity:.55;cursor:not-allowed}
button.quiet{background:transparent;color:var(--slate);border-color:var(--rule);margin-top:8px}
.msg{margin-top:16px;padding:12px 14px;border-radius:2px;font-size:13.5px}
.msg.ok{background:var(--sage-bg);color:var(--sage)}
.msg.bad{background:var(--brick-bg);color:var(--brick)}
.msg.warn{background:var(--ochre-bg);color:var(--ochre)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
         text-transform:uppercase;color:var(--mute)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
    border-bottom:1px solid #E7ECEA;font-size:14px}
.kv:last-of-type{border-bottom:none}
.kv span:first-child{color:var(--slate)}
.kv .v{font-family:var(--mono);font-size:13px;text-align:right;word-break:break-all}
pre{background:var(--navy);color:#CDE6EB;padding:14px;border-radius:2px;overflow:auto;
    font-family:var(--mono);font-size:12px;line-height:1.6;margin:12px 0 0}
.pill{display:inline-block;font-size:12px;padding:2px 9px;border-radius:2px}
.pill.ok{background:var(--sage-bg);color:var(--sage)}
.pill.bad{background:var(--brick-bg);color:var(--brick)}
.note{font-size:12.5px;color:var(--slate);margin-top:12px}
.hide{display:none}

.top{background:var(--brand);padding:14px 20px;display:flex;align-items:center;
     justify-content:space-between;gap:14px;flex-wrap:wrap}
.top h1{margin:0;font-size:17px;font-weight:500;color:#fff}
.top .who{font-size:12px;color:var(--t100)}
.top button{width:auto;margin:0;padding:7px 13px;font-size:13px;
            background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.top button:hover:not(:disabled){background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)}
.wrap{max-width:820px}
.group{margin-top:26px}
.group h3{margin:0 0 4px;font-family:var(--serif);font-size:19px;font-weight:500;color:var(--t800)}
.group p.lead{margin:0 0 12px;font-size:13px;color:var(--slate)}
.item{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--rule);
      border-radius:3px;padding:14px 16px;margin-bottom:8px;display:flex;gap:14px;
      align-items:flex-start;flex-wrap:wrap}
.item.p0{border-left-color:var(--brick)}
.item.p1{border-left-color:var(--brick)}
.item.p2{border-left-color:var(--ochre)}
.item.p3{border-left-color:var(--sage)}
.item.p4{border-left-color:var(--mute)}
.item .body{flex:1;min-width:220px}
.item .headline{font-size:15px;font-weight:500}
.item .detail{font-size:13.5px;color:var(--slate);margin-top:3px}
.item .meta{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:6px}
.item .right{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap}
.tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:2px;
     background:#EDF1F0;color:var(--slate);font-family:var(--mono)}
.tag.jan{background:#E8EDF3;color:#0F172A}
.tag.nik{background:#F3E9EF;color:#7A3B5C}
.tag.col{background:var(--ochre-bg);color:var(--ochre)}
.tag.cem{background:var(--t50);color:var(--t800)}
.empty{background:var(--card);border:1px solid var(--rule);border-radius:3px;
       padding:28px;text-align:center;color:var(--slate)}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
     flex-wrap:wrap;margin-top:22px}
.bar .count{font-family:var(--serif);font-size:26px;color:var(--t800)}
.nav{display:flex;gap:2px;background:rgba(255,255,255,.14);
     border:1px solid rgba(255,255,255,.28);padding:2px;border-radius:2px}
.nav button{width:auto;margin:0;padding:6px 13px;font-size:13px;border:none;
            background:transparent;color:#EAF6F8}
.nav button.on{background:#fff;color:var(--t800)}
.nav button:hover:not(.on){background:rgba(255,255,255,.18)}
.linkbox{background:var(--t50);border:1px solid var(--brand-rule,#9CCBD5);
         border-radius:3px;padding:16px;margin-top:14px}
.linkbox .url{font-family:var(--mono);font-size:12.5px;word-break:break-all;
              background:#fff;border:1px solid var(--rule);border-radius:2px;
              padding:10px;margin:10px 0}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
     padding:12px 0;border-bottom:1px solid #E7ECEA}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:200px}
.row .name{font-family:var(--serif);font-size:18px;color:var(--t900,#04353E)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
#jDetail{transition:opacity .12s}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:18px}
.panel h4{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
          text-transform:uppercase;color:var(--mute);font-weight:400}
.kv{display:flex;justify-content:space-between;gap:12px;align-items:center;
    padding:9px 0;border-bottom:1px solid #E7ECEA;font-size:14px}
.kv:last-child{border-bottom:none}
.kv>span:first-child{color:var(--slate)}
.stage{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start;
       padding:11px 0;border-bottom:1px solid #E7ECEA}
.stage:last-child{border-bottom:none}
.stage .n{font-family:var(--mono);font-size:12px;color:var(--mute);padding-top:3px}
.stage .own{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
            text-transform:uppercase;color:var(--mute)}
.tick{width:20px;height:20px;flex:0 0 20px;border:1px solid var(--rule);border-radius:2px;
      background:#fff;padding:0;margin:0;display:grid;place-items:center;font-size:12px;
      color:transparent;cursor:pointer}
.tick.on{background:var(--sage);border-color:var(--sage);color:#fff}
.doc{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #E7ECEA;font-size:14px}
.doc:last-child{border-bottom:none}
.doc .g{flex:1}
.doc .when{font-family:var(--mono);font-size:11px;color:var(--mute)}
.mini{width:auto;margin:0;padding:6px 11px;font-size:13px}
.logl{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:6px 0;
      border-bottom:1px solid #E7ECEA;font-size:13px}
.logl:last-child{border-bottom:none}
.logl time{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
select{width:100%;font-family:inherit;font-size:15px;padding:10px 12px;
       border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink)}
@media (max-width:640px){.two{grid-template-columns:1fr}}
details{margin-top:28px}
summary{cursor:pointer;font-size:13px;color:var(--slate)}

/* shared chrome ------------------------------------------------------------ */
.hide{display:none !important}
.mini{width:auto;margin:0;padding:6px 11px;font-size:13px}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.score{font-family:var(--serif);font-size:34px;line-height:1;color:var(--t800)}
.bandrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
         border-bottom:1px solid #E7ECEA;font-size:13.5px}
.bandrow:last-child{border-bottom:none}
.bandrow.on{font-weight:500;color:var(--t800)}
.qr{background:#fff;padding:14px;border:1px solid var(--rule);border-radius:3px;
    display:inline-block}
.qr img,.qr svg{display:block;width:196px;height:196px}
.secret{font-family:var(--mono);font-size:14px;letter-spacing:.12em;background:var(--t50);
        border:1px solid var(--t100);border-radius:2px;padding:10px 12px;
        word-break:break-all;margin-top:10px}

/* utility classes the pages use in markup ---------------------------------- */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.nav a{font-family:var(--sans);font-size:13px;padding:6px 13px;text-decoration:none;
       color:#EAF6F8;border-radius:2px}
.nav a.on{background:#fff;color:var(--t800)}
.nav a:hover:not(.on){background:rgba(255,255,255,.18)}