/* WTA Character Sheet CSS - Stalking Green Neumorphic Theme */ /* Werewolf: The Apocalypse splat accent: --wta-500 = #5C6B3F (spec) #fossil note: old accent #8a9a3c is off-spec; replaced with WTA ramp. */ :root { /* Werewolf Green Accent → WTA primitive ramp from tokens.css */ --wta-green: var(--wta-500); /* #5C6B3F — spec base accent */ /* Rage / Renown / Harano / Hauglosk palette */ /* Rage uses --accent-alt (→ --wta-rage = #C81E32) under [data-splat="wta"] — still the only tracker using it, per Mashby. Renown (Glory/Honor/Wisdom) uses the primary --accent (WTA green). Harano and Hauglosk each got their own distinct color once Mashby flagged that Harano shared Renown's green and Hauglosk's red read as "Rage" despite being a different tracker: --gold-500 (Harano) and --spirit-500 (Hauglosk) — see .dot.harano-filled/ .dot.hauglosk-filled below. Both were unused elsewhere in this file: --gold-500 was tokens.css's orphaned --renown-gold (Renown reads as plain --accent green, not gold); --spirit-500 was the "GNOSIS" meter primitive, orphaned since Gnosis doesn't exist in W5 and that tracker was removed from this template (a separate, already-deleted --gnosis-blue #fossil token is unrelated to this still-live --spirit-500). */ /* Damage states → shared semantic tokens */ --danger-red: var(--danger); /* var(--crimson-600) = #7d3124 */ --warning-yellow: var(--warning); /* #FFC107 */ --safe-green: var(--success); /* #1a2b1a */ /* Base (parchment palette) */ --bg-black: var(--parchment-900); /* #150f0a */ --bg-dark: var(--parchment-800); /* #281e12 */ --bg-card: var(--parchment-700); /* #3a2c1a */ --text-white: var(--text); /* var(--parchment-300) = #c4b59c */ --text-gray: var(--text-muted); /* var(--parchment-400) = #9d8d77 */ --border-color: var(--border); /* var(--parchment-600) = #58493a */ /* Neumorphism — journal-warm shadows */ --neuro-radius: var(--radius-lg); /* 12px */ --neuro-bg-1: var(--parchment-900); --neuro-bg-2: var(--ink-900); /* #0a0605 */ --neuro-shadow-glow: color-mix(in srgb, var(--wta-green) 40%, transparent); /* Layout — Attributes/Skills name column. Shared by .attribute-name/ .skill-name's own width and .skill-specialty-row's indent (see both below) so the two can never drift apart into two independent guessed numbers again. 7rem comfortably fits the longest names ("Manipulation", "Investigation", "Performance", "Intimidation" — all under 82px against 112px available) with room to spare. */ --skill-label-width: 7rem; } /* --neuro-shadow-dark/light derive from --accent, so they must be declared on [data-splat="wta"] itself rather than :root above — :root only ever sees the shell's default gold --accent, since [data-splat] lives on , a descendant of :root, and custom properties resolve var() using the value at the declaring element, not the consuming one. */ [data-splat="wta"] { --neuro-shadow-dark: color-mix(in oklch, var(--accent), black 70%); --neuro-shadow-light: color-mix(in oklch, var(--accent), black 40%); } /* ── Sheet Container ───────────────────────────────────────────── */ .wta-sheet { background: var(--bg-black); color: var(--text-white); padding: 2rem; min-height: 100vh; } /* ── Neumorphic Card ───────────────────────────────────────────── */ .sheet-section { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 18px 18px 21px var(--neuro-shadow-dark), -18px -18px 21px var(--neuro-shadow-light), 0 0 30px var(--neuro-shadow-glow); padding: 1.5rem; margin-bottom: 1.5rem; transition: all 0.3s ease; min-width: 0; overflow: hidden; } .sheet-section:hover { box-shadow: 18px 18px 21px var(--neuro-shadow-dark), -18px -18px 21px var(--neuro-shadow-light), 0 0 40px var(--neuro-shadow-glow), inset 0 0 30px color-mix(in srgb, var(--wta-green) 15%, transparent); } .sheet-section h2 { color: var(--wta-green); margin: 0 0 1rem 0; font-size: 1.3rem; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-bottom: 2px solid var(--wta-green); padding-bottom: 0.5rem; } /* ── Header ────────────────────────────────────────────────────── */ .sheet-header { text-align: center; margin-bottom: 2rem; } .character-title { color: var(--wta-green); font-size: 2.5rem; margin: 0; text-transform: uppercase; letter-spacing: 3px; } .character-subtitles { color: var(--text-gray); font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.25rem; } .header-details { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; } /* input[type="text"] in the selector (not just .header-input) beats journal-theme.css's shared input[type="text"] rule on specificity — that rule sets its own parchment-gradient background via the `background` shorthand, which was silently winning over this class's lower-specificity `background: transparent` (confirmed via computed styles: Pack/Chronicle were rendering journal-theme's gradient, not actually transparent, despite this rule saying otherwise). Pack/Chronicle now match .btn-share's box treatment (full border, rounded corners, same rest/hover colors) instead of the old underline-only style, and there's no adjacent any more — the placeholder doubles as the field's label. Text stays --text-gray rather than the old rule's permanent --wta-green: that color measures ~3.4:1 against this dark background at this font size, the same legibility problem the Alias input had, so it's kept to a hover/filled border accent (matching .btn-share, which doesn't use it as a resting text color either) instead of the value text itself. */ input[type="text"].header-input { background: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-gray); padding: 0.4rem 0.8rem; text-align: center; min-width: 180px; font-size: 0.85rem; letter-spacing: 1px; transition: border-color 0.15s, color 0.15s; } .header-input::placeholder { color: var(--text-gray); opacity: 0.7; } input[type="text"].header-input:hover { border-color: var(--wta-green); color: var(--wta-green); } input[type="text"].header-input:focus { background: none; outline: none; border-color: var(--wta-green); } .header-input:not(:placeholder-shown) { border-color: var(--wta-green); } /* ── Save Indicator ─────────────────────────────────────────────── */ .save-indicator { position: fixed !important; top: 20px; right: 20px; z-index: 6500; /* persistent status toast tier — see z-index scale doc in sheet-layout.css */ background-color: color-mix(in srgb, var(--parchment-900) 95%, transparent); padding: 0.75rem 1.5rem; border-radius: 8px; border: 2px solid var(--wta-green); box-shadow: 0 4px 6px color-mix(in srgb, var(--ink-900) 30%, transparent), 0 0 20px color-mix(in srgb, var(--wta-green) 20%, transparent); font-size: 0.9rem; pointer-events: none; animation: slideInRight 0.3s ease-out; margin: 0 !important; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .save-indicator .saved { color: var(--safe-green); } .save-indicator .error { color: var(--danger-red); } /* ── Grid Layouts ───────────────────────────────────────────────── */ /* Two columns: column-one (Portraits/Identity/Vitals) at 25%, and a merged wide column carrying everything that used to be split across columns two and three (Attributes/Skills, then Harano & Hauglosk + Renown, Gifts & Rites, Advantages, Notes, Experience) at the remaining ~75%. */ .sheet-grid-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .sheet-grid-two-column.wta-main-grid { grid-template-columns: 25% 1fr; } .column-one, .column-two { display: flex; flex-direction: column; } /* ── Attributes & Skills ────────────────────────────────────────── */ /* column-gap narrowed from 2rem to 1rem so a divider line can sit in the middle of it (1rem gap + 1rem padding-left on the divided side = 2rem total spacing between columns, same as before); row-gap (used only once these collapse to a single stacked column below 1200px) stays at 2rem. */ .attributes-three-column, .skills-three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; } .attributes-three-column > div:not(:first-child), .skills-three-column > div:not(:first-child) { border-left: 1px solid var(--border-color); padding-left: 1rem; } .attribute-category-label { color: var(--wta-green); font-size: 0.9rem; font-weight: bold; text-align: center; margin-bottom: 0.5rem; letter-spacing: 1px; } /* Two prior attempts (a content-dependent 2-column grid, then an explicit 3-column grid with the dot-tracker pinned to grid-column:3 and a literal hardcoded width) both looked correct on paper but empirically still misaligned Skills against Attributes — the exact mechanism was never confirmed, only that variable content in the row (the specialty button/ tags) correlated with the divergence. Rather than debug further, the fix here is to remove the variable content from the row entirely: .skill-main is now structurally identical to .attribute-row — exactly two children, name and dot-tracker, nothing else — so there's nothing left inside the row that could cause the two containers to diverge. The specialty button and tags moved to a separate .skill-specialty-row beneath (see below). No grid-column/fixed-width tricks; a plain flex row with space-between is the whole mechanism. The add-specialty button later moved back in-row (see .skill-name-group below) so it can sit right after the name — it's nested inside a single wrapper alongside .skill-name rather than added as its own flex item, so .skill-main still has exactly two top-level children and the invariant above still holds. */ .attribute-row, .skill-main { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .attribute-row { margin-bottom: 0.5rem; } .skill-main { margin-bottom: 0.25rem; } .attribute-row .dot-tracker, .skill-main > .dot-tracker { flex-shrink: 0; } .attribute-name { color: var(--text-white); font-size: 0.95rem; flex: 0 0 var(--skill-label-width); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wraps .skill-name + .btn-add-specialty as one flex item so .skill-main keeps exactly two top-level children (this group, then .dot-tracker) — see the .attribute-row/.skill-main comment above. Owns the --skill-label-width flex-basis that used to belong to .skill-name directly; .skill-name now shares that space with the button instead of claiming all of it. */ .skill-name-group { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 var(--skill-label-width); min-width: 0; } /* Root cause of the specialty-row indent bug, found via computed-style inspection (getComputedStyle), not static file review: sheet-layout.css — a shared file loaded by every splat, before wta-sheet.css — defines its own .skill-row { display:flex; justify-content:space-between; ... } for HTR's unrelated .attr-row/.skill-row pattern. WTA's local .skill-row rule below never reset display/justify-content, so that inherited flex-row behavior silently persisted: .skill-main and .skill-specialty- row (its two children) were laid out as side-by-side flex items instead of stacked block rows, shoving .skill-specialty-row out to the row's far right edge — right where .skill-main's own dot-tracker ends — regardless of anything .skill-name/.skill-specialty-row/--skill-label-width did. display:block here overrides the inherited flex layout, letting .skill-main and .skill-specialty-row stack normally, each row's height including both. */ .skill-row { display: block; margin-bottom: 0.8rem; padding: 0.3rem 0; } /* Specialty tags, in their own row beneath .skill-main entirely — not inside it — so they can never affect where the dot-tracker starts (the add-specialty button that used to live here moved to .skill-name-group instead, see above). No left indent: an earlier padding-left: var(--skill-label-width) tried to nudge tags under the dot-tracker, but in the narrow Skills sub-column (1 of 3 in .skills-three-column) that 7rem inset ate over a third of the row's ~279px width, leaving too little room for .specialties-list to wrap more than one short tag per line (confirmed via computed bounding boxes, not just static review). Flush-left against the full column width — same width .skill-main uses above — fixes the wrap. */ .skill-specialty-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; row-gap: 0.3rem; margin-top: 0.2rem; } /* flex-grow:0 (not 1) — .skill-name used to grow to fill the rest of .skill-name-group's fixed --skill-label-width, which stretched its box all the way to the group's edge regardless of the name's own text length. That pushed .btn-add-specialty to a fixed x-position — a big gap after "Craft"/"Firearms", barely any after "Athletics" — instead of sitting right next to the name, like VTM's equivalent rule (flex: 0 1 auto). flex-shrink stays 1 so a name that's actually too long for the group still ellipsis-truncates instead of overflowing. */ .skill-name { color: var(--text-white); font-size: 0.9rem; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Specialties (tag list in .skill-specialty-row; add button lives in .skill-name-group instead, alongside .skill-name) ──────────────── */ /* Only shown once the skill has at least one dot filled (x-show in the template) — a skill with 0 dots can't take a specialty in W5, so there's nothing to add yet. */ .btn-add-specialty { background: transparent; color: var(--text-gray); border: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s ease; } .btn-add-specialty:hover { color: var(--wta-green); } .specialties-list { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; min-width: 0; } /* min-width:0 lets a tag shrink below its natural content width when it's alone on a line and still wider than .skill-specialty-row's available width (that row sits in one of Skills' three sub-columns, so width is still limited even though it's no longer sharing space with the dot-tracker) — its text then truncates with ellipsis (.specialty-tag-text below) instead of overflowing the sheet-section. Multiple normal-length tags are unaffected: they just wrap onto additional lines at their natural width via .specialties-list's flex-wrap, same as before. */ .specialty-tag { background: var(--bg-dark); border: 1px solid var(--wta-green); border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px; color: var(--wta-green); min-width: 0; max-width: 100%; } /* sheet-layout.css (loaded sitewide via base.html) has its own, separate .specialty-tag::before/::after rule that stamps a flanking ◆ glyph on either side of the text — same class name, different file, so it isn't overridden by anything above (there was nothing here for it to lose a cascade fight against; the properties just went undeclared). Explicit `content: none` cancels it out for the WTA sheet, same as vtm-sheet.css already does. */ .specialty-tag::before, .specialty-tag::after { content: none; } .specialty-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .specialty-tag button { background: none; border: none; color: var(--danger-red); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; } /* No WTA-specific override needed for .specialty-inline-input/ .specialty-input-field (markup/interaction ported from the HTR sheet, base rules in main.css): journal-theme.css's global input[type="text"] rule already re-themes it correctly per splat — parchment gradient, Crimson Text serif, and a var(--accent) focus border that resolves to WTA green — because that attribute selector outranks main.css's plain .specialty-input-field class selector regardless of load order (confirmed via computed styles: focus border-color settles to #5C6B3F, i.e. --wta-green). An earlier version of this rule tried to set color/font-family/focus-color explicitly here, but that was dead code for the same specificity reason — removed rather than left in looking functional. */ /* ── Dot Tracker ────────────────────────────────────────────────── */ .dot-tracker { display: flex; align-items: center; gap: 8px; } /* Tighter spacing inside the cramped 3-column attribute/skill grids only — mirrors the equivalent fix already shipped for VTM's attribute grid (.attribute-column .dot-tracker). Other dot-trackers (health, willpower, rage) size their own gap inline and are unaffected. */ .attributes-three-column .dot-tracker, .skills-three-column .dot-tracker { gap: 0.15rem; } .dot { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; border: 2px solid var(--border-color); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .dot.filled { background: var(--wta-green); border-color: var(--wta-green); } .dot.empty { background: var(--bg-dark); } .dot:hover { transform: rotate(45deg) scale(1.2); } /* WTA-specific dot fill colors */ .dot.rage-filled { background: var(--accent-alt); border-color: var(--accent-alt); box-shadow: 0 0 6px color-mix(in srgb, var(--accent-alt) 50%, transparent); } /* Rage renders first in Vitals and reads as the tracker that matters most moment-to-moment — dots sized well above Health/Willpower's 30px boxes, bumped up twice now per Mashby. Shaped like the Rage glyph (frontend/static/images/lore/Glyphs_Rage.png) instead of the shared diamond: that PNG is a clean silhouette (transparent background, solid near-black glyph, confirmed via its alpha channel), so it works as a CSS mask — background-color fills only the glyph's shape, and we control the color entirely ourselves (muted at rest, --accent-alt red when filled) rather than being stuck with whatever color is baked into the source image. No border (mask doesn't clip borders reliably) or diamond rotate/hover spin — those were shape-specific, not meaningful for a glyph mask. */ .dot-tracker.rage-dot-tracker .dot { width: 46px; height: 46px; transform: none; border-radius: 0; border: none; -webkit-mask-image: url('/static/images/lore/Glyphs_Rage.png'); mask-image: url('/static/images/lore/Glyphs_Rage.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .dot-tracker.rage-dot-tracker .dot.empty { background: var(--border-color); } .dot-tracker.rage-dot-tracker .dot.rage-filled { background: var(--accent-alt); border-color: transparent; box-shadow: none; } .dot-tracker.rage-dot-tracker .dot:hover { transform: scale(1.15); } /* No animation on Rage's filled dots — static color only, same as Harano/Hauglosk below. Three separate attempts at an animated pulse (mask-image+transform shake, filter-based pulse on the masked .dot, then a glow on a .rage-dot-wrap sibling) each *looked* broken on mobile in different ways, but the real cause turned out to be unrelated to all of them: --accent-alt (tokens.css) had no root-level fallback, only a [data-splat="wta"] one, so any timing/matching hiccup for that selector left it fully invalid — transparent fill, inherited text color — everywhere it was used, animated or not. Fixed at the token level (tokens.css now gives --accent-alt the same shell-default pattern --accent already had). Kept the animation removed anyway since Harano/Hauglosk prove the plain static version is enough. */ /* Renown/Harano/Hauglosk are WTA-specific trackers and read as such: primary --accent (WTA green) for Glory/Honor/Wisdom and Harano, and the same --accent-alt alarm/rage-red treatment as Rage for Hauglosk (a Rage-adjacent affliction) — diamond-shaped via the shared .dot base, matching Rage's shape. Previously Renown used a separate --renown-gold token and Harano/Hauglosk rendered as colored squares (.tracker-box); both read as off-splat inconsistencies fixed in this pass. */ .dot.renown-filled { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent); } /* Renown dots as Luna glyphs (frontend/static/images/lore/Glyphs_Luna.png) instead of the shared diamond — same CSS-mask technique as Rage/ Harano/Hauglosk (see .dot-tracker.rage-dot-tracker .dot above), 21px to match Harano/Hauglosk's glyph-dot scale. Each dot gets its own fixed rotation (--luna-rot, set per nth-child below) instead of one uniform angle, so the row reads as scattered/organic rather than a mechanically aligned grid — fixed rather than Math.random() in the template so it stays stable across every Alpine re-render instead of re-rolling on every click/keystroke. Pattern repeats every 5 dots (Renown's max), reused identically across Glory/Honor/Wisdom. */ .dot-tracker.renown-dot-tracker .dot { width: 21px; height: 21px; border-radius: 0; border: none; transform: rotate(var(--luna-rot, 0deg)); -webkit-mask-image: url('/static/images/lore/Glyphs_Luna.png'); mask-image: url('/static/images/lore/Glyphs_Luna.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .dot-tracker.renown-dot-tracker .dot:nth-child(5n+1) { --luna-rot: -14deg; } .dot-tracker.renown-dot-tracker .dot:nth-child(5n+2) { --luna-rot: 22deg; } .dot-tracker.renown-dot-tracker .dot:nth-child(5n+3) { --luna-rot: -27deg; } .dot-tracker.renown-dot-tracker .dot:nth-child(5n+4) { --luna-rot: 9deg; } .dot-tracker.renown-dot-tracker .dot:nth-child(5n+5) { --luna-rot: -6deg; } .dot-tracker.renown-dot-tracker .dot.empty { background: var(--border-color); } .dot-tracker.renown-dot-tracker .dot.renown-filled { border-color: transparent; box-shadow: none; } .dot-tracker.renown-dot-tracker .dot:hover { transform: rotate(var(--luna-rot, 0deg)) scale(1.15); } /* Harano/Hauglosk each get their own color, distinct from both Renown (--accent green, same tracker family visually) and Rage (--accent-alt red, thematically wrong for Hauglosk per Mashby — "Rage-adjacent" narratively doesn't mean it should look like Rage). Neither --gold-500 nor --spirit-500 was in use anywhere else in this file: --gold-500 was tokens.css's orphaned --renown-gold (Renown reads as plain --accent green now, not gold); --spirit-500 was the "GNOSIS" meter primitive, orphaned since Gnosis doesn't exist in W5 and that tracker was removed from this template. Reusing existing tokens rather than inventing new hex. */ .dot.harano-filled { background: var(--gold-500); border-color: var(--gold-500); box-shadow: 0 0 6px color-mix(in srgb, var(--gold-500) 50%, transparent); } .dot.hauglosk-filled { background: var(--spirit-500); border-color: var(--spirit-500); box-shadow: 0 0 6px color-mix(in srgb, var(--spirit-500) 50%, transparent); } /* Renown tracker row */ /* Glory/Honor/Wisdom side by side (matches Harano/Hauglosk's own condition-tracker-row pattern below) rather than stacked — each .renown-row is a flex item here, so its own margin-bottom (needed when these stacked vertically) is reset to 0; the row wrapper's margin-bottom takes over that spacing instead. */ .renown-tracker-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .renown-row { flex: 1; min-width: 100px; margin-bottom: 0; } .renown-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .renown-name { color: var(--accent); font-size: 0.85rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } .renown-value { color: var(--accent); font-size: 0.8rem; } /* Rage/Harano/Hauglosk "N / 5" — inline next to the heading in .tracker-group-header, same pattern as Renown's .renown-value. Colors match each tracker's own label/dot-fill color. */ .tracker-group-value { font-size: 0.8rem; } .rage-value { color: var(--accent-alt); } .harano-value { color: var(--gold-500); } .hauglosk-value { color: var(--spirit-500); } /* ── Health & Willpower Box Tracker ──────────────────────────────── */ /* flex-wrap:nowrap + .tracker-box's flex-shrink (below) keep the whole row — however many boxes effectiveHealthMax()/willpower.max computes to — on one line instead of the last cluster wrapping to a second row: boxes stay at their natural 30px size while there's room, and only shrink uniformly once a row's box count needs more width than the column has (e.g. Health's true ceiling of 14: 10 base + 4 from Crinos, per W5). align-items:flex-start avoids the default flex stretch fighting aspect-ratio on the boxes (see below). */ .tracker-bar { display: flex; align-items: flex-start; gap: 2px; flex-wrap: nowrap; margin-bottom: 0.3rem; max-width: 100%; } /* Groups boxes into clusters of 5 (5th, 10th, 15th... box gets extra trailing space) — generic to whatever effectiveHealthMax()/ willpower.max computes to, not a fixed total; the last cluster just holds whatever remains (e.g. 9 boxes renders as 5 + 4). */ .tracker-box.cluster-gap { margin-right: 0.6rem; } /* flex:0 1 30px — 30px is the preferred/max size (flex-grow:0 keeps a half-empty row, e.g. Willpower at its default 5, from stretching boxes bigger); flex-shrink:1 lets every box in the row shrink uniformly, no smaller than needed, when the row doesn't fit at 30px. aspect-ratio (no fixed height) keeps them square through that shrink. container-type:inline-size lets the glyph span below scale its font with the box's own shrunk width via cqw — a unit can't reference a container element establishes on itself, hence the span. */ .tracker-box { width: 30px; aspect-ratio: 1; flex: 0 1 30px; min-width: 0; border: 2px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; transition: all 0.2s ease; background: var(--bg-dark); color: transparent; container-type: inline-size; overflow: hidden; } /* Damage glyph (✕/·, see getHealthBoxGlyph()/getWpBoxGlyph()) — sized relative to the box's own (possibly shrunk) width so it stays legible instead of overflowing a small box or vanishing at a tiny fixed size. */ .tracker-box span { font-size: 65cqw; line-height: 1; } /* Undamaged boxes get a solid fill (green for Health, blue steel for Willpower) so "undamaged" reads as a real state instead of an empty box indistinguishable from one beyond the tracker's max. Superficial/ aggravated below override this with the yellow/red damage colors. */ .tracker-bar-health .tracker-box.filled { background: var(--wta-green); border-color: var(--wta-green); } .tracker-bar-willpower .tracker-box.filled { background: var(--willpower); border-color: var(--willpower); } .tracker-box.superficial { color: var(--warning-yellow); border-color: var(--warning-yellow); } .tracker-box.aggravated { color: var(--danger-red); border-color: var(--danger-red); } .tracker-box:hover { border-color: var(--wta-green); box-shadow: 0 0 8px var(--neuro-shadow-glow); } .tracker-max-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .tracker-max-label { color: var(--text-gray); font-size: 0.8rem; font-weight: bold; letter-spacing: 1px; } .tracker-max-value { color: var(--wta-green); font-size: 0.9rem; font-weight: bold; } .tracker-adj-btn { background: none; border: none; color: var(--text-gray); cursor: pointer; font-size: 1rem; padding: 0 0.2rem; transition: color 0.2s; } .tracker-adj-btn:hover { color: var(--wta-green); } /* ── Form Groups (Identity section) ─────────────────────────────── */ /* Fixed-width first column (grid, not flex auto-width) so every row's input/select left edge lines up regardless of label text length ("Pronouns" vs "Age" vs "Ambition"). Width comfortably fits "Pronouns", the longest label, without wrapping. */ .form-group-compact { margin-bottom: 0.8rem; display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 0.5rem; width: 100%; } .form-group-compact label { color: var(--wta-green); font-size: 0.85rem; font-weight: bold; letter-spacing: 0.5px; white-space: nowrap; } .form-group-compact input, .form-group-compact select, .form-group-compact textarea { min-width: 0; width: 100%; background: var(--neuro-bg-1); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-white); padding: 0.4rem 0.6rem; font-size: 0.9rem; box-shadow: inset 4px 4px 8px var(--neuro-shadow-dark), inset -4px -4px 8px var(--neuro-bg-2); transition: all 0.2s ease; } /* Desire/Ambition auto-resize textareas — JS (autoResizeTextarea()) sets height from scrollHeight on input/init; resize:none avoids a manual drag-handle fighting the auto-grow, overflow:hidden avoids a flashed scrollbar mid-resize. Word-wrap is textarea's default behavior. */ .form-group-compact textarea { resize: none; overflow: hidden; min-height: 2.25rem; font-family: inherit; line-height: 1.4; } .form-group-compact input:focus, .form-group-compact select:focus, .form-group-compact textarea:focus { outline: none; border-color: var(--wta-green); box-shadow: inset 4px 4px 8px var(--neuro-shadow-dark), inset -4px -4px 8px var(--neuro-bg-2), 0 0 8px var(--neuro-shadow-glow); } /* Shared sizing contract for every

now, not <input> — same "no wrapping, just scrolls sideways" mobile
   bug VTM had (see vtm-sheet.css .tenet-row textarea), same fix: grows
   via autoResizeTextarea() instead of scrolling its content off-screen. */
.tenets-content {
    padding: 1.5rem;
    background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2));
    border-radius: var(--neuro-radius);
    box-shadow: 9px 9px 11px var(--neuro-shadow-dark),
                -5px -5px 6px var(--neuro-shadow-light),
                0 0 4px var(--neuro-shadow-glow);
}

.tenet-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tenet-row:last-child {
    margin-bottom: 0;
}

.tenet-numeral {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--wta-green);
    min-width: 30px;
    text-align: right;
    padding-top: 0.5rem;
}

.tenet-row textarea {
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-white);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    resize: none;
    overflow: hidden;
}

.tenet-row textarea:focus {
    background: transparent;
    outline: none;
    border-color: var(--wta-green);
    box-shadow: 0 0 6px var(--neuro-shadow-glow);
}

/* ── Notes Textarea ──────────────────────────────────────────────── */
.notes-textarea {
    width: 100%;
    background: var(--neuro-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-white);
    padding: 0.5rem;
    box-shadow: inset 4px 4px 8px var(--neuro-shadow-dark), inset -4px -4px 8px var(--neuro-bg-2);
    box-sizing: border-box;
    resize: vertical;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95rem;
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--wta-green);
    box-shadow: inset 4px 4px 8px var(--neuro-shadow-dark), inset -4px -4px 8px var(--neuro-bg-2), 0 0 8px var(--neuro-shadow-glow);
}

.notes-textarea::placeholder {
    color: var(--text-gray);
    font-style: italic;
    opacity: 0.7;
}

/* ── XP Section ──────────────────────────────────────────────────── */
.xp-display {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.xp-value     { color: var(--wta-green); font-weight: bold; }
.xp-separator { color: var(--text-gray); margin: 0 0.4rem; }
.xp-total     { color: var(--text-white); }

.xp-subtitle {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 0.75rem;
}

.xp-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.btn-small {
    background: var(--wta-green);
    border: none;
    color: var(--bg-black);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--neuro-shadow-glow);
}

