/* ==========================================================================
   SECTIONS — dock internals, abilities, features, spellcraft, gear, persona.
   Spacing: tokens only. Rows: .rowline variants. Labels: .label only.
   ========================================================================== */

/* ==========================================================================
   HIT POINTS — the hero of the dock
   ========================================================================== */
.hp-figure{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s4);
  margin:var(--s1) 0 var(--s3);
}
.hp-nums{
  display:flex;
  align-items:baseline;
  gap:.14em;
  font-family:var(--font-display);
}
.hp-nums b{
  font-size:clamp(2.5rem,9.5vw,3.5rem);
  font-weight:700;
  line-height:1;
  color:var(--gold-deep);
  text-shadow:0 1px 0 color-mix(in srgb, var(--gold-hi) 60%, transparent);
  transition:color .25s ease;
}
.hp-nums b.is-down{color:var(--rubric)}
.hp-of{font-size:var(--fs-xl);color:var(--ink-faint)}
.hp-nums .maxnum{font-size:var(--fs-2xl);font-weight:600;color:var(--ink-soft);font-family:var(--font-display)}
.hp-direct-input{
  width:3.1ch;min-width:0;padding:0;border:0;border-bottom:1px dotted var(--gold-deep);background:transparent;
  color:var(--gold-deep);text-align:center;font:700 clamp(2.2rem,8vw,3.2rem)/1 var(--font-display);appearance:textfield
}
.hp-direct-input::-webkit-inner-spin-button,.hp-direct-input::-webkit-outer-spin-button{appearance:none;margin:0}
.hp-direct-input:focus{outline:2px solid var(--focus);outline-offset:2px;background:var(--field-focus)}
.hp-direct-input.is-down{color:var(--rubric)}
.hp-direct-input--max{width:2.7ch;color:var(--ink-soft);font-size:var(--fs-2xl);font-weight:600}
.hp-max-edit{display:grid;justify-items:center;gap:2px}
.hp-max-edit small{font:italic .66rem/1 var(--font-scribal);color:var(--ink-faint);white-space:nowrap}

/* the ward — temp HP as a shield layer */

.ac-badge .ac-label{
  position:absolute;
  left:0;right:0;bottom:0;
  text-align:center;
}

/* AC — its own medallion, in the dock where it belongs */
.ac-badge{
  position:relative;
  width:50px;height:58px;
  flex:none;
  color:var(--gold-deep);
}
.ac-badge svg{position:absolute;inset:0;width:100%;height:100%}
.ac-badge .ac-num{
  position:absolute;
  inset:0 0 14px;
  display:grid;place-items:center;
}
.ac-badge .ac-num .statval{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-lg);
  color:var(--ink);
}

/* INIT — the shield's squire: same family, same height, square plinth */
.init-badge{
  position:relative;
  width:50px;height:58px;
  flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--rule));
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 6%, transparent);
  color:var(--gold-deep);
}
.init-badge .init-num,.init-badge .init-num .statval{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-lg);
  line-height:1;
  color:var(--ink);
}
.init-badge .init-label{color:var(--gold-deep);line-height:1}
.ac-badge .ac-label{color:var(--gold-deep)}
/* the ✱ on the shield's shoulder — bespoke pad opening UP and RIGHT into
   empty background; a mark never reaches a real control. */
.ac-badge .ac-num .stat{position:static}
.ac-badge .ench-mark{
  position:absolute;
  top:0;right:0;
  transform:none;
  min-width:0;
  padding:0;
  font-size:var(--fs-micro);
  line-height:1;
  vertical-align:baseline;
}
.ac-badge .ench-mark::after{width:26px;height:26px;top:-10px;left:-1px}
.ac-badge .ench-tip{left:auto;right:-4px;transform:none;bottom:auto;top:calc(100% + 4px)}

/* layered bar: crimson vitae + verdigris ward.
   Widths are DATA — set from JS as --fill / --ward-w custom properties. */
.hp-bar{
  position:relative;
  height:11px;
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--panel-2);
  overflow:hidden;
  margin-bottom:var(--s3);
}
.hp-bar .bar-fill{
  position:absolute;top:0;bottom:0;left:0;
  width:var(--fill,0%);
  background:linear-gradient(180deg,var(--rubric) 0%,var(--rubric-deep) 100%);
  border-radius:var(--r-md) 0 0 6px;
  transition:width .35s ease;
}
.hp-bar .bar-ward{
  position:absolute;top:0;bottom:0;right:0;
  width:var(--ward-w,0%);
  background:repeating-linear-gradient(-45deg,var(--ward) 0 5px,var(--ward-hi) 5px 10px);
  border-left:1px solid var(--panel);
  transition:width .35s ease;
}

