/* SEM Media LMS · the LMS's own shell pieces on top of the v2 kit (lms.css stays exactly as the guide ships it).
   Only kit tokens are used here, so every LMS colour and both themes work. */

/* Header: the page name when a screen gives no heading of its own, and the signed-out brand + language. */
.top-head{min-width:0}
.top-title{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container app (min-width:700px){.top-title{font-size:24px}}
.top-brand .brand{padding:0;text-decoration:none;color:var(--fg)}
.foot-lang{display:flex;gap:6px;align-items:center;margin:0}
.foot-lang .inp{width:auto;padding-block:6px}
.top .top-head h1{margin:0}

/* The LMS's logo: uploaded by the SEM Media team, light and dark versions. */
.brand{color:var(--fg)}
.brand-logo{max-height:40px;max-width:200px;width:auto;height:auto;vertical-align:middle}
.brand-logo.on-plate{background:#fff;padding:4px 8px;border-radius:8px}
.side .brand-logo{max-width:72px;max-height:48px}
.side nav{display:grid;gap:2px}

/* The bell: a panel over the page. */
.bell{position:relative}
.bell>summary{list-style:none;cursor:pointer}
.bell>summary::-webkit-details-marker{display:none}
.bell .cnt{top:0;right:0}
.bell-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);
  display:flex;flex-direction:column;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.bell-head,.bell-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}
.bell-head{border-bottom:1px solid var(--line)}
.bell-head form{margin:0}
.bell-foot{border-top:1px solid var(--line);font-size:13px}
.bell-foot a{color:var(--accent);font-weight:600;text-decoration:none}
.bell-list{list-style:none;margin:0;padding:4px 0;overflow-y:auto}
.bell-item{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:10px 16px}
.bell-item+.bell-item{border-top:1px solid color-mix(in oklab,var(--line) 60%,transparent)}
.bell-dot{width:8px;height:8px;border-radius:50%;margin-top:7px}
.bell-item.is-new .bell-dot{background:var(--accent)}
.bell-title{margin:0;font-weight:600;overflow-wrap:anywhere}
.bell-body{margin:2px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.bell-time{margin:4px 0 0;color:var(--muted);font-size:12px}
.bell-empty{padding:20px 16px;color:var(--muted);margin:0}
@container app (max-width:699px){.bell-panel{position:fixed;top:64px;right:12px;left:12px;width:auto}}

/* The line under every page: theme (signed out), sign out, and the optional SEM Media credit. */
.foot-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:18px 0 6px;color:var(--muted);font-size:13px}
.foot-line form{margin:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.foot-line .btn[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft)}
.platform-credit{width:100%;margin:4px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.platform-credit a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.credit-logo{height:18px;width:auto;opacity:.85}

/* Banners carry a form or button at the end. */
.banner form{margin:0}
.banner .i{width:18px;height:18px}
.toasts{position:fixed;left:0;right:0;bottom:0;pointer-events:none;padding:0 12px 90px;display:grid;gap:8px;justify-items:center;z-index:70}
.toasts .toast{pointer-events:auto;position:static}
@container app (min-width:700px){.toasts{padding-bottom:24px}}

/* Show/hide password: keep room for the eye button inside the filled field. */
.pw-field>input[type="password"],.pw-field>input[type="text"]{padding-right:52px}

/* Chips that are buttons (language and theme on the sign-in card). */
.chips button{border:0;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:transparent;cursor:pointer;min-height:32px}
.chips button.on{background:var(--accent);color:var(--accent-fg)}
.chips button:hover:not(.on){background:var(--surface2)}
form.chips{margin:0}
.authcard .seg{justify-self:center}
.authcard .banner{text-align:left}
.authcard form{display:grid;gap:12px}
.authcard form.chips{display:flex}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border:0}
.seg .btn{background:transparent;min-height:36px}
.seg .btn.on{background:var(--accent);color:var(--accent-fg)}
.seg label.btn{cursor:pointer}

