/* FK LEARN — components. Consumes tokens.css. Brand-locked. */

/* Global: an explicit display: on a class (.pill etc.) must never beat the hidden attribute. */
[hidden]{display:none !important}

/* ---- topnav (student portal site-wide nav) ---- */
.topnav{
  background:var(--color-card); border-bottom:1px solid var(--color-line);
  position:sticky; top:0; z-index:20;
}
.topnav .row{
  display:flex; align-items:center; gap:var(--s-4);
  max-width:var(--maxw); margin:0 auto; padding:0 var(--s-6);
  min-height:56px;
}
.topnav .brand{
  font-family:var(--font-script); font-size:1.7rem; color:var(--color-ink);
  line-height:1; white-space:nowrap; text-decoration:none; flex:0 0 auto;
}
.topnav .brand:hover{text-decoration:none}
.topnav .menu{
  display:flex; align-items:center; gap:var(--s-2); flex:1 1 auto;
}
.topnav .menu a{
  font-family:var(--font-head); font-size:var(--t-sm); font-weight:600;
  color:var(--color-ink); text-decoration:none; padding:.4rem .6rem;
  border-bottom:2px solid transparent; white-space:nowrap; transition:.12s;
}
.topnav .menu a:hover{color:var(--color-accent-text); text-decoration:none}
.topnav .menu a.active{
  color:var(--color-accent-text);
  border-bottom-color:var(--color-accent);
}
.topnav .right{
  display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto;
  font-size:var(--t-sm);
}
.topnav .who{color:var(--color-muted); white-space:nowrap; overflow:hidden; max-width:14rem; text-overflow:ellipsis}
.topnav .out{
  font-family:var(--font-head); font-size:var(--t-xs); font-weight:700;
  color:var(--color-accent-text); background:transparent;
  border:1.5px solid var(--color-line); border-radius:var(--radius-sm);
  padding:.25rem .75rem; cursor:pointer; white-space:nowrap; transition:.12s;
}
.topnav .out:hover{border-color:var(--color-accent-text); text-decoration:none}
/* sign-out form sits inline next to .who */
.topnav form{display:inline; margin:0; padding:0}

/* phone: brand + right on row 1; menu scrolls on row 2; nav is static (not sticky)
   so it can't overlap a hero image */
@media(max-width:800px){
  .topnav{position:static}
  .topnav .row{
    flex-wrap:wrap; padding:0 var(--s-4); gap:0; min-height:auto;
  }
  .topnav .row > .brand{padding:var(--s-3) 0; flex:1}
  .topnav .right{padding:var(--s-3) 0}
  .topnav .menu{
    order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:0; padding-bottom:var(--s-2);
    scrollbar-width:none; /* Firefox */
  }
  .topnav .menu::-webkit-scrollbar{display:none}
  .topnav .menu a{padding:.35rem .7rem; flex:0 0 auto; border-bottom:none; border-bottom:2px solid transparent}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--color-body);
  background:var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head); color:var(--color-ink); line-height:1.15; font-weight:800}
a{color:var(--color-accent-text); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top bar ---- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-6); background:var(--color-card);
  border-bottom:1px solid var(--color-line); position:sticky; top:0; z-index:10;
}
.nav .brand{font-family:var(--font-script); font-size:1.7rem; color:var(--color-ink); line-height:1}
/* brand signature wordmark (replaces CSS-script text) */
.brand-logo{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none}
.brand-logo:hover{text-decoration:none}
.brand-img{height:52px; width:auto; display:block}
.nav .brand-img{height:60px}
.admin-sidebar-top .brand-logo{flex-direction:column; align-items:flex-start; gap:.2rem}
.admin-sidebar-top .brand-img{height:48px; max-width:100%}
.brand-logo .brand-sub{font-family:var(--font-head); font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted)}
.nav .right{display:flex; align-items:center; gap:var(--s-5); font-size:var(--t-sm)}
.nav .right .who{color:var(--color-muted)}
.nav .right .out{color:var(--color-accent-text); font-weight:600}

/* ---- orange section band (the signature device) ---- */
.band{
  background:var(--color-accent); color:var(--color-on-accent);
  font-family:var(--font-head); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:var(--t-sm); padding:var(--s-3) var(--s-6); display:flex; align-items:center; gap:.6rem;
}
.band::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--color-on-accent)}

