/* Character-creation wizard (character-creation.php). Requires
   tokens-parchment.css. One shared DOM (creation-ui.js renders #cc-content plus
   the rail/topbar/deskbar chrome around it); this file's only job is to show the
   mobile step-card chrome under 900px and the desktop rail chrome at 900px+. */

/* The site nav is `position:fixed` and 52px tall on a phone, and this page is
   deliberately full-bleed rather than inside `main` — which clears the nav for
   every other page. So nothing cleared it here, and the wizard's own top bar
   (back arrow, pips, the step count) sat exactly underneath it: present in the
   DOM, 52px tall, and invisible. The back button was unreachable on a phone.

   Cleared here rather than by dropping the nav: the designs give this screen its
   own chrome and no site nav at all, but a visitor who already has an account
   needs the Log in link that nav carries. */
.ag-creation{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:var(--nav-height-mobile) 0 0;box-sizing:border-box;
  font-family:var(--font-ui);color:var(--text-strong);
  background-image:var(--glow-campfire);background-repeat:no-repeat;
  background-size:100% 60%;background-position:bottom;background-color:var(--surface-sunken);
}

.ag-cc-card{
  width:100%;min-height:calc(100dvh - var(--nav-height-mobile));margin:0 auto;
  display:flex;flex-direction:column;background:var(--surface-page);
}
/* Signup errors handed back by register.php. The card's children carry their own
   padding, so the banner needs its own gutter to line up with .ag-cc-content. */
.ag-cc-card > .banner{ margin:16px 20px 0 }

.ag-cc-content input,.ag-cc-content textarea,.ag-cc-content button{ font:inherit }

/* --- Mobile top bar (hidden at desktop widths) --- */
.ag-cc-topbar{
  height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 20px;border-bottom:1px solid var(--border-hairline);
}
.ag-cc-back{
  border:none;background:transparent;padding:0;width:34px;text-align:left;
  font-size:18px;line-height:1;color:var(--text-muted);cursor:pointer;
}
.ag-cc-back:disabled,.ag-cc-back.is-disabled{ color:var(--text-faint);cursor:default }
.ag-cc-ability-counter{
  font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);
}
.ag-cc-pips{ display:flex;align-items:center;gap:8px }

/* `display` beats the `hidden` attribute, so an element given one of these
   needs its hidden state spelled out or the attribute does nothing. The pips
   were set hidden on every practice and track step and stayed on screen
   regardless, beside the area name that was meant to replace them. */
.ag-cc-pips[hidden],.ag-cc-ability-counter[hidden],.ag-cc-skip[hidden]{ display:none }
.ag-cc-skip{
  border:none;background:transparent;padding:0;min-width:34px;text-align:right;
  font-size:var(--fs-xs);color:var(--text-action);cursor:pointer;
}

/* --- Desktop header bar (hidden at mobile widths) --- */
.ag-cc-deskbar{
  display:none;height:60px;align-items:center;justify-content:space-between;
  padding:0 28px;border-bottom:1px solid var(--border-hairline);
}
.ag-cc-brand{
  font-family:Cinzel,serif;font-weight:600;font-size:13px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--text-accent);
}

/* --- Body: rail (desktop only) + content --- */
.ag-cc-body{ flex:1;min-height:0;display:flex;align-items:stretch;overflow:hidden }
.ag-cc-rail{ display:none }
.ag-cc-content{ flex:1;min-width:0;min-height:0;overflow-y:auto;padding:24px 20px 12px }
.ag-cc-step{ display:flex;flex-direction:column;gap:8px;max-width:640px }

