/* Components added by the dynamic rebuild: the tooltip, conditions, the
   resource model, the roll log, editors and the tray. Everything here reads
   the palette from sheet.css; nothing redefines it. */

/* ---- the one tooltip ------------------------------------------------ */
.tipcard{
  position:fixed;z-index:90;width:300px;max-width:calc(100vw - 24px);
  padding:12px 14px;pointer-events:none;
  background:linear-gradient(180deg,#141a33,#0c1024);
  border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 18px 44px rgba(0,0,0,.72);
  font-size:14.5px;line-height:1.42;
}
.tipcard.wide{width:340px}
.tipcard .tt{font-family:var(--unicase);font-size:15px;color:var(--gold-bright);letter-spacing:.04em}
.tipcard .ts{color:var(--vellum-dim);font-style:italic;font-size:13px;margin-top:1px}
.tipcard .trows{margin:9px 0 0;padding:8px 0 0;border-top:1px solid var(--rule)}
.tipcard .trows>div{display:flex;justify-content:space-between;gap:14px;padding:1.5px 0}
.tipcard dt{color:var(--vellum-dim);font-size:13.5px}
.tipcard dd{margin:0;font-variant-numeric:tabular-nums;color:var(--arcane)}
.tipcard .tb{margin:9px 0 0;color:var(--vellum);opacity:.9;font-size:14px}

/* ---- editable identity in the hero ---------------------------------- */
.nameedit,.inline{
  font:inherit;color:inherit;background:transparent;
  border:0;border-bottom:1px dashed transparent;padding:0 2px;
}
.nameedit{font-family:var(--display);font-size:inherit;text-align:center;width:100%}
.inline{border-bottom-color:rgba(200,161,55,.22);text-align:center}
.inline:focus,.nameedit:focus{outline:0;border-bottom-color:var(--gold)}
.inline.num{width:3.4em;text-align:center}
.inline.big{font-size:inherit;width:2.6em}
.w4{width:4em}.w5{width:5em}.w6{width:6.5em}.w8{width:8em}.w9{width:9em}

/* ---- concentration bar ---------------------------------------------- */
.concbar{position:relative;z-index:3;max-width:1500px;margin:0 auto 18px;padding:0 28px}
.concbar .cc{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 15px;border:1px solid var(--arcane-deep);border-radius:2px;
  background:rgba(111,214,224,.07);margin-bottom:7px;
}
.concbar .cc.warn{border-color:var(--blood);background:rgba(155,59,59,.13)}
.concbar .lbl{font-family:var(--unicase);letter-spacing:.09em;font-size:12.5px;color:var(--arcane);text-transform:uppercase}
.concbar .cc.warn .lbl{color:#e08a8a}

/* ---- conditions & exhaustion ---------------------------------------- */
.conds{display:flex;flex-wrap:wrap;gap:6px}
.cond{
  font:inherit;font-size:13.5px;padding:3px 9px;cursor:pointer;
  background:transparent;color:var(--vellum-dim);
  border:1px solid var(--rule);border-radius:2px;transition:.14s;
}
.cond:hover{color:var(--vellum);border-color:var(--gold)}
.cond.on{background:rgba(155,59,59,.24);border-color:var(--blood);color:#f0c9c9}
.exh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.exh .lbl{font-family:var(--unicase);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--vellum-dim)}
.exh .pip{
  width:24px;height:24px;font:inherit;font-size:13px;cursor:pointer;
  background:transparent;color:var(--vellum-dim);
  border:1px solid var(--rule);border-radius:50%;
}
.exh .pip.fail{background:var(--blood);border-color:var(--blood);color:#fff}
.exh .meta{font-size:13px;color:var(--vellum-dim);font-style:italic}
.exh .meta.warn{color:#e08a8a;font-style:normal}

/* ---- overridable numbers -------------------------------------------- */
.ovrable{cursor:pointer}
.ovrable.ovr,.v.ovr{color:var(--gold-bright)}
.v.ovr::after{content:"✎";font-size:12px;vertical-align:super;opacity:.7}
.armourbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.armourbar select,.editor select,.roster select{
  font:inherit;font-size:14px;background:#11162c;color:var(--vellum);
  border:1px solid var(--rule);border-radius:2px;padding:3px 6px;
}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--vellum-dim);cursor:pointer}

/* ---- attacks --------------------------------------------------------- */
.attackrow{padding:8px 0;border-bottom:1px solid rgba(200,161,55,.13)}
.attackrow:last-child{border-bottom:0}
.arow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rollbtn.atk{display:flex;align-items:baseline;gap:8px;min-width:170px;justify-content:space-between}
.rollbtn.atk b{font-weight:500}
.rollbtn.dmgroll{font-variant-numeric:tabular-nums;color:var(--arcane)}
.arow .meta{font-size:13px;color:var(--vellum-dim);font-style:italic;flex:1}

/* ---- generic editor grid (attacks, items, spells) -------------------- */
.editor{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:11px;padding:12px;
        border:1px solid var(--rule);border-radius:2px;background:rgba(233,220,190,.03)}
.editor label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;
              font-family:var(--unicase);letter-spacing:.07em;text-transform:uppercase;color:var(--vellum-dim)}
.editor label.wide{grid-column:1/-1}
.editor label.chk{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:14px}
.editor input,.editor textarea,.tagin{
  font:inherit;font-size:15px;background:#11162c;color:var(--vellum);
  border:1px solid var(--rule);border-radius:2px;padding:4px 7px;
}
.editor input:focus,.editor textarea:focus{outline:0;border-color:var(--gold)}
.editor .rollbtn,.editor .del{grid-column:1/-1}

/* ---- skills (rebuilt for three ranks) -------------------------------- */
.skill{display:flex;align-items:center;gap:8px}
.skill .dot{cursor:pointer;color:rgba(233,220,190,.22);font-size:13px;line-height:1;user-select:none}
.skill.prof .dot{color:var(--gold)}
.skill.expertise .dot{color:var(--arcane)}
.sname{
  display:flex;align-items:baseline;gap:8px;flex:1;
  font:inherit;text-align:left;cursor:pointer;padding:2px 4px;
  background:transparent;color:var(--vellum);border:0;border-radius:2px;
}
.sname:hover{background:rgba(200,161,55,.09)}
.sname em{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--vellum-dim);font-style:normal}
.sname b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--gold-bright);font-weight:500}
.skill.expertise .sname b{color:var(--arcane)}