.btn-small.secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-gray);
}

.btn-small.secondary:hover {
    border-color: var(--wta-green);
    color: var(--wta-green);
    box-shadow: none;
}

.xp-form-panel {
    background: var(--neuro-bg-1);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.xp-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.xp-form-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-white);
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.xp-form-input.amount { width: 70px; }
.xp-form-input.reason { flex: 1; }

.xp-form-input:focus {
    outline: none;
    border-color: var(--wta-green);
}

.xp-form-actions {
    display: flex;
    gap: 0.5rem;
}

.xp-log-entries {
    max-height: 180px;
    overflow-y: auto;
}

.xp-log-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.xp-log-entry.add   .xp-amount { color: var(--safe-green); }
.xp-log-entry.spend .xp-amount { color: var(--danger-red); }

.xp-date   { color: var(--text-gray); font-size: 0.78rem; }
.xp-reason { color: var(--text-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-amount { font-weight: bold; }

/* ── Share Button & Modal ────────────────────────────────────────── */
.btn-share {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    color: var(--text-gray);
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: border-color 0.15s, color 0.15s;
}

.btn-share:hover {
    border-color: var(--wta-green);
    color: var(--wta-green);
}

/* Dialog (§Dialog — .hdialog recipe applied in place; see journal-theme.css) */
.share-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8000; /* modal backdrop/content tier — see z-index scale doc in sheet-layout.css */
    background: color-mix(in srgb, var(--scrim) 78%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.share-modal {
    position: relative;
    overflow: hidden;
    background-color: var(--parchment-800);
    background-image:
        var(--texture-splat),
        var(--texture-parchment),
        linear-gradient(to bottom, var(--parchment-800), var(--parchment-700));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    width: min(480px, 92vw);
    box-shadow: var(--shadow-e3), 0 0 0 1px rgba(26, 22, 18, 0.8);
}

.share-modal > * {
    position: relative;
    z-index: 1;
}

.share-modal h3 {
    font-family: 'IM Fell English', Georgia, serif;
    color: var(--heading);
    font-size: 1.235rem;
    text-transform: none;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
}

.share-modal p {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.share-modal-select {
    width: 100%;
    margin: 0 0 16px;
    padding: 6px 10px;
}

.share-modal-link-row .share-modal-select {
    margin: 0;
}

.share-modal-generate {
    background: var(--wta-green);
    color: var(--bg-black);
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 1px;
    cursor: pointer;
}

.share-modal-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--neuro-shadow-glow);
}

.share-modal-label {
    color: var(--text-gray);
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.share-modal-link-row {
    display: flex;
    gap: 8px;
    margin: 6px 0 14px;
}

.share-modal-link-input {
    flex: 1;
    background: var(--bg-black);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-white);
    font-size: 0.75rem;
    padding: 6px 10px;
    outline: none;
}

.share-modal-copy-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-white);
    font-size: 0.7rem;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.share-modal-qr {
    margin: 0 0 14px;
}

.share-modal-revoke {
    background: none;
    border: 1px solid var(--danger-red);
    border-radius: 4px;
    color: var(--danger-red);
    font-size: 0.7rem;
    padding: 5px 14px;
    cursor: pointer;
}

.share-modal-footer {
    margin-top: 18px;
    text-align: right;
}

.share-modal-close {
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    font-size: 0.75rem;
}

/* ── Back Link ───────────────────────────────────────────────────── */
.back-link {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.back-link a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.back-link a:hover {
    color: var(--wta-green);
    text-shadow: 0 0 10px color-mix(in srgb, var(--wta-green) 60%, transparent);
}

/* ── Loading / Error overlays ─────────────────────────────────────  */
/* #fossil 2026-07-19: .error-overlay half of this selector is orphaned —
   zero references. .loading-overlay is still live; selector left intact. */
.loading-overlay,
.error-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: color-mix(in srgb, var(--ink-900) 95%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000; /* full-page block tier — see z-index scale doc in sheet-layout.css */
}

.spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--wta-green);
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem auto;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Form Emphasis Strip ─────────────────────────────────────────── */
/* Homid → Glabro → Crinos → Hispo → Lupus. Same visual weight as the
   Hunter sheet's Despair button (.despair-toggle-button, htr-sheet.css) —
   a large, unmissable strip, not a form field. */
.form-strip-container {
    margin-bottom: 1.5rem;
}

.form-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2));
    border-radius: var(--neuro-radius);
    box-shadow:
        18px 18px 21px var(--neuro-shadow-dark),
        -18px -18px 21px var(--neuro-shadow-light);
    padding: 1.25rem;
}

