/* ==========================================================================
   Field note instruments.

   Seven of the spine field notes carry a working instrument: a readiness check,
   a transition-ramp audit, an evaluation chooser, a contribution ladder, a
   dignity audit, a portfolio mixer, a summary meter. In the source build each
   was a filled card with a shadow and Georgia set on it. Here the page's whole
   visual argument is hairlines and set type, so the instruments are restated in
   that language rather than imported in their own.

   Same reasoning as note.css for why this is a shared file rather than a block
   copied into each page: these are same-shaped pages within one property, and
   the alternative is fixing every bug seven times.

   Loaded AFTER note.css, which owns the tokens. Nothing here defines a colour;
   every value resolves through --ink, --slate, --marine, --amber, --line and
   --wash, so dark mode and the theme toggle are inherited rather than repeated.

   The class names are the source build's, deliberately. The instruments' page
   scripts hook them by name, and renaming markup the script depends on is how a
   port silently ships a tool that no longer works.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The container. Not a card: a rule above, a rule below, and room to breathe;
   the same treatment the publication block gets, because both are set-off
   apparatus rather than prose.
   -------------------------------------------------------------------------- */
.tool, .diagnostic{
  border-top:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  padding:calc(var(--unit)*4) 0;
  margin:calc(var(--unit)*7) 0;
}
.tool h3, .diagnostic h3{
  font-family:var(--serif); font-size:var(--fs-lg); font-weight:600;
  line-height:1.3; margin:0 0 calc(var(--unit)*1.25); letter-spacing:-.006em;
}
.tool .intro, .tool .tool-intro, .diagnostic .intro{
  font-size:var(--fs-sm); line-height:1.55; color:var(--slate);
  margin:0 0 calc(var(--unit)*3); max-width:36rem;
}

/* Each question is a rule and a line of type. */
.tool fieldset, .diagnostic fieldset{
  border:0; border-top:var(--hair) solid var(--line);
  padding:calc(var(--unit)*3) 0 calc(var(--unit)*0.5); margin:0;
}
.tool legend, .diagnostic legend{
  font-weight:400; color:var(--ink); font-size:var(--fs-base);
  line-height:1.5; padding:0; max-width:36rem;
}
/* The lens or domain label. Same eyebrow as .meta; set on its own line so the
   question reads as a sentence rather than as a label with a sentence stuck to it. */
.diagnostic .lens, .tool .domain, .tool .lens{
  display:block;
  font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; margin:0 0 calc(var(--unit)*0.75);
  text-transform:uppercase; color:var(--slate); font-weight:400;
}
.tool .legend-hint{
  display:block; font-size:var(--fs-2xs); line-height:1.5;
  color:var(--slate); margin-top:calc(var(--unit)*0.75); font-weight:400;
  text-transform:none; letter-spacing:normal;
}

/* --------------------------------------------------------------------------
   Choices. Radios rendered as tappable targets. Selected state is carried by a
   marine hairline and a wash rather than by a filled block, so a chosen answer
   reads as marked rather than as a button that has been pressed.
   -------------------------------------------------------------------------- */