.ag-cc-title{
  margin:0;font-family:var(--font-display);font-weight:400;font-size:26px;
  line-height:1.15;letter-spacing:var(--track-title);color:var(--text-strong);
}
.ag-cc-desc{ margin:0 0 6px;font-size:var(--fs-sm);color:var(--text-muted);max-width:56ch }
.ag-cc-body-text{ margin:0;font-size:var(--fs-sm);color:var(--text-body) }
.ag-cc-hint{ font-size:var(--fs-xs);color:var(--text-muted) }
/* The grain rule, under the "add your own" input. What keeps everybody's skills
   comparable is a shared sense of how BIG a skill is, and that has to be said. */
.ag-cc-grain{ margin:var(--space-3) 0 0;max-width:46ch;line-height:1.55 }
.ag-cc-grain em{ font-style:italic }
.ag-cc-rule{ height:1px;background:var(--border-hairline);margin:8px 0 2px }

.ag-cc-label{
  display:block;font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;
}
.ag-cc-label-row{ display:flex;align-items:center;gap:7px;margin-bottom:4px }
.ag-cc-grid2{ display:grid;grid-template-columns:1fr;gap:20px }
/* Re-roll choice screen: the two ways back into the wizard. */
.ag-cc-choice{ display:flex;flex-direction:column;gap:12px;max-width:420px;margin-top:12px }
.ag-cc-input{
  width:100%;border:none;border-bottom:1px solid var(--border-rule);background:transparent;
  outline:none;padding:6px 0;font-size:var(--fs-md);color:var(--text-strong);
  font-family:var(--font-display);
}
.ag-cc-input:focus{ border-bottom-color:var(--accent-primary) }
.ag-cc-input::placeholder{ font-family:var(--font-ui);color:var(--text-muted) }

/* Trigger + popup share one wrapper so hovering from the button into the
   popup itself (very easy to do — they're adjacent) never crosses outside a
   :hover'd element. Native :hover is recomputed live from the cursor position
   against whatever's currently in the DOM, so — unlike the JS mouseenter/
   mouseleave pairing this replaced — it can't get stuck open. */
.ag-cc-info-wrap{ display:inline-flex;align-items:center }
.ag-cc-info{
  width:18px;height:18px;flex-shrink:0;border-radius:var(--radius-circle);
  border:1px solid var(--border-default);background:transparent;color:var(--text-accent);
  font-family:var(--font-ui);font-size:11px;font-weight:700;line-height:1;cursor:help;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.ag-cc-tooltip{
  position:absolute;top:26px;left:0;z-index:5;width:min(300px,80vw);padding:13px 15px;
  background:var(--surface-raised);border:1px solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-fast) linear;
}
.ag-cc-info-wrap:hover .ag-cc-tooltip,
.ag-cc-info-wrap.is-pinned .ag-cc-tooltip{
  opacity:1;visibility:visible;pointer-events:auto;
}
.ag-cc-tooltip-wide{ width:min(340px,80vw) }
.ag-cc-tooltip-title{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent);margin-bottom:6px;
}
.ag-cc-tooltip-body{ margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-body) }
.ag-cc-rank-row{ display:flex;gap:8px;font-size:var(--fs-xs);line-height:1.45;margin-top:4px }
.ag-cc-rank-row span:first-child{
  flex-shrink:0;width:88px;font-family:var(--font-display);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-accent);
}
.ag-cc-rank-row span:last-child{ color:var(--text-body) }

.ag-cc-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;align-items:center }
/* .ag-chip is defined in components.css — the wizard's chips ARE the base, so
   nothing is left to say here. The selected state used to hardcode #FFF8F0;
   that is --text-on-accent now. */
.ag-cc-add{ display:inline-flex;align-items:center;gap:8px;margin-left:4px }
.ag-cc-add input{
  width:130px;border:none;border-bottom:1px dashed var(--border-dashed);background:transparent;
  outline:none;padding:0 0 3px;font-size:var(--fs-sm);color:var(--text-strong);
}
.ag-cc-add-btn{ padding:6px 14px!important;font-size:var(--fs-xs)!important }

