/* The Library (/library and its items). Loaded after /css/tokens.css and /css/app.css on Library
   pages only, so it adds to the site shell and never changes another page. Tokens only, like
   app.css: this file adds no colours of its own. The print sheet at the bottom fits each card
   (.print-card) on one US letter page, on a light background, with the site chrome hidden. */

/* Anything the script has not unhidden stays hidden, even where a class sets a display. */
[hidden] {
  display: none !important;
}

.library-hero .eyebrow a {
  color: inherit;
}

/* Tool tables on phones (review L10): each row becomes a labelled group, so no column is cut off
   mid-field. The header row is kept for screen readers; the inputs carry their own labels too. */
@media (max-width: 599px) {
  .table-wrap .tool-table,
  .tool-table tbody {
    display: block;
    min-width: 0;
  }

  .tool-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tool-table tr {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .tool-table td {
    display: grid;
    gap: var(--space-1);
    padding: 0;
    border: 0;
  }

  .tool-table td::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
  }

  .tool-table input,
  .tool-table select {
    width: 100%;
  }
}

/* The printed mark (review Pr2): print only. */
.print-mark {
  display: none;
}

/* Index (review L6): each section a two-column list of title-plus-one-line rows, no boxes. */
.library-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-row {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.library-row h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
}

.library-row h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration-color: var(--control-border);
}

.library-row h3 a:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.library-row-promise,
.library-single span {
  color: var(--ink-2);
  max-width: 60ch;
}

.library-single a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  text-decoration-color: var(--control-border);
}

.library-single span {
  display: block;
  margin-top: var(--space-1);
}

@media (max-width: 719px) {
  .library-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* Older card grid (kept for any page still using it) */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.library-card:hover,
.library-card:focus-within {
  border-color: var(--line-strong);
}

.library-card h2,
.library-card h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
}

.library-card h2 a,
.library-card h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

/* The whole card is the link's target; the link stays the only focusable element. */
.library-card h2 a::after,
.library-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.library-card h2 a:hover,
.library-card h3 a:hover {
  color: var(--accent-hover);
}

.library-card p:last-child {
  color: var(--ink-2);
}

.library-more {
  margin-top: var(--space-8);
  max-width: 68ch;
}

/* The close of every item */
.library-foot-inner {
  display: grid;
  gap: var(--space-3);
}

.library-next {
  color: var(--ink-2);
  max-width: 72ch;
}

.library-next a,
.reading-for a {
  font-weight: var(--type-label-weight);
}

