/* ============================================================
   daylight.css — shared Daylight design system
   PracticeBasis — the AI studio office manager
   Binding per STYLE.md. Every page links this file; pages add
   only page-specific layout in their own <style> block.
   Brand mark + Shanti avatar live in /assets and are applied
   through .mark / .avatar below — never hand-drawn per page.
   Fonts (link in each page <head>):
   Newsreader 400/500 + italics · Albert Sans 400/500/600 ·
   IBM Plex Mono 500
   ============================================================ */

:root{
  /* color tokens — see STYLE.md §1 */
  --paper:#FBF8F2; --card:#FFFFFF; --linen:#F2EDE4; --line:#E7E0D4;
  --ink:#2D2A25; --stone:#7E7669;
  --eucalyptus:#3A5C4E; --euc-deep:#2E4A3F; --euc-tint:#E3EDE7;
  --amber:#B8802B; --amber-text:#8A5E17; --amber-tint:#F7ECD9; --amber-line:#EAD9B8;
  --clay:#A6432F; --clay-tint:#F6E4DE;
  /* shape */
  --r-card:12px; --r-ctl:8px;
}

/* ---- base ---- */
*{box-sizing:border-box; margin:0;}

/* The hidden attribute must win over any class that sets display.
   Without this, [hidden] silently does nothing on elements styled
   display:flex/grid/block. */
[hidden]{display:none !important;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Albert Sans',system-ui,sans-serif;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:680px; margin:0 auto; padding:32px 16px 80px;}

h1{font-family:'Newsreader',serif; font-weight:500; font-size:28px; line-height:1.2;}
h2{font-family:'Newsreader',serif; font-weight:500; font-size:22px; line-height:1.2; margin-bottom:12px;}
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stone); margin-bottom:8px;
}
.sub{color:var(--stone); font-size:13px; margin-top:6px;}
.mono{font-family:'IBM Plex Mono',monospace; font-weight:500;}

/* ---- status dots (STYLE.md §2 — always dot + word) ---- */
.dot{display:inline-block; width:9px; height:9px; border-radius:999px; margin-right:8px; vertical-align:1px;}
.dot.ok{background:var(--eucalyptus);}
.dot.needs{background:var(--amber);}
.dot.working{background:transparent; border:2px solid var(--stone); width:7px; height:7px;}
.dot.urgent{background:var(--clay);}

/* ---- brand mark (STYLE.md §11) ----
   One open arc, one amber dot. Never redraw it inline — point at the
   asset so a future revision lands everywhere at once. */
.mark{
  display:inline-block; flex:none; width:26px; height:26px;
  background:url("../assets/mark.svg") center/contain no-repeat;
}
.mark-sm{width:20px; height:20px; background-image:url("../assets/mark-small.svg");}
.mark-lg{width:44px; height:44px;}

.lockup{display:flex; align-items:center; gap:14px;}
.lockup .wordmark{
  font-family:'Newsreader',serif; font-weight:500; font-size:32px;
  line-height:1; color:var(--ink);
}
.lockup + .eyebrow{margin-top:22px;}

/* Quiet product signature for surfaces the studio shows its students. */
.brand-foot{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:36px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--stone);
}
.brand-foot .mark{width:15px; height:15px; background-image:url("../assets/mark-small.svg");}
.brand-foot b{font-family:'Newsreader',serif; font-weight:500; font-size:13px; color:var(--stone);}

/* ---- Shanti (STYLE.md §12) ----
   The breath-ring on a tinted disc — she reads as present, not corporate.
   Every surface where Shanti speaks uses this avatar.

   Two weights of the SAME drawing, same silhouette. The supplied art has a
   3-unit arc, which lands under 1.3px at the 26px she is most often seen
   at and goes soft. .avatar therefore carries the optically corrected
   weight, and .avatar-lg (40px+) the supplied one — the same split
   mark.svg / mark-small.svg already uses. To run the supplied art at every
   size, point .avatar at shanti.svg and delete the .avatar-lg override. */
.avatar{
  display:block; flex:none; width:32px; height:32px; border-radius:999px;
  background:url("../assets/shanti-small.svg") center/contain no-repeat;
  font-size:0; color:transparent; /* survives any leftover initial */
}
.avatar-sm{width:26px; height:26px;}
.avatar-lg{width:40px; height:40px; background-image:url("../assets/shanti.svg");}
/* Reversed, for a eucalyptus or photographic ground. */
.avatar-solid{background-image:url("../assets/shanti-solid.svg");}

