/* PMF-040 — /fifty/. Generated by build_fifty_screen.js.
   Same tokens as the screening log; self-contained so this page does not
   depend on /modes/ or /screening/ existing. */
: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:800px;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}
.eyebrow a{color:inherit;text-decoration:none}
h1{font-size:clamp(2rem,5.2vw,3rem);line-height:1.04;letter-spacing:-.035em;margin:.1em 0 .25em}
.claim{font-size:1.18rem;line-height:1.5;font-weight:700;color:#333730;margin:0 0 12px;max-width:56ch}
.lede{font-size:1rem;line-height:1.6;color:#4E524D;margin:0 0 22px;max-width:58ch}
.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 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}
.bucket-lede{color:#4E524D;max-width:62ch}
.counts ul.countlist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.countlist li{display:flex;align-items:baseline;gap:7px;background:#F5F1E8;border:1px solid var(--line);
  border-radius:12px;padding:9px 13px}
.countlist .n{font-size:1.3rem;font-weight:850}
.countlist .l{font-size:.84rem;color:#4E524D}
article.row{padding:16px 0;border-bottom:1px solid #EDE6DA}
article.row:last-child{border-bottom:0;padding-bottom:0}
article.row h3{margin:0 0 3px;font-size:1rem;letter-spacing:.01em;display:flex;align-items:baseline;gap:9px}
.rn{display:inline-block;min-width:1.6em;font-variant-numeric:tabular-nums;font-weight:850;
  font-size:.8rem;color:var(--terracotta)}
.gloss{font-size:.9rem;color:var(--muted);margin:0 0 8px!important;font-style:italic}
.reader{margin:0 0 8px!important}
.target{font-size:.88rem;color:var(--muted);margin:0!important}
.target a{color:var(--soft-olive);font-weight:800;text-decoration:none}
.target a:hover{color:var(--terracotta)}
.quoted{color:#4E524D}
.panel-argument{border-color:#E3CDBF;background:rgba(200,93,58,.045)}
.panel-gap{border-color:#CFCBBF;background:rgba(109,122,90,.05)}
.panel-cta{border-color:#C9C2B4;background:#F7F3EB}
table.jobs{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.55;margin-top:14px}
table.jobs th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:850;color:var(--muted);padding:9px 10px;border-bottom:2px solid var(--line)}
table.jobs td{padding:9px 10px;border-bottom:1px solid #EDE6DA;vertical-align:top;color:#3F433D;
  overflow-wrap:anywhere}
table.jobs tr:last-child td{border-bottom:0}
table.jobs td.rn{color:var(--terracotta)}
ul.packing{list-style:none;margin:14px 0 0;padding:0}
ul.packing li{padding:9px 0;border-bottom:1px solid #EDE6DA;font-size:.95rem}
ul.packing li:last-child{border-bottom:0}
ul.packing .gloss{display:inline;font-size:.88rem;margin:0!important}
.more a{color:var(--soft-olive);font-weight:800;text-decoration:none}
.more a:hover{color:var(--terracotta)}
.foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.foot a{color:var(--soft-olive);font-weight:800;text-decoration:none;font-size:.9rem}
.foot a:hover{color:var(--terracotta)}
.foot .build{width:100%;margin:6px 0 0;font-size:.76rem;color:var(--muted)}
/* The jobs table is three narrow columns; on a phone it becomes stacked rows
   rather than three columns squeezed to nothing. */
@media(max-width:640px){
  .shell{padding:28px 16px 48px}
  .panel{padding:20px;border-radius:18px}
  table.jobs thead{display:none}
  table.jobs,table.jobs tbody,table.jobs tr,table.jobs td{display:block;width:100%}
  table.jobs tr{padding:10px 0;border-bottom:1px solid #EDE6DA}
  table.jobs td{border:0;padding:0}
  table.jobs td.rn{display:inline;margin-right:8px}
  table.jobs td[data-label="Produces"]{color:var(--muted);font-size:.88rem;margin-top:3px}
}