.hp-controls{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s2);
  align-items:stretch;
}
.dmg-heal{display:flex;gap:var(--s2)}
/* Damage and Crit are two halves of ONE button — shared crimson, one seam */
.dmg-split{display:flex;flex:1.35;min-width:0}
.dmg-split .btn-damage{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
.dmg-split .btn-crit{
  flex:0 0 auto;
  padding-inline:var(--s2);
  border-top-left-radius:0;border-bottom-left-radius:0;
  border-left:1px solid color-mix(in srgb, var(--on-danger) 32%, transparent);
}
.btn-major{
  flex:1;
  min-height:var(--field);
  border-radius:var(--r-sm);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid;
  transition:transform .1s ease, filter .15s ease;
}
.btn-major:active{transform:translateY(1px)}
.btn-major:hover{filter:brightness(1.06)}
.btn-damage{
  background:linear-gradient(180deg,var(--danger-a),var(--danger-b));
  border-color:var(--danger-b);
  color:var(--on-danger);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.btn-heal{
  background:var(--panel-2);
  border-color:var(--gold-deep);
  color:var(--gold-deep);
}
/* ---------- conditional vitals rows: death saves, hit dice, inspiration ---------- */
.vrow{
  display:flex;
  align-items:center;
  gap:var(--s1) var(--s3);
  flex-wrap:wrap;
  min-height:var(--field);
  margin-top:var(--s2);
  padding-top:var(--s2);
  border-top:1px solid var(--rule-soft);
}
.vrow--alarm{
  border-top:1px solid var(--rubric);
  background:color-mix(in srgb, var(--rubric) 8%, transparent);
  border-radius:var(--r-sm);
  padding:var(--s1) var(--s2);
  animation:alarmfade .45s ease;
}
.vrow--rest{
  border-top:1px solid var(--gold-deep);
  background:color-mix(in srgb, var(--gold-hi) 10%, transparent);
  border-radius:var(--r-sm);
  padding:var(--s1) var(--s2);
  animation:alarmfade .35s ease;
}
@keyframes alarmfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* wide but short type — pad the touch band, not the type */
.vlabel.has-rules{padding-block:var(--s2);margin-block:calc(-1 * var(--s2))}
.vlabel{flex:none}
.vrow--alarm .vlabel{color:var(--rubric)}
.vlabel em{font-family:var(--font-scribal);font-size:1.15em;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.vmark{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  padding:0 var(--s1) 0 var(--s2);
}
.vmark--succ{color:var(--mend)}
.vmark--fail{color:var(--rubric)}
/* a lettered button, not a pip — its own furniture, no ::before */
.roll-death{
  flex:none;
  min-height:var(--field);
  padding:0 var(--s2);
  border:1px solid var(--rubric);
  border-radius:var(--r-sm);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rubric);
  transition:background-color .15s ease;
}
.roll-death:hover{background:color-mix(in srgb, var(--rubric) 12%, transparent)}
.roll-death:active{transform:scale(.96)}
.revive-controls{display:inline-flex;align-items:center;gap:var(--s1)}
.revive-btn{
  border-color:var(--mend);
  color:var(--mend);
}
.revive-btn:hover{background:color-mix(in srgb, var(--mend) 12%, transparent)}
.revive-btn:disabled{border-color:var(--rule);color:var(--ink-faint);opacity:.7}
.vrow--dead .vcount{flex:1 1 12rem;margin-left:0}
.vcount{
  margin-left:auto;
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
  flex:none;
}
/* 34px is the drawn size and it stays 34px — a 44px disc here would shove the
   vitals row's wrapped content around. The TAP target is grown instead: an
   invisible ::after centred on the button carries the full --field 44x44, so
   the finger gets 44 and the parchment keeps its 34. */
.vclose{position:relative;flex:none;width:34px;height:34px;color:var(--ink-faint);font-size:var(--fs-label);border-radius:var(--r-sm)}
.vclose::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--field);height:var(--field)}
.vclose:hover{color:var(--rubric);background:color-mix(in srgb, var(--rubric) 10%, transparent)}
.insp{
  width:var(--field);height:var(--field);
  font-size:var(--fs-xl);
  line-height:1;
  /* the UNLIT ember. --rule-soft is a hairline colour, not an ink: it measured
     1.86:1 on the panel in daylight and 1.56:1 in candlelight, so the control
     was all but invisible until it was lit. --ink-faint is the sheet's most
     recessive INK (5.19:1 on panel), so unlit still reads as cold, dead ash —
     it just no longer reads as nothing. Lit is still --ember plus the glow and
     the pulse below, so the two states stay obviously different. */
  color:var(--ink-faint);
  transition:color .2s ease, text-shadow .2s ease, transform .12s ease;
}
.insp:active{transform:scale(.9)}
.insp.is-lit{
  color:var(--ember);
  text-shadow:0 0 8px color-mix(in srgb, var(--gold-hi) 75%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent);
  animation:emberpulse 2.6s ease-in-out infinite;
}
@keyframes emberpulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.25)}
}

/* ==========================================================================
   ACTION ECONOMY — inside the dock
   ========================================================================== */
.econ-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.econ-info{
  flex:none;
  width:var(--field);height:var(--field);
  border:1px solid var(--rule-soft);
  border-radius:50%;
  color:var(--gold-deep);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  transition:background-color .15s ease;
}
.econ-info:hover{background:color-mix(in srgb, var(--gold-hi) 16%, transparent)}
.econ-info::after{top:1px;right:1px}

