/* Practice assistant. The Thrive design system, carried unchanged from the
   public site so the two surfaces read as one practice.
   Mobile first: every rule below is the phone rule, and the one media query
   near the end widens it for a laptop. */

:root{
  --teal:#0F6E56; --teal-deep:#04342C; --teal-tint:#E1F5EE;
  --cream:#FBF8F1; --sand:#F3EDE1; --gold:#C9A24B;
  --ink:#22302d; --muted:#5b6664; --line:#e7e0d2;
  --danger:#8f2f2f; --warn:#7a5a12;
}

/* The page shows and hides its panes and the signed-out overlay with the
   hidden attribute. A class that sets display (.pane, .timeout) would win over
   the browser's own [hidden] rule, so this line keeps hidden meaning hidden.
   Without it the signed-out overlay covered the page and swallowed every
   click on the sign in button (found 2026-09-16, first live open). */
[hidden]{display:none!important}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:15px; line-height:1.6;
  min-height:100vh;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.2;color:var(--teal-deep)}
h1{font-size:17px}
h2{font-size:17px;margin-bottom:8px}
button,input,textarea{font:inherit;color:inherit}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:20}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ------------------------------- header ------------------------------- */
.bar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:10px;
  background:var(--teal-deep);color:var(--cream);
  padding:10px 14px;min-height:56px;
}
.bar h1{color:var(--cream);flex:1;font-size:16px}
.mark{
  width:28px;height:28px;border-radius:7px;background:var(--cream);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',Georgia,serif;font-size:15px;flex:none;
}
.bar nav{display:flex;gap:2px}
.navbtn{
  background:transparent;border:none;color:#9FC7BB;
  padding:10px 8px;min-height:44px;border-radius:8px;cursor:pointer;font-size:13px;
}
.navbtn.is-on{color:var(--cream);background:rgba(251,248,241,.12)}
.linkbtn{
  background:transparent;border:none;color:#9FC7BB;cursor:pointer;
  padding:10px 6px;min-height:44px;font-size:13px;text-decoration:underline;
}

/* -------------------------------- panes -------------------------------- */
main{max-width:560px;margin:0 auto;padding:14px 14px 90px}
.pane{display:block}
.muted{color:var(--muted);font-size:13px;margin-top:8px}

.btn{
  background:var(--teal);color:#fff;border:none;border-radius:9px;
  padding:12px 18px;min-height:44px;font-size:15px;font-weight:600;cursor:pointer;
}
.btn:hover{background:#0c5b47}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}

/* ------------------------------- banner ------------------------------- */
.banner{
  background:var(--teal-tint);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;margin-bottom:14px;
}
.bannerhead{display:flex;align-items:center;gap:9px;font-size:15px;margin:0}
.dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.reqlist{list-style:none;margin-top:10px;display:grid;gap:10px}
.reqlist li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.reqname{font-weight:600}
.reqmeta{font-size:13px;color:var(--muted)}
.reqbody{margin-top:9px;border-top:1px solid var(--line);padding-top:9px;font-size:14px}
.reqbody pre{
  white-space:pre-wrap;word-wrap:break-word;font-family:inherit;
  background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin:6px 0;
}

/* --------------------------------- log --------------------------------- */
.log{display:grid;gap:10px}
.msg{border-radius:12px;padding:10px 12px;white-space:pre-wrap;word-wrap:break-word}
.msg.you{background:var(--sand);margin-left:40px}
.msg.bot{background:var(--teal-tint);margin-right:40px}
.msg.sys{background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px}
.msg .who{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}

/* ---------------------------- confirmation ---------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card .rule{height:3px;background:var(--gold)}
.card .inner{padding:12px 13px}
.card h3{font-size:15px;margin-bottom:10px}
.kv{display:grid;grid-template-columns:96px 1fr;row-gap:7px;column-gap:10px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{word-break:break-word}
.amount{font-family:'Fraunces',Georgia,serif;font-size:17px;color:var(--teal-deep)}
.flag{margin-top:10px;color:var(--warn);font-size:13px}
.asks{margin-top:11px;border-top:1px solid var(--line);padding-top:11px;font-size:13px;display:grid;gap:8px}
/* The two gate questions are tap targets on a phone, so the whole row is one,
   not just the box. */
.asks label{display:flex;gap:9px;align-items:flex-start;min-height:44px;padding:9px 0;cursor:pointer}
.asks input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal);flex:none}
.yesrow{display:flex;gap:8px;margin-top:6px}
.yesrow input{
  flex:1;min-height:44px;border:1px solid #cfc7b5;border-radius:9px;
  background:#fff;padding:0 11px;
}
.yesrow button{
  min-height:44px;border:none;border-radius:9px;background:var(--teal);color:#fff;
  padding:0 16px;font-weight:600;cursor:pointer;
}
.cardlabel{display:block;margin-top:12px;font-size:12px;color:var(--muted)}
.cardnote{margin-top:8px;font-size:12px;color:var(--muted)}
.err{margin-top:7px;font-size:13px;color:var(--danger)}
.done{margin-top:10px;font-size:14px;color:var(--teal-deep)}

/* ------------------------------ copy sheet ------------------------------ */
.sheet{display:grid;gap:8px;margin-top:9px}
.sheetrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.sheetrow .f{font-size:12px;color:var(--muted)}
.sheetrow .v{font-size:14px;word-break:break-word}
.sheetrow .n{font-size:12px;color:var(--muted);margin-top:4px}
.copy{min-height:44px;min-width:60px;border:1px solid var(--teal);background:#fff;color:var(--teal);
  border-radius:9px;cursor:pointer;font-size:13px}

/* ------------------------------- composer ------------------------------- */
.composer{
  position:sticky;bottom:0;background:var(--cream);
  display:flex;gap:8px;padding:10px 0 12px;margin-top:14px;
  border-top:1px solid var(--line);
}
.composer input{
  flex:1;min-height:44px;border:1px solid var(--line);border-radius:22px;
  background:#fff;padding:0 15px;
}
.send{
  min-height:44px;min-width:60px;border:none;border-radius:22px;
  background:var(--teal-deep);color:#fff;cursor:pointer;font-weight:600;
}

/* ------------------------------- activity ------------------------------- */
#month{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px;margin-bottom:12px}
.audit{display:grid;gap:8px}
.auditrow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.auditrow .when{color:var(--muted);font-size:12px}
.auditrow .what{font-weight:600;color:var(--teal-deep)}
.auditrow.refused .what{color:var(--danger)}

/* -------------------------------- rules -------------------------------- */
.ruleform{display:grid;gap:7px;margin-top:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 13px}
.ruleform label{font-size:12px;color:var(--muted)}
.ruleform input,.ruleform textarea{
  border:1px solid var(--line);border-radius:9px;background:var(--cream);padding:10px 11px;min-height:44px;
}
.rulerow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px}
.rulerow .k{font-weight:600;color:var(--teal-deep)}

/* -------------------------------- timeout -------------------------------- */
.timeout{position:fixed;inset:0;background:rgba(4,52,44,.55);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:30}
.timeoutbox{background:var(--cream);border-radius:14px;padding:20px;max-width:340px;text-align:center}
.timeoutbox p{margin:10px 0 16px}

@media (min-width:700px){
  main{padding:20px 24px 90px}
  h1{font-size:18px}
  .msg.you{margin-left:80px}
  .msg.bot{margin-right:80px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}