/* Daybook (src/pages/daybook.js, src/daybook-panels.js, and Daybook's pane on /products): the
   panels Daybook's own landing page draws in HTML, with its made-up classroom content, redrawn in the
   site's tokens. White surfaces on the tint, the rule colour for the paper lines, the emerald for what
   is Daybook's own action, the site's three faces and its 6 to 14 px corners. Nothing loads from
   elsewhere, and every panel is whole without the script: motion only settles it into place. */

/* ---------- the hero ---------- */

.db-hero .container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4.4vw,64px);align-items:center}
.db-hero h1{max-width:none;font-size:clamp(34px,4.6vw,56px);line-height:1.04}
.db-hero h1 .a{color:var(--navy)}
.db-hero h1 .b{color:var(--emerald-ink)}
.db-hero .call-note{max-width:56ch}
.db-hero-media{min-width:0}
@media (max-width:940px){.db-hero .container{grid-template-columns:minmax(0,1fr);gap:34px}}
@media (prefers-reduced-motion:no-preference){
  [data-hero] .db-hero-media>.db-stage{animation:hero-slide .8s var(--ease-out) .1s both}
}

/* ---------- the paper a panel sits on: lined, squared or dotted, like an exercise book ---------- */

.db-stage{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;padding:clamp(18px,3.2vw,44px);border-radius:var(--r-xl);background-color:var(--tint);overflow:hidden}
.db-lined{background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--rule) 27px 28px)}
.db-squared{background-image:linear-gradient(rgba(27,42,65,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,65,.055) 1px,transparent 1px);background-size:20px 20px}
.db-dotted{background-image:radial-gradient(rgba(27,42,65,.18) 1.1px,transparent 1.5px);background-size:18px 18px}
/* the exercise book's margin line, in the brand green */
.db-margin::before{content:'';position:absolute;top:0;bottom:0;left:clamp(22px,3vw,38px);z-index:-1;width:1px;background:rgba(23,185,120,.55)}
.db-stage :where(p){margin:0}
.db-i{flex:none;width:1em;height:1em}

/* ---------- a window of Daybook, and a note in it ---------- */

.db-window{width:100%;max-width:580px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lift);color:var(--navy);font-size:15px;line-height:1.5}
.db-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;border-bottom:1px solid var(--rule-soft);background:var(--paper)}
.db-bar::after{content:'';flex:none;width:39px}
.db-dots{display:inline-flex;flex:none;gap:6px}
.db-dots i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.db-url{display:inline-flex;align-items:center;gap:6px;min-width:0;margin-inline:auto;padding:3px 11px;overflow:hidden;border:1px solid var(--rule-soft);border-radius:999px;background:var(--white);font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap}
.db-url .db-i{font-size:12px}
.db-note{display:flex;flex-direction:column;gap:12px;padding:22px 24px 6px}
.db-note-title{font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.1vw,26px);letter-spacing:-.015em;line-height:1.15}
.db-meta{display:flex;flex-wrap:wrap;gap:8px}
.db-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--white);font-size:12.5px;font-weight:600;line-height:1.45;color:var(--slate);white-space:nowrap}
.db-pill .db-i{font-size:13px}
.db-seg{display:inline-flex;align-self:flex-start;max-width:100%;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
.db-seg>span{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.db-seg>[data-on]{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm)}
.db-seg .db-i{font-size:13px}
/* notes: each heading after a faint #, its bullets under it */
.db-nb{display:flex;flex-direction:column;gap:3px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.db-nh{font-weight:700;color:var(--navy)}
.db-nh::before{content:'#';margin-right:8px;font-family:var(--font-mono);font-weight:500;color:var(--mist)}
.db-nb .db-nh{margin-top:8px}
.db-nb .db-nh:first-child{margin-top:2px}
.db-nb ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.db-nb li{position:relative;padding-left:18px}
.db-nb li::before{content:'';position:absolute;left:5px;top:.64em;width:5px;height:5px;border-radius:50%;background:var(--mist)}

/* "Ask anything", at the foot of a note or a chat */
.db-ask{display:flex;align-items:center;gap:8px;min-height:46px;margin:10px 16px 16px;padding:5px 5px 5px 16px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--rule),0 8px 18px -10px rgba(27,42,65,.3)}
.db-ask-ph{display:inline-flex;flex:1;align-items:center;min-width:0;overflow:hidden;font-size:14.5px;color:var(--faint);white-space:nowrap}
.db-caret{flex:none;width:1.5px;height:1.15em;margin-right:2px;background:var(--navy)}
.db-ask-recipe{display:inline-flex;flex:none;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.db-send{display:inline-flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--emerald-ink);color:#fff}
@media (prefers-reduced-motion:no-preference){.db-caret{animation:db-blink 1.1s steps(1,end) infinite}}
@keyframes db-blink{50%{opacity:0}}

/* ---------- small parts the panels share ---------- */

/* the marks, as Daybook colours them, in the site's tokens: green present, amber late or under way,
   grey partial, navy absent. The word is always there; the colour repeats it. */
.db-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;background:var(--draft-wash);font-size:11.5px;font-weight:700;line-height:1.6;color:var(--slate);white-space:nowrap}
.db-chip::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.db-chip b{font-variant-numeric:tabular-nums}
.db-chip.good{background:var(--emerald-wash);color:var(--emerald-ink)}
.db-chip.warn{background:var(--flag-wash);color:var(--flag)}
.db-chip.info{background:var(--draft-wash);color:var(--slate)}
.db-chip.bad{background:var(--navy);color:#fff}
.db-iconbtn{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--rule);border-radius:50%;color:var(--slate)}
.db-iconbtn .db-i{font-size:13px}
.db-fake{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:1.5px solid transparent;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.db-fake.primary{background:var(--emerald-ink);color:#fff}
.db-fake.secondary{border-color:var(--rule);background:var(--white);color:var(--navy)}
.db-fake.stop{border-color:var(--navy);background:var(--white);color:var(--navy)}
.db-fake.small{align-self:flex-start;padding:4px 10px;font-size:12px}
.db-card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lift)}
/* two panels side by side in one stage, one under the other where there is no room */
.db-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;width:100%}

