/* Drop rows: the monster's Drop card and the drop list editor. Linked after simple.css; tokens from theme.css. */

/* the one Drop card: the Noah line, the rows, the total */
.drop-card{display:grid;gap:12px;min-width:0}
.drop-noah{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.drop-noah-amount{display:inline-flex;align-items:center;gap:8px;color:var(--fg-2);font-size:var(--fs-2)}
.drop-noah-amount .val{color:var(--fg)}
.drop-noah-note{color:var(--fg-2);font-size:var(--fs-1)}
.drop-total{margin:0;padding:0 12px;text-align:right;color:var(--fg-2);font-size:var(--fs-2);font-variant-numeric:tabular-nums}

/* the rows table: a box opens into a full-width sub-row (no table inside a table) */
.grid.drop-rows td.n{width:54px}
.grid.drop-rows td.num{font-variant-numeric:tabular-nums}
.grid.drop-rows tr.drop-sub[hidden]{display:none}
.grid.drop-rows tr.sub>td{padding:4px 12px 12px 44px;background:var(--bg)}
.grid.drop-rows tr.has-sub:has(+tr.drop-sub:not([hidden]))>td{border-bottom-color:transparent;background:var(--surface-2)}
.drop-box-ref{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.drop-toggle{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--fg-2);font:inherit;font-size:var(--fs-1);cursor:pointer;white-space:nowrap}
.drop-toggle:hover{color:var(--fg);border-color:var(--line-strong);background:var(--hover)}
.drop-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.drop-toggle .svg{display:inline-flex;transition:transform .12s}
.drop-toggle.open{color:var(--fg);border-color:var(--line-strong)}
.drop-toggle.open .svg{transform:rotate(90deg)}

/* a box's items: two columns of chips (32 px icon, name, the real chance) */
.drop-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.drop-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:calc(var(--icon-sm) + 4px);padding:2px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.drop-chip .item{min-width:0}
.drop-chip .item b{max-width:100%}
.drop-chip-rate{flex:none;color:var(--fg-2);font-size:var(--fs-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.drop-chip-rate small{font-size:var(--fs-1);color:var(--fg-3)}

/* the editor's chance column: the input right-aligned, the computed real chance beside it */
.drop-rate-cell{display:grid;justify-items:end;gap:2px}
.drop-rate-line{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.drop-rate-line .drop-rate{width:84px;text-align:right;font-variant-numeric:tabular-nums}
.drop-rate-unit{color:var(--fg-2)}
.drop-real{display:inline-block;min-width:21ch;text-align:left;color:var(--fg-2);font-size:var(--fs-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.drop-rate-cell .block{white-space:normal;text-align:right}

/* the monster's stat cards under the Drop card: 3 columns on wide screens, 2 below, 1 on a phone */
.mob-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1600px){.mob-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a value that names another row (a skill, a weapon, the role, the shop): the named row, then its editable number */
.named-ref{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.named-ref .badline{margin:0}
@media (max-width:700px){
  .mob-stats,.drop-chips{grid-template-columns:1fr}
  .grid.drop-rows tr.sub>td{padding-left:12px}
  .drop-real{min-width:0}
  .drop-total{text-align:left;padding:0}
}