/* Kip One — Moss.
   Ported from the Kip Design System. Moss supersedes the legacy amber/iOS look:
   moss paper, flat 1px borders and no drop shadows, Gloock over Karla,
   the roof mark in place of the orb. Legacy token names are kept and remapped
   because app.js reads --ink2/--ink3 and the four family hues at runtime. */
@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root{
  /* moss scale */
  --moss-900:#33422e; --moss-800:#4a5741; --moss-700:#4d5c3e; --moss-600:#66704f;
  --moss-500:#8b9a6a; --moss-400:#a3ab87; --moss-300:#cdd3b8; --moss-200:#d3d8c0;
  --moss-100:#e3ecc4; --moss-50:#f4f6e9;
  /* paper + cream */
  --paper-1:#eef0e6; --paper-2:#f8f9f1; --paper-3:#fdfdf8;
  --cream-1:#f1eedd; --cream-2:#dfe7c2;
  --on-deep:var(--cream-1); --on-deep-muted:#b7c19d; --on-deep-strong:var(--moss-100);
  --accent:var(--moss-700);
  --border-card:var(--moss-200);
  --surface-inset:rgba(77,92,62,.08);
  /* semantic accents — earthy, never neon */
  --brick:#a5552f; --ochre:#b98a2e;
  --chrome:rgba(238,240,230,.94);   /* fixed bars: flat translucent paper + blur */
  --app-bg:var(--paper-1);          /* solid moss paper — no gradient, no texture */
  --font-display:"Gloock",Georgia,serif;
  --font-ui:"Karla","Helvetica Neue",Arial,sans-serif;

  /* legacy names, remapped onto moss */
  --bg1:var(--paper-1); --bg2:var(--paper-1);
  --card:var(--paper-2); --ink:#2c3627; --ink2:var(--moss-600); --ink3:#8b9271;
  --hair:rgba(44,54,39,.10);
  --charlie:#4a6fa5; --leah:#a05c6e; --tegan:#b98a2e; --levi:#5d7d4f;
  --kip1:var(--moss-500); --kip2:var(--accent);
  --kiptint:var(--surface-inset); --kiphair:var(--border-card);
  --danger:#a5552f; --ok:#5d7d4f;
  /* the door-knob when Kip is online. Deliberately NOT --ok: that green means
     "done" on a reminder, and it sits so close to --accent that the lit knob was
     indistinguishable from the unlit one. This is the one place Moss leans
     brighter than earthy, because it has a job: signal, not decoration. */
  --live:#5aa34d;
  --r:16px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  font-synthesis:none;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--app-bg);
  overscroll-behavior-y:none;
}
.hidden{display:none!important}

/* ---------- the mark ----------
   The roof: a roofline with the dot under the house's own left slope (viewer's
   right) — never mirrored. The dot is the status light: green when Kip is online,
   which is why .live renders as a variant here rather than as its own element. */
.orb{
  width:40px;height:40px;flex:none;position:relative;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5 12 4.5l8 8' stroke='%234d5c3e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='15.2' cy='17' r='2.8' fill='%234d5c3e'/%3E%3C/svg%3E");
}
.orb.sm{width:28px;height:28px}
.orb.big{width:72px;height:72px}
.orb .live{display:none}
.orb:has(.live){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5 12 4.5l8 8' stroke='%234d5c3e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='15.2' cy='17' r='2.8' fill='%235aa34d'/%3E%3C/svg%3E");
}
/* on the deep briefing card the mark inverts to cream */
#briefingCard .kipcard .orb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5 12 4.5l8 8' stroke='%23f1eedd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='15.2' cy='17' r='2.8' fill='%23f1eedd'/%3E%3C/svg%3E");
}

/* ---------- line icons ----------
   Sizing for the glyphs that replace the pictorial emoji (compass, mirror,
   calendar, pin, bell). Colour rides currentColor, same as the tab bar. */
.ico{flex:none;display:block}
.ic .ico{width:16px;height:16px;color:var(--accent)}
.gi .ico{width:21px;height:21px;color:var(--accent)}
.rwhy .ico,.oprow .ico{width:13px;height:13px;display:inline-block;vertical-align:-2px;color:var(--moss-500)}
.histlab .ico{width:12px;height:12px;display:inline-block;vertical-align:-2px;color:var(--moss-500)}
.card h3 .ico{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:5px;color:var(--ink3)}
/* inline lock: rides currentColor, so it inverts inside a dark badge for free */
.badge .ico{width:10px;height:10px;display:inline-block;vertical-align:-1px;margin-right:3px}
.when .ico,.privacy .ico{width:11px;height:11px;display:inline-block;vertical-align:-1.5px;margin-right:2px}