/* Registration (guide screen 02): progress bars and the countdown in the header. */
.reg-card{border:0;border-radius:24px;box-shadow:0 1px 2px color-mix(in oklab,var(--fg) 5%,transparent)}
.reg-steps{display:flex;gap:6px;margin:0 0 30px}
.reg-steps li{flex:1;display:block;position:relative}
.reg-steps li span{display:block;width:auto;height:6px;border-radius:99px;background:var(--line);font-size:0;box-shadow:none}
.reg-steps li.is-current span,.reg-steps li.is-done span{background:var(--accent);box-shadow:none}
.reg-steps li em{display:none}
.reg-steps li.is-current em{display:block;position:absolute;left:0;top:14px;white-space:nowrap;font-size:13px;color:var(--muted)}
.top .timer.reg-timer{margin:0;color:var(--warn)}
.top .timer.is-expired{white-space:normal;font-size:12px;max-width:50%}
@container app (max-width:699px){.top:has(h1) .top-brand .brand>div:not(.logo){display:none}}
.foot-lang select{width:auto}

/* Rows that are links, and rows built from spans. */
a.row{color:inherit;text-decoration:none}
a.row:hover .t{color:var(--accent)}
.row span.grow,.row span.t,.row span.s{display:block}
.row span.grow{flex:1;min-width:0}
.lesson.u-prose{max-width:none}

/* The sign-in picture or icon the SEM Media team set for this LMS. */
.sign-in-image{display:block;justify-self:center;max-width:100%;max-height:160px;width:auto;height:auto;border-radius:16px;object-fit:contain}

/* Older screens' link lists, drawn as kit rows (icon, text, chevron on one line). */
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.link-list>li{display:block}
.link-list .link-row{display:flex;flex-direction:row;align-items:center;gap:12px;min-height:52px;padding:10px 10px;color:var(--fg);text-decoration:none;border-radius:12px;border-bottom:0;background:transparent}
.link-list .link-row:hover{background:var(--surface2)}
.link-list .link-row>.icon:first-child{flex:none;box-sizing:content-box;width:18px;height:18px;padding:8px;border-radius:12px;color:var(--accent);background:var(--accent-soft)}
.link-list .link-row>span:first-of-type{flex:1;min-width:0}
.link-list .link-row .chev{flex:none;margin-left:auto}

/* Long titles (course names, Sinhala and Tamil) wrap to two lines instead of being cut. */
.top h1,.top .top-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.2}
.side nav{width:100%;min-width:0}
.side nav a{max-width:100%;min-width:0;overflow-wrap:break-word;hyphens:auto}
/* 1.9.1: in the icon rail a long label ("Assessments") keeps its word whole instead of breaking mid-word. */
@container app (min-width:700px){.side nav a{padding-inline:2px;font-size:10.5px;letter-spacing:-.01em;word-spacing:.12em}}
.side .brand{max-width:100%}
.tag{white-space:normal;overflow-wrap:anywhere;max-width:100%}