/* ---- layout ---- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--s-7) var(--s-6); flex:1}
.wrap-narrow{max-width:760px}

/* ---- buttons ---- */
.btn{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:var(--t-base);
  padding:.8rem 1.4rem; border-radius:10px; border:0; cursor:pointer; text-decoration:none; transition:.15s;
}
.btn-primary{background:var(--color-accent); color:var(--color-on-accent)}
.btn-primary:hover{background:#cf6428; text-decoration:none}
.btn-dark{background:var(--color-ink); color:#fff}
.btn-dark:hover{background:#0f2840; text-decoration:none}
.btn-ghost{background:transparent; color:var(--color-accent-text); border:1.5px solid var(--color-line)}
.btn-sm{font-size:var(--t-sm); padding:.4rem .9rem; border-radius:var(--radius-sm)}

/* ---- eyebrow + hook ---- */
.eyebrow{
  display:inline-block; background:var(--color-accent); color:#fff; font-family:var(--font-head);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px; margin-bottom:var(--s-4);
}
.hook{
  font-style:italic; color:var(--color-ink); font-size:var(--t-lg); line-height:1.5;
  border-left:4px solid var(--color-accent); padding:var(--s-2) 0 var(--s-2) var(--s-4); margin:var(--s-5) 0;
}

/* ---- cards ---- */
.card{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow)}
.grid{display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.lesson-card{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); text-decoration:none; transition:border-color .12s, box-shadow .12s}
.lesson-card:hover{border-color:var(--color-accent); box-shadow:0 4px 18px rgba(225,115,53,.12); text-decoration:none}
.lesson-card .ic{width:40px; height:40px; border-radius:50%; background:var(--color-accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-family:var(--font-head); font-size:1.05rem;
  margin-bottom:var(--s-2); flex-shrink:0}
.lesson-card h3{font-size:var(--t-base); font-weight:700; color:var(--color-ink); line-height:1.3}
.lesson-card p{color:var(--color-muted); font-size:var(--t-sm); margin:0; line-height:1.5}
.lesson-card .meta{color:var(--color-accent-text); font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:auto; padding-top:var(--s-2)}

/* ---- prose (lesson body) ---- */
.prose{max-width:680px}
.prose h2{font-size:var(--t-2xl); margin:var(--s-6) 0 var(--s-3)}
.prose h3{font-size:var(--t-xl); margin:var(--s-5) 0 var(--s-2)}
.prose p,.prose .block-text{margin:0 0 var(--s-4); font-size:var(--t-lg); line-height:1.7}
.prose .block-text > p:only-child{margin:0}
.prose ul,.prose ol{margin:0 0 var(--s-4) var(--s-5)}
.prose li{margin-bottom:var(--s-2); font-size:var(--t-lg); line-height:1.65}
.prose strong{color:var(--color-ink)}
.prose a{color:var(--color-accent-text); text-decoration:underline}
.prose .callout{background:var(--color-accent-wash); border-radius:var(--radius); padding:var(--s-4) var(--s-5); margin:var(--s-5) 0; font-size:var(--t-base)}
.prose .callout strong{color:var(--color-accent-text)}
@media(max-width:600px){.prose h2{font-size:var(--t-xl)} .prose p,.prose li,.prose .block-text{font-size:var(--t-base)}}

/* ---- forms ---- */
.field{display:grid; gap:.4rem; margin-bottom:var(--s-3)}
label{font-size:var(--t-sm); font-weight:600; color:var(--color-ink)}
/* All text-like inputs, selects and textareas share one styled look. */
input[type=text],input[type=email],input[type=url],input[type=number],
input[type=date],input[type=password],input[type=tel],input[type=search],
select,textarea{
  width:100%; padding:.7rem .9rem; border:1.5px solid var(--color-line); border-radius:10px;
  font:inherit; font-size:var(--t-base); color:var(--color-ink); background:var(--color-card);
  -webkit-appearance:none; appearance:none; transition:border-color .12s, box-shadow .12s;
}
textarea{line-height:1.5; resize:vertical; min-height:5rem}
/* Checkboxes/radios are not full-width text controls. */
input[type=checkbox],input[type=radio]{width:auto; appearance:auto; -webkit-appearance:auto; padding:0; accent-color:var(--color-accent)}
/* Native select needs its caret back after appearance:none. */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23687279' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem; cursor:pointer;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(225,115,53,.15);
}
input::placeholder,textarea::placeholder{color:var(--color-muted)}

/* Reusable admin form layout: vertical stack of fields + responsive 2-col rows. */
.form-grid{display:grid; gap:var(--s-4); max-width:640px; margin-top:var(--s-4)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
.form-field > label{display:block; margin-bottom:.3rem}
.form-field .hint{display:block; color:var(--color-muted); font-size:var(--t-xs); margin-top:.3rem}
.form-actions{display:flex; gap:.6rem; margin-top:var(--s-2)}
@media(max-width:560px){ .form-row{grid-template-columns:1fr} }

/* ---- progress ---- */
.progress{height:8px; background:var(--color-line); border-radius:99px; overflow:hidden}
.progress > i{display:block; height:100%; background:var(--color-accent); border-radius:99px}

/* ---- footer ---- */
.foot{background:var(--color-card); border-top:1px solid var(--color-line); color:var(--color-muted);
  font-size:var(--t-sm); text-align:center; padding:var(--s-5)}

/* ---- registration form ---- */
.req{color:#c0392b}
.reg-success{color:var(--color-ink); background:var(--color-accent-wash); border-radius:var(--radius); padding:var(--s-4) var(--s-5); margin:.6rem 0 1.2rem}
.form-errors{background:#fdecea; border:1px solid #e7a399; color:#922; padding:.8rem 1rem; border-radius:var(--radius-sm); margin-bottom:1.2rem; font-size:var(--t-sm)}
.form-errors ul{margin:.4rem 0 0 1.2rem; padding:0}
.reg-field input[aria-invalid="true"],.reg-field textarea[aria-invalid="true"]{border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12)}
/* checkbox-group + consent */
.cg{border:1px solid var(--color-line); border-radius:var(--radius); padding:var(--s-4); margin:0; display:flex; flex-direction:column; gap:.5rem}
.cg legend{font-size:var(--t-sm); font-weight:600; color:var(--color-ink); padding:0 .4rem}
/* Each option is a selectable card: hover highlight, click anywhere on the row. */
.cg-opt{display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; font-weight:500;
  border:1.5px solid var(--color-line); border-radius:var(--radius); cursor:pointer; transition:.12s}
.cg-opt:hover{border-color:var(--color-accent); background:var(--color-accent-wash)}
.cg-opt:has(input:checked){border-color:var(--color-accent); background:var(--color-accent-wash); box-shadow:0 0 0 1px var(--color-accent) inset}
.cg-opt input{accent-color:var(--color-accent); width:1.1rem; height:1.1rem; flex:0 0 auto}
.opt-price{color:var(--color-accent-text); font-style:normal; font-weight:700; margin-left:auto; font-size:var(--t-base)}
.price-total{margin:.4rem 0 0; padding-top:.7rem; border-top:1px solid var(--color-line); font-size:var(--t-base); text-align:right; color:var(--color-muted)}
.price-total strong{color:var(--color-accent-text); font-size:var(--t-xl); margin-left:.3rem}
.consent-box{border:1px solid var(--color-line); border-radius:var(--radius); padding:var(--s-4) var(--s-5); background:var(--color-bg)}
.consent-row{display:flex; align-items:flex-start; gap:.7rem; font-weight:600; cursor:pointer; line-height:1.5; margin:0}
.consent-row input{margin-top:.25rem; flex-shrink:0; width:1.15rem; height:1.15rem; accent-color:var(--color-accent)}
.consent-text{color:var(--color-ink)}
.consent-hint{margin:.6rem 0 0 1.85rem; color:var(--color-muted); font-size:var(--t-sm); font-weight:400; line-height:1.5}
.consent-link{display:inline-block; margin:.5rem 0 0 1.85rem; font-size:var(--t-sm); font-weight:600; color:var(--color-accent-text)}
/* rich-text editor */
.rt-toolbar{display:flex; flex-wrap:wrap; gap:.2rem; border:1.5px solid var(--color-line); border-bottom:none; border-radius:10px 10px 0 0; padding:.35rem; background:var(--color-bg)}
.rt-btn{font-family:var(--font-head); font-size:var(--t-sm); min-width:2rem; padding:.25rem .5rem; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--color-ink); cursor:pointer; line-height:1.2}
.rt-btn:hover{background:var(--color-accent-wash); color:var(--color-accent-text)}
.rt-editor{min-height:9rem; border:1.5px solid var(--color-line); border-radius:0 0 10px 10px; padding:.7rem .9rem; font:inherit; font-size:var(--t-base); color:var(--color-ink); background:var(--color-card); overflow:auto; resize:vertical}
.rt-editor:focus{outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(225,115,53,.15)}
.rt-editor h1{font-size:var(--t-xl)} .rt-editor h2{font-size:var(--t-lg)}
.rt-editor ul,.rt-editor ol{margin:.4rem 0; padding-left:1.6rem}
.rt-editor li{margin:.15rem 0}
.rt-editor p{margin:0 0 .4rem}
.rt-editor:empty::before{content:attr(data-placeholder); color:var(--color-muted)}
/* phone dial-code combo — wrapper is full width whether or not JS has run */
.phone-combo-wrap{width:100%}
.phone-combo-wrap input[type=tel]{width:100%}
.phone-combo{display:flex; gap:.5rem; width:100%; align-items:stretch}
.phone-combo .dialcode-dd{flex:0 0 auto; width:7.5rem}
.phone-combo input[type=tel]{flex:1 1 auto; width:auto}

/* ---- custom dropdown (no native select/datalist) ---- */
.fk-dd{position:relative}
.fk-dd-toggle{display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  padding:.7rem .9rem; border:1.5px solid var(--color-line); border-radius:10px; background:var(--color-card);
  font:inherit; font-size:var(--t-base); color:var(--color-ink); cursor:pointer; text-align:left}
.fk-dd-toggle:hover{border-color:var(--color-accent)}
.fk-dd-toggle[aria-expanded="true"]{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(225,115,53,.15)}
.fk-dd-toggle.is-error{border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.fk-dd-ph{color:var(--color-muted)}
.fk-dd-caret{color:var(--color-muted); font-size:.8em; flex:0 0 auto}
.fk-dd-panel{position:absolute; z-index:50; top:calc(100% + 4px); left:0; right:0;
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.4rem; max-height:16rem; display:flex; flex-direction:column}
/* CRITICAL: an explicit display: rule beats the [hidden] attribute, so the panel
   would never hide. This restores hide-on-[hidden]. Same guard for the calendar. */
.fk-dd-panel[hidden],.dp-pop[hidden]{display:none}
/* the dial-code dropdown lives in a narrow column — break its panel out wider + readable */
.dialcode-dd .fk-dd-panel{right:auto; min-width:17rem; max-width:22rem}
.fk-dd-filter{margin:0 0 .4rem; width:100%}
.fk-dd-list{list-style:none; margin:0; padding:0; overflow-y:auto}
.fk-dd-opt{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .7rem;
  border-radius:var(--radius-sm); cursor:pointer; font-size:var(--t-sm)}
.fk-dd-opt:hover,.fk-dd-opt.is-active{background:var(--color-accent-wash); color:var(--color-accent-text)}
.fk-dd-opt.is-sel{font-weight:700}
.fk-dd-meta{color:var(--color-muted); font-style:normal; font-size:var(--t-xs)}
/* vendored date picker */
.dp-wrap{position:relative}
.dp-wrap input[readonly]{cursor:pointer; background:var(--color-card)}
.dp-pop{position:absolute; z-index:50; top:calc(100% + 4px); left:0; width:min(20rem,100%);
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s-3)}
.dp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem}
.dp-title{font-family:var(--font-head); font-weight:700; color:var(--color-ink); background:transparent; border:none; cursor:pointer; padding:.2rem .6rem; border-radius:var(--radius-sm); font-size:var(--t-base)}
.dp-title:hover{background:var(--color-accent-wash); color:var(--color-accent-text)}
.dp-grid-my{grid-template-columns:repeat(3,1fr); gap:.3rem}
.dp-cell{background:transparent; border:none; border-radius:var(--radius-sm); padding:.6rem .2rem; font:inherit; font-size:var(--t-sm); color:var(--color-ink); cursor:pointer}
.dp-cell:hover{background:var(--color-accent-wash); color:var(--color-accent-text)}
.dp-cell.is-sel{background:var(--color-accent); color:var(--color-on-accent); font-weight:700}
.dp-nav{background:transparent; border:none; font-size:1.3rem; line-height:1; color:var(--color-accent-text); cursor:pointer; padding:.1rem .5rem; border-radius:var(--radius-sm)}
.dp-nav:hover{background:var(--color-accent-wash)}
.dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center}
.dp-dow{font-size:var(--t-xs); color:var(--color-muted); font-weight:700; padding:.2rem 0}
.dp-day{background:transparent; border:none; border-radius:var(--radius-sm); padding:.4rem 0; font:inherit; font-size:var(--t-sm); color:var(--color-ink); cursor:pointer}
.dp-day:hover{background:var(--color-accent-wash); color:var(--color-accent-text)}
.dp-day.is-sel{background:var(--color-accent); color:var(--color-on-accent); font-weight:700}
.dp-foot{display:flex; justify-content:space-between; margin-top:.5rem; border-top:1px solid var(--color-line); padding-top:.5rem}
.dp-clear,.dp-today{background:transparent; border:none; color:var(--color-accent-text); font-size:var(--t-sm); font-weight:600; cursor:pointer}

/* ---- login centering ---- */
.login-shell{flex:1; display:grid; place-items:center; padding:6vh var(--s-5)}
.login-card{width:100%; max-width:430px; padding:var(--s-7) var(--s-6)}
.note{color:var(--color-muted); font-size:var(--t-sm); margin-top:var(--s-2)}

@media(max-width:640px){ .wrap{padding:var(--s-6) var(--s-5)} .nav{padding:var(--s-3) var(--s-5)} }

/* ---- scrollable table wrapper (mobile) ---- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table-scroll table{min-width:480px}

/* ---- form-builder field list ---- */
.fieldtable{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.fieldtable th{text-align:left; padding:.45rem .6rem; border-bottom:2px solid var(--color-line); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted)}
.fieldtable td{padding:.5rem .6rem; border-bottom:1px solid var(--color-line); vertical-align:top}
.fieldtable code{font-size:var(--t-xs)}
.fieldtable td .hint{display:block; color:var(--color-muted); font-size:var(--t-xs); margin-top:.15rem}
.ftype{font-family:var(--font-head); font-size:var(--t-xs); font-weight:700; background:var(--color-accent-wash); color:var(--color-accent-text); padding:.1rem .45rem; border-radius:var(--radius-sm)}
.flag{display:inline-block; font-size:var(--t-xs); background:var(--color-bg); border:1px solid var(--color-line); color:var(--color-muted); padding:.05rem .4rem; border-radius:var(--radius-sm); margin-right:.25rem}
.fieldtable .drag-cell{width:1.8rem; text-align:center}
.drag-handle{cursor:grab; color:var(--color-muted); font-size:1.1rem; line-height:1; user-select:none}
.drag-handle:active{cursor:grabbing}
.fieldtable tr.row-ghost{opacity:.4; background:var(--color-accent-wash)}

/* ---- admin shell ---- */
.admin-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:100vh;
}
.admin-sidebar{
  background:var(--color-card);
  border-right:1px solid var(--color-line);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.admin-sidebar-top{
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--color-line);
}
.admin-sidebar-top .brand{
  font-family:var(--font-script);
  font-size:1.25rem;
  color:var(--color-ink);
  line-height:1.15;
  text-decoration:none;
  display:block;
  white-space:nowrap;
}
.admin-sidebar-top .brand:hover{text-decoration:none; color:var(--color-ink)}
.admin-sidebar-top .brand-sub{
  display:block;
  font-family:var(--font-head);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
  margin-top:var(--s-1);
}
.admin-nav{
  flex:1;
  padding:var(--s-4) var(--s-3);
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}
.admin-nav a{
  display:block;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--radius-sm);
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--color-ink);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:.12s;
}
.admin-nav a:hover{
  background:var(--color-accent-wash);
  color:var(--color-accent-text);
  text-decoration:none;
}
.admin-nav a.is-active{
  background:var(--color-accent-wash);
  color:var(--color-accent-text);
  border-left-color:var(--color-accent);
}
.admin-sidebar-foot{
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--color-line);
  font-size:var(--t-xs);
  color:var(--color-muted);
}
.admin-sidebar-foot .who{
  display:block;
  margin-bottom:var(--s-2);
  word-break:break-all;
}
.admin-sidebar-foot form{display:inline}
.admin-sidebar-foot .out{
  background:transparent;
  border:1.5px solid var(--color-line);
  color:var(--color-accent-text);
  font-size:var(--t-xs);
  font-weight:600;
  padding:.25rem .7rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:var(--font-head);
}
.admin-sidebar-foot .out:hover{border-color:var(--color-accent-text)}
.admin-main{
  background:var(--color-card);
  padding:var(--s-6);
  min-height:100vh;
  overflow-y:auto;
}
.admin-main > .card{
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  max-width:900px;
  padding:0;
}