.choices{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--unit)*1.25); margin-top:calc(var(--unit)*2);
  max-width:36rem;
}
.choices input{position:absolute; opacity:0; pointer-events:none}
.choices label{
  display:block; text-align:center; cursor:pointer;
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
  padding:calc(var(--unit)*1.75) calc(var(--unit)*1.5);
  background:transparent; color:var(--slate);
  font-family:var(--serif); font-size:var(--fs-sm); line-height:1.35;
  transition:color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.choices label:hover{color:var(--ink); border-color:var(--slate)}

/* Two markup shapes, both present in the source build: the readiness check puts the
   input beside its label, the dignity audit puts it inside. Styling only the first
   left the second with a hidden radio and no visible selection at all; a reader
   could answer ten questions and see nothing change.

   The two selectors are kept in SEPARATE rules on purpose. A selector list is not
   forgiving: one member a browser cannot parse invalidates the whole rule, so
   pairing them would mean an engine without :has() losing the sibling rule too,
   and breaking the instruments that currently work. */
.choices input:focus-visible + label{outline:2px solid var(--marine); outline-offset:2px}
.choices input:checked + label{
  background:var(--wash); color:var(--ink);
  border-color:var(--marine);
  box-shadow:inset 0 0 0 var(--hair) var(--marine);
}
.choices label:has(input:focus-visible){outline:2px solid var(--marine); outline-offset:2px}
.choices label:has(input:checked){
  background:var(--wash); color:var(--ink);
  border-color:var(--marine);
  box-shadow:inset 0 0 0 var(--hair) var(--marine);
}
/* And where :has() is genuinely unavailable, a nested radio has no way to show its
   own state, so it stops hiding and shows the control instead. Only the nested
   shape matches > input; the sibling shape is untouched and keeps its card. */
@supports not selector(:has(*)){
  .choices label > input{
    position:static; opacity:1; pointer-events:auto;
    margin-right:.5em; vertical-align:-.1em; accent-color:var(--marine);
  }
  .choices label{text-align:left}
}

/* Checkbox lists, where the checks are the instrument. */
.check-grid{
  display:flex; flex-direction:column; gap:calc(var(--unit)*1.25);
  margin-top:calc(var(--unit)*2); max-width:36rem;
}
.check-grid label{
  display:flex; gap:calc(var(--unit)*2); align-items:flex-start; cursor:pointer;
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
  padding:calc(var(--unit)*2) calc(var(--unit)*2.25);
  color:var(--slate); font-size:var(--fs-sm); line-height:1.5;
  transition:color 120ms ease, border-color 120ms ease;
}
.check-grid label:hover{border-color:var(--slate)}
.check-grid input{margin-top:.22em; width:1rem; height:1rem; flex:none; accent-color:var(--marine)}
.check-grid input:focus-visible{outline:2px solid var(--marine); outline-offset:2px}
.check-grid input:checked + span{color:var(--ink)}

/* Free-text builders. */
.tool-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--unit)*2.5); margin-top:calc(var(--unit)*1.5); max-width:36rem;
}
.tool-grid .field{display:flex; flex-direction:column; gap:calc(var(--unit)*1)}
.field label{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate); font-weight:400;
}
.field input, .field textarea{
  font-family:var(--serif); font-size:var(--fs-sm); line-height:1.5;
  color:var(--ink); background:var(--wash);
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
  padding:calc(var(--unit)*1.5) calc(var(--unit)*1.75); width:100%;
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--marine); outline-offset:1px; border-color:var(--marine);
}

/* Sliders. */
.slider-row{
  display:grid; grid-template-columns:9rem 1fr 3.2rem;
  gap:calc(var(--unit)*2.5); align-items:center;
  margin:calc(var(--unit)*2.5) 0; max-width:36rem;
}
.slider-row label{
  font-family:var(--serif); font-size:var(--fs-sm); line-height:1.4;
  color:var(--ink); letter-spacing:normal; text-transform:none;
}
.slider-row input{width:100%; accent-color:var(--marine)}
.slider-row output{
  text-align:right; font-variant-numeric:tabular-nums;
  font-size:var(--fs-sm); color:var(--ink);
}

/* --------------------------------------------------------------------------
   Actions. The primary action is the one deliberate fill on the page; marine
   at button size is small enough to stay quiet and solid enough to be found.
   -------------------------------------------------------------------------- */
