/* ==========================================================================
   Small screens and fingers.

   Everything that changes below a desk-sized window lives here, and this
   sheet is loaded last on purpose: the rules it replaces are spread across
   the other four, and a tablet override written next to the rule it fixes
   loses to whichever stylesheet happens to come after it. One file, loaded
   last, is the only arrangement where "on a tablet, this instead" is true
   without having to know the link order.

   Two ideas, and they pull against each other. A finger needs a target it
   can hit; a tablet has half the screen of a laptop and the sheet has to fit
   on it. So the touch block sets a floor rather than making things big, and
   the width block spends what it saves on showing more at once.
   ========================================================================== */

/* ------------------------------------------------------------------ touch
   A floor under anything meant to be hit with a fingertip, on any screen
   with no mouse pointer to aim with. These are the smallest sizes that are
   still comfortably hittable - roughly a third of an inch - not the biggest
   that would fit. */

@media (any-pointer: coarse) {
  .btn { padding: 7px 12px; }
  .btn.sm { padding: 5px 8px; }
  .list-item { padding: 8px 12px; }
  .char-open, .campaign-card { padding-top: 12px; padding-bottom: 12px; }

  /* small round targets get help rather than restraint: they have nothing
     around them to grab by mistake */
  .info-dot { width: 19px; height: 19px; font-size: 11px; }
  .tag .info-dot { width: 17px; height: 17px; }
  .pip { width: 19px; height: 19px; }
  input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; }

  /* a field under 16px makes mobile Safari zoom the page when it takes
     focus, and it never zooms back out */
  .search, .name-input, .gate-card input { font-size: 16px; padding: 8px 12px; }
}

/* ---------------------------------------------------------------- tablets
   The machine this is actually used on, propped up beside the dice.

   Width alone does not identify one. An iPad Pro held the way you would hold
   it to look at a battle map is 1194 CSS pixels across - wider than plenty of
   laptops - so a width-only rule leaves the desktop layout on exactly the
   device this is for. What actually matters is that it is a touchscreen and
   it is not a desk, so: coarse pointer up to a laptop's width, or any window
   narrow enough to need this regardless of what is pointing at it.

   `any-pointer` rather than `pointer`, because an iPad with a keyboard case
   attached reports a fine primary pointer and is still an iPad.

   The same test is in app.js as `compact()`; the two have to agree. */