/* ---- admin dashboard: stat strip + management flashcards ---- */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); margin:var(--s-5) 0}
.stat{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius);
  text-align:center; padding:var(--s-5) var(--s-4); box-shadow:var(--shadow)}
.stat-n{font-family:var(--font-head); font-size:var(--t-3xl); font-weight:800; color:var(--color-accent-text); line-height:1}
.stat-l{color:var(--color-muted); font-size:var(--t-sm); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:var(--s-2)}

.tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s-5); margin-top:var(--s-5)}
/* Flashcard: white surface, rounded, hover-lift, accent rail down the left edge. */
.admin-tile{
  display:flex; flex-direction:column; gap:.4rem; text-decoration:none; color:inherit;
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius);
  border-left:4px solid var(--color-accent); padding:var(--s-5);
  box-shadow:var(--shadow); min-height:140px;
  transition:box-shadow .15s ease, transform .15s ease;
}
.admin-tile:hover{transform:translateY(-3px); box-shadow:0 18px 50px rgba(22,52,80,.16); text-decoration:none}
.admin-tile .eyebrow{align-self:flex-start; margin-bottom:.2rem}
.admin-tile h2{font-size:var(--t-lg); color:var(--color-ink); margin:0; font-weight:800}
.admin-tile p{color:var(--color-muted); font-size:var(--t-sm); margin:0; line-height:1.45}