.tool-actions, .diagnostic-actions{
  display:flex; gap:calc(var(--unit)*2); flex-wrap:wrap;
  margin-top:calc(var(--unit)*3.5);
}
.tool button, .diagnostic button, .tool-report button{
  appearance:none; cursor:pointer;
  font-family:var(--serif); font-size:var(--fs-sm); line-height:1.2;
  border:var(--hair) solid var(--marine); border-radius:var(--radius-sm);
  padding:calc(var(--unit)*1.75) calc(var(--unit)*2.75);
  background:var(--marine); color:var(--on-marine);
  transition:opacity 120ms ease;
}
.tool button:hover, .diagnostic button:hover, .tool-report button:hover{opacity:.88}
.tool button.secondary, .diagnostic button.secondary{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.tool button.secondary:hover, .diagnostic button.secondary:hover{border-color:var(--slate); opacity:1}
.tool button:disabled, .diagnostic button:disabled{opacity:.4; cursor:not-allowed}

/* --------------------------------------------------------------------------
   The readout. A wash panel inside a hairline, because a result has to be
   findable after the page has scrolled; everything inside it is set type.
   -------------------------------------------------------------------------- */
.tool-report, .diagnostic .report{
  margin-top:calc(var(--unit)*3.5);
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
  background:var(--wash);
  padding:calc(var(--unit)*3);
  scroll-margin-top:calc(var(--unit)*6);
}
.tool-report[hidden], .diagnostic .report[hidden]{display:none}
.report-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(var(--unit)*3);
}
.report-top .band, .tool-report .band, .report .band{
  font-family:var(--serif); font-size:var(--fs-lg); font-weight:600;
  line-height:1.3; color:var(--ink); letter-spacing:-.006em;
}
.tool-report .score, .report .score{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tool-report p, .tool-report li, .report p, .report li{
  font-size:var(--fs-sm); line-height:1.55; color:var(--ink);
}
.tool-report p, .report p{margin:calc(var(--unit)*1.75) 0}
.tool-report p:last-child, .report p:last-child{margin-bottom:0}
.tool-report h4, .report h4{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  font-weight:400; margin:calc(var(--unit)*3) 0 calc(var(--unit)*1);
}
.tool-report ul, .report ul{padding-left:1.1rem; margin:calc(var(--unit)*1.5) 0}
.tool-report strong, .report strong{color:var(--ink); font-weight:600}

/* Per-lens or per-domain figures. Cells divided by rules, numbers set tabular. */
.lens-scores, .score-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:calc(var(--unit)*2); margin:calc(var(--unit)*3) 0;
}
.lens-score, .score-box{
  border-top:var(--hair) solid var(--line);
  padding-top:calc(var(--unit)*1.25);
}
.lens-score b, .score-box b{
  display:block; font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate); font-weight:400;
}
.lens-score span, .score-box span{
  font-family:var(--serif); font-size:var(--fs-lg); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.score-box small{display:block; margin-top:calc(var(--unit)*0.5); font-size:var(--fs-2xs); color:var(--slate)}

/* Horizontal bars. */
.bars{display:flex; flex-direction:column; gap:calc(var(--unit)*1.5); margin:calc(var(--unit)*3) 0}
.bar-row{
  display:grid; grid-template-columns:8.5rem 1fr 2.8rem;
  gap:calc(var(--unit)*2.5); align-items:center;
  font-size:var(--fs-sm); color:var(--slate);
}
.bar-row > div{
  background:transparent; border:var(--hair) solid var(--line);
  border-radius:999px; height:.5rem; overflow:hidden;
}
.bar-row i{display:block; height:100%; background:var(--marine); border-radius:999px}
.bar-row b{
  color:var(--ink); text-align:right; font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* A meter, used where a count is the whole readout. */
.es-meter, .meter{
  height:.4rem; border-radius:999px; background:transparent;
  border:var(--hair) solid var(--line); overflow:hidden;
  margin:0 0 calc(var(--unit)*2);
}
.es-meter i, .meter i{display:block; height:100%; background:var(--marine); border-radius:999px; transition:width 200ms ease}
.es-readout{
  margin-top:calc(var(--unit)*3.5);
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
  background:var(--wash); padding:calc(var(--unit)*3);
}
.es-readout .es-count{
  display:block; font-family:var(--serif); font-size:var(--fs-lg);
  color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums;
}
.es-readout .es-verdict{font-size:var(--fs-sm); line-height:1.5; color:var(--ink); margin:calc(var(--unit)*1.25) 0 0}
.es-readout p.es-note{font-size:var(--fs-2xs); line-height:1.55; color:var(--slate); margin:calc(var(--unit)*1.75) 0 0}

/* Claim tiers. */
.claim-band{font-family:var(--serif); font-size:var(--fs-lg); font-weight:600; color:var(--ink); line-height:1.3}
.claim-tier{
  display:block; font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  margin-bottom:calc(var(--unit)*0.75);
}

/* The chain readout: four steps, the reached one marked by a marine rule. */
.chain{display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--unit)*2); margin:calc(var(--unit)*3) 0}
.chain-step{border-top:var(--hair) solid var(--line); padding-top:calc(var(--unit)*1.25)}
.chain-step b{
  display:block; font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  font-weight:400; margin-bottom:calc(var(--unit)*0.5);
}
.chain-step span{font-size:var(--fs-sm); line-height:1.45; color:var(--ink)}
.chain-step.active{border-top-color:var(--marine); border-top-width:2px}
.chain-step.active b{color:var(--marine)}

