/* P5-inspired paper, ink and crimson. Layout and reading sizes live in desktop.css. */
@font-face {
  font-family: "Vengeance Display";
  src: url("assets/fonts/barlow-condensed-extra-bold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vengeance Display";
  src: url("assets/fonts/barlow-condensed-extra-bold-italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --phantom-red: #d71130;
  --ink: #171415;
  --paper: #fff8e9;
  --canvas: #ede8de;
  --surface: #fbf8f0;
  --inset: #f0ebe1;
  --raised: #fffdf6;
  --hover: #e9e2d6;
  --text: #201b1b;
  --secondary: #51494a;
  --muted: #706565;
  --faint: #746766;
  --line: #d3c9bc;
  --soft-line: #e7dfd3;
  --accent: #ba1731;
  --accent-fill: var(--phantom-red);
  --accent-hover: #b00d29;
  --accent-wash: #f8e6e2;
  --accent-ring: rgb(215 17 48 / 20%);
  --green: #286d4b;
  --green-wash: #e6eee2;
  --gold: #8a5a15;
  --gold-wash: #f6ead0;
  --blue: var(--accent);
  --danger: #b5212d;
  --danger-wash: #f9e5df;
  --control-bg: #f4efe5;
  --control-border: #b8ab9f;
  --shadow: 2px 3px 0 rgb(23 20 21 / 7%);
  --shadow-lg: 6px 8px 0 rgb(23 20 21 / 16%);
  --radius: 2px;
  --font-body: "Vengeance Sans", "Microsoft YaHei", sans-serif;
  --font-display: "Vengeance Display", "Vengeance Sans", sans-serif;
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  --canvas: #171516;
  --surface: #242021;
  --inset: #1d1a1b;
  --raised: #302a2b;
  --hover: #3b3233;
  --text: #f9f2e5;
  --secondary: #d4c8bd;
  --muted: #b9aaa5;
  --faint: #a08e89;
  --line: #514345;
  --soft-line: #3a3032;
  --accent: #ff7183;
  --accent-fill: #cf1634;
  --accent-hover: #b9102c;
  --accent-wash: #3f252b;
  --accent-ring: rgb(255 113 131 / 25%);
  --green: #9ccdac;
  --green-wash: #26372d;
  --gold: #e0b879;
  --gold-wash: #3b3023;
  --blue: var(--accent);
  --danger: #ff958e;
  --danger-wash: #42282b;
  --control-bg: #1b1819;
  --control-border: #6b5658;
  --shadow: 2px 3px 0 rgb(0 0 0 / 20%);
  --shadow-lg: 6px 8px 0 rgb(0 0 0 / 30%);
}

body {
  background-image: radial-gradient(var(--line) .65px, transparent .65px);
  background-size: 6px 6px;
}
::selection { color: var(--paper); background: var(--phantom-red); }
h1,h2,h3,h4 { font-weight: 800; }
h1 { font-weight: 900; letter-spacing: -.045em; }
button { border-radius: 2px; font-weight: 500; }
button:hover,:root[data-theme="dark"] button:hover { border-color: var(--control-border); }
input,select { border-radius: 2px; background: var(--control-bg); border-color: var(--control-border); }
input[type="checkbox"] { width: 22px; height: 22px; }
.primary,a.primary { border-radius: 0; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
.primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 3px 4px 0 var(--ink); }
a.secondary,.badge,.tag,.skill-method,.picked-demon { border-radius: 2px; }
.slot-empty,:root[data-theme="dark"] .slot-empty { border-color: var(--control-border); border-radius: 2px; }
[data-tooltip]::after,#toast { background: var(--ink); color: var(--paper); border-radius: 2px; }
.skill-link { font-weight: 500; }

/* The same cut-paper mark anchors the masthead, navigation and route numbers. */
.site-header { background: var(--ink); border-bottom: 0; color: var(--paper); }
.masthead { position: relative; min-height: 88px; padding-block: 16px; }
.site-brand { gap: 16px; color: var(--paper); }
.site-brand:hover { color: var(--paper); }
.site-brand img { width: 136px; filter: grayscale(1) brightness(0) invert(1); }
.site-brand > span { border-left: 4px solid var(--phantom-red); padding-left: 16px; }
.site-brand strong { font-size: 1.3rem; font-weight: 900; font-style: italic; letter-spacing: -.025em; }
.site-brand small { color: #d8cbc2; font: 800 .85rem/1.4 var(--font-display); letter-spacing: .12em; margin-top: 4px; }
.global-search input { background: #2a2426; border-color: #59494e; color: var(--paper); }
.global-search input::placeholder { color: #c4b4b0; }
.global-search input:focus { background: #33282c; border-color: #ff7183; box-shadow: 0 0 0 3px rgb(255 113 131 / 20%); }
.global-search > .icon { color: #d8cbc2; }
.display-controls { gap: 6px; }
.display-controls button { color: var(--paper); border: 1px solid #59494e; border-radius: 0; }
.display-controls button:hover,.display-controls button[aria-pressed="true"] { color: var(--paper); background: var(--phantom-red); border-color: var(--phantom-red); }
.main-nav { background: var(--ink); border-bottom: 4px solid var(--phantom-red); }
.main-nav nav { gap: 8px; }
.main-nav a { position: relative; color: #e6d9d0; min-height: 52px; padding-inline: 22px; border-bottom: 0; font-weight: 700; font-style: italic; }
.main-nav a:hover { color: var(--paper); background: #39232a; }
.main-nav a.active { color: var(--paper); background: var(--phantom-red); clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.main-nav a:focus-visible { outline-color: var(--paper); outline-offset: -5px; }
.nav-context { color: #cfbcb5; font: 800 .9rem/1.3 var(--font-display); letter-spacing: .12em; }

.page-title { padding-block: 24px; align-items: center; }
.page-title > div { border-left: 6px solid var(--phantom-red); padding-left: 16px; }
.page-title h1 { font-size: 2.1rem; font-style: italic; line-height: 1.3; }
.breadcrumb { font-size: var(--font-meta); margin-bottom: 5px; }
.planner-views { border-bottom: 2px solid var(--text); gap: 16px; }
.view-tabs { gap: 8px; }
.view-tabs button { font-weight: 800; padding: 10px 22px; border-bottom: 0; }
.view-tabs button[aria-selected="true"] { color: var(--paper); background: var(--ink); clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
:root[data-theme="dark"] .view-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); }
#route-ready { border-radius: 0; background: var(--green-wash); color: var(--green); }
.section-heading h2,.card-head h2 { font-weight: 800; font-style: italic; }
.target-panel > .section-heading,.build-panel > .section-heading,.planner-settings > .section-heading { border-top: 3px solid var(--text); background: var(--inset); }
.target-head h3 { font-weight: 900; letter-spacing: -.025em; }
.demon-portrait { filter: drop-shadow(2px 4px 0 rgb(23 20 21 / 10%)); }
.slot-order { font-family: var(--font-display); font-weight: 800; }
.resists,.build-preview,.preview-heading,.entry-facts,.entry-stat-grid { border-radius: 2px; }
.preview-heading h3 { font-weight: 800; }
.preview-route:first-of-type > span:first-child { color: var(--accent); font-weight: 700; }
.action-bar { background: var(--ink); color: var(--paper); border: 0; border-left: 5px solid var(--phantom-red); border-radius: 0; box-shadow: var(--shadow-lg); padding-block: 16px; }
.action-bar .muted,#command-target.is-empty { color: #d8cbc2; }
.action-bar .secondary,.action-bar .quiet { color: var(--paper); background: transparent; border-color: #635056; border-radius: 0; }
.action-bar .secondary:hover,.action-bar .quiet:hover { background: #39232a; }
#calculate { min-height: 48px; padding-inline: 24px; box-shadow: none; }
#calculate:hover { box-shadow: none; }

/* Numbered strategy slips keep the requested order legible at a glance. */
.strategy { position: relative; border-radius: 0; border-top: 3px solid var(--text); gap: 8px; }
.strategy-title { width: 100%; font-weight: 800; gap: 10px; }
.strategy-number { color: var(--accent); font: italic 800 1.8rem/1 var(--font-display); }
.strategy-title > .icon { width: 20px; height: 20px; flex-basis: 20px; }
.strategy-description { display: block; color: var(--muted); font-size: var(--font-meta); }
.strategy-price { font: italic 800 2.7rem/1.15 var(--font-display); letter-spacing: -.02em; margin-top: 3px; }
.strategy-price small { font: 400 var(--font-small)/1.5 var(--font-body); letter-spacing: 0; }
.strategy-counts { border-top: 1px solid var(--soft-line); padding-top: 10px; }
.strategy-counts strong { font-weight: 800; }
.strategy.selected,.strategy.selected:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); border-top-color: var(--phantom-red); box-shadow: 4px 4px 0 var(--phantom-red); }
.strategy.selected .strategy-number,.strategy.selected .strategy-check { color: #ff7183; }
.strategy.selected .strategy-title > .icon,.strategy.selected .strategy-counts strong { color: var(--paper); }
.strategy.selected .strategy-description,.strategy.selected .strategy-counts,.strategy.selected .strategy-price small { color: #d8cbc2; }
.strategy.selected .strategy-counts { border-color: #59494e; }
.route-compare { border-radius: 0; }
.route-compare summary { font-weight: 600; }
.route-comparison .numeric { font-variant-numeric: tabular-nums; }
.result-price-note { line-height: 1.65; }

/* One continuous checklist. Directory actions locate cards within this sheet. */
.execution-workspace { border-radius: 0; }
.guide-toolbar { background: var(--ink); color: var(--paper); border-top: 4px solid var(--phantom-red); padding-inline: 16px; }
.guide-tabs { gap: 6px; }
.guide-tabs button { color: #d8cbc2; border-bottom: 0; font-weight: 700; padding-inline: 20px; }
.guide-tabs button:hover { color: var(--paper); background: #39232a; }
.guide-tabs button.active { color: var(--paper); background: var(--phantom-red); clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.guide-tabs button:focus-visible { outline-color: var(--paper); outline-offset: -5px; }
.guide-tabs span { background: rgb(255 248 233 / 14%); color: inherit; border-radius: 0; }
.guide-tabs button.active span { background: rgb(0 0 0 / 20%); }
.guide-toolbar .quiet { color: var(--paper); }
.guide-toolbar .quiet:hover { background: #39232a; }
.guide-progress { background: var(--surface); }
.progress-track { height: 8px; border-radius: 0; }
.step-navigation { top: calc(var(--nav-height) + 12px); }
.step-nav-heading strong { font-weight: 800; color: var(--secondary); }
.step-nav-list { scrollbar-gutter: stable; }
.step-nav-item { border-radius: 0; }
.nav-step-number { font: italic 800 1.6rem/1.1 var(--font-display); }
.step-nav-item.active { background: var(--accent-fill); }
.step-nav-item.active strong,.step-nav-item.active small,.step-nav-item.active .nav-step-number,.step-nav-item.active > .icon,.step-nav-item.active .nav-step-number .icon { color: var(--paper); }
.step-nav-item.active strong { font-weight: 700; }
.step-nav-item:focus-visible { outline-offset: -3px; }
.operation-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.operation-heading h2 { font-weight: 900; letter-spacing: -.02em; }
.operation-position { padding: 5px 16px 6px 12px; border-radius: 0; color: var(--paper); background: var(--accent-fill); font: italic 800 1.15rem/1.2 var(--font-display); letter-spacing: .035em; clip-path: polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%); }
.operation-position span { color: inherit; opacity: .8; }
.operation-step.completed .operation-position { color: var(--green); background: var(--green-wash); }
.operation-step.is-current .operation-heading h2 { color: var(--accent); }
.operation-step:focus { outline: none; }
.operation-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.step-check { padding: 8px 12px; background: var(--inset); border: 1px solid var(--line); }
.recipe-entity { border-radius: 0; }
.recipe-result { border-color: var(--line); border-left: 4px solid var(--accent-fill); background: var(--accent-wash); }
.recipe-entity > strong { font-weight: 800; }
.recipe-arrow { color: var(--accent); }
.recipe-arrow > .icon { width: 28px; height: 28px; flex-basis: 28px; stroke-width: 2.5; }
.reference-id,.reference-button { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: .03em; }
.step-skills h3 { font-weight: 800; }
.step-no-skills,.step-skills table,.guide-sheet table,.route-complete { border-radius: 2px; }
.overview-step { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 2px solid var(--line); }

/* Compendium, dialogs and detail pages share the same ink-and-paper treatment. */
.catalog-categories,.catalog-main,.catalog-inspector,#entry-content { border-radius: 0; }
.catalog-categories button,.filters button { border-radius: 0; }
.catalog-categories button.active,.filters button.active { background: var(--accent-fill); color: var(--paper); font-weight: 700; }
.catalog-categories button.active small { color: var(--paper); }
.category-heading th { font-weight: 800; }
.inspector-kicker,.entry-kind { display: inline-block; color: var(--paper); background: var(--ink); padding: 3px 14px 4px 10px; font-weight: 700; clip-path: polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.catalog-inspector h3 { font-weight: 900; }
.entry-heading { border-bottom: 2px solid var(--text); }
.entry-heading h1 { font-weight: 900; font-style: italic; }
.entry-section > h2 { font-weight: 800; }
.entry-stat-grid strong { font: 800 1.8rem/1.3 var(--font-display); }
dialog { border-radius: 0; border-top: 5px solid var(--phantom-red); }
dialog::backdrop { background: rgb(23 20 21 / 65%); }
.dialog-head h2 { font-weight: 900; }
.skill-option,#source-options { border-radius: 2px; }
.about { border-radius: 0; background: var(--inset); }
footer { border-top: 2px solid var(--text); }
footer > span:first-child { font-weight: 700; }
footer small { font: 800 .9rem/1.4 var(--font-display); letter-spacing: .1em; }

@media (max-width: 1439px) {
  .masthead { gap: 20px; }
  .site-brand img { width: 112px; }
  .site-brand { gap: 12px; }
  .site-brand > span { padding-left: 12px; }
  .strategy-title { gap: 8px; }
  .strategy-price { font-size: 2.45rem; }
  .guide-tabs button { padding-inline: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .primary { transition: transform .12s,background .12s,box-shadow .12s; }
}
/* Account recovery stays within the planner's existing paper/ink controls. */
.auth-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin-bottom:24px;border:2px solid currentColor;background:var(--paper,#fff8e9);color:var(--ink,#171415)}
.auth-notice a{white-space:nowrap;text-decoration:none;min-height:44px}
[data-theme="dark"] .auth-notice{background:#292426;color:#fff8e9}
.site-operations{display:grid;gap:12px;margin-bottom:24px}
.site-operation{padding:16px 20px;border-left:5px solid var(--accent);background:var(--surface);box-shadow:var(--shadow);color:var(--text);overflow-wrap:anywhere}
.site-operation h2{font-size:17px;line-height:1.4;font-weight:800}
.site-operation p{margin-top:4px;color:var(--secondary);font-size:14px;white-space:pre-wrap}
.site-operation--maintenance{border-left-color:var(--gold);background:var(--gold-wash)}
.site-operation--maintenance h2{color:var(--gold)}
.display-controls>a.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none;color:inherit}
.open-symbol{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px}
.open-symbol>.icon{width:24px;height:24px}