/* One-shot "just appeared" reveal — reusable anywhere new content should
   announce itself rather than snap in. Since the wizard fully replaces the
   innerHTML of whatever it's updating, an element carrying this class is
   always a fresh DOM node, so the animation naturally (re)plays every time
   it's applied without any extra JS. */
@keyframes ag-fade-in{ from{ opacity:0;transform:translateY(4px) } to{ opacity:1;transform:none } }
.ag-fade-in{ animation:ag-fade-in var(--dur-base) var(--ease-out) both }

.ag-cc-class-card{
  margin-top:12px;padding:18px 20px;text-align:center;background:var(--surface-raised);
  border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.ag-cc-class-icon{ display:flex;justify-content:center;color:var(--text-accent) }
.ag-cc-class-name{
  width:100%;padding:0 0 4px;border:none;border-bottom:1px dashed var(--border-dashed);
  background:transparent;outline:none;text-align:center;font-family:var(--font-display);
  font-size:24px;letter-spacing:var(--track-title);color:var(--text-strong);
}
/* The class name "reel": on a real change (not the first reveal, not an
   unchanged re-render) the old name is shown first and slides up out of view
   as the new one slides into place — same technique as the source design's
   Level Up screen level-number reel. .will-advance starts the track at rest
   (transition:none) so there's a real "from" position for the .is-advancing
   transform to animate from; creation-ui.js's activateClassReel() adds
   .is-advancing two frames later. */
.ag-cc-class-reel{ height:32px;margin-top:6px;overflow:hidden }
.ag-cc-class-reel-track{ display:flex;flex-direction:column }
.ag-cc-class-reel.will-advance .ag-cc-class-reel-track{ transition:none }
.ag-cc-class-reel-track.is-advancing{ transform:translateY(-32px);transition:transform var(--dur-slow) var(--ease-out) }
.ag-cc-class-reel-item{
  height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:24px;letter-spacing:var(--track-title);color:var(--text-strong);
}
.ag-cc-class-reel-item .ag-cc-class-name{ padding:0 }

.ag-cc-ability-grid{ display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px }
.ag-cc-ability-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--surface-raised);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);
}
.ag-cc-ability-icon{ display:flex;color:var(--text-accent);flex-shrink:0 }
.ag-cc-ability-head{ display:flex;align-items:center;gap:10px }

/* --- Step 6: Health and Mana, the opt-in --- */
/* Deliberately heavier than an ability row: this is the one screen in the
   wizard that asks for a decision rather than a list, and the card has to look
   like something you answer. The "on" state is a gold wash rather than a tick,
   because the two cards are read side by side and the difference has to survive
   being glanced at. */
.ag-cc-track-grid{ display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px }
.ag-cc-track{
  padding:14px 15px;background:var(--surface-raised);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) linear,background var(--dur-fast) linear;
}
.ag-cc-track.is-on{ border-color:var(--gold-500);background:var(--surface-inset) }
.ag-cc-track-head{ display:flex;align-items:center;gap:10px;margin-bottom:7px }
.ag-cc-track-name{ min-width:0 }
.ag-cc-track-head .ag-cc-hint{ display:block }
/* .ag-cc-track-toggle, .ag-cc-sleep and .ag-cc-dot* were here.

   The toggle is gone because the opt-in moved: a track is accepted by walking
   past its own step and declined with "Later", so there is no switch to style.
   The sleep field became the Rest factor. The rank dots became a stepper.

   The toggle also carried `border-radius:999px`, which the house standards now
   forbid outright — no pill shapes on anything interactive. */

/* The review step's track rows: the ceiling, labelled as a maximum. */
.ag-cc-track-summaries{ width:100%;max-width:400px;margin-top:4px;text-align:left }
.ag-cc-track-summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-top:1px solid var(--border-hairline);
}
.ag-cc-max-num-sm{
  font-family:var(--font-display);font-size:var(--fs-lg);
  font-variant-numeric:tabular-nums;color:var(--tint,var(--text-accent));
}