/* A page whose headline is Shanti speaking. */
.page-head{display:flex; align-items:flex-start; gap:14px;}
.page-head .avatar{margin-top:5px;}
/* An inline line in Shanti's voice, outside the conversation. */
.shanti-said{display:flex; align-items:flex-start; gap:10px;}
.shanti-said .avatar{margin-top:1px;}

/* ---- buttons ---- */
.btn{
  display:inline-block; border:none; cursor:pointer;
  font-family:'Albert Sans',sans-serif; font-size:14px; font-weight:600;
  padding:11px 16px; border-radius:var(--r-ctl); min-height:44px;
}
.btn:focus-visible{outline:2px solid var(--eucalyptus); outline-offset:2px;}
.btn-primary{background:var(--eucalyptus); color:#fff;}
.btn-primary:hover{background:var(--euc-deep);}
.btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line);}
.btn-danger{background:var(--clay); color:#fff;} /* only ever behind a confirm step */
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}

/* ---- chips ---- */
.chip{
  display:inline-block; font-size:13px; font-weight:600;
  padding:4px 12px; border-radius:999px; margin-right:6px;
}
.chip-ok{background:var(--euc-tint); color:var(--eucalyptus);}
.chip-needs{background:var(--amber-tint); color:var(--amber-text);}
.chip-working{background:var(--linen); color:var(--stone);}

/* ---- briefing card (signature — STYLE.md §5) ---- */
.briefing{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px;
  box-shadow:0 1px 2px rgba(45,42,37,.06); margin-top:16px;
}
.briefing .date{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);}
.briefing .note{
  font-family:'Newsreader',serif; font-style:italic; font-weight:400;
  font-size:20px; line-height:1.35; margin:8px 0 4px;
}
.b-section{margin-top:18px;}
.b-section h3{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stone); margin-bottom:6px;
}
.b-item{display:flex; align-items:baseline; gap:2px; padding:7px 0; border-bottom:1px solid var(--line); font-size:15px;}
.b-item:last-child{border-bottom:none;}
.b-item .grow{flex:1;}
.b-item .time{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:13px; color:var(--stone); margin-left:8px;}
.needs-row{background:var(--amber-tint); border:1px solid #EAD9B8; border-radius:var(--r-ctl); padding:12px; margin-top:4px;}
.needs-row p{font-size:15px; margin-bottom:10px;}
.needs-row .why{font-size:13px; color:var(--stone); margin-top:-6px; margin-bottom:10px;}

/* ---- schedule rows ---- */
.sched{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); margin-top:16px; overflow:hidden;}
.s-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line);}
.s-row:last-child{border-bottom:none;}
.s-time{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:14px; width:52px; color:var(--ink);}
.s-main{flex:1;}
.s-main b{font-weight:600; font-size:15px; display:block;}
.s-main span{font-size:13px; color:var(--stone);}
.s-status{font-size:13px; color:var(--stone); white-space:nowrap;}
.s-status.ok{color:var(--eucalyptus); font-weight:600;}
.s-status.needs{color:var(--amber-text); font-weight:600;}

/* ---- motion (STYLE.md §6) ---- */
@media (prefers-reduced-motion: no-preference){
  .btn{transition:background .15s ease-out;}
}

/* ============================================================
   App components (added with the first screens)
   ============================================================ */

.page-narrow{max-width:520px;}
.lede{font-size:17px; color:var(--stone); margin-top:6px;}
.section-head{margin-top:32px;}
.footnote{text-align:center; margin-top:24px;}

/* ---- top bar ---- */
.topbar{background:var(--card); border-bottom:1px solid var(--line);}
.topbar-inner{
  max-width:680px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar-brand{display:flex; align-items:center; gap:10px; min-width:0;}
.topbar-studio{
  font-family:'Newsreader',serif; font-size:18px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The studio switcher only appears for someone in more than one
   studio; it inherits the studio name's type so the topbar does not
   change shape when it does. */
.studio-switch{
  font-family:'Newsreader',serif; font-size:18px; font-weight:500;
  color:var(--ink); background:transparent;
  border:none; border-bottom:1px dashed var(--line);
  padding:0 18px 1px 0; margin:0; max-width:52vw;
  cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),
                   linear-gradient(135deg,var(--stone) 50%,transparent 50%);
  background-position:calc(100% - 8px) 0.62em, calc(100% - 4px) 0.62em;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.studio-switch:focus-visible{
  outline:2px solid var(--eucalyptus); outline-offset:3px; border-radius:4px;
}

/* "Waiting on a reply" — who has an open ask, and the owner's way to
   record an answer given in person. */
.asked{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--paper); padding:14px 16px;
}
.asked-head{
  font-family:'Newsreader',serif; font-size:17px; font-weight:500;
  margin-bottom:10px;
}
.asked-group + .asked-group{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.asked-class{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--stone); margin-bottom:6px;
}
.asked-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:5px 0; font-size:15px;
}
.asked-row .grow{flex:1 1 auto; min-width:9rem;}
.asked-row .tier{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--stone); margin-left:6px;
}
.asked .sub{margin-top:10px;}