/* ---------- gate ---------- */
.gate{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 30px;gap:14px}
.gate h1{font-family:var(--font-display);font-size:44px;font-weight:400;letter-spacing:-.01em;line-height:1.05}
.gate p{font-size:14.5px;color:var(--ink2);max-width:340px;line-height:1.6}
.btn{display:inline-block;text-decoration:none;font-size:14px;font-weight:700;padding:11px 20px;border-radius:999px;background:var(--moss-800);color:var(--on-deep);margin-top:8px;border:0;font-family:inherit;cursor:pointer;transition:transform .13s}
.btn:active{transform:scale(.96)}
.gate input{width:min(320px,84vw);border:1px solid var(--border-card);background:var(--paper-3);border-radius:999px;padding:13px 18px;font:inherit;font-size:16px;outline:none;text-align:center;color:var(--ink)}
.gate-err{font-size:13px;color:var(--danger);max-width:300px;line-height:1.5}
.gate-err code{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.ghostlink{font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none;margin-top:14px}

/* ---------- shell ---------- */
#views{padding:calc(var(--sat) + 10px) 16px calc(var(--sab) + 80px);max-width:560px;margin:0 auto}
#view-chat{padding-bottom:76px} /* clear the composer above the tab bar */
.view{display:none;animation:fadein .25s ease}
.view.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 2px 14px;gap:10px}
.bigtitle{font-family:var(--font-display);font-size:38px;font-weight:400;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
/* PageHead's sub is specced as an uppercase overline, which is right for a date
   ("JULY 16") and wrong for the sentences the You and Memory tabs put here —
   "PRIVATE — ONLY YOU AND KIP SEE THIS TAB." shouts, and the system's own content
   rule says uppercase is for tiny structural overlines only. Date gets the
   overline; prose stays sentence case. */
.bigsub{font-size:13px;color:var(--ink2);margin-top:5px;line-height:1.5}
#todaySub{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:6px;line-height:1.2}
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--border-card);padding:16px;margin-bottom:14px}
.card h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.empt{font-size:13.5px;color:var(--ink3);text-align:center;padding:34px 10px;line-height:1.6}

/* Kip's cards.
   Only ONE dark moment per screen — the briefing. Every other .kipcard (mirror,
   check-in, location, past mirrors) is Kip-voiced but stays on paper, otherwise
   the You tab renders as a stack of black slabs. */
.kipcard{background:var(--paper-3);border:1px solid var(--border-card)}
#briefingCard .kipcard{background:var(--moss-800);border-color:var(--moss-800);color:var(--on-deep)}
#briefingCard .kipcard h3{color:var(--on-deep-muted)}
#briefingCard .kipcard .md b,#briefingCard .kipcard .md strong{color:var(--on-deep-strong)}
#briefingCard .kipcard .kiphead .who{color:var(--on-deep)}
#briefingCard .kipcard .kiphead .when{color:var(--on-deep-muted)}
#briefingCard .kipcard .md hr{border-top-color:rgba(241,238,221,.22)}
.kiphead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.kiphead .who{font-family:var(--font-display);font-weight:400;font-size:15px}
.kiphead .when{font-size:11px;color:var(--ink3);margin-left:auto;font-weight:700;letter-spacing:.08em}

/* markdown-ish */
.md{font-size:14.5px;line-height:1.6}
.md h1,.md h2{font-family:var(--font-display);font-size:17px;font-weight:400;margin:14px 0 6px}
.md h3,.md h4{font-size:13.5px;font-weight:700;margin:12px 0 4px}
.md p{margin:0 0 7px}
.md p:last-child{margin-bottom:0}
.md ul{margin:6px 0 6px 18px}
.md li{margin:4px 0}
.md hr{border:0;border-top:1px solid var(--hair);margin:12px 0}
.md b,.md strong{font-weight:700}

