@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400;1,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:        #17191F;
  --ink-soft:   #4B515E;
  --ink-mute:   #7A8090;
  --blue:       #1F3F94;
  --blue-mid:   #2F58AE;
  --rule:       #8FA5D6;
  --rule-soft:  #C3D0EA;
  --panel:      #E9EEF9;
  --panel-deep: #DCE5F6;
  --cream:      #F2F0E8;
  --paper:      #FBFAF7;
  --flag:       #B0872F;
  --max: 46rem;
  --step: 1.15rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.6 'Spectral',Georgia,'Times New Roman',serif;
  padding-bottom:4rem;
}

/* ---------- masthead ---------- */
.mast{
  border-bottom:1px solid var(--rule-soft);
  background:var(--cream);
}
.mast-in{
  max-width:var(--max);margin:0 auto;padding:.85rem 1.25rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.wordmark{
  font:600 .95rem/1 'Spectral',Georgia,serif;color:var(--blue);
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
}
.wordmark span{color:var(--ink-mute);letter-spacing:.04em}
.mast-ch{
  font:500 .7rem/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
}

/* ---------- page frame ---------- */
.page{max-width:var(--max);margin:0 auto;padding:2.5rem 1.25rem 0;position:relative}

/* signature: workbook chapter numeral in the margin */
.rail{
  position:absolute;top:1.6rem;left:-3.6rem;
  font:700 4.5rem/1 'Spectral',Georgia,serif;
  color:transparent;-webkit-text-stroke:1px var(--rule-soft);
  user-select:none;pointer-events:none;
}
@media (max-width:64rem){.rail{display:none}}

.kicker{
  font:500 .72rem/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-mid);
  margin:0 0 .7rem;
}
h1{
  font:700 clamp(1.9rem,5.2vw,2.6rem)/1.12 'Spectral',Georgia,serif;
  color:var(--blue);margin:0 0 .9rem;letter-spacing:-.005em;
}
.hr{height:1px;background:var(--rule);border:0;margin:0 0 1.15rem}
.prompt{
  font-style:italic;font-size:1.09rem;line-height:1.62;color:var(--ink);
  margin:0 0 1.1rem;
}
.note{
  font:400 .95rem/1.55 'IBM Plex Sans',system-ui,sans-serif;
  color:var(--ink-soft);margin:0 0 2rem;
}
.note b{color:var(--blue);font-weight:600}

