/* Hit Point & Click: party view (js/party.js). Uses the tokens from app.css. */
.party { margin-top: 10px; }
.party-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.party-head h1 { font-size: clamp(26px, 3.4vw, 38px); color: var(--gold2); }
.party-head .lede { margin: 2px 0 0; color: var(--muted); }
.party-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.party-sort { display: inline-flex; gap: 0; }
.party-sort .btn { border-radius: 0; }
.party-sort .btn:first-child { border-radius: 8px 0 0 8px; }
.party-sort .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.party .err { margin: 0 0 12px; }
.party-zoom { display: inline-flex; align-items: center; gap: 4px; }
.party-zoom .btn:disabled { opacity: .4; cursor: default; }
.zoom-pct { min-width: 40px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The table and the glance cards switch layouts by the room they have (container queries), so bigger text reflows */
.party-scroll { container: ptgrid / inline-size; }
.glance { container: ptglance / inline-size; }
.party-foot { margin-top: 12px; }

/* ---------- desktop: one dense row per character ---------- */
.party-grid { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.party-grid > .loading, .party-grid > .empty { margin: 0; padding: 24px; color: var(--muted); }
.party-grid > .empty { border: 0; }
.pt-row { display: grid; align-items: center; column-gap: 6px; padding: 10px 14px;
  grid-template-columns: minmax(264px, 1fr) minmax(100px, 120px) repeat(10, 46px) minmax(170px, 2fr); }
.pt-row + .pt-row { border-top: 1px solid var(--line); }
.pt-headrow { padding-top: 9px; padding-bottom: 9px; background: var(--bg2); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold); }
.pt-headrow .pt-n { text-align: center; }
.pt-row:not(.pt-headrow):hover { background: var(--hover2); }
.pt-row.is-down { background: linear-gradient(90deg, rgba(110, 29, 49, .35), transparent 60%); }
.pt-row.flash { animation: ptFlash 1.6s ease-out; }
@keyframes ptFlash { from { background: rgba(234, 185, 108, .18); } to { background: transparent; } }

.pt-c { min-width: 0; }
.pt-c > i { display: none; font-style: normal; }
.pt-who { display: flex; align-items: center; gap: 10px; }
.pt-av { width: 54px; height: 54px; font-size: 22px; overflow: hidden; }
.pt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-id { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pt-name { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.pt-name .pt-nb { white-space: nowrap; }          /* "(2 Longswords)" wraps as one piece */
.pt-name:hover { color: var(--gold2); text-decoration: underline; text-decoration-color: var(--gold-dim); }
.pt-cls { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-extra { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-when { display: none; }

.pt-hpnum { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; line-height: 1.2; }
.pt-hpnum > b { font-family: var(--serif); font-size: 19px; color: var(--gold2); }
.pt-hpnum > b.pt-red { color: var(--down); }
.pt-hpnum small { color: var(--muted); font-size: 13px; }
.pt-temp { font-size: 12px; font-weight: 600; color: var(--up); }
.pt-nl { font-size: 12px; font-weight: 600; color: #e2ae4f; }
.pt-down, .pt-stag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; }
.pt-down { background: #5a1020; border: 1px solid var(--crimson3); color: #ffd6de; }
.pt-stag { background: #3d2a12; border: 1px solid #b0802f; color: var(--gold2); }
.pt-bar { margin-top: 4px; height: 6px; }
.pt-bar i { background: linear-gradient(90deg, var(--crimson2), var(--crimson3)); }
.pt-bar.ok i { background: linear-gradient(90deg, #4c8a45, #7dbb6c); }
.pt-bar.mid i { background: linear-gradient(90deg, #b07a2a, #e2ae4f); }
.pt-bar.down { background: #3a0c16; box-shadow: inset 0 0 0 1px #7a1a2e; }

.pt-n { text-align: center; }
.pt-n b { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.pt-n.sv b { font-family: var(--sans); font-size: 15px; font-variant-numeric: tabular-nums; }
.pt-row .pt-n:nth-child(3), .pt-row .pt-n:nth-child(7), .pt-row .pt-n:nth-child(10) { position: relative; }
.pt-row .pt-n:nth-child(7)::before, .pt-row .pt-n:nth-child(10)::before { content: ''; position: absolute; left: -4px; top: 15%; bottom: 15%;
  border-left: 1px solid var(--line); }

.pt-status { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px; padding-left: 6px; }
.pt-chip { display: inline-block; font-size: 12px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--crimson); border: 1px solid var(--crimson3); color: #fff; }
.pt-chip.cond { background: #3d2a12; border-color: #b0802f; color: var(--gold2); }
.pt-chip.warn { background: #4a1414; border-color: #c04a4a; color: #ffc9c9; font-weight: 600; }
.pt-chip.spent { background: transparent; border-color: var(--line2); border-style: dashed; color: var(--faint); font-size: 11px; }
.pt-none { color: var(--faint); font-size: 12px; }
.pt-ago { margin-left: auto; padding-left: 6px; color: var(--faint); font-size: 11px; white-space: nowrap; line-height: 22px; }

/* Medium screens: status chips drop to their own line */
@container ptgrid (max-width: 1140px) {
  .pt-row { grid-template-columns: minmax(230px, 1.7fr) minmax(96px, 112px) repeat(10, 44px); row-gap: 6px; }
  .pt-row .pt-status { grid-column: 1 / -1; padding-left: 48px; }
  .pt-left { padding-left: 48px; }
  .pt-headrow .pt-status { display: none; }
}

/* Left today: spell slots + daily uses, one line under each character */
.pt-left { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-left: 64px; font-size: 12px; color: var(--muted); }
.pt-left > i { display: inline; font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.pt-left b { color: var(--text); font-weight: 600; margin-right: 2px; }
.pt-sp span, .pt-use { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-sp span + span { margin-left: 6px; }
.pt-left .low { color: var(--gold2); }
.pt-left .none { color: var(--faint); text-decoration: line-through; }

/* Party at a glance */
.glance { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.glance > summary { cursor: pointer; list-style: none; }
.glance > summary::-webkit-details-marker { display: none; }
.glance > summary h2 { display: inline; font-size: 15px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.glance > summary { display: flex; align-items: center; gap: 8px; }
.glance > summary::before { content: '▸'; color: var(--gold); font-size: 26px; line-height: 1; width: 20px; text-align: center; transform: translateY(-2px); }   /* the glyph sits low in its box */
.glance[open] > summary::before { content: '▾'; }
.glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@container ptglance (max-width: 1030px) { .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.g-card.g-wide { grid-column: span 2; }
.g-card.dcard { padding-top: 14px; }
.glance-grid .dcard.dragging { border-radius: 10px; }
.glance-grid .dcard-ph { border-radius: 10px; min-height: 60px; }
.glance-grid .dcard-ph.g-wide { grid-column: span 2; }
.glance-grid.sorting { cursor: grabbing; user-select: none; }
.g-reset { display: block; margin: 12px auto 0; }
.g-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 0 0 8px; }
.g-card h3 small { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; margin-left: 6px; font-size: 13.5px; }
.g-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.g-card li small, .g-card th small { color: var(--muted); }
.g-card small { font-size: .9em; }   /* the browser default (smaller) was too small to read */
.g-card b { color: var(--text); }
.g-card p { margin: 8px 0 0; font-size: 14px; }
.g-warn { color: var(--gold2); }
.g-ok, .g-note { color: var(--muted); }
.g-none { color: var(--faint); }
.g-card table { width: 100%; border-collapse: collapse; font-size: 15px; }
.g-card th { text-align: left; font-weight: 600; color: var(--text); padding: 3px 8px 3px 0; vertical-align: top; }
.g-card th small { display: block; font-weight: 400; font-size: .9em; }
.g-card td { padding: 3px 6px; white-space: nowrap; vertical-align: top; font-variant-numeric: tabular-nums; }
.g-card td.g-2 { color: var(--muted); }
.g-card tr + tr { border-top: 1px solid var(--line); }
.g-card td.g-att { white-space: normal; }
.g-att > div + div { margin-top: 2px; }
.g-att small, .g-items small { color: var(--muted); }
.g-dmg { color: var(--gold2); }
.g-dcs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.g-dcs span { white-space: nowrap; font-weight: 600; }
.g-dcs small { font-weight: 400; color: var(--muted); }
.g-tag { display: inline-block; font-size: 13.5px; padding: 1px 8px; margin: 0 4px 3px 0; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); }
.g-items p { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.g-items p:first-of-type { margin-top: 0; }
@container ptglance (max-width: 1030px) { .g-card.g-wide, .glance-grid .dcard-ph.g-wide { grid-column: 1 / -1; } }
@container ptglance (max-width: 490px) { .glance-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- phone: one card per character ---------- */
@container ptgrid (max-width: 860px) {   /* below this the one-line row doesn't fit */
  .party-grid { background: none; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  .party-grid > .loading, .party-grid > .empty { padding: 20px; }
  .pt-headrow { display: none; }
  .pt-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; padding: 12px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 14px; }
  .pt-row + .pt-row { border-top: 1px solid var(--line); }
  .pt-row.is-down { border-color: var(--crimson2); background: linear-gradient(180deg, rgba(110, 29, 49, .4), var(--panel) 70%); }
  .pt-who, .pt-hp, .pt-row .pt-status { grid-column: 1 / -1; }
  /* AC Touch Flat CMD Init / Fort Ref Will Perc SM */
  .pt-row > * { order: 3; }
  .pt-row > .pt-who { order: 0; }
  .pt-row > .pt-hp { order: 1; }
  .pt-row > :nth-child(-n+6):nth-child(n+3), .pt-row > :nth-child(10) { order: 2; }
  .pt-row > .pt-status { order: 4; }
  .pt-row > .pt-left { order: 5; padding-left: 0; }
  .pt-row .pt-status { padding-left: 0; }
  .pt-ago { display: none; }
  .pt-when { display: block; margin-left: auto; align-self: flex-start; flex: none; color: var(--faint); font-size: 11.5px; }
  .pt-av { width: 56px; height: 56px; }
  .pt-name { font-size: 16px; }
  .pt-hp { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
  .pt-hp > i { display: none; }
  .pt-hpnum { grid-column: 1 / -1; }
  .pt-bar { grid-column: 1 / -1; height: 8px; }
  .pt-n { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: center; }
  .pt-n > i { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
  .pt-n b { font-size: 18px; line-height: 1.15; }
  .pt-n.sv b { font-size: 16.5px; }
  .pt-row .pt-n:nth-child(7)::before, .pt-row .pt-n:nth-child(10)::before { content: none; }
}
@media (max-width: 760px) { .party-tools { width: 100%; justify-content: space-between; } }
@container ptgrid (max-width: 328px) {
  .pt-n b { font-size: 16px; }
  .pt-n > i { font-size: 9.5px; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) { .pt-row.flash { animation: none; } }

/* ---- turn order ---- */
.turns { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 10px; }
.turns-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.turns-head h2 { font-size: 15px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.turns-round { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--gold2); background: var(--acc1); border: 1px solid var(--crimson2); border-radius: 999px; padding: 2px 10px; margin-left: 8px; }
.turns-btns { display: flex; gap: 6px; }
.turn-list { display: flex; flex-wrap: wrap; gap: 8px; }
.turn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); }
.turn.npc { border-style: dashed; }
.turn.cur { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); background: var(--panel2); }
.turn.cur .tname::before { content: '▶ '; color: var(--gold); }
.tinit { min-width: 30px; height: 26px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--serif); font-weight: 700; color: var(--hit-text);
  background: linear-gradient(180deg, var(--acc1), var(--acc2)); }
.tname { font-weight: 600; font-size: 14px; }
.turn .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 4px; }
.turn .x:hover { color: var(--down); }
.turn-wait { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.turn-wait small { color: var(--faint); }
.turn-add { display: flex; gap: 6px; flex-wrap: wrap; }
.turn-add input[name=name] { flex: 1 1 160px; min-width: 0; }
.turn-add input[name=init] { width: 80px; }
.pt-row.is-turn { box-shadow: inset 4px 0 0 var(--gold); background: var(--panel2); }
.pt-rolled { color: var(--gold2); }
.pt-chip .pt-r { font-size: 10px; opacity: .8; margin-left: 2px; }
.pt-chip.pb { border-style: dashed; }

/* Sheet: buffs cast on the party (cast dialog, tracker "Cast on…", list under Daily uses). Lives here because party.css loads on every page. */
.castopts { display: grid; gap: 6px; }
.castopts label, .buffto label, dialog .form .castopts label, dialog .form .buffto label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
dialog .form .castopts input[type=checkbox], dialog .form .buffto input[type=checkbox] { width: auto; flex: none; }
.castopts small, .buffgo small { color: var(--muted); font-size: 12px; }
.buffbox { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; background: var(--panel2); }
.buffhead small { color: var(--acc-text); font-weight: 600; }
.buffto { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.buffto small { color: var(--faint); }
.buffgo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.buffgo label, dialog .form .buffgo label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.buffgo input[type=number], dialog .form .buffgo input[type=number] { width: 90px; }
.castlist { display: grid; gap: 4px; margin: 8px 0 4px; }
.castrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.castrow small { color: var(--muted); margin-left: 4px; }
.givexp .xpmode, .givexp .xpwho { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.givexp .xpwho { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.givexp label.check { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
.givexp label.check input { width: auto; flex: none; margin: 0; }

/* ---- character summary (click a row) ---- */
.pt-row:not(.pt-headrow), .pt-row .pt-av { cursor: pointer; }
.pt-row.is-open { box-shadow: inset 4px 0 0 var(--gold); background: var(--hover2); }
.pt-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border-left: 1px solid var(--line2); box-shadow: -12px 0 40px rgba(0, 0, 0, .5); padding: 16px 18px 28px; }
.d-head { display: flex; align-items: center; gap: 12px; position: sticky; top: -16px; margin: -16px -18px 10px; padding: 14px 18px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 1; }
.d-av { width: 56px; height: 56px; font-size: 22px; overflow: hidden; flex: none; }
.d-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-id { flex: 1; min-width: 0; }
.d-id h2 { font-size: 20px; color: var(--gold2); margin: 0; }
.d-id p { margin: 1px 0 0; font-size: 13px; color: var(--muted); }
.d-id .d-sub { font-size: 12px; color: var(--faint); }
.d-x { flex: none; }
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.d-stats span { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; text-align: center; min-width: 0; }
.d-stats i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.d-stats b { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d-line { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.d-sec { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 0 0 8px; }
.d-sec h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); font-size: 12px; margin-left: 4px; }
.d-sec p { margin: 4px 0; font-size: 13px; }
.d-sec small { color: var(--muted); }
.d-sec .pt-chip { margin: 0 4px 4px 0; }
.d-list, .d-spells { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.d-spells li div { color: var(--text); }
.d-spells s { color: var(--faint); }
.d-caster + .d-caster { margin-top: 10px; }
.d-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; font-size: 12.5px; }
.d-skills span { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted var(--line); padding: 2px 0; min-width: 0; }
.d-skills i { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-skills b { font-variant-numeric: tabular-nums; }
.d-gear { line-height: 1.5; }
.d-open { margin-top: 18px; text-align: center; }
@media (max-width: 560px) { .d-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }