/* Learning Lions Hub. Brand sheet of 9 September 2026: green 3F8A5A, dark green 237046,
   light green E8F1EA, grey 4F4E55, orange F58020 as a single accent, borders BFBFBF.
   Headings Poppins, body Roboto. Lists are numbered. */
:root {
  --green: #3F8A5A;
  --green-dark: #237046;
  --green-light: #E8F1EA;
  --grey: #4F4E55;
  --orange: #F58020;
  --rule: #BFBFBF;
  --ink: #222222;
  --paper: #FFFFFF;
  --paper-2: #F6F8F6;
  --max: 1280px; /* laptop and wider; phones and tablets fill the width anyway */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
h1, h2, h3 { font-family: Poppins, Roboto, system-ui, Arial, sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; color: var(--green); }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; color: var(--grey); }
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }
p { margin: 0 0 .8rem; }
ol { padding-left: 1.4rem; margin: 0 0 .8rem; }
ol li { margin: .25rem 0; }
pre { white-space: pre-wrap; word-wrap: break-word; font: 15px/1.5 Roboto, system-ui, sans-serif; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem; margin: 0; }
img { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: var(--green-dark); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .55rem 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.05rem; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; }
/* The menu items are bubbles in the site's own colours (June, 25 October 2026): Learning Lions green on Darasa;
   portal.css recolours them for the Dira Portal. Safety and Welfare and ICT Support keep orange and blue. */
.nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; color: var(--green-dark); background: var(--green-light); text-decoration: none; padding: .35rem .85rem; border-radius: 999px; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { background: #fff; color: var(--green-dark); }
.site-pill { display: inline-flex; align-items: center; color: var(--green-dark); background: var(--green-light); text-decoration: none; padding: .35rem .85rem; border-radius: 999px; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.site-pill:hover { background: #fff; color: var(--green-dark); }
.nav-spacer { flex: 1; }
@media (max-width: 720px) { .site-pill { order: 2; } }
.auth { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .9rem; min-height: 32px; }
.auth .myhub { display: inline-flex; align-items: center; background: #fff; color: var(--green-dark); text-decoration: none; font-family: Poppins, sans-serif; font-weight: 600; font-size: .9rem; padding: .3rem .8rem; border-radius: 999px; }
.auth .myhub:hover { background: var(--green-light); }
.auth .who { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 500; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 999px; padding: .25rem .7rem .25rem .3rem; cursor: pointer; }
.auth .who:hover, .auth .who[aria-expanded="true"] { background: rgba(255,255,255,.22); }
.auth .who img { border-radius: 50%; }
.auth .caret { font-size: .7rem; opacity: .8; }
.who-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 11rem; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .35rem; z-index: 20; display: flex; flex-direction: column; }
.who-menu[hidden] { display: none; }
.who-menu a, .who-menu .link { display: block; color: var(--green-dark); text-decoration: none; padding: .45rem .7rem; border-radius: 6px; font-weight: 500; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.who-menu a:hover, .who-menu .link:hover { background: var(--green-light); }
.who-menu .link { border-top: 1px solid var(--rule); margin-top: .25rem; border-radius: 0 0 6px 6px; color: var(--grey); }
.auth .meta { color: #fff; opacity: .85; }
.table .num { text-align: right; }
.roles-cell { min-width: 22rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .55rem; margin: .1rem .15rem .1rem 0; font-size: .82rem; background: #fff; cursor: pointer; }
.chip.on { background: var(--green-light); border-color: var(--green); }
.chip input { margin: 0; }
.button.small { padding: .25rem .6rem; font-size: .85rem; }
.module-body { padding: 0 1rem .8rem; }
.module-body h4 { margin: .9rem 0 .2rem; font-family: Poppins, sans-serif; font-size: .95rem; color: var(--grey); }
.module-body .files { border-top: 0; }
.queue { list-style: none; padding: 0; margin: 0; }
.queue .item { border-top: 1px solid var(--rule); padding: .9rem 0; }
.queue .item:first-child { border-top: 0; }
.queue .item-head { margin-bottom: .2rem; }
.queue label { display: block; margin: .6rem 0 .4rem; color: var(--grey); font-weight: 500; }
.queue textarea { display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; }
.note-text { margin: .4rem 0; font-size: .95rem; }
.menu { display: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: .4rem .8rem; font: inherit; }
@media (max-width: 720px) {
  .menu { display: inline-block; }
  .auth { order: 3; width: 100%; justify-content: flex-end; min-height: 0; }
  .nav { display: none; width: 100%; flex-direction: column; padding-bottom: .4rem; }
  .nav.open { display: flex; }
}

/* sections */
.hero { padding: 2.2rem 0 1.2rem; }
.hero.small { padding: 1.4rem 0 .6rem; }
.lead { font-size: 1.1rem; color: var(--grey); }   /* the same width as the panels below it (June, 25 Oct 2026) */
.kicker { display: inline-block; font-family: Poppins, sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); margin-bottom: .3rem; }
.metaline { color: var(--grey); font-size: .95rem; }
.metaline span + span::before { content: " · "; }
.crumbs { font-size: .9rem; color: var(--grey); padding-top: .8rem; }
.crumbs span { color: var(--rule); padding: 0 .2rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: .5rem 0 1.5rem; }
.card { display: block; background: var(--green-light); border-radius: 12px; padding: 1.2rem 1.2rem 1rem; text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.card:hover { border-color: var(--green); }
.card h2 { color: var(--green-dark); }
.card .meta { display: block; margin-top: .4rem; }
.panel.programme .cards { margin: .6rem 0 0; }
.panel.programme .card { background: #fff; }
.panel.programme .card h3 { color: var(--green-dark); font-size: 1.05rem; margin-bottom: .3rem; }
.panel.programme .card p { font-size: .95rem; color: var(--grey); margin: 0; }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0 0 1.2rem; }
.panel { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 0 0 1rem; }
.panel > ol:last-child, .panel > p:last-child { margin-bottom: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.panel-head h2 { margin: 0; }
.panel.prompt pre { font-size: 1rem; }

.track { margin: 1rem 0 1.4rem; }
.track > h2 { border-bottom: 2px solid var(--green); padding-bottom: .3rem; margin-bottom: .8rem; }
.module { margin: 0 0 .6rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); }
.module > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.module > summary::-webkit-details-marker { display: none; }
.module > summary::before { content: "+"; font-family: Poppins, sans-serif; font-weight: 700; color: var(--green); margin-right: .6rem; }
.module[open] > summary::before { content: "\2013"; }
.module > summary h3 { margin: 0; flex: 1; }
.module > .sessions, .module > p { margin: 0 1rem .8rem; border-top: 0; }
.module > .sessions { padding-top: .2rem; }
.collection details summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; width: 100%; }
.collection details summary::-webkit-details-marker { display: none; }
.collection { display: block; }
.collection .files { border-top: 0; margin: .4rem 0 0 1rem; }
.sessions, .files { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.sessions li, .files li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--rule); margin: 0; flex-wrap: wrap; }
.sessions a, .files a { text-decoration: none; font-weight: 500; }
.sessions a:hover, .files a:hover { text-decoration: underline; }
.code { display: inline-block; min-width: 4.2rem; font-family: Poppins, sans-serif; font-weight: 600; color: var(--green); }
.meta { color: var(--grey); font-size: .9rem; }
.title { font-weight: 500; }
.note { background: #FFF4E8; border-left: 3px solid var(--orange); padding: .6rem .9rem; border-radius: 0 8px 8px 0; margin-top: .9rem; }
.note:empty { display: none; }

.button { display: inline-block; background: var(--green); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--green-dark); color: #fff; }
.button.copy[data-done] { background: var(--green-dark); }

.ai { list-style: decimal; padding-left: 1.4rem; }
.ai li { margin: .5rem 0; }

.prevnext { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.prevnext a { text-decoration: none; font-weight: 500; }

.form label { display: block; margin: 0 0 .9rem; font-weight: 500; color: var(--grey); }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 8px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .8rem; }
.filters label { font-weight: 500; color: var(--grey); display: block; }
.filters select, .filters input { display: block; margin-top: .3rem; padding: .45rem .6rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; background: #fff; min-width: 12rem; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; background: var(--green-dark); color: #fff; padding: .5rem .6rem; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; }
.table td { padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table .note-cell { max-width: 28rem; white-space: pre-wrap; }
.button:disabled { opacity: .5; cursor: default; }

.prose { max-width: none; }
.prose h2 { margin-top: 1.6rem; border-bottom: 2px solid var(--green); padding-bottom: .25rem; }
.prose h3 { margin-top: 1.1rem; }
.prose p { margin-bottom: .9rem; }
.prose .table { margin: .4rem 0 1rem; }

.foot { color: var(--grey); font-size: .9rem; padding: 1.5rem 16px 2.5rem; border-top: 1px solid var(--rule); margin-top: 2rem; }
.foot p { margin: .2rem 0; }

/* Get Help: the header pill on every page, and the tap-to-call cards */
.help-pill { display: inline-flex; align-items: center; gap: .35rem; background: #C62828; color: #fff; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 600; font-size: .9rem; padding: .4rem .85rem; border-radius: 999px; white-space: nowrap; }
.help-pill:hover { background: #A32020; color: #fff; }   /* red, not orange, since 25 Oct 2026 */
@media (max-width: 720px) { .help-pill { order: 2; } }
.now { border: 2px solid var(--orange); background: #FFF4E8; }
.now h2 { color: #b35a0e; }
.calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: .6rem 0 .2rem; }
.call { display: block; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); }
.call:hover { border-color: var(--orange); }
.call .num { display: block; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--green-dark); line-height: 1.1; }
.call .name { display: block; font-weight: 500; margin-top: .15rem; }
.call .meta { display: block; margin-top: .25rem; }
.people { list-style: none; padding: 0; margin: 0; }
.people li { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.people li:last-child { border-bottom: 0; }
.people .role { font-family: Poppins, sans-serif; font-weight: 600; color: var(--green-dark); }
.people .who { color: var(--grey); }
.people .who a.button { margin-top: .3rem; }
@media (max-width: 560px) { .people li { grid-template-columns: 1fr; } }
.card.track { background: #fff; border-color: var(--rule); }
.card.track .kicker { color: var(--green); }

/* My Hub: the learner's own page */
.bar { height: 8px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: .4rem 0 .6rem; }
.bar > span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.bar.big { height: 12px; margin: .6rem 0 .9rem; }
.module .bar { margin: 0 1rem .4rem; }
.my .sessions li.done .title::after { content: " ✓"; color: var(--green); font-weight: 700; }
.my .sessions li.todo a { font-weight: 400; color: var(--grey); }
.my .sessions li.in .meta, .my .sessions li.done .meta { color: var(--green-dark); font-weight: 500; }
.my .next { margin: .4rem 0 0; }
.my .next .button { margin-left: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.chips .chip { font-size: .95rem; padding: .35rem .8rem; }
.my .form label { display: block; margin: .4rem 0; }
.my .form input[type=text], .my .form input:not([type]) { display: block; width: 100%; max-width: 24rem; margin-top: .3rem; padding: .5rem .7rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; }
.link.small { background: none; border: 0; color: var(--green-dark); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; padding: 0; }
.dnk .card.now { border-color: var(--orange); }

/* what and how to hand in */
.handin h3, .handin-box h3 { margin-top: .8rem; font-size: .95rem; }
.handin ol ol, .handin-box ol ol { margin: .2rem 0 .3rem; }
.handin-box { background: var(--green-light); border-radius: 10px; padding: .9rem 1rem .6rem; margin: .4rem 0 .8rem; }
.handin-box h2 { font-size: 1.05rem; margin-bottom: .3rem; }
details.done { margin: .6rem 0 .4rem; }
details.done summary { cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600; font-size: .95rem; color: var(--grey); }
#pieces label { display: block; margin: .5rem 0; }
#pieces input { display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; }

/* My Hub, guided: the now panel, the weeks view, stars */
.now-panel { border-color: var(--green); }
.my .where { margin: .2rem 0 .4rem; }
.my .redo-note { background: #FFF4E8; border-left: 3px solid var(--orange); padding: .5rem .8rem; border-radius: 0 8px 8px 0; }
.sessions.tight { border-top: 0; margin-bottom: .4rem; }
.sessions .when { display: inline-block; min-width: 9.5rem; color: var(--grey); font-size: .9rem; }
.week.now > summary h3 { color: var(--green-dark); }
.week.now { border-color: var(--green); }
.week.later .sessions a { color: var(--grey); }
.week.later .sessions li.locked .title::after { content: " ·"; color: var(--rule); }
.locked-note { margin: 0 1rem .8rem; }
.view-toggle { display: flex; gap: .4rem; }
.view-toggle .chip { font: inherit; font-size: .9rem; }
.starmark { font-size: .95rem; letter-spacing: .05em; color: var(--orange); }
.starmark.s3 { color: var(--green-dark); }
.starmark.s1 { color: #b35a0e; }
.my .sessions li.redo .meta, .queue .item.redo .item-head .meta { color: #b35a0e; font-weight: 500; }
.stars { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.track .panel-head { margin: 1rem 0 .6rem; }
.track .panel-head h2 { border-bottom: 0; }
@media (max-width: 560px) { .sessions .when { display: block; min-width: 0; } }

/* an admin viewing the hub as someone else */
.viewas { background: var(--orange); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; padding: .45rem 16px; font-size: .95rem; }
.viewas .button { background: #fff; color: #b35a0e; }
.viewas .button:hover { background: var(--orange-light, #FFF4E8); color: #b35a0e; }

/* worksheets: the sheet as the kit draws it, a box wherever the learner writes, the answers in blue */
.worksheet { --ink-blue: #1F4FB2; }
.worksheet .sheet { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 0 0 1.2rem; }
.worksheet .sheet h2 { color: var(--green); font-size: 1.35rem; margin-bottom: .2rem; }
.worksheet .sheet h3 { color: var(--green-dark); margin-top: 1rem; }
.worksheet .sub { color: var(--grey); font-style: italic; font-size: .92rem; margin-bottom: .9rem; }
.worksheet .lbl { font-family: Poppins, sans-serif; font-weight: 600; color: var(--grey); font-size: .95rem; margin: .9rem 0 .3rem; }
.worksheet .small { color: var(--grey); font-size: .88rem; }
.worksheet table.ws { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-size: .95rem; }
.worksheet table.ws th, .worksheet table.ws td { border: 1px solid var(--rule); padding: .35rem .5rem; vertical-align: top; text-align: left; }
.worksheet table.form th { background: var(--green-light); color: var(--green-dark); font-weight: 600; width: 32%; }
.worksheet table.grid thead th { background: var(--green-dark); color: #fff; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; }
.worksheet table.grid.numbered td:first-child { width: 2.4rem; text-align: center; color: var(--grey); }
.worksheet textarea, .worksheet input.blank { font: inherit; color: var(--ink-blue); border: 0; border-bottom: 1px dashed var(--rule); border-radius: 0; background: #FBFCFB; width: 100%; padding: .25rem .35rem; resize: none; overflow: hidden; min-height: 2.4rem; display: block; margin: 0; }
.worksheet td textarea { background: transparent; }
.worksheet input.blank { display: inline-block; width: auto; min-width: 9rem; max-width: 100%; min-height: 0; margin: 0 .25rem; }
.worksheet textarea:focus, .worksheet input.blank:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); background: #fff; }
.worksheet .ans { color: var(--ink-blue); white-space: pre-wrap; min-height: 1.4rem; }
.worksheet .ans.inline { display: inline-block; min-width: 6rem; border-bottom: 1px solid var(--rule); padding: 0 .3rem; margin: 0 .2rem; }
.worksheet .ans.empty { border-bottom: 1px dashed var(--rule); }
.worksheet .line { line-height: 2; }
.worksheet .box { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .6rem 0 0; cursor: pointer; }
.worksheet .box input { margin: 0; accent-color: var(--ink-blue); }
.worksheet .box.on { color: var(--ink-blue); font-weight: 500; }
.worksheet .ticks, .worksheet .tree { list-style: none; padding: 0; }
.worksheet .ticks li { margin: .3rem 0; }
.worksheet .tree li { padding-left: calc(var(--d) * 1.4rem); }
.worksheet .field { margin: .4rem 0 .9rem; }
.worksheet .field .lbl { margin-top: .4rem; }
.worksheet .sheet-index { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.worksheet .sheet-index a { background: var(--green-light); color: var(--green-dark); text-decoration: none; padding: .25rem .7rem; border-radius: 999px; font-size: .9rem; font-weight: 500; }
.worksheet .ws-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .2rem 0 .6rem; }
.worksheet .ws-bar.view { display: block; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1.1rem; }
.worksheet .ws-bar.view p { margin-bottom: .4rem; }
.worksheet .handed { margin-bottom: .8rem; }
.worksheet .ws-foot { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; }
.piece-links { font-size: .88rem; }
.piece-links a { white-space: nowrap; }
@media print {
  header.top, .foot, .crumbs, .sheet-index, .ws-bar .meta, #ws-print, .viewas, .ws-foot { display: none !important; }
  .worksheet .sheet { break-inside: avoid; border: 0; padding: 0 0 1rem; }
  .worksheet .sheet + .sheet { break-before: page; }
  .worksheet textarea, .worksheet input.blank { background: transparent; }
}

/* My Hub: a week as its six days, Monday to Saturday, whether or not a session falls on each */
.days { list-style: none; padding: 0; margin: 0 1rem .6rem; }
.days .day { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem 1rem; padding: .4rem 0; border-top: 1px solid var(--rule); margin: 0; }
.days .day > .when { padding-top: .2rem; font-weight: 500; }
.days .day.free > .meta { font-size: .85rem; padding-top: .2rem; }
.days .day .sessions.tight { border-top: 0; margin: 0; }
.days .day .sessions.tight li { padding: .2rem 0; border-bottom: 0; }
.sessions .when.slot { min-width: 6.5rem; }
@media (max-width: 560px) { .days .day { grid-template-columns: 1fr; } }

/* worksheets: pull-downs, paste boxes, the receipt's label row, and the evaluator's marks */
.worksheet select { font: inherit; color: var(--ink-blue); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .3rem .4rem; max-width: 100%; }
.worksheet textarea.output, .worksheet .ans.output { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .9rem; white-space: pre-wrap; }
.worksheet .box { white-space: nowrap; }
.worksheet .sheet-eval { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 1rem; padding: .7rem .9rem; background: var(--paper-2); border: 1px dashed var(--rule); border-radius: 10px; }
.worksheet .sheet-eval .se-note { flex: 1 1 16rem; font: inherit; padding: .35rem .6rem; border: 1px solid var(--rule); border-radius: 8px; }
.worksheet .evalpanel { border-color: var(--green); margin-top: .4rem; }
.worksheet .evalpanel label { display: block; margin: .6rem 0 .4rem; color: var(--grey); font-weight: 500; }
.worksheet .evalpanel textarea { display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; }
.worksheet .evalpanel .checks { list-style: none; padding: 0; }
.worksheet .evalpanel .checks li { margin: .3rem 0; }
.worksheet .evalpanel .checks .box { white-space: normal; align-items: flex-start; }
.worksheet .evalpanel .score { font-size: 1.05rem; margin: .8rem 0 .3rem; }
.sheet-marks { list-style: none; padding: 0; margin: .3rem 0 .6rem; }
.sheet-marks li { padding: .2rem 0; border-bottom: 1px solid var(--rule); }
.sheet-marks li.met { color: var(--green-dark); }
.sheet-marks li.not { color: #b35a0e; }
.sheet-marks li.open { color: var(--grey); }
@media print { .worksheet .sheet-eval, .worksheet .evalpanel { display: none !important; } }

/* the staff bubbles in the header: Crew, BootCamp (Studio and Desk under it), Evaluation */
.auth .role-pill { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); text-decoration: none; font: inherit; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; padding: .28rem .75rem; border-radius: 999px; cursor: pointer; }
.auth .role-pill:hover, .auth .role-pill[aria-expanded="true"] { background: #fff; color: var(--green-dark); }
.auth .role-drop { position: relative; display: inline-flex; }
.auth .role-drop .who-menu { left: 0; right: auto; min-width: 13rem; }
.auth .role-pill.two { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; padding: .22rem .7rem .26rem; }
.auth .role-pill .l1 { font-size: .68rem; font-weight: 500; opacity: .9; letter-spacing: .02em; }
.auth .role-pill .l2 { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; }
.who-menu .menu-head { display: block; padding: .35rem .7rem .45rem; color: var(--grey); font-size: .8rem; border-bottom: 1px solid var(--rule); margin-bottom: .25rem; }

/* the learner's copy after evaluation: the mark at the foot of each sheet, and the summary at the top */
.worksheet .sheet-mark { margin-top: 1rem; padding: .6rem .9rem; border-radius: 10px; border-left: 3px solid var(--green); background: var(--green-light); }
.worksheet .sheet-mark.not { border-left-color: var(--orange); background: #FFF4E8; }
.worksheet .eval-summary { margin: .6rem 0 .8rem; }

/* Org charts drawn from text (tools/build.js renderChart): boxes whose words wrap, CSS connectors.
   A wide chart scrolls sideways inside .chart-wrap rather than squeezing its boxes. */
.chart-wrap { overflow-x: auto; padding: .4rem 0 .6rem; }
.chart { display: inline-block; min-width: 100%; }
.chart ul { display: flex; justify-content: center; align-items: flex-start; list-style: none; margin: 0; padding: 1.3rem 0 0; position: relative; }
.chart > ul { padding-top: 0; }
.chart li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.3rem .35rem 0; }
.chart > ul > li { padding-top: 0; }
.chart li::before, .chart li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 1.3rem; border-top: 2px solid var(--rule); }
.chart li::after { right: auto; left: 50%; border-left: 2px solid var(--rule); }
.chart li:only-child::before, .chart li:only-child::after { display: none; }
.chart li:only-child { padding-top: 0; }
.chart li:first-child::before, .chart li:last-child::after { border: 0 none; }
.chart li:last-child::before { border-right: 2px solid var(--rule); border-radius: 0 8px 0 0; }
.chart li:first-child::after { border-radius: 8px 0 0 0; }
.chart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 1.3rem; border-left: 2px solid var(--rule); }
.chart > ul > li::before, .chart > ul > li::after { display: none; }
.cnode { display: block; box-sizing: border-box; min-width: 9rem; max-width: 13.5rem; padding: .5rem .7rem .55rem; border-radius: 10px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); text-decoration: none; text-align: center; font-size: .84rem; line-height: 1.3; }
.cnode b { display: block; font-family: Poppins, Roboto, sans-serif; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.cnode span { display: block; color: var(--grey); margin-top: .2rem; }
a.cnode:hover, a.cnode:focus { box-shadow: 0 0 0 3px rgba(245,128,32,.35); outline: none; }
.cnode.c-orange { background: #F58020; border-color: #B85B12; color: #211915; } .cnode.c-orange span { color: #4A2A10; }
.cnode.c-orange-light { background: #FFF3E8; border-color: #B85B12; color: #211915; } .cnode.c-orange-light span { color: #6B4A2E; }
.cnode.c-green { background: #3F8A5A; border-color: #237046; color: #fff; } .cnode.c-green span { color: #E8F1EA; }
.cnode.c-green-light { background: #E8F1EA; border-color: #3F8A5A; color: #237046; } .cnode.c-green-light span { color: #2F5A3F; }
.cnode.c-yellow { background: #FFCB05; border-color: #C99E00; color: #121212; } .cnode.c-yellow span { color: #3A3000; }
.cnode.c-gray { background: #4F4E55; border-color: #2C2C2A; color: #fff; } .cnode.c-gray span { color: #E6E4DF; }
.cnode.c-gray-light { background: #F2EFEB; border-color: #4F4E55; color: #2C2C2A; } .cnode.c-gray-light span { color: #4F4E55; }
.cnode.c-dark { background: #1E2D2A; border-color: #1E2D2A; color: #fff; } .cnode.c-dark span { color: #D9E2DF; }
.cnode.c-dashed { border-style: dashed; }
.cnode.c-wide { max-width: 22rem; }
.cnode.c-small { font-size: .78rem; min-width: 7rem; max-width: 10rem; padding: .4rem .5rem; }
.cnode.c-small b { font-size: .84rem; }

/* ICT Support: the small blue pill beside the orange one, on both sites (June, 25 October 2026) */
.ict-pill { display: inline-flex; align-items: center; background: #2F6FB0; color: #fff; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }
.ict-pill:hover { background: #245A91; color: #fff; }
@media (max-width: 720px) { .ict-pill { order: 2; } }

/* a name written onto a chart box by a page script (My Campus, staff only) */
.cnode .who { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: .86rem; color: var(--green-dark); margin: .15rem 0 .05rem; }
.cnode .who.open { color: var(--grey); font-weight: 500; font-style: italic; }
.cnode.c-dark .who, .cnode.c-gray .who, .cnode.c-green .who { color: #fff; }

/* The trainers' plan (/studio/plan/): the eight weeks as a grid, six days across, a morning and an
   afternoon pool per day. A session is a card whose height is its taught hours (--h, in hours); the
   cards stack, so a shorter card lets everything after it move up. The two tracks run side by side
   in a pool: shared sessions full width, SCS and MD in two lanes. A pool holding more than its
   half-day is marked in orange. */
.plan { --hour: 2.6rem; padding: .9rem 1rem 1rem; }
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .8rem; }
.plan-bar .sep { flex: 1; }
.plan-bar label { display: inline-flex; align-items: center; gap: .35rem; color: var(--grey); font-size: .9rem; font-weight: 500; }
.plan-bar input[type=number] { width: 4.2rem; padding: .3rem .4rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.plan-bar .status { color: var(--grey); font-size: .9rem; }
.plan-bar .status.err { color: #b35a0e; font-weight: 500; }
.plan-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--grey); font-size: .85rem; margin: 0 0 .6rem; }
.plan-legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .3rem; border: 1px solid var(--rule); }
.plan-legend i.shared { background: var(--green-light); border-color: var(--green); }
.plan-legend i.scs { background: #E6EEF9; border-color: #2F6FB0; }
.plan-legend i.md { background: #FBEAF0; border-color: #B03A6B; }
.plan-legend i.brief { background: repeating-linear-gradient(135deg, #fff 0 4px, #e6e6e6 4px 8px); }
.plan-legend i.moved { border: 2px solid var(--orange); background: #fff; }
.plan-scroll { overflow-x: auto; padding-bottom: .4rem; }
.plan-week { min-width: 1120px; margin: 0 0 1.1rem; }
.plan-week > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.1rem; margin: 0 0 .4rem; padding-bottom: .25rem; border-bottom: 2px solid var(--green); }
.plan-week > h2 .meta { font-family: Roboto, system-ui, sans-serif; font-weight: 400; }
.plan-days { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: .5rem; }
.plan-day > .dname { font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; color: var(--grey); text-align: center; margin-bottom: .25rem; }
.pool { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: .35rem .35rem .4rem; margin-bottom: .4rem; min-height: calc(var(--cap, 3) * var(--hour) + 2.4rem); position: relative; transition: border-color .15s, background .15s; }
.pool.over { border-color: var(--orange); background: #FFF8F0; }
.pool .capline { position: absolute; left: .35rem; right: .35rem; top: calc(1.95rem + var(--cap, 3) * var(--hour)); border-top: 1px dashed var(--rule); pointer-events: none; }
.pool.over .capline { border-top-color: var(--orange); }
.pool.drop { border-color: var(--green); background: var(--green-light); border-style: dashed; }
.pool .phead { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font-size: .78rem; color: var(--grey); margin: 0 .1rem .3rem; }
.pool .phead b { font-family: Poppins, sans-serif; font-weight: 600; color: var(--grey); }
.pool .phead .load { white-space: nowrap; }
.pool.over .phead .load { color: #b35a0e; font-weight: 600; }
.pool .lanes { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.pool .lane { min-height: .4rem; }
.pool .lane.shared { grid-column: 1 / -1; }
.pool .lane.scs, .pool .lane.md { min-height: 0; }
.pool .lanes.one .lane.shared { grid-column: 1 / -1; }
/* a card: code and hours on the first line, the title under it; the height is its hours */
.pcard { display: flex; flex-direction: column; box-sizing: border-box; height: calc(var(--h, 1) * var(--hour)); min-height: 1.75rem; margin: 0 0 .25rem; padding: .2rem .4rem; border-radius: 7px; border: 1px solid var(--rule); background: var(--green-light); border-color: var(--green); overflow: hidden; cursor: grab; font-size: .8rem; line-height: 1.25; position: relative; }
.pcard.scs { background: #E6EEF9; border-color: #2F6FB0; }
.pcard.md { background: #FBEAF0; border-color: #B03A6B; }
.pcard.brief { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.pcard.moved { box-shadow: inset 0 0 0 2px var(--orange); }
.pcard.dragging { opacity: .45; }
.pcard.before { box-shadow: 0 -3px 0 0 var(--green-dark); }
.pcard:active { cursor: grabbing; }
.pcard .l1 { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.pcard .code { min-width: 0; font-size: .82rem; color: var(--green-dark); }
.pcard.scs .code { color: #244F80; }
.pcard.md .code { color: #7A2548; }
.pcard a { color: inherit; text-decoration: none; }
.pcard a:hover { text-decoration: underline; }
.pcard .hrs { width: 3.1rem; padding: 0 .15rem; font: inherit; font-size: .78rem; text-align: right; border: 1px solid transparent; border-radius: 4px; background: rgba(255,255,255,.6); color: var(--ink); }
.pcard .hrs:hover, .pcard .hrs:focus { border-color: var(--green); background: #fff; outline: none; }
.pcard .ttl { color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard.h1 .ttl { -webkit-line-clamp: 1; }
.pcard.h0 .ttl { display: none; }
.pcard .tag { position: absolute; right: .35rem; bottom: .15rem; font-size: .68rem; color: var(--grey); }
.plan-tray { margin-top: .4rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.plan-tray h2 { font-size: 1rem; margin-bottom: .3rem; }
.plan-tray .tray { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 2.6rem; padding: .4rem; border: 1px dashed var(--rule); border-radius: 10px; background: #fff; }
.plan-tray .tray.drop { border-color: var(--green); background: var(--green-light); }
.plan-tray .pcard { height: auto; min-height: 0; width: 15rem; margin: 0; }
.plan-tray .pcard .tag { position: static; display: block; }
.plan .meta.small { font-size: .85rem; }
.plan.readonly .pcard { cursor: default; }
.plan.readonly .pcard .hrs { pointer-events: none; background: transparent; }
@media (max-width: 720px) { .plan-week { min-width: 900px; } .plan-days { grid-template-columns: repeat(6, minmax(140px, 1fr)); } }

/* ---- claude/cohort-calendar (26 October 2026): the plan's three blocks a day, pieces, and the cohort
   calendar pages (/studio/calendar/, /calendar/). Appended under the plan styles above. ---- */
.pool.none { min-height: 0; background: var(--paper-2); border-style: dashed; }
.pool.none .phead { margin-bottom: 0; }
.pool.sgl .phead b, .pool.evening .phead b { color: #5a5a63; }
.pcard.sgl { border-style: dashed; background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)); }
.pcard.sgl.brief { background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.pcard .kind { font-family: Poppins, sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .03em; color: var(--grey); vertical-align: 1px; }
.pcard .tools { position: absolute; left: .3rem; bottom: .1rem; display: none; gap: .15rem; }
.pcard:hover .tools, .pcard:focus-within .tools { display: inline-flex; }
.pcard .tools button { font: inherit; font-size: .7rem; line-height: 1; padding: .1rem .3rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--grey); cursor: pointer; }
.pcard .tools button:hover { border-color: var(--green); color: var(--green-dark); }
.plan-legend i.sgl { border-style: dashed; background: #fff; }
.plan-bar a.button.small { text-decoration: none; }
.plan-tray .pcard .tools { position: static; display: inline-flex; margin-top: .2rem; }

/* cohorts: the staff table and form */
.cohorts .form { max-width: 34rem; }
.cohorts .form label.check { display: flex; align-items: center; gap: .5rem; }
.cohorts .form label.check input { width: auto; margin: 0; }
.cohorts .acts { white-space: nowrap; }
.cohorts .acts .button, .cohorts .acts .link { margin-right: .2rem; }
.cohorts h2 { margin-top: 1rem; }

/* the dated calendar a learner opens */
.cal .plan-bar { margin-bottom: .6rem; }
.cal-week { margin: 0 0 1.2rem; }
.cal-week > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.1rem; margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 2px solid var(--green); }
.cal-week > h2 .meta { font-family: Roboto, system-ui, sans-serif; font-weight: 400; }
.cal-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.cal-day { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .6rem .4rem; }
.cal-day.today { border-color: var(--orange); box-shadow: 0 0 0 2px #FFF4E8; }
.cal-day.holiday { background: #FFF8F0; border-color: var(--orange); }
.cal-day .dname { font-family: Poppins, sans-serif; font-weight: 600; font-size: .9rem; color: var(--green-dark); margin-bottom: .3rem; }
.cal-day .dname .date { color: var(--grey); font-weight: 500; }
.cal-day .now-tag { display: inline-block; background: var(--orange); color: #fff; font-size: .7rem; border-radius: 999px; padding: 0 .45rem; margin-left: .2rem; vertical-align: 1px; }
.cal-day .hol { font-family: Poppins, sans-serif; font-weight: 600; color: #b35a0e; margin: 0 0 .4rem; }
.cal-day .block { border-top: 1px solid var(--rule); padding: .3rem 0 .35rem; }
.cal-day .block .bhead { font-family: Poppins, sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: var(--grey); margin-bottom: .15rem; }
.cal-day .block ul, .cal-list { list-style: none; padding: 0; margin: 0; }
.cal-day .block li, .cal-list li { font-size: .88rem; line-height: 1.3; margin: .15rem 0; padding-left: .5rem; border-left: 3px solid var(--green); }
.cal-day .block li.scs, .cal-list li.scs { border-left-color: #2F6FB0; }
.cal-day .block li.md, .cal-list li.md { border-left-color: #B03A6B; }
.cal-day .block li.brief, .cal-list li.brief { border-left-style: dashed; }
.cal-day .block li a, .cal-list li a { text-decoration: none; }
.cal-day .block li a:hover, .cal-list li a:hover { text-decoration: underline; }
.cal-day .block li .code { min-width: 0; }
.cal-day .block li .hrs, .cal-list li .hrs { color: var(--grey); font-size: .82rem; white-space: nowrap; }
.cal-day .block li .kind, .cal-list li .kind { font-family: Poppins, sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .03em; color: var(--grey); }
.cal-day .block p.meta { font-size: .8rem; margin: 0; }
.cal .view-toggle .chip { font: inherit; font-size: .85rem; cursor: pointer; }
.cal-day .over { font-size: .78rem; color: #b35a0e; margin: 0 0 .3rem; }

/* ---- claude/take-and-teach (26 October 2026): the two guided walks. Take the session: the slide, the
   trainer's voice under it, a sheet's rows as step cards. Teach the session: the TOT slide drawn from its
   text, the notes beside it, the run sheet down the side. Appended under the calendar styles. ---- */
.walk { margin: .4rem 0 1.5rem; }
.walk-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .4rem 0 .2rem; flex-wrap: wrap; }
.walk-bar .jump { flex: 1 1 14rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; }
.walk-bar .jump select { font: inherit; font-size: .9rem; max-width: 100%; padding: .3rem .4rem; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); }
.walk .bar { margin: .2rem 0 .9rem; }
.walk .stage { margin: 0 0 1rem; }
.walk .stage-h { font-size: 1.35rem; margin: .6rem 0 .3rem; }
.walk .slide { margin: 0 0 .8rem; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.walk .slide img { display: block; width: 100%; height: auto; }
/* a slide drawn from its text, when there is no image: the same 16:9 box, the brand's own type */
.walk .slide.drawn { aspect-ratio: 16 / 9; display: flex; align-items: flex-start; background: linear-gradient(135deg, #fff, var(--paper-2)); }
.walk .slide.drawn .slide-text { padding: clamp(.9rem, 4vw, 2.4rem) clamp(1rem, 5vw, 3rem); width: 100%; overflow: auto; max-height: 100%; }
.walk .slide.drawn .kicker { color: var(--green); margin-bottom: .2rem; }
.walk .slide.drawn h2 { font-size: clamp(1.2rem, 3.4vw, 2rem); color: var(--green); margin-bottom: .6rem; }
.walk .slide.drawn ul { list-style: none; padding: 0; margin: 0; font-size: clamp(.9rem, 1.9vw, 1.15rem); }
.walk .slide.drawn li { margin: .25rem 0; }
.walk .slide.drawn li.bullet { padding-left: 1.1rem; position: relative; }
.walk .slide.drawn li.bullet::before { content: "•"; position: absolute; left: .2rem; color: var(--orange); }
.walk .slide.tot .slide-text { max-height: none; }
.walk .slide.tot { aspect-ratio: auto; min-height: 12rem; }
/* the trainer's voice: the notes as the kit writes them */
.voice { background: var(--green-light); border-radius: 12px; padding: .9rem 1.1rem .4rem; margin: 0 0 1rem; }
.voice .part { margin: 0 0 .7rem; }
.voice .part p, .voice .part ol { margin-bottom: .2rem; }
.voice .plabel, .steer-inline .plabel { display: inline-block; font-family: Poppins, sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--green-dark); margin-right: .4rem; }
.voice .part.say { font-size: 1.05rem; }
.voice .part.time, .voice .part.watch { color: var(--grey); font-size: .95rem; }
.voice .do-list { padding-left: 1.3rem; }
.voice .steer { display: block; margin: .3rem 0 .5rem; }
.voice .steer summary { cursor: pointer; color: var(--green-dark); font-weight: 500; font-size: .92rem; }
.voice .steer p { margin: .3rem 0 0 .2rem; color: var(--grey); }
.steer-inline { display: block; color: var(--grey); margin: .2rem 0 .4rem; font-size: .95rem; }
.walk .opens > .lbl { margin: .8rem 0 .4rem; }
.walk .walk-sheet { --ink-blue: #1F4FB2; }
/* step cards: the sheet's Step by Step rows, one card each */
.steps { list-style: none; padding: 0; margin: .4rem 0 1rem; counter-reset: none; }
.steps .step { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem .5rem; margin: 0 0 .5rem; }
.steps .step.done { border-color: var(--green); background: #F4FAF6; }
.steps .step-head { display: flex; gap: .6rem; align-items: flex-start; }
.steps .tick { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; flex: 0 0 auto; }
.steps .tick input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--green); }
.steps .num { font-family: Poppins, sans-serif; font-weight: 700; color: var(--green); min-width: 1.4rem; }
.steps .do { flex: 1; font-weight: 500; }
.steps .step.done .do { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--rule); }
.steps .type-row, .steps .see-row { margin: .4rem 0 0 2.1rem; }
.steps .lbl { font-size: .78rem; margin: 0 0 .15rem; }
.steps .type { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .92rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: .3rem .5rem; white-space: pre-wrap; }
.steps .type.own { background: transparent; border: 0; padding: 0; font-family: inherit; }
.steps .see-text { background: #FFF9F2; border-left: 3px solid var(--orange); padding: .3rem .6rem; border-radius: 0 6px 6px 0; }
.steps .see-text.own { background: transparent; border: 0; padding: 0; }
.steps .own textarea, .steps .own select, .steps .own input { width: 100%; }
.walk .faults { margin: .4rem 0 .8rem; }
.walk .faults summary { cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600; font-size: .95rem; color: var(--grey); }
.walk .handin .sheet-marks li.part { color: #b35a0e; }
.walk .handed { margin: .4rem 0 .8rem; }
.walk-status { margin: .4rem 0; min-height: 1.2rem; }
@media (max-width: 560px) { .steps .type-row, .steps .see-row { margin-left: 0; } .walk-bar .jump { order: 3; flex-basis: 100%; } }
/* Teach the session */
.teach-files { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: .2rem 0 .6rem; }
.teach-grid { display: grid; grid-template-columns: minmax(14rem, 17rem) 1fr; gap: 1.2rem; align-items: start; }
.teach-side h2 { font-size: 1rem; margin: 0 0 .4rem; }
.timeline { list-style: none; padding: 0; margin: 0 0 .6rem; border-left: 2px solid var(--rule); }
.timeline li { margin: 0; padding: 0 0 0 .7rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--rule); }
.timeline li.here::before { border-color: var(--green); background: var(--green); }
.timeline li.on .seg { background: var(--green-light); }
.timeline .seg { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; color: var(--ink); }
.timeline .seg:hover { background: var(--paper-2); }
.timeline .seg-title { display: block; font-weight: 500; }
.timeline .seg .meta { display: block; font-size: .82rem; }
.timeline.plain li { padding: .3rem 0 .3rem .7rem; }
.teach-slide { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.notes-col .voice { padding-top: .7rem; }
.practise { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem; }
.practise .box { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 500; }
.practise .box input { accent-color: var(--green); margin: 0; }
.practise .box.on { color: var(--green-dark); }
.practise .self { display: block; margin-top: .5rem; color: var(--grey); font-size: .9rem; font-weight: 500; }
.practise textarea { display: block; width: 100%; margin-top: .25rem; font: inherit; padding: .4rem .6rem; border: 1px solid var(--rule); border-radius: 8px; resize: none; overflow: hidden; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.thumb { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .7rem .8rem; }
.thumb img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); margin-bottom: .5rem; }
.thumb .lbl { margin: 0 0 .4rem; }
.thumb .voice { padding: .6rem .8rem .2rem; font-size: .95rem; }
.thumb .slide-text.small { font-size: .9rem; color: var(--grey); }
.segment { background: var(--paper-2); border: 1px solid var(--green); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1rem; }
.segment h3 { color: var(--green-dark); margin: 0; }
.segment .lbl { font-family: Poppins, sans-serif; font-weight: 600; color: var(--grey); font-size: .95rem; margin: .9rem 0 .3rem; }
.segment table.ws { width: 100%; border-collapse: collapse; margin: .3rem 0 .6rem; font-size: .92rem; }
.segment table.ws th, .segment table.ws td { border: 1px solid var(--rule); padding: .35rem .5rem; vertical-align: top; text-align: left; }
.segment table.form th { background: var(--green-light); color: var(--green-dark); width: 7rem; }
.segment table.grid thead th { background: var(--green-dark); color: #fff; font-family: Poppins, sans-serif; font-weight: 600; font-size: .85rem; }
.segment .ticks { list-style: none; padding: 0; }
.segment .ticks li { margin: .25rem 0; }
.segment .box { display: inline-flex; align-items: flex-start; gap: .4rem; }
.segment .box input { margin: .25rem 0 0; accent-color: var(--green); }
.teach-table td { vertical-align: top; }
.my .sessions .take { margin-left: .5rem; font-size: .85rem; }
@media (max-width: 860px) { .teach-grid { grid-template-columns: 1fr; } .teach-side { order: 2; } .teach-slide { grid-template-columns: 1fr; } }

/* ---- the lesson (content/lessons, learn.js): the screen as the teacher, one move at a time ---- */
.lesson-parts { list-style: none; padding: 0; margin: 0 0 .6rem; border-left: 2px solid var(--rule); }
.lesson-parts li { margin: 0; padding: 0 0 0 .7rem; position: relative; }
.lesson-parts li::before { content: ""; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--rule); }
.lesson-parts li.here::before { border-color: var(--green); background: var(--green); }
.lesson-parts li.done::before { border-color: var(--green); }
.lesson-parts li.done .seg-title { color: var(--green-dark); }
.lesson-parts .seg { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: .35rem .5rem; border-radius: 8px; cursor: pointer; color: var(--ink); }
.lesson-parts .seg:hover { background: var(--paper-2); }
.lesson-parts li.here .seg { background: var(--green-light); }
.lesson-parts .seg-title { display: block; font-weight: 500; }
.lesson-parts .seg .meta { display: block; font-size: .82rem; }
.move { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.3rem 1rem; margin: 0 0 1rem; }
.move.done { border-color: var(--green); }
.move h2 { font-size: 1.4rem; margin: .1rem 0 .6rem; }
.move .prose { font-size: 1.05rem; }
.move .prose p { margin-bottom: .7rem; }
.move .prose ul { padding-left: 1.3rem; margin: 0 0 .7rem; }
.move .prose li { margin: .3rem 0; }
.move .prose code, .move .see-text, .move .cmd { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.move .prose code { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0 .3rem; font-size: .95em; }
.move .lbl { font-family: Poppins, sans-serif; font-weight: 600; color: var(--grey); font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; margin: .9rem 0 .3rem; }
.move .cmd-wrap { position: relative; }
.move .cmd { font-size: 1rem; background: #1E2D2A; color: #F4FAF6; border: 0; border-radius: 10px; padding: .8rem 1rem; margin: 0; white-space: pre-wrap; }
.move .copy-cmd { position: absolute; top: .4rem; right: .6rem; color: #CFE3D6; }
.move .see-text { background: #FFF9F2; border-left: 3px solid var(--orange); padding: .5rem .8rem; border-radius: 0 8px 8px 0; font-size: .95rem; white-space: pre-wrap; }
.move .paste { display: block; margin-top: .6rem; }
.move .paste textarea { display: block; width: 100%; font: inherit; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .92rem; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 8px; resize: none; overflow: hidden; color: #1F4FB2; }
.move .paste-verdict { min-height: 1.2rem; margin: .3rem 0 0; }
.move .faults { margin: .7rem 0 .3rem; }
.move .faults summary { cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600; font-size: .95rem; color: var(--grey); }
.move .faults-list { padding-left: 1.2rem; }
.move .faults-list li { margin: .35rem 0; font-size: .95rem; }
.move .practise { margin: .9rem 0 0; }
.move .practise .box { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 500; font-size: 1.05rem; }
.move .practise .box input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--green); }
.move .practise .box.on { color: var(--green-dark); }
.move .choices { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.move .choice { text-align: left; font: inherit; font-size: 1rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .9rem; cursor: pointer; color: var(--ink); }
.move .choice:hover:not(:disabled) { border-color: var(--green); }
.move .choice.right { background: var(--green-light); border-color: var(--green); }
.move .choice.wrong { background: #FFF4E8; border-color: var(--orange); }
.move .feedback { margin: 0 0 .4rem .6rem; font-size: .95rem; }
.move .feedback.right { color: var(--green-dark); }
.move .feedback.wrong { color: #b35a0e; }
.move .model { background: var(--green-light); border-radius: 10px; padding: .6rem .9rem; margin-top: .5rem; }
.move .model p { margin: 0; }
.move.remember .prose { background: var(--green-light); border-radius: 10px; padding: .8rem 1rem .2rem; }
.lesson-end { border-color: var(--green); }
.lesson .walk-bar .jump { align-items: center; }

/* ---- the lesson, second pass (June, 26 October 2026): prompts on the right, the board, room or solo,
   sheets and cards filled in place, the Day-One Pack signed here; My Cards on My Darasa ---- */
.lesson-grid { display: grid; grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr) minmax(14rem, 17rem); gap: 1.2rem; align-items: start; }
@media (max-width: 1180px) { .lesson-grid { grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr); } .lesson-grid .lesson-prompts { grid-column: 2; } }
@media (max-width: 860px) { .lesson-grid { grid-template-columns: 1fr; } .lesson-grid .lesson-prompts { grid-column: auto; } .lesson-grid .teach-side { order: 2; } .lesson-grid .lesson-prompts { order: 3; } }
.lesson-prompts { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .9rem; position: sticky; top: 4.5rem; }
.lesson-prompts h2 { font-size: 1rem; margin: 0 0 .5rem; }
.lesson-prompts .prompt-card { border-top: 1px solid var(--rule); padding: .6rem 0 .2rem; }
.lesson-prompts .prompt-card .title { font-weight: 500; margin: 0 0 .2rem; }
.lesson-prompts .prompt-card .meta { font-size: .85rem; margin: 0 0 .4rem; }
.mode-line { margin: -.2rem 0 .6rem; }
.mode-choose { max-width: 46rem; margin: 1rem auto; }
.mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; margin-top: .8rem; }
.mode-option { display: flex; flex-direction: column; gap: .3rem; text-align: left; font: inherit; background: #fff; border: 2px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer; color: var(--ink); }
.mode-option:hover, .mode-option:focus { border-color: var(--green); outline: none; }
.mode-option strong { font-family: Poppins, sans-serif; color: var(--green-dark); font-size: 1.05rem; }
.mode-option span { color: var(--grey); font-size: .95rem; }
/* the board: what the trainer writes up, here for the learner who has no board */
.move.board { background: #fff; border: 2px solid #4F4E55; box-shadow: inset 0 0 0 6px #F2F2F2; }
.move.board .kicker { color: #2F6FB0; }
.move.board .prose { color: #1F3F7A; font-size: 1.08rem; }
.move.board .prose li { margin: .35rem 0; }
.move.board .prose strong { color: #0F2A57; }
/* sheets and cards filled in place */
.move .in-sheet, .move .in-card { margin: .9rem 0 .4rem; border: 1px solid var(--green); border-radius: 12px; padding: .2rem .9rem .6rem; background: #FBFDFB; }
.move .in-sheet .sheet { border: 0; padding: .6rem 0 0; margin: 0; }
.move .in-sheet .sheet h2 { font-size: 1.1rem; }
.move .card-tag { color: var(--green-dark); margin-top: .7rem; }
.move .write textarea { color: #1F4FB2; font-family: inherit; font-size: 1rem; }
.card-form { display: grid; gap: .5rem; margin: .4rem 0; }
.card-field { display: block; }
.card-field .lbl { display: block; font-family: Poppins, sans-serif; font-weight: 600; color: var(--grey); font-size: .85rem; margin: 0 0 .2rem; }
.card-field input, .card-field textarea { display: block; width: 100%; font: inherit; color: #1F4FB2; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.card-field input:focus, .card-field textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
/* a document to sign */
.sign-doc { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1.1rem; margin: .8rem 0; max-height: 26rem; overflow: auto; }
.sign-doc h3 { color: var(--green-dark); margin: 0 0 .4rem; }
.sign-doc .lbl { margin: .8rem 0 .2rem; }
.sign-doc p { margin: 0 0 .45rem; }
.sign-box { background: var(--green-light); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 .6rem; }
.sign-box .agree { font-weight: 500; margin: .6rem 0; }
.sign-box .box { display: inline-flex; gap: .45rem; align-items: flex-start; cursor: pointer; }
.sign-box .box input { margin: .25rem 0 0; accent-color: var(--green); width: 1.1rem; height: 1.1rem; }
.sign-box.signed { border-left: 4px solid var(--green); }
/* My Cards on My Darasa */
.my-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.hub-card { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .8rem 1rem; }
.hub-card h3 { color: var(--green-dark); margin: 0 0 .2rem; }
.hub-card .card-sheet .sheet { border: 0; padding: 0; margin: 0; }
.hub-card .card-sheet table.ws { font-size: .88rem; }
.card-view { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .2rem .7rem; margin: .5rem 0; }
.card-view dt { color: var(--grey); font-size: .88rem; }
.card-view dd { margin: 0; color: #1F4FB2; }
.card-entry { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .5rem; }
.card-add { margin-top: .5rem; }
.card-add summary { cursor: pointer; color: var(--green-dark); font-weight: 500; }
.sign-list { list-style: none; padding: 0; margin: 0; }
.sign-list li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.sign-list .title { font-weight: 500; margin-right: .4rem; }
.take-panel { background: #fff; }

/* the lesson's right-hand column: boxes for the prompts and the materials; the daily ritual; the Recall Bank */
.lesson-prompts { padding: 0; background: none; border: 0; display: flex; flex-direction: column; gap: .8rem; }
.lesson-prompts .side-box { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .9rem; }
.lesson-prompts .side-box h2 { font-size: 1rem; margin: 0 0 .5rem; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { display: flex; flex-direction: column; padding: .35rem 0; border-top: 1px solid var(--rule); }
.side-list li:first-child { border-top: 0; }
.side-list a { font-weight: 500; text-decoration: none; }
.side-list a:hover { text-decoration: underline; }
.side-list .meta { font-size: .82rem; }
.ritual { border-color: var(--green); }
.ritual-steps { padding-left: 1.3rem; margin: .4rem 0 0; }
.ritual-steps > li { margin: 0 0 1rem; padding-left: .2rem; }
.ritual-steps > li.done > strong::after { content: " ✓"; color: var(--green); }
.ritual-steps .box { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; cursor: pointer; }
.ritual-q { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.ritual-q .q { font-weight: 500; margin: .2rem 0 .4rem; }
.ritual-q .choices { display: flex; flex-direction: column; gap: .35rem; }
.ritual-q .choice { text-align: left; font: inherit; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: .45rem .7rem; cursor: pointer; color: var(--ink); }
.ritual-q .choice.right { background: var(--green-light); border-color: var(--green); }
.ritual-q .choice.wrong { background: #FFF4E8; border-color: var(--orange); }
.ritual-q .feedback { margin: 0 0 .3rem .4rem; font-size: .92rem; }
.ritual-q .feedback.right { color: var(--green-dark); }
.ritual-q .feedback.wrong { color: #b35a0e; }
.ritual-q .model { background: var(--green-light); border-radius: 8px; padding: .5rem .7rem; margin: .4rem 0; }
.ritual-q .model p { margin: 0; }
.ritual-q .chips .chip { font: inherit; font-size: .88rem; }
.ritual-yesterday { background: var(--paper-2); border-radius: 10px; padding: .5rem .8rem; margin: .4rem 0 .6rem; }
.ritual-yesterday .line { font-weight: 500; margin: 0 0 .3rem; }
.ritual .card-field { margin: .4rem 0; }
.ritual-history ol { list-style: none; padding: 0; }
.ritual-history li { padding: .25rem 0; border-bottom: 1px solid var(--rule); }
.ritual-history .tag { font-size: .78rem; border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; background: var(--paper-2); border: 1px solid var(--rule); }
.ritual-history .tag.done { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.ritual-history .tag.not { background: #FFF4E8; border-color: var(--orange); color: #b35a0e; }
.recall .recall-list { padding-left: 1.3rem; }
.recall .recall-list li { margin: 0 0 .8rem; }
.recall .recall-list .q { font-weight: 500; margin: 0 0 .2rem; }
.recall .recall-list details summary { cursor: pointer; color: var(--green-dark); font-size: .92rem; }
.recall h3 { margin-top: 1rem; }

/* the About Me photo; the recall questions under an evaluation; the review queue */
.card-photo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .4rem; }
.card-photo .photo-frame { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: .75rem; }
.card-photo .photo-frame img, .card-photo-view { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.card-photo-view { float: right; margin: 0 0 .4rem .6rem; border: 1px solid var(--rule); }
.card-photo .meta { flex-basis: 100%; font-size: .82rem; }
.button.plain { background: #fff; color: var(--green-dark); border: 1px solid var(--green); }
.button.plain:hover { background: var(--green-light); color: var(--green-dark); }
.recall-on-eval { margin-top: 1rem; }
.recall .state.pending { color: #b35a0e; }
.recall .state.approved { color: var(--green-dark); font-weight: 500; }
.recall .state.returned { color: #b35a0e; font-weight: 500; }
.recall .review { border-color: var(--orange); }
.recall .filters-inline { display: flex; flex-wrap: wrap; gap: .6rem; }
.recall .filters-inline select { font: inherit; font-size: .9rem; padding: .2rem .4rem; border: 1px solid var(--rule); border-radius: 6px; max-width: 16rem; }

/* My Darasa in two columns: the day and the track on the left; About Me, My Cards and the signed documents on the right */
.my-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.2rem; align-items: start; }
@media (max-width: 960px) { .my-grid { grid-template-columns: 1fr; } }
.my-side .panel { margin-bottom: .9rem; }
.my-side .panel > h2 { font-size: 1.05rem; }
.my-side .hub-card.about { overflow: hidden; }
.my-side .hub-card.about h2 { margin-bottom: .4rem; }
.my-side .card-view { grid-template-columns: 1fr; gap: 0; }
.my-side .card-view dt { margin-top: .3rem; }
.hub-card.roll { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 0; margin: 0 0 .5rem; }
.hub-card.roll > summary { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .55rem .8rem; cursor: pointer; list-style: none; }
.hub-card.roll > summary::-webkit-details-marker { display: none; }
.hub-card.roll > summary::before { content: "+"; font-family: Poppins, sans-serif; font-weight: 700; color: var(--green); margin-right: .4rem; }
.hub-card.roll[open] > summary::before { content: "\2013"; }
.hub-card.roll > summary .title { flex: 1; font-family: Poppins, sans-serif; font-weight: 600; color: var(--green-dark); }
.hub-card.roll > *:not(summary) { margin-left: .8rem; margin-right: .8rem; }
.hub-card.roll[open] { padding-bottom: .6rem; }
.my-side .card-sheet table.ws { font-size: .82rem; }

/* the ritual rolled up once done; My Plan; Daily Rituals for the trainers */
.ritual-roll > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; cursor: pointer; list-style: none; }
.ritual-roll > summary::-webkit-details-marker { display: none; }
.ritual-roll > summary .rt { font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--green); }
.ritual-roll > summary::before { content: "+"; font-family: Poppins, sans-serif; font-weight: 700; color: var(--green); margin-right: .2rem; }
.ritual-roll[open] > summary::before { content: "\2013"; }
.ritual-roll[open] > summary { margin-bottom: .5rem; }
.ritual .done-note { margin-top: .3rem; }
.ritual-submit { margin: .4rem 0 .2rem; }
.my-plan .pace-finish { margin: .2rem 0 .6rem; }
.pace-list { list-style: none; padding: 0; margin: 0 0 .6rem; }
.pace-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.pace-list li.now { background: var(--green-light); padding-left: .4rem; border-radius: 6px; }
.pace-list li.done a { color: var(--grey); text-decoration: line-through; }
.pace-list a { text-decoration: none; font-weight: 500; }
.pace-form .chips .chip { font-size: .9rem; }
.pace-summary { margin-top: .6rem; background: var(--paper-2); border-radius: 10px; padding: .6rem .8rem; }
.rituals-table td.rd { text-align: center; padding: .3rem; }
.rituals-table td.rd.done { background: var(--green-light); }
.rituals-table td.rd.started { background: #FFF8F0; }
.rituals-table td.rd .link { font-weight: 700; color: var(--green-dark); text-decoration: none; }
.rituals-table th { font-size: .75rem; white-space: nowrap; }

/* taking a photo with the camera */
.camera-box { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.camera-panel { background: #fff; border-radius: 14px; padding: 1rem; max-width: 26rem; width: 100%; text-align: center; }
.camera-panel video { width: 100%; max-width: 22rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #222; transform: scaleX(-1); }

/* Take a moment: the breathing box at the top of My Darasa's right-hand column */
.breathe { text-align: center; }
.breathe h2 { font-size: 1.05rem; text-align: left; }
.breathe > .meta { text-align: left; }
.breathe-circle { width: 120px; height: 120px; margin: .4rem auto; display: flex; align-items: center; justify-content: center; }
.breathe-circle span { display: block; width: 50%; height: 50%; border-radius: 50%; background: var(--green-light); border: 2px solid var(--green); transition: width 4s ease-in-out, height 4s ease-in-out; }
.breathe.on .breathe-circle span { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { width: 45%; height: 45%; } 50% { width: 100%; height: 100%; background: #CFE3D6; } }
@media (prefers-reduced-motion: reduce) { .breathe.on .breathe-circle span { animation: none; width: 80%; height: 80%; } }
.breathe-word { min-height: 1.4rem; font-weight: 500; color: var(--green-dark); margin: .2rem 0 .4rem; }
.breathe-controls { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.breathe-controls input { width: 4.5rem; font: inherit; padding: .25rem .4rem; border: 1px solid var(--rule); border-radius: 6px; margin-left: .3rem; }

/* Breathe and Centre: one button; the circle opens under it while it runs */
.breathe { padding-top: .8rem; padding-bottom: .8rem; }
.breathe .breathe-run { display: none; }
.breathe.on .breathe-run, .breathe.ended .breathe-run { display: block; }
.breathe.ended .breathe-circle, .breathe.ended .breathe-run > .meta { display: none; }
.breathe .breathe-controls { margin: 0; }
.breathe .breathe-controls input { margin: 0 .2rem 0 0; width: 3.8rem; }

/* The session page: the lesson and the hand-in on the left, the slides, materials and prompts on the right */
.session-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); gap: 1rem; align-items: start; }
.session-side .panel { margin-bottom: 1rem; }
.session-side .files li { flex-direction: column; gap: .1rem; }
@media (max-width: 900px) { .session-cols { grid-template-columns: 1fr; } }
.learn-status { margin: .3rem 0 0; }
.learn-status .bar { display: block; height: 8px; margin: .2rem 0 .3rem; }
.learn-status.done .learn-done { color: var(--green-dark); font-weight: 600; }
.learn-status.done .learn-done::before { content: "✓ "; }

/* The photo: a round picture with a camera badge on hover, and a small menu */
.card-photo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.card-photo .photo-wrap { position: relative; display: inline-block; }
.card-photo .photo-frame { position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid var(--rule); padding: 0; background: var(--paper-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.card-photo .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo .photo-empty { font-size: .75rem; color: var(--grey); text-align: center; padding: 0 .5rem; }
.card-photo .photo-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s; }
.card-photo .photo-frame:hover .photo-cam, .card-photo .photo-frame:focus-visible .photo-cam, .card-photo .photo-frame[aria-expanded="true"] .photo-cam { opacity: 1; }
.card-photo .photo-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .3rem; display: flex; flex-direction: column; min-width: 11rem; }
.card-photo .photo-menu[hidden] { display: none; }
.card-photo .photo-menu button, .card-photo .photo-menu label { display: block; text-align: left; background: none; border: 0; font: inherit; color: var(--green-dark); padding: .45rem .7rem; border-radius: 6px; cursor: pointer; font-weight: 500; }
.card-photo .photo-menu button:hover, .card-photo .photo-menu label:hover { background: var(--green-light); }
.card-photo-view { border-radius: 50%; object-fit: cover; }
/* About Me, once saved: the answers, and Change as a button */
.hub-card.about details.card-add > summary { display: inline-block; list-style: none; cursor: pointer; background: var(--green); color: #fff; border-radius: 8px; padding: .25rem .7rem; font-size: .85rem; font-weight: 500; }
.hub-card.about details.card-add > summary::-webkit-details-marker { display: none; }
.hub-card.about details.card-add[open] > summary { background: var(--grey); }

/* The small window for adding recall questions */
.recall-panel { text-align: left; max-width: 34rem; }
.recall-panel h2 { margin-bottom: .3rem; }
.recall-panel .q { font-weight: 500; }

/* The X in the corner of a small window */
.recall-panel { position: relative; }
.pop-x { position: absolute; top: .4rem; right: .5rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--grey); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pop-x:hover, .pop-x:focus-visible { background: var(--paper-2); color: var(--ink); }
.recall-panel h2 { padding-right: 2.2rem; }