/* ---- active effects --------------------------------------------------- */
.fx{display:flex;flex-direction:column;gap:6px}
.fxrow{display:flex;align-items:center;gap:9px}
.fxrow .meta{font-size:13px;color:var(--vellum-dim);font-style:italic}
.fxrow .del{margin-left:auto}
.rounds{float:right;display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);
        font-size:13px;letter-spacing:0;text-transform:none;color:var(--vellum-dim)}
.rounds b{color:var(--gold-bright);font-variant-numeric:tabular-nums}

/* ---- features --------------------------------------------------------- */
.feat .fhead{display:flex;align-items:baseline;gap:10px;width:100%;font:inherit;text-align:left;
             cursor:pointer;padding:6px 0;background:transparent;color:var(--vellum);border:0}
.feat .fhead b{font-weight:500}
.feat .fhead .src{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vellum-dim)}
.feat .fbody textarea,.notes{
  width:100%;font:inherit;font-size:15px;background:#11162c;color:var(--vellum);
  border:1px solid var(--rule);border-radius:2px;padding:8px 10px;resize:vertical;
}
/* A trait's text is the source's, and the link says so. It sits between the
   words and the edit row because it belongs to the words, not to the controls. */
.fref{
  display:inline-block;margin-top:6px;font-family:var(--unicase);
  letter-spacing:.1em;font-size:.56rem;text-transform:uppercase;
  color:var(--vellum-dim);text-decoration:none;border-bottom:1px solid var(--rule);
}
.fref:hover{color:var(--arcane)}