/* ---------- agenda / events ---------- */
.evt{display:flex;gap:12px;margin-bottom:10px}
.evt .bar{flex:none;width:3px;border-radius:99px;background:var(--moss-500)}
.evt .body{flex:1;background:var(--card);border-radius:14px;padding:12px 14px;border:1px solid var(--border-card)}
.evt .topline{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.evt .et{font-size:15px;font-weight:600;color:var(--ink)}
.evt .es{font-size:12px;color:var(--ink2);margin-top:2px;font-style:italic}
.evt .etime{font-size:11.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.dayhdr{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);padding:14px 4px 8px}

/* ---------- calendar ---------- */
.calnav{display:flex;gap:6px}
.navbtn{appearance:none;border:1px solid var(--border-card);background:var(--card);font:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:7px 12px;cursor:pointer;color:var(--ink);transition:transform .13s}
.navbtn:active{transform:scale(.96)}
.week{display:flex;gap:4px;padding:4px 0 14px}
.day{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;border-radius:14px;padding:8px 0;font-weight:600}
.day .dw{font-size:10.5px;color:var(--ink3);font-weight:700}
.day .dn{font-size:15px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:99px}
.day.sel .dn{background:var(--moss-800);color:var(--on-deep)}
.day.today .dn{box-shadow:inset 0 0 0 1.5px var(--accent)}
.day.today.sel .dn{box-shadow:none}
.day .dots{display:flex;gap:2.5px;height:5px}
.day .dots i{width:5px;height:5px;border-radius:99px;background:var(--moss-400)}

/* ---------- chat ---------- */
.chathead{display:flex;align-items:center;gap:11px;padding:calc(var(--sat) + 10px) 18px 8px;position:sticky;top:0;background:var(--chrome);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:6;margin:calc(-1 * (var(--sat) + 10px)) -16px 0}
.chathead .nm{font-family:var(--font-display);font-size:17px;font-weight:400}
.chathead .st{font-size:12px;color:var(--ink2)}
.daysep{text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);padding:14px 0 10px}
.msg{display:flex;gap:8px;margin-bottom:10px;align-items:flex-end}
.msg .bub{max-width:82%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.kip .bub{background:var(--card);border:1px solid var(--border-card);border-bottom-left-radius:6px}
.msg.me{flex-direction:row-reverse}
.msg.me .bub{background:var(--me-color,var(--charlie));color:#f4f6ef;border-bottom-right-radius:6px}
.typing{display:flex;gap:4px;padding:12px 16px;background:var(--card);border-radius:18px;border-bottom-left-radius:6px;width:max-content;border:1px solid var(--border-card);margin:0 0 10px 36px}
.typing i{width:7px;height:7px;border-radius:99px;background:var(--ink3);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chatnotice{font-size:12.5px;color:var(--ink2);background:rgba(185,138,46,.12);border:1px solid rgba(185,138,46,.35);border-radius:12px;padding:10px 14px;margin:6px 0;line-height:1.5}
.composer{position:fixed;left:0;right:0;bottom:max(var(--kb, 0px), calc(var(--sab) + 56px));display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px;align-items:flex-end;background:var(--chrome);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-card);z-index:60;transition:bottom .15s ease-out}
.composer textarea{flex:1;border:1px solid var(--border-card);background:var(--paper-3);border-radius:22px;padding:11px 16px;font:inherit;font-size:16px;line-height:1.35;outline:none;resize:none;max-height:132px;overflow-y:auto;color:var(--ink);-webkit-user-select:text;user-select:text}
.mentionbar{position:absolute;bottom:100%;left:0;right:0;display:flex;gap:8px;padding:8px 14px;overflow-x:auto;background:var(--chrome);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-card)}
.mentionbar button{width:auto;height:auto;border:1px solid var(--border-card);background:var(--card);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;flex:none}
.mention{font-weight:700;color:var(--accent);background:var(--surface-inset);border-radius:6px;padding:0 4px}
.msg.me .mention{color:#fff;background:rgba(255,255,255,.22)}
.replybar{width:100%;display:flex;align-items:center;gap:8px;padding:0 2px}
.replybar .rq{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);border-left:3px solid var(--moss-500);padding:2px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replybar .rq b{color:var(--accent)}
.replybar button{width:auto;height:auto;border:0;background:none;color:var(--ink3);font-size:16px;padding:2px 6px;cursor:pointer}
/* quoted reply inside a bubble */
.bub .qt{font-size:12.5px;color:var(--ink2);border-left:3px solid var(--moss-500);padding:1px 8px;margin-bottom:6px}
.bub .qt b{color:var(--accent)}
.msg.me .bub .qt{color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.6)}
.msg.me .bub .qt b{color:#fff}
/* reactions */
.bub .rxrow{display:flex;gap:4px;margin-top:6px}
.rxchip{background:var(--surface-inset);border-radius:999px;padding:2px 8px;font-size:13px;line-height:1.3}
.rxchip i{font-style:normal;font-size:11px;color:var(--ink2);margin-left:3px}
.rxchip.mine{background:var(--moss-50);box-shadow:inset 0 0 0 1px var(--border-card)}
.msg.me .rxchip{background:rgba(255,255,255,.25)}
.msg.me .rxchip i{color:rgba(255,255,255,.85)}
/* long-press message menu */
#msgMenuWrap{position:fixed;inset:0;z-index:80}
#msgMenu{position:fixed;z-index:81;background:var(--paper-3);border:1px solid var(--border-card);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:6px;animation:fadein .12s ease}
#msgMenu .rxpick{display:flex;gap:2px}
#msgMenu .rxpick button{border:0;background:none;font-size:22px;padding:4px 6px;cursor:pointer;border-radius:10px}
#msgMenu .rxpick button:active{background:var(--surface-inset)}
#msgMenu .mact{display:flex;gap:6px;border-top:1px solid var(--hair);padding-top:6px}
#msgMenu .mact button{flex:1;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:6px 10px;cursor:pointer;border-radius:10px;white-space:nowrap}
@media (pointer:coarse){.msg .bub{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}} /* long-press opens the menu (Copy lives there) */
.msg .bub{-webkit-user-select:text;user-select:text}
.composer>button{width:40px;height:40px;border-radius:99px;border:0;background:var(--moss-800);color:var(--on-deep);font-size:16px;cursor:pointer;flex:none;transition:transform .13s}
.composer>button:active{transform:scale(.96)}

/* ---------- family ---------- */
.person{display:flex;gap:13px;align-items:center}
.pav{flex:none;width:48px;height:48px;border-radius:99px;display:flex;align-items:center;justify-content:center;color:#f4f6ef;font-size:19px;font-weight:700;background:var(--moss-500)}
.person .pn{font-size:16.5px;font-weight:700}
.person .pi{font-size:12.5px;color:var(--ink2);margin-top:2px;line-height:1.4}
.fact{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px;line-height:1.45}
.fact:last-child{border-bottom:0}
.fact .fb{flex:1}
.badge{font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;letter-spacing:.02em;flex:none;height:fit-content;margin-top:2px}
.badge.hard{background:var(--moss-800);color:var(--on-deep)}
.badge.soft{background:var(--surface-inset);color:var(--ink2)}
details{border-top:1px solid var(--hair);margin-top:10px}
details summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;padding:10px 0;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"›";color:var(--ink3);font-size:18px;transform:rotate(90deg);transition:transform .2s}
details[open] summary:after{transform:rotate(-90deg)}
.privacy{text-align:center;font-size:11.5px;color:var(--ink3);padding:18px 30px 6px;line-height:1.6}

/* ---------- you ---------- */
.intent{display:flex;gap:11px;align-items:center;padding:9px 0}
.intent+.intent{border-top:1px solid var(--hair)}
.intent .ic{flex:none;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--surface-inset)}
.intent .il{flex:1;min-width:0}
.intent .it2{font-size:13.5px;font-weight:700;line-height:1.3}
.intent .is2{font-size:11.5px;color:var(--ink2);margin-top:1px;line-height:1.4}
.intent .st2{flex:none;font-size:12.5px;font-weight:800;color:var(--accent)}
.m2{height:4px;border-radius:99px;background:var(--surface-inset);margin-top:6px;overflow:hidden;width:100%}
.m2 i{display:block;height:100%;border-radius:99px;background:var(--moss-600)}
.logline{display:flex;gap:10px;font-size:12.5px;padding:6px 0;line-height:1.5;border-bottom:1px solid var(--hair)}
.logline:last-child{border-bottom:0}
.logline .ld{flex:none;width:52px;font-weight:700;color:var(--ink3);font-size:11.5px;padding-top:1px}
.watch{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);font-size:12px;color:var(--ink2);line-height:1.5}
.pill-btn{appearance:none;border:0;font:inherit;font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;cursor:pointer;transition:transform .13s}
.pill-btn:active{transform:scale(.96)}
.pill-btn.dark{background:var(--moss-800);color:var(--on-deep)}
.pill-btn.lite{background:var(--surface-inset);color:var(--ink)}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;height:calc(56px + var(--sab));z-index:55;
  background:var(--chrome);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  border-top:1px solid var(--border-card);display:flex;padding:5px 8px var(--sab);
}
.tab{flex:1;position:relative;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:9.5px;font-weight:700;color:var(--moss-400)}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink)}
/* unread dot — sits at the icon's top-right corner */
.tabdot{position:absolute;top:2px;left:calc(50% + 9px);width:7px;height:7px;border-radius:50%;background:var(--danger);opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s;pointer-events:none}
.tabdot.show{opacity:1;transform:none}
.seg button{position:relative}
.chandot{top:5px;left:auto;right:7px;width:6px;height:6px}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(var(--sab) + 76px);transform:translateX(-50%) translateY(20px);background:var(--moss-900);color:var(--on-deep);font-size:13px;font-weight:700;padding:11px 18px;border-radius:999px;opacity:0;transition:all .3s;z-index:90;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- segments / channels / month / reminders ---------- */
.seg{display:flex;background:var(--surface-inset);border-radius:12px;padding:2px;gap:2px}
.seg button{flex:1;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;padding:7px 8px;border-radius:10px;color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-card)}
#chanSeg{margin-bottom:12px;position:sticky;top:calc(var(--sat) + 54px);z-index:6;background:var(--chrome);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.msg .whol{font-size:11px;font-weight:700;margin:0 0 3px 2px}
.msg .av{width:28px;height:28px;border-radius:99px;color:#f4f6ef;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.addbtn{width:34px;padding:7px 0;font-size:16px;line-height:1}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:2px 0 14px}
.mgrid .mwd{text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink3);padding:4px 0}
.mday{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;font-size:13.5px;font-weight:600;cursor:pointer}
.mday.dim{color:var(--ink3);opacity:.45}
.mday.sel{background:var(--moss-800);color:var(--on-deep)}
.mday.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mday.today.sel{box-shadow:none}
.mday .dd{display:flex;gap:2.5px;margin-top:3px;height:4px}
.mday .dd i{width:4px;height:4px;border-radius:99px;background:var(--moss-400)}
.dd i.rem,.day .dots i.rem{background:var(--ochre,#b98a2e)}
.remrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.4}
.remrow:last-child{border-bottom:0}
.remrow .rc{flex:none;width:19px;height:19px;border-radius:99px;border:1.7px solid var(--accent);margin-top:1px}
.remrow.late .rc{border-color:var(--danger)}
.remrow .rt{flex:1;font-weight:500}
/* NOT the design system's uppercase list-name treatment: .rl2 carries prose
   ("Kids · Field trip to the Butterfly Pavilion — due back Friday"), not a bare
   list name, and uppercasing a sentence shouts. Sentence case per the content rule. */
.remrow .rl2{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.45}
.remrow .rdue{flex:none;font-size:11.5px;font-weight:700;color:var(--ink2);padding-top:2px;white-space:nowrap}
.remrow.late .rdue{color:var(--danger)}
.pane-hdr{display:flex;align-items:center;gap:10px;padding:20px 4px 10px}
.pane-hdr>span:first-child{font-family:var(--font-display);font-size:20px;font-weight:400}
.pane-hdr .pane-sub{flex:1;font-size:12px;color:var(--ink3)}
.secl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);padding:12px 0 3px}
.secl.goalhead{color:var(--ink2);padding-top:14px} /* goal-section header: the goal's own title, slightly stronger than a plain section label */
.reptxt{font-size:13.5px;line-height:1.55;padding:4px 0}
.reptxt .chipst{display:inline-block;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;margin-right:7px;vertical-align:1px}
.chipst.done{background:rgba(93,125,79,.16);color:var(--ok)}
.chipst.open{background:rgba(185,138,46,.16);color:#8a681f}
.goalcard{cursor:pointer}
.goalcard .gi{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--surface-inset)}
.goalcard .gt{font-size:16px;font-weight:700}
.goalcard .gs{font-size:12.5px;color:var(--ink2);margin-top:2px}
.goalcard .chev{color:var(--ink3);font-size:20px;flex:none}
.page{position:fixed;inset:0;background:var(--paper-1);z-index:70;transform:translateX(105%);transition:transform .32s cubic-bezier(.32,.72,.25,1);display:flex;flex-direction:column}
.page.show{transform:none}
.pghead{flex:none;display:flex;align-items:center;gap:6px;padding:calc(var(--sat) + 10px) 12px 8px}
.backbtn{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:var(--accent);padding:6px 8px 6px 0}
.pghead .pt2{font-family:var(--font-display);font-size:16px;font-weight:400}
.pgbody{flex:1;overflow-y:auto;padding:2px 16px calc(var(--sab) + 40px);max-width:560px;margin:0 auto;width:100%}
.remrow .rc{cursor:pointer;transition:all .15s}
.remrow.done{opacity:.45}
.remrow.done .rc{background:var(--ok);border-color:var(--ok)}
.remrow.done .rt{text-decoration:line-through}
.youstrip{cursor:pointer}
.intent.expandable{cursor:pointer}
.intent.expandable.open{align-items:flex-start}
.intent.expandable.open .ic,.intent.expandable.open .st2{margin-top:2px}
.sdetail{display:none;margin-top:8px;border-top:1px dashed var(--moss-300);padding-top:6px}
.intent.open .sdetail{display:block}
.sdrow{font-size:12.5px;color:var(--ink);line-height:1.5;padding:2px 0}
.sdrow.src{color:var(--ink3);font-size:11.5px;font-style:italic}
.newgoal{border:1.5px dashed var(--moss-400);background:rgba(248,249,241,.6);border-radius:var(--r);padding:16px;text-align:center;color:var(--ink2);font-size:14px;font-weight:700;cursor:pointer;margin-bottom:14px}
.newgoal .ngs{font-size:12px;font-weight:500;color:var(--ink3);margin-top:5px}
.rwhy{font-size:12px;color:var(--ink3);margin-top:4px;line-height:1.45;font-style:italic}
.nextrep{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--hair);font-size:13.5px;line-height:1.45}
.repnote{flex:1;border:1px solid var(--border-card);background:var(--paper-3);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;outline:none;color:var(--ink)}

