/* ============================================================
   TuLern LMS
   Design taken from tulern.co.uk: pink #FF0082, deep teal #213236,
   #333 body text, Gotham Rounded headings, pill buttons, and the
   one sided 80px radius block used across the site.
   ============================================================ */

:root{
  --pink:#FF0082;
  --pink-dark:#D6006D;
  --pink-tint:#FFF0F7;
  --ink:#213236;
  --ink-deep:#162326;
  --body:#333333;
  --muted:#69727D;
  --line:#E4E7EA;
  --line-soft:#EFF1F3;
  --paper:#FFFFFF;
  --soft:#F5F6F7;

  --ok:#1E7A4C;      --ok-tint:#E7F5EE;
  --warn:#9A6400;    --warn-tint:#FDF3E0;
  --bad:#C4123C;     --bad-tint:#FDECF0;
  --idle:#69727D;    --idle-tint:#EFF1F3;

  --pill:999px;
  --r:18px;
  --shadow:0 1px 2px rgba(33,50,54,.05), 0 8px 24px rgba(33,50,54,.06);

  /* Gotham Rounded is the TuLern face. Nunito is the closest free stand in
     and is what most people will actually see. */
  --font:"Gotham Rounded","GothamRounded",Nunito,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--body);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pink); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700; color:var(--ink); margin:0; letter-spacing:-.01em}
h1{font-size:34px; line-height:1.08}
h2{font-size:24px; line-height:1.15; margin:34px 0 14px}
h3{font-size:18px; line-height:1.2}
.sub{color:var(--muted); margin:8px 0 26px; font-size:16px; max-width:70ch}
.muted{color:var(--muted)}
/* With the menu down the left the content column can be wider without the
   lines of text becoming too long to read, because the tables are what use it. */
.wrap{max-width:1180px; margin:0 auto; padding:30px 22px 70px}
.withside .wrap{max-width:1420px; padding:28px 30px 70px}