@media(max-width:768px){
  .admin-shell{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .stat-strip{grid-template-columns:repeat(3,1fr); gap:var(--s-3)}
  .admin-sidebar{
    position:static;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--color-line);
  }
  .admin-nav{flex-direction:row; flex-wrap:wrap; gap:var(--s-1); padding:var(--s-3)}
  .admin-nav a{padding:var(--s-2) var(--s-3); border-left:none; border-bottom:3px solid transparent}
  .admin-nav a.is-active{border-bottom-color:var(--color-accent); border-left-color:transparent}
  .admin-main{padding:var(--s-5) var(--s-4)}
}

/* ---------------------------------------------------------------------------
   Pre-course design classes — ported verbatim from
   docs/design/precourse-full-2026-05-31/static/app.css (Phase A).
   sec-head / pill / callout-red / callout-green / embed+shield / protect.
   --------------------------------------------------------------------------- */
.sec-head{background:#fbe9e2;color:var(--color-accent-text);font-family:var(--font-head);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-sm);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);margin:var(--s-6) 0 var(--s-3);display:flex;align-items:center;gap:var(--s-2)}
.pill{display:inline-block;background:var(--color-accent-wash);color:var(--color-accent-text);font-size:var(--t-xs);font-weight:700;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}
.callout-red{background:#fdecec;border-left:4px solid #d9534f;border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0}
.callout-green{background:#eaf6ec;border-left:4px solid #4a9d5b;border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0}
.embed{position:relative; border-radius:var(--radius); overflow:hidden; background:#000; aspect-ratio:16/9; margin:var(--s-5) 0; border:1px solid var(--color-line)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.embed .shield{position:absolute; inset:0; z-index:2; pointer-events:none}
.embed .shield .top{position:absolute; top:0; left:0; right:0; height:62px; pointer-events:auto}
.protect, .protect *{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
.protect img, .protect .embed{ -webkit-user-drag:none; user-drag:none; }

/* Lesson content images (render.py emits <figure class="block-image"><img>).
   Constrain to the reading column — source images are full-res infographics that
   otherwise render at native pixel size and overflow the page. Fixes all lessons. */
.block-image{ margin:var(--s-5) 0; }
.block-image img{ display:block; width:100%; height:auto; max-width:100%;
  border-radius:var(--radius); border:1px solid var(--color-line); }
.block-image-caption{ margin-top:var(--s-2); font-size:var(--t-sm);
  color:var(--color-muted); text-align:center; }

/* ---------------------------------------------------------------------------
   Pilot portal — dashboard/profile B (mockup B) components.
   .pilot-hero / .cover / .avatar / .stats.pilot-stats / .stat-tile /
   .sec / .course / .tl
   --------------------------------------------------------------------------- */

/* Shell wrapper inside topnav — max-width + padding */
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 0 var(--s-8);flex:1}

/* Hero block: cover image + body centred below */
.pilot-hero{position:relative;margin-bottom:0}
.pilot-hero .cover{
  height:220px;width:100%;
  background:linear-gradient(160deg,#163450 0%,#2a5f88 100%);
  background-size:cover;background-position:center;
}
.pilot-hero .cover.photo{background-size:cover;background-position:center}
.pilot-hero .body{
  display:flex;flex-direction:column;align-items:center;
  padding:0 var(--s-6) var(--s-6);
  background:var(--color-bg);
}
/* Circular avatar — overlaps the cover by half its height */
.avatar{
  display:block;
  width:120px;height:120px;border-radius:50%;
  border:4px solid var(--color-card);
  object-fit:cover;
  margin-top:-60px;   /* pull up over the cover */
  background:var(--color-line);
  flex:0 0 auto;
}
/* Pilot identity block */
.pilot-id{text-align:center;margin-top:var(--s-3)}
.pilot-id h1{font-size:var(--t-2xl);margin:0 0 .3rem}
.pilot-id .pill{font-size:var(--t-xs)}
.pilot-id .sub{color:var(--color-muted);font-size:var(--t-sm);margin-top:.4rem}

/* Stat row — 5 tiles, no emoji */
.stats.pilot-stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-3);margin-top:var(--s-5);width:100%;
}
.stat-tile{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--s-4) var(--s-5);
  min-width:90px;text-align:center;flex:1 1 90px;max-width:140px;
}
.stat-tile .n{
  font-family:var(--font-head);font-size:var(--t-2xl);font-weight:800;
  color:var(--color-accent-text);line-height:1;
}
.stat-tile .l{
  font-size:var(--t-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--color-muted);margin-top:.3rem;
}

/* Section label band */
.sec{
  font-family:var(--font-head);font-size:var(--t-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--color-accent-text);
  border-left:4px solid var(--color-accent);
  padding:.4rem 0 .4rem var(--s-3);
  margin:var(--s-5) 0 var(--s-3);
}

/* Two-column body layout */
.two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);
  padding:0 var(--s-6);max-width:var(--maxw);margin:var(--s-5) auto 0;
}