.ag-cc-rank-header{ position:relative;display:flex;align-items:center;gap:7px;margin:8px 0 4px }
.ag-cc-rank-list{ display:flex;flex-direction:column;gap:8px;max-width:640px }
.ag-cc-rank-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:var(--surface-inset);border:1px solid var(--border-rule);
  border-radius:var(--radius-xs);font-size:var(--fs-sm);color:var(--text-strong);
}

.ag-cc-account-fields{ display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;width:100%;text-align:left }

.ag-cc-summary{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center }
.ag-cc-summary-detail{ display:flex;flex-direction:column;gap:8px;width:100%;min-width:0 }
.ag-cc-portrait{
  width:100%;max-width:220px;height:170px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border-dashed);border-radius:var(--radius-md);background:var(--surface-inset);
  padding:12px;text-align:center;
}
.ag-cc-summary-name{ display:flex;align-items:center;gap:8px;margin-top:6px }
.ag-cc-scores{ width:100%;max-width:400px;margin-top:10px;text-align:left }
.ag-cc-score-row{ margin-bottom:12px }
.ag-cc-score-top{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px }
/* .ag-meter, at the wizard's own height. The fill is --fill-meter, which this
   file used to spell out as raw hex — the same gradient site.css also had. */
.ag-cc-score-bar{ height:12px;border:1px solid var(--border-rule);background:var(--surface-inset) }

/* --- Footer (both layouts) --- */
.ag-cc-footer{
  flex-shrink:0;display:flex;align-items:center;gap:14px;
  padding:12px 20px 18px;border-top:1px solid var(--border-hairline);
  background:rgba(253,248,236,0.88);backdrop-filter:blur(12px);
}
.ag-cc-footer #cc-next-btn{ flex:1 }
.ag-cc-skip-link{
  border:none;background:transparent;padding:0;font-size:var(--fs-sm);
  color:var(--text-action);cursor:pointer;
}

/* Mobile: back-btn/skip-link live in the topbar instead (cc-back / cc-skip). */
#cc-back-btn,#cc-skip-link{ display:none }

/* THE ONE BREAKPOINT OFF THE SCALE (sm 560 / md 768 / lg 1080, documented in
   tokens-parchment.css). This is not a reflow but a switch between two whole
   layouts — mobile step-cards with a topbar, versus the desktop rail and
   deskbar — and 900px is where the rail stops being cramped. Snapping it to md
   would crush the rail; snapping it to lg would take it away from every laptop
   between 900 and 1080. Left deliberately, to be resolved with the wizard's own
   redesign rather than by a find-and-replace. */