.trackers{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s2);
}
.tracker{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
  min-height:var(--field-tall);
  padding:var(--s2) var(--s1);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  transition:transform .1s ease, background-color .15s ease;
  z-index:1;
}
.tracker:active{transform:scale(.985)}
.tracker-ic{font-size:var(--fs-lg);line-height:1;color:var(--gold-deep)}
.tracker-name{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.tracker-state{
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
}
.tracker.is-used,.tracker[aria-pressed="true"]{background:color-mix(in srgb, var(--panel-2) 52%, var(--bg-1));border-style:dashed;filter:saturate(.35)}
.tracker.is-used .tracker-name,.tracker[aria-pressed="true"] .tracker-name{text-decoration:line-through;text-decoration-color:var(--rubric);text-decoration-thickness:2px;color:var(--ink-faint)}
.tracker.is-used .tracker-ic,.tracker[aria-pressed="true"] .tracker-ic{opacity:.25;filter:grayscale(1)}
.tracker.is-used .tracker-state,.tracker[aria-pressed="true"] .tracker-state{color:var(--rubric);font-weight:700;transform:rotate(-4deg)}
.tracker[aria-pressed="true"]:focus-visible{filter:none}

.reset-btn{
  display:block;
  width:100%;
  min-height:var(--field);
  margin-top:var(--s3);
  border:1px solid var(--gold-deep);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-deep);
  transition:transform .1s ease, background-color .15s ease;
}
.reset-btn:hover{background:color-mix(in srgb, var(--gold-hi) 14%, var(--panel-2))}
.reset-btn:active{transform:translateY(1px)}

.ap-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
  margin-bottom:var(--s1);
}
.ap-count b{font-size:var(--fs-body);color:var(--gold-deep);font-family:var(--font-display)}

.act-group{
  margin:var(--s3) 0 var(--s2);
  display:flex;align-items:center;gap:.5em;
}
.act-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule-soft),transparent)}
.act-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:var(--s2);
}
.act{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  min-height:var(--field);
  padding:var(--s2) var(--s3);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  text-align:left;
  transition:transform .1s ease, border-color .15s ease, background-color .15s ease;
}
.act:not(:disabled):hover{border-color:var(--gold-deep)}
.act:not(:disabled):active{transform:scale(.98)}
.act:disabled{opacity:.42}
.act-name{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;flex-direction:column;gap:var(--s1);
  min-width:0;
}
.act-name small{
  font-family:var(--font-scribal);
  font-style:italic;
  font-weight:400;
  font-size:var(--fs-label);
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink-faint);
}
.act-cost{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-small);
  color:var(--gold-deep);
  display:flex;align-items:center;gap:.2em;
  flex:none;
}
.ap-glyph{font-size:.7em;transform:translateY(-.05em)}
.act-cost--gain{color:var(--ward)}
.act--wide{grid-column:1 / -1;border-style:dashed;border-color:color-mix(in srgb, var(--ward) 55%, var(--rule-soft))}

/* ---------- live movement, conditions + rest ---------- */
/* SPEEDS — a plain list under an Afflictions-grammar heading (Tim, pass 4):
   the word, the rule line, "Add a Speed" hard right, modes listed beneath. */
.speed-list{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:2px}
.speed-row{display:flex;align-items:baseline;gap:var(--s2);min-height:var(--field-chip)}
.speed-type{flex:none;min-width:6.5em;font-weight:400;color:var(--ink-soft)}
.speed-feet .statval,.speed-feet{font-family:var(--font-display);font-weight:700;color:var(--gold-deep)}
.speed-feet small{font-weight:400;font-size:var(--fs-label);color:var(--ink-faint)}
.speed-source{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-faint);font:italic .75rem/1.2 var(--font-scribal)}
.speed-x{
  margin-left:auto;flex:none;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  color:var(--ink-faint);
  font-size:var(--fs-micro);line-height:1;
}
.speed-x:hover{color:var(--rubric);background:color-mix(in srgb,var(--rubric) 10%,transparent)}
.speed-menu-types{display:flex;flex-wrap:wrap;gap:var(--s1)}
.speed-menu-feet{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.speed-menu-feet input{
  width:5.5rem;min-height:var(--field-compact);
  padding:0 var(--s2);
  text-align:center;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  color:var(--ink);
  font:700 var(--fs-body)/1 var(--font-display);
}
.speed-menu-feet .btn-ink{margin-left:auto}
.live-effects{display:grid;gap:var(--s2);margin-bottom:var(--s3)}
.concentration-control{
  display:flex;
  align-items:center;
  gap:var(--s2);
  min-height:var(--field);
  padding:var(--s1) var(--s2);
  border:1px dashed var(--rule-soft);
  border-radius:var(--r-sm);
}
.effect-copy{color:var(--ink-faint);font:italic .78rem/1.25 var(--font-scribal)}
.concentration-toggle{
  display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--field-compact);padding:0 var(--s2);
  border:1px solid var(--rule-soft);border-radius:var(--r-pill);color:var(--ink-soft);
  font:700 .75rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase
}
.concentration-toggle[aria-pressed="true"]{border-color:var(--ward);color:var(--ward);background:color-mix(in srgb,var(--ward) 9%,transparent)}
#concentration-effect{
  flex:1;min-width:8rem;min-height:var(--field-compact);padding:0 var(--s2);border:0;border-bottom:1px solid var(--rule-soft);
  background:transparent;color:var(--ink);font:italic .9rem/1 var(--font-scribal)
}
@media (max-width:520px){
  .concentration-control{align-items:flex-start;flex-wrap:wrap}
  .effect-copy{flex-basis:100%}
}
.cond-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.cond-none{font-family:var(--font-scribal);font-style:italic;color:var(--ink-faint);font-size:var(--fs-small)}
.cond-menu{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  margin-top:var(--s3);
  padding:var(--s3);
  border:1px dashed var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel-2);
}
.exhaustion-affliction{display:inline-flex;align-items:stretch}
.chip--exhaustion{border-radius:var(--r-pill) 0 0 999px;border-right:0;color:var(--rubric)}
/* height is already 44 from .chip's min-height:var(--field); the WIDTH was 38.
   --field on both axes gives the stepper a square 44 target. */