/* Course card */
.course{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--s-4) var(--s-5);
  display:flex;flex-direction:column;gap:.3rem;
}
.course .ic{
  width:36px;height:36px;border-radius:50%;
  background:var(--color-accent);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:var(--t-base);
  margin-bottom:.3rem;flex:0 0 auto;
}
.course h3{font-size:var(--t-base);font-weight:700;color:var(--color-ink);margin:0}
.course .loc{color:var(--color-muted);font-size:var(--t-sm)}
.course .when{color:var(--color-muted);font-size:var(--t-xs)}
.course .pill{margin-top:.4rem;align-self:flex-start}
.pill.done{background:#e6f4ea;color:#2e7d32}

/* Timeline */
.tl{display:flex;flex-direction:column;gap:var(--s-4)}
.tl .ev{
  padding-left:var(--s-4);
  border-left:2px solid var(--color-line);
  position:relative;
}
.tl .ev::before{
  content:"";position:absolute;left:-5px;top:.4rem;
  width:8px;height:8px;border-radius:50%;
  background:var(--color-accent);
}
.tl .ev h4{font-size:var(--t-sm);font-weight:700;color:var(--color-ink);margin:0 0 .15rem}
.tl .ev .meta{font-size:var(--t-xs);color:var(--color-muted)}

/* PCKB state card within dashboard */
.pckb-card{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--s-5);margin-top:var(--s-5);
}
.pckb-card .eyebrow{margin-bottom:var(--s-3)}
.pckb-card p{color:var(--color-body);margin:.3rem 0 .8rem;font-size:var(--t-sm)}