/* ---------- reminders v2: smart chips, lists, edit sheet ---------- */
.remchips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 12px}
.remchip{appearance:none;border:1px solid var(--border-card);font:inherit;background:var(--card);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;transition:transform .13s}
.remchip:active{transform:scale(.97)}
.remchip .rcnum{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.listrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);cursor:pointer;font-size:14px}
.listrow:last-child{border-bottom:0}
.ldot{width:26px;height:26px;border-radius:99px;flex:none;display:flex;align-items:center;justify-content:center;color:#f4f6ef;font-weight:700;font-size:13px}
.ldot.plus{background:var(--surface-inset);color:var(--ink2)}
.lname{flex:1;font-weight:600}
.lcount{font-size:13px;color:var(--ink3);font-weight:700}
.lchev{color:var(--ink3);font-size:16px}
.rpri{color:var(--danger);font-weight:800;letter-spacing:.5px}
.rrep{font-size:11px;color:var(--ink3)}
.remrow{cursor:pointer}
.remrow .rc.chk{background:var(--ok);border-color:var(--ok);position:relative}
.remrow .rc.chk::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--on-deep);font-size:11px;font-weight:800}
.rsin{width:100%;box-sizing:border-box;border:0;background:transparent;font:inherit;outline:none;color:var(--ink)}
#rsTitle{font-size:17px;font-weight:700;padding:2px 0 10px;border-bottom:1px solid var(--hair)}
#rsNotes{font-size:14px;padding-top:10px;resize:none;color:var(--ink2)}
.rsrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px}
.rsrow:last-child{border-bottom:0}
.rsrow label{flex:1;font-weight:700}
.rsrow input,.rsrow select{font:inherit;font-size:14px;border:0;background:var(--surface-inset);border-radius:8px;padding:7px 10px;color:var(--ink);max-width:55%}
.rsdanger{color:var(--danger)!important}
.pghead .rsave{margin-left:auto}
#remSheet .card{margin-bottom:12px}
#remSheet .card .pill-btn{display:block;width:100%;text-align:center;padding:11px}
#remSheet .card .pill-btn+.pill-btn{margin-top:8px}