@media (max-width: 1000px), (any-pointer: coarse) and (max-width: 1400px) {
  /* the step rail becomes a strip along the top - a sidebar on an 800px
     screen is a third of the page spent on navigation */
  .main, .main.no-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* And the summary rail goes entirely. It is a third column of things the
     panel already says, which is a fair trade on a wide desk and nothing but
     a cost here - in one column it stops being a rail at all and becomes a
     full-width slab under the page. It was hidden below 1100px, a width an
     iPad is comfortably over, so this has to go by the same test as the rest
     of the layout rather than by width alone. */
  .sheet-rail { display: none; }

  .steps {
    display: flex;
    align-items: stretch;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 7px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }

  .step {
    width: auto;
    flex: none;
    padding: 7px 12px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius);
    white-space: nowrap;
    align-items: center;
  }

  .step.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  /* the summary under each step goes with the rail: it is a reminder, and a
     row of chips has no room for reminders */
  .step .sub { display: none; }
  .step .badge { margin-left: 6px; }

  .topbar { gap: 7px; padding: 6px 8px; flex-wrap: wrap; }
  .topbar .crumbs, .topbar .who { display: none; }
  .topbar .name-input { min-width: 0; flex: 1 1 140px; }
  .brand { font-size: 15px; }
  .brand small { font-size: 9px; }

  /* ---- density. A tablet is not a small desk; it is half a desk, so the
     furniture is smaller rather than the same furniture with less room. --- */

  body { font-size: 13px; }

  :root { --gutter: 12px; }
  .panel { padding: 12px var(--gutter) 40px; }
  .panel h2 { font-size: 19px; }
  .panel .hint { font-size: 12px; margin-bottom: 12px; }
  .card { padding: 12px 12px; margin-bottom: 12px; }
  .card > h3 { font-size: 15px; margin-bottom: 8px; }
  .detail { padding: 12px 12px; }
  /* The picker stays side by side. It used to stack at 820px, back when the
     step rail was eating 190px of the window; now that the rail is a strip
     along the top there is room for both, and reading a description without
     first scrolling past a hundred races is worth more than the width. */
  .picker { grid-template-columns: minmax(240px, 26%) minmax(0, 1fr); gap: 12px; }
  .list, .detail { max-height: 56vh; }
  /* with the rail gone the description has the rest of a 1200px screen, and
     prose set the whole way across it is a chore to read */
  .detail .rich { max-width: 78ch; }

  dialog { width: 94vw; }
  dialog .dlg-head { padding: 12px 12px; font-size: 16px; }
  dialog .dlg-body { padding: 12px 12px; max-height: 70vh; }
  dialog .dlg-foot { padding: 12px 12px; }

  /* ---- the play sheet. Columns, not one: with the rail gone the panel has
     the whole width, and a single column of full-width cards is a page you
     scroll for a minute to find your hit points. As many as fit, so turning
     the tablet over gives two upright and three on its side. ---- */

  .sheet-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

  .sheet-head { padding: 8px 12px; gap: 12px; margin-bottom: 12px; }
  .sheet-portrait, .portrait-slot.empty { width: 54px; height: 54px; }
  .sheet-id h2 { font-size: 20px; }
  .chips { gap: 5px; margin-top: 5px; }
  .chip { padding: 1px 7px; font-size: 10px; }
  .chip b { font-size: 11px; }

  .ab-col { gap: 4px; }
  .ab-score { grid-template-columns: 28px 1fr auto; gap: 6px; padding: 3px 8px; }
  .ab-score .ab-n { font-size: 17px; }
  .ab-score .ab-m { font-size: 13px; }
  .ab-save { min-width: 58px; font-size: 10px; }
  .ab-save b { font-size: 13px; }

  .stat-row { gap: 6px; }
  .stat-box { padding: 6px 4px; }
  .stat-box .sb-v { font-size: 19px; }

  .hp-block { padding: 8px 12px; margin-top: 12px; }
  .hp-cur { width: 62px; font-size: 22px; }
  .hp-max { font-size: 14px; }
  .hp-amt { width: 50px; }

  .spell-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .spell-card { padding: 8px 12px; }
  .spell-card h4 { font-size: 15px; }

  /* ---- the DM's screen. Three cards across at 800px instead of two. ---- */

  .party { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 8px; }
  .pc-card { padding: 8px 8px; gap: 6px; }
  .pc-face { width: 32px; height: 32px; }
  .pc-name b { font-size: 14px; }
  .campaign-cols { gap: 12px; }
  .campaign-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* ------------------------------------------------------------------ phones
   Below this the two-column sheet stops being two columns of anything. */

@media (max-width: 700px) {
  .picker { grid-template-columns: minmax(0, 1fr); }
  .list { max-height: 40vh; }
  .detail { max-height: none; }
}

