/* PMF-025 — mode pages (DESIGN-003). Generated by build_mode_pages.js.
   Shared by the index and all fifteen mode pages. */
:root{--graphite:#1F1F1F;--warm-sand:#F4EFE6;--soft-olive:#6D7A5A;--terracotta:#C85D3A;
  --paper:#FFFDF9;--line:#DED7CC;--muted:#6F746C;}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#fbf8f1 0%,var(--warm-sand) 100%);color:var(--graphite);min-height:100vh}
.shell{max-width:760px;margin:0 auto;padding:40px 24px 64px}
.eyebrow{display:flex;align-items:center;gap:10px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:850;font-size:.76rem;color:var(--terracotta);margin:0 0 18px}
.eyebrow:before{content:"";width:34px;height:34px;flex:0 0 auto;
  background:url('../assets/prompt-builder-mark.svg') center/contain no-repeat}
.mode-page .eyebrow:before{background-image:url('../../assets/prompt-builder-mark.svg')}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--soft-olive)}
h1{font-size:clamp(2rem,5.2vw,3rem);line-height:1.04;letter-spacing:-.035em;margin:.1em 0 .3em}
.lede{font-size:1.1rem;line-height:1.55;color:#4E524D;margin:0 0 14px;max-width:58ch}
.standalone{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0 0 20px;max-width:58ch}
.badge{display:flex;flex-direction:column;gap:2px;background:rgba(109,122,90,.10);
  border-left:3px solid var(--soft-olive);border-radius:0 10px 10px 0;padding:11px 14px;margin:0 0 22px;
  font-size:.9rem;line-height:1.5}
.badge span{color:var(--muted);font-size:.85rem}
.badge-lab{background:rgba(200,93,58,.09);border-left-color:var(--terracotta)}
.panel{background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:22px;
  padding:26px;margin:20px 0;box-shadow:0 10px 30px rgba(57,47,34,.045)}
.panel h2{margin:0 0 12px;font-size:1.25rem;letter-spacing:-.01em}
.panel h3{margin:18px 0 8px;font-size:.98rem;letter-spacing:.01em}
.panel p{line-height:1.62;color:#3F433D;margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.sub{color:var(--muted);font-size:.9rem;line-height:1.55}
.fires{font-size:1.02rem;font-weight:650;color:#333730}
.panel-boundary{border-color:#D8CBB8;background:rgba(250,246,239,.98)}
.panel-boundary h2 em{font-style:normal;color:var(--terracotta)}
ul.boundaries{margin:0;padding-left:20px;line-height:1.65;color:#3F433D}
ul.boundaries li{margin-bottom:7px}
ul.boundaries li::marker{color:var(--soft-olive)}
ul.boundaries a{color:var(--soft-olive);text-decoration:none}
ul.boundaries a:hover{color:var(--terracotta);text-decoration:underline}
/* The tier-1 conditions are authored as fragments, not as clauses that follow
   "when" -- "assume it failed", "what evidence weakens the conclusion". The
   engine composes them after a colon for the same reason; so does this. */
.discriminator{display:block;font-size:.86rem;color:var(--muted);margin-top:2px}
.panel-failure{background:rgba(200,93,58,.055);border-color:#E3CDBF}
.panel-starter .starter{white-space:pre-wrap;word-break:break-word;background:#F7F3EB;
  border:1px solid var(--line);border-radius:12px;padding:15px;margin:0 0 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.6;color:#2E322C}
.copy{font:inherit;font-size:.86rem;font-weight:800;color:#fff;background:var(--soft-olive);
  border:0;border-radius:10px;padding:9px 18px;cursor:pointer}
.copy:hover{background:var(--terracotta)}
.gate-note{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.finding{margin:12px 0 0;padding:0}
.finding figcaption{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:800;color:var(--terracotta);margin-bottom:6px}
.finding blockquote{margin:0;padding:12px 14px;background:#F7F3EB;border-left:3px solid var(--line);
  border-radius:0 10px 10px 0;font-size:.89rem;line-height:1.6;color:#3F433D}
.panel-evidence .task{font-size:.95rem;background:#F7F3EB;border-radius:10px;padding:12px 14px}
.arm{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:#FCFAF5;overflow:hidden}
.arm summary{cursor:pointer;padding:12px 14px;font-weight:750;font-size:.9rem;color:#3F433D}
.arm[open] summary{border-bottom:1px solid var(--line)}
.arm-mode{border-color:var(--soft-olive)}
.arm-mode summary{color:var(--soft-olive)}
.arm pre{white-space:pre-wrap;word-break:break-word;margin:0;padding:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.62;
  color:#2E322C;max-height:420px;overflow:auto}
.extract-table{width:100%;border-collapse:collapse;font-size:.8rem;line-height:1.5;color:#2E322C}
.extract-table th{text-align:left;font-weight:850;padding:10px 12px;border-bottom:2px solid var(--line);
  background:#F4EFE6;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#4E524D}
.extract-table td{padding:9px 12px;border-bottom:1px solid #EDE6DA;vertical-align:top}
.extract-table tr:last-child td{border-bottom:0}
/* No nowrap on column 1 either, for the same reason as column 2 below.
 * PREMORTEM's first column is a whole failure cause -- "Production falls behind
 * because six modules are too much for two part-time people" -- not the short
 * label ("Weeks 1-2", "Month 12") this rule was written for. A cell that fits
 * still does not wrap, so the tab-separated tables keep their old look. */
.extract-table td:first-child,.extract-table th:first-child{font-weight:700}
/* Column 2 wraps. It did not until 2026-09-25, and the nowrap was correct for
 * the tables this rule was written for -- BACKCAST and BUYER OBJECTION LENS are
 * tab-separated with short second cells. PMF-031 let markdown tables publish,
 * and those carry prose there: SECOND-ORDER THINKING's chain rendered 1996px
 * wide inside a 656px box with overflow-x:hidden, so the right-hand columns
 * were painted and unreachable. Text that fits still does not wrap, so the two
 * original tables are unchanged. */
.extract-table td:nth-child(2){white-space:normal}
.extract-table td{overflow-wrap:anywhere}
.caption{font-size:.95rem;font-weight:600;color:#333730}
.honesty{font-size:.9rem;color:var(--muted)}
.source code{font-size:.8rem;background:#F1ECE3;border-radius:5px;padding:1px 5px}
ul.related{list-style:none;margin:0;padding:0}
ul.related li{padding:9px 0;border-bottom:1px solid #EDE6DA;line-height:1.5}
ul.related li:last-child{border-bottom:0}
ul.related a{color:var(--soft-olive);text-decoration:none}
ul.related a:hover{color:var(--terracotta)}
ul.related span{display:block;font-size:.86rem;color:var(--muted)}
.panel-cta{background:rgba(109,122,90,.09);border-color:#CBD2BE}
.cta{display:inline-block;font-weight:850;color:#fff;background:var(--soft-olive);
  text-decoration:none;border-radius:11px;padding:11px 20px}
.cta:hover{background:var(--terracotta)}
.group ul.modelist{list-style:none;margin:0;padding:0}
.modelist li{padding:11px 0;border-bottom:1px solid #EDE6DA}
.modelist li:last-child{border-bottom:0}
.modelist a{color:var(--graphite);text-decoration:none;font-size:1.02rem}
.modelist a:hover{color:var(--terracotta)}
.modelist .when{display:block;font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:2px}
.tag{display:inline-block;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:850;color:var(--terracotta);background:rgba(200,93,58,.11);
  border-radius:999px;padding:2px 8px;vertical-align:2px}
.tag-ev{color:var(--soft-olive);background:rgba(109,122,90,.13)}
.alpha ul.alphalist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.alphalist a{display:inline-block;font-size:.86rem;font-weight:700;color:var(--soft-olive);
  text-decoration:none;background:#F5F1E8;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.alphalist a:hover{color:#fff;background:var(--soft-olive);border-color:var(--soft-olive)}
.signup h2{margin-bottom:4px}
.signup-note{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45}
.ml-embedded{margin:0}
footer{margin-top:30px;padding-top:20px;border-top:1px solid #D9D1C5;color:#62655F;font-size:.86rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;line-height:1.55}
footer a{color:var(--soft-olive);font-weight:800;text-decoration:none;white-space:nowrap}
footer a:hover{color:var(--terracotta)}
.book-line{max-width:52ch}
@media(max-width:600px){
  .shell{padding:24px 14px 48px}
  .panel{padding:19px 15px;border-radius:18px}
  .lede{font-size:1rem}
  /* DESIGN-003 section 8: two outputs side by side do not survive a narrow
     viewport. They are stacked <details> at every width, so nothing to undo —
     but the extracts need a shorter scroll box on a phone. */
  .arm pre{max-height:300px;font-size:.76rem}
  /* DESIGN-003 section 8 called this: extracts are the risk on a narrow
     viewport. A three-column table at phone width clipped its last column
     mid-word -- the column the caption is about. Rows stack into labelled
     blocks instead, so every character stays on screen. */
  .extract-table,.extract-table thead,.extract-table tbody,
  .extract-table tr,.extract-table th,.extract-table td{display:block;width:auto}
  .extract-table thead{position:absolute;left:-9999px}
  .extract-table tr{border-bottom:1px solid #EDE6DA;padding:10px 0}
  .extract-table tr:last-child{border-bottom:0}
  .extract-table td{border:0;padding:2px 12px;font-size:.78rem;white-space:normal}
  .extract-table td:first-child,.extract-table td:nth-child(2){white-space:normal}
  .extract-table td[data-label]:before{content:attr(data-label);display:block;
    font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;font-weight:850;
    color:var(--muted);margin-bottom:1px}
  .extract-table td:first-child{font-weight:800;font-size:.85rem}
}