/* ---------- pink strip and header ---------- */
.strip{
  background:var(--pink); color:#fff; font-size:13.5px; font-weight:600;
  padding:9px 22px; text-align:left;
}
.strip a{color:#fff; text-decoration:none}
.strip a:hover{text-decoration:underline}
.strip .inner{max-width:1180px; margin:0 auto; display:flex; gap:18px; flex-wrap:wrap; align-items:center}

.topbar{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.topbar .inner{
  max-width:1180px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:26px; height:74px;
}
.brand{font-size:27px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--pink)}
/* A row of tabs inside a page. Wraps onto a second line rather than running
   off the side, which is what it used to do. */
.mainnav{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.mainnav a{white-space:nowrap}
.mainnav a:hover{background:var(--soft); text-decoration:none; color:var(--ink)}
.mainnav a.on{background:var(--pink); color:#fff}
.who{display:flex; align-items:center; gap:11px}
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700; flex:0 0 auto;
}
.whoname{display:flex; flex-direction:column; line-height:1.25; font-size:14px; font-weight:600; color:var(--ink)}
.whoname small{color:var(--muted); font-size:11.5px; font-weight:600}

/* ---------- the one sided rounded block, the site's signature ---------- */
.band{
  background:var(--ink); color:#fff; border-radius:0 80px 80px 0;
  padding:26px 46px 26px 22px; margin:0 0 30px; max-width:900px;
}
.band.pink{background:var(--pink)}
.band.right{border-radius:80px 0 0 80px; margin-left:auto; padding:26px 22px 26px 46px}
.band h1,.band h2,.band h3{color:#fff}
.band p{margin:8px 0 0; color:rgba(255,255,255,.88); font-size:15.5px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:12px 30px; border-radius:var(--pill);
  border:2px solid var(--pink); background:var(--pink); color:#fff;
  font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer;
  text-align:center; line-height:1.25; transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--pink-dark); border-color:var(--pink-dark); color:#fff; text-decoration:none}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--soft); color:var(--ink); border-color:var(--muted)}
.btn.dark{background:var(--ink); border-color:var(--ink)}
.btn.dark:hover{background:var(--ink-deep); border-color:var(--ink-deep)}
.btn.sm{padding:8px 18px; font-size:14px; border-width:2px}
.btn.off,.btn[disabled]{
  background:var(--soft); border-color:var(--line); color:var(--muted);
  cursor:not-allowed; pointer-events:none;
}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- cards and grids ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.stat .n{font-size:34px; font-weight:800; color:var(--ink); line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-size:13px; font-weight:600; margin-top:4px}
.stat.accent{background:var(--ink); border-color:var(--ink)}
.stat.accent .n{color:var(--pink)}
.stat.accent .l{color:rgba(255,255,255,.82)}

/* ---------- course cards ---------- */
.course{display:flex; flex-direction:column; gap:14px; overflow:hidden}
.course .top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.course .cat{font-size:12px; font-weight:700; color:var(--pink); letter-spacing:.02em}
.course h3{margin:5px 0 0; font-size:19px; line-height:1.25}
.course p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}
.course .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:6px}
.course h3 a{color:inherit; text-decoration:none}
.course h3 a:hover{color:var(--pink)}

/* cover art on a course card: full bleed to the card edge */
.card.course{padding-top:0}
.course .cover{display:block; text-decoration:none; margin:0 -22px; height:158px; overflow:hidden; background:var(--idle-tint); border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.course .cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.course .cover:hover img{transform:scale(1.04)}
.course .cover.plain{display:flex; align-items:center; justify-content:center; background:linear-gradient(120deg,var(--ink),#2f4750)}
.course .cover.plain span{color:#fff; font-weight:800; font-size:15px; letter-spacing:.03em; text-align:center; padding:0 22px}

/* small square of cover art beside a row in an admin table */
.thumb{width:56px; height:40px; border-radius:8px; object-fit:cover; display:block; background:var(--idle-tint)}
.thumb.none{display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; background:var(--ink)}
.rowart{display:flex; gap:12px; align-items:center; min-width:0}
.rowart .thumb{flex:0 0 56px}
.rowart > div{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* paging a long list */
.pager{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:14px 2px 0; font-size:13.5px}
.pager .links{display:flex; gap:4px; align-items:center}
.pager a,.pager b{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px;
  border-radius:var(--pill); text-decoration:none; font-weight:600}
.pager a{color:var(--ink); border:1px solid var(--line)}
.pager a:hover{border-color:var(--pink); color:var(--pink)}
.pager b{background:var(--pink); color:#fff}
.pager .gap{color:var(--muted); padding:0 2px}
caption.tcap{caption-side:top; text-align:left; padding:14px 18px 0; font-size:13px; font-weight:700; color:var(--muted)}

/* the contents of a course, as a learner sees it before starting */
.lessonlist{counter-reset:l; list-style:none; margin:0 0 26px; padding:0; max-width:70ch}
.lessonlist li{counter-increment:l; display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--line-soft)}
.lessonlist li::before{content:counter(l); flex:0 0 30px; height:30px; border-radius:50%; background:var(--soft);
  color:var(--muted); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center}
.lessonlist li.quiz::before{background:var(--pink); color:#fff}
.lessonlist li span{flex:1}
.lessonlist li em{font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--pink)}

/* ---------- carry on where you left off ---------- */
.resume{display:flex; align-items:stretch; gap:0; text-decoration:none; background:var(--ink); color:#fff;
  border-radius:var(--r); overflow:hidden; margin:0 0 26px; box-shadow:var(--shadow)}
.resume .shot{flex:0 0 232px; overflow:hidden; display:block}
.resume .shot img{width:100%; height:100%; object-fit:cover; display:block}
.resume .body{flex:1; padding:20px 24px; display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0}
.resume .kicker{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pink)}
.resume strong{font-size:21px; font-weight:800; line-height:1.22; color:#fff}
.resume .bar{display:block; height:7px; background:rgba(255,255,255,.18); border-radius:var(--pill); overflow:hidden; margin-top:3px}
.resume .bar i{display:block; height:100%; background:var(--pink); border-radius:var(--pill)}
.resume .meta{font-size:13px; color:rgba(255,255,255,.7)}
.resume .go{flex:0 0 auto; align-self:center; margin:0 24px 0 12px; background:var(--pink); color:#fff;
  border-radius:var(--pill); padding:12px 30px; font-weight:600; font-size:15px; white-space:nowrap}
.resume:hover .go{background:var(--pink-dark)}
@media (max-width:720px){
  .resume{flex-direction:column}
  .resume .shot{flex:0 0 150px; height:150px}
  .resume .go{margin:0 24px 22px; text-align:center}
}

/* ---------- finding a course in a long list ---------- */
.listhead{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:16px}
.listhead h2{margin:0}
.listhead .tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.findbox input{border:1px solid var(--line); border-radius:var(--pill); padding:9px 18px; font:inherit; font-size:14px;
  min-width:200px; background:#fff; color:var(--body)}
.findbox input:focus{outline:none; border-color:var(--pink)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:#fff; color:var(--body); border-radius:var(--pill);
  padding:8px 15px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; gap:7px; align-items:center}
.chip em{font-style:normal; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--pink); color:var(--pink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip.on em{color:rgba(255,255,255,.65)}
.nomatch{margin:26px 2px; color:var(--muted)}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--pink); cursor:pointer; text-decoration:underline}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- progress ---------- */
.bar{height:10px; background:var(--idle-tint); border-radius:var(--pill); overflow:hidden}
.bar i{display:block; height:100%; background:var(--pink); border-radius:var(--pill); transition:width .45s ease}
.bar.done i{background:var(--ok)}
.prog{display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px}

/* ---------- pills ---------- */
.pill{display:inline-block; padding:5px 13px; border-radius:var(--pill); font-size:12.5px; font-weight:700; white-space:nowrap}
.pill.ok{background:var(--ok-tint); color:var(--ok)}
.pill.warn{background:var(--warn-tint); color:var(--warn)}
.pill.bad{background:var(--bad-tint); color:var(--bad)}
.pill.idle{background:var(--idle-tint); color:var(--idle)}

/* ---------- forms ---------- */
label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin:0 0 6px}
/* Written out this way so an input with no type attribute is styled too, which
   is most of the plain text boxes on the admin forms. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select,textarea{
  width:100%; padding:11px 15px; border:1px solid var(--line); border-radius:12px;
  font:inherit; font-size:15px; background:#fff; color:var(--body);
}
select[multiple]{border-radius:12px; padding:8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pink); outline-offset:-1px; border-color:var(--pink)}
.field{margin-bottom:16px}
.row{display:flex; gap:16px; flex-wrap:wrap}
.row>*{flex:1 1 200px}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin:0 0 18px}
legend{font-weight:700; font-size:14px; color:var(--ink); padding:0 8px}
.check{display:flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--body)}
.check input{width:auto}

/* ---------- tables ----------
   Nothing scrolls sideways. A table fits the width it is given, and on a narrow
   screen each row becomes a small stack with its heading beside every value, so
   a phone shows the same information without any dragging left and right. */
.tablewrap{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse; font-size:14.5px; table-layout:auto}
th{
  text-align:left; font-size:12px; font-weight:700; color:var(--muted);
  padding:14px 16px; border-bottom:2px solid var(--line);
}
td{padding:14px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--body);
   overflow-wrap:break-word}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--soft)}
td strong{color:var(--ink); font-weight:700}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* The buttons at the end of a row wrap onto a second line rather than pushing
   the table off the side of the screen. */
td.acts,th.acts{text-align:right}
td.acts > *{margin:2px 0 2px 4px}
td.acts form{display:inline}
/* A button never breaks across lines. Whole buttons wrap onto the next line
   instead, which is what keeps a row of them inside the table. */
.btn{white-space:nowrap}
.mono{font-family:"SFMono-Regular",Consolas,monospace; font-size:13px}

/* ---------- flashes ---------- */
.flash{padding:14px 18px; border-radius:14px; margin-bottom:20px; font-size:15px; font-weight:600; border:1px solid}
.flash.ok{background:var(--ok-tint); border-color:#BFE3D0; color:var(--ok)}
.flash.bad{background:var(--bad-tint); border-color:#F5C6D2; color:var(--bad)}
.flash.info{background:var(--pink-tint); border-color:#FFD0E6; color:var(--pink-dark)}

/* ---------- sign in ---------- */
.loginpage{display:grid; place-items:center; min-height:100vh; padding:26px; background:var(--ink)}
.loginbox{
  width:100%; max-width:420px; background:#fff; border-radius:26px;
  padding:38px 34px; box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.loginbox .brand{display:block; text-align:center; font-size:34px; margin-bottom:6px}
.loginbox .tag{text-align:center; color:var(--muted); font-size:14.5px; font-weight:600; margin:0 0 26px}
.loginbox .btn{width:100%}

/* ---------- player ---------- */
.playerpage{margin:0; background:#000; height:100vh; overflow:hidden; display:flex; flex-direction:column}
.playerbar{
  display:flex; align-items:center; gap:18px; background:#fff;
  border-bottom:1px solid var(--line); padding:11px 18px; flex:0 0 auto;
}
.playerbar .t{font-weight:700; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34%}
.playerbar .pwrap{flex:1 1 auto; min-width:130px; max-width:360px}
.playerbar .pwrap .bar{height:8px}
.playerbar .pmeta{display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px}
#sc-frame{flex:1 1 auto; width:100%; border:0; background:#fff}

/* ---------- certificate ---------- */
.certcard{background:#fff; border:1px solid var(--line); border-radius:26px; padding:38px 34px; text-align:center; box-shadow:var(--shadow)}
.certcard .seal{
  width:74px; height:74px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; font-size:32px; margin:0 auto 16px;
}
.code{
  font-family:"SFMono-Regular",Consolas,monospace; background:var(--soft);
  border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:14px; color:var(--ink);
}
.empty{text-align:center; padding:56px 22px; color:var(--muted)}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--line); background:var(--soft)}
footer.foot .inner{
  max-width:1180px; margin:0 auto; padding:26px 22px 34px;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-size:13.5px; font-weight:600;
}

:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

@media (max-width:820px){
  h1{font-size:27px}
  .band{border-radius:0 46px 46px 0; padding:22px 30px 22px 20px}
  .band.right{border-radius:46px 0 0 46px; padding:22px 20px 22px 30px}
  .topbar .inner{gap:14px; height:66px; padding:0 14px}
  .whoname{display:none}
  .wrap{padding:22px 15px 50px}
  .strip{font-size:12.5px}
}

/* A save that cannot get through, said plainly, without covering the course. */
.playeralert{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;max-width:620px;
  background:#3a1113;color:#ffe9ea;border:1px solid #7d2a2e;border-radius:12px;padding:13px 18px;
  font-size:14px;line-height:1.5;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- narrow screens ----------
   The admin pages have to work on a phone. Two things change: the menu becomes
   a button that opens a proper list rather than a strip you drag sideways, and
   every table turns into a stack of rows with the column heading beside each
   value. Nothing anywhere scrolls left to right. */
.navtoggle{display:none}
.navbtn{
  display:none; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--pill); padding:9px 16px; font-weight:700; font-size:14px;
}
.navbtn::before{content:"\2630"; font-size:15px; line-height:1}

@container page (max-width:940px){
  /* Tables become stacks. */
  .tablewrap{border:0; background:transparent; box-shadow:none}
  .tablewrap table, .tablewrap thead, .tablewrap tbody,
  .tablewrap tr, .tablewrap td, .tablewrap th{display:block; width:auto}
  .tablewrap thead{position:absolute; left:-9999px}
  .tablewrap caption.tcap{display:block; width:100%; padding:0 2px 10px}
  .tablewrap tr{
    background:#fff; border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow); margin-bottom:12px; padding:6px 4px;
  }
  .tablewrap tbody tr:hover{background:#fff}
  .tablewrap td{
    border:0; border-bottom:1px solid var(--line-soft); padding:10px 14px;
    display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
    text-align:right;
  }
  .tablewrap tr td:last-child{border-bottom:0}
  /* On a phone there is no spare width, so a long machine value such as a
     course code in an audit line breaks wherever it must rather than pushing
     the page sideways. On a laptop it still breaks only between words. */
  .tablewrap td{overflow-wrap:anywhere}
  .tablewrap td::before{
    content:attr(data-label); flex:0 0 40%; text-align:left;
    font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  }
  .tablewrap td:empty{display:none}
  .tablewrap td[data-label=""]::before{display:none}
  .tablewrap td.num,.tablewrap td.acts{text-align:right; white-space:normal; width:auto}
  .tablewrap td.acts{flex-wrap:wrap; justify-content:flex-end}
  .tablewrap td.acts > *{margin:3px 0 3px 6px}
  /* The first cell names the row, so it reads as the heading of the card
     rather than being squeezed into a right hand column. */
  .tablewrap td:first-child{
    display:block; text-align:left; font-size:16px; padding:12px 14px 10px;
    background:var(--soft); border-radius:12px 12px 0 0;
  }
  .tablewrap td:first-child::before{display:none}
  .tablewrap td:first-child .muted{text-align:left}
  .tablewrap td.acts{padding-top:12px; padding-bottom:12px}

  .row{flex-direction:column; align-items:stretch; gap:0}
  .row > *{flex:0 0 auto; width:100%}
  .grid.g2,.grid.g3{grid-template-columns:1fr}
}

/* The list and the form under it, rather than side by side fighting for width.
   A table with a name, four figures and a row of buttons in half the screen is
   a table you have to drag sideways to read. */
.stackpair{display:grid; grid-template-columns:1fr; gap:26px; align-items:start}
.stackpair > .card{max-width:640px}

/* One row, one line. The email rides beside the name, the short columns do not
   wrap, and the buttons at the end stay together. */
.nw{white-space:nowrap}
td.who1{white-space:nowrap}
td.who1 .sub1{color:var(--muted); font-size:12.5px; margin-left:8px}
/* Only the learner list holds its buttons on one line, because it has a column
   width set aside for them. Everywhere else they wrap rather than spill out. */
table.t-learners td.acts{white-space:nowrap}
td.acts .btn.sm{padding:7px 12px; font-size:13px}

/* A small menu on a row, so the extra actions are one click away without the
   row growing a second line of buttons. Works with no script. */
.rowmenu{display:inline-block; position:relative}
.rowmenu > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.rowmenu > summary::-webkit-details-marker{display:none}
.rowmenu > summary::after{content:"\25BE"; font-size:11px; line-height:1}
.rowmenu[open] > summary{background:var(--soft); border-color:var(--pink)}
.rowmenu-items{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 30px rgba(10,16,32,.14);
  padding:6px; text-align:left;
}
.rowmenu-items form{display:block; margin:0}
.rowmenu-items button,.rowmenu-items > a{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  padding:10px 12px; border-radius:10px; box-sizing:border-box;
}
.rowmenu-items button:hover,.rowmenu-items > a:hover{background:var(--soft); text-decoration:none; color:var(--ink)}
.rowmenu-items button.danger,.rowmenu-items > a.danger{color:var(--bad)}
.rowmenu-items button.danger:hover,.rowmenu-items > a.danger:hover{background:var(--bad-tint); color:var(--bad)}
@container page (max-width:940px){
  .rowmenu-items{position:static; box-shadow:none; border:0; padding:0; min-width:0; margin-top:6px}
  .rowmenu{display:block; margin-top:6px}
  .rowmenu > summary{width:100%; justify-content:center}
}

/* The learner list packs into one line per person. The columns that hold short
   values are held narrow, and anything long is cut with an ellipsis rather than
   being allowed to wrap and push the row onto a second line. */
/* Fixed layout, so the declared widths are what the browser uses and the table
   can never grow wider than the box it sits in. The name column takes whatever
   is left over, and anything too long is cut with an ellipsis. */
table.t-learners{table-layout:fixed; width:100%}
.c-user{width:132px}
.c-emp{width:168px}
.c-seen{width:94px}
.c-n{width:72px}
th.c-n{white-space:normal}
table.t-learners td.acts,table.t-learners th.acts{width:240px}
table.t-learners td{overflow:hidden; text-overflow:ellipsis}
table.t-learners td.acts{overflow:visible}
/* The email only appears when the window is wide enough to hold it without
   pushing the row onto a second line. It is always on the learner's record,
   and the search box still finds people by it. */
td.who1 .sub1{display:none}
@container page (min-width:1400px){ td.who1 .sub1{display:inline} }
@container page (max-width:940px){
  table.t-learners td.acts{white-space:normal}
  td.who1{white-space:normal}
  td.who1 .sub1{display:block; margin:2px 0 0}
  table.t-learners{table-layout:auto}
  table.t-learners td.acts,table.t-learners th.acts{width:auto}
  .c-emp{width:auto}
}

/* A count on a menu item, for requests waiting to be looked at. */
.mainnav .tag{display:inline-block; min-width:18px; padding:1px 5px; margin-left:4px; border-radius:9px;
  background:var(--pink); color:#fff; font-size:11px; font-weight:800; line-height:16px; text-align:center}
.mainnav a.on .tag{background:#fff; color:var(--pink)}

/* The tick column for picking people to write to. */
.c-tick{width:38px}
td.c-tick input,th.c-tick input{width:auto; margin:0}
@container page (max-width:940px){ .c-tick{width:auto} }

/* The More group on the menu. */
.navmore{position:relative}
.navmore > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--pill); font-weight:700; font-size:14.5px; color:var(--body);
}
.navmore > summary::-webkit-details-marker{display:none}
.navmore > summary::after{content:"\25BE"; font-size:11px; line-height:1}
.navmore > summary:hover{background:var(--soft); color:var(--ink)}
.navmore.here > summary{background:var(--pink); color:#fff}
.navmore[open] > summary{background:var(--soft); color:var(--ink)}
.navmore.here[open] > summary{background:var(--pink); color:#fff}
.navmore-items{
  position:absolute; left:0; top:calc(100% + 8px); z-index:60; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 34px rgba(10,16,32,.16);
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.navmore-items a{display:block; padding:10px 13px; border-radius:10px; font-size:14.5px}

/* The plain copy of the More links, for the phone menu only. */
.navflat{display:none}

@container page (max-width:940px){
  .navmore{display:none}
  .navflat{display:flex; flex-direction:column; gap:2px; width:100%}
  .navflat a{padding:11px 14px; font-size:15px; border-radius:12px; font-weight:700; color:var(--body)}
  .navflat a.on{background:var(--pink); color:#fff}
  .navflat a:hover{background:var(--soft); text-decoration:none; color:var(--ink)}
}

/* On a smaller laptop the menu tightens rather than wrapping. */


/* ============================================================
   The menu down the left.
   Everything the account can reach is visible at once, grouped the way the work
   is grouped, so nothing hides behind a dropdown and the header stays clear.
   ============================================================ */
.withside{display:block}
/* The width the page content actually has, so a table can decide for itself
   whether it fits rather than guessing from the size of the window. */
.shell{container-type:inline-size; container-name:page}
.side{
  position:fixed; inset:0 auto 0 0; width:246px; z-index:70;
  background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain;
}
.sidebrand{
  display:block; padding:20px 22px 18px; background:var(--ink); color:#fff;
  font-weight:800; font-size:24px; letter-spacing:-.4px; border-bottom:4px solid var(--pink);
}
.sidebrand:hover{text-decoration:none; color:#fff}
.sidebrand .mark{color:var(--pink)}
.sidebrand small{display:block; margin-top:3px; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.sidenav{padding:14px 12px 26px; display:flex; flex-direction:column; gap:1px}
.sidegroup{
  margin:16px 0 5px; padding:0 12px; font-size:10.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.sidegroup:first-child{margin-top:2px}
.sidenav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--body); line-height:1.25;
}
.sidenav a:hover{background:var(--soft); color:var(--ink); text-decoration:none}
.sidenav a.on{background:var(--pink-tint); color:var(--pink-dark); font-weight:800}
.sidenav a .ic{width:18px; height:18px; flex:0 0 18px; opacity:.85}
.sidenav a.on .ic{opacity:1}
.sidenav a .tag{
  margin-left:auto; min-width:20px; padding:1px 6px; border-radius:10px;
  background:var(--pink); color:#fff; font-size:11px; font-weight:800; line-height:17px; text-align:center;
}
.withside .shell{margin-left:246px}
.navshade{display:none}

/* The page name on the bar, since the brand now lives in the menu. */
.pagetitle{font-weight:800; font-size:17px; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.withside .topbar .inner{gap:16px}
.withside .who{margin-left:auto}

@media (max-width:1000px){
  /* The menu slides over the page rather than squeezing it. */
  .withside .shell{margin-left:0}
  .side{transform:translateX(-100%); transition:transform .18s ease; box-shadow:0 0 40px rgba(10,16,32,.18)}
  .navtoggle:checked ~ .side{transform:none}
  .navtoggle:checked ~ .navshade{
    display:block; position:fixed; inset:0; z-index:65; background:rgba(10,16,32,.42);
  }
  .navbtn{display:inline-flex}
}
@media (min-width:1001px){
  .navbtn{display:none}
}

/* The tick cell holds only a box, so no ellipsis for the whitespace around it. */
table.t-learners td.c-tick{overflow:visible; text-overflow:clip; font-size:0}
table.t-learners td.c-tick input{font-size:1rem}
/* The page name on the bar is only needed where the menu is hidden. */
@media (min-width:1001px){ .pagetitle{display:none} }

/* ============================================================
   Inner pages
   One line per row everywhere, a consistent heading block, and the width used
   rather than left empty down the right hand side.
   ============================================================ */

/* The page heading, with anything the page offers sitting beside it. */
.pagehead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px 26px;
  flex-wrap:wrap; margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.pagehead h1{margin:0}
.pagehead .sub{margin:6px 0 0; max-width:64ch}
.pagehead .acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* Every row is one line. A value too long for its column is cut with an
   ellipsis and shown in full on hover, rather than pushing the row taller. */
.tablewrap th,.tablewrap td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tablewrap td .sub{color:var(--muted); font-size:12.5px; font-weight:600; margin-left:8px}
.tablewrap td .sub.mono{font-size:12px}
.tablewrap td > .bar{display:inline-block; width:100%; vertical-align:middle}
/* A table is kept inside its box. The one exception is a table with a row menu
   on it, which has to be able to open outside its own edges. */
.tablewrap{overflow:hidden}
.tablewrap:has(.rowmenu){overflow:visible}
/* A column in a grid must be allowed to be narrower than its widest content,
   or a table pushes the column out and over whatever sits beside it. */
.grid > *,.split > *{min-width:0}

/* A quieter, roomier table. */
table{font-size:14.5px}
th{padding:13px 16px}
td{padding:12px 16px}
.tablewrap tbody tr:hover{background:var(--soft)}

/* Rows of figures at the top of a page. */
.grid.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@container page (max-width:1000px){ .grid.g4{grid-template-columns:repeat(2,1fr)} }
@container page (max-width:560px){ .grid.g4{grid-template-columns:1fr} }

/* Sections within a page, so a long page reads as parts rather than a list. */
.section{margin:34px 0 0}
.section > h2{margin:0 0 6px; font-size:20px}
.section > .sub{margin:0 0 16px}

/* A filter strip that does not take a whole card to itself. */
.filterbar{
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:18px;
}
.filterbar .field{margin:0}
.filterbar .field label{font-size:12px}

/* Two columns that actually use the width: a wide list and a narrow form. */
.split{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:26px; align-items:start}
@container page (max-width:1080px){ .split{grid-template-columns:minmax(0,1fr)} }
/* Only the narrow column beside the main one follows you down the page. */
.split > :last-child.card{position:sticky; top:16px}
@container page (max-width:1080px){ .split > :last-child.card{position:static} }

@container page (max-width:940px){
  /* Stacked cards can breathe, so the one line rule is lifted there. */
  .tablewrap th,.tablewrap td{white-space:normal; overflow:visible; text-overflow:clip}
  th{position:static}
}

/* The course list, held to one line per course. */
table.t-courses{table-layout:fixed; width:100%}
/* Narrow enough that the course title, which is the column people actually
   read, gets the room instead of the columns beside it. */
.c-code{width:154px}
.c-scorm{width:108px}
.c-rule{width:142px}
.c-pkg{width:134px}
table.t-courses .c-n,table.t-courses th.c-n{width:90px}
table.t-courses td.acts,table.t-courses th.acts{width:236px; white-space:nowrap}
@container page (max-width:1240px){
  table.t-courses .c-scorm,table.t-courses th.c-scorm{display:none}
}
@container page (max-width:1100px){
  table.t-courses .c-pkg,table.t-courses th.c-pkg{display:none}
}

/* A progress bar with its figure beside it rather than above it. */
td.barcell{display:flex; align-items:center; gap:10px}
td.barcell .bar{flex:1 1 auto; min-width:70px}
td.barcell .pct{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--muted)}
@container page (max-width:940px){ td.barcell{display:flex} }

/* ---------- tabs within a page ----------
   Used for the sections of Email, Requests and Reports. An underline rather
   than a filled block, so the current section reads clearly without shouting. */
.tabs{
  display:flex; gap:2px; flex-wrap:wrap; align-items:flex-end;
  border-bottom:1px solid var(--line); margin:0 0 22px;
}
.tabs a{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; margin-bottom:-1px;
  font-weight:700; font-size:14.5px; color:var(--muted);
  border-bottom:2.5px solid transparent; border-radius:8px 8px 0 0;
}
.tabs a:hover{color:var(--ink); background:var(--soft); text-decoration:none}
.tabs a.on{color:var(--pink-dark); border-bottom-color:var(--pink); background:transparent}
.tabs a .tag{
  min-width:19px; padding:1px 6px; border-radius:10px; background:var(--line);
  color:var(--body); font-size:11px; font-weight:800; line-height:16px; text-align:center;
}
.tabs a.on .tag{background:var(--pink); color:#fff}

/* The template list: name and subject on one line, the audience beside it. */
table.t-tpl{table-layout:fixed; width:100%}
table.t-tpl th:nth-child(2),table.t-tpl td:nth-child(2){width:110px}
table.t-tpl td.acts,table.t-tpl th.acts{width:140px}

/* Buttons, figures, pills and bars are never trimmed with an ellipsis: only
   cells that hold running text are. */
.tablewrap td.acts,.tablewrap th.acts,
.tablewrap td.num,.tablewrap th.num,
.tablewrap td:has(> .pill),.tablewrap td:has(> .bar),
.tablewrap td:has(> form),.tablewrap td:has(> .btn){overflow:visible; text-overflow:clip}
table.t-tpl td.acts,table.t-tpl th.acts{width:176px}

/* On a narrower window the extra detail in a course row steps aside so the
   title itself has the room, rather than everything being squeezed. */
@container page (max-width:1400px){
  table.t-courses .sub{display:none}
}

/* Every table is laid out against the width it has rather than the width its
   contents would like, so a long value is trimmed with an ellipsis instead of
   pushing the table out past the edge of its box and being cut off. */
.tablewrap table{table-layout:fixed; width:100%}
.tablewrap th.num{width:96px}
.tablewrap th.nw{width:120px}
table.t-courses td.acts,table.t-courses th.acts{width:236px}

/* ============================================================
   Breathing room
   One spacing scale used across every page, so nothing sits hard against the
   edge of the box it is in and no two blocks are closer than they should be.
   Written last so it settles the spacing wherever an earlier rule set it.
   ============================================================ */
:root{
  --s1:8px;    /* label to the box under it */
  --s2:14px;   /* two things that belong together */
  --s3:22px;   /* two things that merely follow one another */
  --s4:30px;   /* the heading block to the page under it */
  --s5:42px;   /* one section of a page to the next */
  --pad:26px;  /* inside a card */
}

/* ---------- inside a card ---------- */
.card{padding:var(--pad)}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.card > h2,.card > h3{margin:0 0 var(--s3)}
.card > h2 + .sub,.card > h3 + .sub,
.card > h2 + p,.card > h3 + p{margin-top:calc(var(--s3) * -1 + var(--s1))}
/* The cover picture still runs to the card edge now the padding has changed. */
.card.course{padding-top:0}
.course .cover{margin:0 calc(var(--pad) * -1)}
.stat{padding:20px 22px}

/* ---------- forms ---------- */
label{margin:0 0 var(--s1)}
.field{margin-bottom:20px}
fieldset{padding:18px 20px; margin:0 0 var(--s3)}
/* A button at the end of a form clears the last field, and the card padding
   then keeps it off the bottom edge. */
form > .btn:not(:first-child),
form > button:not(:first-child),
form > .btnrow:not(:first-child),
form > .check + .btn,
.check + .btn,.check + .btnrow{margin-top:var(--s2)}
/* A tick box after a field is part of the same run of controls, not a new one. */
.field + .check,.check + .check{margin-top:var(--s2)}
/* The file box is given the same shape as every other box on a form rather
   than being left as the browser draws it. */
input[type=file]{
  display:block; width:100%; padding:10px 14px; border:1px dashed var(--line);
  border-radius:12px; background:var(--soft); font:inherit; font-size:14.5px; color:var(--body);
  cursor:pointer;
}
input[type=file]:hover{border-color:var(--pink); background:#fff}
input[type=file]::file-selector-button{
  margin-right:12px; padding:7px 16px; border-radius:var(--pill);
  border:2px solid var(--pink); background:var(--pink); color:#fff;
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--pink-dark); border-color:var(--pink-dark)}

/* ---------- the heading block at the top of a page ---------- */
/* The buttons sit against the middle of the heading rather than dropping to
   the bottom of it, which used to leave them almost touching the rule. */
.pagehead{align-items:center; margin:0 0 var(--s4); padding-bottom:var(--s3)}
.pagehead .sub{margin:6px 0 0}

/* ---------- one block to the next ---------- */
.flash{margin-bottom:var(--s3)}
.grid{gap:var(--s3)}
.split{gap:var(--s4)}
.section{margin:var(--s5) 0 0}
.filterbar{padding:18px 20px; margin-bottom:var(--s3)}
.tabs{margin:0 0 var(--s4)}
.wrap,.withside .wrap{padding-bottom:86px}
/* Anything following a table or a card is given room rather than being tucked
   straight underneath it. Only where blocks are genuinely stacked: inside a
   grid the gap does that job, and a margin there would push one card down. */
:is(.wrap, .section) > :is(.card, .tablewrap, .grid) + :is(.card, .tablewrap, p){margin-top:var(--s3)}

/* ---------- inside a table ---------- */
/* The first and last columns are held further off the edge, so the buttons at
   the end of a row are not up against the side of the box. */
th:first-child,td:first-child{padding-left:22px}
th:last-child,td:last-child{padding-right:22px}
caption.tcap{padding:16px 22px 4px}
/* A table of explanation rather than of data: the words wrap in full instead
   of being cut off with three dots, because there is nothing to line up. */
.tablewrap.plain{box-shadow:none}
.tablewrap.plain table{table-layout:auto}
.tablewrap.plain th,.tablewrap.plain td{white-space:normal; overflow:visible; text-overflow:clip}

@container page (max-width:940px){
  .card{padding:20px}
  .course .cover{margin:0 -20px}
  th:first-child,td:first-child{padding-left:16px}
  th:last-child,td:last-child{padding-right:16px}
}

/* The footer sits at the bottom of the window on a short page rather than
   leaving a band of white underneath it. */
.shell{display:flex; flex-direction:column; min-height:100vh}
/* A definite width, or the automatic side margins on the content column stop
   it filling the space and centre it instead. */
.shell > main{flex:1 0 auto; width:100%; box-sizing:border-box}
.shell > footer.foot{flex:0 0 auto}

/* A course card's buttons are separated from the progress bar above them. */
.course .foot{padding-top:18px; border-top:1px solid var(--line-soft); margin-top:auto}

/* A line of explanation is followed by the thing it explains, not pressed
   against it. */
:is(.wrap, .section, .card) > p + :is(form, .tablewrap, .card, .grid, .btnrow, .filterbar),
:is(.wrap, .section, .card) > .muted + :is(form, .tablewrap, .card, .grid, .btnrow, .filterbar){margin-top:var(--s3)}

@container page (max-width:940px){
  /* Every declared column width belongs to the wide layout. Once each row has
     become a card there are no columns left to size, and a width held over
     from the table squeezes a heading into a letter per line. */
  .tablewrap td,.tablewrap th{width:auto !important}
}

/* A column heading wraps onto a second line rather than being cut off. The
   rows below it still hold to one line each: it is only the heading that is
   allowed the extra height. */
.tablewrap thead th{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3}