/* The limit that travels with every readout. */
.caution, .tool-note{
  font-size:var(--fs-2xs); line-height:1.55; color:var(--slate);
  border-top:var(--hair) solid var(--line);
  padding-top:calc(var(--unit)*2); margin-top:calc(var(--unit)*2.5);
}

/* --------------------------------------------------------------------------
   Prose apparatus the spine notes use alongside the instruments.
   -------------------------------------------------------------------------- */

/* Figures. Rules top and bottom; the caption is set as a caption, not shrunk. */
.figure{
  border-top:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  padding:calc(var(--unit)*3) 0;
  margin:calc(var(--unit)*6) 0;
}
.figure h4{
  font-family:var(--serif); font-size:var(--fs-base); font-weight:600;
  line-height:1.35; margin:0 0 calc(var(--unit)*0.75);
}
.figure .cap{
  font-size:var(--fs-sm); line-height:1.5; color:var(--slate);
  margin:0 0 calc(var(--unit)*2.5); max-width:34rem;
}
.figure svg{width:100%; height:auto; display:block; overflow:visible}
.figure .legend{
  display:flex; gap:calc(var(--unit)*4); flex-wrap:wrap;
  margin-top:calc(var(--unit)*2.5); font-size:var(--fs-2xs); color:var(--slate);
}
.figure .legend i{
  display:inline-block; width:1.3rem; height:2px; border-radius:1px;
  margin-right:calc(var(--unit)*1.25); vertical-align:middle;
}

/* Side-by-side comparisons. Marked by an eyebrow and a rule, not by red and green;
   the palette has no red and no green, and colour alone was never carrying it. */
.demo, .swap{display:grid; gap:calc(var(--unit)*3); margin:calc(var(--unit)*5) 0}
@media(min-width:34rem){.demo, .swap{grid-template-columns:1fr 1fr}}
.demo .side, .swap .side{
  border-top:var(--hair) solid var(--line);
  padding:calc(var(--unit)*2) 0 0 calc(var(--unit)*2.5);
  border-left:2px solid var(--line);
  font-size:var(--fs-sm); line-height:1.55;
}
.demo .side.no, .swap .side.no{border-left-color:var(--amber)}
.demo .side.yes, .swap .side.yes{border-left-color:var(--marine)}
.demo .side b, .swap .side b{
  display:block; font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; font-weight:400;
  color:var(--slate); margin-bottom:calc(var(--unit)*1.25);
}
.demo .side.no b, .swap .side.no b{color:var(--amber)}
.demo .side.yes b, .swap .side.yes b{color:var(--marine)}
.demo .side p, .swap .side p{margin:0; color:var(--ink)}

/* Numbered sequences: the ladder and the steps. Rules and set numerals; the
   source build put each rung in a filled square, which is exactly the card
   language this page is arguing against. */
