/* Talent calculator on the guild site — the same manual grammar as the race atlas: square
   corners and Public Sans figures. The talent icons keep their in-game shape. Loaded only on
   talent-calculator.html, after umami-theme.css. The layout of the newer tools (tabs, a short
   standfirst, folds for the reference parts) comes with umami-calculator.js, which this styles. */
:root { --f-mono: "Public Sans", "Segoe UI", system-ui, sans-serif !important; }
body { font-variant-numeric: tabular-nums; }
.mode, .cb, .legacy-intro, .btn, .lg, .board, .clr, .race, .card, .recbox, .chip, code { border-radius: 0 !important; }
.board, .card, .recbox {
  background: #10141f !important; border: 1px solid #2b3242 !important;
  box-shadow: inset 0 0 0 5px #10141f, inset 0 0 0 6px #232a3a, 0 14px 32px rgba(0, 0, 0, .35) !important;
}
.board { border-top: 2px solid var(--gold) !important; }
.eyebrow, th { font-family: "Public Sans", system-ui, sans-serif !important; letter-spacing: .12em !important; }
.chip, .btn { font-weight: 700 !important; }
/* Marcellus has no bold; a synthetic bold smears it. */
.mode b, .recbox b { font-weight: 400 !important; }

/* Page column: one width at every size (the original grew to 1800px and put the race box in a side
   column; here the race box sits under the trees). Build line under the standfirst, no eyebrow. */
.wrap { display: flex; flex-direction: column; max-width: 1240px !important; padding: 40px clamp(16px, 4vw, 56px) 80px !important; }
.wrap > h1 { order: -2; font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.05 !important; margin: 0 0 14px !important; }
.wrap > .lede { order: -1; font-size: 19px; line-height: 1.55; max-width: 62ch; margin: 0; }
.wrap > .eyebrow { margin: 14px 0 0; padding-bottom: 24px; border-bottom: 2px solid var(--gold); }
.layout { grid-template-columns: minmax(0, 1fr) !important; }

/* Class talents / Legacy perks: tabs, like tool 1.4, not two big cards. */
.modes { display: flex !important; flex-wrap: wrap; gap: 0 6px !important; max-width: none !important; margin: 26px 0 0 !important; border-bottom: 1px solid var(--line); }
.mode { border: 0 !important; border-bottom: 3px solid transparent !important; background: transparent !important; box-shadow: none !important; transform: none !important; padding: 10px 14px 11px !important; gap: 10px !important; color: var(--ink-2) !important; }
.mode:hover { color: var(--ink) !important; }
.mode.on { border-bottom-color: var(--gold) !important; color: var(--ink) !important; }
.mode b { font: 400 21px/1.2 var(--f-display) !important; color: inherit !important; }
.mode small { font-size: 13px !important; }
.mi { width: 24px !important; height: 24px !important; }

/* Class picker: game icons, the class colour as the edge. */
.classes { margin: 18px 0 0 !important; gap: 8px !important; }
.cb { padding: 7px 14px 7px 8px !important; font-size: 15px !important; }
.cb i { width: 24px !important; height: 24px !important; border-radius: 0 !important; background-color: var(--cc) !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--cc) !important; }
.cb.on { box-shadow: inset 0 -3px 0 var(--gold); }
.legacy-intro { margin: 18px 0 0 !important; max-width: 74ch !important; }

