:root{
  /* On screen the interface follows the join page: sans-serif, gold accent,
     cream, generous air. Anything that PRINTS keeps Playfair and Lora, so
     goal packets and progress reports still look like the branded documents.
     See the @media print block at the bottom. */
  /* Screen and print use different body faces on purpose.
     Screen: DM Sans, which is cleaner at small sizes on a laptop.
     Print:  Lora, so goal packets still match the branded documents.
     Headings are Playfair Display in both. Swap 'DM Sans' for
     'Open Sans' below and nothing else needs to change. */
  --ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --doc:'Lora',Georgia,serif;
  --display:'Playfair Display',Georgia,serif;

  --gold-deep:#b39f34;      /* gold that carries dark text at proper contrast */
  --gold-soft:#f6efd0;
  --radius:8px;             /* join page uses tighter corners than we had */
  --radius-lg:12px;

  --teal:#344f58; --peri:#cfdef0; --gold:#d1ba52; --peach:#e2a06c;
  --brown:#573730; --cream:#f8f7f2; --mauve:#aa8986; --sage:#d2d2b2;
  --blush:#f2d7c5; --ink:#141414;
  --line:#e2ded4; --paper:#fffefb;
  --shadow:0 1px 2px rgba(52,79,88,.04), 0 10px 30px rgba(52,79,88,.075);
  --shadow-sm:0 1px 2px rgba(52,79,88,.05), 0 4px 12px rgba(52,79,88,.06);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);
  font-family:var(--ui);font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.18;margin:0}
em.accent{font-style:italic;font-weight:500}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