/* ---------- work surface ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--rule-soft);
  padding:1.5rem 1.5rem 1.7rem;
  margin:0 0 1.1rem;
}
.card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 1.25rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.card-title{
  font:600 1.02rem/1.25 'Spectral',Georgia,serif;color:var(--blue);margin:0;
}
.card-num{
  font:500 .68rem/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
}
.drop{
  background:none;border:0;padding:.1rem .35rem;margin:-.1rem -.35rem;cursor:pointer;
  font:500 .68rem/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);
}
.drop:hover{color:var(--blue)}

.group{
  font:600 .7rem/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-mid);
  margin:1.7rem 0 .9rem;
}
.group:first-child{margin-top:0}

.field{margin:0 0 1.35rem}
.field:last-child{margin-bottom:0}
label,.lbl{
  display:block;
  font:500 .82rem/1.4 'IBM Plex Sans',system-ui,sans-serif;
  color:var(--ink-soft);margin:0 0 .1rem;
}
.help{
  font:400 .78rem/1.45 'IBM Plex Sans',system-ui,sans-serif;
  color:var(--ink-mute);margin:0 0 .35rem;
}

/* signature: everything you type sits on a ruled line */
.ruled,.ruled-area,select.pick{
  width:100%;display:block;
  font:400 1.02rem/1.9 'Spectral',Georgia,serif;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:.15rem 0;margin:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ruled-area{
  border-bottom:0;padding:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.9em - 1px),var(--rule) calc(1.9em - 1px),var(--rule) 1.9em);
  background-attachment:local;
  resize:vertical;min-height:5.7em;
}
.ruled:focus,.ruled-area:focus,select.pick:focus{
  outline:0;border-bottom-color:var(--blue);
  box-shadow:0 1px 0 0 var(--blue);
}
.ruled-area:focus{box-shadow:none;outline:2px solid var(--blue);outline-offset:4px}
.ruled::placeholder,.ruled-area::placeholder{color:#AFB6C4;font-style:italic}

.stem{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font:400 1.02rem/1.9 'Spectral',Georgia,serif;
}
.stem .pre{white-space:nowrap;color:var(--ink-soft)}
.stem .ruled{flex:1 1 12rem;width:auto}

select.pick{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231F3F94' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right .2rem center;padding-right:1.6rem;
}

/* 1–5 scale */
.scale{display:flex;gap:.4rem;margin:.5rem 0 .45rem}
.scale input{position:absolute;opacity:0;width:1px;height:1px}
.scale label{
  flex:1;text-align:center;cursor:pointer;margin:0;
  border:1px solid var(--rule);background:var(--paper);color:var(--blue);
  font:600 1.05rem/1 'Spectral',Georgia,serif;padding:.7rem 0;
  transition:background .15s ease,color .15s ease;
}
.scale label:hover{background:var(--panel-deep)}
.scale input:checked + label{background:var(--blue);color:#fff;border-color:var(--blue)}
.scale input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px}
.anchors{
  display:flex;justify-content:space-between;gap:1rem;
  font:400 .76rem/1.35 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink-mute);
}
.anchors span:last-child{text-align:right}

/* two-up rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
@media (max-width:34rem){.row2{grid-template-columns:1fr}}

/* ---------- actions ---------- */
.addwrap{margin:.2rem 0 2rem}
.btn{
  font:500 .78rem/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.06em;cursor:pointer;
  background:var(--paper);color:var(--blue);
  border:1px solid var(--rule);padding:.62rem 1.05rem;border-radius:0;
  transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--panel-deep);border-color:var(--blue)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-solid{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-solid:hover{background:#17307a;border-color:#17307a}

.actions{
  margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
}
.status{
  margin-left:auto;
  font:400 .76rem/1.4 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink-mute);
}
.status.on{color:var(--blue-mid)}

footer{
  max-width:var(--max);margin:3rem auto 0;padding:0 1.25rem;
  font:400 .75rem/1.6 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink-mute);
}
footer a{color:var(--ink-mute)}

/* ---------- index ---------- */
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.toc li{border-bottom:1px solid var(--rule-soft)}
.toc a{
  display:flex;align-items:baseline;gap:1rem;padding:1.05rem .25rem;
  text-decoration:none;color:var(--ink);
}
.toc a:hover{background:var(--panel)}
.toc .ch{
  font:500 .68rem/1.6 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  width:5.2rem;flex:none;
}
.toc .nm{font:600 1.05rem/1.35 'Spectral',Georgia,serif;color:var(--blue)}
.toc .ds{
  display:block;font:400 .84rem/1.5 'IBM Plex Sans',system-ui,sans-serif;
  color:var(--ink-soft);margin-top:.15rem;font-weight:400;
}

/* ---------- motion ---------- */
.card,.actions{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.actions{animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- print ---------- */
@media print{
  body{background:#fff;padding:0;font-size:11pt}
  .mast,.actions,.addwrap,.drop,.note{display:none!important}
  .page{max-width:100%;padding:0}
  .rail{display:none}
  .card{background:#fff;border:1px solid #999;page-break-inside:avoid;padding:.9rem 1rem}
  .ruled,.ruled-area,select.pick{border-bottom:1px solid #999}
  .ruled-area{background-image:none;border-bottom:1px solid #999;min-height:auto;height:auto}
  .scale input:checked + label{background:#ddd!important;color:#000!important;-webkit-print-color-adjust:exact}
  h1{font-size:20pt}
  footer{margin-top:1rem}
}