.chip--exhaustion-step{min-width:var(--field);border-radius:0 999px 999px 0;color:var(--rubric);background:color-mix(in srgb,var(--rubric) 7%,var(--panel-2))}
.exhaustion-menu-option{flex:1 0 100%;display:grid;gap:var(--s2);padding-bottom:var(--s3);margin-bottom:var(--s1);border-bottom:1px solid var(--rule-soft)}
.exhaustion-menu-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.exhaustion-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.exhaustion-table-row{display:flex;align-items:center;gap:var(--s1);min-width:0;padding:var(--s1) var(--s2);border:1px solid var(--rule-soft);border-radius:var(--r-sm);color:var(--ink-faint);font:.72rem/1.25 var(--font-scribal)}
.exhaustion-table-row b{color:var(--gold-deep);font-family:var(--font-display)}
.exhaustion-table-row.is-current{border-color:var(--rubric);background:color-mix(in srgb,var(--rubric) 8%,transparent);color:var(--rubric)}
@media (max-width:520px){.exhaustion-table{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rest-row{display:flex;gap:var(--s3)}
.rest-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
  min-height:var(--field);
  padding:var(--s2);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  transition:transform .1s ease, border-color .15s ease;
}
.rest-btn:hover{border-color:var(--gold-deep)}
.rest-btn:active{transform:translateY(1px)}
.rest-btn .rest-name{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.rest-btn .rest-note{
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
  text-align:center;
}
.rest-btn .rest-ic{color:var(--gold-deep);font-size:var(--fs-body);line-height:1}
.rest-btn[aria-expanded="true"]{border-color:var(--gold-deep);background:color-mix(in srgb, var(--gold-hi) 12%, var(--panel-2))}

/* ==========================================================================
   ABILITIES — offset, overlapping circles; open card spans the grid row
   ========================================================================== */
.ab-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-items:start;
  gap:var(--s2);
}
@media (min-width:600px){.ab-grid{grid-template-columns:repeat(3,1fr)}}
.ab-card:has(.ab-toggle[aria-expanded="true"]){grid-column:1/-1}

.ab-card{
  display:flex;
  flex-direction:column;
  padding:var(--s2) var(--s2) var(--s1);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm) 3px 10px 10px;
  background:var(--panel-2);
}
.ab-card--prime{
  border-color:color-mix(in srgb, var(--gold) 65%, var(--rule-soft));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-hi) 22%, transparent);
}

.ab-orbs{
  position:relative;
  height:80px;
  margin:var(--s1) 0;
}
/* the pair is one composition, centred as one */
.orb-set{
  position:absolute;
  left:50%; top:0;
  width:98px; height:78px;
  margin-left:-49px;
}
.orb{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-family:var(--font-display);
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
}
.orb--mod{
  left:0;
  top:9px;
  width:66px;height:66px;
  border:1.5px solid var(--gold-deep);
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--gold-hi) 22%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--panel) 96%, #fff 4%), var(--panel-2) 84%);
  box-shadow:
    inset 0 0 0 3.5px var(--panel-2),
    inset 0 0 0 4.5px color-mix(in srgb, var(--gold) 55%, transparent),
    0 2px 5px -2px rgba(60,35,5,.5);
}
.ab-card--prime .orb--mod{
  border-color:var(--gold);
  box-shadow:
    inset 0 0 0 3.5px var(--panel-2),
    inset 0 0 0 4.5px var(--gold),
    0 0 12px -3px color-mix(in srgb, var(--gold-hi) 80%, transparent),
    0 2px 5px -2px rgba(60,35,5,.5);
}
.orb--mod .statval{
  font-size:var(--fs-2xl);
  font-weight:700;
  color:var(--orb-num);
  text-shadow:0 1px 0 color-mix(in srgb, var(--gold-hi) 55%, transparent);
  padding:0;
}
/* 56 + 36 = 92 against a 66-wide sibling — ten pixels of genuine overlap */
.orb--score{
  left:56px;
  top:0;
  width:36px;height:36px;
  border:1px solid var(--rule);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 96%, #fff 4%), var(--panel-2));
  box-shadow:
    inset 0 0 0 2px var(--panel-2),
    inset 0 0 0 2.6px var(--rule-soft),
    0 1px 4px -1px rgba(60,35,5,.55);
}
.orb--score .statval{
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--ink);
  padding:0;
}
.orb .stat{position:static}
/* the ✱ gets the set's empty bottom-right corner; pad opens right onto background */
.orb-set .ench-mark{
  position:absolute;
  left:62px; top:44px;
  transform:none;
  font-size:var(--fs-label);
  z-index:1;
}
.orb-set .ench-mark::after{width:32px;height:28px;top:-4px;left:-3px}
.orb-set .ench-tip{left:auto;right:-4px;transform:none;bottom:auto;top:calc(100% + 4px)}