/* reminders v2.1: search, flags, list actions */
#remSearch{width:100%;box-sizing:border-box;font:inherit;font-size:14px;border:1px solid var(--border-card);background:var(--paper-3);border-radius:11px;padding:9px 13px;margin:0 0 12px;outline:none;color:var(--ink)}
.rflag{color:var(--ochre,#b98a2e);font-size:12px}
.rsflag{width:20px;height:20px;accent-color:#b98a2e}
/* Memory tab fact rows + edit-sheet receipt */
.fact.tap{cursor:pointer}
.fact .chev{color:var(--ink3);font-size:17px;flex:none;margin-top:0;opacity:.55}
.fsquote{font-size:14px;line-height:1.55;font-style:italic;padding:2px 2px 6px}
.fswho{font-size:12px;color:var(--ink3);padding:0 2px 4px}

/* ---------- week history ---------- */
.wknav{display:flex;gap:6px;margin-left:8px}
.wknav button{width:26px;height:26px;border-radius:8px;border:1px solid var(--border-card);background:var(--card);color:var(--ink);font-size:15px;line-height:1;padding:0}
.wknav button:disabled{opacity:.3}
.histwrap{overflow-x:auto;padding:2px 0 4px}
.histrow{display:flex;align-items:center;gap:3px;margin:5px 0;white-space:nowrap}
.histlab{flex:0 0 112px;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.histcells{display:inline-flex;gap:3px}
.wkc{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;border-radius:6px;font-size:11.5px;font-weight:700;background:var(--surface-inset);color:var(--ink2)}
.wkc.met{background:rgba(93,125,79,.18);color:var(--ok)}
.wkc.miss{background:var(--surface-inset);color:var(--ink3)}
.wkc.na{background:transparent;color:var(--ink3);min-width:14px}
.wkc.cur{outline:1.5px solid var(--moss-400)}
.pmitem{border-top:1px solid var(--hair);padding:9px 0 3px;cursor:pointer}
.pmitem:first-child{border-top:none}
.pmdate{font-size:13px;font-weight:700;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.pmitem .pmtext{display:none;margin-top:6px}
.pmitem.open .pmtext{display:block}

/* ---------- daily check-in (You tab) ---------- */
.cin-q{font-size:14px;font-weight:700;color:var(--ink)}
.cin-opt{font-weight:500;color:var(--ink3)}
.cin-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:13px 0 4px}
.cin-dot{appearance:none;border:0;background:none;cursor:pointer;display:flex;justify-content:center;padding:7px 0;border-radius:14px;transition:background .14s}
.cin-dot:hover{background:var(--surface-inset)}
.cin-dot:active{transform:scale(.95)}
.cin-dot .d{width:27px;height:27px;border-radius:99px;background:var(--surface-inset);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s}
/* a low day reads as heavy, never alarm: cool slate → warm moss, no red */
.cin-dot[data-lvl="1"].on .d{background:#7d8a93}
.cin-dot[data-lvl="2"].on .d{background:#9aa295}
.cin-dot[data-lvl="3"].on .d{background:var(--moss-400)}
.cin-dot[data-lvl="4"].on .d{background:var(--moss-500)}
.cin-dot[data-lvl="5"].on .d{background:var(--accent)}
.cin-dot.on .d{transform:scale(1.16);box-shadow:0 0 0 5px rgba(77,92,62,.14)}
.cin-word{text-align:center;font-size:15px;font-weight:700;min-height:20px;color:var(--ink)}
.cin-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);padding:2px 6px 0}
.cin-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.cin-feel{appearance:none;font:inherit;font-size:13px;font-weight:700;color:var(--ink2);background:var(--surface-inset);border:1px solid var(--border-card);border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .13s,color .13s,border-color .13s,transform .13s}
.cin-feel:active{transform:scale(.95)}
.cin-feel.on{background:var(--moss-50);color:var(--accent);border-color:var(--moss-400)}
.cin-note{margin-top:11px;width:100%;box-sizing:border-box;resize:none;font-size:14px}
.cin-save{display:block;width:100%;text-align:center;padding:12px;margin-top:15px}
.cin-foot{text-align:center;font-size:11.5px;color:var(--ink3);margin-top:11px;line-height:1.5}
.cin-done{cursor:pointer}
.cin-donesum{font-size:15px;font-weight:700;color:var(--ink)}

/* ---------- build tag (bottom of Today) ---------- */
.buildtag{text-align:center;font-size:11px;font-weight:700;color:var(--ink3);padding:18px 0 6px;letter-spacing:.08em}

/* anonymous landing: mark + wordmark only (strangers typing gotkip.com) */
.gate--landing p, .gate--landing input, .gate--landing .btn,
.gate--landing .gate-err, .gate--landing .ghostlink { display: none; }