/* Responsive: tablet ≤ 900px — stat tiles 3-up, two-col stacks */
@media(max-width:900px){
  .two-col{grid-template-columns:1fr;gap:var(--s-5)}
  .stat-tile{max-width:none;flex:1 1 calc(33% - var(--s-3))}
}
/* Phone ≤ 520px — stats 2-up, everything single col */
@media(max-width:520px){
  .pilot-hero .cover{height:160px}
  .avatar{width:96px;height:96px;margin-top:-48px}
  .two-col{padding:0 var(--s-4)}
  .stat-tile{flex:1 1 calc(50% - var(--s-3))}
  .pilot-hero .body{padding:0 var(--s-4) var(--s-5)}
}

/* ---- Status badge slugs (managed-lookup: no deploy needed to add a status) ----
   Badge base class is .badge; modifier from the slugified status name.
   completed / active → green; pending / waiting-payment → amber; others → muted.  */
.badge{
  display:inline-block;font-size:var(--t-xs);font-weight:700;
  padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--color-bg);color:var(--color-muted);
  border:1px solid var(--color-line);
}
.badge--completed,.badge--active{background:#e6f4ea;color:#2e7d32;border-color:#b7dfbe}
.badge--pending,.badge--waiting-payment{background:#fff3e0;color:#e65100;border-color:#ffcc80}
.badge--cancelled{background:#fdecea;color:#922;border-color:#f0c0bb}

/* ---- profile: siv logbook ---- */
.logbook-course{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);
}
.logbook-course .lc-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3);
}
.logbook-course h3{font-size:var(--t-base);font-weight:700;color:var(--color-ink);margin:0}
.logbook-meta{color:var(--color-muted);font-size:var(--t-sm);margin:.15rem 0 var(--s-2)}
.logbook-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);font-size:var(--t-sm)}
.logbook-row .lbl{color:var(--color-muted);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.1rem}
.logbook-row .val{font-weight:600;color:var(--color-ink)}

/* ---- profile: form answers ---- */
.form-answer-group{margin-bottom:var(--s-5)}
.form-answer-group .fa-course{
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-accent-text);margin-bottom:var(--s-2);
}
.form-answer-entry{
  background:var(--color-bg);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2);
}
.form-answer-entry .fa-ref{font-weight:700;color:var(--color-ink);font-size:var(--t-sm)}
.form-answer-entry .fa-date{font-size:var(--t-xs);color:var(--color-muted);margin:.1rem 0 var(--s-2)}
.form-answer-entry dl{margin:0;font-size:var(--t-sm)}
.form-answer-entry dt{font-weight:600;color:var(--color-ink);margin-top:.35rem}
.form-answer-entry dd{margin-left:0;color:var(--color-body);margin-bottom:.1rem}

/* ---------------------------------------------------------------------------
   Phase 7: avatar + banner with focus-based framing.
   .cover image framing uses inline style="background-position:<x>% <y>%"
   for the CSS background approach; the JS cropper sets those inputs.
   Avatar framing applies object-position + transform:scale via inline style.
   --------------------------------------------------------------------------- */

/* Avatar image framing (object-position + optional scale via inline style) */
.avatar-frame{
  display:block;width:120px;height:120px;border-radius:50%;
  border:4px solid var(--color-card);
  overflow:hidden;flex:0 0 auto;margin-top:-60px;
  background:var(--color-line);
}
.avatar-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* object-position set inline from stored focus */
}

/* Banner with image: background-position driven by stored focus */
.pilot-hero .cover.photo{
  background-size:cover;
  /* background-position set inline from stored focus x%/y% */
}

/* ---- FK image cropper widget ---- */
.fk-crop-wrap{margin-bottom:var(--s-3)}
.fk-crop-frame{
  width:100%;overflow:hidden;cursor:grab;
  border-radius:var(--radius);
  background:#163450;  /* navy placeholder */
  user-select:none;
}
.fk-crop-frame:active{cursor:grabbing}
.fk-crop-img{
  position:absolute;pointer-events:none;user-select:none;
  will-change:transform;
}
.fk-crop-zoom{width:100%;accent-color:var(--color-accent);cursor:pointer}
.fk-crop-hint{font-size:.72rem;color:var(--color-muted);margin:.25rem 0 0}

/* Upload section on profile edit page */
.upload-section{
  background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);
}
.upload-section h3{font-size:var(--t-base);font-weight:700;margin:0 0 var(--s-3)}
.upload-file-label{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--color-bg);border:1px dashed var(--color-line);
  border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3);
  font-size:var(--t-sm);cursor:pointer;color:var(--color-accent-text);
  margin-bottom:var(--s-3);
}
.upload-file-label input[type=file]{display:none}
.upload-ok-flash{
  display:inline-block;font-size:var(--t-xs);font-weight:700;
  background:#e6f4ea;color:#2e7d32;border:1px solid #b7dfbe;
  border-radius:6px;padding:3px 10px;margin-bottom:var(--s-3);
}

@media(max-width:520px){
  .avatar-frame{width:96px;height:96px;margin-top:-48px}
}

/* ============================================================================
   P1 DASHBOARD MVP — append from flow.css (minus .flowbar/.demo mockup chrome)
   ============================================================================ */