.ab-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35em;
  width:100%;
  min-height:var(--field);
  padding:var(--s1) var(--s2);
  border-top:1px solid var(--rule-soft);
  border-radius:0 0 8px 8px;
  transition:background-color .15s ease;
}
.ab-toggle:hover{background:color-mix(in srgb, var(--gold-hi) 12%, transparent)}
.ab-name{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.ab-card--prime .ab-name{color:var(--ink)}
.ab-chev{color:var(--gold-deep);font-size:var(--fs-label);transition:transform .2s ease;flex:none}
.ab-toggle[aria-expanded="true"] .ab-chev{transform:rotate(90deg)}
/* rows only show when a card is open, and an open card spans the panel's
   full width — so pulling the body flush to the card border puts the lead
   column on the SAME edge as prep dots, kit toggles and attunement pips. */
/* an open card owns its row; flow the skills into columns on wide screens */

/* save/skill rows ride the shared .rowline template (lead pip column, value
   column, no tail unless the skill is custom) — set in the markup. */
.ab-row--save{
  border-top:1px solid var(--rule-soft);
  background:color-mix(in srgb, var(--gold-hi) 8%, transparent);
}
/* the prof button spans the lead + name columns via subgrid, so every pip
   sits in the SAME 44px lead column as prep dots and attune toggles */
.prof-btn{
  grid-column:1 / 3;
  display:grid;
  grid-template-columns:subgrid;
  align-items:center;
  justify-items:start;
  min-width:0;
  min-height:var(--field);
  padding:0;
  text-align:left;
  border-radius:var(--r-sm);
  transition:background-color .15s ease;
}
.prof-btn:hover{background:color-mix(in srgb, var(--gold-hi) 14%, transparent)}
.ab-rowname{
  font-size:var(--fs-label);
  line-height:1.15;
  color:var(--ink-soft);
  overflow-wrap:break-word;
  hyphens:auto;
  text-align:left;
}
.ab-row--save .ab-rowname{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
/* --gold is a fill/stroke colour, not a text ink: at .75em (9px) it measured
   3.09:1 on the panel in daylight. --gold-deep is the token tokens.css already
   documents as carrying small-caps micro-label TEXT — 5.74:1 on panel. */
.ab-new{color:var(--gold-deep);font-size:.75em;margin-left:.2em}
.ab-row .stat .statval{
  min-width:34px;
  min-height:var(--field);
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  color:var(--ink);
}
.ab-row--save .stat .statval{color:var(--gold-deep);font-weight:700}
.ab-none{
  margin:var(--s2) 0 var(--s1);
  padding-top:var(--s1);
  border-top:1px dotted var(--rule-soft);
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  line-height:1.25;
  color:var(--ink-faint);
  text-align:center;
}

/* ==========================================================================
   CLASS FEATURES + RESOURCES
   ========================================================================== */
.feat-line{border-top:1px dotted var(--rule-soft)}
.feat-line:first-of-type{border-top:none}
.feat-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--s3);
  min-height:var(--field);
  padding:0 var(--s2);
  text-align:left;
  border-radius:var(--r-sm);
  transition:background-color .15s ease;
}
.feat-row:hover{background:color-mix(in srgb, var(--gold-hi) 12%, transparent)}
.feat-name{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:var(--fs-body);
  color:var(--ink);
  line-height:1.2;
}
.feat-src{
  flex:none;
  padding:.1em .45em;
  border:1px solid var(--rule-soft);
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.feat-chev{flex:none;color:var(--ink-faint);font-size:var(--fs-small);transition:transform .18s ease}
.feat-row[aria-expanded="true"] .feat-chev{transform:rotate(90deg)}
.feat-desc{
  padding:var(--s2) var(--s3) var(--s3);
  border-bottom:1px dotted var(--rule-soft);
  background:color-mix(in srgb, var(--gold-hi) 7%, transparent);
  font-size:var(--fs-small);
  line-height:1.4;
  color:var(--ink-soft);
}
.feat-desc .ink-field--block{min-height:3.2rem;background:transparent;border-color:transparent}
.feat-desc .ink-field--block:hover{border-color:var(--rule-soft)}
.feature-use-config{flex:none}
.feature-refresh-config{flex:none}
.config-link{
  min-height:var(--field-chip);padding:0 var(--s2);border-radius:var(--r-sm);color:var(--gold-deep);
  font:700 .75rem/1 var(--font-display);letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px
}
.refresh-badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--field-chip);padding:0 var(--s2);
  border:1px solid var(--rule-soft);border-radius:var(--r-pill);color:var(--gold-deep);
  font:700 .75rem/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap
}
a.refresh-badge:hover,a.refresh-badge:focus-visible{border-color:var(--gold-deep);background:color-mix(in srgb,var(--gold-hi) 12%,transparent)}


