/* Presence check (lane P, Oct 15, 2026; public/app/presence.js). The workbook's own tokens (app.css, student-modern.css). */

/* Shelly's button: secondary to each page's main action, but in reach during class. The count after it is today's
   answers, so she can watch them arrive without opening names on a projected screen. */
.teacher-bar .presence-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.btn.presence-cta{gap:7px;padding:9px 16px;font-size:13.5px;font-weight:600}
.btn.presence-cta .presence-count{padding:1px 8px;border-radius:999px;background:#fff;color:#2f5360;font-size:12px;font-weight:600}

/* The mini check-in form: Points sits above its box as Category does above its menu (the shared .grading-worth leaves a
   number box inline with its label). */
.presence-ask-worth label>input,.presence-ask-worth label>select,.presence-ask-worth label>.grade-points{display:block;margin-top:4px}
.presence-ask-worth .grade-points input{width:80px}
.presence-ask-worth input[type=number]{width:110px}
/* Her previous versions, under the form: picking one fills it. */
.presence-history{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.presence-history select{display:block;width:100%;margin-top:4px}

/* The day's page in the Gradebook. Its head is the work-head her other grading pages use: back, title, meta. The meta
   and Category & points are one piece (so the link wraps with the words, never alone on a line), and the question with
   "n of N answered" is the head's own second line. */
.presence-head .presence-head-meta{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.presence-head .presence-head-meta .work-worth{margin-left:0}
.presence-head-sub{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:-6px 0 0}
.presence-head-sub .presence-asked,.presence-head-sub .presence-summary{margin:0}
/* On a phone the meta keeps its points and category and drops the kind (the page says what it is), so Category &
   points still fits beside it on one line. */
@media (max-width:480px){.presence-head .presence-kind{display:none}}
.presence-summary{margin:-4px 0 12px;color:var(--muted);font-size:14px}
/* Her own question, whole, under the day's title (the title keeps only its first words). */
.presence-asked{margin:-6px 0 10px;font:italic 16px/1.4 Georgia,"Times New Roman",serif;color:var(--ink)}
.presence-summary strong{color:var(--ink)}
.presence-rating strong{font-size:16px}
.presence-rating small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.presence-line{max-width:34ch}
.presence-line p{margin:0 0 4px}
/* Her replies, in the table's Comment column and in a girl's step of the run alike. */
.presence-line .presence-reply,.presence-step-answer .presence-reply{padding-left:10px;border-left:2px solid #cfe0e6;color:#2f5360;font-size:13px}
.presence-line .presence-reply span,.presence-step-answer .presence-reply span{font-weight:600;margin-right:6px}
.presence-line .presence-reply time,.presence-step-answer .presence-reply time{display:block;color:var(--muted);font-size:11px}
/* The girl's side of the conversation in her own color, and her reply Shelly hasn't read yet tagged New (Oct 20). */
.presence-line .presence-reply.is-hers,.presence-step-answer .presence-reply.is-hers{border-left-color:#e3cf98;color:var(--ink,#292d28)}
.presence-new{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:999px;background:#b8432f;color:#fff;font:600 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-style:normal;letter-spacing:.02em;vertical-align:1px}
/* Reply as a small button on each answer, so it's found at a glance (Oct 20). */
.presence-reply-open{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 10px;font-size:12.5px}
.teacher-table tr.is-marked td{color:var(--muted)}
.presence-quote{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#f4f6f2}

/* Her card (Tim, Oct 16: "could you give this dimension or color or something so that it can stands out a bit more from
   other assignemnts. maybe we sshould use bottom left so it can be snug to bottom screen"). Snug against the bottom
   left, square at the bottom edge, so it reads as something arriving rather than one more white assignment card: its own
   blue tint (the workbook's soft blue, which assignment tiles never use), a gold top edge, and a shadow that lifts it off
   the page. Report a problem stays bottom right, clear of it; on a phone the card takes the whole bottom edge and the
   pill steps aside until she sends or closes (body.presence-open). The safe area pads the inside, never a gap below. */
.presence-card{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:0;z-index:90;width:min(400px,calc(100vw - 48px));box-sizing:border-box;
  padding:20px 20px calc(16px + env(safe-area-inset-bottom));border:1px solid #a9c8d2;border-bottom:0;border-top:4px solid #99834e;border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,#cfe3ea 0%,#dcebf0 50%,#e7f1f4 100%);color:#292d28;
  box-shadow:0 -1px 0 #ffffffb3 inset,0 -14px 34px -12px #1f3a4466,0 -2px 8px -4px #1f3a4433;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  animation:presence-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes presence-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.presence-card{animation:none}}
.presence-card h2{margin:0 28px 14px 0;font:600 19px/1.3 Georgia,"Times New Roman",serif;color:#292d28}
.presence-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;color:#73796f;cursor:pointer}
.presence-close:hover,.presence-close:focus-visible{background:#d6e7ec;color:#292d28}
.presence-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:0 0 14px}
.presence-scale label{position:relative;margin:0}
.presence-scale input{position:absolute;opacity:0;pointer-events:none}
.presence-scale span{display:grid;place-items:center;height:36px;border:1px solid #b5d0d9;border-radius:10px;background:#fff;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3d626d;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.presence-scale label:hover span{border-color:#9ab8c2;background:#eef5f7}
.presence-scale input:focus-visible+span{outline:2px solid #3d626d;outline-offset:2px}
.presence-scale input:checked+span{background:#3d626d;border-color:#3d626d;color:#fff}
/* Her teacher's caption, right under the rating (Tim, Oct 15), then the comment box, which says what it's for until she
   types ("Comment more…"). */
.presence-note{margin:0 0 12px;color:#4f5d5a;font-size:13px;line-height:1.45}
/* Who reads the answer (Tim, Oct 18): quieter than the caption, right above Send / in the ask window. */
.presence-private{margin:0 0 10px;color:#5f6b64;font-size:12.5px;line-height:1.4}
.presence-comment{display:block;box-sizing:border-box;width:100%;margin:0 0 14px;padding:9px 12px;border:1px solid #d9dcd4;border-radius:10px;background:#fff;color:#292d28;font:15px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* The ring on the box's own edge, never outside it (Tim, Oct 1: focus rings stay on the field). */
.presence-comment:focus{outline:2px solid #3d626d;outline-offset:-1px;border-color:transparent}
/* The button looks like one from the start, and fills once she has chosen a number. */
.presence-send{display:block;width:100%;padding:11px 16px;border:1px solid #99834e;border-radius:999px;background:#fff;color:#8a7443;font:600 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transition:background .15s,color .15s}
.presence-send:not(:disabled){background:#99834e;color:#fff}
.presence-send:not(:disabled):hover{background:#8a7443}
.presence-send:disabled{cursor:default;opacity:.7}
.presence-thanks{display:flex;align-items:center;gap:8px;margin:0;color:#326548;font-weight:600}
/* Narrower than the card and the pill side by side: the card spans the bottom edge and the pill steps aside. */
@media (max-width:720px){
  .presence-card{left:0;right:0;width:auto;border-left:0;border-right:0}
  body.presence-open #support{display:none}
}
@media (max-width:560px){
  .presence-card{padding:16px max(16px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .presence-scale{grid-template-columns:repeat(5,1fr)}
  .presence-scale span{height:40px}
}

/* A girl's step in the one-by-one run (Tim, Oct 16): her answer, then her points, Absent / Exempt and a reply. */
.presence-step-answer{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#f4f6f2}
.presence-step-answer>p{margin:0 0 6px}
.presence-step-rating strong{font-size:22px;margin-right:2px}
.presence-step-rating time{margin-left:8px;color:var(--muted);font-size:12px}
.presence-run-from{text-align:left}
.presence-step-attendance{margin:0 0 12px}
.presence-ask-worth input:disabled{background:#f2f3ef;color:var(--muted)}