/* Stable scrollbar gutter so short pages don't shift */
html{overflow-y:scroll;scrollbar-gutter:stable}

/* Welcome strip */
.pill.since{background:var(--color-accent-wash);border:1px solid #f3d9c8;color:var(--color-accent-text);padding:4px 12px;border-radius:999px}

/* Status pills */
.pill.up{background:var(--color-accent-wash);color:var(--color-accent-text);border:1px solid #f3d9c8;border-radius:8px;padding:6px 10px}
.pill.wait{background:#fdf3e0;color:#8a6116}
.pill.full{background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-line);border-radius:8px;padding:6px 10px}

/* toast */
.toast{background:#e6f4ea;color:#2e7d32;border:1px solid #cfe8d6;border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:700;margin-bottom:var(--s-4)}

/* action cards */
.action-card{background:var(--color-card);border:1px solid var(--color-line);
  border-left:5px solid var(--color-accent);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s-5);margin-bottom:var(--s-5)}
.action-card.muted{border-left-color:var(--color-line)}
.action-card .head{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.action-card .head h2{margin:0;font-family:var(--font-head);font-size:var(--t-xl);color:var(--color-ink)}
.action-card .head .status{font-size:var(--t-sm);color:var(--color-muted)}
.action-card .head .spacer{flex:1}
.action-card .body{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--color-body)}
.action-card .cta{margin-top:var(--s-4);display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}

/* lock note */
.locknote{display:flex;gap:var(--s-3);align-items:center;background:var(--color-bg);
  border:1px dashed var(--color-line);border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4);font-size:var(--t-sm);color:var(--color-muted)}

/* Your-course card: stand-out tint + layout */
.action-card.mycourse{background:#fffaf6}
.action-card .kicker{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-muted);margin:0 0 .3rem}
.action-card h2.big{margin:0;font-family:var(--font-head);font-size:var(--t-2xl);
  font-weight:800;color:var(--color-ink);line-height:1.15}
.action-card .cmeta{font-size:var(--t-base);color:var(--color-body);margin-top:.3rem}

/* Right column of the course card (tiles + share) */
.rcol{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-3)}
.rcol .tiles{display:flex;gap:var(--s-3)}
@media(max-width:720px){.rcol{align-items:flex-start;width:100%}}

/* Days-to-go tile (and places-left tile) */
.days{flex:0 0 auto;text-align:center;background:var(--color-accent-wash);
  border:1px solid #f3d9c8;border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4)}
.days .n{font-family:var(--font-head);font-size:var(--t-2xl);font-weight:800;
  color:var(--color-accent-text);line-height:1}
.days .l{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--color-accent-text)}

/* Bank-details dropdown (pure CSS <details>) */
details.bankdd{background:var(--color-bg);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);overflow:hidden}
details.bankdd summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:var(--s-2);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:700;
  color:var(--color-ink)}
details.bankdd summary::after{content:"▾";margin-left:auto;color:var(--color-accent-text)}
details.bankdd[open] summary::after{content:"▴"}
details.bankdd .bd{padding:0 var(--s-4) var(--s-4);font-size:var(--t-sm);line-height:1.8}
details.bankdd .bd b{color:var(--color-ink)}

/* course list */
.course-list{background:var(--color-card);border:1px solid var(--color-line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.course-list .mo{padding:var(--s-2) var(--s-4);background:var(--color-bg);
  font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;color:var(--color-muted);
  border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.course-list .mo:first-child{border-top:0}
.crow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4)}
.crow + .crow{border-top:1px solid var(--color-line)}
.crow .tchip{flex:0 0 auto;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--color-accent-wash);color:var(--color-accent-text);
  font-family:var(--font-head);font-weight:800;font-size:.78rem}
.crow .what{flex:1 1 auto;min-width:0}
.crow .what h4{margin:0;font-size:var(--t-base);font-weight:700;color:var(--color-ink)}
.crow .what .meta{font-size:var(--t-sm);color:var(--color-muted);margin-top:.1rem}
.crow .pill,.crow .btn{flex:0 0 auto}
.crow.mine{background:#fffaf6;border-left:4px solid var(--color-accent);padding-left:calc(var(--s-4) - 4px)}

/* Course rows wrap on phones */
@media(max-width:720px){
  .crow{flex-wrap:wrap}
  .crow .what{flex:1 1 calc(100% - 58px)}
  .crow .btn{margin-left:auto}
}

/* footer hook */
footer.hook{border-top:1px solid var(--color-line);background:var(--color-card);
  padding:var(--s-5) var(--s-4);text-align:center;border-left:none}
footer.hook p{margin:0;border-left:4px solid var(--color-accent);display:inline-block;
  padding-left:var(--s-3);font-style:italic;color:var(--color-ink)}

/* ---- Mobile hamburger nav (pure CSS checkbox toggle, no JS) ---- */
/* The nav row needs class="row has-mn" to activate mobile behaviour */
.mn-cb{display:none}
.nav-toggle{display:none;cursor:pointer;padding:.4rem;margin-left:.5rem}
.nav-toggle b{display:block;width:24px;height:3px;background:var(--color-ink);border-radius:2px;margin:5px 0}
.mnav{display:none}
@media(max-width:720px){
  .has-mn .menu,.has-mn .who,.has-mn > .btn,.has-mn > form{display:none}
  .nav-toggle{display:block}
  .mn-cb:checked ~ .mnav{display:flex;position:fixed;inset:0;z-index:50;background:var(--color-card);
    flex-direction:column;align-items:center;padding:5rem var(--s-5) var(--s-6);overflow:auto}
  .mnav .mn-close{position:absolute;top:.8rem;right:1.1rem;font-size:2.4rem;line-height:1;
    color:var(--color-ink);cursor:pointer;padding:.2rem .5rem}
  .mnav .mbrand{font-family:var(--font-head);font-weight:800;font-size:1.5rem;
    color:var(--color-ink);margin-bottom:var(--s-5)}
  .mnav a{display:block;width:100%;max-width:340px;text-align:center;padding:var(--s-4) 0;
    font-family:var(--font-head);font-weight:800;font-size:var(--t-xl);color:var(--color-ink);
    text-decoration:none;border-bottom:1px solid var(--color-line)}
  .mnav a:first-of-type{border-top:1px solid var(--color-line)}
  .mnav a.on{color:var(--color-accent-text)}
  .mnav .memail{margin-top:var(--s-5);font-size:var(--t-sm);color:var(--color-muted)}
  .mnav a.mout{border:0;color:var(--color-accent-text);font-size:var(--t-lg);margin-top:var(--s-2);max-width:340px}
}

/* wrap (override for new portal layout) */
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-7)}