/* Cards (never-paste, prompt starter) */
.print-card {
  display: grid;
  gap: var(--space-5);
  max-width: 880px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.print-card h2 {
  font-size: var(--type-h2-size);
}

.card-intro {
  color: var(--ink-2);
  max-width: 68ch;
}

.card-subhead {
  margin-top: var(--space-2);
}

.card-points {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
}

.card-tip {
  font-weight: var(--type-label-weight);
}

.card-source {
  color: var(--ink-3);
  font-size: var(--type-small-size);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Inline labels ("Why", "Instead", "Template") in ink, not green: labels aren't actions (review Co1). */
.never-tag {
  display: inline-block;
  margin-right: var(--space-1);
  color: var(--ink);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.never-list,
.prompt-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.never-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.never-row h3 {
  font-size: var(--type-body-size);
  line-height: var(--type-small-line);
  font-weight: var(--type-h2-weight);
}

.never-examples,
.never-why,
.never-instead {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
}

.never-examples {
  margin-top: var(--space-1);
  color: var(--ink-2);
}

.never-why .never-tag,
.never-instead .never-tag {
  display: block;
}

@media (max-width: 719px) {
  .never-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

.prompt-item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.prompt-item h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.prompt-num {
  color: var(--ink-3);
  font-family: var(--font-display);
}

.prompt-use {
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

.prompt-template {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.prompt-example {
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

/* The tree */
.tree-tool {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.tree-panel {
  display: grid;
  gap: var(--space-4);
}

.tree-q {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
}

.tree-hint {
  color: var(--ink-2);
}

.tree-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tree-actions .btn {
  min-width: 96px;
}

.tree-result,
.tree-outcome {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.tone-stop {
  border-left-color: var(--danger);
}

.tone-caution {
  border-left-color: var(--warning);
}

.tone-go {
  border-left-color: var(--success);
}

.tree-trail-wrap {
  display: grid;
  gap: var(--space-2);
}

.tree-trail {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-6);
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

.tree-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-node {
  display: grid;
  gap: var(--space-2);
  scroll-margin-top: var(--space-6);
}

.tree-routes a,
.tree-outcome {
  scroll-margin-top: var(--space-6);
}

.tree-outcomes {
  display: grid;
  gap: var(--space-4);
}

/* Glossary */
.glossary {
  display: grid;
  gap: 0;
  margin: 0;
}

.glossary-entry {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.glossary dt {
  font-family: var(--font-display);
  font-weight: var(--type-h3-weight);
  scroll-margin-top: var(--space-6);
}

.glossary dd {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 719px) {
  .glossary-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* Reading lists */
.reading-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reading-entry {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
}

.reading-title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
}

.reading-source {
  color: var(--ink-3);
  font-size: var(--type-small-size);
  font-weight: var(--type-label-weight);
}

/* Index sections */
.library-section + .library-section {
  padding-top: 0;
}

.library-section-title {
  margin-bottom: var(--space-5);
}

/* v2 pages: body blocks (start here, patterns, how-tos, prompts, tool intros) */
.lib-list,
.lib-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
}

.copy-box {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.copy-label {
  color: var(--ink-3);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.copy-text {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

.fill-in {
  padding: 0 2px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: inherit;
}

.copy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.copy-actions:has(> [data-copy][hidden]):has(> .copy-status:empty) {
  display: none;
}

.example-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.example-text {
  color: var(--ink-2);
  white-space: pre-line;
}

.callout {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.callout-caution {
  border-left-color: var(--warning);
}

.callout-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.checklist {
  display: grid;
  gap: var(--space-3);
}

.checklist-items {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.checklist-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.checklist-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.lib-sources,
.where-to-paste {
  display: grid;
  gap: var(--space-3);
}

.source-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

.paste-where {
  display: grid;
  gap: 0;
  margin: 0;
}

.paste-where-entry {
  display: grid;
  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.paste-where dt {
  font-weight: var(--type-label-weight);
}

.paste-where dd {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 719px) {
  .paste-where-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

.lib-after {
  margin-top: var(--space-6);
}

.lib-card .lib-list,
.lib-card .lib-steps {
  padding-left: var(--space-6);
}

.prompt-page > section {
  display: grid;
  gap: var(--space-3);
}

.prompt-page > section h2 {
  margin-top: var(--space-4);
}

[data-add-row] {
  justify-self: start;
}

/* Related links */
.related-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
}

.related-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding-block: var(--space-3);
}

.related-item a {
  font-weight: var(--type-label-weight);
}

.related-kind {
  color: var(--ink-3);
  font-size: var(--type-label-size);
}

.related-promise {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

/* Tools */
.tool-intro {
  margin-bottom: var(--space-8);
}

.tool-sheet-body,
.tool-fields {
  display: grid;
  gap: var(--space-5);
}

.tool-sheet textarea,
.tool-sheet input[type="text"],
.tool-sheet input[type="date"],
.tool-sheet select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.tool-sheet textarea {
  min-height: 5.5em;
  resize: vertical;
}

.tool-sheet textarea:hover,
.tool-sheet input:hover,
.tool-sheet select:hover {
  border-color: var(--ink-3);
}

.tool-table {
  min-width: 640px;
}

.tool-table td {
  padding: var(--space-2) var(--space-3);
}

.choice-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.choice-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}

.choice-inline input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.sorter-questions {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-6);
}

.sorter-question {
  font-weight: var(--type-label-weight);
}

.sorter-rule {
  max-width: 68ch;
  color: var(--ink-2);
}

.ledger-key {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--type-small-size);
}

.ledger-key div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ledger-key dt {
  color: var(--ink);
  font-weight: var(--type-label-weight);
}

.ledger-key dd {
  margin: 0;
}

.tool-output {
  display: grid;
  gap: var(--space-3);
}

.tool-output .copy-text {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

/* Print. tokens.css already switches every colour to the light set under @media print; this sheet
   keeps only the card, sized to fit one US letter page. */
@page {
  size: letter;
  margin: 0.5in;
}

@media print {
  html,
  body {
    background: var(--surface);
    color: var(--ink);
  }

  .no-print,
  .site-header,
  .site-footer,
  .skip-link,
  .library-hero,
  .library-foot,
  .card-actions,
  [data-print] {
    display: none !important;
  }

  main .block {
    padding: 0;
    border: 0;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .print-card {
    max-width: none;
    gap: 6pt;
    padding: 0;
    border: 0;
    border-top: 3pt solid var(--accent);
    border-radius: 0;
    padding-top: 8pt;
    font-size: 9.5pt;
    line-height: 1.3;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-card h2 {
    font-size: 17pt;
  }

  .print-card h3 {
    font-size: 10.5pt;
    line-height: 1.25;
  }

  .never-row {
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 10pt;
    padding-block: 4pt;
    break-inside: avoid;
  }

  .never-examples,
  .never-why,
  .never-instead,
  .prompt-use,
  .prompt-example,
  .card-source {
    font-size: 8.5pt;
    line-height: 1.3;
  }

  .never-tag {
    font-size: 7.5pt;
  }

  .prompt-item {
    gap: 2pt;
    padding-block: 4pt;
    break-inside: avoid;
  }

  .prompt-template {
    padding: 3pt 6pt;
  }

  .card-points {
    gap: 1pt;
  }

  /* v2 cards and tools */
  .library-related,
  .copy-actions,
  .checklist-note,
  .tool-intro,
  [data-add-row] {
    display: none !important;
  }

  .copy-box,
  .example-box,
  .callout {
    padding: 4pt 6pt;
    break-inside: avoid;
  }

  .copy-text {
    font-size: 8.5pt;
    line-height: 1.3;
  }

  .lib-card .table-wrap,
  .tool-sheet .table-wrap {
    overflow: visible;
  }

  /* Tighter v2 cards (review Pr1): 9pt type and compact table cells. */
  .lib-card {
    font-size: 9pt;
  }

  .lib-card td,
  .lib-card th {
    padding: 3pt 6pt;
  }

  /* Blank worksheet cells print as write-in boxes, without date placeholders or chevrons (review Pr3). */
  .tool-sheet input,
  .tool-sheet select {
    appearance: none;
    -webkit-appearance: none;
    color: transparent;
    background: none;
  }

  .tool-sheet input::-webkit-datetime-edit,
  .tool-sheet input::-webkit-calendar-picker-indicator {
    color: transparent;
    opacity: 0;
  }

  .print-mark {
    display: block;
    width: auto;
    height: 24px;
    margin-bottom: 2pt;
  }

  .tool-sheet textarea {
    min-height: 0.9in;
    resize: none;
  }

  /* A tool with something typed in prints its result; a blank one prints as a worksheet. */
  .tool-sheet[data-filled] .tool-sheet-body {
    display: none;
  }

  .tool-sheet:not([data-filled]) .tool-output {
    display: none;
  }

  a {
    color: var(--ink);
    text-decoration: none;
  }
}

/* The section's line icon (2026-10-25, src/views/Icons.tsx): 2px strokes in ink-2 before the heading. */
.library-section-title.has-icon {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-icon {
  flex: none;
  color: var(--ink-2);
}

/* AI-made pictures (2026-10-25, the figure block): the picture at radius-md, its "Made with AI" caption
   as real text under it, and on the annotated example numbered rings over the picture (an SVG in the
   picture's own pixel space) with the list of tells. */
.lib-figure {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  max-width: 720px;
}

.lib-figure-frame {
  position: relative;
}

.lib-figure-picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.lib-figure-markers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lib-marker circle {
  fill: var(--ground);
  stroke: var(--accent);
  stroke-width: 4;
}

.lib-marker text {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.lib-figure-caption {
  display: grid;
  gap: var(--space-3);
  color: var(--ink-3);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.lib-figure-tells {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
  color: var(--ink);
  font-size: var(--type-body-size, 16px);
  font-weight: 400;
}

.lib-figure-tells li::marker {
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
}