/* Dashboard styles, layered on the phase 1 stylesheet so the two screens do not
   drift apart. Same tokens, same 48px tap target, same thumb-reach dock.

   Colour carries meaning consistently across every screen here: coral is the
   attention voice — unpaid, an allergy, a draft still waiting — and green is
   the done voice — entry recorded, report approved, invoice settled. Apart from
   the drawings, nothing else on a screen is coloured. */

.pill--button { border: 0; font: inherit; cursor: pointer; }

/* Lists ------------------------------------------------------------------- */
/* Rows sit on the ground. A faint dashed rule between them is the only line. */
.list { display: flex; flex-direction: column; }

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.list > .card:last-child { border-bottom: 0; }
.card:focus-visible { outline: 2px solid var(--attn); outline-offset: 2px; border-radius: 8px; }
.card__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
/* The child's name is a button that opens the entry screen, but it reads as
   text. A class rather than an inline style: `style-src 'self'` blocks style
   attributes. It takes the full height of its row, because this is the
   control a teacher taps twenty-five times a day. */
.card__main--button {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  align-self: stretch;
  justify-content: center;
  min-height: var(--tap);
}
.card__name { font-weight: 600; font-size: 1.1rem; }
.card__sub { font-size: .84rem; color: var(--ink-soft); }
.card__chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer;
}

/* A row that needs the teacher to stop — an allergy — says so in its own text. */
.card--alert .card__name { color: var(--attn-ink); }
.card__sub--alert { color: var(--attn-ink); font-weight: 500; }

/* The count on a classroom row. */
.card__count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 700; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  background: var(--done-soft); color: var(--done-ink);
}
.card__count--pending { background: var(--attn-soft); color: var(--attn-ink); }

/* The status dot on a roster row. */
.dot {
  width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
  background: var(--line);
}
.dot--done { background: var(--done); }

/* Status tags -------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: .74rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--done-soft);
  color: var(--done-ink);
  white-space: nowrap;
}
.tag--warn { background: var(--attn-soft); color: var(--attn-ink); }
.tag--muted { background: var(--tint); color: var(--ink-soft); }
.tag--danger { background: var(--attn-soft); color: var(--attn-ink); font-weight: 600; }

/* Forms -------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: .88rem; color: var(--ink-soft); }
.form label > span { padding-inline-start: 4px; }

/* Report cards ------------------------------------------------------------- */
/* A report is a paragraph on the ground, with its name above it and its
   actions below. The dashed rule separates one child from the next. */
.report-card {
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1.5px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.list > .report-card:last-child { border-bottom: 0; }
.report-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.report-card__who { font-weight: 600; font-size: 1.05rem; }
.report-card__body {
  margin: 0;
  line-height: 2; white-space: pre-wrap; font-size: 1.02rem;
}
.report-card__body[contenteditable="true"] {
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--tint);
  outline: 2px dashed var(--attn); outline-offset: 0;
}
.report-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.report-card__tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Sending is the one "done" action a parent actually receives, so it takes the
   done voice rather than WhatsApp's own green. The glyph carries recognition. */
.btn--send { background: var(--done); color: var(--on-strong); }
.btn--send[data-opened="true"] { opacity: .5; }

.notice-strip svg { flex: 0 0 auto; margin-top: 2px; }
.notice-strip {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--done-soft); color: var(--done-ink);
  font-size: .86rem; margin: 0 0 var(--space-3);
  display: flex; align-items: flex-start; gap: var(--space-2);
}

.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-soft); font-size: .92rem; }