.form-stage-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 100px;
    background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2));
    border: 2px solid var(--border-color);
    border-radius: var(--neuro-radius);
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.form-stage-btn:hover {
    border-color: var(--wta-green);
    transform: translateY(-2px);
}

/* CSS-masked (see .dot-tracker.rage-dot-tracker .dot for the same
   technique, and the Harano/Hauglosk/Rage glyphs it was first used
   for) instead of a plain <img> — that's what lets the glyph itself
   change color on selection below, which a raster image can't do via
   filter alone with any precision. Sized/positioned as a large,
   mostly-transparent background watermark (85% of the button,
   centered, low opacity) behind .form-stage-label rather than a small
   foreground icon stacked above the text. Percentage sizing here means
   it scales with the button automatically at the responsive
   breakpoints below, without its own per-breakpoint overrides. */
.form-stage-glyph {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 85%;
    height: 85%;
    background-color: var(--border-color);
    opacity: 0.18;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.form-stage-label {
    position: relative;
    z-index: 1;
    color: var(--text-gray);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Active form — button border/glow/background use --accent (WTA
   green); the watermark glyph uses --accent-alt (Rage red). */
.form-stage-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-dark));
}

.form-stage-btn.active .form-stage-glyph {
    background-color: var(--accent-alt);
    opacity: 0.4;
}