/* ---------- home: what is coming up, then the notes by day ---------- */

.db-page{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;padding:20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-lift);color:var(--navy)}
.db-page-title{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.2}
.db-coming{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white)}
.db-cday{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;padding:14px 16px}
.db-cday+.db-cday{border-top:1px dashed var(--rule)}
.db-cdate{display:flex;align-self:start;align-items:center;gap:8px;white-space:nowrap}
.db-cnum{min-width:30px;font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-cmonth{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.db-cmonth i{width:6px;height:6px;border-radius:50%;background:var(--emerald)}
.db-cwd{display:block;font-size:12px;color:var(--faint)}
.db-cevents{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.db-cevents li{display:flex;align-items:center;gap:8px;min-width:0;padding-left:10px;border-left:3px solid var(--rule)}
.db-cevents li[data-now]{border-left-color:var(--emerald)}
.db-cev{display:flex;flex:1;flex-direction:column;min-width:0}
.db-cev b{font-size:13.5px;line-height:1.35}
.db-cev small{font-size:12px;color:var(--faint)}
/* where the day is narrow, each session drops its record button so its time keeps one line */
.db-coming{container-type:inline-size}
@container (max-width:460px){.db-cevents .db-iconbtn{display:none}}
.db-nday{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.db-nrows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.db-nrows li{display:flex;align-items:center;gap:10px}
.db-nicon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--white);color:var(--slate)}
.db-ntext{display:flex;flex:1;flex-direction:column;min-width:0}
.db-ntext b{font-size:13.5px}
.db-ntext small{font-size:12px;color:var(--faint)}
.db-ntime{font-size:12px;color:var(--faint);white-space:nowrap}

/* ---------- attendance on a phone, and what is left to catch up on ---------- */

.db-phone{width:286px;max-width:100%;padding:9px;border:1px solid var(--rule);border-radius:32px;background:var(--white);box-shadow:var(--shadow-lift)}
.db-phone-screen{position:relative;padding:28px 12px 12px;border-radius:24px;background:var(--paper)}
.db-phone-screen::before{content:'';position:absolute;top:10px;left:50%;width:58px;height:6px;margin-left:-29px;border-radius:99px;background:var(--rule)}
.db-ph-title{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.2;color:var(--navy)}
.db-ph-sub{margin:3px 0 10px;font-size:12px;color:var(--faint)}
.db-tally{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.db-roll{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white)}
.db-roll li{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px}
.db-roll li+li{border-top:1px solid var(--rule-soft)}
.db-av{display:inline-flex;flex:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--tint);font-family:var(--font-mono);font-size:10px;color:var(--slate)}
.db-rname{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--navy)}
.db-todo{width:250px;max-width:100%;padding:16px;border:1px solid rgba(163,79,20,.18);border-radius:var(--r-lg);background:var(--flag-wash);box-shadow:var(--shadow)}
.db-todo>p{margin:0 0 10px;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--flag)}
.db-todo ul{list-style:none;margin:0 0 12px;padding:0;border-radius:var(--r-md);background:var(--white)}
.db-todo li{display:flex;flex-direction:column;padding:8px 12px}
.db-todo li+li{border-top:1px solid var(--rule-soft)}
.db-todo b{font-size:13px;color:var(--navy)}
.db-todo small{font-size:12px;color:var(--faint)}