/* Printing (ID cards, certificates, receipts): only the page, full width, on white. */
@media print{
  .side,.bbar,.top,.foot-line,.toasts,.skip-link{display:none!important}
  .app{display:block;min-height:0;background:#fff;color:#000}
  body{background:#fff}
  .content{padding:0}
}

/* 1.9.0: the footer sits at the bottom of the screen. The page area grows, so a
   short page pushes the footer down instead of leaving it half way up. */
.main>.content{flex:1 0 auto}
.main>.foot-line{padding:14px 16px 16px}

/* 1.9.0 overview: figures that are links, each staff member's day, and the help desk. */
a.kpi{color:inherit;text-decoration:none;display:block}
a.kpi:hover{border-color:var(--accent)}
.staff-row{align-items:flex-start}
.staff-row .stack{gap:6px}
.staff-row .s .i{width:14px;height:14px;vertical-align:-2px}
.plan-lines{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.plan-lines li{display:flex;gap:8px;align-items:center;min-width:0}
.plan-lines li.done span:last-child{color:var(--muted);text-decoration:line-through}
.plan-lines .tick{width:18px;height:18px}
.desk-row{align-items:flex-start;flex-wrap:wrap}
.desk-row .desk-text{white-space:normal;overflow-wrap:anywhere}
.plan-form{display:grid;gap:10px;grid-template-columns:1fr}
@container app (min-width:700px){.plan-form{grid-template-columns:160px 130px minmax(0,1fr) auto;align-items:end}}
.tick-btn{border:0;background:transparent;padding:4px;cursor:pointer;border-radius:50%}
.tick-btn:focus-visible{outline:2px solid var(--accent)}
.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* A row of filters above a list: the search box grows, the rest take what they need. */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters>.field{flex:1 1 150px}
.filters>.field.grow-2{flex:3 1 240px}
.row.u-p0{padding:0}
img.av{object-fit:cover}

/* 1.9.0 orders list: sortable headings, the ⋮ menu, and how each order was paid. */
.tbl th a.sort{color:inherit;text-decoration:none;display:inline-flex;gap:4px;align-items:center}
.tbl th a.sort.on{color:var(--accent)}
.tbl th a.sort .i{width:14px;height:14px}
.tbl td.wrap{white-space:normal;min-width:160px}
.tbl .t{font-weight:600;color:var(--fg);text-decoration:none}
.tbl a.t:hover{color:var(--accent)}
.nowrap{flex-wrap:nowrap}
.inp.inp-auto{width:auto}
details.menu{position:relative}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px}
.menu-panel form{display:grid;gap:2px;margin:0}
.menu-item{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:13px;text-align:left;cursor:pointer;text-decoration:none;width:100%}
.menu-item:hover{background:var(--surface2)}
.pill.paid-card-free{background:var(--ok-bg);color:var(--ok)}
.pill.paid-card-half{background:var(--warn-bg);color:var(--warn)}
.pill.paid-card-full,.pill.paid-full{background:var(--accent-soft);color:var(--accent)}
.pill.paid-discounted{background:var(--bad-bg);color:var(--bad)}
.thumb-sm{width:56px;height:32px;border-radius:6px;object-fit:cover;flex:none;background:var(--surface2)}
.chip-person{display:inline-flex;align-items:center;gap:6px;margin:2px 8px 2px 0}
.tbl .s{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.inline{display:inline}
.link-button{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.quick-edit .menu-panel{left:0;right:auto;min-width:300px;padding:12px;white-space:normal}
.quick-edit>summary{display:inline}
label.check{display:flex;gap:6px;align-items:center;font-size:13px}

/* 1.9.0 Lessons page: recordings on each card and the student's own recordings strip. */
.shop-rec{position:absolute;left:8px;bottom:8px;display:inline-flex;gap:5px;align-items:center;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:600}
.shop-rec .i{width:13px;height:13px}
.rec-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.rec-card{display:grid;gap:4px;color:var(--fg);text-decoration:none;min-width:0}
.rec-card b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 30%,var(--surface)),var(--surface2))}
.rec-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec-play{position:relative;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center}
.rec-card:hover .rec-play{background:var(--accent);color:var(--accent-fg)}

/* 1.9.0 reports: a ring chart with its legend, bar meters in tables, and wider bar charts. */
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut{width:150px;height:150px;flex:none}
.donut .track{stroke:var(--surface2)}
.donut .c0,.dot.c0{stroke:var(--accent);background:var(--accent)}
.donut .c1,.dot.c1{stroke:var(--warn);background:var(--warn)}
.donut .c2,.dot.c2{stroke:var(--ok);background:var(--ok)}
.donut .c3,.dot.c3{stroke:var(--bad);background:var(--bad)}
.donut .c4,.dot.c4{stroke:color-mix(in oklab,var(--accent) 45%,var(--surface));background:color-mix(in oklab,var(--accent) 45%,var(--surface))}
.donut .c5,.dot.c5{stroke:var(--muted);background:var(--muted)}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;min-width:200px}
.legend li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px}
.legend li .note{width:100%;padding-left:18px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.card>.bars{max-width:560px;width:100%;justify-self:center}
.meter{display:flex;gap:8px;align-items:center;min-width:140px}
.meter .prog{flex:1}
.meter span{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;min-width:36px;text-align:right}
.register-row{flex-wrap:wrap}
.seg button.btn{border:0;cursor:pointer}

/* 1.9.0: the kit's own classes for pieces every older screen had. These replace the bridge's
   .panel, .stat-row, .section-head, .notice, .empty-state, .chip-row and friends. */
.tabs a[aria-current="page"]{background:var(--accent);color:var(--accent-fg)}
ul.kpis{list-style:none;margin:0;padding:0}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi>b{order:-1}
.kpi .note{font-size:11px}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.sec-head>*{min-width:0}
.sec-head h2,.sec-head h3,.sec-head p{margin:0}
p.banner,div.banner{margin:0}
.banner a{color:inherit;font-weight:600}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:32px 16px;color:var(--muted)}
.empty .empty-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface2);color:var(--accent)}
.crumb{margin:0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--accent)}
.note.block,.block{display:block}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%}
.inline-form>*{min-width:0;max-width:100%}
.inline-form input,.inline-form select{flex:1 1 10rem;width:auto}
ul.list,ol.list{list-style:none;margin:0;padding:0}
ul.list>li,ol.list>li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
ul.list>li:last-child,ol.list>li:last-child{border-bottom:0}
ul.list>li>p{margin:0}
.card>h2,.card>h3{margin:0}
.card>h2{font-size:15px;font-weight:650}
.card>p{margin:0}
.btnrow>form{margin:0}
.u-bad.note{color:var(--bad)}
/* My learning: the kit's course cards, with the course's picture when it has one. */
.cols.course-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.course .img{position:relative;overflow:hidden;text-decoration:none}
.course .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.course .course-title{white-space:normal;color:var(--fg);text-decoration:none}
.av.av-lg{width:56px;height:56px;font-size:18px}
.card>*,.cols>*{min-width:0}
.tw>.tbl{display:table;width:100%}
.tw{position:relative}

