/*
 * One stylesheet for the Telegram Mini App and the normal browser. Mobile first, no framework, no web
 * fonts (fast on low-end Android; Android ships an Ethiopic font). Light only for the MVP (story 2233):
 * the mockup is light, and Telegram's theme colours and the phone's dark mode are ignored. A designed
 * dark theme is story 2234.
 */
:root {
  color-scheme: light;
  --brand: #713650;
  --bg: #ffffff;
  --text: #1f1a1d;
  --hint: #6b6068;
  --link: var(--brand);
  --button: var(--brand);
  --button-text: #ffffff;
  --surface: #f6f1f4;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Ethiopic", "Abyssinica SIL", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: var(--link); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--surface);
}

.brand {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-name { display: grid; }
/* The 4 in cv.t4f.et looked larger than the t and f beside it (story 2247). */
.brand-name .wordmark i { font-style: normal; font-size: 0.9em; }
/* "Tsehai for Families" in mixed case in English, and Amharic letters, both need a readable size (stories 2246, 2274). */
.brand small { margin-top: 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; color: var(--hint); }
.tsehai-mark { display: block; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: #fbf2e2; overflow: hidden; flex-shrink: 0; }
.tsehai-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Line icons (see IconsHelper): the colour of the text they sit in. */
.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.seal .icon { width: 1.6rem; height: 1.6rem; vertical-align: middle; }
.metadata .icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* The header's hamburger menu (story 2252): a 44px button, and a small panel with the other language. */
.site-menu { position: relative; }
.site-menu-button { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 22px; color: var(--text); cursor: pointer; list-style: none; }
.site-menu-button::-webkit-details-marker { display: none; }
.site-menu-button .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.site-menu[open] .site-menu-button { background: var(--surface); }
.site-menu-list { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 30; min-width: 9rem; padding: 0.25rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-card); box-shadow: 0 6px 18px rgba(61, 45, 39, 0.12); }
.site-menu-item { display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.site-menu-item:hover, .site-menu-item:focus-visible { background: var(--surface); }

.site-main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem;
}

/* The coming-soon image (story 2275): the full width of a phone, edge to edge past the page padding, and no wider than
   the page on a big screen. width and height are set on the tag so the layout does not jump while it loads. */
.coming-soon { margin: -1rem; }
.coming-soon-image { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) { .coming-soon { margin: -2rem; } }

/*
 * Components carried over from Brukty's mockup (notes/mockup-source/brand.css and app.css): the same
 * palette (--mk-*), card, credential banner, seal and gold badge. The mockup is light only, so the dark
 * values here are ours. Telegram's theme colours still decide the page background and text.
 */
:root {
  --mk-line: #e9e2d9;
  --mk-card: #fffefb;
  --mk-credential: #fff8e4;
  --mk-credential-line: #eddead;
  --mk-seal: #ffe8a0;
  --mk-seal-line: #eed076;
  --mk-seal-text: #8b571d;
  --mk-badge: #f5e8ee;
  --mk-badge-text: #8b4666;
  --mk-ok: #356a4f;
  --mk-note: #f8f4ec;
  --mk-note-text: #735f4c;
  --mk-note-line: #dbad69;
  --mk-ink: #3d2d27;
  --mk-cover: #fff0bf;
  --mk-cover-line: #f3df9e;
  --mk-cover-sun: #ebb12e;
  --mk-avatar: #c29a78;
  --mk-pill: #edf3e9;
  --mk-pill-line: #dee8d7;
  --mk-pill-text: #3e6149;
  --mk-source: #f5f0e7;
  --mk-source-text: #89765f;
  --mk-muted: #746b65;
}

.card {
  border: 1px solid var(--mk-line);
  border-radius: 15px;
  background: var(--mk-card);
  color: var(--mk-ink);
  padding: 1.25rem;
  box-shadow: 0 1px 0 #5b351206;
}

.credential {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  background: var(--mk-credential);
  border: 1px solid var(--mk-credential-line);
  border-radius: 11px;
  padding: 1rem;
}

.credential h1 { margin: 0 0 0.25rem; font-size: 1.35rem; line-height: 1.3; }
.credential p { margin: 0.25rem 0 0; }

.seal {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--mk-seal);
  border: 1px solid var(--mk-seal-line);
  border-radius: 10px;
  color: var(--mk-seal-text);
  font-size: 1.5rem;
  font-weight: 700;
}