.spinner {
  display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor;
  border-inline-start-color: transparent; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Screen headings ---------------------------------------------------------- */
/* One drawing floats above the title; the title is flush right in RTL. */
.screen-head { display: flex; flex-direction: column; gap: var(--space-1); }
.screen-art { width: 150px; max-width: 46%; height: auto; margin: 0 auto var(--space-3); }
.screen-title { font-size: 1.9rem; font-weight: 700; margin: 0; }
.screen-sub { margin: 0; font-size: .92rem; color: var(--ink-soft); max-width: 34ch; }

/* Drawings ----------------------------------------------------------------- */
/* Generated by scripts/sketch.py into drawings.js. Every mark is a path drawn
   the way a child draws, and every colour below is the colour the real object
   comes in. Class attributes only: the CSP drops style attributes. */
.drawing { display: block; overflow: visible; color: var(--ink); }
.drawing path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drawing text { stroke: none; }
.drawing .ink { fill: currentColor; stroke: none; }
.drawing .kb { stroke: var(--k-blue); }
.drawing .kr { stroke: var(--k-red); }
.drawing .ky { stroke: var(--k-yellow); }
.drawing .kg { stroke: var(--k-green); }
.drawing .ko { stroke: var(--k-orange); }
.drawing .kp { stroke: var(--k-purple); }
.drawing .kbr { stroke: var(--k-brown); }
.drawing .acc { stroke: var(--attn); }
.drawing .acc2 { stroke: var(--done); }
.drawing .fa { fill: var(--attn); }
.drawing .fa2 { fill: var(--done); }
.drawing .slot { stroke: var(--line); stroke-dasharray: 3 4; }

/* A small drawing beside a word: an activity, the nap, the meal. */
.motif { width: 26px; height: 26px; flex: 0 0 auto; }
.motif path { stroke-width: 2.4; }

/* The day's progress: a tower of blocks ------------------------------------ */
/* One block per share of the class recorded, six cells in all. The newest
   block drops in when the screen opens, which is right after she saves a
   child. It replaces the progress ring. */
.progress { display: flex; align-items: center; gap: var(--space-4); }
.tower { width: 96px; height: auto; flex: 0 0 auto; }
.progress__text { display: flex; flex-direction: column; gap: 2px; }
.progress__count { font-weight: 700; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.progress__title { font-weight: 600; font-size: 1.02rem; }
.progress__sub { font-size: .84rem; color: var(--ink-soft); }

.drop-in { transform-box: fill-box; animation: drop-in .7s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes drop-in {
  0% { transform: translateY(-40px); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(0); }
  82% { transform: translateY(-3px); }
  100% { transform: translateY(0); opacity: 1; }
}

/* Moments ------------------------------------------------------------------ */
/* The two waits and the one finish that a spinner or a toast used to cover. */
.moment {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4); text-align: center;
}
.moment .drawing { width: 220px; max-width: 80%; height: auto; }
.moment__title { font-weight: 600; font-size: 1.15rem; }
.moment__sub { font-size: .9rem; color: var(--ink-soft); max-width: 30ch; }

/* Writing: each line draws itself, then the page clears and starts again. */
.drawing .ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.drawing .ln1 { animation: ln1 6s linear infinite; }
.drawing .ln2 { animation: ln2 6s linear infinite; }
.drawing .ln3 { animation: ln3 6s linear infinite; }
.drawing .ln4 { animation: ln4 6s linear infinite; }
@keyframes ln1 { 0% { stroke-dashoffset: 1; } 14%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ln2 { 0%, 16% { stroke-dashoffset: 1; } 32%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ln3 { 0%, 34% { stroke-dashoffset: 1; } 50%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ln4 { 0%, 52% { stroke-dashoffset: 1; } 66%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.drawing .scribe { transform-box: fill-box; transform-origin: 0% 100%; animation: scribe .45s ease-in-out infinite alternate; }
@keyframes scribe { from { transform: rotate(-5deg); } to { transform: rotate(4deg) translate(1.5px, -1px); } }

/* Sent: the envelope flies to the homes once, then the tick stays. */
.drawing .fly { transform-box: fill-box; transform-origin: center; animation: fly 1.8s cubic-bezier(.45, 0, .3, 1) .3s both; }
@keyframes fly {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(64px, -44px) rotate(-10deg); opacity: 0; }
}
.drawing .tick { transform-box: fill-box; transform-origin: center; animation: tick .5s ease-out 1.7s both; }
@keyframes tick { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.drawing .trail { stroke-dasharray: 2 5; animation: trail 1.2s linear 3; }
@keyframes trail { to { stroke-dashoffset: -14; } }

/* With reduced motion, each moment shows its finished state and stays still. */
@media (prefers-reduced-motion: reduce) {
  .drop-in, .drawing .ln1, .drawing .ln2, .drawing .ln3, .drawing .ln4,
  .drawing .scribe, .drawing .trail { animation: none; }
  .drawing .fly { animation: none; opacity: 0; }
  .drawing .tick { animation: none; }
}

/* Invoices ----------------------------------------------------------------- */
.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.month-nav__label { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.month-nav button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--tint); color: var(--ink); cursor: pointer;
}

/* The one number the owner opened this screen for, at display scale, in the
   attention voice. */
.owed { padding: var(--space-2) 0 var(--space-3); }
.owed__label { font-size: .86rem; color: var(--ink-soft); }
.owed__value { font-weight: 700; font-size: 2.5rem; line-height: 1.15; color: var(--attn); font-variant-numeric: tabular-nums; }
.owed__sub { font-size: .86rem; color: var(--ink-soft); }

.collected {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1.5px dashed var(--line);
  margin-bottom: var(--space-2);
}
.collected__label { font-size: .9rem; color: var(--ink-soft); }
.collected__value { font-weight: 600; font-size: 1.15rem; color: var(--done-ink); font-variant-numeric: tabular-nums; }

.invoice-amount {
  font-weight: 600; font-size: 1.1rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.invoice-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 auto; }

/* An icon-only round button, for a secondary action that does not deserve a
   word — waiving an invoice. */
.btn--round {
  width: var(--tap); height: var(--tap); flex: 0 0 auto; padding: 0;
  border-radius: 50%; background: var(--tint);
  border: 0; color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Development strip ---------------------------------------------------------- */
/* Deliberately not in the design's voice: this is scaffolding, and it should
   look like scaffolding so it is never mistaken for a real session. */
.devbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-2);
  padding: 6px 6px 6px var(--space-3);
  border: 1px dashed var(--attn);
  border-radius: 999px;
  background: var(--attn-soft);
  color: var(--attn-ink);
  font-size: .76rem;
}
.devbar__roles { display: flex; gap: 4px; }
.devbar__role {
  min-height: 32px; padding: 0 var(--space-3);
  border: 0; border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.devbar__role[aria-pressed="true"] { background: var(--attn); color: var(--on-strong); font-weight: 600; }