/* ==========================================================================
   SPELLCRAFT
   ========================================================================== */

/* spell levels are sub-sections — same hierarchy vocabulary as .subsection--rows:
   a hairline left bracket binds each level's spell rows to its rubric head. */
.sp-group{
  padding-left:var(--s4);
  border-left:2px solid var(--rule-soft);
}
.sp-group + .sp-group{margin-top:var(--s4)}
.sp-head{
  display:flex;
  align-items:center;
  gap:var(--s1) var(--s3);
  flex-wrap:wrap;
  min-height:var(--field);
  padding:var(--s1) 0;
  border-bottom:1px solid var(--rule);
}
.sp-lv{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-display);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-deep);
  flex:none;
}
/* the aldus-leaf rubric mark — matches .subhead::before */
.sp-lv::before{
  content:"❧";
  font-family:var(--font-scribal);
  font-weight:400;
  font-size:1.05em;
  line-height:1;
  color:var(--rubric);
}
.sp-slotcount{
  margin-left:auto;
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
  flex:none;
}

/* spell rows ride .rowline: prep-dot lead column + row grid inside the button */
.spell-line:first-of-type{border-top:none}
.spell-line{
border-top:1px dotted var(--rule-soft)
display:grid;grid-template-columns:var(--row-lead) minmax(0,1fr);align-items:center;column-gap:var(--s2)}
.prep-dot{position:relative;width:var(--row-lead);height:var(--field);flex:none}
.prep-dot::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  border:1.5px solid var(--rule);
  transition:background .18s ease, border-color .18s ease;
}
.prep-dot[aria-pressed="true"]::before{
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-deep) 75%);
  border-color:var(--gold-deep);
  box-shadow:var(--pip-glow);
}
.spell-row{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto auto 12px;
  grid-template-areas:
    "name rc  tag chev"
    "meta meta tag chev";
  column-gap:var(--s2);
  row-gap:var(--s1);
  align-items:center;
  min-height:var(--field);
  padding:var(--s1) var(--s1);
  text-align:left;
  border-radius:var(--r-sm);
  transition:background-color .15s ease;
}
.spell-row:hover{background:color-mix(in srgb, var(--gold-hi) 12%, transparent)}
.sp-name{grid-area:name;font-weight:600;font-size:var(--fs-body);color:var(--ink);line-height:1.2}
.sp-rc{
  grid-area:rc;
  min-width:1.5em;
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ward);
}
.sp-rc.is-none{color:var(--ink-faint);font-weight:400}
.sp-meta{grid-area:meta;display:flex;gap:.5em;min-width:0}
.sp-time,.sp-range{
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sp-tag{
  grid-area:tag;
  align-self:center;
  padding:.1em .4em;
  border:1px solid;
  border-radius:var(--r-sm);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
}
.sp-tag--atk{color:var(--rubric);border-color:var(--rubric)}
.sp-tag--sav{color:var(--gold-deep);border-color:var(--gold-deep)}
.sp-tag--buf{color:var(--ward);border-color:var(--ward)}
.sp-chev{grid-area:chev;color:var(--ink-faint);font-size:var(--fs-small);transition:transform .18s ease}
.spell-row[aria-expanded="true"] .sp-chev{transform:rotate(90deg)}
@media (min-width:760px){
  .spell-row{
    grid-template-columns:minmax(12rem,1fr) 2.4rem 5.6rem 4.6rem 8.75rem 12px;
    grid-template-areas:"name rc time range tag chev";
  }
  .sp-meta{display:contents}
  .sp-time{grid-area:time}
  .sp-range{grid-area:range}
}

/* the verbatim rules text — indented to the shared lead column edge */
.spell-desc{
  grid-column:1 / -1;
  padding:var(--s3) var(--s3) var(--s3) var(--row-lead);
  border-top:1px dotted var(--rule-soft);
  background:color-mix(in srgb, var(--gold-hi) 7%, transparent);
}
.sp-props{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s1) var(--s4);
  margin:0 0 var(--s2);
  padding-bottom:var(--s2);
  border-bottom:1px dotted var(--rule-soft);
}
.sp-prop{display:inline-flex;align-items:baseline;gap:.35em;min-width:0}
.sp-prop .label{flex:none}
.sp-prop-v{font-size:var(--fs-small);color:var(--ink-soft)}
.sp-text{
  font-family:var(--font-scribal);
  font-size:var(--fs-small);
  line-height:1.44;
  color:var(--ink-soft);
}
.sp-text p{margin:var(--s2) 0}
.sp-text p:first-child{margin-top:0}
.sp-text p:last-child{margin-bottom:0}
.sp-text b{
  font-family:var(--font-display);
  font-style:normal;
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-right:.3em;
}
.sp-note{
  margin:var(--s3) 0 0;
  padding:var(--s2) var(--s3);
  border-left:2px solid var(--verdigris);
  background:color-mix(in srgb, var(--verdigris) 7%, transparent);
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-small);
  line-height:1.35;
  color:var(--ink-soft);
}
.sp-note b{
  font-family:var(--font-display);
  font-style:normal;
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--verdigris);
  display:block;
  margin-bottom:var(--s1);
}

