/* Shared Spellbook/loadout surfaces; the original panel keeps focus/input ownership. */
.spellbookShell.loadoutWorkbench{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:linear-gradient(140deg,#202b39,#111a26 65%);border-color:#b59b6866;gap:12px;}
.loadoutWorkbench [hidden]{display:none!important;}
.loadoutWorkbench .spellbookTitleBlock>strong{font-family:Georgia,serif;color:#f2e8d1;}
.workbenchTabs{display:flex;gap:7px;overflow-x:auto;border-bottom:1px solid #bba16a40;padding-bottom:12px;position:relative;z-index:1;}
.workbenchTabs button{flex:1;min-width:100px;min-height:44px;border:1px solid #a595754d;border-radius:8px;background:#0e1723;color:#d6dce5;font:600 14px system-ui;cursor:pointer;}
.workbenchTabs button[aria-selected=true]{background:#bba16a24;color:#ffe3a4;border-color:#d4b578;box-shadow:inset 0 -2px #d4b578;}
.workbenchTabs button:focus-visible,.workbenchGear button:focus-visible,.workbenchSpellSearch input:focus-visible{outline:2px solid #efcd83;outline-offset:2px;}
.workbenchSpellSearch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 12px;}
.workbenchSpellSearch input[type=search],.workbenchGearBrowse>input{min-width:0;width:100%;min-height:44px;padding:10px 12px;background:#0c1420;color:#f0ece2;border:1px solid #8f9fb355;border-radius:8px;font:14px system-ui;box-sizing:border-box;}
.workbenchSpellSearch label{display:flex;align-items:center;gap:8px;color:#c8d0dd;font:12px system-ui;cursor:pointer;}
.workbenchSpellSearch input[type=checkbox]{width:17px;height:17px;accent-color:#d4b578;}
.workbenchGear{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:16px;min-height:0;overflow:hidden;}
.workbenchGearBrowse,.workbenchGearDetails{min-width:0;min-height:0;background:#111b29;border:1px solid #8f9fb333;border-radius:12px;padding:16px;overflow:auto;}
.workbenchGearList{display:grid;gap:9px;}
.workbenchCount{color:#b8c5d5;font:12px/1.5 system-ui;}
.workbenchGearCard{display:flex;gap:14px;align-items:center;padding:12px;min-height:76px;width:100%;text-align:left;border:1px solid #7d8caa40;border-radius:8px;background:#1c2838;color:#e9e6df;cursor:pointer;}
.workbenchGearCard[aria-pressed=true]{border-color:#d4b578;background:#b99c6920;}
.workbenchItemIcon{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;}
.workbenchItemIcon img{width:100%;height:100%;object-fit:contain;}
.workbenchItemCopy{display:grid;gap:5px;min-width:0;}.workbenchItemCopy strong{font:600 15px/1.3 system-ui;}.workbenchItemCopy small{color:#b9c9db;font:12px system-ui;text-transform:capitalize;}
.workbenchPrepare{min-height:44px;width:100%;padding:12px;margin-top:16px;border:1px solid #c9ae75;border-radius:8px;background:#443b2b;color:#ffe9b8;font:600 14px system-ui;cursor:pointer;}
.workbenchPrepare:disabled{opacity:.55;cursor:default;}
.workbenchSummon{display:flex;align-items:center;gap:12px;color:#cbd3df;font:12px system-ui;margin-top:8px;}
.workbenchSummon select{background:#172437;color:#eee6d7;border:1px solid #8795ac66;border-radius:6px;min-height:36px;padding:6px 10px;}
.workbenchCosmetics{overflow:auto;min-height:0;}
.workbenchDiscipline{overflow:auto;min-height:0;padding:22px;background:#111b29;border:1px solid #8f9fb333;border-radius:12px;color:#e9e6df;}
.workbenchDiscipline[hidden]{display:none;}
.mageDisciplineFacts{display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:12px 20px;max-width:720px;}
.mageDisciplineFacts dt{color:#aebdd0;}.mageDisciplineFacts dd{margin:0;font-weight:600;}
.mageNextMilestone{padding:16px;border-left:3px solid #d4b578;background:#d4b57812;line-height:1.6;}
.mageTraitChoice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0;}.mageTraitChoice small{color:#b8c5d5;}
.mageTraitChoice button,.workbenchChangePath{min-height:44px;padding:10px 16px;border:1px solid #a595754d;border-radius:8px;background:#182436;color:#e9e6df;cursor:pointer;}
.mageTraitChoice button:disabled{opacity:.6;cursor:default;}.workbenchChangePath{justify-self:start;}.workbenchChangePath[hidden]{display:none;}
.mageNamedBuilds{display:grid;gap:12px}.mageNamedBuild{border:1px solid #8f9fb333;border-radius:10px;padding:16px;background:#182334}.mageNamedBuild h4{margin:0 0 10px}.mageNamedBuild small{display:block;color:#bcc9d7;line-height:1.6;margin:4px 0}.mageNamedBuild button{min-height:44px;padding:10px 16px;background:#d0b378;color:#182333;border:0;border-radius:6px;font-weight:700;cursor:pointer}.mageNamedBuild button:disabled{background:#343d49;color:#9ca8b8;cursor:default}
.mageBondPanel .mageLadderUnseen{color:#89929f}.mageBondPanel>small{display:block;margin:8px 0;line-height:1.5}
.workbenchCosmetics .wardrobe{width:100%;max-width:none;border:0;box-shadow:none;min-height:0;background:transparent;}
.workbenchCosmetics .wd-header{display:none;}.workbenchCosmetics .wd-body{grid-template-columns:140px minmax(0,1fr) minmax(230px,.8fr);min-height:0;}.workbenchCosmetics .wd-canvas-wrap{height:280px;}.workbenchCosmetics .wd-footer{position:sticky;bottom:0;z-index:3;background:#111b29;}
.loadoutWorkbench[data-loadout-tab=cosmetics]{grid-template-rows:auto auto minmax(0,1fr);}
.premiumShopCard{position:relative;overflow:hidden;padding:24px;border:1px solid #b89f7159;border-radius:16px;background:radial-gradient(ellipse at 75% 0%,#41598580,transparent 66%),linear-gradient(140deg,#26283a,#121b26);color:#f0e4cd;}
.premiumShopCard .eyebrow{color:#d5b979;font-size:10px;letter-spacing:.15em;}.premiumShopCard h2{font:26px/1.15 Georgia,serif;margin:10px 0;}.premiumShopCard p{font:13px/1.6 system-ui;color:#c6cbd5;}.premiumShopCard>small{display:block;font:11px/1.5 system-ui;color:#aeb9ca;margin-top:12px;}
.premiumShopCardArt{height:94px;display:flex;justify-content:center;gap:16px;margin:16px 0;}.premiumShopCardArt>span{height:94px;width:94px;display:grid;place-items:center;background:#ffffff08;border:1px solid #c5ac7944;border-radius:50%;filter:drop-shadow(0 6px 16px #1b1f46);}.premiumShopCardArt img{width:100%;height:100%;object-fit:contain;}
.premiumShopCard button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:14px;border:1px solid #d5b979;border-radius:8px;background:#d5b979;color:#182130;font:700 13px system-ui;cursor:pointer;}.premiumShopCard button:hover{background:#f1d398;}.premiumShopCard button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.guestModeHint{padding:12px 16px;border-left:3px solid #bba16a;background:#bba16a13;color:#ded6c5;font:13px/1.5 system-ui;}
.modeAccountRequirement{display:block;font:600 11px system-ui;color:#eed8a7;margin-top:12px;}.accountRequired .spellmendActivityAction{display:none!important;}.modeCard.accountRequired{filter:saturate(.55);}
.modeAccountRequirement[hidden]{display:none!important;}
.raidActivityCard{background:radial-gradient(ellipse at top right,#92463665,transparent 70%),#201e2a!important;}
.guestModeRestricted .trainingDifficultyControl{display:none;}
@media(max-width:760px),(max-height:600px){
 .spellbookShell.loadoutWorkbench{display:block;overflow:auto;width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:12px;}
 .workbenchTabs{margin:12px 0;flex-wrap:nowrap;}.workbenchTabs button{min-width:76px;padding:10px 8px;font-size:12px;}
 .loadoutWorkbench .spellbookFilters{display:flex;overflow-x:auto;gap:8px;padding:8px;}.loadoutWorkbench .spellbookFilters button{flex:0 0 auto;width:auto;min-height:42px;}.loadoutWorkbench .spellbookFilterLore{display:none;}
 .workbenchGear{display:flex;flex-direction:column;overflow:visible;}.workbenchGearBrowse{max-height:340px;}.workbenchGearDetails{overflow:visible;}
 .workbenchCosmetics{overflow:visible;}.workbenchCosmetics .wd-body{display:flex;flex-direction:column;}.workbenchCosmetics .wd-nav{display:flex;overflow-x:auto;}.workbenchCosmetics .wd-nav button{flex:0 0 auto;}.workbenchCosmetics .wd-canvas-wrap{height:320px;}
 .loadoutWorkbench .spellbookGrid{grid-template-columns:repeat(2,minmax(0,1fr));}.loadoutWorkbench .spellbookCard{grid-template-columns:40px minmax(0,1fr);padding:8px;}.loadoutWorkbench .spellbookCardCopy strong{font-size:12px;}
}

/* The Spellbook is the list and the bar. The school rail, the catalog heading,
   the search row, the build-draft prose and both save buttons are hidden in the
   markup rather than deleted, because game.js writes to those nodes by id on
   every render -- so these rules only tidy what is left behind them. */
.loadoutWorkbench .spellbookTitleBlockCompact strong{font:700 17px system-ui;letter-spacing:.2px;}
.loadoutWorkbench .spellbookTitleBlockCompact span,
.loadoutWorkbench .spellbookTitleBlockCompact small{display:none;}
.loadoutWorkbench .spellbookFilters[hidden],
.loadoutWorkbench .spellbookSectionHead[hidden],
.loadoutWorkbench .spellbookLoadoutHead[hidden],
.loadoutWorkbench .workbenchSpellSearch[hidden]{display:none!important;}
/* With the rail gone the list takes the column it used to leave for it. */
.loadoutWorkbench .spellbookBody{grid-template-columns:minmax(0,1fr);}

/* The prepared bar: one row, six slots, no prose above it. */
.loadoutWorkbench .spellbookLoadout{padding:10px 14px;gap:8px;}
.loadoutWorkbench .spellbookLoadoutSlots{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;}
.loadoutWorkbench .spellbookLoadoutSlots>button{flex:1 1 0;min-width:0;padding:8px 10px;display:grid;
 grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;}
.loadoutWorkbench .spellbookLoadoutSlots>button kbd{grid-row:1/3;}
.loadoutWorkbench .spellbookLoadoutSlots>button span{font-size:10px;opacity:.7;}
.loadoutWorkbench .spellbookLoadoutSlots>button strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Clicking a card opens its description and equip buttons over the list, rather
   than in a column that was permanently reserved for one selected spell. */
.workbenchDetailOverlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;
 background:rgba(8,9,14,.72);backdrop-filter:blur(2px);padding:24px;}
.workbenchDetailOverlay[hidden]{display:none!important;}
.workbenchDetailCard{position:relative;max-width:460px;width:min(460px,100%);max-height:80vh;overflow:auto;
 background:#171a24;border:1px solid #2f3446;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.workbenchDetailCard .spellbookDetails{border:0;border-radius:14px;height:auto;max-height:none;}
.workbenchDetailClose{position:absolute;top:8px;right:8px;z-index:1;width:30px;height:30px;border-radius:9px;
 border:1px solid #333a4d;background:#20232f;color:#d8dcea;font-size:13px;cursor:pointer;}
.workbenchDetailClose:hover{background:#2a2e3d;}
/* The overlay is absolute against the shell, so the shell has to be the
   positioning context -- adventure.css sizes it but never positions it. */
.spellbookShell.loadoutWorkbench{position:relative;}

/* The header was a title on the left and a three-line block on the right: LEARNED,
   a learned/total counter, and the save state. Between them they made the header
   116px tall for one line of type, and all three restated what the panel below
   already shows. What is left is the title and the Rune Essence balance.

   The title is POSITIONED rather than flexed. As a flex child it would be pushed
   off centre by half the essence pill's width -- and that width moves with the
   balance, so a player with 4 digits of Essence would see the title sit further
   left than a player with 1. Absolute centring is indifferent to the pill.
   .spellbookHeader is already position:relative (style.css:2548), so this adds no
   stacking context, and pointer-events:none keeps the centred block from covering
   anything clickable that passes beneath it.

   Not touched: the <header class="spellbookHeader"> element itself. Restyle it,
   never replace it -- loadout-workbench.js:38 calls .after() on the result of
   querySelector('.spellbookHeader') with no null guard. */
.loadoutWorkbench .spellbookHeader{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  min-height:30px;padding:2px 46px 6px 12px;border-bottom-color:rgba(217,176,91,.18);}
.loadoutWorkbench .spellbookTitleBlockCompact{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);margin:0;pointer-events:none;}
.loadoutWorkbench .spellbookEssence{margin:0;}

/* At phone width the title and the pill want the same pixels, so the one-row
   layout above stops applying: the title returns to flow and the header stacks. */
@media (max-width:760px){.loadoutWorkbench .spellbookHeader{flex-direction:column;justify-content:center;
    align-items:center;gap:4px;padding:4px 46px 6px 46px;}
  .loadoutWorkbench .spellbookTitleBlockCompact{position:static;transform:none;left:auto;top:auto;
    justify-items:center;text-align:center;}}

/* ---- the Dragon level tree ------------------------------------------------ */

/* Dragon magic is ember, not violet. Nothing defined a school colour for it, so
   every dragon card was inheriting the generic purple. */
.spellbookCard.school-dragon{--school:#ef774f;}

.spellbookGrid.spellTree{display:flex;flex-direction:column;gap:0;padding:6px 10px 18px;}
.spellTreeBand{position:relative;padding:10px 0 14px;}
/* The spine. Each band draws the line that reaches DOWN to the next one, so the
   last band has nothing to draw and the tree does not trail off the bottom. */
.spellTreeBand:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:0;
  width:2px;height:14px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(239,119,79,.45),rgba(239,119,79,.08));}
.spellTreeBandLabel{display:block;margin:0 0 8px;color:#8d8397;font:800 9px/1 var(--ui-font,system-ui);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;}
/* Shrink-wrapped, so the rail below spans the nodes and not the whole panel. */
.spellTreeRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;position:relative;
  width:fit-content;max-width:100%;margin:0 auto;}
/* The rail joining the nodes of one band, drawn behind them. It is inset by half a
   node so it stops at the first and last icon instead of running past them. */
.spellTreeRow::before{content:'';position:absolute;left:34px;right:34px;top:32px;height:2px;
  background:rgba(239,119,79,.18);z-index:0;}
.spellTreeRow>.spellbookCard{position:relative;z-index:1;}
/* A single node draws no rail -- there is nothing to join. */
.spellTreeRow>.spellbookCard:only-child~*,
.spellTreeRow:has(>.spellbookCard:only-child)::before{display:none;}

/* ---- the node ---- */
/* Icon only. The name and school still render for screen readers and for the
   workbench's own search index; they are simply not painted. */
/* min-height, not just height: screen-polish.css:112 sets min-height:96px on every
   card, and a min-height wins over a height however specific the rule is. */
.spellbookGrid.spellTree .spellbookCard{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;
  place-items:center;width:64px;min-width:64px;height:64px;min-height:64px;padding:0;gap:0;}
.spellTree .spellbookCardCopy,
.spellTree .spellbookCardState{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;}
.spellTree .spellbookCardIcon{width:40px;height:40px;
  /* Seven SVGs serve thirty abilities, so each node is tinted by a hue derived
     from its key. Remove this the day real per-ability art lands. */
  filter:hue-rotate(var(--iconHue,0deg));}
/* Tier pips sit under the icon: the one piece of text small enough to survive. */
.spellTree .spellbookTierPips{position:absolute;left:0;right:0;bottom:3px;
  text-align:center;font-size:8px;line-height:1;pointer-events:none;}
/* The level chip, so a locked node says what it is waiting for without a name. */
.spellTree .spellbookCardLevel{position:absolute;top:-5px;right:-5px;z-index:2;
  min-width:16px;padding:1px 4px;border:1px solid rgba(0,0,0,.5);border-radius:999px;
  background:#1b1830;color:#b9c8ff;font:800 9px/1.4 var(--ui-font,system-ui);
  font-style:normal;text-align:center;}
.spellTree .spellbookCard.learned .spellbookCardLevel{background:#1d2a20;color:#91d7a2;}

/* ---- the three states ----------------------------------------------------- */
/* LEARNED — bright, school-coloured, ringed. */
.spellTree .spellbookCard.learned{opacity:1;filter:none;
  border:2px solid color-mix(in srgb,var(--school) 72%,#ffffff 12%);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 12px -2px color-mix(in srgb,var(--school) 55%,transparent);}
/* AVAILABLE TO LEARN — full brightness, dashed border, so "you can take this now"
   reads differently from "you already have it" at a glance. adventure.css already
   owns the warm palette for this state; only the border style is added. */
.spellTree .spellbookCard.knowledge-ready{opacity:1;filter:none;border:2px dashed #e0b972;}
/* LOCKED — the method is the blocker. Grey and dim. This is the rule that
   screen-polish.css has been cancelling. */
.spellTree .spellbookCard.locked{opacity:.42;filter:grayscale(.9) saturate(.3);border-width:1px;}
/* LOCKED BY LEVEL — the same dim family, but cool rather than dead, because the
   difference matters: one is "go and do something", the other is "come back". */
.spellTree .spellbookCard.knowledge-level{opacity:.55;filter:grayscale(.55) saturate(.5);
  border:1px solid rgba(120,138,190,.55);}
.spellTree .spellbookCard.knowledge-level .spellbookCardIcon{filter:hue-rotate(var(--iconHue,0deg)) grayscale(.5);}
/* Prepared is orthogonal to all three -- it says which key casts it, not whether
   you own it -- so it stays a ring rather than a fill. */
.spellTree .spellbookCard.equipped{box-shadow:0 0 0 2px #76d49a,0 0 10px -2px rgba(118,212,154,.7);}
.spellTree .spellbookCard.selected{outline:2px solid #f2e8d1;outline-offset:2px;}

@media (max-width:760px){
  .spellbookGrid.spellTree .spellbookCard{width:52px;min-width:52px;height:52px;min-height:52px;}
  .spellTree .spellbookCardIcon{width:32px;height:32px;}
  .spellTreeRow::before{top:26px;left:26px;right:26px;}
}