/* public/css/claim-preparation.css
 *
 * Prepare an increase (2026-09-07, SI-1). Two views inside the existing My
 * Preparation page: the starter and the editor.
 *
 * The rules this file follows, and they are laws on this site, not preferences:
 *
 *  - THE BUTTON LAW. Every clickable card carries a 2px --color-accent border
 *    and the cursor-following gold glow from card-fx (the page loads both
 *    card-fx.css and card-fx.js and every card carries `cardfx-pop`). A 1px
 *    --color-border hairline is NOT acceptable on anything clickable.
 *  - THE SYMMETRY LAW, and the landmine that rides with it. Prose in the PAGE
 *    FLOW uses --prose-measure with auto side margins, so two paragraphs span
 *    the same centred band. Prose INSIDE a card does not: the card is already
 *    the measure, and capping it again indents the words away from their own
 *    heading, inputs and buttons, which is the very defect the law exists to
 *    prevent. No hardcoded prose width anywhere.
 *  - Dark mode is BOTH mechanisms: :root[data-theme="dark"] and the
 *    prefers-color-scheme media mirror. Every colour here is a token, so both
 *    are satisfied without a second block.
 *  - Mobile first: touch targets are the LABEL, not a 13px box, and the layout
 *    is checked at 390px and 375px.
 */

.cpw {
  display: block;
}
.cpw-loading {
  color: var(--color-text-muted);
  max-width: var(--prose-measure);
  margin-inline: auto;
}

.cpw-head {
  margin: 0 0 1.25rem;
}
/* THE SYMMETRY LAW, scoped the way the map's landmine requires: the measure
   applies to prose in the PAGE FLOW, and never inside a card. A card is
   already the measure, so capping prose again inside one indents the text
   away from its own heading, its own inputs and its own buttons, which is the
   defect the law exists to prevent rather than a second application of it. */
.cpw-head .mp-lead,
.cpw-journey {
  max-width: var(--prose-measure);
  margin-inline: auto;
}
.cpw-journey {
  color: var(--color-text-muted);
  margin: .25rem auto 0;
}
.cpw-journey-detached {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border-left: 4px solid var(--color-accent);
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
}

.cpw-sec {
  margin: 1.75rem 0;
  padding: 1.15rem 1.15rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.cpw-h2 {
  font-size: 1.2rem;
  margin: 0 0 .5rem;
  color: var(--color-text-strong);
}
.cpw-h3 {
  font-size: 1.02rem;
  margin: 1.15rem 0 .35rem;
  color: var(--color-text-strong);
}
.cpw-note {
  color: var(--color-text-muted);
  margin: .25rem 0 .75rem;
  font-size: .95rem;
}

/* ---- the starter --------------------------------------------------------- */
.cpw-claims,
.cpw-preps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: .9rem;
  margin: .75rem 0 0;
}
.cpw-claim,
.cpw-prep {
  /* THE BUTTON LAW: a distinct 2px accent border, never a hairline. */
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: .95rem 1rem 1.05rem;
  min-width: 0;
}
.cpw-claim h3,
.cpw-prep h3 {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.cpw-claim-conds,
.cpw-claim-count,
.cpw-prep-meta {
  margin: .2rem 0;
  color: var(--color-text-muted);
  font-size: .93rem;
  overflow-wrap: anywhere;
}
.cpw-claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
}

/* ---- the editor ---------------------------------------------------------- */
.cpw-titlebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: .75rem;
  margin: 0 0 .9rem;
}
.cpw-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
}
.cpw-savebar .cpw-status {
  flex-basis: 100%;
  margin: .25rem 0 0;
}
.cpw-status {
  min-height: 1.35rem;
  color: var(--color-text-muted);
  font-size: .93rem;
}
.cpw-status.is-error { color: #b3261e; }
.cpw-status.is-ok { color: var(--color-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cpw-status.is-error { color: #ff8a80; }
}
:root[data-theme="dark"] .cpw-status.is-error { color: #ff8a80; }

.cpw-issue-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .5rem 0 1rem;
}
.cpw-chip {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  /* Clickable, so it carries the accent border and the glow. */
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  padding: .55rem .8rem;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
}
.cpw-chip:hover,
.cpw-chip:focus-visible {
  border-color: var(--color-primary);
}
.cpw-chip.is-current {
  background: var(--color-surface-hover);
  box-shadow: inset 0 0 0 2px var(--color-accent-light);
}
.cpw-chip-label {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cpw-chip-badge {
  font-size: .82rem;
  color: var(--color-text-muted);
}

.cpw-add {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .6rem;
  margin-top: .5rem;
}
.cpw-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .85rem 0;
}
.cpw-field > span {
  font-weight: 600;
  color: var(--color-text-strong);
}
.cpw-field input,
.cpw-field select,
.cpw-field textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem .65rem;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
}
.cpw-field textarea { min-height: 6rem; resize: vertical; }
.cpw-field-inline {
  flex: 1 1 16rem;
  margin: 0;
  max-width: none;
}

.cpw-facts {
  display: grid;
  gap: .35rem;
}
.cpw-fact {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: .5rem;
}
.cpw-fact-k { color: var(--color-text-muted); }
.cpw-fact-v { overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .cpw-fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cpw-fact-k { font-size: .88rem; }
}

.cpw-rating,
.cpw-sources {
  margin-top: 1.15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border);
}
.cpw-rating-current {
  background: var(--color-surface-hover);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  margin: .5rem 0;
}
.cpw-rating-line { margin: 0 0 .35rem; }
.cpw-rating-list,
.cpw-picker {
  margin: .65rem 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
.cpw-rating-row,
.cpw-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cpw-rating-row:last-child,
.cpw-picker-row:last-child { border-bottom: 0; }
.cpw-rating-row > span,
.cpw-picker-row > span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 12rem; }
.cpw-picker-h { margin: .7rem 0 .2rem; font-size: .95rem; color: var(--color-text-muted); }

.cpw-source {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  margin: .65rem 0;
}
.cpw-source-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}
.cpw-source-family {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}
.cpw-source-title { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.cpw-source-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cpw-flag {
  margin: .35rem 0;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
}
.cpw-flag-warn {
  background: var(--color-surface-hover);
  border-left: 4px solid var(--color-accent);
}

.cpw-review-list {
  padding-left: 1.2rem;
}
.cpw-review-links,
.cpw-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0;
}