/* 1.9.0: on a phone a header button with an icon shows the icon only, so the page title keeps its room
   (the words stay for screen readers). */
@media (max-width:600px){
  .top>.btn:has(svg)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top>.btn:has(svg){padding-inline:12px}
}
/* 1.10.0: the total on a bill from SEM Media. */
.bill-total .t,.bill-total .v{font-weight:700}

/* 1.11.0: the student home's slides, chart keys and the study log. */
.home-slider .slides{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:4px}
.home-slider .slide{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:10px;align-content:start;min-width:0}
.home-slider .slide-img{width:100%;max-height:160px;object-fit:cover;border-radius:12px}
@media (min-width:900px){.home-slider .slide{flex-basis:calc(50% - 6px)}}
.chart-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.chart-key .key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-6px}
.chart-key .key-acc{background:var(--accent)}
.chart-key .key-muted{background:var(--muted);opacity:.45}
.study-log{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end;margin-top:12px}
[data-countdown].is-live{background:var(--ok-bg);color:var(--ok)}
/* 1.11.0: the two-step course wizard. */
.steps-mini{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0;flex-wrap:wrap;counter-reset:s}
.steps-mini li{counter-increment:s;padding:6px 12px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:13px}
.steps-mini li::before{content:counter(s) ". "}
.steps-mini li.on{background:var(--accent);color:var(--accent-fg)}
.choice-cards{border:0;margin:0;padding:0;display:grid;gap:10px}
.choice-cards legend{font-weight:600;margin-bottom:6px}
.choice-card{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.choice-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.choice-card input{margin-top:4px}
.choice-card small{display:block;margin-top:2px}
/* 1.11.0: the course builder's sections and lesson-type buttons. */
.curriculum-section>summary{list-style:none;cursor:pointer}
.curriculum-section>summary::-webkit-details-marker{display:none}
.lesson-types{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lesson-meeting{margin:12px 0}
.faq-row{border-bottom:1px solid var(--line);padding-bottom:8px}