/* The visual skin is deliberately separate from the existing layout and maths.
   !important is restricted to replacing legacy skin overrides in styles.css. */
:root {
  color-scheme: dark;
  --ink: #24221e;
  --paper-ink: #2d2923;
  --raised: #34302a;
  --recessed: #1e201e;
  --text: #f0e9da;
  --muted: #c2baaa;
  --quiet: #aaa391;
  --line: #5a5141;
  --brass: #af864b;
  --brass-light: #dbb978;
  --blue: #91c9dd;
  --green: #b6d59a;
  --purple: #cfb4e3;
  --amber: #e5bb7c;
  --accent: var(--blue);
  --tertiary: var(--amber);
  --fourth: #b6e2ee;
  background: #ac8655;
  color: var(--text);
}
body {
  position: relative;
  isolation: isolate;
  background: #ac8655 url('assets/skin/parchment.webp') repeat;
}
body::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  max-height: max(1100px, 100vw);
  background: url('assets/skin/background-image.webp') top center / max(1100px, 100vw) auto no-repeat;
  mask-image: linear-gradient(#000 0%, #000 77%, transparent 100%);
  pointer-events: none;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.intro { position:relative; }
.intro .eyebrow { color:#302313; font-weight:800; text-shadow:0 1px 1px #f1ddb17a; }
.site-brand { margin-bottom:22px; line-height:1; }
.site-brand img { width:min(100%, 510px); height:auto; display:block; margin:0 auto; filter:drop-shadow(0 3px 3px #32210e70); }
.intro .caption { color:#2e2215; font-weight:650; text-wrap:pretty; text-shadow:0 1px 1px #f1ddb17a; }
.intro::after {
  content:none;
}
.panel-divider { height:22px; width:210px; max-width:70%; margin:22px auto; background:url('assets/skin/horizontal-divider.webp') center / contain no-repeat; }
h2, .card-title, .matrix-guide > h3, .abyss-guide > h3, .abyss-form > h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight:500; letter-spacing:.005em; color:var(--text);
}
.eyebrow { color:var(--accent); letter-spacing:.15em; }
.caption,.section-note,.group-note,.enemy-note,.data-legend,.card-detail,.calc-note,.calc-field small,
.hero-support,.equipment-notes,.result-disclosure > summary { color:var(--muted); }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--text); }
::selection { background:#d0ae71; color:#24221e; }
.reference-body,.hero-search-results,.abyss-table-wrap { scrollbar-width:thin; scrollbar-color:#857251 #25231f; }
button,input,select { transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px;
}
button:disabled { cursor:not-allowed; opacity:.55; }
summary { cursor:pointer; }
.preview {
  position:relative; border:1px solid var(--brass); border-radius:3px;
  background:linear-gradient(110deg,#342b20f5,#25231fed); color:var(--amber);
  box-shadow:inset 0 1px 0 #eac78b12,0 4px 12px #3c28172b;
}
.status-dot { width:18px; height:18px; background:url('assets/skin/crosshair.webp') center / contain no-repeat; border-radius:0; }
.preview-detail { color:#d0c0a7; }
.workspace-dock {
  background:linear-gradient(180deg,#2c2823fa,#23221ffa);
  border-color:var(--brass); border-radius:3px;
  box-shadow:0 6px 20px #3b281842,inset 0 1px 0 #eed19d20;
  backdrop-filter:none;
}
.workspace-dock::before,.workspace-dock::after {
  content:''; position:absolute; top:50%; width:22px; height:70px;
  background:url('assets/skin/flat-flourish-tabs-panel.webp') center / contain no-repeat;
  transform:translateY(-50%); pointer-events:none;
}
.workspace-dock::before { left:-19px; }
.workspace-dock::after { right:-19px; transform:translateY(-50%) scaleX(-1); }
.workspace-dock [role='tab'] {
  --tab-colour:var(--blue); --tab-wash:#263d46;
  display:flex; justify-content:center; align-items:center; gap:10px;
  border-radius:2px; color:#d1c8b6;
  box-shadow:inset 0 -1px 0 transparent;
}
.workspace-dock #dock-damage { --tab-colour:var(--green); --tab-wash:#303d2b; }
.workspace-dock #dock-team { --tab-colour:var(--purple); --tab-wash:#3a2f42; }
.workspace-dock #dock-maths { --tab-colour:var(--amber); --tab-wash:#443522; }
.workspace-dock :is(#dock-content,#dock-damage,#dock-team,#dock-maths):is(:hover,[aria-selected='true']) {
  color:var(--tab-colour); background:linear-gradient(150deg,var(--tab-wash),#24231f);
  border-color:var(--brass); box-shadow:inset 0 -2px 0 var(--tab-colour),inset 0 1px 0 #ffffff0a;
}
.workspace-dock .dock-icon { width:28px; height:28px; object-fit:contain; flex:none; opacity:.85; }
.workspace-dock [aria-selected='true'] .dock-icon,.workspace-dock [role='tab']:hover .dock-icon { opacity:1; }
.explorer {
  position:relative; background:linear-gradient(125deg,#30291fee,#25231ff5);
  border:1px solid var(--brass); border-radius:4px;
  box-shadow:0 12px 32px #3e2b1b36,inset 0 1px 0 #efc99014;
}
.frame-art { position:absolute; inset:-4px; pointer-events:none; z-index:2; border-radius:inherit; }
.frame-corner { position:absolute; width:26.25px; height:26.25px; background:url('assets/skin/corner-flourish-panel.webp') top left / contain no-repeat; opacity:.9; }
.corner-nw { top:0; left:0; }
.corner-ne { top:0; right:0; transform:scaleX(-1); }
.corner-sw { bottom:0; left:0; transform:scaleY(-1); }
.corner-se { bottom:0; right:0; transform:scale(-1); }
.toolbar { border-bottom-color:#8e73454d; background:#221f1a55; }
#breadcrumbs button { color:var(--blue); }
#breadcrumbs button:hover { color:#d6ecf4; }
#breadcrumbs [aria-current] { color:var(--text); }
.separator { color:#9c8b71; }
.back {
  border-color:#78654b; background:linear-gradient(#373027,#292722); color:var(--text); border-radius:4px;
  box-shadow:inset 0 1px 0 #ffffff08;
}
.back:hover { background:#443b2f; border-color:var(--brass-light); color:#fff3dd; }
.nav-card {
  position:relative; background:linear-gradient(135deg,#36312a,#292823);
  border-color:#776447; border-radius:4px; box-shadow:inset 0 1px 0 #ebc4830c;
}
.nav-card:hover { background:linear-gradient(135deg,#3b3830,#2d302c); border-color:var(--blue); }
.card-title { font-size:20px; }
.card-category { color:var(--blue); letter-spacing:.1em; }
.card-action { color:var(--blue); }
.content-grid .nav-card { border-color:var(--brass); }
.nav-card.content-gear { background:linear-gradient(130deg,#193642f2,#1d292cf5); }
.nav-card.content-gear:hover { background:linear-gradient(130deg,#244653,#202f33); border-color:var(--blue); }
.nav-card.content-boss { background:linear-gradient(130deg,#3b2936f2,#2b252cf5); }
.nav-card.content-boss:hover { background:linear-gradient(130deg,#493241,#332a34); border-color:var(--purple); }
.content-grid .card-title { display:flex; align-items:center; gap:14px; color:var(--text); letter-spacing:.05em; }
.content-grid .card-title::before { content:''; width:34px; height:34px; background:center / contain no-repeat; flex:none; }
.content-gear .card-title::before { background-image:url('assets/skin/gear.webp'); }
.content-boss .card-title::before { background-image:url('assets/skin/skull.webp'); }
.nav-card.content-boss .card-title { color:var(--text); }
.nav-card.content-gear .card-title { color:var(--text); }
.content-boss .content-glossary,.nav-card.content-boss .card-action { color:#d0b8d6; }
.content-gear .content-glossary { color:#c0d9e2; }
.content-glossary { border-color:#bca7792e; }
.content-grid .card-action { padding-top:14px; border-top:1px solid #ac916040; width:100%; }
.enemy-card { background:linear-gradient(125deg,#302e28,#272723); border-color:#766348; border-radius:5px; }
.enemy-card h3 { color:var(--text); border-color:var(--line); }
#view > h2::before { content:''; display:inline-block; width:30px; height:30px; margin-right:12px; vertical-align:-5px; background:url('assets/skin/swords.webp') center / contain no-repeat; }
.stat-basis { color:#b7a27d; }
.stat { border-radius:4px; box-shadow:inset 0 1px 0 #ffffff06; }
:is(.enemy-card,.reference-body) .stat.hp { background:linear-gradient(135deg,#62313b,#40272f); border-color:#ba6875; color:#ffd0d4; }
:is(.enemy-card,.reference-body) .stat.atk { background:linear-gradient(135deg,#614326,#403020); border-color:#bd8b50; color:#ffdbab; }
:is(.enemy-card,.reference-body) .stat.def { background:linear-gradient(135deg,#294e63,#243a48); border-color:#6cacc8; color:#c9eeff; }
:is(.enemy-card,.reference-body) .stat.mres { background:linear-gradient(135deg,#514067,#352b46); border-color:#a58ac4; color:#ead8ff; }
.stat dt { color:inherit; }
.stat dd,.matrix-tier-table td,.result-number { font-variant-numeric:tabular-nums; }
.stat-description { color:inherit; }
.calculate-link { border-color:#6f8363; color:#c9ddb8; }

/* Tools: category accents, not category-coloured walls. */
#calculator { --accent:var(--green); --calc-green:var(--green); }
#team-benchmark { --accent:var(--purple); --calc-green:var(--purple); }
.calculator,#team-benchmark {
  background:linear-gradient(125deg,#2d2b24fa,#232521fa) !important;
  border-color:var(--brass) !important; border-radius:4px;
  box-shadow:0 12px 32px #3e2b1b36,inset 0 1px 0 #efc99014;
}
.calculator-intro { border-bottom-color:var(--line); }
.calculator .eyebrow,.calculator h2,#team-benchmark .eyebrow,#team-benchmark h2 { color:var(--accent) !important; }
.calculator-intro h2::before { content:''; display:inline-block; width:30px; height:30px; margin-right:12px; vertical-align:-6px; background:url('assets/skin/bullet.webp') center / contain no-repeat; }
#team-benchmark .calculator-intro h2::before { background-image:url('assets/skin/users.webp'); }
.calculator .calc-section,.calculator .calc-section[open] { background:transparent !important; }
.calculator .calc-section > summary,.calculator .calc-section[open] > summary,
#team-benchmark .calc-section > summary,#team-benchmark .calc-section[open] > summary {
  background:linear-gradient(90deg,#38382f,#2c2c26); border-left-color:var(--accent);
  color:var(--text); border-radius:3px; box-shadow:inset 0 1px 0 #e0c6960c;
}
.calculator .calc-section:not([open]) > summary { border-left-color:#77775f; }
.calculator .calc-section > summary:hover { background:#3c3c33; }
.calculator .calc-field label,.ally-toggle { color:#ddd6c6; }
.calculator .calc-field small,.calculator .calc-note { color:var(--muted); }
.calculator .calc-field :is(input,select),.matrix-controls input,.abyss-example-controls input {
  background:var(--recessed); border-color:#6c6555; color:var(--text); border-radius:4px;
  box-shadow:inset 0 2px 4px #0002; accent-color:var(--accent); font:inherit;
}
.calculator .calc-field :is(input,select):hover,.matrix-controls input:hover,.abyss-example-controls input:hover { border-color:#a39779; }
.calculator .calc-field :is(input,select):focus,.matrix-controls input:focus,.abyss-example-controls input:focus { border-color:var(--accent); }
.calculator input::placeholder { color:#aaa494; opacity:1; }
.calculator .back,#team-benchmark .back {
  background:linear-gradient(#38382f,#292c27) !important; border-color:#74745e !important; color:var(--text) !important;
}
.calculator .back:hover,#team-benchmark .back:hover { background:#414339 !important; border-color:var(--accent) !important; color:var(--accent) !important; }
.calculator .back:is([aria-selected='true'],[aria-pressed='true']),
.calculator .level-buttons .back[aria-pressed='true'] {
  background:#3c4934 !important; border-color:var(--accent) !important; color:var(--accent) !important;
}
#team-benchmark .back:is([aria-selected='true'],[aria-pressed='true']) { background:#45384e !important; }
.calculator .calc-tabs .back { background:transparent !important; border-color:transparent !important; color:var(--muted) !important; }
.calculator .calc-tabs .back[aria-selected='true'] { background:transparent !important; border-bottom-color:var(--accent) !important; color:var(--accent) !important; }
.calculator .calc-actions { border-color:var(--line); }
.calculator .calc-actions button:first-child,.calculator .calculator-toggle,#team-form > form > button[type='submit'] {
  background:linear-gradient(#c6d9ae,#a7bd8b) !important; color:#24301d !important;
  border-color:#d8e5c6 !important; box-shadow:inset 0 1px 0 #ffffff40,0 3px 8px #0002;
}
#team-form > form > button[type='submit'] { background:linear-gradient(#d5c0e8,#b39bc9) !important; color:#2d2236 !important; border-color:#e4d3f1 !important; }
.calculator .calc-actions button:first-child:hover,.calculator .calculator-toggle:hover { background:#d1e1ba !important; color:#24301d !important; }
#team-form > form > button[type='submit']:hover { background:#ddc9ed !important; color:#2d2236 !important; }
.hero-search-results,.calculator .hero-search-results {
  background:#252821; border-color:#909179; border-radius:4px; box-shadow:0 10px 25px #0008;
}
.hero-search-results [role='option'] { color:var(--text); }
.hero-search-results [role='option']:hover,.hero-search-results [aria-selected='true'] { background:#3c4633; color:#e0efcf; }
#team-benchmark .hero-search-results { background:#29232e; border-color:#927aa5; }
#team-benchmark .hero-search-results [role='option']:hover,#team-benchmark .hero-search-results [aria-selected='true'] { background:#45364f; color:#eadbf5; }
.search-divider { color:#c3bda9; border-color:var(--line); }
.calculator .equipment-notes,.hero-support { color:var(--muted); border-color:#7b876b; }
.ally-effect,.build-summary,.resistance-breakdown,.result-disclosure { border-color:var(--line); }
.build-summary p,.resistance-breakdown dd { color:var(--text); }
.build-summary > p::before { content:''; display:inline-block; width:22px; height:22px; margin-right:9px; vertical-align:-4px; background:url('assets/skin/chart.webp') center / contain no-repeat; }
.build-summary small,.resistance-breakdown dt { color:var(--muted); }
.resistance-breakdown .atk-headroom { border-color:var(--line); }
.resistance-breakdown .atk-headroom dd { color:var(--accent); }
.calculator .result-card,.calculator .result-views .improvement-card,#team-benchmark .result-card {
  background:linear-gradient(145deg,#38372f,#2d3029) !important;
  border-color:#746e59 !important; border-top-color:#9d9176 !important; border-radius:4px;
}
.calculator .result-grid > .result-card:nth-child(2),#team-benchmark .result-grid > .result-card:nth-child(2) {
  background:linear-gradient(145deg,#34402e,#2b3128) !important;
  border-color:#72845f !important; border-top-color:var(--accent) !important;
}
#team-benchmark .result-grid > .result-card:nth-child(2) { background:linear-gradient(145deg,#43354b,#302a35) !important; border-color:#8e779e !important; }
.calculator .result-number { color:var(--text) !important; }
.calculator .result-grid > .result-card:nth-child(2) .result-number,#team-benchmark .result-grid > .result-card:nth-child(2) .result-number { color:var(--accent) !important; }
.calculator .result-card h3 { color:#d8d1bf; }
.calc-warning { color:#f0c28b; border-color:#b28b51; background:#493823; }
#team-form .team-phase > h3 { color:var(--purple); border-color:var(--line); }
#team-form .calc-output { border-color:var(--line); }
#team-form .calc-output > details { background:#302c33; border-color:#7c697f; border-radius:4px; }
#team-form .calc-output > details > summary { color:var(--purple); }

/* Long-form knowledge: keep live text and the established reading structure. */
.workspace-maths { --accent:var(--amber); }
.damage-guide { border:1px solid var(--brass); border-radius:4px; background:linear-gradient(125deg,#30291fee,#25231ff5); box-shadow:0 12px 32px #3e2b1b36; }
.damage-guide { padding:30px; }
.damage-guide h2::before { content:''; display:inline-block; width:30px; height:30px; margin-right:12px; vertical-align:-6px; background:url('assets/skin/book.webp') center / contain no-repeat; }
.damage-guide .eyebrow { color:var(--amber); }
.guide-grid > article { border-color:var(--line); }
.guide-grid p,.term-list dd { color:var(--muted); }
.term-atk { color:var(--green); }.term-res { color:var(--blue); }.term-dmg { color:var(--amber); }
.formula-details { border-color:var(--line); }
.formula-details > summary { color:var(--amber); }
.formula-text,.matrix-formula { background:#201f1b; border-color:#746044; color:#e8d7b9; border-radius:4px; }
.damage-guide .back { background:#3c3325; border-color:#8d7147; color:var(--amber); }
.damage-guide > .calc-note { color:var(--muted); }
.mystery { border-top:1px solid var(--brass); }
.mystery .eyebrow,.mystery-evidence summary { color:var(--amber); }
.mystery-grid article { border-color:#8c7856; }
.mystery-grid h3 { color:var(--text); }
.mystery-grid p,.mystery-evidence p { color:var(--muted); }
.mystery-grid .mystery-takeaway { color:#d9ccb6; }
.mystery-tag { color:var(--green); }.mystery-tag.observed { color:var(--amber); }
.mystery-evidence { border-color:var(--line); }
.matrix-guide,.abyss-guide,.abyss-section,.abyss-skill + .abyss-skill,.matrix-details,.abyss-order,.abyss-examples { border-color:var(--line); }
.matrix-steps article { border-color:#9b8062; }
.matrix-steps h4,.matrix-score h4,.abyss-section h4 { color:var(--text); }
.matrix-steps p,.abyss-skill p,.abyss-order,.abyss-guide .section-note { color:var(--muted); }
.matrix-score { background:#332e37; border-color:#806c87; border-radius:4px; }
.matrix-score-value,.matrix-stack-summary,.matrix-details summary { color:#d9c3e5; }
.abyss-form { background:linear-gradient(145deg,#393127,#2a2924); border-color:#74654e; border-radius:4px; border-top-color:#cfaa7c; }
.abyss-form.magic { background:linear-gradient(145deg,#35303b,#29272d); border-top-color:#bda4ce; }
.abyss-restriction { color:var(--text); }
.abyss-callout { background:#383126; border-left-color:var(--brass-light); color:#e5d8bd; border-radius:0 4px 4px 0; }
.abyss-skill .abyss-advice,.abyss-attack-detail .abyss-advice { color:#cbd3b8; border-color:#8e9c77; }
.abyss-table-wrap { border-color:#71624a; border-radius:4px; }
.matrix-tier-table th { background:#393129; color:#e5cc9f; }
.matrix-tier-table td { color:var(--text); }
.matrix-tier-table th,.matrix-tier-table td { border-color:#62563f; }
.matrix-tier-table tbody tr:nth-child(even) { background:#dcc49607; }
.matrix-controls label,.abyss-example-controls label { color:var(--muted); }
.workspace-reference { background:#292720; border-color:var(--brass); border-radius:4px; box-shadow:0 8px 24px #3c281730; }
.reference-header { background:#332c21; border-color:var(--line); color:#ead4ab; }
.workspace-reference #content-panel { background:#292720; }
.workspace-reference #content-panel > .frame-art { display:none; }
.workspace-reference .toolbar { background:#24221c; }
.workspace-reference .stat dd { font-size:17px; overflow-wrap:normal; }
.workspace-reference .stat.hp dd { font-size:16px; }
footer { color:#463320; font-weight:500; }
footer a { color:#352a1b; }
@media (max-width:620px) {
  body::before { background-size:1100px auto; max-height:1100px; }
  .site-brand img { width:min(100%,410px); }
  .intro .caption { font-size:14px; }
  .intro::after { width:160px; margin-top:18px; }
  .workspace-dock::before,.workspace-dock::after { width:15px; height:52px; }
  .workspace-dock::before { left:-10px; }.workspace-dock::after { right:-10px; }
  .workspace-dock [role='tab'] { gap:7px; }
  .workspace-dock .dock-icon { width:22px; height:22px; }
  .frame-corner { width:27px; height:27px; }
  .damage-guide { padding:22px 17px; }
  .content-grid .card-title { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) { button,input,select { transition:none; } }