/* Layout: sticky header carrying the loved-one switcher and "I am" picker, a scrolling tab strip, then one working view built from a responsive panel grid. */
.fcp-app{
  --bg:#f3f4f8; --surface:#ffffff; --surface-2:#eceef5; --ink:#1c2232; --ink-2:#4a5368; --ink-3:#737b90; --line:#dce0ea;
  --accent:#6a3a66; --accent-ink:#ffffff; --accent-soft:#f2e7f0;
  --ok:#2c7a4c; --ok-soft:#e2f2e8; --warn:#985f00; --warn-soft:#fbefd6; --bad:#b0352e; --bad-soft:#f9e1df;
  --p1:#6a3a66; --p2:#2b6888; --p3:#3d7b4c; --p4:#a4531c; --p5:#594ea2; --p6:#866a1c;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
}

.fcp-app *,.fcp-app *::before,.fcp-app *::after{box-sizing:border-box}
.fcp-app{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;border-radius:12px;overflow:hidden;text-align:left;-webkit-font-smoothing:antialiased}
.fcp-app h1,.fcp-app h2,.fcp-app h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.2}
.fcp-app h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.fcp-app h2{font-size:1.15rem;font-weight:700}
.fcp-app h3{font-size:.78rem;font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.fcp-app button,.fcp-app input,.fcp-app select,.fcp-app textarea{font:inherit;color:inherit}
.fcp-app :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fcp-app .num,.fcp-app .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.fcp-app .fcp-top{background:var(--surface);border-bottom:1px solid var(--line)}
.fcp-app .top-inner{max-width:1180px;margin:0 auto;padding:12px 16px 0;display:flex;flex-direction:column;gap:10px}
.fcp-app .brand-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;justify-content:space-between}
.fcp-app .brand{display:flex;align-items:center;gap:10px;min-width:0}
.fcp-app .mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.fcp-app .brand small{display:block;color:var(--ink-3);font-size:.78rem}
.fcp-app .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fcp-app .seg{display:flex;gap:4px;flex-wrap:wrap}
.fcp-app .chip-btn{border:1px solid var(--line);background:var(--surface);padding:4px 12px;border-radius:999px;cursor:pointer;font-size:.88rem}
.fcp-app .chip-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fcp-app .me{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--ink-2)}
.fcp-app .me select{padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fcp-app nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.fcp-app nav.tabs::-webkit-scrollbar{display:none}
.fcp-app nav.tabs button{flex:none;border:0;background:none;padding:10px 12px 11px;cursor:pointer;color:var(--ink-2);border-bottom:3px solid transparent;font-weight:700;font-size:.92rem;display:flex;gap:6px;align-items:center}
.fcp-app nav.tabs button[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.fcp-app nav.tabs .count{font-family:var(--f-mono);font-size:.72rem;background:var(--surface-2);padding:0 6px;border-radius:999px;color:var(--ink-2)}

.fcp-app .fcp-main{max-width:1180px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:18px}
.fcp-app .view-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between}
.fcp-app .view-head p{margin:2px 0 0;color:var(--ink-2);max-width:62ch}
.fcp-app .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));align-items:start}
.fcp-app .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fcp-app .panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fcp-app .btn{border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:8px;cursor:pointer;font-weight:700;font-size:.9rem;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.fcp-app .btn:hover{background:var(--surface-2)}
.fcp-app .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.fcp-app .btn.primary:hover{filter:brightness(1.08)}
.fcp-app .btn.small{padding:3px 10px;font-size:.82rem}
.fcp-app .btn.danger{color:var(--bad);border-color:var(--bad)}
.fcp-app .link{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-weight:700;font-size:.88rem}
.fcp-app .pills{display:flex;gap:6px;flex-wrap:wrap}

.fcp-app .list{display:flex;flex-direction:column}
.fcp-app .row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.fcp-app .row:first-child{border-top:0;padding-top:2px}
.fcp-app .row-main{flex:1;min-width:0}
.fcp-app .row-title{font-weight:700;overflow-wrap:anywhere}
.fcp-app .row-title.clickable{cursor:pointer}
.fcp-app .row-title.clickable:hover{color:var(--accent)}
.fcp-app .meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--ink-3);font-size:.84rem;margin-top:2px;align-items:center}
.fcp-app .done .row-title{text-decoration:line-through;color:var(--ink-3)}
.fcp-app .tag{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-weight:700;white-space:nowrap}
.fcp-app .tag.ok{background:var(--ok-soft);color:var(--ok)} .fcp-app .tag.warn{background:var(--warn-soft);color:var(--warn)} .fcp-app .tag.bad{background:var(--bad-soft);color:var(--bad)} .fcp-app .tag.acc{background:var(--accent-soft);color:var(--accent)}
.fcp-app .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.fcp-app .avatar{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--surface);flex:none}
.fcp-app .check{appearance:none;width:22px;height:22px;border:2px solid var(--ink-3);border-radius:6px;cursor:pointer;flex:none;margin-top:1px;display:grid;place-items:center;background:var(--surface)}
.fcp-app .check:checked{background:var(--ok);border-color:var(--ok)}
.fcp-app .check:checked::after{content:"";width:6px;height:11px;border:solid var(--surface);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fcp-app .empty{color:var(--ink-3);padding:14px;border:1px dashed var(--line);border-radius:8px;text-align:left;font-size:.9rem}
.fcp-app .empty strong{color:var(--ink-2)}
.fcp-app .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fcp-app .bar > span{display:block;height:100%;background:var(--ok);border-radius:999px}
.fcp-app .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.fcp-app .stat{padding:10px 12px;border-radius:8px;background:var(--surface-2)}
.fcp-app .stat b{display:block;font-family:var(--f-mono);font-size:1.35rem;font-weight:500}
.fcp-app .stat span{font-size:.8rem;color:var(--ink-2)}
.fcp-app .stat.bad b{color:var(--bad)} .fcp-app .stat.warn b{color:var(--warn)}

/* journal */
.fcp-app .entry{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.fcp-app .entry-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.fcp-app .vitals{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:var(--ink-2)}
.fcp-app .vitals b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.fcp-app .entry p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fcp-app .mood-1{background:var(--bad-soft);color:var(--bad)} .fcp-app .mood-2{background:var(--warn-soft);color:var(--warn)} .fcp-app .mood-3{background:var(--surface-2);color:var(--ink-2)} .fcp-app .mood-4,.fcp-app .mood-5{background:var(--ok-soft);color:var(--ok)}
.fcp-app .charts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.fcp-app .chart svg{width:100%;height:auto;display:block}
.fcp-app .chart text{fill:var(--ink-3);font-family:var(--f-mono);font-size:15px}

/* calendar */
.fcp-app .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line);gap:1px}
.fcp-app .cal .dow{background:var(--surface-2);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:6px}
.fcp-app .cal .day{background:var(--surface);min-height:92px;padding:5px;display:flex;flex-direction:column;gap:3px;cursor:pointer;border:0;text-align:left;min-width:0}
.fcp-app .cal .day.other{background:var(--bg);color:var(--ink-3)}
.fcp-app .cal .day.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.fcp-app .cal .dnum{font-family:var(--f-mono);font-size:.8rem}
.fcp-app .cal .day.today .dnum{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px;align-self:flex-start}
.fcp-app .cal .ev{font-size:.72rem;padding:1px 5px;border-radius:4px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.fcp-app .cal .ev.task{background:var(--surface-2);color:var(--ink-2);font-weight:400}
.fcp-app .cal .ev.flag{background:var(--bad-soft);color:var(--bad)}
.fcp-app .cal .more{font-size:.7rem;color:var(--ink-3)}
@media (max-width:640px){.fcp-app .cal .day{min-height:58px}.fcp-app .cal .ev{font-size:0;height:6px;padding:0}.fcp-app .cal .more{display:none}}

/* messages */
.fcp-app .thread{display:flex;flex-direction:column;gap:12px}
.fcp-app .msg{display:flex;gap:10px;align-items:flex-start}
.fcp-app .bubble{background:var(--surface);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:8px 12px;min-width:0;max-width:62ch}
.fcp-app .msg.mine{flex-direction:row-reverse}
.fcp-app .msg.mine .bubble{background:var(--accent-soft);border-color:transparent;border-radius:12px 4px 12px 12px}
.fcp-app .bubble p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fcp-app .composer{display:flex;gap:8px;align-items:flex-end}
.fcp-app .composer textarea{flex:1;min-width:0;resize:vertical;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

/* contacts */
.fcp-app .cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.fcp-app .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fcp-app .card.emergency{border-color:var(--bad)}
.fcp-app .kv{display:flex;gap:8px;align-items:center;font-size:.88rem;min-width:0}
.fcp-app .kv .mono{overflow-wrap:anywhere;user-select:all}

/* modal */
.fcp-app .scrim{position:fixed;inset:0;background:rgb(10 12 20 / .45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 12px 24px;overflow-y:auto}
.fcp-app .modal{background:var(--surface);border-radius:14px;width:min(640px,100%);padding:20px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line)}
.fcp-app .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.fcp-app .field{display:flex;flex-direction:column;gap:4px;min-width:0}
.fcp-app .field.wide{grid-column:1/-1}
.fcp-app .field label,.fcp-app .field .lbl{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.fcp-app .field input:not([type=checkbox]):not([type=radio]),.fcp-app .field select,.fcp-app .field textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);width:100%;min-width:0}
.fcp-app .field textarea{min-height:80px;resize:vertical}
.fcp-app .field.checkbox{flex-direction:row;align-items:center;gap:8px}
.fcp-app .scale{display:flex;gap:4px;flex-wrap:wrap}
.fcp-app .scale label{cursor:pointer}
.fcp-app .scale input{position:absolute;opacity:0;pointer-events:none}
.fcp-app .scale span{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:.84rem;font-weight:700;color:var(--ink-2)}
.fcp-app .scale input:checked + span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.fcp-app .scale input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.fcp-app .modal-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fcp-app .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-weight:700;z-index:60;font-size:.9rem}
.fcp-app .banner{padding:10px 14px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:.88rem}
@media (prefers-reduced-motion:no-preference){.fcp-app .panel,.fcp-app .entry,.fcp-app .card{transition:border-color .15s}}

/* Reset common theme styles inside the portal */
.fcp-app h1,.fcp-app h2,.fcp-app h3{color:inherit;margin:0;padding:0;border:0;background:none}
.fcp-app h1,.fcp-app h2{text-transform:none}
.fcp-app h3{color:var(--ink-3);text-transform:uppercase}
.fcp-app button,.fcp-app input,.fcp-app select,.fcp-app textarea{margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;line-height:1.4;text-shadow:none}
.fcp-app button{background-image:none}
.fcp-app a.btn{text-decoration:none;color:inherit}
.fcp-app a.btn.primary{color:var(--accent-ink)}
.fcp-app p{margin:0}
.fcp-app svg{max-width:none}
.fcp-app .chart svg{max-width:100%}
.fcp-app .fcp-main{max-width:none;padding:20px 16px 40px}
.fcp-app .top-inner{max-width:none}
.fcp-app .toast{position:fixed}
.fcp-app .scrim{padding-top:max(48px,env(safe-area-inset-top,0px))}
.fcp-gate{max-width:560px;margin:24px auto;padding:20px;border:1px solid #dce0ea;border-radius:12px;background:#fff;color:#1c2232;font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
.fcp-gate h2{margin:0 0 8px}