.badge-gold {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.6rem;
  background: var(--mk-badge);
  color: var(--mk-badge-text);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.verify { max-width: 36rem; margin: 1rem auto; }
.verify-valid .seal { color: var(--mk-ok); }
.verify .fact, .verify .code { color: var(--hint); font-size: 0.95rem; }
.verify .fact a { color: inherit; text-decoration: underline; }
.verify .facts { margin: 0.75rem 0; display: grid; gap: 0.35rem; }
.verify .facts div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.verify .facts dt { color: var(--hint); font-size: 0.95rem; }
.verify .facts dd { margin: 0; font-weight: 600; }
.verify .code { margin: 1rem 0 0; }
.verify .code strong { color: var(--mk-ink); letter-spacing: 0.08em; font-size: 1.1rem; }

/* The CV editor and other forms: mockup palette, 16px text (no zoom on focus), 44px touch targets. */
.page-title { margin: 0.5rem 0; font-size: 1.5rem; line-height: 1.3; }
.page-title + .notice { margin-top: 0.5rem; }

.notice {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--mk-credential);
  border: 1px solid var(--mk-credential-line);
  border-radius: 11px;
  font-size: 0.95rem;
}
.notice.saved { border-color: var(--mk-ok); }
.notice.error { border-color: #b3261e; }
.notice ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

.cv-form { max-width: 36rem; }
.cv-form h2 { margin: 1.75rem 0 0.25rem; font-size: 1.2rem; }
.hint { margin: 0 0 0.75rem; color: var(--hint); font-size: 0.9rem; }

.cv-form .field { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.cv-form .field > label,
.cv-form legend { display: block; margin-bottom: 0.25rem; padding: 0; font-weight: 600; }

.cv-form input[type="text"],
.cv-form textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
  background: var(--mk-card);
  color: var(--mk-ink);
  font: inherit;
}
.cv-form input[type="text"]:focus-visible,
.cv-form textarea:focus-visible,
.cv-form button:focus-visible,
.button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 400;
}
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); flex-shrink: 0; }

.entry { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-card); }
.entry .field:last-of-type { margin-bottom: 0.5rem; }