.form-stage-btn.active .form-stage-label {
    color: var(--accent);
}

/* Rage 0 gating — supernatural forms (Glabro/Crinos/Hispo) lock out;
   Homid/Lupus stay clickable. Same dimmed-and-inert treatment as the
   disabled-state utility classes used elsewhere on this sheet
   (portrait upload-in-progress boxes: opacity-50 pointer-events-none). */
.form-stage-btn.form-stage-locked {
    opacity: var(--disabled-opacity, 0.4);
    cursor: not-allowed;
}

.form-stage-btn.form-stage-locked:hover {
    border-color: var(--border-color);
    transform: none;
}

.wta-rage-zero-note {
    color: var(--accent-alt, #C81E32);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem 0;
    text-align: center;
}

/* Active form's physical dice-bonus reminder — informational note below
   the form strip, same size/spacing as .wta-rage-zero-note above but
   using --wta-green (informational) rather than --accent-alt (alarm). */
.wta-form-dice-reminder {
    color: var(--wta-green);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin: 0.75rem 0 0 0;
    text-align: center;
}

/* ── Portrait Container ──────────────────────────────────────────── */
/* Base .portrait-box/.alias-input styling shared with HTR/VTM comes from
   sheet-layout.css (loaded globally); .size-hint/.size-hint-small are
   each sheet's own (WTA's below). The grid layout mirrors VTM's
   portrait-grid-fixed proportions. .wta-portrait-frame previously added
   a torn/jagged inner border here (removed pending a design rework); it
   stays as the positioning context for .alias-overlay below. */
.wta-portrait-frame {
    position: relative;
}

.wta-portrait-frame .portrait-grid-fixed {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 300px auto;
    gap: 1rem;
    min-height: 600px;
    position: relative;
}

.wta-portrait-frame .portrait-box {
    position: relative;  /* positioning context for .portrait-hint below */
    background-color: var(--bg-dark);
    box-shadow: 9px 9px 11px var(--neuro-shadow-dark),
                -5px -5px 6px var(--neuro-shadow-light);
}

.wta-portrait-frame .portrait-box:hover {
    box-shadow: 9px 9px 11px var(--neuro-shadow-dark),
                -5px -5px 6px var(--neuro-shadow-light),
                0 0 30px var(--neuro-shadow-glow);
}

.wta-portrait-frame .portrait-body {
    grid-column: 1;
    grid-row: 1;
    width: 200px;
    height: 300px;
}

.wta-portrait-frame .hobby-stack {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 300px;
}

.wta-portrait-frame .hobby-stack > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wta-portrait-frame .portrait-hobby {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.wta-portrait-frame .portrait-face {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    height: 300px;
}

.wta-portrait-frame .portrait-placeholder,
.wta-portrait-frame .portrait-placeholder-small {
    color: var(--text-gray);
    font-size: 1.1rem;
    text-align: center;
    user-select: none;
}

.wta-portrait-frame .portrait-placeholder-small {
    font-size: 1.6rem;
}

.wta-portrait-frame .hobby-icon {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.2rem;
}

.wta-portrait-frame .size-hint,
.wta-portrait-frame .size-hint-small {
    display: block;
    color: var(--text-gray);
    opacity: 0.7;
    margin-top: 0.25rem;
}

.wta-portrait-frame .size-hint {
    font-size: 0.75rem;
}

.wta-portrait-frame .size-hint-small {
    font-size: 0.6rem;
}

/* "Double tap to upload" — hidden until the box has been hovered a beat
   (mirrors .divider-tooltip's delayed-fade in vtm-sheet.css, same reason:
   avoid flashing on every incidental pass). Wraps instead of nowrap so
   it still fits inside the small hobby-icon boxes. */
.wta-portrait-frame .portrait-hint {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    max-width: calc(100% - 12px);
    text-align: center;
    background: var(--leather-800);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Special Elite', Courier, monospace;
    font-size: 8px;
    line-height: 1.3;
    color: var(--text-gray);
    letter-spacing: 0.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 4;
}

.wta-portrait-frame .portrait-box:hover .portrait-hint {
    opacity: 1;
}

.wta-portrait-frame .alias-overlay {
    position: absolute;
    top: 250px;
    left: 0;
    width: 200px;
    z-index: 6;
    padding: 0.5rem;
    pointer-events: auto;
}

/* .alias-input's shared color: var(--accent) (sheet-layout.css) resolves
   to --wta-500 here — a dark camo green that reads as barely-there
   against the portrait box's dark background (~3:1 contrast). --wta-300,
   the same lighter-ramp-step fix splat-picker.css uses for this exact
   legibility problem, brings it to a properly readable ~5:1. */
.wta-portrait-frame .alias-input {
    color: var(--wta-300);
}
.wta-portrait-frame .alias-input::placeholder {
    color: color-mix(in srgb, var(--wta-300) 45%, transparent);
}

/* ── Vitals Container (Health / Willpower / Rage) ────────────────── */
/* #note — Health=green/Willpower=blue color uniformity across HTR/VTM/WTA
   is a pending design-system decision (not yet made — see Claude Design
   conversation). This container is a likely edit target once that lands;
   current WTA token usage below is intentionally left as-is for this pass. */
/* Unscoped from .vitals-container — the Harano/Hauglosk tracker group below
   (outside Vitals) reuses the same heading treatment. */
.tracker-group {
    margin-bottom: 1.25rem;
}

.tracker-group:last-child {
    margin-bottom: 0;
}

.tracker-group-label {
    color: var(--wta-green);
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Health/Willpower: puts the −/+ controls on the same line as the
   heading, left-aligned right after it with a gap (not pushed to the
   row's far right) — "HEALTH   − 14 +". Rage has no adjustable max, so
   its .tracker-group-label stays standalone (own line, own
   margin-bottom) and this wrapper doesn't apply there.
   .tracker-group-label/.tracker-max-controls both carry their own
   margin-bottom for their standalone contexts elsewhere; reset to 0
   here so nesting them as flex siblings in one row doesn't add extra
   space beneath the row. */
.tracker-group-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    margin-bottom: 0.5rem;
}

.tracker-group-header .tracker-group-label,
.tracker-group-header .tracker-max-controls {
    margin-bottom: 0;
}

/* Rage lives in Vitals now — still the only WTA tracker using --accent-alt. */
.vitals-container .tracker-group-label.rage-label {
    color: var(--accent-alt);
}

/* ── Harano / Hauglosk / Renown Container ────────────────────────── */
/* 5-dot trackers reusing the shared .dot diamond visual style (Rage's/
   Renown's pattern), but filling right-to-left per W5 (see
   getConditionBoxClass/clickConditionBox) — Health/Willpower's box fill
   was changed to match this same right-to-left direction (see
   getHealthBoxClass/getWpBoxClass's rank calc). Color treatment: see
   .dot.harano-filled/.dot.hauglosk-filled above (--gold-500/--spirit-500
   — distinct from Renown's green and Rage's red, not the old generic
   warning-yellow/danger-red either). */
/* justify-content:center + .condition-tracker sized to content (not
   flex:1) so Harano/Hauglosk sit close together in the middle of the
   row instead of each stretching to fill its own 50% half — which
   pulled them apart toward the row's left/right edges. */
.condition-tracker-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.condition-tracker {
    flex: 0 0 auto;
}

/* Sized to visually match Willpower's .tracker-box (30px) directly
   above. Shaped like the Enemy/Danger glyph (frontend/static/images/
   lore/Glyphs_Enemy_Danger.png) instead of the shared diamond — same
   CSS-mask technique as Rage's glyph dots (see .dot-tracker.
   rage-dot-tracker .dot above), confirmed as a clean transparent-
   background silhouette via its alpha channel before using it. No
   border (mask doesn't clip reliably) or diamond rotate. 21px was
   originally chosen so the rotated diamond's footprint (width*sqrt(2))
   matched Willpower's 30px boxes; kept as the mask's contain-fit box
   size too since it's already close to right for this glyph's own
   aspect ratio. */
.condition-tracker-row .dot {
    width: 21px;
    height: 21px;
    transform: none;
    border-radius: 0;
    border: none;
    -webkit-mask-image: url('/static/images/lore/Glyphs_Enemy_Danger.png');
    mask-image: url('/static/images/lore/Glyphs_Enemy_Danger.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.condition-tracker-row .dot.empty {
    background: var(--border-color);
}

.condition-tracker-row .dot.harano-filled,
.condition-tracker-row .dot.hauglosk-filled {
    border-color: transparent;
    box-shadow: none;
}

.harano-label {
    color: var(--gold-500);
}

.hauglosk-label {
    color: var(--spirit-500);
}

/* Center everything in Vitals (now including Harano/Hauglosk, moved
   here from the Renown container) and in Renown itself — the
   Health/Willpower/Harano/Hauglosk heading+value row, box trackers, dot
   trackers, and the Renown name/value row (h2 section headings are
   centered sheet-wide via .sheet-section h2 instead). Renown's
   name+value pair keeps a gap (rather than the space-between it had
   when left/right-aligned) so centering doesn't collide them together. */
.vitals-container .tracker-group-label {
    text-align: center;
}

.vitals-container .tracker-group-header,
.vitals-container .tracker-bar,
.vitals-container .dot-tracker {
    justify-content: center;
}

.renown-container .dot-tracker {
    text-align: center;
    justify-content: center;
}

.renown-container .renown-label {
    justify-content: center;
    gap: 0.75rem;
}

/* ── Desire/Ambition (styled like Tribe Ban/Favor below) ──────────── */
/* Same label-above-plain-text recipe as .tribe-ban-favor-label/-text
   (own classes rather than reusing those directly — "tribe-ban-favor"
   naming would be misleading applied to Desire/Ambition), but still an
   editable, auto-resizing textarea underneath: no border/background/
   box-shadow at rest, and only a faint bottom border on focus so it's
   still discoverable as an input despite reading as flowing prose. */
.wta-prose-field {
    margin-bottom: 0.8rem;
}

.wta-prose-label {
    display: block;
    color: var(--wta-green);
    font-size: 0.75rem;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.wta-prose-textarea {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    padding: 0;
    color: var(--text-white);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.wta-prose-textarea:focus {
    outline: none;
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--wta-green);
}

/* ── Tribe Ban / Favor Display ───────────────────────────────────── */
.tribe-ban-favor {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.tribe-ban-favor-row {
    margin-bottom: 0.5rem;
}

.tribe-ban-favor-row:last-child {
    margin-bottom: 0;
}

.tribe-ban-favor-label {
    display: block;
    color: var(--wta-green);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.tribe-ban-favor-text {
    color: var(--text-white);
    font-size: 0.85rem;
    line-height: 1.4;
}

.tribe-ban-favor-empty {
    color: var(--text-gray);
    font-size: 0.8rem;
    font-style: italic;
}

/* Gifts & Rites / Advantages side by side in column-two instead of
   stacked. Each keeps its own .sheet-section margin-bottom reset to 0
   here so the row's own margin-bottom is the only bottom spacing
   before Notes — with two independent-height grid items, letting both
   keep their 1.5rem margin-bottom could leave uneven trailing space
   depending on which one is taller. Falls back to a single stacked
   column at the same 1200px breakpoint everything else on this sheet
   collapses at (see Responsive section). */
.wta-gifts-advantages-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.wta-gifts-advantages-row .sheet-section {
    margin-bottom: 0;
}

/* Chronicle Tenets / Possessions side by side — same row pattern as
   Gifts & Rites/Advantages above. */
.wta-tenets-possessions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.wta-tenets-possessions-row .sheet-section {
    margin-bottom: 0;
}

/* ── Multi-Category Containers (Advantages, Gifts & Rites) ────────── */
/* Shared category scaffold: dot-rated Backgrounds/Merits/Flaws rows in
   Advantages, and plain list Gifts/Rites entries in the merged Gifts &
   Rites container — both structured as labeled sub-lists within one
   .sheet-section, distinct from HTR's advantages-section (htr-sheet.css). */
.wta-category-container .advantage-category {
    margin-bottom: 1.25rem;
}

.wta-category-container .advantage-category:last-child {
    margin-bottom: 0;
}

.wta-category-container .advantage-category-label {
    color: var(--wta-green);
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--border-color);
}

.wta-advantage-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* input[type="text"] in the selector beats journal-theme.css's shared
   input[type="text"] rule on specificity, same fix as .header-input
   above — this class's own background was silently losing to
   journal-theme's parchment gradient before. */
input[type="text"].wta-advantage-name-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-white);
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    box-shadow: inset 2px 2px 4px var(--neuro-shadow-dark), inset -2px -2px 4px var(--neuro-bg-2);
}

input[type="text"].wta-advantage-name-input:focus {
    background: transparent;
    outline: none;
    border-color: var(--wta-green);
}

.wta-advantage-dots {
    flex-shrink: 0;
    gap: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    /* .wta-main-grid (25%/1fr) needs its own line here — the base
       .sheet-grid-two-column rule below has lower specificity
       (.sheet-grid-two-column.wta-main-grid, declared unconditionally
       earlier in this file, beats a plain .sheet-grid-two-column
       selector regardless of which one is inside a media query) — so
       without this, column-one (Vitals/Identity/etc.) stayed stuck at
       25% width even below this breakpoint instead of collapsing to a
       single column like everything else here. */
    .sheet-grid-two-column,
    .sheet-grid-two-column.wta-main-grid {
        grid-template-columns: 1fr;
    }
    .attributes-three-column,
    .skills-three-column {
        grid-template-columns: 1fr;
    }
    /* Divider only makes sense between side-by-side columns — reset it
       once these stack full-width below this breakpoint. */
    .attributes-three-column > div:not(:first-child),
    .skills-three-column > div:not(:first-child) {
        border-left: none;
        padding-left: 0;
    }
    .wta-gifts-advantages-row {
        grid-template-columns: 1fr;
    }
    .wta-tenets-possessions-row {
        grid-template-columns: 1fr;
    }
    .form-strip {
        grid-template-columns: repeat(5, 1fr);
        padding: 0.75rem;
        gap: 0.4rem;
    }
    /* .form-stage-glyph no longer needs its own override here — it's
       sized as a percentage of .form-stage-btn now, so it scales down
       automatically with the smaller button below. */
    .form-stage-btn {
        min-height: 70px;
    }
    .form-stage-label {
        font-size: 0.65rem;
    }
    .wta-portrait-frame .portrait-grid-fixed {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
    }
    .wta-portrait-frame .portrait-body,
    .wta-portrait-frame .hobby-stack,
    .wta-portrait-frame .portrait-face {
        height: auto;
        min-height: 220px;
    }
    .wta-portrait-frame .alias-overlay {
        width: 100%;
        top: auto;
        position: static;
    }

/* Single-column layout has room to spare and dots grow for touch below
       (see .dot in the 768px block) — restore the roomier default gap so
       larger touch targets don't end up packed together. */
    .attributes-three-column .dot-tracker,
    .skills-three-column .dot-tracker {
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .wta-sheet {
        padding: 1rem;
    }
    .character-title {
        font-size: 1.8rem;
    }
    .header-details {
        flex-direction: column;
        gap: 0.5rem;
    }
    .tracker-box {
        width: 26px;
        flex-basis: 26px;
    }
    .dot {
        width: 18px;
        height: 18px;
    }
    /* Keep all 5 Form stage buttons on one row instead of wrapping to
       3+2 — the 1200px block already does repeat(5, 1fr); this used to
       drop back to 3 columns here, which was the actual wrap culprit.
       Padding/gap/button sizing shrink further so labels stay legible
       at the narrower per-button width. */
    .form-strip {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.35rem;
        padding: 0.6rem;
    }
    .form-stage-btn {
        min-height: 56px;
        padding: 0.4rem 0.2rem;
        gap: 0.25rem;
    }
    .form-stage-label {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }
    /* .condition-tracker-row's gap:3rem (desktop, unconditional) was sized
       for horizontal space between side-by-side Harano/Hauglosk — once
       flex-direction flips to column here, that same 3rem becomes vertical
       gap instead, leaving a huge blank gap between the two stacked
       trackers. Shrink it to match the row's own internal spacing. */
    .condition-tracker-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

/* Character Portraits — collapse the 200px/1fr, 2-row grid to a single
       column (mirrors the identical fix already applied to VTM's
       .portrait-grid-fixed). At the 1200px breakpoint above, .alias-overlay
       re-enters the grid via position:static with no explicit grid-column/
       grid-row, which left its placement ambiguous; giving every child an
       explicit grid-column:1 here fixes that and, since alias-overlay
       precedes portrait-face in DOM order, puts the Alias directly above
       the Headshot box as intended. */
    .wta-portrait-frame .portrait-grid-fixed {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }
    .wta-portrait-frame .portrait-body {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        height: auto;
        min-height: 300px;
    }
    .wta-portrait-frame .hobby-stack {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .wta-portrait-frame .hobby-stack > div {
        flex: 1 1 45%;
    }
    .wta-portrait-frame .alias-overlay {
        position: static;
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        margin: 0.5rem 0;
    }
    .wta-portrait-frame .portrait-face {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        height: 300px;
    }

/* Section reorder (mobile only) — column-one/column-two already stack
       full-width here (the 1200px block collapses .wta-main-grid to a
       single column), but that just concatenates column-one's sections
       then column-two's. display:contents removes each column's own box
       without touching the DOM, promoting their children to be direct
       grid items of .wta-main-grid so `order` below can freely interleave
       sections from both original columns into: Portraits, Identity,
       Vitals+Renown, Attributes, Skills, Possessions, Gifts&Rites+
       Advantages, Touchstones, Chronicle Tenets, Notes, Experience.
       .wta-tenets-possessions-row also gets display:contents so
       Possessions can move independently of Chronicle Tenets — the two
       no longer need to stay paired once Possessions moves earlier in
       the stack; each keeps its normal .sheet-section margin-bottom
       (restored below) now that the row's own margin-bottom is gone. */
    .wta-main-grid > .column-one,
    .wta-main-grid > .column-two,
    .wta-tenets-possessions-row {
        display: contents;
    }
    .wta-tenets-possessions-row .sheet-section {
        margin-bottom: 1.5rem;
    }
    .portrait-six-box { order: 1; }
    .wta-identity-section { order: 2; }
    .vitals-renown-row { order: 3; }
    .wta-attributes-section { order: 4; }
    .wta-skills-section { order: 5; }
    .wta-possessions-section { order: 6; }
    .wta-gifts-advantages-row { order: 7; }
    .wta-touchstones-section { order: 8; }
    .chronicle-tenets-numbered { order: 9; }
    .wta-notes-section { order: 10; }
    .wta-experience-section { order: 11; }
}