/* Coelio's sage visual system, inspired by the owner's reference. */
:root {
  --accent:#506b36; --accent-rgb:80,107,54; --accent-light:#edf2e5; --accent-dark:#40562b;
  --bg:#f8f9f5; --surface:#fff; --surface2:#f1f3ed; --border:#e4e8dd;
  --text:#273229; --text2:#616b5d; --text3:#737c6e; --r:18px;
  --font-d:'Inter',-apple-system,sans-serif;
  --sage:#a6ba79; --sage-ink:#2f4128;
}
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--accent); outline-offset:3px;
}
.ob-wordmark { font-family:'Playfair Display',Georgia,serif; }
.auth-logo { font-family:'Playfair Display',Georgia,serif; font-size:42px; letter-spacing:-1.5px; color:var(--sage-ink); }
#auth-wrap { overflow-y:auto; background:linear-gradient(180deg,#e7eddc 0,#f8f9f5 48%); }
.auth-sub { color:var(--text2); }
.auth-card { box-shadow:0 10px 45px #3042290a; border:1px solid var(--border); border-radius:24px; }
.auth-title { font-size:24px; font-weight:600; letter-spacing:-.7px; }
.fld label { text-transform:none; letter-spacing:0; color:var(--text2); font-size:13px; }
.fld input { border-width:1px; min-height:48px; }
.bnav { padding:7px 6px max(8px,env(safe-area-inset-bottom)); border-color:#edf0e9; gap:2px; }
.ni { min-height:48px; border-radius:14px; font-size:10px; }
.ni.active { background:var(--accent-light); }
.ni-dot { display:none; }
.page-title { font-weight:600; font-size:25px; letter-spacing:-.8px; }
.page-head { padding-bottom:15px; border-color:#edf0e9; }
.sec { text-transform:none; font-size:15px; color:var(--text); letter-spacing:-.2px; padding:22px 22px 11px; }
.screen { padding-bottom:26px; }
.h-head { align-items:center; }
.h-greet { font-size:22px; font-weight:600; letter-spacing:-.7px; }
.h-greet em { color:var(--text); }
.h-date { font-size:12px; }
.av-sm { width:44px; height:44px; font-size:23px; border:0; }
.home-welcome { margin:18px 22px 0; padding:20px; border-radius:18px; background:var(--sage); color:var(--sage-ink); position:relative; overflow:hidden; min-height:142px; display:flex; align-items:center; gap:8px; }
.home-welcome-copy { position:relative; flex:1; z-index:1; }
.home-eyebrow { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.1px; margin-bottom:8px; }
.home-welcome h1 { font-size:22px; line-height:1.25; letter-spacing:-.8px; font-weight:600; max-width:230px; }
.home-welcome p { font-size:12px; margin-top:8px; max-width:215px; line-height:1.5; }
.home-sprout { flex:none; width:75px; height:106px; opacity:.9; }
.home-mood { margin:14px 22px 0; padding:17px 10px 12px; border-radius:18px; background:var(--surface); border:1px solid var(--border); }
.home-mood h2 { font-size:14px; text-align:center; font-weight:600; margin-bottom:15px; }
#home-moods { display:flex; gap:2px; justify-content:space-around; }
.mood-shortcut { flex:1; min-width:0; background:none; border:0; border-radius:10px; color:var(--text2); cursor:pointer; display:flex; align-items:center; flex-direction:column; gap:7px; padding:2px 0 4px; }
.mood-shortcut svg { width:38px; height:38px; transition:transform .15s; }
.mood-shortcut:hover svg { transform:translateY(-3px); }
.mood-shortcut span { font-size:9px; line-height:1.2; }
#screen-home .fg { gap:10px; }
#screen-home .fc { font-family:var(--font-b); text-align:left; color:var(--text); border-color:var(--border); box-shadow:0 3px 12px #263a2003; padding:14px; }
#screen-home .fc-accent { display:none; }
#screen-home .fc-icon { width:38px; height:38px; border-radius:11px; margin-bottom:10px; background:var(--accent-light)!important; color:var(--accent)!important; }
#screen-home .fc-name { font-size:13px; }
#screen-home .fc-sub { font-size:11px; line-height:1.5; }
#screen-home .fc-badge { font-size:9px; margin-top:7px; background:var(--accent-light)!important; color:var(--accent)!important; }
#screen-home .home-activities { grid-template-columns:1fr; }
.home-activities .fc { display:grid; grid-template-columns:40px 1fr; gap:0 12px; align-items:center; }
#screen-home .home-activities .fc-icon { grid-row:1/4; margin:0; }
.home-activities .fc-badge { display:none; }
#screen-home .bilan-card { border-color:var(--border); border-radius:16px; background:var(--surface); }
.phase-card { background:var(--accent-light); color:var(--text); border:1px solid var(--border); }
.phase-label,.phase-freq { opacity:1; color:var(--text2); }
.phase-name { font-size:16px; }
.phase-next { background:var(--surface); }
.phase-done-btn { background:var(--accent); color:#fff; }
.phase-notif-btn { color:var(--accent); background:var(--surface); }
.phase-actions { flex-wrap:wrap; }
.micro-grid { grid-template-columns:1fr; gap:8px; }
.micro-card { display:grid; grid-template-columns:30px 1fr; gap:2px 10px; }
.micro-icon { grid-row:1/4; align-self:center; }
.micro-name,.micro-dur,.micro-check { grid-column:2; }
.micro-check { margin:0; }
.stat-v { font-size:23px; font-weight:600; }
.disconn-fc,.wfc { border-color:var(--border); border-radius:16px; }
.wfc { padding:15px; gap:12px; }
.wfc-icon,.disconn-fc-icon { background:var(--accent-light)!important; color:var(--accent)!important; }
.wfc-body { font-size:12px; }
.wfc-name { font-size:13px; }
.wfc-cta { font-size:12px; }
#screen-chat,#screen-couple { background:#fff; overflow:hidden; padding-bottom:0; }
.ch-head { padding:14px 18px; border-color:#edf0e9; min-height:72px; }
.ch-head>div:nth-child(2) { min-width:0; }
.ch-av { background:var(--accent-light)!important; color:var(--accent); border-radius:13px; flex-shrink:0; }
.ch-av svg { stroke:var(--accent); }
.ch-status { color:var(--text2)!important; }
.ch-head button { min-height:44px; min-width:44px; }
.msgs { min-height:0; padding:18px; gap:14px; }
.bub { border-radius:14px; padding:12px 14px; line-height:1.65; font-size:14px; }
.msg.ai .bub,.msg.coach .bub { background:#f2f4ee; color:var(--text); border:0; font-size:14px; }
.msg.me .bub { background:var(--accent); color:#fff; }
.msg.other .bub { background:#eaf0e2; color:#35482a; }
.msg-who { color:var(--text2); font-size:10px; margin-bottom:5px; }
.msg-t { font-size:10px; }
.priv-banner { color:var(--text2); background:#f7f9f3; font-size:11px; margin:10px 18px 0; padding:9px 12px; }
.cin { border-color:#edf0e9; padding:12px 14px; gap:8px; }
.cin input { min-width:0; border-radius:12px; min-height:46px; background:#f5f6f2; }
.send { width:44px; height:44px; background:var(--accent)!important; }
.emoji-btn { width:40px; height:44px; background:#f5f6f2; }
/* Feedback remains available on the other screens, clear of chat send controls. */
body:has(#screen-chat.active) #feedback-fab,body:has(#screen-couple.active) #feedback-fab { display:none; }
#feedback-fab { right:max(16px,calc((100vw - 760px)/2 + 16px)); }
.swatches { flex-wrap:wrap; }
.sw { border:0; cursor:pointer; min-width:32px; min-height:32px; }
.sw.sel { outline:2px solid var(--text); outline-offset:3px; }
/* Native modal keeps keyboard focus inside the temporary check-in. */
#checkin { border:0; padding:0; margin:auto; width:min(100%,460px); height:min(850px,100dvh); max-height:100dvh; max-width:100%; border-radius:24px; background:#fff; color:var(--text); }
#checkin::backdrop { background:#24302175; backdrop-filter:blur(3px); }
.checkin-shell { height:100%; display:flex; flex-direction:column; }
.checkin-head { display:flex; align-items:center; justify-content:space-between; padding:14px 22px 6px; flex-shrink:0; }
.checkin-head>span { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text2); }
#checkin-close { font-size:27px; line-height:1; width:44px; height:44px; border:0; border-radius:50%; background:#f5f7f1; color:var(--text); cursor:pointer; }
.checkin-progress { display:flex; gap:5px; margin:8px 24px 0; flex-shrink:0; }
.checkin-progress i { flex:1; height:3px; background:#edf0e8; border-radius:4px; }
.checkin-progress i.is-done { background:var(--sage); }
.checkin-body { overflow-y:auto; min-height:0; flex:1; padding:24px; text-align:center; }
#checkin-step { font-size:11px; color:var(--text2); margin-bottom:10px; }
#checkin-title { font-size:24px; line-height:1.3; letter-spacing:-.7px; font-weight:600; margin:0 auto 20px; max-width:340px; outline:none; }
#checkin-face { margin:20px auto 12px; line-height:0; }
#checkin-mood-label { font-size:18px; font-weight:600; margin-bottom:30px; }
.mood-gauge { display:block; width:240px; height:104px; margin:22px auto 0; overflow:visible; }
.mood-gauge>path { fill:none; stroke-width:24px; }
.mood-range-label { display:block; margin-top:20px; font-size:12px; color:var(--text2); }
#checkin-range { display:block; width:100%; height:44px; accent-color:var(--accent); cursor:pointer; }
.mood-range-ends { display:flex; justify-content:space-between; font-size:11px; color:var(--text2); }
.checkin-hint { font-size:13px; color:var(--text2); line-height:1.6; margin:0 0 20px; }
.checkin-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.checkin-choices button { background:#f5f7f1; border:1.5px solid transparent; min-height:92px; border-radius:13px; color:var(--text); font-size:12px; font-weight:500; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.checkin-choices button>span { font-size:27px; }
.checkin-choices button[aria-pressed="true"] { background:#e7efda; border-color:var(--accent); color:var(--sage-ink); box-shadow:inset 0 0 0 1px var(--accent); }
#checkin-summary { background:#eff4e7; color:var(--sage-ink); padding:14px; font-size:13px; border-radius:12px; margin-bottom:24px; }
label[for="checkin-note"] { display:block; text-align:left; font-size:13px; margin-bottom:8px; font-weight:600; }
label[for="checkin-note"] span { color:var(--text2); font-weight:400; }
#checkin-note { width:100%; border:1px solid var(--border); border-radius:13px; padding:14px; resize:vertical; min-height:140px; max-height:240px; background:#f8f9f5; font-size:15px; color:var(--text); margin-bottom:16px; }
.checkin-footer { padding:14px 24px max(22px,env(safe-area-inset-bottom)); border-top:1px solid #f0f2eb; flex-shrink:0; }
.checkin-footer>p { font-size:10px; color:var(--text2); text-align:center; margin-bottom:12px; }
.checkin-footer>div { display:flex; gap:8px; }
.checkin-footer button { border:0; border-radius:99px; padding:14px 18px; min-height:48px; font-size:13px; font-weight:600; cursor:pointer; }
#checkin-back { background:#f1f4ea; color:var(--accent); }
#checkin-next { flex:1; background:var(--accent); color:#fff; }
@media (min-width:800px) {
  body { background:#edf0e8; }
  #app-wrap { width:760px; margin:auto; border-right:1px solid #dde3d4; border-left:1px solid #dde3d4; box-shadow:0 0 70px #2d41220a; }
  .home-welcome { min-height:160px; padding:26px; }
  .home-welcome h1 { max-width:400px; font-size:29px; }
  .home-welcome p { max-width:420px; font-size:13px; }
  .home-sprout { width:110px; }
  #screen-home .home-activities { grid-template-columns:1fr 1fr; }
  .micro-grid { grid-template-columns:1fr 1fr; }
  .mood-shortcut svg { width:42px; height:42px; }
  .mood-shortcut span { font-size:11px; }
}
@media (max-width:480px) { #checkin { height:100dvh; border-radius:0; } }
@media (max-height:700px) {
  .checkin-body { padding:16px 24px; }
  #checkin-title { font-size:21px; margin-bottom:14px; }
  #checkin-face { margin:10px auto; } #checkin-face svg { width:94px; height:94px; }
  #checkin-mood-label { margin-bottom:22px; font-size:16px; }
  .mood-gauge { width:180px; height:78px; margin-top:14px; }
  .mood-range-label { margin-top:12px; }
  .checkin-choices button { min-height:72px; gap:4px; }
  .checkin-choices button>span { font-size:23px; }
  .checkin-footer { padding:10px 18px 16px; }
  #auth-wrap { justify-content:flex-start; padding-top:24px; }
  .auth-sub { margin-bottom:20px; }
}
@media (max-width:350px) {
  .home-welcome,.home-mood { margin-left:16px; margin-right:16px; }
  .home-welcome { padding:17px; }
  .home-welcome h1 { font-size:20px; }
  .home-sprout { width:48px; }
  .mood-shortcut svg { width:34px; height:34px; }
  #screen-home .fg,.stats { padding-left:16px; padding-right:16px; }
  .checkin-footer button { padding:12px 13px; font-size:12px; }
}
@media (max-height:600px) {
  .checkin-body { padding:12px 20px; }
  #checkin-step { display:none; }
  #checkin-title { font-size:20px; margin-bottom:10px; }
  #checkin-face svg { width:64px; height:64px; }
  #checkin-mood-label { margin-bottom:18px; }
  .mood-gauge { width:140px; height:61px; }
  .mood-range-label { margin-top:8px; }
  #checkin-range { height:36px; }
}
@media (prefers-reduced-motion:reduce) { .mood-shortcut svg { transition:none; } }