/* ==========================================================================
   GEAR — weapons grid, kit rows, attunement, coin.
   The weapons list is ONE grid: header cells and data cells share the same
   template, so the edit fields always align with their column headers.
   ========================================================================== */
.arms-grid{
  display:grid;
  grid-template-columns:minmax(6.5rem,1.2fr) minmax(3.5rem,auto) minmax(6rem,1fr) minmax(5rem,1fr) var(--row-tail);
  column-gap:var(--s2);
  align-items:center;
  font-size:var(--fs-small);
}
.arms-grid .arm-h{
  padding:var(--s1) var(--s1);
  border-bottom:1px solid var(--rule);
  align-self:stretch;
  display:flex;
  align-items:end;
}
.arms-grid .arm-c{
  display:flex;
  align-items:center;
  min-height:var(--field);
  border-bottom:1px dotted var(--rule-soft);
}
.arms-grid .arm-c .ink-field{width:100%}
.arms-grid .arm-name .ink-field{font-weight:600;color:var(--ink)}
.arms-grid .arm-bonus .ink-field{font-family:var(--font-display);font-weight:700;color:var(--gold-deep);white-space:nowrap;justify-content:center}
.arms-grid .arm-note .ink-field{font-family:var(--font-scribal);font-style:italic;color:var(--ink-faint);font-size:.9em}
/* density where density is right: the desktop table may use the compact height */
@media (min-width:760px){
  .arms-grid .arm-c{min-height:var(--field-compact)}
  .arms-grid .arm-c .ink-field{min-height:var(--field-compact)}
}
.table-wrap{overflow-x:auto}

/* Narrow pages turn each weapon into a labelled ledger entry. The source
   remains one semantic table, but no field or strike control sits off-canvas. */
@media (max-width:599px){
  .table-wrap{overflow-x:visible}
  .arms-grid{
    grid-template-columns:minmax(0,1fr) var(--row-tail);
    grid-auto-flow:row;
    column-gap:var(--s2);
  }
  .arms-grid .arm-h{display:none}
  .arms-grid .arm-c{
    grid-column:1;
    display:grid;
    align-items:stretch;
    min-width:0;
    padding:var(--s1) 0;
    border-bottom:none;
  }
  .arms-grid .arm-c::before,
  .kit-note::before{
    font-family:var(--label-font);
    font-size:var(--label-size);
    font-weight:var(--label-weight);
    letter-spacing:var(--label-track);
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .arms-grid .arm-c:nth-child(5n + 1){padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
  .arms-grid .arm-c:nth-child(5n + 1)::before{content:"Name"}
  .arms-grid .arm-c:nth-child(5n + 2)::before{content:"Attack / DC"}
  .arms-grid .arm-c:nth-child(5n + 3)::before{content:"Damage & Type"}
  .arms-grid .arm-c:nth-child(5n + 4)::before{content:"Notes"}
  .arms-grid .arm-c:nth-child(5n){
    grid-column:2;
    align-self:start;
    justify-items:center;
    padding-top:var(--s1);
    border-top:none;
  }
}

/* kit rows ride .rowline: 44px attune lead, name, note, grant, 44px ✕ tail */
.kit{list-style:none;margin:0;padding:0}
.kit-labels{
  display:grid;
  grid-template-columns:var(--row-lead) minmax(6rem,1.1fr) minmax(5rem,1fr) auto var(--row-tail);
  gap:var(--s2);
  padding:0 0 var(--s1);
  color:var(--ink-faint);
  font:600 .66rem/1 var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kit .rowline{grid-template-columns:var(--row-lead) minmax(6rem,1.1fr) minmax(5rem,1fr) auto var(--row-tail)}
.kit-att{
  width:var(--row-lead);height:var(--field);
  display:grid;place-items:center;
  border-radius:var(--r-sm);
}
.kit-att:hover{background:color-mix(in srgb, var(--gold-hi) 14%, transparent)}
.kit-att .pip{width:22px;height:22px}
.kit-att .pip::before{inset:5px}
.kit-att .pip--dia::before{inset:6px}
.kit-dot{width:var(--row-lead);text-align:center;color:var(--rule);font-size:.7em}
.kit-name{min-width:0;font-size:var(--fs-small)}
.kit-name .ink-field,.kit-note .ink-field{width:100%}
.kit-note{
  min-width:0;
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-label);
  color:var(--ink-faint);
}
.kit-grant{
  justify-self:end;
  padding:.05em .4em;
  border:1px solid var(--ward);
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ward);
  white-space:nowrap;
}

@media (max-width:599px){
  .kit-labels{display:none}
  .kit .rowline{
    grid-template-columns:var(--row-lead) minmax(0,1fr) var(--row-tail);
    row-gap:var(--s1);
    padding:var(--s2) 0;
  }
  .kit .rowline > :nth-child(1){grid-column:1;grid-row:1}
  .kit .rowline > :nth-child(2){grid-column:2;grid-row:1}
  .kit .rowline > :nth-child(3){grid-column:2 / -1;grid-row:2}
  .kit .rowline > :nth-child(4){grid-column:2 / -1;grid-row:3;justify-self:start}
  .kit .rowline > :nth-child(5){grid-column:3;grid-row:1}
  .kit-note{display:grid;min-width:0}
  .kit-note::before{content:"Notes"}
}

/* attunement rows share the same lead column edge as the kit rows */
.attune-row{
  display:grid;
  grid-template-columns:var(--row-lead) minmax(0,1fr);
  align-items:center;
  column-gap:var(--s2);
  min-height:var(--field);
  border-top:1px dotted var(--rule-soft);
}
.attune-row:first-of-type{border-top:none}
.attune-row > .pip{justify-self:center}
.attune-name{font-size:var(--fs-small);color:var(--ink);line-height:1.2;font-weight:600}
.attune-vacant{font-family:var(--font-scribal);font-style:italic;color:var(--ink-faint);font-size:var(--fs-small)}

/* coin: same card padding as its sibling panels, one shared template */
.coins{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:var(--s2)}
.coin{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
  padding:var(--s2);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:var(--panel-2);
}
.coin .stepper{border-color:var(--rule-soft);background:transparent}
.coin .stepper output{font-size:var(--fs-body);min-width:2.6em}

/* ==========================================================================
   PERSONA
   ========================================================================== */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s2)}