.frow{display:flex;gap:8px;margin-top:7px;flex-wrap:wrap}
.frow input{flex:1;font:inherit;font-size:14px;background:#11162c;color:var(--vellum);
            border:1px solid var(--rule);border-radius:2px;padding:4px 7px}

/* ---- resources -------------------------------------------------------- */
.resources{display:flex;flex-direction:column;gap:11px}
.res{padding:9px 11px;border:1px solid var(--rule);border-radius:2px;background:rgba(233,220,190,.03)}
.res.spent{opacity:.55}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rhead b{font-weight:500}
.rhead .meta,.res .meta{font-size:12.5px;color:var(--vellum-dim);font-style:italic}
.rbody{display:flex;align-items:center;gap:9px;margin-top:6px}
.rbody .pips{display:inline-flex;gap:4px}
.rbody .pip{width:13px;height:13px;border:1px solid var(--rule);border-radius:50%;cursor:pointer;display:inline-block}
.rbody .pip.on{background:var(--gold);border-color:var(--gold)}
.rbody .del{margin-left:auto}
.res .portent{display:flex;align-items:center;gap:7px;margin-top:8px}

/* ---- roll log ---------------------------------------------------------- */
.panel.log{max-width:1500px;margin:0 auto}
.logrow{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(200,161,55,.1)}
.logrow:last-child{border-bottom:0}
.logrow .total{
  min-width:52px;text-align:center;font-family:var(--unicase);font-size:21px;
  font-variant-numeric:tabular-nums;color:var(--gold-bright);
}
.logrow.crit .total{color:#8ef0a8}
.logrow.fumble .total{color:#e08a8a}
.logrow.note .total,.logrow.cast .total{color:var(--arcane);font-size:16px}
.lmid{flex:1;min-width:0}
.lmid b{font-weight:500;display:block}
.lmid .meta{font-size:13px;color:var(--vellum-dim);font-style:italic}
.lact{display:flex;gap:6px;flex-wrap:wrap}
.portentbtn{border-color:var(--arcane-deep);color:var(--arcane)}

/* ---- tray: roster, import/export --------------------------------------- */
/* The roller lives in the tray, not in the log's heading: it is a thing you
   reach for constantly, and the log is a thing you scroll to. Quick dice first,
   free expression after, and the last result reads back beside them so a throw
   is legible without leaving whatever you were looking at. */
.roller{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.roller .dicein{width:78px}
.roller .mini.go{border-color:var(--gold);color:var(--gold)}
.lastroll{
  display:flex;align-items:baseline;gap:7px;margin-left:4px;
  padding-left:12px;border-left:1px solid var(--rule);
}
.lastroll b{
  font-family:var(--display);font-size:1.15rem;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;line-height:1;
}
.lastroll span{font-size:.72rem;color:var(--vellum-dim);letter-spacing:.04em;
               max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.roster,.io{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* The roller is the tray's reason to exist; roster and file controls are
   housekeeping, so they sit off to the right rather than crowding it. */
.roster{margin-left:auto}
.mini.file{position:relative;overflow:hidden;cursor:pointer}
.mini.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mini.danger{border-color:rgba(155,59,59,.5);color:#d99}
.saved.warn{color:#e08a8a;cursor:pointer}

/* ---- provenance --------------------------------------------------------- */
.badge{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;
       border:1px solid var(--rule);border-radius:2px;color:var(--vellum-dim);white-space:nowrap}
.badge.player{border-color:var(--arcane-deep);color:var(--arcane)}
.badge.verified{border-color:var(--gold);color:var(--gold-bright)}
.prov{margin-top:14px;padding:9px 11px;border-left:2px solid var(--rule);
      font-size:13px;color:var(--vellum-dim);line-height:1.5}
.prov b{display:block;color:var(--vellum);font-weight:500;font-size:14px}
.prov.recalled{border-left-color:var(--blood)}
.prov.player{border-left-color:var(--arcane-deep)}

/* ---- equipment ----------------------------------------------------------
   The row grid itself lives in sheet.css; this file loads after it, and the
   flex row that used to be here was quietly winning, which is why weights and
   badges never lined up down the list. */
.hpbar i.over{background:var(--blood)}
.item.attuned .iname::after{content:" ✦";color:var(--arcane)}
.mini.on{background:rgba(200,161,55,.2);border-color:var(--gold);color:var(--gold-bright)}
.mini.free{border-color:var(--arcane-deep);color:var(--arcane)}
.mini.upcast{border-color:rgba(200,161,55,.5)}
.mini.spent{opacity:.5}
.tags .tag .x{background:transparent;border:0;color:inherit;cursor:pointer;margin-left:5px;font:inherit;opacity:.6}
.tagin{width:11em;font-size:13.5px}

/* `.additem` in sheet.css is the add-an-item FORM grid. Used as a bare button
   it stretched to the full column, so a button wearing that class gets the
   inline treatment instead. */
button.additem{
  display:inline-block;width:auto;margin:0 0 0 10px;padding:3px 9px;
  font-family:var(--unicase);letter-spacing:.12em;font-size:.58rem;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule);color:var(--vellum-dim);cursor:pointer;
}
button.additem:hover{border-color:var(--gold);color:var(--gold-bright)}
.panel h2 button.additem{float:right;margin-top:-2px}

/* The Portent dice here are chips in a list, not the big rolled d20 face that
   `.die` in sheet.css draws with an SVG behind it. */
.res .portent .die{
  width:auto;height:auto;display:inline-grid;place-items:center;
  min-width:30px;padding:2px 8px;cursor:default;
  font-family:var(--unicase);font-size:1.05rem;font-weight:700;color:var(--arcane);
  border:1px solid var(--arcane-deep);border-radius:2px;background:rgba(111,214,224,.08);
}
.res .portent .die.spent{opacity:.35;text-decoration:line-through;color:var(--vellum-dim);border-color:var(--rule)}
.res .portent .die:hover{transform:none}

/* ---- tablet ------------------------------------------------------------- */
/* Below 1180 sheet.css already drops to one column. Two columns at tablet width
   overflowed, because the left column's fixed inner widths give it a 288px
   min-content that `1fr` cannot shrink past. One column it is. */
@media (max-width:1180px){
  .wrap{padding:0 18px 150px}
  .editor{grid-template-columns:1fr}
  .panel.log{margin-top:22px}
}
/* Below this the tray wraps to two rows and eats the sheet. The expression box
   rolls any die on its own, so the six shortcuts are the part that gives way. */
@media (max-width:1000px){
  .roller .mini:not(.go),
  .roller .label,
  .lastroll{display:none}
}
/* A phone is not the target this sheet was drawn for, but four stat boxes and a
   six-column money row are the only things that actually refuse to fit, and
   both fold in a line. */
@media (max-width:520px){
  .combat{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  body{font-size:16px}
  .tipcard{display:none}
  .tray{flex-wrap:wrap;gap:8px}
}

/* ---- print --------------------------------------------------------------- */
/* The screen sheet is dark with filled panels; paper needs the inverse, so
   every background is stripped rather than dimmed. Roll buttons stay visible
   because they carry the attack name and its bonus — hiding them would print
   a sheet with no attacks on it. */
@media print{
  #sky,.tray,.scrim,.tipcard,.flourish,body::after,.hpbar,.chartbox{display:none !important}
  .mini,.del,.additem,.acts,.modeswitch,.editor,.filters,.tagin,.lvlstep,.dicein,
  .armourbar,.chk,.casts,.lact,.fref{display:none !important}

  /* The radar is a canvas that prints as a blank rectangle, so its heading and
     frame went with it rather than leaving an empty titled box on the page. */
  .panel:has(.chartbox){display:none !important}

  /* Exhaustion is character state, not a control: the pips print as a row of
     numbers with the reached ones filled. */
  .exh .pip{display:inline-block !important;border-color:#999;color:#111 !important}
  .exh .pip.fail{background:#666 !important;color:#fff !important}

  body{background:#fff;color:#111;font-size:10.5pt}
  @page{margin:14mm}
  .wrap{max-width:none;padding:0}
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .col{gap:14px}

  .panel,.res,.stat,.ability,.attackrow,.feat,.logrow{
    background:none !important;border-color:#c9c2b0;break-inside:avoid;page-break-inside:avoid;
  }
  .panel h2,.eyebrow,.k,.name,.grouplabel,.mtitle,.res .meta,.rhead .meta,.arow .meta,.lmid .meta,
  .subline,.notice,.hint,.feat .fhead .src,.sname em,.exh .lbl{color:#4a453a !important}
  .v,.sname b,.rounds b,.total,.mod,.save,.hpnums{color:#111 !important}

  input,textarea,select{border:0 !important;color:#111 !important;background:none !important;
                        -webkit-appearance:none;appearance:none}
  .inline{border-bottom:1px solid #ddd}
  textarea{resize:none;overflow:visible}

  .rollbtn,.sname,.iname,.fhead{background:none !important;color:#111 !important;border-color:#ddd}
  .chip,.tag,.cond,.badge{background:none !important;color:#111 !important;border-color:#c9c2b0}
  .cond.on{background:#eee !important;font-weight:600}
  .skill .dot,.spell .dot{color:#111 !important}
  .slot,.rbody .pip{border-color:#666}
  .slot.spent,.rbody .pip.on{background:#666 !important}
  .prov{border-left-color:#999}
}

/* SRD prose arrives with hard line breaks it needs to keep: several spells are
   a list of named effects, one per line, and running them together loses the
   list. */
.compdetail{white-space:pre-line}
.alias{font-family:var(--unicase,inherit);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vellum-dim);margin:-4px 0 10px}
.badge.srd-5\.2,.prov.srd-5\.2{border-color:rgba(120,200,150,.45);color:#8fd8ac}

/* Three corpora, ranked by how current they are: the 2024 wiki reads as gold
   like the rest of the sheet's authority, the 2014 wiki is deliberately cooler
   and quieter so an older-edition spell is obvious at a glance in the list. */
.badge.dnd2024-wikidot,.prov.dnd2024-wikidot{border-color:rgba(200,161,55,.45);color:var(--gold-bright)}
.badge.dnd5e-wikidot-2014,.prov.dnd5e-wikidot-2014{border-color:var(--arcane-deep);color:var(--arcane)}
.prov.dnd2024-wikidot{border-left-color:var(--gold)}
.prov.dnd5e-wikidot-2014{border-left-color:var(--arcane-deep)}
.prov.srd-5\.2{border-left-color:rgba(120,200,150,.45)}

/* `.modal` is sized for the compendium, a long scrolling list that wants 84vh
   whatever it holds. One spell is as tall as its own text, so a short cantrip
   was drawing 300px of empty box beneath itself. */
.modal.narrow{height:auto;max-height:84vh;overflow:auto}

.attrib{flex:0 0 auto;margin:0;padding:9px 24px;border-top:1px solid var(--rule);
  font-size:.72rem;color:var(--vellum-dim);line-height:1.5}
.attrib a{color:var(--arcane)}

/* `.sname` is the skills row, where `b` is the bonus and `margin-left:auto`
   pushes it to the right edge. The compendium reuses the button but its `b` is
   the spell NAME, so the same rule threw every title across the modal. Scoped
   back: name first, meta beside it, badge at the far right. */
.spell .sname{justify-content:flex-start;text-align:left;gap:12px}
.spell .sname b{margin-left:0;color:var(--vellum);font-weight:400}
.spell .sname:hover b{color:var(--gold-bright)}
.spell .meta{margin-right:auto}

/* The compendium marker was a ●/○ character, and the display serif has neither,
   so every row drew a browser-default button with a blank glyph in it. Drawn in
   CSS instead, which no font can fail to render. */
.spell .dot{
  width:11px;height:11px;padding:0;background:transparent;border:1px solid var(--vellum-dim);
  border-radius:50%;cursor:pointer;transition:.18s;position:relative;top:2px;
}
.spell .dot:hover{border-color:var(--gold);box-shadow:0 0 7px rgba(200,161,55,.5)}
.spell .dot.have{background:var(--gold);border-color:var(--gold)}

/* The spellbook sits in the narrow right column, where a row's cast buttons and
   its title were fighting over the same line and overlapping. Given their own
   row under the name, both fit at any column width. */
.complist.book .spell{grid-template-columns:11px minmax(0,1fr);row-gap:5px;align-items:center}
.complist.book .spell .casts{margin:0}
.complist.book .spell .sname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sheet.css positions `.additem .go` across the form but never colours it, so it
   drew as a default white browser button in a dark panel. */
.additem .go{
  background:rgba(8,11,26,.7);border:1px solid var(--rule);color:var(--vellum-dim);
  font-family:var(--unicase);letter-spacing:.12em;font-size:.68rem;text-transform:uppercase;
  cursor:pointer;transition:.18s;
}
.additem .go:hover{border-color:var(--gold);color:var(--gold-bright)}

/* ---- polish pass ------------------------------------------------------
   Everything below fixes a widget whose class name stopped matching its
   rule when the sheet was split into modules, or a layout that only shows
   itself in a browser. */

/* The spellbook and compendium search box carried no type=search, so the
   rule written for it never applied and the field drew as a white slab. */
.q{
  flex:1 1 150px;min-width:0;background:rgba(8,11,26,.7);border:1px solid var(--rule);
  color:var(--vellum);font-family:var(--serif);font-size:.88rem;padding:7px 10px;
}
.q:focus{outline:none;border-color:var(--arcane)}

/* `.del` is worn by both the × on a row and by a worded "close" or "remove".
   One ghost button reads correctly as either. */
.del{
  background:transparent;border:1px solid transparent;color:var(--vellum-dim);
  font-family:var(--unicase);letter-spacing:.1em;font-size:.68rem;text-transform:uppercase;
  padding:3px 7px;line-height:1.3;transition:.18s;
}
.del:hover{border-color:rgba(155,59,59,.6);color:#e8a0a0}
.fxrow .del,.rbody .del{font-size:1rem;padding:1px 6px;letter-spacing:0}

/* Cast buttons on a spellbook row. The container used to wear `.castslot`,
   a rule written for one button in the spell modal, and the options wore
   `.upcast` and `.free`, two more modal rules — so a row drew a gold box
   with mismatched buttons inside it. Rows own their own vocabulary now. */
.casts{display:flex;flex-wrap:wrap;gap:5px;grid-column:2}
.casts button{
  background:transparent;border:1px solid var(--rule);color:var(--vellum-dim);
  font-family:var(--unicase);letter-spacing:.1em;font-size:.6rem;text-transform:uppercase;
  padding:3px 8px;line-height:1.35;transition:.16s;
}
.casts button:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(200,161,55,.12)}
.casts .cast-upcast{border-style:dashed}
.casts .cast-free,.casts .cast-ritual{border-color:rgba(111,214,224,.42);color:var(--arcane)}
.casts .cast-free:hover,.casts .cast-ritual:hover{border-color:var(--arcane);background:rgba(111,214,224,.14);color:var(--arcane)}
.casts .cast-spent{opacity:.4;cursor:not-allowed}
.casts .cast-spent:hover{border-color:var(--rule);color:var(--vellum-dim);background:transparent}

/* Six pips on one line. Wrapping the sixth onto its own row read as a bug. */
.exh .pips{flex-wrap:nowrap}

/* Three controls, not the two-column grid the equipment form uses — the
   duration field was being squeezed into 62px and clipping its own text. */
div.additem{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
div.additem input{flex:1 1 130px;width:auto;min-width:0}
div.additem .go{flex:0 0 auto;grid-column:auto;padding:8px 15px}

/* The carried-weight bar borrows the hit-point bar, which is blood red.
   Red is the colour of losing, and 43 of 120 pounds is not losing. */
.carry .hpbar{background:rgba(200,161,55,.12);border-color:var(--rule)}
.carry .hpbar i{background:linear-gradient(90deg,var(--arcane-deep),var(--arcane));opacity:.75}
.carry .hpbar i.over{background:var(--blood);opacity:1}

/* Six pips are one group, so the note beside them wraps without taking the
   sixth pip with it. */
.exh .pips{display:inline-flex;gap:6px;flex-wrap:nowrap}

/* The proficiency marker is drawn, not typed: the display serif renders ●
   and ◆ at wildly different weights, which read as two unrelated shapes. */
.skill .dot,.ability .dot{
  width:10px;height:10px;flex:0 0 auto;border:1px solid rgba(233,220,190,.28);
  border-radius:50%;background:transparent;cursor:pointer;transition:.18s;
}
.skill .dot:hover,.ability .dot:hover{border-color:var(--gold)}
.skill.prof .dot{background:var(--gold);border-color:var(--gold)}
.skill.expertise .dot{
  background:var(--arcane);border-color:var(--arcane);border-radius:1px;transform:rotate(45deg) scale(.86);
}
.ability .dot.on{background:var(--arcane);border-color:var(--arcane)}
.legend .skill{display:inline-flex;vertical-align:middle}
.legend .dot{display:inline-block;margin:0 2px}

/* `.hprow` was a flex row of an input and three buttons. It now holds the
   number and the bar, and flex was squeezing that bar down to 2px in a
   722px panel — the health bar was effectively invisible. */
.hprow{display:block}
.hprow .hpnums{margin-bottom:4px;justify-content:flex-start;gap:9px}

/* The damage / heal / temp row, and the rest row under it. */
.acts{display:flex;gap:8px;align-items:stretch;margin-top:10px;flex-wrap:wrap}
.acts > .num{
  /* A flex item will not shrink below its intrinsic width, and an input's
     is the browser's 20-character default — about 185px. */
  flex:0 0 76px;min-width:0;background:rgba(8,11,26,.6);border:1px solid var(--rule);color:var(--vellum);
  font-family:var(--serif);text-align:center;padding:7px 6px;
}
.acts > .num:focus{outline:none;border-color:var(--arcane)}
.acts .rollbtn{flex:1 1 0;min-width:88px;justify-content:center}

/* A span sized like a box needs to be a box. */
.skill .dot,.ability .dot{display:inline-block}
.ability .dot{margin-left:7px;position:relative;top:1px}

/* The roll log borrows `.complist` from the compendium, which is a scrolling
   pane with a divider down its right edge — inside a full-width panel that
   drew a stray gold line and 130px of nothing under an empty log. */
.log .complist{border-right:0;padding:0;max-height:360px}
.log .empty{padding:22px 20px}
.log .logrow:first-child{padding-top:0}

/* The legend is a sentence with two drawn markers in it, not a row of chips —
   `.legend`'s 18px flex gap was pushing its own words apart. */
.legend{display:block;gap:0}
.legend .skill{gap:0}

/* The one-spell modal indents its head, its properties and its body, and the
   four blocks between them were left flush against the frame. One inset for
   the lot, matching `.compdetail`. */
.modal.narrow .tags,
.modal.narrow .alias,
.modal.narrow .prov,
.modal.narrow .casts{margin-left:26px;margin-right:26px}
.modal.narrow .tags{margin-top:16px}
.modal.narrow .compdetail{padding-top:16px;padding-bottom:10px}
.modal.narrow .casts{margin-top:14px;margin-bottom:22px}

/* The property strip is a <dl> of <dt>/<dd> pairs; `.props` still styled the
   `.prop small` / `.prop span` markup it used before the split, so the labels
   drew as body text and every value wore the browser's default 40px <dd>
   indent. */
.props{padding-left:26px;padding-right:26px}
.props dt{
  font-family:var(--unicase);letter-spacing:.16em;font-size:.56rem;
  color:var(--vellum-dim);text-transform:uppercase;margin-bottom:3px;
}
.props dd{margin:0;color:var(--vellum);font-size:.92rem;line-height:1.4}

/* Below 1180px the three columns stack, so a six-row ability list that reads
   well in a 288px column stretches to the full page with a lake of nothing
   between the name and the score. Two up keeps the rows a sane length. */
@media (min-width:761px) and (max-width:1180px){
  .abilities{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .skills{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}