header.top{background:linear-gradient(178deg,#cfdef0 0%,#d8e4f2 100%);color:var(--teal);
  padding:26px 0 0;border-bottom:1px solid #b9cde3;position:relative;overflow:hidden}
/* The mark again, oversized and faint. One motif, used twice. */
.headermark{position:absolute;right:20px;bottom:-34px;width:132px;opacity:.14;pointer-events:none}
/* Each section owns a colour. After a week you navigate by colour, not
   by reading the tab labels. */
nav.tabs button[aria-selected="true"]::before{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;border-radius:3px 3px 0 0;background:var(--teal)}
nav.tabs button[data-tab="questionnaire"][aria-selected="true"]::before{background:#e2a06c}
nav.tabs button[data-tab="bank"][aria-selected="true"]::before,
nav.tabs button[data-tab="build"][aria-selected="true"]::before{background:var(--gold)}
nav.tabs button[data-tab="students"][aria-selected="true"]::before,
nav.tabs button[data-tab="progress"][aria-selected="true"]::before{background:#8ea36a}
.brandline{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brandline h1{font-size:31px;color:var(--teal)}
.brandline h1 em{color:#6b5510}
.kicker{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.brandline .kicker{color:#5f5212}

/* ---- logo mark -------------------------------------------------- */
.mark{display:block;flex:none;width:38px;height:38px}
.brandlockup{display:flex;align-items:center;gap:13px}
.gatecard .mark{width:42px;height:42px;margin-bottom:16px}
@media (max-width:520px){ .mark{width:32px;height:32px} .brandlockup{gap:10px} }
@media print{ .mark{display:none} }

/* The "put the logo on printouts" control. Lives next to every print
   button, because that is the moment someone remembers they are pasting
   into a district system. */
.brandrow{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.brandtog{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--ui);font-size:13px;color:#5b5750;line-height:1.35}
.brandtog input{flex:none;width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--teal)}
.brandtog:hover{color:var(--teal)}
@media print{ .brandrow{display:none} }

.whoami{text-align:right;font-size:13px;color:#3f5a66}
.whoami strong{color:var(--teal);font-family:var(--display);font-size:17px;display:block}
nav.tabs{display:flex;gap:3px;flex-wrap:wrap;margin-top:18px}
nav.tabs button{background:rgba(255,255,255,.45);color:#41606f;border:0;cursor:pointer;
  padding:11px 17px;border-radius:10px 10px 0 0;font-size:14px;font-weight:600;font-family:var(--ui)}
nav.tabs button:hover{background:rgba(255,255,255,.78)}
nav.tabs button[aria-selected="true"]{background:var(--cream);color:var(--teal);font-weight:700;position:relative}
main{padding:30px 0 100px}
section.panel[hidden]{display:none}

.card{background:var(--paper);border:0;border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:var(--shadow);margin-bottom:24px}
/* An inset panel sits INSIDE a card. It goes down, not up: tinted and
   bordered, never another white box with another shadow. */
.card .card,.card .inset{background:#fbfaf6;border:1px solid var(--line);box-shadow:none}
/* A bare card is just a layout wrapper. Home uses it so the coloured
   tiles sit straight on the page instead of on a second sheet of white. */
.card.bare{background:none;box-shadow:none;padding:0;border:0}
.card>h2{font-size:25px;margin-bottom:4px}
.muted{color:#6b6862;font-size:14.5px}
.lead{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.5;margin:0 0 16px;color:#33302b}
.tag{display:inline-block;background:var(--gold);color:#3a3416;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;padding:4px 10px;border-radius:999px}
.tag.brown{background:var(--brown);color:#f3e6df}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--peri);color:#26414f;margin:0 5px 5px 0}
.chip.peach{background:var(--blush);color:#6d4326}
.chip.sage{background:var(--sage);color:#454a2d}
.chip.teal{background:var(--teal);color:#eef4f6}
.rule{height:1px;background:var(--line);border:0;margin:20px 0}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1 1 200px}
label.fld{display:block;margin-bottom:14px}
label.fld>span{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brown);margin-bottom:6px;font-family:var(--ui)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #d6d1c6;border-radius:var(--radius);
  background:#fff;font-family:var(--ui)}
textarea{min-height:70px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--peach);outline-offset:1px;border-color:var(--peach)}
.btn{border:0;cursor:pointer;border-radius:var(--radius);padding:11px 18px;
  font-weight:700;font-size:14px;font-family:var(--ui)}
.btn:hover{filter:brightness(1.06)}
.btn.primary{background:var(--gold);color:#3a3416}
.btn.primary:hover{background:var(--gold-deep);color:#241f06}
.btn.warm{background:var(--blush);color:#6d4326}
.btn.warm:hover{background:#eac3a6}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid #bccfdd}
.btn.ghost:hover{background:var(--peri)}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn.danger{background:transparent;color:#8d4a4a;border:1px solid #e0c4c4}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.empty{border:1px dashed #d3cec2;border-radius:12px;padding:26px;text-align:center;color:#6b6862;background:#fdfcf8}
.note{background:#f2f6f8;border:1px solid #d8e4ea;border-radius:11px;padding:13px 16px;font-size:14px;color:#3d5560}
.note.warm{background:#fdf5ee;border-color:#efd9c4;color:#6d4326}

.modegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.modecard{border:2px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;background:var(--paper);text-align:left}
.modecard[aria-pressed="true"]{border-color:var(--peach);background:#fff8f1}
.modecard h4{font-size:17px;margin-bottom:4px}
.modecard p{margin:0;font-size:13px;color:#6b6862}
.qGroup{margin-bottom:24px}
.grouphead{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.grouphead .swatch{width:13px;height:13px;border-radius:4px;flex:0 0 auto}
.grouphead h3{font-size:20px}
.qItem{border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:9px;background:var(--paper)}
.qItem.picked{border-color:var(--peach);background:#fffaf5}
.qTop{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.qTop h4{font-size:16.5px;margin-bottom:3px}
.qTop .plain{font-size:14px;color:#6b6862;margin:0;max-width:58ch}
.prio{display:flex;gap:5px;flex-wrap:wrap}
.prio button{border:1px solid #d6d1c6;background:#fff;border-radius:8px;padding:6px 11px;
  font-size:12.5px;cursor:pointer;font-weight:600;color:#6b6862;white-space:nowrap}
.prio button[aria-pressed="true"]{color:#2f2a24;border-width:2px;padding:5px 10px}
.prio button[data-v="1"][aria-pressed="true"]{background:#efe9e2;border-color:var(--mauve)}
.prio button[data-v="2"][aria-pressed="true"]{background:var(--peri);border-color:#8fb1c6}
.prio button[data-v="3"][aria-pressed="true"]{background:var(--blush);border-color:var(--peach)}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filters label.fld{margin-bottom:0;flex:1 1 180px}
.areaBlock{margin-bottom:22px}
.areaHead{background:var(--paper);border:1px solid var(--line);border-radius:12px 12px 0 0;border-bottom:0;padding:15px 18px}
.areaHead h3{font-size:19px;margin-bottom:3px}
.areaHead .adesc{font-size:13.5px;color:#6b6862;margin:0;max-width:80ch}
.skillList{border:1px solid var(--line);border-radius:0 0 12px 12px;background:var(--paper);overflow:hidden}
.skill{display:flex;gap:12px;align-items:flex-start;padding:11px 18px;border-top:1px solid #f0ece3}
.skill:hover{background:#fdfbf6}
.skill.inRubric{background:#fff8f1}
.skill .stxt{flex:1 1 auto;font-size:14.5px;line-height:1.45}
.skill .sacts{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.star{background:none;border:0;cursor:pointer;font-size:17px;line-height:1;padding:3px 5px;color:#cfc9bb}
.star[aria-pressed="true"]{color:var(--gold)}
.mine-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--brown);background:var(--blush);padding:2px 7px;border-radius:999px}
.stratbox{padding:13px 18px;background:#f7f9fa;border-top:1px solid #eae6dd;font-size:13.5px;color:#42606c}
.stratbox strong{font-family:'Playfair Display',serif;font-size:14px}
.stratbox ul{margin:6px 0 0;padding-left:19px}
.stratbox li{margin-bottom:4px}

.tray{position:sticky;bottom:0;z-index:20;background:var(--teal);color:var(--cream);
  border-radius:13px 13px 0 0;padding:13px 18px;box-shadow:0 -4px 22px rgba(52,79,88,.18);margin-top:18px}
.tray .tt{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.tray h4{font-size:17px;color:var(--cream)}
.tray .slots{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.slot{background:rgba(255,255,255,.12);border-radius:8px;padding:5px 10px;font-size:12.5px;
  display:flex;gap:8px;align-items:center;max-width:100%}
.slot.blank{border:1px dashed rgba(255,255,255,.3);background:none;color:#9fb9c4}
.slot button{background:none;border:0;color:#ffd9bd;cursor:pointer;font-weight:700;font-size:14px;line-height:1}

.levelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.lvl{border:1px solid var(--line);border-left:4px solid var(--peach);border-radius:10px;padding:11px 13px;background:#fffdfa}
.lvl .lnum{font-family:'Playfair Display',serif;font-weight:800;font-size:22px;color:var(--peach);line-height:1}
.lvl .llabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brown);margin:3px 0 7px}
.lvl textarea{min-height:96px;font-size:13.5px}
.skillrow{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:var(--paper)}
.skillrow>.sr-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.skillrow h4{font-size:16.5px}
.goalbox{background:#f2f6f8;border:1px solid #d8e4ea;border-radius:12px;padding:17px 19px}
.goalbox .gtext{font-size:16px;line-height:1.55;margin:9px 0 0}
.lenspick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.lenscard{border:2px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;background:var(--paper);text-align:left}
.lenscard[aria-pressed="true"]{border-color:var(--peach);background:#fff8f1}
.lenscard h4{font-size:16px;margin-bottom:3px}
.lenscard p{margin:0;font-size:12.5px;color:#6b6862}

.savedcard{border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;background:var(--paper)}
.savedcard h4{font-size:18px;margin-bottom:4px}

#printout{display:none}
@media print{
  @page{margin:.65in}
  body{background:#fff;font-size:11pt}
  header.top,nav.tabs,.noprint,.tray{display:none !important}
  main{display:none}
  #printout{display:block !important}
  #printout .printhead{border-bottom:3px solid #344f58;padding-bottom:9px;margin-bottom:15px;
    display:flex;align-items:center;gap:11pt}
  /* Branding off: keep a hairline so it still reads as a document, but
     nothing that says Aligned Practice. */
  #printout .printhead.plain{border-bottom:1px solid #999}
  #printout .printmark{width:26pt;height:26pt;flex:0 0 auto}
  #printout .printsub{color:#666;margin:4px 0 0}
  #printout .printfoot{margin-top:18pt;padding-top:5pt;border-top:1px solid #ccc;
    font-size:8pt;color:#7a756c;text-align:right;letter-spacing:.03em}
  #printout h1{font-family:'Playfair Display',serif;font-size:22pt;margin:0}
  #printout .kicker{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:9pt;color:#573730}
  #printout table{width:100%;border-collapse:collapse;margin:9px 0 18px}
  #printout th,#printout td{border:1px solid #b9b3a6;padding:6px 8px;font-size:9.5pt;vertical-align:top;text-align:left}
  #printout th{background:#f2efe8;font-weight:700}
  #printout .qrow,#printout tr{break-inside:avoid}
  #printout thead{display:table-header-group}
}

/* ---------------------------------------------------------------
   AUTH GATE  (added for the hosted version)
   --------------------------------------------------------------- */
#gate{position:fixed;inset:0;z-index:9000;background:var(--cream);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
#gate[hidden]{display:none}
.gatecard{max-width:460px;width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:32px 34px;box-shadow:0 10px 44px rgba(52,79,88,.12)}
.gatecard .kicker{color:var(--brown)}
.gatecard h1{font-size:29px;margin:6px 0 4px}
.gatecard h1 em{color:#7a5f10}
.gatecard .sub{color:#6b6862;font-size:14.5px;margin:0 0 22px}
.gatecard .btn{width:100%;justify-content:center;padding:12px 16px}
.gatetabs{display:flex;gap:4px;margin-bottom:20px;background:#f1eee7;padding:4px;border-radius:10px}
.gatetabs button{flex:1;border:0;background:none;cursor:pointer;padding:8px;border-radius:7px;
  font-weight:700;font-size:13.5px;color:#6b6862}
.gatetabs button[aria-selected="true"]{background:#fff;color:var(--teal);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.gatemsg{margin:14px 0 0;font-size:14px;padding:11px 13px;border-radius:9px;display:none}
.gatemsg.show{display:block}
.gatemsg.err{background:#fbeeee;border:1px solid #e6c9c9;color:#7d3f3f}
.gatemsg.ok{background:#eef5f0;border:1px solid #c9dfd0;color:#3a5f47}
.gatefoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:#6b6862;text-align:center}
.gatefoot button{background:none;border:0;color:var(--teal);cursor:pointer;
  font-weight:700;text-decoration:underline;font-size:13px;padding:0}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes spin{to{transform:rotate(360deg)}}
.acctbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;
  font-size:12.5px;color:#3f5a66;padding-top:6px}
.acctbar button{background:none;border:0;color:var(--teal);cursor:pointer;
  text-decoration:underline;font-size:12.5px;padding:0;font-family:var(--ui)}
.syncdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7fc99b;margin-right:5px}
.syncdot.saving{background:var(--gold)}
.syncdot.err{background:#d98080}

/* AI assist */
.aibox{border:1px dashed #c3d5dd;background:#f7fafb;border-radius:11px;padding:14px 16px;margin:12px 0 0}
.aibox h5{font-family:'Playfair Display',serif;font-size:15px;margin:0 0 4px}
.aibox p{margin:0 0 10px;font-size:13.5px;color:#42606c}
.ai-pending{opacity:.55;pointer-events:none}

/* ---------------------------------------------------------------
   STUDENTS, SCORING, CHARTS, REPORTS
   --------------------------------------------------------------- */
.stulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.stucard{border:2px solid var(--line);border-radius:13px;padding:15px 17px;background:var(--paper);
  text-align:left;cursor:pointer}
.stucard[aria-pressed="true"]{border-color:var(--peach);background:#fff8f1}
.stucard h4{font-size:19px;margin-bottom:3px}
.stucard p{margin:0;font-size:13px;color:#6b6862}

.goalcard{border:1px solid var(--line);border-left:5px solid var(--peri);border-radius:12px;
  padding:15px 17px;margin-bottom:12px;background:var(--paper)}
.goalcard.open{border-left-color:var(--peach);background:#fffaf5}
.goalcard h4{font-size:17px}
.scorearea:empty{display:none}

.scoregrid{display:flex;flex-direction:column;gap:8px}
.scorerow{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:#fff}
.scorelabel{font-size:14.5px;line-height:1.4;flex:1 1 260px;display:flex;gap:9px;align-items:flex-start}
.smnum{flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--blush);color:#6d4326;
  font-family:'Lora',serif;font-weight:700;font-size:11.5px;display:inline-flex;
  align-items:center;justify-content:center;margin-top:1px}
.scorebtns{display:flex;gap:5px;flex:0 0 auto}
.scorebtns button{width:38px;height:38px;border:1px solid #d6d1c6;background:#fff;border-radius:9px;
  cursor:pointer;font-weight:700;font-size:15px;color:#6b6862}
.scorebtns button:hover{border-color:var(--peach)}
.scorebtns button[aria-pressed="true"]{background:var(--peach);border-color:var(--peach);color:#3d2413}
.scorebtns button.clr{width:32px;font-size:13px;color:#a09a8e}

.entrylist{display:flex;flex-direction:column;gap:7px}
.entryrow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff;font-size:14px}

/* charts */
.charttitle{font-size:19px;margin-bottom:3px}
.chartsub{font-size:13.5px;color:#6b6862;margin:0 0 14px;max-width:76ch}
.reportgrid{display:grid;grid-template-columns:minmax(190px,1fr) minmax(300px,2.2fr);gap:24px;align-items:start}
@media (max-width:720px){.reportgrid{grid-template-columns:1fr}}

.hero{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#faf8f3}
.hero-num{font-family:'Playfair Display',serif;font-weight:800;font-size:52px;line-height:1;color:var(--ink)}
.hero-of{font-size:24px;color:#8a857b;font-weight:700}
.hero-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--brown);margin-top:6px}
.hero-pill{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:999px}
.hero-pill.met{background:#e2efe6;color:#2f5c41}
.hero-pill.notyet{background:#eef1f4;color:#42606c}
.hero-sub{font-size:13px;color:#6b6862;margin:11px 0 0;line-height:1.5}

.smgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.sm{margin:0;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fff}
.sm figcaption{font-size:13.5px;line-height:1.35;font-weight:600;display:flex;gap:8px;align-items:flex-start}
.smmeta{font-size:12.5px;color:#6b6862;margin:6px 0 4px}
.trend{font-weight:700;font-size:12px;margin-left:5px}
.trend.up{color:#2f5c41}
.trend.down{color:#8a4b3f}
.trend.flat{color:#6b6862}

table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp th{text-align:left;background:#f7f5ef;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--brown);padding:8px 10px;border:1px solid var(--line)}
table.cmp td{padding:8px 10px;border:1px solid var(--line);vertical-align:middle}
table.cmp .skcell{font-weight:600;max-width:340px}
.lvlchip{display:inline-flex;width:26px;height:26px;border-radius:7px;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;color:#3a2a1c}
.nodata{color:#a09a8e;font-size:13px}
table.datatable td,table.datatable th{text-align:center}
table.datatable td:first-child,table.datatable th:first-child{text-align:left}

.rh{font-family:'Playfair Display',serif;font-size:16px;margin:18px 0 5px;color:var(--brown)}
.rp{font-size:15px;line-height:1.6;margin:0}
ul.rp{padding-left:20px}
ul.rp li{margin-bottom:7px}

@media print{
  .smgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sm,.hero,table.cmp tr{break-inside:avoid}
  #printout svg{max-width:100%}
}

/* "filled in from your skills" affordance on the goal wording field */
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--teal);
  font-weight:700;text-decoration:underline;font-size:10.5px;text-transform:none;letter-spacing:0}
.linkbtn:hover{color:var(--peach)}
.autonote{font-weight:400;text-transform:none;letter-spacing:0;color:#8a857b;font-size:10.5px}

/* Specially Designed Instruction picker */
.sdigroup{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:var(--paper)}
.sdigroup summary{cursor:pointer;padding:12px 15px;display:flex;align-items:center;gap:10px;
  list-style:none;user-select:none}
.sdigroup summary::-webkit-details-marker{display:none}
.sdigroup summary::before{content:'▸';color:var(--peach);font-size:13px;flex:0 0 auto;
  transition:transform .15s}
.sdigroup[open] summary::before{transform:rotate(90deg)}
.sdigroup summary:hover{background:#fdfbf6;border-radius:11px}
.sdiname{font-family:'Playfair Display',serif;font-weight:700;font-size:16px;flex:1 1 auto}
.sdilist{padding:2px 15px 13px 15px;border-top:1px solid #f0ece3}
.sdiitem{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;
  font-size:14px;line-height:1.45;cursor:pointer}
.sdiitem:hover{background:#fdfbf6}
.sdiitem.on{background:#fff6ee}
.sdiitem input{margin-top:3px;flex:0 0 auto;accent-color:var(--peach);width:16px;height:16px}


/* ---------------------------------------------------------------
   HOME SCREEN
   --------------------------------------------------------------- */
.hometop{margin-bottom:6px}
.hometop h2{font-size:33px;margin-bottom:6px}
.hometop p{font-size:17px;color:#5d5a53;margin:0}
.dogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:26px}
.docard{border:0;border-radius:var(--radius-lg);padding:20px 20px 22px;min-height:186px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  background:var(--paper);text-align:left;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s;
  display:flex;flex-direction:column;gap:6px}
.docard:hover{box-shadow:0 2px 4px rgba(52,79,88,.07), 0 16px 36px rgba(52,79,88,.13);
  transform:translateY(-2px)}
.docard.c1{background:#dfe9f6;color:#26414f}
.docard.c2{background:#f7e4d6;color:#6d4326}
.docard.c3{background:#f3edcf;color:#5c5013}
.docard.c4{background:#e4e6cf;color:#494f2b}
.docard.c1 .step,.docard.c2 .step,.docard.c3 .step,.docard.c4 .step{color:inherit;opacity:.55}
.docard.c1 h3,.docard.c2 h3,.docard.c3 h3,.docard.c4 h3{color:inherit;margin-top:20px}
.docard.c1 p,.docard.c2 p,.docard.c3 p,.docard.c4 p{color:inherit;opacity:.82}
/* Four bars again, with the one that matches this step lit. The tile is
   step 3 of 4 and the glyph says so without a word. */
.docard .rank{position:absolute;top:17px;right:17px;display:flex;align-items:flex-end;
  gap:2.5px;height:22px}
.docard .rank i{width:4.5px;border-radius:2.5px;display:block;background:currentColor;opacity:.22}
.docard .rank i.hot{opacity:1}
.docard .step{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--teal);font-family:var(--display)}
.docard h3{font-size:20px}
.docard p{margin:2px 0 0;font-size:14px;color:#6b6862;line-height:1.5}
.resume{background:var(--blush);border:0;border-left:4px solid #b9754a;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--shadow-sm);
  padding:18px 22px;margin-top:26px;display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap}
.resume h4{font-size:17px;margin-bottom:3px}
.resume p{margin:0;font-size:14px;color:#6d4326}
.homestats{display:flex;gap:0;flex-wrap:wrap;align-items:center;margin-top:26px;
  background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 8px}
.homestat{display:flex;align-items:center;gap:10px;padding:2px 22px;flex:0 0 auto}
.homestat+.homestat{border-left:1px solid var(--line)}
.homestat .n{font-size:28px;font-weight:700;line-height:1;font-family:var(--display);color:var(--teal)}
.homestat .l{font-size:12.5px;color:#6b6862;line-height:1.3;max-width:92px}
details.explainer{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
details.explainer summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--teal);list-style:none}
details.explainer summary::-webkit-details-marker{display:none}
details.explainer summary::before{content:'▸ ';color:var(--gold-deep)}
details.explainer[open] summary::before{content:'▾ '}
.steps{counter-reset:s;margin-top:18px;display:grid;gap:16px}
.stepitem{display:flex;gap:14px;align-items:flex-start}
.stepitem .num{flex:0 0 auto;font-size:13px;font-weight:800;letter-spacing:.08em;
  color:var(--teal);padding-top:4px;min-width:26px;font-family:var(--display)}
.stepitem h4{font-size:16px;margin-bottom:3px}
.stepitem p{margin:0;font-size:14.5px;color:#6b6862;line-height:1.55}

/* ---------------------------------------------------------------
   PRINT: the document look, unchanged
   --------------------------------------------------------------- */
@media print{
  body{font-family:var(--doc)}
  #printout h1,#printout h2,#printout h3,#printout h4{font-family:var(--display)}
  #printout .kicker{font-family:var(--doc)}
}

/* Due-date alerts + CSV import */
.duebox{border:0;border-left:4px solid #c98a3f;background:#fdf4e4;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--shadow-sm);
  padding:18px 22px;margin-top:26px}
.duebox.urgent{border-left-color:#a8484c;background:#fbeeee}
.duebox h4{font-size:17px;margin-bottom:8px}
.duerow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 0;border-top:1px solid rgba(0,0,0,.07);flex-wrap:wrap}
.duerow:first-of-type{border-top:0}
.duerow .who{font-weight:600}
.duewhen{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.duewhen.past{background:#f3d5d5;color:#7d3f3f}
.duewhen.soon{background:#f7e0cf;color:#7a4a24}
.duewhen.ok{background:#e6ead8;color:#4a5535}
.csvtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
.csvtable th{text-align:left;background:#f7f5ef;padding:7px 9px;border:1px solid var(--line);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--brown)}
.csvtable td{padding:7px 9px;border:1px solid var(--line)}
.csvtable tr.skip td{opacity:.5}
.csvflag{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:#fbeeee;color:#7d3f3f;white-space:nowrap}


/* =====================================================================
   THE FRAMEWORK BAND
   This used to be a bare "How the framework works" disclosure link at
   the bottom of the page, which made the thing the whole product is
   built on look like a footnote. Now it is a teal band carrying the
   four-bar scale.
   ===================================================================== */
details.explainer.band{background:var(--teal);border:0;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);margin-top:26px;overflow:hidden}
details.explainer.band>summary{display:flex;align-items:center;gap:22px;cursor:pointer;
  padding:22px 26px;list-style:none;color:#e8eff2}
details.explainer.band>summary::-webkit-details-marker{display:none}
details.explainer.band>summary::marker{content:""}
details.explainer.band>summary .scale{display:flex;align-items:flex-end;gap:6px;height:50px;flex:none}
details.explainer.band>summary .scale i{width:11px;border-radius:5.5px;display:block}
details.explainer.band>summary .scale i:nth-child(1){height:16px;background:#7fa8d2}
details.explainer.band>summary .scale i:nth-child(2){height:26px;background:#e2a06c}
details.explainer.band>summary .scale i:nth-child(3){height:37px;background:var(--gold)}
details.explainer.band>summary .scale i:nth-child(4){height:50px;background:var(--paper)}
details.explainer.band>summary .st{display:block}
details.explainer.band>summary .st strong{display:block;font-family:var(--display);
  font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
details.explainer.band>summary .st em{font-style:normal;font-size:13.5px;color:#c3d3da;line-height:1.5}
details.explainer.band>summary .cue{margin-left:auto;flex:none;background:var(--gold);color:#3a3416;
  border-radius:var(--radius);padding:11px 17px;font-weight:700;font-size:13.5px;font-family:var(--ui)}
details.explainer.band>summary:hover .cue{filter:brightness(1.06)}
details.explainer.band[open]>summary .cue::after{content:" \2013 close"}
details.explainer.band .steps{padding:4px 26px 26px;color:#dbe5e9}
details.explainer.band .steps h4{color:#fff}
details.explainer.band .steps p{color:#b9ccd4}
details.explainer.band .stepitem .num{color:var(--gold)}
@media (max-width:760px){
  details.explainer.band>summary{flex-wrap:wrap;gap:14px}
  details.explainer.band>summary .cue{margin-left:0}
}