/* public/stylesheets/information/help-manual.css
 *
 * The Help & Manual pages under /documentation (How to Use).
 * Calm, readable, one column. The annotated-screenshot blocks copy the
 * reference style: the picture with numbered badges, then a two-column
 * legend whose numbers and colours match the badges.
 */
:root {
  --hp-ink: #0f172a;
  --hp-ink-soft: #334155;
  --hp-muted: #64748b;
  --hp-line: #e2e8f0;
  --hp-bg: #ffffff;
  --hp-bg-soft: #f8fafc;
  --hp-brand: #7c3aed;
  --hp-brand-soft: #f3eefe;
  --hp-fiber: #5b6cff;
  --hp-auto: #7c3aed;
  --hp-blue: #1a73e8;
  --hp-green: #188038;
  --hp-orange: #e8710a;
  --hp-purple: #7b2ff2;
  --hp-red: #d93025;
  --hp-teal: #00897b;
  --hp-radius: 14px;
}

.hp { color: var(--hp-ink); font-size: 16px; line-height: 1.6; max-width: 980px; margin: 0 auto; padding-bottom: 80px; }
.hp p { margin: 0 0 12px; }
.hp h1, .hp h2, .hp h3, .hp h4 { color: var(--hp-ink); letter-spacing: -0.01em; }
.hp h1 { font-size: 34px; font-weight: 800; margin: 0 0 8px; }
.hp h2 { font-size: 26px; font-weight: 800; margin: 48px 0 10px; }
.hp h3 { font-size: 20px; font-weight: 800; margin: 30px 0 8px; }
.hp h4 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; }
.hp .muted { color: var(--hp-muted); }
.hp .lead { font-size: 18px; color: var(--hp-ink-soft); }

/* ── Home ─────────────────────────────────────────────────────────────── */
.hp-welcome { text-align: center; padding: 28px 12px 10px; }
.hp-welcome h1 { font-size: 36px; }
.hp-welcome .lead { max-width: 640px; margin: 0 auto 6px; }
.hp-choice { text-align: center; margin: 26px 0 14px; font-weight: 700; color: var(--hp-ink-soft); }

.hp-worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin: 8px 0 34px; }
.hp-world {
  display: block; text-decoration: none; color: inherit;
  background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 22px;
  padding: 30px 26px 26px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.hp-world:hover, .hp-world:focus { text-decoration: none; color: inherit; transform: translateY(-3px); }
.hp-world[data-world="fiber"]:hover { border-color: var(--hp-fiber); box-shadow: 0 0 0 4px rgba(91, 108, 255, .16), 0 18px 40px -18px rgba(91, 108, 255, .55); }
.hp-world[data-world="automotive"]:hover { border-color: var(--hp-auto); box-shadow: 0 0 0 4px rgba(124, 58, 237, .16), 0 18px 40px -18px rgba(124, 58, 237, .55); }
.hp-world .crest { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 10px; display: block; filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .18)); transition: transform .25s ease; }
.hp-world:hover .crest { transform: scale(1.04); }
.hp-world h2 { margin: 6px 0 6px; font-size: 26px; }
.hp-world .promise { color: var(--hp-ink-soft); font-size: 16px; margin: 0 auto 14px; max-width: 320px; }
.hp-world .go { display: inline-block; font-weight: 800; color: var(--hp-brand); }
.hp-world .soon { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--hp-muted); background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: 999px; padding: 2px 10px; }
.hp-home-note { text-align: center; color: var(--hp-muted); font-size: 14px; }

/* ── World page ───────────────────────────────────────────────────────── */
.hp-hero { display: flex; align-items: center; gap: 22px; padding: 18px 0 6px; }
.hp-hero .crest { width: 96px; height: 96px; object-fit: contain; flex: none; }
.hp-hero .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-brand); }
.hp-crumbs { font-size: 14px; color: var(--hp-muted); margin: 4px 0 8px; }
.hp-crumbs a { color: var(--hp-brand); font-weight: 700; }

.hp-nav { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; margin: 10px 0 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--hp-line); }
.hp-nav a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--hp-ink-soft); font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hp-line); background: var(--hp-bg); }
.hp-nav a:hover { border-color: var(--hp-brand); color: var(--hp-brand); text-decoration: none; }
.hp-nav .num { width: 22px; height: 22px; border-radius: 50%; background: var(--hp-brand-soft); color: var(--hp-brand); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.hp-section { scroll-margin-top: 70px; }
.hp-section > h2 .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hp-brand); color: #fff; font-size: 16px; margin-right: 10px; vertical-align: middle; }
.hp-section .q { color: var(--hp-muted); font-weight: 600; font-size: 15px; margin: -4px 0 14px; }

/* Roles */
.hp-roles { display: grid; grid-template-columns: 1fr; gap: 16px; }
.hp-role { border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 18px 20px; background: var(--hp-bg); }
.hp-role h3 { margin: 0 0 2px; }
.hp-role .you { color: var(--hp-ink-soft); font-style: italic; margin-bottom: 8px; }
.hp-role .how { background: var(--hp-bg-soft); border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 12px; }
.hp-role .how b { color: var(--hp-brand); }
.hp-role .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-role ul { margin: 0; padding-left: 20px; }
.hp-role li { margin: 0 0 6px; }
.hp-role .cannot li::marker { color: var(--hp-red); }
.hp-role .can li::marker { color: var(--hp-green); }
.hp-role .colhead { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.hp-role .can .colhead { color: var(--hp-green); }
.hp-role .cannot .colhead { color: var(--hp-red); }
.hp-role .tip { margin-top: 10px; font-size: 14px; color: var(--hp-muted); }

/* Tasks / steps */
.hp-task { margin: 34px 0 10px; }
.hp-task > h3 { margin-top: 0; }
.hp-task .taskno { display: inline-block; min-width: 30px; color: var(--hp-brand); font-weight: 800; }
.hp-step { margin: 18px 0 30px; }
.hp-step h4 { display: flex; align-items: center; gap: 10px; }
.hp-step h4 .stepno { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--hp-brand-soft); color: var(--hp-brand); font-size: 14px; font-weight: 800; }