/* ============================================================================
   P4 PCKB PRESENTATION — lesson index + lesson page polish
   ============================================================================ */

/* PCKB index hero intro block */
.pckb-intro{max-width:680px}
.pckb-intro h1{font-size:var(--t-2xl);margin:.4rem 0 var(--s-3);line-height:1.15}
.pckb-intro .lead{font-size:var(--t-base);color:var(--color-body);max-width:60ch;margin:0;line-height:1.65}
@media(max-width:600px){.pckb-intro h1{font-size:var(--t-xl)}}

/* Lesson-grid section note (note below a section band) */
.sec-note{color:var(--color-muted);font-size:var(--t-sm);margin:calc(var(--s-3) * -1) 0 var(--s-3);line-height:1.5}

/* Progress card inside PCKB index — compact pill-style */
.progress-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) var(--s-5);
  background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);
  max-width:520px}
.progress-card .pc-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-sm)}
.progress-card .pc-label{font-weight:700;color:var(--color-ink)}
.progress-card .pc-count{font-weight:700;color:var(--color-accent-text)}

/* Lesson page: lesson-heading area */
.lesson-header{padding:var(--s-4) 0 var(--s-5);border-bottom:1px solid var(--color-line);margin-bottom:var(--s-5)}
.lesson-header .module-pill{display:inline-block;background:var(--color-bg);border:1px solid var(--color-line);
  color:var(--color-muted);font-family:var(--font-head);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:6px;margin-bottom:var(--s-3)}
.lesson-header h1{font-size:var(--t-2xl);line-height:1.15;margin:0 0 var(--s-2)}
@media(max-width:600px){.lesson-header h1{font-size:var(--t-xl)}}

/* Lesson prev/next nav — responsive */
.lesson-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);
  margin:var(--s-6) 0 var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--color-line)}
.lesson-nav .btn{flex:0 1 auto;min-width:0;white-space:normal;text-align:center}
@media(max-width:500px){
  .lesson-nav{flex-direction:column}
  .lesson-nav .btn{width:100%;text-align:center}
}

/* Contact card on PCKB index (Telegram) */
.pckb-contact-card{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-5);margin:var(--s-5) 0;max-width:640px}
.pckb-contact-card .cc-body{flex:1;min-width:220px}
.pckb-contact-card h3{font-size:var(--t-base);margin:0 0 .3rem}
.pckb-contact-card p{color:var(--color-muted);font-size:var(--t-sm);margin:0}

/* Goals section */
.goals-btns{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-4) 0 var(--s-6)}

/* ============================================================================
   P6 BOOKING CALENDAR + TYPE CHIPS
   ============================================================================ */

/* Type chips (Private Training / Mentorship selector + time slots) */
.typchips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-4)}
.typchip{display:inline-block;font-family:var(--font-head);font-size:var(--t-sm);font-weight:700;
  padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--color-line);
  color:var(--color-ink);text-decoration:none;transition:.12s;white-space:nowrap}
.typchip:hover{border-color:var(--color-accent);color:var(--color-accent-text);text-decoration:none}
.typchip.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.typchip.on:hover{background:#cf6428;border-color:#cf6428;color:var(--color-on-accent)}

/* Booking calendar widget */
.fk-cal{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);
  padding:var(--s-4);box-shadow:var(--shadow)}
.fk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.fk-cal-title{font-family:var(--font-head);font-weight:700;color:var(--color-ink);font-size:var(--t-base)}
.fk-cal-nav{background:transparent;border:none;font-size:1.3rem;line-height:1;
  color:var(--color-accent-text);cursor:pointer;padding:.1rem .5rem;border-radius:var(--radius-sm);
  text-decoration:none;font-weight:700}
.fk-cal-nav:hover{background:var(--color-accent-wash);text-decoration:none}
.fk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;margin-bottom:var(--s-3)}
.fk-cal-dow{font-size:var(--t-xs);color:var(--color-muted);font-weight:700;padding:.25rem 0}
.fk-cal-day{display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);padding:.45rem .1rem;font:inherit;font-size:var(--t-sm);
  color:var(--color-ink);border:none;background:transparent;cursor:default;text-decoration:none;line-height:1}
a.fk-cal-day{cursor:pointer}
a.fk-cal-day:hover{background:var(--color-accent-wash);color:var(--color-accent-text);text-decoration:none}
.fk-cal-day.off{color:var(--color-muted);opacity:.4}
.fk-cal-day.blocked{background:var(--color-line);color:var(--color-muted)}
.fk-cal-day.sel{background:var(--color-accent);color:var(--color-on-accent);font-weight:700}
.fk-cal-day.sel:hover{background:#cf6428;color:var(--color-on-accent)}
.fk-cal-day.av{background:var(--color-accent-wash);color:var(--color-accent-text)}
.fk-cal-legend{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-xs);color:var(--color-muted);
  margin-top:var(--s-2)}
.fk-cal-legend span{display:flex;align-items:center;gap:.35rem}
.fk-cal-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;flex:0 0 auto}