/* Ready-made builds: their own row above the sticky bar. */
.ua-builds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 22px 0 0; }
.ua-lbl { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.ua-builds .btns { gap: 8px !important; }
/* Outline until chosen; the loaded one gets the gilded marker (theme: .btn.on). */
.ua-builds .btn:not(.on) { background: transparent !important; color: #86a6f0 !important; }
.ua-builds .btn:not(.on):hover { background: color-mix(in srgb, #86a6f0 9%, #0d1018) !important; }

/* Sticky bar: points left, level, split, and the three actions. */
.bar { margin: 16px 0 14px !important; padding: 10px 0 !important; background: var(--bg) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--ink) !important; gap: 10px 22px !important; }
.pts { gap: 16px !important; font-size: 15px !important; }
.pts b { font: 600 26px/1 var(--f-body) !important; }
.bar .btns { margin-left: auto; }
.ua-linknote { margin: 0 0 12px; padding: 10px 14px; border-left: 2px solid var(--gold); background: var(--panel); color: var(--ink-2); font-size: 14.5px; max-width: none; }

/* Legend + the Classic-changes switch as one quiet line. */
.legend { align-items: center; gap: 6px 18px !important; margin-bottom: 18px !important; }
.legend .ua-switch { padding: 6px 10px !important; font-size: 11.5px !important; margin-left: auto; }

/* Trees. Talent nodes are game icons: the manual's game-icon edge (3px, like .gicon) instead of the soft
   10px card corner. The round nodes are round in the game client itself (the data's "gold" flag) and
   stay round; rank and gate badges are stamped labels, square. */
.node { border-radius: 3px !important; }
.node .ic, .node .mono { border-radius: 2px !important; }
.node.gold, .node.gold .ic, .node.gold .mono { border-radius: 50% !important; }
.node .rk, .node .gatechip { border-radius: 0 !important; }
.node .nm { font-size: 11px !important; color: var(--ink-2) !important; }
.bh h3 { font-size: 22px !important; }
.bh small { font-size: 12.5px !important; }
.bh .tp { font: 600 24px/1 var(--f-body) !important; color: var(--gold); }
.ua-trees { display: none; }

/* Under the trees: race box (or the Legacy plan) beside the rules fold and the removed talents. */
.ua-under { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px 28px; margin-top: 26px; align-items: start; }
.ua-under .side { max-width: none !important; margin: 0 !important; position: static !important; }
.ua-col { display: grid; gap: 20px; }
.ua-h { font: 400 21px/1.2 var(--f-display); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
#goneWrap .chips { gap: 8px; }
.ua-fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.ua-fold > summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ua-fold > summary:hover { color: var(--ink); }
.ua-fold[open] > summary { margin-bottom: 10px; }
.ua-rules ul { margin-top: 4px; }
.wrap > footer { border-top: 0 !important; padding-top: 0 !important; margin-top: 34px !important; }
.ua-src p { max-width: 90ch; margin: 0; }

@media (max-width: 1000px) {
  .ua-under { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; width: 100%; }
}
/* Phones: one tree at a time, switched by tabs that show the points in each tree. */
@media (max-width: 700px) {
  .wrap { padding-top: 26px !important; }
  .wrap > .lede { font-size: 16.5px; }
  .modes { gap: 0 !important; }
  .mode { padding: 9px 10px 10px !important; flex: 1 1 0; }
  .mode small { display: none !important; }
  .mode b { font-size: 18px !important; }
  .cb { padding: 6px 10px 6px 6px !important; font-size: 14px !important; }
  .ua-builds .btn { padding: 9px 11px !important; font-size: 12px !important; }
  .bar { gap: 8px 12px !important; }
  .pts { gap: 12px !important; font-size: 14px !important; }
  .pts b { font-size: 22px !important; }
  .bar .btns { margin-left: 0; width: 100%; }
  .bar .btn { padding: 8px 10px !important; font-size: 11.5px !important; }
  .legend { font-size: 12.5px !important; gap: 4px 12px !important; }
  .legend .ua-switch { margin-left: 0; }
  .ua-trees { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
  .ua-tree { flex: 1 1 0; min-width: 0; font: 400 16px/1.2 var(--f-display); background: transparent; color: var(--ink-2); border: 0; border-bottom: 3px solid transparent; padding: 10px 4px 11px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ua-tree b { font: 600 13px/1 var(--f-body); color: var(--gold); margin-left: 4px; }
  .ua-tree[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .boards .board:not(.ua-on) { display: none; }
}
/* Legacy perks have no Classic Era to compare with: the class-tree legend and its switch step aside. */
body.legacy-mode .legend { display: none !important; }