.cpw-includes {
  margin: 0;
}
.cpw-include-block { margin: .75rem 0; }
.cpw-include-h { margin: 0 0 .25rem; font-size: 1rem; }
/* The touch target is the whole label, never the 13px box. */
.cpw-include-item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .5rem .25rem;
  min-height: 44px;
  cursor: pointer;
}
.cpw-include-item input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.cpw-include-item span { overflow-wrap: anywhere; min-width: 0; }

.cpw-notice {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1rem 1.15rem;
  margin: 1.25rem auto;
  max-width: var(--prose-measure);
}
.cpw-notice p { margin: .35rem 0 .75rem; }
.cpw-savebar [data-cpw-conflict] { flex-basis: 100%; }
.cpw-notice-error { border-color: #b3261e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cpw-notice-error { border-color: #ff8a80; }
}
:root[data-theme="dark"] .cpw-notice-error { border-color: #ff8a80; }

/* ---- the copy ------------------------------------------------------------ */
.cpw-paper {
  margin: 1.5rem auto;
  max-width: var(--prose-measure);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.35rem;
}
/* THE PAPER IS A DOCUMENT PREVIEW, NOT A PAGE (2026-09-12). copyBlob() in
   claim-preparation.js exports this subtree into a standalone HTML file with
   its own sans body font, so the preview keeps the family the export uses
   rather than picking up the site's serif heading role. */
.cpw-paper h1, .cpw-paper h2, .cpw-paper h3, .cpw-paper h4,
.cpw-paper-h1 { font-family: var(--font-sans); }
.cpw-paper-h1 { margin: 0 0 .25rem; font-size: 1.35rem; }
.cpw-paper-sub { margin: .1rem 0; color: var(--color-text-muted); }
.cpw-paper-notice {
  margin: .85rem 0;
  padding: .5rem .7rem;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-hover);
  font-weight: 600;
}
.cpw-paper-sec { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.cpw-paper-sec h3 { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.cpw-paper-qa { margin: .75rem 0; }
.cpw-paper-qa h4 { margin: 0 0 .15rem; font-size: 1rem; color: var(--color-text-strong); }
.cpw-paper-qa p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cpw-paper-empty { color: var(--color-text-muted); font-style: italic; }
.cpw-paper-items-h { margin: 1.15rem 0 .35rem; }
.cpw-paper-item { margin: .75rem 0; padding-left: .8rem; border-left: 3px solid var(--color-border); }
.cpw-paper-item-h { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cpw-paper-prov,
.cpw-paper-purpose,
.cpw-paper-caveat { margin: .15rem 0; color: var(--color-text-muted); font-size: .93rem; }
.cpw-paper-body p { margin: .15rem 0; overflow-wrap: anywhere; }
.cpw-paper-statement,
.cpw-paper-quote { white-space: pre-wrap; }
.cpw-paper-quote { border-left: 3px solid var(--color-border-strong); padding-left: .7rem; margin-left: 0; }
.cpw-paper-ws-line { margin: .15rem 0; overflow-wrap: anywhere; }
.cpw-paper-stamp { color: var(--color-text-muted); font-size: .88rem; margin-top: 1rem; }

/* Printing ONE copy, and nothing else from the account. Same shape as the
   packet's own isolation, keyed on this page's own class so the two can never
   be armed at once. */
@media print {
  body.printing-preparation > *:not(#main-content) { display: none !important; }
  body.printing-preparation #main-content > *:not(#my-preparation-card) { display: none !important; }
  body.printing-preparation #my-preparation-card > *:not(#my-preparation-body) { display: none !important; }
  body.printing-preparation #my-preparation-body > *:not(#mp-workflow) { display: none !important; }
  body.printing-preparation #mp-workflow > *:not(.cpw-paper) { display: none !important; }
  body.printing-preparation #my-preparation-card,
  body.printing-preparation #my-preparation-body,
  body.printing-preparation #mp-workflow { display: block !important; }
  body.printing-preparation .cpw-paper {
    border: 0;
    padding: 0;
    max-width: none;
    background: #fff;
    color: #000;
  }
}

/* SI-2 (2026-09-07). The two deliberate context changes sit together, so a
   veteran reads them as one pair of choices rather than as more buttons. */
.cpw-context { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; }

/* Naming a record you hold yourself. Boxed so it reads as its own small task
   beside the saved items, and never as part of the saved list above it. */
.cpw-manual {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  background: var(--color-surface-2, var(--color-surface));
}
.cpw-manual .cpw-h3 { margin-top: 0; }

/* On the printed copy, the veteran's own answer about an item. */
.cpw-paper-considered { margin: .15rem 0 0; font-size: .95rem; }