/* Beast identity is separate from coach profile/BJJ belt styling. */
.app-shell{align-content:start}
.workspace{align-self:start;margin-top:0;margin-bottom:0}
#sidebar-beast[hidden],.mobile-beast[hidden]{display:none}
.sidebar-beast-link{display:grid;gap:9px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#111c22);text-decoration:none;color:var(--ink)}
.sidebar-beast-link>.eyebrow{margin:0;font-size:9px;letter-spacing:.8px}
.sidebar-beast-content{display:flex;gap:9px;align-items:center;min-width:0}
.sidebar-beast-content>span:last-child{display:grid;gap:6px;min-width:0}
.sidebar-beast-content strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.sidebar-beast-content small{font-size:10px;color:var(--muted)}
.sidebar-beast-link:hover,.sidebar-beast-link:focus-visible,.mobile-beast:focus-visible{border-color:var(--lime);outline:2px solid var(--lime);outline-offset:2px}
.mobile-beast{display:none}
.beast-art{position:relative;display:inline-grid;place-items:center;flex-shrink:0;isolation:isolate;aspect-ratio:1;vertical-align:middle;overflow:hidden}
.beast-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.beast-art-compact{width:64px}.beast-art-team{width:128px}.beast-art-large{width:256px;max-width:100%}
.beast-art.is-pending{border:1px dashed var(--line);border-radius:9px;color:var(--muted);font:500 10px 'DM Mono',monospace;text-align:center;padding:5px}
.beast-art-large.is-pending{font-size:13px;background:var(--surface,#111c22)}
.beast-belt{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;line-height:1.4}
.beast-belt:before{content:'';width:12px;height:5px;flex-shrink:0;border:1px solid #89939a;background:var(--beast-belt-color,transparent)}
[data-beast-belt="white"]{--beast-belt-color:#f3f1e8}[data-beast-belt="grey"]{--beast-belt-color:#969da3}[data-beast-belt="yellow"]{--beast-belt-color:#f4cf4b}[data-beast-belt="orange"]{--beast-belt-color:#ed923c}[data-beast-belt="green"]{--beast-belt-color:#479b63}[data-beast-belt="blue"]{--beast-belt-color:#377ddd}[data-beast-belt="purple"]{--beast-belt-color:#945ac9}[data-beast-belt="brown"]{--beast-belt-color:#966148}[data-beast-belt="black"]{--beast-belt-color:#111318}[data-beast-belt="coral"]{--beast-belt-color:linear-gradient(90deg,#cb5353 50%,#171b20 50%)}
.coach-card{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:16px;align-items:start}
.coach-card-content{width:100%}
.coach-beast{display:grid;justify-items:center;align-content:start;gap:9px;text-align:center;min-width:0}
.coach-beast>div{display:grid;justify-items:center;gap:4px;width:100%;min-width:0}
.coach-beast small{font:500 8px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.coach-beast strong{font-size:11px;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}
.coach-beast.is-unavailable{font-size:10px;color:var(--muted);padding-top:12px}
.beast-page{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,560px);gap:28px;align-items:start}
.beast-preview{display:grid;justify-items:center;gap:13px;padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--surface,#111c22);text-align:center;min-width:0}
.beast-preview .eyebrow{margin:4px 0 0}.beast-preview h2{margin:0;font-size:24px;overflow-wrap:anywhere}
.beast-identity{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;color:var(--ink);font-size:12px}.beast-identity>span[aria-hidden]{color:var(--muted)}.beast-art-note{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.65;max-width:28ch}
.beast-details{display:grid;gap:22px;min-width:0}.beast-details button{min-height:44px}.beast-details button:disabled{opacity:.6;cursor:wait}
.beast-name-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.beast-name-actions button{flex:1 1 150px}.beast-name-actions .secondary-button{background:#18252d}
.beast-profile{padding:23px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(24,37,45,.72),rgba(10,12,18,.86))}.beast-profile h2{margin:0 0 10px;font-size:18px}
.beast-profile p{font-size:12px;color:var(--muted);line-height:1.6}.beast-profile-intro{max-width:42ch;margin:0 0 19px}.beast-profile dl{display:grid;grid-template-columns:1fr 1fr;gap:0;font-size:12px}
.beast-profile dt,.beast-profile dd{padding:10px 0;border-top:1px solid rgba(73,85,94,.45)}.beast-profile dt{color:var(--muted)}.beast-profile dd{margin:0;text-align:right;font-weight:800;overflow-wrap:anywhere}.beast-profile-note{margin:17px 0 0;max-width:48ch}
.beast-progression{display:grid;gap:18px;margin-top:18px;padding-top:17px;border-top:1px solid rgba(73,85,94,.45)}
.beast-progression h3{margin:0;font-size:13px}.beast-growth{display:grid;gap:9px}.beast-growth-heading,.beast-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.beast-growth-heading strong{color:var(--lime);font:800 11px 'DM Mono',monospace}.beast-progress-track{height:8px;overflow:hidden;border:1px solid #3c4b53;border-radius:99px;background:#0b1115}.beast-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--lime)}.beast-growth small,.beast-path>small{color:var(--muted);font-size:10px;line-height:1.5}
.beast-path,.beast-quests,.beast-quest-completed,.beast-journeys,.beast-badges{display:grid;gap:11px;padding-top:17px;border-top:1px solid rgba(73,85,94,.45)}.beast-section-heading>span{padding:5px 8px;border-radius:99px;background:rgba(190,255,76,.12);color:var(--lime);font:800 9px 'DM Mono',monospace;text-transform:uppercase}.beast-path ul{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;padding:0;list-style:none}.beast-path li{display:grid;gap:3px;padding:9px;border-radius:8px;background:rgba(8,13,17,.55)}.beast-path li span{color:var(--muted);font-size:9px}.beast-path li strong{font-size:11px}
.beast-quests>div,.beast-journeys>div{display:grid;gap:8px}.beast-quests article,.beast-journeys article{padding:11px;border:1px solid rgba(73,85,94,.52);border-radius:9px;background:rgba(8,13,17,.42)}.beast-quests article>header,.beast-journeys article>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.beast-quests article>header strong,.beast-journeys article>header strong{font-size:12px}.beast-quests article>header small,.beast-journeys article>header small{color:var(--muted);font:800 8px 'DM Mono',monospace;text-transform:uppercase;text-align:right}.beast-quests article>p,.beast-journeys article>p{margin:5px 0 9px;font-size:10px;line-height:1.5}.beast-quests footer,.beast-journeys footer{display:flex;justify-content:space-between;align-items:center;gap:10px}.beast-quests footer span,.beast-journeys footer span{color:var(--lime);font:800 9px 'DM Mono',monospace}.beast-quests footer small,.beast-journeys footer small{color:var(--muted);font-size:9px;text-align:right}.beast-journeys article{border-color:rgba(155,108,255,.28);background:rgba(39,29,64,.2)}.beast-journeys article.is-complete{border-color:rgba(190,255,76,.3)}.beast-journey-worlds{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}.beast-journey-worlds span{padding:4px 6px;border-radius:99px;background:rgba(73,85,94,.2);color:var(--muted);font-size:8px}.beast-journey-worlds .is-complete{background:rgba(190,255,76,.1);color:var(--lime)}
.beast-quest-completed>div{display:grid;gap:7px}.beast-quest-completed article{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(190,255,76,.28);border-radius:9px;background:rgba(190,255,76,.06)}.beast-quest-completed article>span{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1px solid rgba(190,255,76,.45);color:var(--lime);font:800 11px 'DM Mono',monospace}.beast-quest-completed article>div{display:grid;gap:3px;min-width:0}.beast-quest-completed strong{font-size:10px;line-height:1.4}.beast-quest-completed small{color:var(--lime);font:800 9px 'DM Mono',monospace}
.beast-badges>div{display:flex;flex-wrap:wrap;gap:7px}.beast-badges>div>span{display:grid;gap:2px;padding:7px 9px;border:1px solid rgba(73,85,94,.52);border-radius:8px;background:rgba(8,13,17,.42);font-size:9px;color:var(--muted)}.beast-badges b{color:var(--ink);font-size:10px}.beast-empty-note{margin:0!important;font-size:10px!important}
@media(min-width:901px){.sidebar{gap:17px}.coach-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}}
@media(max-width:1100px) and (min-width:901px){.beast-page{grid-template-columns:1fr}.beast-preview{max-width:560px;width:100%}}
@media(max-width:900px){
  .coach-card{grid-template-columns:minmax(0,1fr) 80px}.coach-beast .beast-art{width:64px}
  #sidebar-beast{display:none}.sidebar{grid-template-columns:minmax(0,1fr) auto auto}
  .mobile-beast{display:inline-flex;grid-column:2;grid-row:1;min-width:44px;min-height:44px;padding:8px 10px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;color:var(--ink);text-decoration:none;font-size:11px;font-weight:800}
  .sidebar-account{grid-column:3;grid-row:1;min-width:200px}
  .beast-page{grid-template-columns:minmax(260px,1fr) minmax(0,1fr);gap:18px}
}
@media(max-width:620px){
  .sidebar{grid-template-columns:minmax(0,1fr) auto}
  .mobile-beast{grid-column:2;grid-row:1;align-self:center;justify-self:end;width:52px;height:44px;min-width:52px}
  .mobile-primary-navigation{grid-column:1/-1;grid-row:2}
  .sidebar-navigation{grid-column:1/-1;grid-row:3!important}
  .sidebar-account{grid-column:1/-1;grid-row:4!important;min-width:0;justify-self:stretch}
  .coach-card{grid-template-columns:1fr;gap:16px}
  .coach-beast{display:flex;gap:12px;justify-content:flex-start;text-align:left;border-top:1px solid var(--line);padding-top:13px}
  .coach-beast>div{justify-items:start;width:auto;flex:1}.coach-beast .beast-art{width:64px}.coach-beast.is-unavailable{justify-content:space-between}
  .beast-page{grid-template-columns:1fr}.beast-preview{padding:20px}.beast-details .form-card{padding:22px}.beast-name-actions{display:grid;grid-template-columns:1fr}.beast-name-actions button{width:100%}.beast-profile{padding:19px}.beast-path ul{grid-template-columns:1fr}.beast-quests footer,.beast-journeys footer{align-items:flex-start;flex-direction:column}.beast-quests footer small,.beast-journeys footer small{text-align:left}
}

/* Personal Beast pilot. Shared Team, profile quests and navigation widgets above
   retain their existing styles. Scoped specificity beats late RPG/Light owners. */
.workspace:has(:where(.beast-page,.beast-state)) .topbar .page-header-copy #page-title {
  margin: 0; padding: 0; width: auto; border: 0; background: none; clip-path: none;
  font: 800 calc(2rem * var(--text-display-scale))/1.15 var(--font-body);
  letter-spacing: -.035em; text-shadow: none; white-space: normal;
}
.workspace:has(:where(.beast-page,.beast-state)) #page-title::after { display: none; }
.workspace:has(:where(.beast-page,.beast-state)) .topbar { padding-top: 0; margin-bottom: 32px; }
.workspace:has(:where(.beast-page,.beast-state)) .app-history-controls { position: static; width: fit-content; margin-bottom: 24px; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.workspace:has(:where(.beast-page,.beast-state)) .app-history-controls button { min-height: 44px; border-radius: 6px; }
#view:has(.beast-page)::before { display: none; }
#view .beast-page { display: grid; grid-template-columns: minmax(240px,320px) minmax(0,1fr); gap: 32px 48px; grid-template-areas: "identity progress" "name progress"; grid-template-rows: auto 1fr; width: 100%; max-width: 1120px; min-width: 0; margin: 0 auto; color: var(--text-primary); font: 500 calc(.9375rem * var(--text-reading-scale))/1.65 var(--font-body); overflow-wrap: anywhere; }
#view .beast-page * { min-width: 0; box-sizing: border-box; }
#view .beast-page :is(h2,h3) { font-family: var(--font-body); color: var(--text-primary); font-weight: 800; text-transform: none; letter-spacing: -.02em; line-height: 1.3; text-shadow: none; }
#view .beast-page h2 { font-size: calc(1.375rem * var(--text-display-scale)); }
#view .beast-page h3 { font-size: calc(1.125rem * var(--text-display-scale)); }
#view .beast-page :is(.beast-preview,.beast-profile) { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; box-shadow: none; }
#view .beast-page :is(.beast-preview,.beast-profile)::before,#view .beast-page :is(.beast-preview,.beast-profile)::after { display: none; }
#view .beast-preview { grid-area: identity; align-content: start; gap: 12px; }
#view .beast-preview .beast-art-large { width: 256px; max-width: 100%; filter: drop-shadow(0 10px 8px var(--shadow-color)); }
#view .beast-preview .eyebrow { color: var(--accent-gold); font-size: calc(.8125rem * var(--text-metadata-scale)); letter-spacing: .08em; }
#view .beast-preview #beast-display-name { width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--text-primary); font: 700 calc(2rem * var(--text-display-scale))/1.15 var(--font-display); letter-spacing: .01em; }
#view .beast-page .beast-identity { font: 600 calc(.875rem * var(--text-metadata-scale))/1.5 var(--font-body); }
#view .beast-page .beast-belt { font-size: inherit; color: var(--text-secondary); }
#view .beast-page :is(.beast-art-note,.field-help) { color: var(--text-muted); font-size: calc(.8125rem * var(--text-metadata-scale)); line-height: 1.6; }
#view .beast-page .beast-details { grid-area: progress; display: block; }
#view .beast-page .beast-profile>h2 { margin: 0 0 8px; padding: 0; border: 0; }
#view .beast-page .beast-profile p { font-size: calc(.9375rem * var(--text-reading-scale)); line-height: 1.65; color: var(--text-secondary); }
#view .beast-page .beast-profile-intro { margin: 0 0 20px; max-width: 60ch; }
#view .beast-page .beast-profile dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 24px; margin: 0; font: inherit; }
#view .beast-page .beast-profile dt { grid-row: 1; padding: 0; border: 0; color: var(--text-muted); font: 700 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
#view .beast-page .beast-profile dd { grid-row: 2; padding: 0; border: 0; text-align: left; font-size: calc(.9375rem * var(--text-reading-scale)); }
#view .beast-page .beast-progression { gap: 32px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--divider); }
#view .beast-page .beast-growth { gap: 12px; }
#view .beast-page .beast-growth-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; align-items: baseline; }
#view .beast-page .beast-growth-heading h3 { grid-column: 1/-1; }
#view .beast-page .beast-growth-heading strong { color: var(--accent-pink); font: 800 calc(1.75rem * var(--text-display-scale))/1.2 var(--font-body); letter-spacing: -.025em; }
#view .beast-page .beast-total-xp { color: var(--text-secondary); font-size: calc(.875rem * var(--text-metadata-scale)); }
#view .beast-page .beast-progress-track { height: 12px; border-color: var(--border-primary); box-shadow: none; }
#view .beast-page .beast-progress-track span { box-shadow: none; }
#view .beast-page :is(.beast-growth>small,.beast-path>small,.beast-profile-note) { color: var(--text-muted); font: 500 calc(.8125rem * var(--text-metadata-scale))/1.6 var(--font-body); }
#view .beast-page :is(.beast-path,.beast-quests,.beast-quest-completed,.beast-journeys,.beast-badges) { gap: 16px; padding-top: 24px; border-top: 1px solid var(--divider); }
#view .beast-page .beast-section-heading { flex-wrap: wrap; }
#view .beast-page .beast-section-heading>span { background: var(--accent-green-wash); border: 0; border-radius: 4px; color: var(--status-success); font: 700 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); text-transform: none; }
#view .beast-page .beast-path ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
#view .beast-page .beast-path li { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 4px; }
#view .beast-page .beast-path li span { color: var(--text-muted); font-size: calc(.8125rem * var(--text-metadata-scale)); }
#view .beast-page .beast-path li strong { font-size: calc(1rem * var(--text-reading-scale)); }
/* Sage remains a character guide, not an AI chat. Treat only this full quest board. */
#view .beast-page .dojo-sage-quest-guide { grid-template-columns: 1fr; gap: 20px; opacity: 1; }
#view .beast-page .dojo-sage-quest-guide::after { display: none; }
#view .beast-page .dojo-sage-cue--quest-guide { grid-template-columns: 80px minmax(0,1fr); padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; box-shadow: none; }
#view .beast-page .dojo-sage-cue--quest-guide::before,#view .beast-page .dojo-sage-cue--quest-guide::after { display: none; }
#view .beast-page .dojo-sage-portrait { border: 0; aspect-ratio: auto; background: none; }
#view .beast-page .dojo-sage-portrait img { min-height: 0; aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; }
#view .beast-page .dojo-sage-dialogue { padding: 0 0 0 12px; background: none; }
#view .beast-page .dojo-sage-dialogue p { margin: 8px 0 0; color: var(--text-secondary); font: 500 calc(.9375rem * var(--text-reading-scale))/1.6 var(--font-body); }
#view .beast-page .dojo-sage-context { color: var(--accent-violet); font: 700 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); letter-spacing: 0; }
#view .beast-page .dojo-sage-identity strong { color: var(--text-primary); font: 800 calc(.9375rem * var(--text-reading-scale))/1.4 var(--font-body); }
#view .beast-page .dojo-sage-quest-board { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
#view .beast-page .beast-quests { padding-top: 0; border-top: 0; }
#view .beast-page :is(.beast-quests,.beast-journeys)>div { gap: 0; }
#view .beast-page :is(.beast-quests,.beast-journeys) article { padding: 20px 0; border: 0; border-top: 1px solid var(--divider); border-radius: 0; background: none; box-shadow: none; }
#view .beast-page :is(.beast-quests,.beast-journeys) article>header { flex-wrap: wrap; gap: 8px 16px; }
#view .beast-page :is(.beast-quests,.beast-journeys) article>header strong { font: 800 calc(1rem * var(--text-reading-scale))/1.5 var(--font-body); }
#view .beast-page :is(.beast-quests,.beast-journeys) article>header small { color: var(--text-muted); font: 600 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); text-align: left; text-transform: none; }
#view .beast-page :is(.beast-quests,.beast-journeys) article>p { margin: 8px 0 12px; font-size: calc(.9375rem * var(--text-reading-scale)); }
#view .beast-page :is(.beast-quests,.beast-journeys) footer { gap: 8px 16px; flex-wrap: wrap; }
#view .beast-page :is(.beast-quests,.beast-journeys) footer span { color: var(--text-secondary); font: 700 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); }
#view .beast-page :is(.beast-quests,.beast-journeys) footer small { color: var(--accent-violet); font-size: calc(.8125rem * var(--text-metadata-scale)); text-align: left; }
#view .beast-page .beast-quests .beast-quest-pending footer span { color: var(--status-warning); }
#view .beast-page .beast-journeys .is-complete footer span { color: var(--status-success); }
#view .beast-page .beast-journey-worlds { gap: 8px; margin: 0 0 12px; }
#view .beast-page .beast-journey-worlds span { color: var(--text-muted); background: var(--surface-secondary); border-radius: 4px; font-size: calc(.8125rem * var(--text-metadata-scale)); }
#view .beast-page .beast-journey-worlds .is-complete { color: var(--status-success); background: var(--accent-green-wash); }
#view .beast-page .beast-quest-completed article { padding: 16px 0; border: 0; border-radius: 0; background: none; align-items: flex-start; }
#view .beast-page .beast-quest-completed article>span { width: 24px; height: 24px; flex-basis: 24px; border: 0; color: var(--status-success); }
#view .beast-page .beast-quest-completed strong { font-size: calc(.9375rem * var(--text-reading-scale)); }
#view .beast-page .beast-quest-completed small { color: var(--status-success); font: 700 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); }
#view .beast-page time { color: var(--text-muted); font: 500 calc(.8125rem * var(--text-metadata-scale))/1.5 var(--font-body); }
/* Earned badges keep their medallion identity, rather than becoming metrics. */
#view .beast-page .beast-badges>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#view .beast-page .beast-badges>div>span { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 4px 12px; padding: 16px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--surface-primary); box-shadow: none; color: var(--text-secondary); font-size: calc(.875rem * var(--text-metadata-scale)); }
#view .beast-page .beast-badges>div>span::before { grid-row: 1/4; color: var(--accent-gold); font-size: 20px; }
#view .beast-page .beast-badges b { font: 800 calc(.9375rem * var(--text-reading-scale))/1.4 var(--font-body); color: var(--text-primary); }
#view .beast-page .beast-badges time { grid-column: 2; }
#view .beast-page .beast-empty-note { color: var(--text-muted); font-size: calc(.9375rem * var(--text-reading-scale)) !important; }
#view .beast-page #beast-name-form { grid-area: name; width: 100%; margin-top: 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--divider); border-radius: 0; background: none; box-shadow: none; text-align: left; clip-path: none; }
#view .beast-page #beast-name-form h2 { min-width: 0; padding: 0; border: 0; margin: 0 0 20px; background: none; color: var(--text-primary); font: 800 calc(1.25rem * var(--text-display-scale))/1.3 var(--font-body); }
#view .beast-page .field label { color: var(--text-primary); font-size: calc(.875rem * var(--text-metadata-scale)); }
#view .beast-page input { min-height: 48px; font: 500 calc(1rem * var(--text-reading-scale))/1.5 var(--font-body); color: var(--text-primary); background: var(--surface-input); border: 1px solid var(--border-primary); border-radius: 6px; }
#view .beast-page .beast-name-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#view .beast-page button,#view .beast-state button { min-height: 44px; max-width: 100%; padding: 12px 16px; border-radius: 6px; font: 700 calc(.875rem * var(--text-chrome-scale))/1.5 var(--font-body); white-space: normal; clip-path: none; box-shadow: none; text-shadow: none; }
#view .beast-page button:disabled { background: var(--surface-disabled); color: var(--text-disabled); opacity: 1; cursor: wait; }
#view .beast-page .secondary-button { color: var(--text-primary); background: var(--surface-secondary); border: 1px solid var(--border-primary); }
#view .beast-page .primary-button { background: var(--accent-pink); color: var(--control-on-accent); }
#view .beast-page :is(button,input):focus-visible,#view .beast-state button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
#view .beast-page #beast-save-status { color: var(--text-secondary); font-size: calc(.875rem * var(--text-reading-scale)); }
#view .beast-page #beast-save-status:empty { display: none; }
#view .beast-page .beast-progress-unavailable { padding: 20px 0; border-top: 1px solid var(--divider); color: var(--status-warning); }
#view .beast-state { border: 0; border-radius: 0; background: none; box-shadow: none; }
#view .beast-state h2 { font: 800 calc(1.5rem * var(--text-display-scale))/1.3 var(--font-body); }
#view .beast-state p { font-size: calc(1rem * var(--text-reading-scale)); color: var(--text-secondary); }
@media(max-width: 1000px) {
  #view .beast-page { grid-template-columns: 1fr; grid-template-areas: "identity" "progress" "name"; grid-template-rows: auto; gap: 32px; }
  #view .beast-page .beast-preview { grid-template-columns: 128px minmax(0,1fr); column-gap: 24px; text-align: left; align-items: center; }
  #view .beast-page .beast-art-large { grid-row: 1/5; grid-column: 1; width: 128px; }
  #view .beast-page .beast-preview>.eyebrow,#view .beast-page #beast-display-name,#view .beast-page .beast-identity { grid-column: 2; justify-self: start; }
  #view .beast-page #beast-name-form,#view .beast-page .beast-art-note { grid-column: 1/-1; }
  #view .beast-page .beast-name-actions button { flex: 1 1 180px; }
}
@media(max-width: 540px) {
  #view .beast-page .beast-preview { grid-template-columns: 128px minmax(0,1fr); column-gap: 16px; }
  #view .beast-page .beast-art-large { width: 128px; }
  #view .beast-page #beast-display-name { font-size: calc(1.75rem * var(--text-display-scale)); }
  #view .beast-page .beast-profile dl { gap: 4px 16px; }
  #view .beast-page .beast-growth-heading { grid-template-columns: 1fr; }
  #view .beast-page .beast-badges>div { grid-template-columns: 1fr; }
}
html[data-text-scale-level="accessibility"] #view .beast-page { grid-template-columns: 1fr; grid-template-areas: "identity" "progress" "name"; grid-template-rows: auto; }
html[data-text-scale-level="accessibility"] #view .beast-preview { display: flex; flex-direction: column; }
html[data-text-scale-level="accessibility"] #view .beast-page .beast-profile dl,
html[data-text-scale-level="accessibility"] #view .beast-page .beast-path ul,
html[data-text-scale-level="accessibility"] #view .beast-page .beast-badges>div { grid-template-columns: 1fr; }
html[data-text-scale-level="accessibility"] #view .beast-page .beast-profile dt,
html[data-text-scale-level="accessibility"] #view .beast-page .beast-profile dd { grid-row: auto; }
@media(prefers-reduced-motion: reduce) {
  #view .beast-page *,#view .beast-state * { transition: none !important; animation: none !important; }
}

.workspace:has(:where(.beast-page,.beast-state)) .top-action:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
/* Integrated rank sprites share the existing celebration layout. */
.beast-promotion{border-top:1px solid var(--border-subtle);padding-top:20px;margin-top:20px}
.beast-promotion h3,.beast-promotion p,.beast-promotion summary{font-family:system-ui,sans-serif}
.beast-promotion button,.beast-celebration button,.beast-promotion summary{min-height:44px}
.beast-promotion summary{cursor:pointer;align-content:center}
.beast-promotion p{color:var(--text-secondary)}
.beast-promotion p strong{color:var(--accent-violet)}
.beast-celebration{width:min(94vw,520px);max-height:90dvh;overflow:auto;border:1px solid var(--accent-violet);border-radius:20px;background:var(--surface-primary);color:var(--text-primary);padding:24px;text-align:center;font-family:system-ui,sans-serif;box-shadow:0 0 50px color-mix(in srgb,var(--accent-violet) 22%,transparent)}
.beast-celebration::backdrop{background:var(--overlay)}
.beast-celebration h2{font-family:system-ui,sans-serif;font-size:clamp(22px,5vw,30px);line-height:1.3;overflow-wrap:anywhere}
.beast-celebration p{color:var(--text-secondary);line-height:1.6}
.beast-celebration button{font:600 15px system-ui,sans-serif;white-space:normal;width:100%;border-radius:10px;padding:12px}
.beast-celebration-glow{display:flex;justify-content:center;animation:beast-promotion-reveal .6s ease-out}
.beast-celebration-glow .beast-art{width:min(256px,65vw);height:min(256px,65vw)}
.beast-promotion button:focus-visible,.beast-promotion summary:focus-visible,.beast-celebration button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
@keyframes beast-promotion-reveal{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.beast-celebration-glow{animation:none}}

/* Self-only collectible gallery; art is proposed, award state is server-backed. */
.beast-collection{margin-top:28px;border-top:1px solid var(--border-subtle);padding-top:24px;min-width:0}
.beast-collection h3,.beast-collection p,.beast-collection summary,.beast-collection button{font-family:system-ui,sans-serif}
.beast-collection header>p{margin:8px 0}.beast-collection header>small{color:var(--text-secondary)}
.beast-collection-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.beast-collection-filters button{min-height:44px;padding:8px 16px;background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:8px}
.beast-collection-filters button[aria-pressed=true]{background:var(--surface-selected);border-color:var(--accent-violet);font-weight:700}
.beast-collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.beast-collectible{min-width:0;border:1px solid var(--border-subtle);border-radius:12px;padding:12px;background:var(--surface-elevated)}
.beast-collectible[hidden]{display:none}.beast-collectible.is-earned{border-color:var(--accent-violet)}
.beast-collectible summary{min-height:72px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}.beast-collectible summary::-webkit-details-marker{display:none}
.beast-collectible summary>span{min-width:0}.beast-collectible strong,.beast-collectible small{display:block;overflow-wrap:anywhere}.beast-collectible small{margin-top:4px;color:var(--text-secondary)}
.beast-collectible img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.beast-collectible.is-locked img{filter:grayscale(1);opacity:.65}
.beast-collectible-details{font-size:.9rem;line-height:1.55}.beast-collectible-details p{margin:12px 0}
.beast-collectible-progress{margin-top:12px;font:0.8rem/1.5 system-ui;color:var(--text-secondary)}
.beast-collectible-progress progress{display:block;width:100%;height:8px;margin-top:8px;accent-color:var(--accent-violet)}
.beast-tier-list{padding-left:20px}.beast-legacy{border-top:1px solid var(--border-subtle);margin-top:12px}.beast-legacy summary{min-height:44px;font-weight:600}
.beast-collection :is(button,summary):focus-visible{outline:3px solid var(--accent-violet);outline-offset:3px}
.beast-badge-art-missing{width:64px;font:12px/1.2 system-ui}

.beast-collectible summary::after{content:"⌄";margin-left:auto;color:var(--text-secondary)}
.beast-collectible details[open]>summary::after{content:"⌃"}