/* PMF-039 — the Power Mode Taxonomy. Generated by build_taxonomy.js.
 * Palette and shell match /screening/ and /modes/; this page adds only the
 * entry row, whose job is to make built and unbuilt legible at a glance
 * without colour being the only signal. */
: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:860px;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,5vw,3rem);line-height:1.04;letter-spacing:-.035em;margin:.1em 0 .3em}
.claim{font-size:1.15rem;font-weight:800;color:var(--soft-olive);margin:0 0 14px;max-width:58ch}
.lede{font-size:1.05rem;line-height:1.55;color:#4E524D;margin:0 0 24px;max-width:62ch}

.panel{background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:18px;
  padding:24px;margin:24px 0;box-shadow:0 10px 30px rgba(57,47,34,.045)}
.panel h2{margin:0 0 12px;font-size:1.2rem}
.panel p{margin:0 0 12px;line-height:1.6;color:#4E524D;max-width:64ch}
.panel p:last-child{margin-bottom:0}

.family{margin:38px 0 0}
.family h2{font-size:1.3rem;letter-spacing:-.02em;margin:0 0 6px;
  padding-bottom:8px;border-bottom:2px solid var(--line)}
.family-note{margin:10px 0 4px;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:60ch}
h3.tier{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);
  font-weight:850;margin:22px 0 4px}
.tier-note{margin:0 0 10px;color:var(--muted);font-size:.88rem;line-height:1.5;max-width:60ch}
/* The not-a-mode tier is the one place on this page where skimming the list and
 * missing the note would leave a reader with a wrong idea, so it is marked. */
.tier-note-warn{border-left:3px solid var(--terracotta);padding-left:10px;color:#5A5E57}

ul.entries{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.entry{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.entry-name{font-weight:800;font-size:1rem;color:var(--graphite);text-decoration:none}
a.entry-name{color:var(--soft-olive);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
a.entry-name:hover{color:var(--terracotta)}
.alias-note,.entry-prov{color:var(--muted);font-size:.84rem}
.cross-filed{color:var(--muted);font-size:.84rem;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:2px}
.cross-filed:hover{color:var(--terracotta)}
.status{margin-left:auto;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:850;white-space:nowrap;border-radius:999px;padding:3px 9px;border:1px solid}
/* Text, not colour alone, carries the distinction. */
.status-built{color:#44513A;background:#EDF1E7;border-color:#C8D3BC}
.status-unbuilt{color:#6F746C;background:#F2EFE9;border-color:var(--line)}
.status-notmode{color:#8A4426;background:#F7EAE3;border-color:#E3C6B6}
.entry.unbuilt .entry-name,.entry.not-mode .entry-name{color:#4E524D}
.entry:target{outline:2px solid var(--terracotta);outline-offset:2px}

.after-sort h2{border-bottom-color:var(--soft-olive)}

footer{margin-top:44px;padding-top:20px;border-top:1px solid #D9D1C5;color:#62655F;font-size:.9rem;
  display:flex;flex-direction:column;gap:10px}
footer a{color:var(--soft-olive);font-weight:800;text-decoration:none}
footer a:hover{color:var(--terracotta)}
.build-id{margin:14px 0 0;color:#9A9B95;font-size:.72rem;letter-spacing:.04em}

@media(max-width:600px){
  .shell{padding:24px 14px 48px}
  .panel{padding:18px 15px;border-radius:14px}
  .lede{font-size:1rem}
  .status{margin-left:0}
}