/* ---------- recording: the two ways in, and a recording under way ---------- */

.db-rec-start{width:262px;max-width:100%}
.db-consent{padding:9px 12px;border-radius:var(--r-sm);background:var(--flag-wash);font-size:12.5px;font-weight:700;line-height:1.45;color:var(--flag)}
.db-rec-live{width:238px;max-width:100%;align-items:center;text-align:center}
.db-rec-live small{font-size:12px;line-height:1.5;color:var(--faint)}
.db-bars{display:inline-flex;align-items:center;gap:4px;height:30px}
.db-bars i{width:5px;height:14px;border-radius:3px;background:var(--emerald);transform-origin:50% 50%}
.db-bars i:nth-child(2){height:28px}
.db-bars i:nth-child(3){height:20px}
.db-bars i:nth-child(4){height:10px}
.db-clock{font-family:var(--font-display);font-weight:600;font-size:40px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--navy)}
.db-fake.stop .db-i{font-size:12px}
@media (prefers-reduced-motion:no-preference){
  .db-bars i{animation:db-level 1.2s var(--ease-in-out,ease-in-out) infinite alternate}
  .db-bars i:nth-child(2){animation-delay:-.4s}
  .db-bars i:nth-child(3){animation-delay:-.8s}
  .db-bars i:nth-child(4){animation-delay:-.2s}
}
@keyframes db-level{from{transform:scaleY(.55)}to{transform:scaleY(1)}}

/* ---------- the transcript: the teacher's turns in the emerald wash ---------- */

.db-tx{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lift);color:var(--navy)}
.db-tx-tools{display:flex;align-items:center;gap:8px}
.db-search{display:flex;flex:1;align-items:center;gap:8px;min-width:0;padding:7px 12px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-sm);font-size:13px;color:var(--faint);white-space:nowrap}
.db-turn{display:grid;grid-template-columns:38px minmax(0,1fr);gap:3px 8px}
.db-who{grid-column:2;font-size:12px;font-weight:700;color:var(--faint)}
.db-turn[data-me] .db-who{color:var(--emerald-ink)}
.db-tt{grid-row:2;grid-column:1;align-self:center;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.db-bub{grid-row:2;grid-column:2;justify-self:start;padding:7px 12px;border-radius:10px;background:var(--tint);font-size:14px;line-height:1.45}
.db-turn[data-me] .db-bub{background:var(--emerald-wash)}
.db-name-speakers{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-left:46px;padding:5px 12px;border:1px dashed var(--mist);border-radius:var(--r-sm);font-size:12.5px;font-weight:700;color:var(--slate)}

/* ---------- the templates notes are written by ---------- */

.db-tpl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;width:100%;max-width:600px;color:var(--navy)}
.db-menu,.db-outline{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lift)}
.db-menu-top{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:var(--r-sm);background:var(--paper);font-size:13px;font-weight:700}
.db-menu-top .db-i:last-child{margin-left:auto}
.db-menu-label{margin:8px 10px 2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.db-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--slate)}
.db-menu-item .db-i{font-size:13px;color:var(--mist)}
.db-menu-item[data-on]{background:var(--emerald-wash);font-weight:700;color:var(--emerald-ink)}
.db-menu-item[data-on] .db-i{color:var(--emerald-ink)}
.db-outline{gap:0;padding:6px 14px}
.db-outline-row{display:flex;flex-direction:column;gap:7px;padding:10px 0;font-size:13px}
.db-outline-row+.db-outline-row{border-top:1px solid var(--rule-soft)}
.db-outline-row i{display:block;width:88%;height:7px;border-radius:4px;background:var(--tint)}
.db-outline-row i[data-w='1']{width:64%}
.db-outline-row i[data-w='2']{width:76%}
.db-feel{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-sm);font-size:13.5px;font-weight:700}
.db-feel-btns{display:inline-flex;gap:6px}
@media (max-width:560px){.db-tpl{grid-template-columns:minmax(0,1fr)}}

/* ---------- ask anything: a chat on the note, and the recipes ---------- */