.cv-form button,
.button {
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.primary { background: var(--button); color: var(--button-text); border: 1px solid transparent; }
.secondary { background: var(--mk-card); color: var(--mk-ink); border: 1px solid var(--mk-line); }
.cv-form .actions { margin: 1.5rem 0 1rem; }
.cv-form .actions .primary { width: 100%; }

/* Browser login (story 2194): the QR code, large enough to scan from a desktop screen. */
.login { max-width: 28rem; margin: 1rem auto; }
.qr-frame { width: min(100%, 15rem); margin: 1rem auto; padding: 0.75rem; background: #fff; border-radius: 12px; }
.qr { display: block; width: 100%; height: auto; }
.login-status { min-height: 1.5rem; color: var(--mk-muted); }
.login-actions { display: grid; gap: 0.75rem; }
.login-actions form { display: contents; }
.login-actions button { min-height: 48px; border-radius: 10px; font: inherit; font-weight: 650; cursor: pointer; }
.login .button { width: 100%; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Text for a page that waits for the Mini App to sign the student in. */
.only-telegram { display: none; }
[data-shell="telegram"] .only-telegram { display: block; }
[data-shell="telegram"] .only-web { display: none; }

/* The bottom navigation (the mockup's bottomnav): My CV and Skills, with icons. */
.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: var(--mk-card);
  border-top: 1px solid var(--mk-line);
}
.bottomnav a {
  flex: 1;
  max-width: 11rem;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border-radius: 10px;
  color: var(--mk-muted);
  text-decoration: none;
}
.bottomnav i { font-style: normal; font-size: 0.7rem; }
.bottomnav a.selected { background: var(--mk-badge); color: var(--brand); }
.bottomnav .nav-icon { width: 1.4rem; height: 1.4rem; vertical-align: middle; }
body[data-nav="true"] .site-main { padding-bottom: 5.5rem; }
/* While editing the profile, the Done bar takes the bottom instead. */
body[data-editing="true"] .bottomnav { display: none; }

/*
 * The profile page (story 2220): the mockup's CV page, from brand.css. One column on a phone, two from
 * 48rem (main column, then availability). Cards, pills and the credential banner reuse the tokens above.
 */
.profile-columns { display: grid; gap: 1rem; align-items: start; }
.stack { display: grid; gap: 1rem; min-width: 0; }

.profile-card { padding: 0; overflow: hidden; }
.profile-card .cover {
  position: relative;
  height: 76px;
  overflow: hidden;
  background: var(--mk-cover);
  border-bottom: 1px solid var(--mk-cover-line);
}
.profile-card .cover::after {
  content: "☀";
  position: absolute;
  right: 22px;
  top: -22px;
  font-size: 81px;
  line-height: 1;
  color: var(--mk-cover-sun);
  opacity: 0.55;
}
.profile-inner { padding: 0 1.25rem 1.25rem; }
.avatar {
  width: 83px;
  height: 83px;
  margin-top: -40px;
  display: grid;
  place-items: center;
  border: 5px solid var(--mk-card);
  border-radius: 50%;
  background: var(--mk-avatar);
  color: #fff;
  font-size: 2rem;
  font-weight: 650;
  position: relative;
}
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar svg { display: block; width: 100%; height: 100%; }
.photo-unit { width: fit-content; min-width: 83px; }
.photo-unit .unit-form { margin: 0.5rem 0 0.75rem; }
.photo-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.photo-choose {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-weight: 650;
  cursor: pointer;
}
.photo-choose input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* The crop screen (story 2255): a square she drags and pinches, with a circle drawn on it (the outside of the
   circle is dimmed, so the square and the circle both show). Touch moves the picture, not the page. */
.crop-stage { position: relative; width: min(100%, 20rem); aspect-ratio: 1; margin: 0.75rem auto; overflow: hidden; background: #000; touch-action: none; border-radius: 6px; cursor: grab; }
.crop-image { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-circle { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); pointer-events: none; }
.crop-zoom { display: grid; gap: 0.25rem; width: min(100%, 20rem); margin: 0 auto 0.75rem; font-size: 0.85rem; color: var(--mk-muted); }
.crop-zoom input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--brand); }
.crop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.crop-actions button { min-height: 44px; padding: 0 1.1rem; border-radius: 10px; font-weight: 650; }
.profile-name { margin: 0.75rem 0 0.25rem; font-size: 1.8rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.metadata { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.75rem 0; font-size: 0.85rem; color: var(--mk-muted); }
.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: var(--mk-pill);
  color: var(--mk-pill-text);
  border: 1px solid var(--mk-pill-line);
  border-radius: 20px;
  font-size: 0.8rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }

.credential-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--mk-credential);
  border: 1px solid var(--mk-credential-line);
  border-radius: 11px;
  color: var(--mk-ink);
}
.credential-banner > div { display: grid; min-width: 0; flex: 1; }
.credential-sub { font-size: 0.8rem; color: var(--mk-muted); }

/* The certificate record in a modal (a native <dialog>), as in the mockup. */
.modal {
  width: calc(100% - 2rem);
  max-width: 32rem;
  padding: 0;
  border: 1px solid var(--mk-line);
  border-radius: 15px;
  background: var(--mk-card);
  color: var(--mk-ink);
}
.modal::backdrop { background: rgba(40, 28, 24, 0.5); }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--mk-line); }
.modalhead h2 { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.close { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--mk-ink); font-size: 1.5rem; cursor: pointer; }
.modalbody { padding: 1.25rem; }
.modalbody h3 { margin: 1rem 0 0.25rem; font-size: 1rem; }
.modalbody h3:first-child, .modalbody .badge-gold + h3 { margin-top: 0; }
.modalbody .small { margin: 0 0 0.25rem; }
.note { margin: 1rem 0; padding: 0.75rem 1rem; background: var(--mk-credential); border: 1px solid var(--mk-credential-line); border-radius: 11px; font-size: 0.9rem; }
.textlink { font-weight: 650; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 4px; color: var(--brand); white-space: nowrap; }

.card.pad { padding: 1.25rem; }
.card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.4; font-weight: 650; letter-spacing: -0.02em; }
.body-text { margin: 0; overflow-wrap: anywhere; }