.ladder, .steps{list-style:none; margin:calc(var(--unit)*4) 0; padding:0}
.ladder li, .steps li{
  display:grid; grid-template-columns:2.2rem 1fr; gap:calc(var(--unit)*2.5);
  align-items:baseline;
  border-top:var(--hair) solid var(--line);
  padding:calc(var(--unit)*2.5) 0; margin:0;
}
.ladder li:last-child, .steps li:last-child{border-bottom:var(--hair) solid var(--line)}
.steps{counter-reset:step}
.steps li{counter-increment:step}
.steps li:before{
  content:counter(step);
  font-family:var(--serif); font-size:var(--fs-sm); color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.ladder .rung{
  font-family:var(--serif); font-size:var(--fs-sm); color:var(--slate);
  font-variant-numeric:tabular-nums; font-weight:400;
  background:none; display:block; height:auto; width:auto;
}
.ladder b, .steps b{color:var(--ink); font-weight:600}
.ladder span, .steps span{display:block; color:var(--slate); font-size:var(--fs-sm); margin-top:calc(var(--unit)*0.75)}

/* A worked template, set off the way a carried line is. */
.tmpl{
  border-left:2px solid var(--marine);
  padding:calc(var(--unit)*0.5) 0 calc(var(--unit)*0.5) calc(var(--unit)*3);
  margin:calc(var(--unit)*3.5) 0; max-width:34rem;
  font-size:var(--fs-base); line-height:1.55; color:var(--ink);
}
.tmpl b{
  display:block; font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  font-weight:400; margin-bottom:calc(var(--unit)*1);
}

/* Standalone figures for a single number. */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--unit)*3); margin:calc(var(--unit)*5) 0}
.stat{border-top:var(--hair) solid var(--line); padding-top:calc(var(--unit)*1.5)}
.stat .n{
  display:block; font-family:var(--serif); font-size:1.6rem; line-height:1.1;
  color:var(--ink); font-variant-numeric:tabular-nums;
  text-transform:none; letter-spacing:-.012em; margin:0;
}
.stat .l{font-size:var(--fs-sm); line-height:1.45; color:var(--slate); margin-top:calc(var(--unit)*1.25)}

/* The proportion bar. Four bands that have to be told apart without a legend
   colour each; marine, amber, slate and ink at the weights the palette allows. */
.portfolio-bars{
  display:flex; height:2.4rem; overflow:hidden;
  margin:calc(var(--unit)*3) 0 calc(var(--unit)*2);
  border:var(--hair) solid var(--line); border-radius:var(--radius-sm);
}
/* The band label clips rather than spills. The source build set font-size to 0 and
   restored it only for widths beginning with a 2, which is a rule that reads the
   string in a style attribute; it stops working the moment a band is 19% or 31%.
   Clipping is honest at every width and needs no rule about the number. */
.portfolio-bars span{
  display:grid; place-items:center; min-width:0;
  overflow:hidden; white-space:nowrap; padding:0 .25em;
  font-family:var(--serif); font-size:var(--fs-3xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-marine);
  transition:width 200ms ease;
}
.portfolio-bars .anchor{background:var(--marine)}
.portfolio-bars .practice{background:var(--slate)}
.portfolio-bars .assets{background:var(--amber)}
.portfolio-bars .options{background:var(--ink); color:var(--paper)}

/* The optional aside. A details element, ruled rather than boxed. */
.deeper{
  border-top:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  margin:calc(var(--unit)*5) 0;
}
.deeper > summary{
  list-style:none; cursor:pointer;
  padding:calc(var(--unit)*2.25) 0;
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  display:flex; gap:calc(var(--unit)*2.5); align-items:center;
}
.deeper > summary:hover{color:var(--ink)}
.deeper > summary::-webkit-details-marker{display:none}
.deeper > summary .plus{margin-left:auto; color:var(--slate); transition:transform 200ms ease}
.deeper[open] > summary .plus{transform:rotate(45deg)}
.deeper .d{padding:0 0 calc(var(--unit)*2.5); font-size:var(--fs-sm); line-height:1.6; color:var(--ink)}
.deeper .d p{margin:0 0 calc(var(--unit)*2); color:var(--ink); font-size:var(--fs-sm)}
.deeper .d p:last-child{margin-bottom:0}

/* Source markers in the body. */
.cite{
  font-size:.62em; color:var(--marine); text-decoration:none;
  vertical-align:super; line-height:0; margin-left:1px; white-space:nowrap;
}
.cite:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Small screens. The three-across grids stack; nothing else changes, because
   the layout was rules and type to begin with.
   -------------------------------------------------------------------------- */
@media(max-width:34rem){
  .choices{grid-template-columns:1fr}
  .choices label{text-align:left}
  .tool-grid{grid-template-columns:1fr}
  .report-top{display:block}
  .tool-report .score, .report .score{display:block; margin-top:calc(var(--unit)*1)}
  .chain{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr}
  .bar-row{grid-template-columns:6rem 1fr 2.4rem; gap:calc(var(--unit)*1.5)}
  .slider-row{grid-template-columns:6.5rem 1fr 2.6rem; gap:calc(var(--unit)*1.5)}
}