.db-ask-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,48px);align-items:start;margin-top:clamp(26px,3vw,40px)}
.db-chat{display:flex;flex-direction:column;gap:12px;padding:18px 18px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow);font-size:14.5px;line-height:1.5;color:var(--navy)}
.db-chat-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft);font-size:13px;font-weight:700}
.db-chat-head>span{display:inline-flex;align-items:center;gap:7px}
.db-chat-head>span:last-child{font-weight:600;color:var(--faint)}
.db-q{display:inline-flex;align-self:flex-end;align-items:center;gap:7px;max-width:86%;padding:8px 13px;border-radius:12px 12px 4px 12px;background:var(--navy);color:#fff}
.db-a{display:block;align-self:flex-start;max-width:94%}
.db-ol{display:flex;flex-direction:column;gap:3px}
.db-a-tools{display:flex;gap:6px;margin-top:8px}
.db-chat .db-ask{margin:4px 0 0}
.db-ask-note{align-self:center;font-size:11.5px;color:var(--faint)}
.db-recipes h3{margin:0 0 8px}
.db-recipes>p{margin:0 0 16px;color:var(--slate)}
.db-recipes-card{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-sm)}
.db-recipe-list{list-style:none;margin:0;padding:8px;display:grid;gap:1px}
.db-recipe-list li{display:flex;align-items:flex-start;gap:11px;padding:8px 10px}
.db-recipe-list li>.db-i{margin-top:3px;font-size:15px;color:var(--emerald-ink)}
.db-recipe-name{display:block;font-weight:700;font-size:14.5px;line-height:1.35;color:var(--navy)}
.db-recipe-what{display:block;font-size:13px;line-height:1.45;color:var(--slate)}
.db-recipe-list li.db-recipe-own{margin-top:4px;border-top:1px solid var(--rule-soft);padding-top:12px}
@media (max-width:900px){.db-ask-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- how a lesson goes: the words held while the panel passes ---------- */

.db-moments{list-style:none;margin:clamp(30px,3.4vw,44px) 0 0;padding:0;display:grid;gap:clamp(44px,6vw,92px)}
.db-moment{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.db-moment-text{position:sticky;top:calc(var(--nav-h) + 40px);padding-top:clamp(8px,2vw,28px)}
.db-moment-text h3{margin:0 0 10px;font-size:clamp(20px,2.3vw,26px)}
.db-moment-text p{margin:0;max-width:46ch;color:var(--slate)}
.db-moment-panel{min-width:0}
.db-moment-panel .db-stage{min-height:clamp(280px,30vw,380px)}
@media (max-width:900px){
  .db-moment{grid-template-columns:minmax(0,1fr);gap:18px}
  .db-moment-text{position:static;padding-top:0}
}

/* the beats' picture is a panel here, with the day ahead under it; the paper keeps a narrower margin
   so the panel has the room it needs beside the words */
.beats-panel{display:flex;flex-direction:column}
.beats-panel .db-stage{padding:clamp(14px,2vw,26px)}
.beats-panel figcaption{margin:12px 2px 0;font-size:14px;line-height:1.55;color:var(--slate);text-wrap:pretty}
.beats-panel figcaption b{color:var(--navy)}

/* ---------- who can read what ---------- */

.db-privacy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.db-privacy h2{margin-bottom:.35em}
.db-privacy .lede{margin:0}
.db-rules{margin:0;border-top:1px solid var(--rule)}
.db-rule{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:8px 20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.db-rule dt{display:flex;align-items:center;gap:10px;font-weight:700;line-height:1.4;color:var(--navy)}
.db-rule dt .db-i{font-size:17px;color:var(--emerald-ink)}
.db-rule dd{margin:0;line-height:1.55;color:var(--slate);text-wrap:pretty}
@media (max-width:900px){.db-privacy{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.db-rule{grid-template-columns:minmax(0,1fr)}}

/* ---------- the plans, as on the pricing page ---------- */

.db-plans{margin-top:clamp(26px,3vw,38px)}
.db-plans-foot{max-width:76ch}

/* ---------- phones ---------- */

@media (max-width:520px){
  .db-stage{padding:16px 12px;border-radius:var(--r-lg)}
  .db-note{padding:18px 16px 4px}
  .db-ask{margin:8px 10px 12px}
  .db-chat .db-ask{margin:4px 0 0}
  .db-seg>span:not([data-on]) .db-i{display:none}
  .db-seg>span{padding:4px 9px}
  .db-cday{grid-template-columns:minmax(0,1fr);gap:8px}
  .db-page{padding:14px}
  .db-tx{padding:14px}
  .db-name-speakers{margin-left:0}
}
@media (max-width:380px){
  .db-ask-recipe{display:none}
}