.activity { padding: 1rem 0; border-bottom: 1px solid var(--mk-line); }
.activity:first-of-type { padding-top: 0.25rem; }
.activity:last-child { padding-bottom: 0; border-bottom: 0; }
.activity h3 { margin: 0.35rem 0; font-size: 1rem; }
.source-pill { display: inline-block; padding: 0.15rem 0.55rem; background: var(--mk-source); color: var(--mk-source-text); border-radius: 15px; font-size: 0.7rem; }
.small { font-size: 0.85rem; }
.no-margin { margin: 0; }
.muted { color: var(--mk-muted); }
.mini { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--mk-muted); }
.prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; font-size: 0.85rem; }
.prefs b { display: block; font-weight: 600; }
.prefs span { display: block; }
.activity p { overflow-wrap: anywhere; }

@media (min-width: 48rem) {
  .site-header { padding: 0.75rem 2rem; }
  .site-main { padding: 2rem; }
  .profile-columns { grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 1fr); gap: 1.25rem; }
}

/*
 * Edit mode (story 2220). The page looks the same; every editable piece gets a dashed plum outline and a
 * pencil, empty sections appear as dashed empty spots, and a bar at the bottom (thumb reach, below
 * Telegram's own top bar) says changes save as she goes and has Done. Tapping a piece turns it into its
 * form in place; it saves when she leaves it. In view mode all of this is hidden.
 */
:root { --edit-line: rgba(113, 54, 80, 0.5); }

.editable { position: relative; }
.unit-form { display: none; }
.editable[data-editing="true"] .unit-view { display: none; }
.editable[data-editing="true"] .unit-form { display: block; }

/* The button laid over a piece's view is how a tap, or the keyboard, opens it. Only edit mode has it. */
.unit-open { display: none; }

.profile-page[data-mode="view"] [data-empty="true"] { display: none; }
.profile-page[data-mode="view"] .edit-bar { display: none; }
.profile-page[data-mode="edit"] .card-actions { display: none; }