.signin-links{margin-top:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.signin-links a{color:var(--eucalyptus); text-decoration:none; font-weight:500;}
.signin-links a:hover{text-decoration:underline;}

.hint{display:block; margin-top:5px; font-size:13px; color:var(--stone);}

.topbar-links{display:flex; align-items:center; gap:16px;}
.topbar-links a, .linkbtn{
  font-size:14px; font-weight:500; color:var(--stone);
  text-decoration:none; background:none; border:none; padding:0;
  cursor:pointer; font-family:'Albert Sans',sans-serif;
}
.topbar-links a:hover, .linkbtn:hover{color:var(--ink);}
.topbar-links a.is-current{color:var(--eucalyptus); font-weight:600;}
.topbar-links a:focus-visible, .linkbtn:focus-visible{
  outline:2px solid var(--eucalyptus); outline-offset:2px; border-radius:4px;
}

/* ---- cards, notices, forms ---- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px;
  box-shadow:0 1px 2px rgba(45,42,37,.06);
}
.notice{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px; margin-top:16px;
}
.signin-mark{margin-bottom:24px;}

.field{display:block; margin-bottom:14px;}
.field span{
  display:block; font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stone); margin-bottom:6px;
}
.field input{
  width:100%; min-height:44px; padding:10px 12px;
  font-family:'Albert Sans',sans-serif; font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-ctl);
}
.field select{
  width:100%; min-height:44px; padding:10px 12px;
  font-family:'Albert Sans',sans-serif; font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-ctl);
}
.field input:focus, .field select:focus{
  outline:2px solid var(--eucalyptus); outline-offset:1px; border-color:var(--eucalyptus);
}
.field select:disabled{color:var(--stone); background:var(--linen);}

/* A checkbox reads as a sentence, not a labelled field. */
.check-field{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:14px; font-size:15px; color:var(--ink); cursor:pointer;
}
.check-field input{width:20px; height:20px; margin-top:2px; accent-color:var(--eucalyptus);}
.check-field input:focus-visible{outline:2px solid var(--eucalyptus); outline-offset:2px;}
.form-msg{font-size:14px; margin-top:12px; min-height:20px;}
.form-msg.error{color:var(--clay);}
.form-msg.working{color:var(--stone);}

/* ---- teacher list (phone-first — S10) ---- */
.teach-list{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); margin-top:16px; overflow:hidden;
}
.teach-row{display:flex; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line);}
.teach-row:last-child{border-bottom:none;}
.teach-row.is-cancelled{background:var(--linen);}
.teach-row.is-cancelled .teach-what b{text-decoration:line-through; color:var(--stone);}
.teach-when{display:flex; flex-direction:column; min-width:72px;}
.teach-date{font-size:12px; font-weight:600; color:var(--stone); letter-spacing:.02em;}
.teach-time{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:16px;}
.teach-what{flex:1;}
.teach-what b{display:block; font-size:16px; font-weight:600;}
.teach-what span{font-size:13px; color:var(--stone);}
.chip-inline{margin-top:6px; display:inline-block;}

/* ---- call-out sheet ---- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(45,42,37,.28);
  display:flex; align-items:flex-end; justify-content:center; z-index:50;
}
.sheet{
  background:var(--card); width:100%; max-width:520px;
  border-radius:var(--r-card) var(--r-card) 0 0;
  padding:24px 20px 28px; border:1px solid var(--line);
}
.sheet h2{margin-bottom:4px;}
@media (min-width:600px){
  .sheet-backdrop{align-items:center;}
  .sheet{border-radius:var(--r-card);}
}
.callout-link{
  display:inline-block; margin-top:8px; font-size:13px;
  color:var(--eucalyptus); font-weight:600;
}

/* ---- message log ---- */
.thread{margin-top:24px;}
.thread-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:8px;
}
.thread-head b{font-size:16px; font-weight:600;}
.thread-head .mono{font-size:12px; color:var(--stone);}
.bubble-row{display:flex; flex-direction:column; align-items:flex-start; margin-bottom:10px;}
.bubble-row.is-inbound{align-items:flex-end;}
.bubble.is-failed{border-color:var(--clay); background:var(--clay-tint);}
.bubble-meta{font-size:11px; color:var(--stone); margin-top:3px;}
.reply-row{align-items:center;}
.reply-hint{margin-left:4px;}