@media (min-width: 900px){
  /* At desktop width the card is centred with its own margin, so the nav
     clearance folds into the top padding rather than adding to it. */
  .ag-creation{ padding:calc(var(--nav-height) + 24px) 24px 40px }
  .ag-cc-card{
    width:min(1060px,100%);min-height:0;
    border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);overflow:hidden;
  }
  .ag-cc-topbar{ display:none }
  .ag-cc-deskbar{ display:flex }
  .ag-cc-body{ min-height:560px }
  .ag-cc-rail{
    display:flex;flex-direction:column;gap:14px;width:250px;flex-shrink:0;
    padding:24px 20px;background:var(--surface-raised);border-right:1px solid var(--border-default);
  }
  .ag-cc-rail-list{ display:flex;flex-direction:column;gap:9px }
  .ag-cc-rail-divider{ height:1px;background:var(--border-hairline) }
  .ag-cc-rail-row{ display:flex;align-items:center;gap:9px }
  .ag-cc-rail-dot{ width:7px;height:7px;border-radius:999px;flex-shrink:0;border:1px solid var(--border-rule);background:transparent }
  .ag-cc-rail-row.is-current .ag-cc-rail-dot{ width:9px;height:9px;background:var(--accent-primary);border-color:var(--accent-primary) }
  .ag-cc-rail-row.is-done .ag-cc-rail-dot{ background:var(--gold-500);border-color:var(--gold-500) }
  .ag-cc-rail-label{ font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .ag-cc-rail-row.is-current .ag-cc-rail-label{ font-weight:600;color:var(--text-action) }
  .ag-cc-rail-row.is-todo .ag-cc-rail-label{ color:var(--text-muted) }
  .ag-cc-rail-meta{ margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted) }
  .ag-cc-rail-note{ margin-top:auto }
  .ag-cc-content{ padding:30px 40px 0 }
  .ag-cc-card > .banner{ margin:16px 40px 0 }
  .ag-cc-grid2{ grid-template-columns:1fr 1fr;gap:28px }
  .ag-cc-ability-grid{ grid-template-columns:1fr 1fr }
  .ag-cc-track-grid{ grid-template-columns:1fr 1fr;align-items:start }
  .ag-cc-track-summaries{ max-width:none }
  .ag-cc-rank-list{ display:grid;grid-template-columns:1fr 1fr }
  .ag-cc-account-fields{ grid-template-columns:1fr 1fr;max-width:520px }
  .ag-cc-summary{ flex-direction:row;align-items:flex-start;text-align:left;gap:44px;max-width:none }
  .ag-cc-summary-name{ margin-top:8px }
  .ag-cc-summary > .ag-cc-portrait{ flex:0 0 200px;width:200px;max-width:200px }
  .ag-cc-summary-detail{ flex:1 1 auto;align-items:flex-start }
  .ag-cc-scores{ max-width:none;margin-top:0 }

  .ag-cc-footer{
    padding:20px 40px 24px calc(250px + 40px);background:transparent;backdrop-filter:none;
  }
  .ag-cc-footer #cc-next-btn{ flex:none;width:190px }
  #cc-back-btn{ display:inline-flex }
  #cc-skip-link{ display:inline-block }
  /* An id selector outranks the user agent's [hidden]{display:none}, so the two
     rules above were quietly overriding the attribute the wizard sets: at
     desktop widths Back showed on the first step, and the skip link kept
     whatever ability it last named — "or skip Intellect", on a screen asking
     about Health. Re-state the attribute at the same weight. */
  #cc-back-btn[hidden],#cc-skip-link[hidden]{ display:none }
}

/* ===========================================================================
   Form marks, the Version 0 house standards
   ---------------------------------------------------------------------------
   Chips and pills are retired. A choice is marked the way you would mark a
   paper form: a pen loop round the option you picked, or a cross in a box.
   Options are plain text with no border and no fill; only the mark is drawn.
   See the design project's CLAUDE.md and DS-HANDOFF.md.
   =========================================================================== */

.ag-ink-opts{ display:flex;flex-wrap:wrap;gap:2px 6px;margin:6px 0 0;margin-left:-18px }

.ag-ink-opt{
  position:relative;padding:0 18px;min-height:40px;cursor:pointer;
  border:none;background:transparent;border-radius:3px;
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;color:var(--text-action);
}
.ag-ink-opt:hover{ background:rgba(184,134,11,0.12) }
.ag-ink-opt.is-on{ font-weight:700;color:var(--text-strong) }
.ag-ink-label{ position:relative;z-index:1 }

/* The loop sits outside the label's box on every side, the way a real pen
   circle overshoots what it is circling. */
.ag-ink-ring{
  position:absolute;left:-4px;right:-4px;top:-3px;bottom:-3px;
  width:calc(100% + 8px);height:calc(100% + 6px);
  overflow:visible;pointer-events:none;
}
.ag-ink-ring path{
  fill:none;stroke:var(--accent-primary);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0.88;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:ag-ink-draw 150ms cubic-bezier(0.5,0.1,0.3,1) forwards;
}
@keyframes ag-ink-draw{ to{ stroke-dashoffset:0 } }