.profile-page[data-mode="edit"] { padding-bottom: 6rem; }
.profile-page[data-mode="edit"] .unit-open {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.profile-page[data-mode="edit"] .editable[data-editing="false"] {
  outline: 1.5px dashed var(--edit-line);
  outline-offset: 4px;
  border-radius: 10px;
}
.profile-page[data-mode="edit"] .editable[data-editing="false"]::after {
  content: "✎";
  position: absolute;
  top: 0.1rem;
  right: 0.25rem;
  z-index: 1;
  font-size: 1rem;
  color: var(--brand);
  pointer-events: none;
}
.profile-page[data-mode="edit"] .editable[data-editing="true"] {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Empty sections: a dashed spot with a plain invitation, not a card with a heading. */
.profile-page[data-mode="edit"] .photo-unit[data-editing="false"] { border-radius: 50%; outline-offset: 3px; }
.profile-page[data-mode="edit"] .card.ghost { background: transparent; border: 1.5px dashed var(--edit-line); box-shadow: none; }
.profile-page[data-mode="edit"] .card.ghost .editable { outline: 0; }
.profile-page[data-mode="edit"] .card.ghost .editable::after { content: none; }
.ghost-label { margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 650; color: var(--brand); }

.entry-unit + .entry-unit { margin-top: 0.75rem; }
.entry-unit + .entry-unit .activity { padding-top: 1rem; border-top: 1px solid var(--mk-line); }
.profile-page[data-mode="edit"] .entry-unit + .entry-unit .activity { border-top: 0; padding-top: 0.25rem; }
.card h2 + .entry-unit { margin-top: 0.5rem; }

.unit-form .field { margin: 0 0 1rem; }
.unit-form .field:last-of-type { margin-bottom: 0.25rem; }
.remove-entry { margin-top: 0.5rem; }

.unit-status { margin: 0.5rem 0 0; min-height: 1.25rem; font-size: 0.85rem; color: var(--mk-muted); }
.unit-status:empty { display: none; }
.saved-note { color: var(--mk-ok); animation: saved-fade 0.3s ease 2.2s forwards; }
@keyframes saved-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saved-note { animation-duration: 0.01s; } }

.field-errors {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid #b3261e;
  border-radius: 10px;
  background: var(--mk-card);
  color: var(--mk-ink);
  font-size: 0.9rem;
}
.field-errors p { margin: 0; }
.field-errors ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

.card-actions { margin: 1rem 0 0; }
.card-actions .primary {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
/* A text link that is really a button (it opens the certificate). */
button.textlink { padding: 0.5rem 0; border: 0; background: none; font: inherit; font-weight: 650; font-size: 0.85rem; cursor: pointer; }

.edit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem max(1rem, env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--mk-card);
  border-top: 1px solid var(--mk-line);
  box-shadow: 0 -2px 12px rgba(61, 45, 39, 0.08);
}
.edit-bar-note { margin: 0; flex: 1; min-width: 0; font-size: 0.85rem; color: var(--mk-muted); }
.edit-bar .primary { min-width: 6.5rem; min-height: 48px; padding: 0 1.25rem; border-radius: 10px; font: inherit; font-weight: 650; cursor: pointer; }

.private-note { margin: 0.5rem 0 0; }

/* The skills page: practices down, the ten course sections across. It scrolls sideways on a narrow phone. */
.skills-page { max-width: 48rem; margin: 0 auto; }
.coverage-scroll { overflow-x: auto; }
/* Fixed layout (story 2248): the practice column is sized on its own and the four area columns share the rest
   equally, whatever their header text. It still stretches with the screen; below 19rem it scrolls sideways. */
.coverage { width: 100%; min-width: 19rem; table-layout: fixed; border-collapse: separate; border-spacing: 4px; font-size: 0.85rem; }
.coverage col.practice-col { width: 6.6rem; }
html[lang="en"] .coverage col.practice-col { width: 6.9rem; }
.coverage caption { text-align: left; padding-bottom: 0.25rem; }
.coverage th[scope="col"] { font-weight: 600; color: var(--mk-muted); }
.coverage th[scope="row"] { position: sticky; left: 0; padding-right: 0.2rem; background: var(--mk-card); text-align: left; font-weight: 650; white-space: normal; line-height: 1.2; }
.coverage td, .coverage th[scope="col"] { text-align: center; }
/* Level cells (story 2248): one very pale sage ramp for every column (the mockup's #EEF2E8 family), deeper
   with the level, with the level and five progress dots. Physical is rose so green belongs to the level alone. */
:root { --level-1: #f8faf4; --level-2: #f3f6ed; --level-3: #eef3e7; --level-4: #e8efe0; --level-5: #e3ebd9; }
.coverage td.level { padding: 0; border-radius: 6px; background: var(--level-1); color: #3d2d27; font-weight: 700; }
.coverage td.l1 { background: var(--level-1); }
.coverage td.l2 { background: var(--level-2); }
.coverage td.l3 { background: var(--level-3); }
.coverage td.l4 { background: var(--level-4); }
.coverage td.l5 { background: var(--level-5); }
.coverage .pips { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.coverage .pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(61, 45, 39, 0.2); }
.coverage .pips i.on { background: #4a3b34; }
.coverage td.unfilled { background: var(--mk-source); color: var(--mk-muted); font-weight: 400; }
.skills-card .textlink { display: inline-block; margin-top: 0.5rem; }

/* The four development areas (the mockup's colours); the grid header, the tabs and the strengths rows share them. */
:root { --area-think: #dde9ed; --area-talk: #f3e9bd; --area-feel: #e9dfee; --area-move: #f5dad4; }
.area-think { --area: var(--area-think); }
.area-talk { --area: var(--area-talk); }
.area-feel { --area: var(--area-feel); }
.area-move { --area: var(--area-move); }
.icon-round { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--area, var(--mk-badge)); color: var(--mk-ink); }
.icon-round .icon { width: 1.3rem; height: 1.3rem; vertical-align: middle; }

.certrow { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.5rem 0; border-top: 1px solid var(--mk-line); color: var(--mk-ink); text-decoration: none; }
.certrow > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.certrow small { color: var(--mk-muted); }
.certrow > .icon { color: var(--mk-muted); }

.coverage th[scope="col"][data-area] { background: var(--area); border-radius: 6px; padding: 0.35rem 0.2rem; color: var(--mk-ink); font-weight: 650; }
.coverage th[scope="col"][data-area] .icon { display: block; margin: 0 auto 0.1rem; }
.coverage th[scope="col"][data-area] span { font-size: 0.75rem; }

/* English only (story 2244): the practice names are longer than the Amharic ones, so the row headers are
   tightened (smaller disc and text, names may wrap at their hyphens) to give the four area columns more room. */
html[lang="en"] .coverage th[scope="row"] { font-size: 0.8rem; }
html[lang="en"] .coverage .row-practice { gap: 0.3rem; align-items: center; }
html[lang="en"] .coverage .practice-disc { width: 20px; height: 20px; }
html[lang="en"] .coverage .practice-disc .icon { width: 12px; height: 12px; }

/* The mock's summary line: a bold N / 20 with a small caption (story 2244). */
.summary-line { margin: 0.1rem 0 0.8rem; }
.summary-line b { display: block; font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.03em; }
.summary-line small { color: var(--mk-muted); font-size: 0.75rem; }

/* "Care demonstrated in practice": the four areas as a 2 x 2 grid of buttons, as in the mock (story 2244). */
.care { margin: 1.25rem 0; }
.care > h2 { margin: 0 0 0.75rem; font-size: 1.2rem; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.area-button { display: grid; justify-items: center; gap: 0.2rem; padding: 0.75rem 0.4rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-card); color: var(--mk-ink); text-decoration: none; text-align: center; min-height: 44px; }
.area-button b { font-size: 0.9rem; line-height: 1.3; }
.area-button small { font-size: 0.7rem; color: var(--mk-muted); }
/* The selected cell, area and practice share one thick plum outline, no background shading (the shading in
   the map means a level). */
.area-button[aria-current="true"] { outline: 3px solid var(--brand); }
.coverage td.current .level-link { outline: 3px solid var(--brand); }
/* A practice under the selected area: a row (disc, name, level), opening the evidence modal when it has a level. */
.practice-card { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.5rem 1rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-card); color: var(--mk-ink); margin-bottom: 0.5rem; text-decoration: none; }
.practice-card b { flex: 1; }
.practice-card small { color: var(--mk-muted); }/* Level badge: plum text, thin plum-tint border, five pips filled up to the level. No hue (story 2241). */
.level-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0.55rem; border: 1px solid #d9cfc4; border-radius: 20px; background: var(--mk-card); color: var(--mk-ink); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.level-badge .pips { display: inline-flex; gap: 2px; }
.level-badge .pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(61, 45, 39, 0.2); }
.level-badge .pips i.on { background: #4a3b34; }
/* The pill is tinted with its level's step of the same five greens as the map (story 2249), on the video
   cards and in the practice cards under each area; the practice cards themselves are plain. */
.level-badge.l1 { background: var(--level-1); }
.level-badge.l2 { background: var(--level-2); }
.level-badge.l3 { background: var(--level-3); }
.level-badge.l4 { background: var(--level-4); }
.level-badge.l5 { background: var(--level-5); }

/* Practices: a small deep disc with a white icon, the only place a practice has a colour (story 2241). */
:root { --disc-megarat: #2f8a63; --disc-maberetatat: #a23b34; --disc-megelets: #3b5fa8; --disc-meqebabel: #9b3d73; --disc-meketel: #6e5039; }
.practice-disc { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.practice-disc .icon { width: 14px; height: 14px; }
.disc-megarat { background: var(--disc-megarat); }
.disc-maberetatat { background: var(--disc-maberetatat); }
.disc-megelets { background: var(--disc-megelets); }
.disc-meqebabel { background: var(--disc-meqebabel); }
.disc-meketel { background: var(--disc-meketel); }
.practice-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.7rem 0.2rem 0.25rem; border: 1px solid var(--mk-line); border-radius: 22px; background: #fff; font-size: 0.9rem; }
.row-practice { display: inline-flex; align-items: center; gap: 0.4rem; }
.practice-card b { display: inline-flex; align-items: center; gap: 0.5rem; }

/* A level in the table is a button-sized link that opens its evidence (story 2228). */
.coverage td.level:has(.level-link) { padding: 0; }
.coverage .level-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; line-height: 1.1; font-size: 0.9rem; border-radius: 6px; color: inherit; text-decoration: none; }
.coverage .level-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.practice-card[data-selected="true"] { outline: 3px solid var(--brand); }

/* The evidence gallery (story 2227): one card per observed moment. */
.moment { margin: 0; }

/* Loading states (story 2235): a pure-CSS spinner, still (and read out) for reduced motion. */
.spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid var(--mk-line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.waiting { display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 0; text-align: center; color: var(--mk-muted); }
.waiting p { margin: 0; }
turbo-frame[busy]:not(#evidence_modal) { opacity: 0.55; transition: opacity 0.15s; }

/* The swipeable gallery (story 2230): one moment per slide, scroll-snapped, with a counter and buttons. */
.gallery { margin: 1rem 0; }
.gallery-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.gallery-count { font-weight: 650; color: var(--mk-muted); }
.gallery-step { min-width: 44px; min-height: 44px; border: 1px solid var(--mk-line); border-radius: 22px; background: var(--mk-card); color: var(--mk-ink); font-size: 1.4rem; line-height: 1; }
.gallery-step:disabled { opacity: 0.35; }
.gallery-track { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; padding: 0 2px; }
.moment-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.moment .chips { margin-bottom: 0.6rem; }
/* The clip box draws its own states (story 2238); the video shows only once its first frame has arrived. */
/* 16:9 until the video's size is known, then the box takes its shape (a vertical video: a square, never taller
   than it is wide; story 2242). Not wider than 26rem, so it is not huge on a wide screen. */
.clip-box { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 26rem; margin: 0 auto 0.6rem; overflow: hidden; border-radius: 10px; background: var(--mk-source); }
.moment-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; visibility: hidden; }
.theatre-stage .moment-clip { position: static; visibility: visible; width: 100%; height: 100%; }
.clip-expand { position: absolute; right: 0.4rem; top: 0.4rem; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: rgba(0, 0, 0, 0.5); color: #fff; }
.clip-expand[hidden] { display: none; }
/* Where our Expand button is shown the player's own full-screen button is hidden (it is greyed out there, and
   controlsList alone only faded it on Android). The dialog is already full screen, so it has none either. */
.gallery[data-own-fullscreen] video::-webkit-media-controls-fullscreen-button { display: none; }
/* Our buttons fade away with the player's own controls while a video plays (the gallery sets data-idle). */
.clip-expand, .theatre-close { transition: opacity 0.25s; }
.clip-box[data-idle="true"] .clip-expand { opacity: 0; pointer-events: none; }
.theatre[data-idle="true"] .theatre-close { opacity: 0; pointer-events: none; }
.clip-expand .icon { width: 1.3rem; height: 1.3rem; }
.clip-box:not([data-state="ready"]) .clip-expand { display: none; }
/* The near-full-screen dialog a clip is moved into: black, the video as large as the screen allows. */
.theatre { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #000; }
.theatre::backdrop { background: #000; }
.theatre-stage { width: 100%; height: 100%; display: grid; place-items: center; }
/* A bare X, no circle, the same distance from the top and the right (an icon, so it is centred exactly). */
.theatre-close { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 0.9rem); top: calc(env(safe-area-inset-top, 0px) + 0.9rem); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #fff; }
.theatre-close .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); }
.clip-box[data-state="ready"] .moment-clip { visibility: visible; }
.clip-state { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 0.75rem; color: var(--mk-source-text); }
.clip-idle .icon { width: 2.6rem; height: 2.6rem; opacity: 0.55; }
.clip-failed p { margin: 0; font-size: 0.85rem; }
.clip-box[data-state="idle"] .clip-idle, .clip-box[data-state="loading"] .clip-loading, .clip-box[data-state="failed"] .clip-failed { display: flex; }
.moment h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
/* The development area sits beside the practice and level: its colour, icon and short name. */
.area-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem 0.15rem 0.45rem; border-radius: 20px; background: var(--area, var(--mk-badge)); color: var(--mk-ink); font-size: 0.8rem; font-weight: 600; }
.area-pill .icon { width: 1rem; height: 1rem; }
.moment .evidence-origin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85rem; }
.moment .status-pill { display: inline-block; margin-bottom: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 15px; background: color-mix(in srgb, var(--mk-ok) 16%, var(--mk-card)); color: var(--mk-ok); font-size: 0.75rem; font-weight: 600; }
.moment .moment-title { margin: 0.2rem 0 0.3rem; font-size: 1.05rem; }
/* Line 1: the practice pill and the level; line 2: the area pill and the time. */
.moment .moment-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.45rem; }
.moment .moment-row-area { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* The mockup's observation box: warm panel with an amber left border. */
.moment .moment-note { margin: 0; padding: 0.8rem 1rem; background: var(--mk-note); color: var(--mk-note-text); border: 0; border-left: 3px solid var(--mk-note-line); border-radius: 7px; font-size: 0.9rem; }
.moment-note > b { display: block; margin-bottom: 0.35rem; }
.script-line { margin: 0 0 0.45rem; line-height: 1.5; }
.script-line:last-child { margin-bottom: 0; }
.script-line b { font-weight: 700; }
/* Inside the modal the gallery sits flush under the title. */
.modalbody .gallery { margin-top: 0; }
.modalbody .evidence-page > .mini:last-child { margin-bottom: 0; }