/* ==========================================================================
   Learning Key — Learn

   Built entirely on the THEME's custom properties: --navy, --action, --shell,
   --line, --card-bg, the radii, the shadows and the two typefaces. Change the
   brand red on learningkey.co.uk and it changes in here. Nothing below invents
   a colour.

   Every value carries a fallback, because a plugin has to survive the theme
   being switched off — without them, deactivating the theme would leave
   learners looking at unstyled markup rather than at something plain.

   The shape is a tool, not a brochure: a persistent sidebar, a dark hero with
   an overlapping status card, a progress strip, and rows that say what state
   they are in. The public site is for strangers; this is for the same person,
   twice a week, for two years.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — THE SHELL
   -------------------------------------------------------------------------- */

/* The app sits on the SITE'S column, not on the viewport.
   
   The header's wrap is 1320px wide with a 32px gutter, and so is the footer's.
   Running the VLE full-bleed put the sidebar 60px to the left of the logo and
   the hero 60px to the right of the footer — close enough to look like a
   mistake rather than a decision, which is exactly what it was. Rendering the
   VLE inside the real header and footer is what showed it; on its own it
   looked fine. */
.lk-app{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  align-items:start;
  min-height:60vh;
  max-width:var(--page,1320px);
  margin-inline:auto;
  background:var(--shell-3,#fafbfc);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-xl,28px);
  /* clip, not hidden: `overflow:hidden` on an ancestor silently kills
     position:sticky, and the sidebar has to stay put while the page scrolls. */
  overflow:clip;
  margin-block:clamp(20px,3vw,40px);
}

/* Inside the site's gutter, so the app's edges line up with the logo above it
   and the footer columns below. */
@media (min-width:1384px){
  .lk-app{max-width:calc(var(--page,1320px) - 0px)}
}
@media (max-width:1383px){
  .lk-app{margin-inline:var(--gutter,32px)}
}

.lk-main{min-width:0;padding-bottom:var(--s-9,88px)}

.lk-wrap{
  max-width:940px;
  margin-inline:auto;
  padding:0 clamp(20px,3vw,36px);
}

/* --- the sidebar --------------------------------------------------------- */

.lk-side{
  position:sticky;
  top:0;
  align-self:start;
  min-height:100%;
  padding:var(--s-6,32px) 0 var(--s-7,48px);
  background:var(--navy,#12224f);
  color:rgba(255,255,255,.72);
}

.lk-side__who{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px var(--s-5,24px);
  margin-bottom:var(--s-4,16px);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.lk-avatar{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  flex:0 0 40px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-family:var(--font-head,inherit);
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
}

.lk-avatar--sm{width:32px;height:32px;flex-basis:32px;font-size:12px;
  background:var(--shell-2,#eef0f5);color:var(--text,#12224f)}

.lk-side__name{display:block;min-width:0;font-size:14.5px;font-weight:700;color:#fff;line-height:1.3}
.lk-side__name em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:rgba(255,255,255,.6);margin-top:2px}

.lk-side__list{list-style:none;margin:0;padding:0}
.lk-side__list--foot{margin-top:var(--s-5,24px);padding-top:var(--s-4,16px);
  border-top:1px solid rgba(255,255,255,.12)}

.lk-side__item a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 22px;
  color:inherit;
  text-decoration:none;
  font-size:14.5px;
  line-height:1.35;
  border-left:3px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}

.lk-side__item a:hover{background:rgba(255,255,255,.07);color:#fff}

/* The current item. A left rule in the brand red rather than a filled block:
   the sidebar is navy and a red block on navy is a fire alarm. */
.lk-side__item.is-on a{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-left-color:var(--action,#e1251b);
}

/* A class under its heading. Indented and smaller, so the list reads as a
   hierarchy rather than as eleven equal things. */
.lk-side__item.is-sub a{
  padding-left:38px;
  font-size:13.5px;
  color:rgba(255,255,255,.62);
}
.lk-side__item.is-sub a:hover{color:#fff}

.lk-i{width:18px;height:18px;flex:0 0 18px}
.lk-side__item.is-sub .lk-i{width:15px;height:15px;flex-basis:15px;opacity:.75}

.lk-badge{
  margin-left:auto;
  min-width:20px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--action,#e1251b);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  text-align:center;
}

/* --------------------------------------------------------------------------
   2 — THE HERO
   -------------------------------------------------------------------------- */

.lk-hero{
  position:relative;
  background:var(--navy,#12224f);
  color:rgba(255,255,255,.78);
  padding:clamp(34px,4.5vw,58px) 0 clamp(56px,6vw,84px);
}

/* The same faint grid the site uses on its dark bands, so the VLE's hero and
   the website's stat band are recognisably the same surface. */
.lk-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(120% 100% at 12% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 12% 0%,#000 30%,transparent 78%);
}

/* A hero with no card reserved 280px for it anyway, so the title sat in two
   thirds of the width with a column of nothing beside it. */
.lk-hero__inner:not(:has(.lk-hero__card)){grid-template-columns:minmax(0,1fr)}

.lk-hero__inner{
  position:relative;z-index:1;
  max-width:940px;
  margin-inline:auto;
  padding:0 clamp(20px,3vw,36px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:clamp(20px,3vw,44px);
  align-items:start;
}

/* Block, not inline-block. The eyebrow next to it is an inline-flex, so an
   inline-block back link sat on the same line and the two ran into each other
   — visible the moment the page was rendered, invisible in the markup. */
.lk-hero__back{
  display:block;
  margin-bottom:14px;
  font-size:13.5px;
  color:rgba(255,255,255,.62);
  text-decoration:none;
}
.lk-hero__back::before{content:"← "}
.lk-hero__back:hover{color:#fff}

.lk-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 12px;
  font-family:var(--font-head,inherit);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-amber,#f2a900);
}
.lk-eyebrow::before{content:"";width:20px;height:2px;background:currentColor;border-radius:2px}
.lk-eyebrow--dark{color:var(--action,#e1251b)}

.lk-hero__title{
  margin:0;
  font-family:var(--font-head,inherit);
  font-size:clamp(28px,4.2vw,44px);
  font-weight:800;
  line-height:1.08;
  color:#fff;
}

.lk-hero__meta{margin:14px 0 0;font-size:15px;color:rgba(255,255,255,.66)}

/* The card that overlaps the hero — the reference design's "In Progress"
   panel. It pulls down into the content so the eye lands on the next action
   before it lands on the list. */
.lk-hero__card{
  background:var(--card-bg,#fff);
  border-radius:var(--r-lg,20px);
  box-shadow:var(--e-3,0 30px 60px -30px rgba(16,24,40,.45));
  padding:var(--s-5,24px);
  margin-bottom:calc(-1 * clamp(56px,6vw,84px) - 12px);
  text-align:center;
}

.lk-card__label{
  margin:0 0 6px;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-mute,#6b7385);
}

.lk-card__value{
  margin:0 0 var(--s-4,16px);
  font-family:var(--font-head,inherit);
  font-size:clamp(30px,3.4vw,40px);
  font-weight:800;
  line-height:1;
  color:var(--text,#12224f);
}

.lk-card__value em{font-style:normal;font-size:.5em;color:var(--text-mute,#6b7385)}

/* When the value is a sentence rather than a number it cannot be 40px. */
.lk-card__value--words{font-size:17px;line-height:1.35;font-weight:700}

/* --------------------------------------------------------------------------
   3 — TYPE AND PANELS
   -------------------------------------------------------------------------- */

.lk-h2{
  margin:var(--s-8,64px) 0 var(--s-4,16px);
  font-family:var(--font-head,inherit);
  font-size:clamp(19px,2.2vw,24px);
  font-weight:800;
  line-height:1.25;
  color:var(--text,#12224f);
}

.lk-h3{
  margin:0 0 var(--s-3,12px);
  font-family:var(--font-head,inherit);
  font-size:17.5px;font-weight:700;
  color:var(--text,#12224f);
}

.lk-prose{line-height:1.7;color:var(--text-soft,#3d4657)}
.lk-prose > *:first-child{margin-top:0}
.lk-prose > *:last-child{margin-bottom:0}

.lk-meta,.lk-hint{font-size:13.5px;color:var(--text-mute,#6b7385)}
.lk-hint{margin:8px 0 0}

.lk-panel{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-6,32px);
  margin:var(--s-6,32px) 0;
}

.lk-note{
  margin:var(--s-4,16px) 0;
  padding:14px 18px;
  border-radius:var(--r-md,14px);
  border-left:4px solid var(--line,rgba(16,24,40,.12));
  background:var(--shell,#f5f6f9);
  font-size:14.5px;
  line-height:1.55;
}
.lk-note--success{border-left-color:#1f8a4c}
.lk-note--error{border-left-color:var(--action,#e1251b)}
.lk-note--info{border-left-color:var(--navy,#12224f)}

.lk-empty{
  padding:var(--s-6,32px);
  border:1px dashed var(--line,rgba(16,24,40,.16));
  border-radius:var(--r-lg,20px);
  background:var(--card-bg,#fff);
}
.lk-empty h3{margin:0 0 6px;font-family:var(--font-head,inherit);font-size:16.5px;font-weight:700}
.lk-empty p{margin:0;font-size:14.5px;color:var(--text-mute,#6b7385);max-width:56ch}

/* --------------------------------------------------------------------------
   4 — PROGRESS
   -------------------------------------------------------------------------- */

.lk-strip{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-5,24px);
  margin:var(--s-6,32px) 0;
}

.lk-strip__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:12px;
}
.lk-strip__head b{font-size:15.5px;font-weight:800}
.lk-strip__head span{font-size:13.5px;color:var(--text-mute,#6b7385)}

.lk-bar{
  height:8px;border-radius:999px;overflow:hidden;
  background:var(--shell-2,#eef0f5);
}
.lk-bar > span{
  display:block;height:100%;border-radius:999px;
  background:var(--action,#e1251b);
  transition:width .5s ease;
}
.lk-bar--sm{height:5px;margin-top:10px}

/* Stat tiles, in the theme's own figure style. */
.lk-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:var(--s-4,16px);
  margin:var(--s-6,32px) 0;
}

.lk-stat{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-5,24px);
}
.lk-stat b{
  display:block;
  font-family:var(--font-head,inherit);
  font-size:clamp(28px,3.2vw,38px);font-weight:800;line-height:1;
  color:var(--text,#12224f);
}
.lk-stat span{display:block;margin-top:8px;font-size:13px;color:var(--text-mute,#6b7385)}
.lk-stat.is-waiting b{color:var(--brand-amber,#f2a900)}

/* --------------------------------------------------------------------------
   5 — ROWS, TILES AND PILLS
   -------------------------------------------------------------------------- */

.lk-rows{list-style:none;margin:0;padding:0}

.lk-row + .lk-row{margin-top:10px}

.lk-row > a,
.lk-row--plain{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-md,14px);
  color:inherit;
  text-decoration:none;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.lk-row > a:hover{
  border-color:var(--line,rgba(16,24,40,.16));
  box-shadow:var(--e-2,0 14px 30px -18px rgba(16,24,40,.35));
  transform:translateY(-1px);
}

.lk-row .lk-i:first-child{color:var(--text-mute,#6b7385)}
.lk-row .lk-i:last-child{margin-left:4px;color:var(--text-mute,#6b7385);width:16px;height:16px;flex-basis:16px}

.lk-row__text{display:block;min-width:0;flex:1 1 auto}
.lk-row__text strong{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.lk-row__text em{display:block;font-style:normal;font-size:13px;color:var(--text-mute,#6b7385);margin-top:2px}

.lk-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:var(--s-4,16px);
}

.lk-tile{
  display:block;height:100%;
  padding:var(--s-5,24px);
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  color:inherit;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.lk-tile:hover{
  transform:translateY(-4px);
  border-color:var(--line,rgba(16,24,40,.16));
  box-shadow:var(--e-2,0 14px 30px -18px rgba(16,24,40,.35));
}

.lk-tile__title{margin:0 0 6px;font-family:var(--font-head,inherit);font-size:17px;font-weight:700;line-height:1.3}
.lk-tile__meta{margin:0;font-size:13.5px;color:var(--text-mute,#6b7385)}
.lk-tile .lk-pill{margin-top:12px}

.lk-tag{
  display:inline-block;margin-bottom:8px;
  padding:3px 10px;border-radius:999px;
  background:var(--navy-soft,#eef1f9);color:var(--navy,#12224f);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* Status pills. State is carried by an icon AND a colour AND the words: colour
   alone fails for the eight percent of men with a colour vision deficiency,
   and "did I hand that in?" is not a question to answer by hue. */
.lk-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;white-space:nowrap;
  background:var(--shell-2,#eef0f5);color:var(--text-soft,#3d4657);
}
.lk-pill .lk-i{width:14px;height:14px;flex-basis:14px}

.lk-pill--done{background:#e6f4ec;color:#146c3f}
.lk-pill--waiting{background:var(--amber-soft,#fff6e2);color:#7a5600}
.lk-pill--late,
.lk-pill--void{background:var(--red-soft,#fdecea);color:var(--action-hi,#c51f16)}

/* --------------------------------------------------------------------------
   6 — LESSONS
   -------------------------------------------------------------------------- */

.lk-lessons{display:grid;gap:10px}

.lk-lesson{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-md,14px);
  overflow:hidden;
}

.lk-lesson > summary{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
}
.lk-lesson > summary::-webkit-details-marker{display:none}
.lk-lesson > summary:hover{background:var(--shell-3,#fafbfc)}

.lk-lesson__n{
  display:grid;place-items:center;
  width:28px;height:28px;flex:0 0 28px;
  border-radius:50%;
  background:var(--navy-soft,#eef1f9);color:var(--navy,#12224f);
  font-size:13px;font-weight:800;
}
.lk-lesson__title{flex:1 1 auto;font-size:15.5px;line-height:1.35}
.lk-lesson > summary .lk-i{color:var(--text-mute,#6b7385);transition:transform .2s ease}
.lk-lesson[open] > summary .lk-i{transform:rotate(90deg)}
.lk-lesson > .lk-prose{padding:0 18px 20px 60px}

/* --------------------------------------------------------------------------
   7 — FORMS
   -------------------------------------------------------------------------- */

.lk-form{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-6,32px);
  margin:var(--s-6,32px) 0;
}
.lk-form--inline{margin:var(--s-4,16px) 0 0;padding:var(--s-5,24px);background:var(--shell-3,#fafbfc)}

.lk-label{display:block;margin:var(--s-4,16px) 0 6px;font-size:13.5px;font-weight:700}
.lk-form > .lk-label:first-of-type{margin-top:0}
/* A section heading inside a form does not need the 64px it gets between
   sections of a page. */
.lk-form > .lk-h2,.lk-form > .lk-h3{margin-top:0}

.lk-input,.lk-textarea{
  width:100%;
  padding:12px 14px;
  font:inherit;color:inherit;
  background:var(--card-bg,#fff);
  border:1px solid var(--line,rgba(16,24,40,.16));
  border-radius:var(--r-sm,8px);
}
.lk-textarea{line-height:1.6;resize:vertical}
.lk-input--file{padding:10px 12px;background:var(--shell-3,#fafbfc)}
.lk-input:focus-visible,.lk-textarea:focus-visible{
  outline:2px solid var(--action,#e1251b);outline-offset:1px;border-color:transparent;
}

.lk-field-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:var(--s-4,16px);
}
.lk-field--short{max-width:220px}

.lk-check{display:flex;gap:10px;align-items:flex-start;margin:var(--s-4,16px) 0 0;font-size:14.5px}
.lk-check input{margin-top:3px}

.lk-details{margin:var(--s-4,16px) 0 0;font-size:13.5px;color:var(--text-mute,#6b7385)}
.lk-details summary{cursor:pointer;font-weight:700}
.lk-details ul{margin:10px 0 0;padding-left:1.2em}
.lk-details li{margin-bottom:4px}

.lk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:var(--s-5,24px);
  padding:13px 26px;
  font:inherit;font-weight:700;font-size:14.5px;
  color:var(--action-fg,#fff);
  background:var(--action,#e1251b);
  border:0;border-radius:var(--r-pill,999px);
  cursor:pointer;text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(225,37,27,.75);
  transition:transform .18s ease,box-shadow .18s ease,background .15s ease;
}
.lk-btn:hover{background:var(--action-hi,#c51f16);transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(225,37,27,.85)}
.lk-btn:focus-visible{outline:2px solid var(--text,#12224f);outline-offset:2px}

.lk-btn--sm{padding:10px 18px;font-size:13.5px}
.lk-btn--block{display:flex;width:100%;margin-top:0}
.lk-btn--ghost{
  background:transparent;color:var(--text,#12224f);
  border:1.5px solid var(--line,rgba(16,24,40,.16));box-shadow:none;
}
.lk-btn--ghost:hover{background:var(--shell,#f5f6f9);color:var(--text,#12224f)}

.lk-bare{margin:14px 0 0;padding:0;background:none;border:0}
.lk-link-btn{
  background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--text-mute,#6b7385);text-decoration:underline;cursor:pointer;
}
.lk-link-btn:hover{color:var(--action,#e1251b)}

.lk-attached{
  display:flex;align-items:center;gap:8px;
  margin:14px 0;font-size:14px;
}
.lk-attached .lk-i{color:var(--text-mute,#6b7385)}

/* --------------------------------------------------------------------------
   8 — MARKING AND FEEDBACK
   -------------------------------------------------------------------------- */

.lk-mark{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-5,24px);
  margin-bottom:var(--s-4,16px);
}
/* Already marked: settled, so it recedes. */
.lk-mark.is-done{background:var(--shell-3,#fafbfc)}

.lk-mark__head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-4,16px)}
.lk-mark__who{flex:1 1 auto;min-width:0}
.lk-mark__who strong{display:block;font-size:15.5px;font-weight:700}
.lk-mark__who em{display:block;font-style:normal;font-size:13px;color:var(--text-mute,#6b7385);margin-top:2px}

.lk-work{
  padding:var(--s-4,16px) var(--s-5,24px);
  background:var(--shell,#f5f6f9);
  border-radius:var(--r-md,14px);
  margin:var(--s-4,16px) 0;
}

.lk-feedback{
  margin:var(--s-6,32px) 0;
  padding:var(--s-5,24px) var(--s-6,32px);
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-left:4px solid #1f8a4c;
  border-radius:0 var(--r-lg,20px) var(--r-lg,20px) 0;
}

.lk-grade{
  margin:0 0 12px;
  font-family:var(--font-head,inherit);
  font-size:30px;font-weight:800;line-height:1;
  color:var(--text,#12224f);
}

/* --------------------------------------------------------------------------
   9 — HOURS AND SIGNATURES
   -------------------------------------------------------------------------- */

.lk-entry{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-5,24px);
  margin-bottom:var(--s-4,16px);
}
.lk-entry.is-done{border-left:4px solid #1f8a4c}
.lk-entry.is-void{border-left:4px solid var(--action,#e1251b)}

.lk-entry__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:4px;
}
.lk-entry__date{font-family:var(--font-head,inherit);font-size:16.5px;font-weight:800}
.lk-entry__hours{
  font-size:13px;font-weight:700;
  padding:3px 10px;border-radius:999px;
  background:var(--navy-soft,#eef1f9);color:var(--navy,#12224f);
}
.lk-entry__head .lk-pill{margin-left:auto}
.lk-entry__type{margin:0 0 12px;font-size:13.5px;color:var(--text-mute,#6b7385)}

/* The three signature slots. Equal columns, so an unsigned one is a visible
   gap rather than a sentence somebody has to read. */
.lk-sigs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:12px;
  margin-top:var(--s-4,16px);
}

.lk-sig{
  padding:14px 16px;
  background:var(--shell-3,#fafbfc);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-md,14px);
}
.lk-sig.is-signed{background:#f2f9f5;border-color:#cfe8db}
.lk-sig.is-void{background:var(--red-soft,#fdecea);border-color:#f6cdc9}

.lk-sig__who{
  display:flex;align-items:center;gap:6px;
  margin:0 0 8px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-mute,#6b7385);
}
.lk-sig.is-signed .lk-sig__who{color:#146c3f}
.lk-sig__who .lk-i{width:14px;height:14px;flex-basis:14px}

.lk-sig__name{margin:0;font-weight:700;font-size:14.5px}
.lk-sig__when{margin:2px 0 0;font-size:12.5px;color:var(--text-mute,#6b7385)}
.lk-sig__waiting{margin:0;font-size:13.5px;font-style:italic;color:var(--text-mute,#6b7385)}
.lk-sig__void{margin:0;font-size:14px;font-weight:800;color:var(--action-hi,#c51f16)}

.lk-sig__statement{margin:10px 0;font-size:12.5px;line-height:1.5;color:var(--text-mute,#6b7385)}
.lk-sign .lk-label{margin-top:0;font-size:12.5px}
.lk-sign .lk-input{padding:9px 12px;font-size:14px}
.lk-sign .lk-btn{margin-top:10px}

.lk-state{font-size:13px;color:var(--text-mute,#6b7385)}
.lk-state--done{font-weight:700;color:#146c3f}
.lk-state--waiting{font-weight:700;color:var(--action,#e1251b)}

/* --------------------------------------------------------------------------
   10 — SMALLER SCREENS
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .lk-app{grid-template-columns:214px minmax(0,1fr)}
  .lk-hero__inner{grid-template-columns:minmax(0,1fr) 240px}
}

@media (max-width:900px){

  .lk-app{margin-inline:16px;border-radius:var(--r-lg,20px)}

  /* The sidebar becomes a scrolling strip across the top. A drawer would be
     one more tap on the device where taps cost most, and the items fit. */
  .lk-app{grid-template-columns:1fr}

  .lk-side{
    position:static;min-height:0;
    padding:14px 0;
    display:flex;align-items:center;gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .lk-side__who{
    border:0;margin:0;padding:0 8px 0 16px;flex:0 0 auto;
  }
  .lk-side__name{display:none}
  .lk-side__list{display:flex;gap:6px;padding-right:16px}
  .lk-side__list--foot{margin:0;padding-top:0;border:0}
  .lk-side__item a{
    border-left:0;border-radius:999px;
    padding:8px 14px;white-space:nowrap;font-size:13.5px;
  }
  .lk-side__item.is-on a{border-left:0;background:var(--action,#e1251b);color:#fff}
  .lk-side__item.is-sub a{padding-left:14px;font-size:13.5px}

  /* The hero card stops overlapping: on a narrow screen an overlap is just a
     card that covers the text underneath it. */
  .lk-hero{padding-bottom:clamp(28px,5vw,40px)}
  .lk-hero__inner{grid-template-columns:1fr}
  .lk-hero__card{margin-bottom:0;text-align:left}
  .lk-btn--block{width:auto;display:inline-flex}
}

@media (max-width:560px){
  .lk-row > a,.lk-row--plain{flex-wrap:wrap}
  .lk-row .lk-i:last-child{display:none}
  .lk-entry__head .lk-pill{margin-left:0}
  .lk-lesson > .lk-prose{padding-left:18px}
}

/* The way in, from anywhere on the public site. */
.lkta-entry-btn{margin-top:0}
.lkta-entry-link{font-weight:700;color:inherit}

/* --- materials on a lesson ------------------------------------------------ */

.lk-files{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}

.lk-files a{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  background:var(--shell-3,#fafbfc);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-md,14px);
  color:inherit;text-decoration:none;
  transition:border-color .16s ease,background .16s ease;
}
.lk-files a:hover{background:var(--card-bg,#fff);border-color:var(--line,rgba(16,24,40,.16))}
.lk-files .lk-i{color:var(--action,#e1251b)}
.lk-file__name{flex:1 1 auto;font-weight:700;font-size:14.5px}
.lk-file__meta{font-size:12.5px;color:var(--text-mute,#6b7385);white-space:nowrap}

/* --------------------------------------------------------------------------
   11 — SIGNING IN
   -------------------------------------------------------------------------- */

.lk-main--auth{padding-bottom:0}

/* Constrained to the pair, not to the page. On the full 1320px column the form
   sat on the left and the reassurance panel on the right with a screen's worth
   of white between them, which reads as two unrelated things. */
.lk-auth{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(20px,3vw,36px);
  align-items:start;
  max-width:860px;
  margin:clamp(28px,5vw,64px) auto clamp(40px,6vw,88px);
  padding-inline:var(--gutter,32px);
}

.lk-auth__panel{
  padding:clamp(26px,3vw,40px);
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-xl,28px);
  box-shadow:var(--e-2,0 14px 30px -18px rgba(16,24,40,.35));
}

.lk-auth__title{
  margin:0 0 8px;
  font-family:var(--font-head,inherit);
  font-size:clamp(26px,3.4vw,34px);font-weight:800;line-height:1.1;
  color:var(--text,#12224f);
}
.lk-auth__lede{margin:0 0 var(--s-5,24px);font-size:15.5px;color:var(--text-mute,#6b7385)}

.lk-auth__form .lk-label:first-of-type{margin-top:0}
.lk-auth__form .lk-btn{width:100%;margin-top:var(--s-5,24px)}

.lk-auth__alt{margin:14px 0 0;font-size:14px;color:var(--text-mute,#6b7385);text-align:center}
.lk-auth__alt a{font-weight:700;color:var(--action,#e1251b)}

/* The reassurance column. A sign-in screen is where somebody decides whether
   they are in the right place. */
.lk-auth__side{
  padding:clamp(22px,2.5vw,32px);
  background:var(--navy,#12224f);
  border-radius:var(--r-xl,28px);
  color:rgba(255,255,255,.76);
}
.lk-auth__side .lk-h3{color:#fff;margin-bottom:var(--s-4,16px)}

.lk-auth__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lk-auth__list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.lk-auth__list .lk-i{color:var(--brand-amber,#f2a900);margin-top:2px}

.lk-auth__help{
  margin:var(--s-5,24px) 0 0;padding-top:var(--s-4,16px);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.6;
}
.lk-auth__help a{color:#fff;font-weight:700}

@media (max-width:860px){
  .lk-auth{grid-template-columns:1fr}
  .lk-auth__panel{max-width:none}
}

/* --------------------------------------------------------------------------
   12 — MANAGING CLASSES
   -------------------------------------------------------------------------- */

.lk-roll{
  list-style:none;margin:var(--s-4,16px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:6px;max-height:340px;overflow:auto;
}
.lk-roll label{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-md,14px);cursor:pointer;
}
.lk-roll label:hover{background:var(--shell,#f5f6f9)}
.lk-roll input{flex:0 0 auto}

.lk-row--plain .lk-btn{margin-top:0;flex:0 0 auto}

/* The one control on the page that a mis-click cannot be shrugged off. */
.lk-danger{
  padding:var(--s-5,24px);
  border:1px solid var(--red-soft,#fdecea);
  border-left:4px solid var(--action,#e1251b);
  border-radius:var(--r-lg,20px);
  background:var(--card-bg,#fff);
}
.lk-danger p{margin:0 0 10px;font-size:14.5px}
.lk-danger .lk-check{margin-bottom:0}

.lk-btn--danger{
  background:transparent;color:var(--action-hi,#c51f16);
  border:1.5px solid var(--action,#e1251b);box-shadow:none;
}
.lk-btn--danger:hover{background:var(--action,#e1251b);color:#fff}

/* --- requesting an account ------------------------------------------------ */

/* The honeypot. Off-screen rather than display:none — some bots skip anything
   that is display:none, and the point is that they fill it in. */
.lk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lk-auth__ask{
  margin-top:var(--s-5,24px);
  padding-top:var(--s-5,24px);
  border-top:1px solid var(--line-soft,rgba(16,24,40,.07));
}
.lk-auth__ask-title{
  margin:0 0 6px;
  font-family:var(--font-head,inherit);
  font-weight:800;font-size:15.5px;
  color:var(--text,#12224f);
}
.lk-auth__ask p{margin:0 0 12px;font-size:14px;color:var(--text-mute,#6b7385);line-height:1.55}
.lk-auth__ask .lk-btn{margin-top:0}

.lk-input--sum{max-width:160px}

/* --------------------------------------------------------------------------
   13 — SUPPORT TICKETS

   A ticket thread is a conversation, so it is drawn as one: alternating
   sides, the name and the time above each message, and staff replies in the
   navy that signals "this is us" everywhere else on the site.

   It is an ordered list under the hood. A screen reader announcing "list of
   6 items" before reading a thread is exactly the right summary, and it
   comes free from using the right element.
   -------------------------------------------------------------------------- */

.lk-thread{list-style:none;margin:0 0 var(--s-6,32px);padding:0;display:grid;gap:var(--s-4,16px)}

.lk-msg{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-5,24px);
  max-width:min(680px,100%);
}
.lk-msg__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-bottom:10px;
}
.lk-msg__head strong{font-family:var(--font-head,inherit);font-size:14px;font-weight:800}
.lk-msg__head time{font-size:12px;color:var(--text-mute,#6b7385)}
.lk-msg__body{font-size:15px;line-height:1.65}
.lk-msg__body p{margin:0 0 10px}
.lk-msg__body p:last-child{margin-bottom:0}

/* Staff replies sit on the other side, in navy. The offset is what makes a
   thread scannable at a glance — you can see who spoke last without reading
   a word. */
.lk-msg--staff{
  margin-left:auto;
  background:var(--navy,#12224f);
  border-color:var(--navy,#12224f);
  color:#fff;
}
.lk-msg--staff .lk-msg__head time{color:rgba(255,255,255,.62)}
.lk-msg--staff a{color:var(--brand-amber,#f2a900)}

@media(max-width:640px){
  /* Below this the offset stops reading as "the other person" and starts
     reading as a layout fault, so both sides go full width and the colour
     carries the distinction on its own. */
  .lk-msg,.lk-msg--staff{max-width:100%;margin-left:0}
}

/* --- the public portal ---------------------------------------------------- */

.lk-main--portal{padding-bottom:var(--s-9,88px)}

.lk-promise{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--s-4,16px);
  margin:0 0 var(--s-6,32px);padding:0;
}
.lk-promise > div{
  padding:var(--s-4,16px) var(--s-5,24px);
  background:var(--shell-2,#f0f2f6);
  border-radius:var(--r-md,14px);
}
.lk-promise dt{
  margin:0 0 4px;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--text-mute,#6b7385);
}
.lk-promise dd{margin:0;font-family:var(--font-head,inherit);font-weight:700;font-size:15px}

.lk-portal-doors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--s-5,24px);margin-bottom:var(--s-6,32px);
}
.lk-portal-door{
  background:var(--card-bg,#fff);
  border:1px solid var(--line-soft,rgba(16,24,40,.07));
  border-radius:var(--r-lg,20px);
  padding:var(--s-6,32px);
}
.lk-portal-door .lk-h2{margin-top:0}
.lk-portal-door p:last-child{margin-bottom:0}
.lk-btn--block{display:block;width:100%;text-align:center}

/* The ticket status block in the hero card. A pill was tried first and
   rendered as one word adrift in a white panel — wp_kses_post() strips its
   icon, and the panel is far bigger than a pill. */
.lk-card__status{
  margin:0;font-family:var(--font-head,inherit);font-weight:800;
  font-size:20px;line-height:1.15;
}
.lk-card__status--waiting{color:var(--action,#e1251b)}
.lk-card__status--done{color:#1f8a4c}
.lk-card__status--idle{color:var(--navy,#12224f)}
.lk-card__ref{
  margin:6px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--text-mute,#6b7385);
}