.field-cell{
  padding:var(--s2) var(--s3);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:var(--panel-2);
}
.field-cell .label{display:block;margin-bottom:var(--s1)}
.field-v{font-size:var(--fs-body);color:var(--ink);display:flex;align-items:center;min-height:var(--field)}
.lang-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-height:var(--field)}
.lang-chip{
  display:inline-flex;
  align-items:center;
  gap:.2em;
  min-height:var(--field-chip);
  padding:0 var(--s1) 0 var(--s2);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  background:var(--panel-2);
  font-size:var(--fs-small);
}
.lang-chip .ink-field{border-bottom:none;padding:0 .1em;min-height:var(--field-chip)}
.lang-x{width:var(--field);height:var(--field);flex:none;color:var(--rubric);opacity:.9;font-size:var(--fs-small);border-radius:50%}
.lang-x:hover{opacity:1;background:color-mix(in srgb, var(--rubric) 14%, transparent)}

/* trait rows ride .rowline: name column, value column, ✕ tail — the persona
   labels get air from the row height, not from cramped inline padding */
.traits{list-style:none;margin:0;padding:0}
.traits .rowline{grid-template-columns:minmax(7rem,9rem) minmax(0,1fr) var(--row-tail)}
.traits .t-k{min-width:0}
.traits .t-k .ink-field{
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  width:100%;
}

/* The rules dialog's Close label is an instruction, not ornament. */
.rp-close{min-height:var(--field);font-size:var(--fs-label);letter-spacing:.08em}
.traits .t-v{min-width:0}
.traits .t-v .ink-field{font-family:var(--font-scribal);font-style:italic;color:var(--ink-faint);width:100%}

@media (max-width:599px){
  .traits .rowline{
    grid-template-columns:minmax(0,1fr) var(--row-tail);
    row-gap:var(--s1);
    padding:var(--s2) 0;
  }
  .traits .t-k{grid-column:1;grid-row:1}
  .traits .t-v{grid-column:1 / -1;grid-row:2}
  .traits .rm-btn{grid-column:2;grid-row:1}
  .traits .t-v .ink-field{align-items:flex-start;padding-block:var(--s2);white-space:normal}
}

.prose-k{display:block;margin:var(--s1) 0 var(--s2)}
.goal-row{
  display:flex;
  align-items:center;
  gap:.5em;
  margin-top:var(--s3);
  padding:var(--s1) var(--s3);
  border:1px solid var(--gold-deep);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold-hi) 10%, var(--panel-2));
}
.goal-k{color:var(--gold-deep);flex:none}
.goal-row .ink-field{
  flex:1;
  min-width:0;
  min-height:var(--field);
  border-bottom:1px dotted var(--rule);
  font-family:var(--font-scribal);
  font-style:italic;
  font-size:var(--fs-small);
}

/* The Turn panel at 0 HP: a plain statement, not a control surface. It replaces
   an action economy that used to report four actions "ready" while the death
   saves ran above it. */
.turn-downed{
  margin:0;
  padding:var(--s2) 0;
  color:var(--rubric);
  font-style:italic;
}

/* Respite + Afflictions headings (Tim): the word, a rule line filling the
   middle, then the chip hard right — the same grammar on both rows. */
.dock-sub{display:flex;align-items:center;gap:var(--s2)}
.dock-sub::after{content:"";flex:1;height:1px;background:var(--rule-soft);order:1}
.dock-sub .routine-open{order:2;margin-left:0}
/* SAVED sits beside the settings gear, one quiet cluster (Tim). */
.header-row{align-items:center}
.header-row .sync-status{margin-left:auto}
.header-row .header-tools{margin-left:var(--s2)}