.ag-cross-opt{
  display:flex;gap:8px;align-items:center;min-height:36px;padding:0 10px 0 8px;
  flex:1 1 calc((300px - 100%) * 999);
  cursor:pointer;border:none;background:transparent;border-radius:3px;
  font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-action);
}
.ag-cross-opt:hover{ background:rgba(184,134,11,0.12) }
.ag-ink-box{
  position:relative;flex-shrink:0;width:16px;height:16px;
  border:1px solid #C9B46A;border-radius:2px;background:rgba(255,255,255,0.6);
}
.ag-ink-cross{ position:absolute;inset:0;width:100%;height:100% }
.ag-ink-cross path{
  fill:none;stroke:var(--accent-primary);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:ag-ink-draw 50ms linear forwards;
}

@media (prefers-reduced-motion:reduce){
  .ag-ink-ring path,.ag-ink-cross path{ animation:none;stroke-dashoffset:0 }
}

/* A ruled line is the house input: no box, just the rule you write on. */
.ag-cc-ruled{
  width:100%;box-sizing:border-box;min-height:36px;padding:0 0 4px;
  border:none;border-bottom:1px solid #C9B46A;background:transparent;outline:none;
  font-family:var(--font-ui);font-size:var(--fs-md);color:var(--text-strong);
}
.ag-cc-ruled:focus-visible{ border-bottom-color:var(--accent-primary) }
.ag-cc-ruled-title{ font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:var(--track-title) }

.ag-btn-dashed{
  flex-shrink:0;padding:6px 14px;cursor:pointer;border:1px dashed var(--border-dashed);
  border-radius:3px;background:transparent;color:var(--text-action);
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;
}
.ag-btn-dashed:hover{ background:rgba(184,134,11,0.12) }

/* The short red note under a section somebody left empty. The submit button is
   never disabled, so this is the only thing that explains a refusal. */
.ag-cc-gap{ margin:6px 0 0;font-size:var(--fs-xs);color:var(--accent-primary) }

/* --- The ceiling ---------------------------------------------------------
   A maximum, never a score. It grows and has no end to reach, which is why the
   track behind it is only a wash rather than a bar with a full state. */