@media (max-width: 640px) {
  .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .campaign-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Focused sheet sections and consistent controls. */
.sheet-sections { display:flex; gap:8px; margin:0 0 20px; padding:4px 0; flex-wrap:wrap; }
.sheet-sections .btn { min-height:42px; padding:8px 20px; }
.sheet-section[hidden] { display:none !important; }
.sheet-section .ux-play-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr); gap:20px; }
.sheet-section .ux-two-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.sheet-section .card { margin-bottom:20px; }
.sheet-section .cf-card > label { margin-top:20px; }
.sheet-section .cf-card .cf-fields { padding-top:8px; }
.sheet-tools { position:relative; flex:none; }
.sheet-tools > summary { list-style:none; cursor:pointer; }
.sheet-tools > summary::-webkit-details-marker { display:none; }
.sheet-tools-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:80; display:grid; gap:6px; padding:12px; min-width:160px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); box-shadow:0 8px 24px #0005; }
.campaign-settings > summary { cursor:pointer; font-weight:600; padding:4px 0; }
.campaign-settings[open] > summary { margin-bottom:16px; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.campaign-cols > div, .char-row > *, .sheet-section { min-width:0; }
.char-open .ch-name, .char-open .ch-sub { overflow-wrap:anywhere; }
@media (max-width:1100px) {
 .sheet-section .ux-play-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sheet-section .ux-play-grid > .sheet-col:last-child { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
}
@media (max-width:650px) {
 .sheet-sections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
 .sheet-sections .btn { padding:12px 3px; font-size:12px; }
 .sheet-section .ux-play-grid, .sheet-section .ux-two-grid, .sheet-section .ux-play-grid > .sheet-col:last-child { display:block; }
 .sheet-section input:not([type=checkbox]):not([type=radio]), .sheet-section select, .sheet-section textarea { font-size:16px; }
 .sheet-section .btn, .campaign .btn { min-height:40px; }
 .sheet-tools-menu .btn { min-height:42px; }
}
@media print {
 .sheet-sections,.sheet-tools { display:none !important; }
 .sheet-section[hidden] { display:block !important; }
 .sheet-section .ux-play-grid,.sheet-section .ux-two-grid { display:block; }
}
.main.play-mode { grid-template-columns:minmax(0,1fr); }
.main.play-mode > .steps { display:none; }
.main.play-mode > .panel { grid-column:1; }
@media print { .main.play-mode { display:block; } }

/* Inventory status stays visible; occasional actions expand beneath the item. */
.inv .equipment-row { grid-template-columns:28px minmax(0,1fr) auto; gap:8px 12px; padding:12px; align-items:start; }
.equipment-row .inv-eq { padding-top:3px; }
.equipment-row .inv-name { overflow:visible; overflow-wrap:anywhere; }
.equipment-row .inv-note { display:block; margin:5px 0 0; }
.equipment-status { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.equipment-badge { display:inline-block; padding:2px 7px; font-size:11px; font-weight:500; border:1px solid var(--line); border-radius:5px; color:var(--ink-3); }
.equipment-badge.equipped { color:var(--accent); border-color:var(--accent); }
.equipment-badge.attuned { color:var(--ink); border-color:var(--ink-3); }
.equipment-badge.needs-attunement { border-style:dashed; color:var(--ink-2); }
.equipment-count { color:var(--ink-2); font-variant-numeric:tabular-nums; }
.equipment-options { grid-column:2 / -1; min-width:0; }
.equipment-options > summary { cursor:pointer; color:var(--ink-3); font-size:12px; padding:5px 0; width:fit-content; }
.equipment-options-body { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 0 2px; }
.equipment-options-body .danger { margin-left:auto; }
.equipment-options .inv-contents { padding:12px 0; }
@media (any-pointer:coarse), (max-width:650px) {
 .equipment-row .inv-eq { min-height:36px; }
 .equipment-row .inv-eq input { width:20px; height:20px; }
 .equipment-options > summary { padding:12px 0; }
 .equipment-options-body .btn { min-width:40px; min-height:40px; }
}

.party-image-library { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:20px; }
.party-image-card { display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); min-width:0; }
.party-image-card > img { width:100%; height:160px; object-fit:contain; background:#111; border-radius:5px; }
.party-image-card strong { overflow-wrap:anywhere; }
.party-image-card summary { cursor:pointer; padding:8px; }
.party-image-card .row { flex-wrap:wrap; }
.party-image-view { width:min(1200px,96vw); max-width:96vw; max-height:94dvh; }
.party-image-stage { background:#101114; display:flex; align-items:center; justify-content:center; min-height:120px; }
.party-image-stage img { display:block; max-width:100%; max-height:75dvh; object-fit:contain; }
.party-image-launcher { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:90; box-shadow:0 3px 16px #0008; }
@media print { .party-image-launcher,#party-image-view { display:none!important; } }

/* The current handout is visible during play without opening a viewer. */
.party-image-panel { position:fixed; right:16px; bottom:16px; z-index:90; width:min(340px,calc(100vw - 32px)); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 4px 22px #0008; overflow:hidden; }
.party-image-panel-head { display:flex; align-items:center; gap:12px; padding:8px 12px; }
.party-image-panel-head strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.party-image-panel > img { display:block; width:100%; height:210px; object-fit:contain; background:#101114; }
@media (max-width:650px) {
 .party-image-panel { right:8px; bottom:8px; width:230px; }
 .party-image-panel > img { height:135px; }
}
@media print { .party-image-panel { display:none!important; } }

.party-image-panel-head.pip-grip { cursor:grab; touch-action:none; user-select:none; }
.party-image-panel.lifting .party-image-panel-head { cursor:grabbing; }
.party-image-panel-head.pip-grip::before { content:'⠿'; color:var(--ink-3); flex:none; }
.party-image-panel-head .btn { cursor:pointer; }
.party-image-pages { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; font-size:12px; }
.party-image-panel { max-height:calc(100dvh - 16px); }

/* ------------------------------------------------------------ battle map
   On a tablet the tracker and the summary stop floating over the board: held
   sideways they are a column beside it, held upright a strip beneath it, and
   the board is fitted to what is left. Floating, they covered a third of an
   iPad's board and the zoom buttons had scrolled off the end of the bar. */

@media (max-width: 1000px), (any-pointer: coarse) and (max-width: 1400px) {
  .panel.map-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }
  .panel.map-panel:not(:has(.map-dock .float-pip)) { grid-template-columns: minmax(0, 1fr); }

  .map-stage { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
  .map-dock { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }

  /* !important because a desk-placed panel carries its spot inline */
  .map-dock .float-pip {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none;
    max-height: none;
    flex: none;
    box-shadow: none;
  }
  .map-dock .pip-grip { cursor: default; }
  .map-dock .pip-dots { display: none; }

  /* one row of bar: setup scrolls sideways, the view buttons stay put */
  .map-bar { flex-wrap: nowrap; padding: 5px 6px; gap: 6px; }
  .map-bar:not(.draw-bar) { overflow: visible; }
  .map-setup { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .map-setup > *, .draw-bar > * { flex: none; }
  .draw-bar { overflow-x: auto; scrollbar-width: none; }
  .map-view-ctl .map-size, .map-hint { display: none; }
  .btn.tool .tool-l { display: none; }
  .btn.tool .tool-i { font-size: 15px; }
  .map-scroll { padding: 6px; }
}

@media (orientation: portrait) and (max-width: 1000px),
       (orientation: portrait) and (any-pointer: coarse) and (max-width: 1400px) {
  .panel.map-panel,
  .panel.map-panel:not(:has(.map-dock .float-pip)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .map-dock { flex-direction: row; align-items: stretch; max-height: 34vh; overflow: hidden; }
  .map-dock .float-pip { flex: 1 1 0; min-width: 0; max-height: 34vh; }
  .map-dock .float-pip.shut { flex: 0 1 auto; align-self: flex-start; }
}

/* a phone has no room for two side by side */
@media (max-width: 600px) {
  .map-dock { flex-direction: column; overflow-y: auto; }
  .map-dock .float-pip { flex: none; max-height: none; }
}

/* the damage box: 16px or mobile Safari zooms the page when it takes focus */
@media (any-pointer: coarse) {
  .hp-entry input { font-size: 16px; width: 60px; padding: 4px; }
  .hp-entry .btn { padding: 4px 12px; }
  .mon-hp input { font-size: 16px; }
}

/* the crumbs go on a small screen, and with them the only way back to the
   campaign short of the logo, which goes home instead */
.back-btn { display: none; }
@media (max-width: 1000px), (any-pointer: coarse) and (max-width: 1400px) {
  .topbar .back-btn { display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; padding: 3px 12px; }
}

/* the home card is a frame now; its two buttons carry the padding */
@media (any-pointer: coarse) { .campaign-card { padding: 0; } .cc-open, .cc-sheet { padding-top: 12px; padding-bottom: 12px; } }

/* a phone's topbar on the sheet: the name is edited in the builder, and the
   bar stays one row rather than two */
@media (max-width: 600px) {
  #app:has(.play-mode) .topbar .name-input,
  #app:has(.play-mode) .topbar .brand small { display: none; }
  #app:has(.play-mode) .topbar { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------- phone topbar

   One row. The account buttons fold into ☰ (screens.js topbar), and the
   builder's long labels shorten. */
.top-more { display: none; position: relative; }
.top-more > summary { list-style: none; cursor: pointer; }
.top-more > summary::-webkit-details-marker { display: none; }
.top-actions { display: contents; }
.lbl-short { display: none; }

@media (max-width: 600px) {
  .topbar { flex-wrap: nowrap; gap: 6px; }
  .top-actions { display: none; }
  .top-more { display: block; }
  .top-more-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 190px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgb(0 0 0 / 45%);
  }
  .top-more-pop .btn { width: 100%; justify-content: flex-start; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .topbar .brand small { display: none; }
  .topbar .name-input { flex: 1 1 80px; min-width: 0; font-size: 16px; padding: 5px 8px; }
  .topbar .top-images { display: none; }
  .topbar .save-state { font-size: 11px; }

  /* the DM's Table buttons: one row that scrolls, not three that wrap */
  .party-card > .row.between { flex-wrap: wrap; gap: 8px; }
  .party-card > .row.between > .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .party-card > .row.between > .row > * { flex: none; }
  .camp-head { flex-wrap: wrap; gap: 8px; }
}

/* the page never grows wider than the screen because a bar will not wrap:
   the shell's one column is capped, and the bar gives way first */
#app { grid-template-columns: minmax(0, 1fr); }
.topbar { min-width: 0; }
@media (max-width: 600px) {
  /* on a character the back button and the name say where you are; the
     theme is in ☰ on every other screen */
  #app:has(.main) .topbar .brand,
  #app:has(.main) .topbar .theme-toggle { display: none; }
  #app:has(.main) .topbar .name-input { flex: 1 1 60px; }
  .topbar > .btn, .topbar > details > summary.btn { padding-left: 12px; padding-right: 12px; }
}

/* Items card: treasure and written-in things, with a one-line add form. */
.item-row .item-mark { color:var(--ink-3); font-size:12px; padding-top:3px; }
.item-add { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:8px; margin-top:12px; }
.item-add input[name="note"] { grid-column:1; }
.item-add button { grid-column:2; grid-row:2; }
@media (any-pointer:coarse), (max-width:650px) {
 .item-add input, .item-add button { min-height:40px; }
}

/* ------------------------------------------------------- large desktops
 * Everything above is written for laptops and down. On a wide monitor the
 * home and campaign screens were capped and hung off the left edge with a dead
 * strip to the right. */
/* Pages run edge to edge inside the gutter, the same line the top bar keeps. */
.panel.home, .panel.campaign, .panel.campaign.dm { max-width: none; width: 100%; }
.campaign-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Home: the campaigns take the room, "Start a campaign" sits beside them. */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.home-side .card { margin-bottom: 0; }
.home-sub { margin-top: 20px; }
@media (min-width: 1001px) {
  .home-cols { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
  .home-side { position: sticky; top: 0; }
}
.gate { min-height: 100vh; }
@supports (height: 100dvh) { .gate { min-height: 100dvh; } }

@media (min-width: 1600px) {
  body { font-size: 15px; }
  :root { --gutter: 32px; }
  .main { grid-template-columns: 210px minmax(0, 1fr) 360px; }
  .party-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .party { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

@media (min-width: 2200px) {
  body { font-size: 16px; }
  .main { grid-template-columns: 240px minmax(0, 1fr) 420px; }
}

/* ---------------------------------------------------------- spacing rhythm
 * One scale (4, 8, 12, 16, 20, 24, 32) and one rule for how things sit:
 * cards are 16 apart, what is inside a card is 12 apart, and a page title has
 * room above the tabs and the tabs have room above the content. */
@media (min-width: 1001px) {
  .camp-head { margin-bottom: 0; }
  .camp-tabs { margin: 12px 0 20px; }
  .camp-tab { padding: 8px 16px; }
  .campaign-cols { gap: 16px; margin-top: 16px; }
  .camp-pane .campaign-cols { margin-top: 0; }
  .campaign-grid { gap: 16px; margin-top: 12px; }
  .grid-2 { gap: 16px; }
  .row + .row { margin-top: 12px; }
  .card > h3 { margin-bottom: 12px; }
  .card > h3 + .muted, .card > h3 + .hint { margin-top: -8px; }

  /* the party card: its heading row, then the rail and the rows with air round them */
  .party-card { padding: 20px 24px; margin-bottom: 20px; }
  .party-layout { gap: 20px; margin-top: 12px; }
  .roster { margin-top: 8px; }
  .ros-row { padding: 10px 12px; gap: 12px; }
  .turn-rail { padding: 12px 16px; gap: 12px; }
  .trk-btns { margin-top: 8px; }
  .view-set { margin-right: 8px; }
  .party-off { padding: 8px 12px; margin-top: 12px; }
  /* the acting card wears a 2px gold ring, which needs room to sit in */
  .party-main .mini-h { margin: 20px 0 12px; }
  .party-main .party { margin-top: 0; }
  .party-main .mini-h:first-child { margin-top: 4px; }
}

/* a checkbox with a sentence beside it reads as one line of text, not as
   three flex items that wrap on their own */
.check-line { display: block; }
.check-line input { margin: 0 8px 0 0; vertical-align: -2px; }

/* what a creature is likely to be carrying, one tap each */
.loot-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }

/* -------------------------------------------- the detail under an open row
 * A row opens into a panel that hangs off it, not a card set beside it: the
 * row already shows the name, hit points, armour and initiative, so this holds
 * what it cannot - an action bar, then labelled sections that flow across the
 * width. Sections with nothing in them are not drawn (party.js rdSec). */
.ros-card, .ros-card.party { display: block; margin: 0 0 12px; }
.rd {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 0;
  border-left: 3px solid var(--line-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.rd-pc { border-left-color: color-mix(in srgb, var(--green) 55%, transparent); }
.rd-mon { border-left-color: color-mix(in srgb, var(--red) 55%, transparent); }
.rd-mon.summoned { border-left-color: color-mix(in srgb, var(--blue) 55%, transparent); }

.rd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.rd-bar .spacer { flex: 1; }
.rd-bar .btn.on { border-color: var(--accent); color: var(--accent-2); }
.rd-info { display: inline-flex; align-items: center; gap: 4px; }

.rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 32px;
  align-items: start;
}
.rd-wide { grid-column: 1 / -1; }

.rd-sec h4 {
  margin: 0 0 8px;
  font: 600 11px/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* there is room here, so the numbers are read at a normal size */
.rd .pc-stats { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.rd .pc-stat { padding: 8px 4px; }
.rd .pc-stat b { font-size: 17px; }
.rd .pc-stat span { font-size: 10px; }
.rd .pc-saves { font-size: 13px; gap: 8px; max-width: 360px; }
.rd .pc-saves i { font-size: 10px; }
.rd .pc-cast, .rd .pc-slots, .rd .pc-atk, .rd .pc-def { font-size: 13px; gap: 6px 16px; margin-top: 0; }
.rd .pc-atk + .pc-atk, .rd .pc-cast + .pc-slots, .rd .pc-def + .pc-def { margin-top: 8px; }
.rd .pc-conds { gap: 8px; }
.rd .pc-death { margin-top: -4px; }
.rd-max input { width: 56px; text-align: center; padding: 2px; font-size: 15px; font-weight: 700; }
.rd .mon-loot { margin-top: 0; padding-top: 0; border-top: 0; }

/* the abilities in an open row: six tiles, the modifier to be read first */
.rd-abs { grid-column: 1 / -1; }
.rd-abilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  max-width: 720px;
}
.rd-ab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.2;
}
.rd-ab.prof { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rd-ab-name { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ink-3); }
.rd-ab-mod { font-size: 22px; font-family: var(--serif); color: var(--ink); }
.rd-ab-score { font-size: 12px; color: var(--ink-3); }
.rd-ab-save {
  margin-top: 6px;
  padding-top: 6px;
  width: 100%;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--ink-2);
}
.rd-ab-save b { color: var(--ink); font-size: 14px; }
.rd-ab-save em { font-style: normal; color: var(--accent); font-size: 10px; }
.rd-ab.prof .rd-ab-save b { color: var(--accent-2); }