/* Annotated screenshot block */
.hp-shot { border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden; background: var(--hp-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.hp-shot .pic { background: #f1f5f9; padding: 12px; }
.hp-shot .pic img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #cbd5e1; box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .4); }
.hp-shot .pic.pdf img { max-width: 620px; margin: 0 auto; }
.hp-shot .caption { font-size: 13px; color: var(--hp-muted); padding: 8px 14px 0; }
.hp-shot .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; padding: 12px 16px 16px; }
.hp-shot .legend .item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.hp-shot .legend .badge { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.25); }
.hp-shot .legend .t { font-weight: 800; font-size: 16px; margin-bottom: 2px; }
.hp-shot .legend .x { color: var(--hp-ink-soft); font-size: 15px; }
.hp-shot .missing { padding: 26px 18px; color: var(--hp-ink-soft); background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px); font-size: 15px; }
.hp-shot .missing code { background: #fff; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--hp-line); }
.c-blue { background: var(--hp-blue); } .t-blue { color: var(--hp-blue); }
.c-green { background: var(--hp-green); } .t-green { color: var(--hp-green); }
.c-orange { background: var(--hp-orange); } .t-orange { color: var(--hp-orange); }
.c-purple { background: var(--hp-purple); } .t-purple { color: var(--hp-purple); }
.c-red { background: var(--hp-red); } .t-red { color: var(--hp-red); }
.c-teal { background: var(--hp-teal); } .t-teal { color: var(--hp-teal); }

/* Report file names */
.hp-files { border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 14px 18px; background: var(--hp-bg-soft); margin: 12px 0 8px; }
.hp-files code { display: block; font-size: 14px; background: #fff; border: 1px solid var(--hp-line); border-radius: 8px; padding: 6px 10px; margin: 6px 0; color: var(--hp-ink); }

/* Glossary */
.hp-gloss-group { margin: 26px 0 6px; }
.hp-gloss-group h3 { display: flex; align-items: center; gap: 10px; }
.hp-gloss-group h3::after { content: ""; flex: 1; height: 1px; background: var(--hp-line); }
.hp-term { display: grid; grid-template-columns: 220px 1fr; gap: 6px 18px; padding: 14px 0; border-bottom: 1px dashed var(--hp-line); }
.hp-term .name { font-weight: 800; font-size: 16px; color: var(--hp-ink); }
.hp-term .body p { margin: 0 0 6px; font-size: 15px; }
.hp-term .lbl { display: inline-block; min-width: 92px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-muted); }
.hp-term .ex { background: var(--hp-bg-soft); border-radius: 8px; padding: 6px 10px; }
.hp-term .ex .lbl { color: var(--hp-green); }
.hp-term .wt .lbl { color: var(--hp-orange); }

/* Planned world */
.hp-planned { border: 1px dashed var(--hp-line); border-radius: var(--hp-radius); padding: 22px 24px; background: var(--hp-bg-soft); }
.hp-planned ol { margin: 10px 0 0; padding-left: 22px; }
.hp-planned li { margin: 0 0 8px; }

/* Top bar with the download button */
.hp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.hp-topbar .hp-crumbs { margin: 0; }
.hp-dl { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-brand); color: #fff; font-weight: 800; border-radius: 999px; padding: 9px 16px; font-size: 14px; text-decoration: none; box-shadow: 0 8px 20px -10px rgba(124, 58, 237, .7); white-space: nowrap; }
.hp-dl:hover { background: #6d28d9; color: #fff; text-decoration: none; }

/* Manual download */
.hp-manual { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 8px 0 22px; padding: 18px 22px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: linear-gradient(135deg, #f8fafc, #f3eefe); }
.hp-manual .t { font-weight: 800; font-size: 17px; }
.hp-manual .x { color: var(--hp-ink-soft); font-size: 14px; max-width: 560px; }
.hp-manual .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-brand); color: #fff; font-weight: 800; border-radius: 999px; padding: 11px 20px; text-decoration: none; box-shadow: 0 8px 20px -10px rgba(124, 58, 237, .7); white-space: nowrap; }
.hp-manual .btn:hover { background: #6d28d9; color: #fff; text-decoration: none; }

/* Footer stamp */
.hp-stamp { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--hp-line); font-size: 13px; color: var(--hp-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (max-width: 760px) {
  .hp { font-size: 15px; }
  .hp h1 { font-size: 28px; } .hp h2 { font-size: 22px; }
  .hp-hero { gap: 14px; } .hp-hero .crest { width: 64px; height: 64px; }
  .hp-role .cols { grid-template-columns: 1fr; }
  .hp-shot .legend { grid-template-columns: 1fr; }
  .hp-term { grid-template-columns: 1fr; }
}
@media print {
  .hp-nav, .manager-header, .navbar, footer { display: none !important; }
  .hp-shot, .hp-role, .hp-step { break-inside: avoid; }
}