.ag-cc-max{ margin:14px 0 18px;max-width:460px }
.ag-cc-max-top{ display:flex;align-items:baseline;justify-content:space-between;gap:16px }
.ag-cc-max-word{
  font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tint,var(--text-accent));
}
.ag-cc-max-num{
  font-family:var(--font-display);font-size:48px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--tint,var(--text-accent));
}
.ag-cc-max-track{ margin-top:8px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--tint,#B8860B) 12%,transparent) }
.ag-cc-max-fill{
  height:100%;border-radius:2px;background:var(--tint,var(--gold-600));
  transition:width 320ms cubic-bezier(0.32,0.08,0.24,1);
}
@media (prefers-reduced-motion:reduce){ .ag-cc-max-fill{ transition:none } }

/* --- Health's factors and Mana's sources --------------------------------- */
.ag-cc-factors,.ag-cc-mana{ display:flex;flex-direction:column;gap:14px;max-width:560px }
.ag-cc-factor,.ag-cc-source,.ag-cc-belief,.ag-cc-practices{
  display:flex;flex-direction:column;gap:10px;padding:14px 16px;
  background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
}
.ag-cc-factor-head{ display:flex;align-items:center;justify-content:space-between;gap:12px }
.ag-cc-practice{ display:flex;align-items:center;gap:8px }
.ag-cc-practice .ag-cc-ruled{ flex:1 1 auto;min-width:0 }

.ag-cc-x{
  flex-shrink:0;width:30px;height:30px;padding:0;cursor:pointer;border:none;
  border-radius:3px;background:transparent;color:var(--text-muted);
  font-size:var(--fs-md);line-height:1;
}
.ag-cc-x:hover{ background:rgba(184,134,11,0.12);color:var(--accent-primary) }

.ag-cc-amount{ display:flex;align-items:center;flex-wrap:wrap;gap:8px }
.ag-cc-amount-word{ font-size:var(--fs-sm);color:var(--text-muted) }
.ag-cc-amount-num{
  min-width:3ch;text-align:center;font-family:var(--font-display);font-size:var(--fs-xl);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
.ag-cc-step-btn{
  width:30px;height:30px;flex-shrink:0;padding:0;cursor:pointer;
  border:1px solid var(--border-default);border-radius:3px;background:transparent;
  color:var(--text-action);font-size:var(--fs-md);line-height:1;
}
.ag-cc-step-btn:hover:not(:disabled){ background:rgba(184,134,11,0.12) }
.ag-cc-step-btn:disabled{ opacity:.3;cursor:default }

.ag-cc-add-row{ display:flex;align-items:flex-end;gap:10px }
.ag-cc-add-row .ag-cc-ruled{ flex:1 1 auto;min-width:0 }
.ag-cc-add-links{ display:flex;flex-wrap:wrap;gap:2px 8px;margin-left:-8px }
.ag-cc-add-link{
  display:flex;gap:8px;align-items:center;min-height:36px;padding:0 8px;cursor:pointer;
  border:none;border-radius:3px;background:transparent;color:var(--text-action);
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;
}
.ag-cc-add-link:hover{ background:rgba(184,134,11,0.12) }

/* --- A practice's own step ------------------------------------------------ */
.ag-cc-area-head{ display:flex;align-items:flex-start;gap:16px;margin-bottom:6px }
.ag-cc-score-box{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border:1px solid var(--tint,#C9B46A);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--tint,#B8860B) 8%,transparent);
  font-family:var(--font-display);font-size:26px;font-variant-numeric:tabular-nums;
  color:var(--tint,var(--text-accent));
}

.ag-cc-skill-cols{ display:grid;grid-template-columns:1fr;gap:22px;max-width:760px }
.ag-cc-skill-col{ display:flex;flex-direction:column;gap:10px;min-width:0 }
.ag-cc-skill-head{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px }
.ag-cc-skill{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--surface-inset);border:1px solid var(--border-rule);border-radius:var(--radius-xs);
}
.ag-cc-skill-top{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px }
.ag-cc-skill-name{ font-size:var(--fs-md);color:var(--text-strong) }
.ag-cc-rank-word{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
}
/* Ranks climb like item rarity: plain, moss, blue, plum, gold. */
.ag-cc-rank-word[data-rank="0"]{ color:#7A6F52 }
.ag-cc-rank-word[data-rank="1"]{ color:#4F7A3A }
.ag-cc-rank-word[data-rank="2"]{ color:#2C5D8A }
.ag-cc-rank-word[data-rank="3"]{ color:#6B3F5E }
.ag-cc-rank-word[data-rank="4"]{ color:#8A6508 }
.ag-cc-rank-stepper{ display:flex;align-items:center;gap:6px;flex-shrink:0 }
.ag-cc-rank-level{
  min-width:2ch;text-align:center;font-family:var(--font-display);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}

.ag-cc-account{ display:flex;flex-direction:column;gap:24px }
.ag-cc-account-side{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center }
.ag-cc-account-name{ font-family:var(--font-display);font-size:var(--fs-xl);letter-spacing:var(--track-title);color:var(--text-strong) }
.ag-cc-ruled-label{ width:100%;padding-bottom:5px;border-bottom:1px solid var(--border-hairline) }

@media (min-width:760px){
  .ag-cc-skill-cols{ grid-template-columns:1.15fr 1fr;gap:30px }
  .ag-cc-account{ flex-direction:row;align-items:flex-start;gap:44px }
  .ag-cc-account > div:first-child{ flex:1 1 auto;min-width:0 }
  .ag-cc-account-side{ width:250px;flex-shrink:0 }
}