/* 管理頁「物品管理」（第 1 期；程式在 admin-items.js）。和贊助方案區同一套：摘要列＋工具列＋一項一列，
   電腦對齊成表格、窄的時候（容器 ≤ 840px）變卡片；不橫向捲動、數字與字眼不拆行。色票沿用 style.css 與 admin.css（--a-ink、--line…），
   稀有度的色點用遊戲的 --r-*（.r-common…，文字仍用一般字色，淺色主題對比才夠）。 */
#itBox { container: itlist / inline-size; gap: 12px; }
.it-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.it-sum { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); gap: 4px 28px; justify-content: start; min-width: 0; }
.it-sum .muted { margin: 0; }
.it-s1 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.it-s1 span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.it-s1 b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it-s1 b.warn { white-space: normal; }
#itRefresh { white-space: nowrap; }
.it-shadow { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); }
.it-shadow[hidden] { display: none; }
.it-shadow h3 { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.it-shadow h3 .small { font-weight: 400; }
.it-shadow p { margin: 0; }
.it-sh-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.it-sh-m span { font-size: 12.5px; color: var(--muted); }
.it-sh-m span.warn { color: var(--warn, var(--a-ink)); font-variant-numeric: normal; }
.it-sh-m b { font-weight: 600; }
.it-sh-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); }
.it-sh-i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); white-space: nowrap; }
.it-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.it-bar .search { flex: 1 1 160px; }
.it-bar .it-s { flex: none; }
.it-bar .sel select { min-width: 7em; }
.it-list { display: flex; flex-direction: column; }
.it-list .empty, .it-list .muted { margin: 6px 2px; }

/* 一列：電腦是表格 */
.it-row, .it-head { display: grid; grid-template-columns: minmax(96px, 1fr) 56px minmax(132px, 1.2fr) 76px 96px 76px 40px 84px 84px 14px;
  grid-template-areas: "nm cat tg r pr q h at by go"; align-items: center; gap: 0 8px; }
.it-head { padding: 0 6px 6px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.it-head .r, .it-row .r { text-align: right; justify-content: flex-end; }
.it-row { width: 100%; min-height: 0; height: auto; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.it-row:last-child { border-bottom: 0; }
.it-row:hover { background: var(--accent-soft); }
.it-row:focus-visible { outline-offset: -2px; }
.it-c { min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-nm { grid-area: nm; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: normal; }
.it-nm b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.it-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.it-tags .badge { font-size: 11px; white-space: nowrap; }
.it-cat { grid-area: cat; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.it-tgs { grid-area: tg; display: flex; flex-wrap: wrap; gap: 3px; white-space: normal; }
.it-tg { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.it-tg.it-more { color: var(--muted); border-style: dashed; }
.it-kv > .it-tgs { grid-area: auto; }
.it-r { grid-area: r; }
.it-pr { grid-area: pr; }
.it-q { grid-area: q; }
.it-q em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.it-h { grid-area: h; }
.it-at { grid-area: at; color: var(--muted); }
.it-by { grid-area: by; overflow: hidden; text-overflow: ellipsis; }
.it-go { grid-area: go; color: var(--muted); display: flex; justify-content: flex-end; }
.it-go .ic { font-size: 14px; }
.it-cap, .it-br { display: none; }
.it-rar { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border: 1px solid var(--rc, var(--line));
  border-radius: 999px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.it-rar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--muted)); flex: none; }
.it-rar.r-none { --rc: var(--line); border-style: dashed; color: var(--muted); }
.it-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.it-pager .small { margin-right: auto; }

/* 物品流轉路徑（I0）：同一區塊、唯讀；搜尋各組之間有分隔線，輸入框不拉滿整列 */
.it-ledger { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 2px solid var(--line); }
.it-lhd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.it-lhd h3 { margin: 0; font-size: 15px; }
.it-lhd p { margin: 2px 0 0; }
.it-lbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.it-lf { display: flex; flex-direction: column; gap: 3px; flex: 0 1 13.5em; min-width: 8.5em; font-size: 12px; color: var(--muted); }
.it-lf input { width: 100%; min-width: 0; }
.it-lsep { width: 1px; align-self: stretch; min-height: 2.4em; background: var(--line-strong, var(--line)); margin: 0 2px; }
.it-lbar #itLGo, .it-lbar #itLClear { white-space: nowrap; }
.it-lsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-height: 1.4em; font-size: 13px; }
.it-lsum b { font-size: 14px; }
.it-lsum .small { color: var(--muted); }
.it-llist { display: flex; flex-direction: column; gap: 10px; }
.it-llist .empty { margin: 4px 2px; }
.it-lrow { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 11px 13px 12px; min-width: 0; }
.it-lrh { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.it-lrt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.it-lrt h4 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.it-lrm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.it-lrm span { white-space: nowrap; }
.it-lid { font-variant-numeric: tabular-nums; }
.it-lstate { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.it-lstate.on { color: var(--a-ink); border-color: var(--a-ink); }
.it-lstate.off { color: var(--muted); border-style: dashed; }
.it-ltl { position: relative; margin: 4px 0 0; padding: 2px 0 0 18px; list-style: none; }
.it-ltl::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 12px; border-left: 1px solid var(--line); }
.it-lt { position: relative; padding: 7px 0 8px; }
.it-lt:last-child { padding-bottom: 0; }
.it-lt-dot { position: absolute; left: -17px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--muted); }
.it-lt.first .it-lt-dot { border-color: var(--a-ink); background: var(--a-ink); }
.it-lt.last .it-lt-dot { border-color: var(--accent); background: var(--accent); }
.it-lt-b { min-width: 0; }
.it-lt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; font-size: 13px; }
.it-lt-h b { font-size: 13.5px; white-space: nowrap; }
.it-lt-h .it-lt-ms { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; color: var(--muted); font-size: 12.5px; min-width: 0; }
.it-lt-m { white-space: nowrap; }
.it-lt-sep { color: var(--muted); white-space: nowrap; }

/* 窄的時候：一種物品一張卡片（第一行名稱＋稀有度＋登記日期；第二行每件・手上・人數；第三行種類與登記者） */
@container itlist (max-width: 840px) {
  .it-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; flex: 1 1 100%; }
  .it-top #itRefresh { flex: 1 1 100%; justify-content: center; }
  .it-bar .search { flex: 1 1 100%; }
  .it-bar .it-s { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .it-bar .it-w { flex-basis: 100%; }
  .it-bar .it-s select { flex: 1 1 auto; min-width: 0; width: 100%; }
  .it-head { display: none; }
  .sk-6 { display: inline-flex; margin: 0 0 4px; }
  .it-list { gap: 8px; }
  .it-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--bg); }
  .it-row:last-child { border-bottom: 1px solid var(--line); }
  .it-nm { order: 1; flex: 1 1 0; }
  .it-r { order: 2; }
  .it-at { order: 3; font-size: 12px; }
  .it-br { display: block; order: 4; flex-basis: 100%; height: 0; }
  .it-br + .it-pr ~ .it-br { order: 8; }
  .it-pr { order: 5; }
  .it-q { order: 6; }
  .it-h { order: 7; }
  .it-by { order: 9; flex: 1 1 100%; font-size: 12.5px; color: var(--muted); white-space: normal; }
  .it-row .it-cat, .it-row .it-go { display: none; }
  .it-tgs { order: 10; flex: 1 1 100%; }
  .it-cap { display: inline; color: var(--muted); }
  .it-pr .it-cap { margin-right: 4px; }
  .it-q .it-cap:first-child { margin-right: 4px; } .it-q .it-cap:not(:first-child) { margin-left: 2px; }
  .it-h .it-cap { margin-left: 2px; }
  .it-by .it-cap { margin-right: 4px; }
  .it-q em { display: inline; margin-left: 4px; }
  .it-q::before, .it-h::before { content: "・"; color: var(--muted); margin-right: 2px; }
  .it-row .r { text-align: left; }
  .it-pager { justify-content: space-between; }
  .it-pager .small { flex: 1 1 100%; }
  .it-lf { flex: 1 1 100%; min-width: 0; }
  .it-lsep { display: block; flex: 1 1 100%; width: auto; height: 0; min-height: 0; margin: 0; background: none;
    border-top: 1px solid var(--line-strong, var(--line)); }
  .it-lbar #itLGo, .it-lbar #itLClear { flex: 1 1 calc(50% - 5px); justify-content: center; }
  .it-lrh { flex-direction: column; }
  .it-lrm { font-size: 12px; }
}

/* 單件抽屜：電腦從右側滑出、手機整頁 */
dialog.it-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
dialog.it-drawer::backdrop { background: rgba(0, 0, 0, .45); }
.it-dw { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.it-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.it-dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.it-dt h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.it-db { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 24px; }
.it-pad { padding: 12px 20px; }
.it-blk { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.it-blk:last-child { border-bottom: 0; }
.it-blk h3 { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.it-blk h3 .small { font-weight: 400; }
.it-blk p { margin: 0; }
.it-kv { font-size: 13.5px; }
.it-kv > span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.it-kv > b { font-weight: 600; min-width: 0; font-variant-numeric: tabular-nums; }
.it-kv .it-big { font-size: 18px; color: var(--a-ink); }
.it-kv .it-note { font-weight: 400; overflow-wrap: anywhere; }
.it-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.it-act .small { flex: 1 1 180px; }
.it-ht { display: flex; flex-direction: column; font-size: 13.5px; }
.it-hh, .it-hr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 64px 64px; gap: 0 10px; align-items: center; }
.it-hh { font-size: 12px; color: var(--muted); padding: 0 0 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.it-hr { padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.it-hr:last-child { border-bottom: 0; }
.it-hr > span { min-width: 0; overflow-wrap: anywhere; }
.it-hh .r, .it-hr .r { text-align: right; white-space: nowrap; }
.it-hr .it-ti { color: var(--muted); }
.it-hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m b" "v b" "y y"; gap: 2px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.it-hist-row:last-child { border-bottom: 0; }
.it-hm { grid-area: m; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; color: var(--muted); }
.it-hm time { white-space: nowrap; }
.it-hv { grid-area: v; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-hv span { color: var(--muted); }
.it-hy { grid-area: y; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.it-hist-row .small-btn { grid-area: b; align-self: center; white-space: nowrap; }
.it-prev:empty { display: none; }
@media (max-width: 640px) {
  dialog.it-drawer { width: 100vw; border-left: 0; }
  .it-db { padding: 4px 16px 24px; }
  .it-dh { padding: 12px 12px 10px 16px; }
  .it-hh, .it-hr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px 56px; gap: 0 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.it-drawer[open] { animation: it-in .18s ease-out; }
  @keyframes it-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ---------- UI-4：物品清單與抽屜分組 ---------- */
/* 清單固定成單行節奏；狀態籤縮小，避免一列被擠成兩三行。 */
.it-row, .it-head {
  grid-template-columns: minmax(150px, 1fr) 56px 118px 76px 92px 112px 40px 76px 76px 14px;
  gap: 0 7px;
}
.it-row { padding: 6px; font-size: 13px; line-height: 18px; }
.it-head { padding: 0 6px 5px; }
.it-nm { gap: 1px 6px; }
.it-nm b { font-size: 14px; line-height: 18px; }
.it-tags { gap: 2px 5px; }
.it-tags .badge { min-height: 16px; height: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
.it-tgs { flex-wrap: wrap; gap: 3px; }
.it-tg { height: 18px; padding: 0 6px; font-size: 11px; }
.it-tgs .it-tg[hidden] { display: none; }
.it-q { display: flex; align-items: baseline; gap: 0 4px; white-space: nowrap; }
.it-q em { display: inline-block; margin: 0; font-size: 11.5px; line-height: 18px; color: var(--a-frost); white-space: nowrap; }
.it-qv, .it-q em { flex: none; }
.it-cat { cursor: help; }

/* 抽屜：唯讀 560px、編輯世界定義時 640px；抽屜本身當容器，窄寬時標籤改到上方。 */
dialog.it-drawer.editing { width: min(640px, 100vw); }
.it-db { container: af / inline-size; }
.it-db.af-sections { padding: 0 20px 24px; }
.it-db .af-sec { padding: 16px 0; border-top: 1px solid var(--line); }
.it-db .af-sec:first-child { padding-top: 8px; border-top: 0; }
.it-db .af-sec + .af-sec { padding-top: 16px; }
.it-db .af-sec-h { margin-bottom: 12px; }
.it-db .af-kv { grid-template-columns: var(--af-lbl) minmax(0, 1fr); gap: var(--af-gy) var(--af-gx); }
.it-world-name { overflow-wrap: anywhere; }
.it-kv .af-v > .af-lock { flex: 0 1 auto; max-inline-size: 100%; }
.it-kv .af-v > .af-lock span:last-child { overflow-wrap: anywhere; white-space: normal; }
.it-kv .it-big { font-size: 18px; color: var(--a-ink); }
.it-kv .it-note { font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.it-kv .it-tgs { display: flex; flex-wrap: wrap; gap: 3px; }
.it-reg { margin-top: var(--af-gy); }
.it-reg .af-kv { row-gap: 4px; }
.it-world-form { row-gap: 10px; }
.it-world-form > .af-v { align-items: flex-start; }
.it-world-form .af-f { max-inline-size: 100%; }
.it-world-form .af-help { flex-basis: 100%; }
.it-world-form textarea { white-space: pre-wrap; }
.it-edit-actions { margin-top: 12px; }
.it-edit-actions .af-msg { max-inline-size: 32em; line-height: 1.5; }

/* 背包記值：四格分開，不用斜線串成一行。 */
.it-bag-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 0 0 12px;
  border-bottom: 1px solid var(--line); }
.it-bag-stats .af-stat-v { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 持有實例：桌面是整齊表格，手機是第一行玩家／角色、第二行數量與價值的小卡。 */
.it-hh, .it-hr {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(80px, 1fr) 54px 90px 64px 32px;
  align-items: center; gap: 0 10px;
}
.it-hh { padding: 0 0 5px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.it-hr { padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.it-hr:last-child { border-bottom: 0; }
.it-hr > span { min-width: 0; overflow-wrap: anywhere; }
.it-h-who, .it-h-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-h-qty, .it-h-price { text-align: right; white-space: nowrap; }
.it-h-state { color: var(--muted); font-size: 12.5px; }
.it-h-act { justify-self: end; }

/* 世界定義表單與預覽差異表：欄位照共用級距，差異表在手機也不撐破對話框。 */
.it-price-edit { display: flex; align-items: flex-start; }
.it-diff-wrap { margin: 10px 0 14px; }
.it-price-diff { border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.it-price-diff th, .it-price-diff td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left;
  vertical-align: top; overflow-wrap: anywhere; font-size: 12.5px; }
.it-price-diff thead th { border-top: 0; color: var(--muted); font-weight: 500; }
.it-price-diff th:nth-child(1) { width: 17%; }
.it-price-diff th:nth-child(2), .it-price-diff th:nth-child(3) { width: 20%; }
.it-price-diff th:nth-child(4) { width: 43%; }

@container itlist (max-width: 840px) {
  .it-bar .search { flex: 1 1 100%; }
  .it-bar .it-s { flex: 1 1 calc((100% - 20px) / 3); min-width: 0; }
  .it-bar .it-w { flex-basis: calc((100% - 20px) / 3); }
  .it-bar .it-loadsort { display: none; }
  .it-bar .it-s select { inline-size: 100%; min-inline-size: 0; }
  .it-bar .sk-m { margin: 0; }
  .it-row { padding: 9px 10px; }
  .it-tgs { flex-wrap: wrap; }
}

@container af (max-width: 480px) {
  .it-db .af-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .it-db .af-kv > .af-k { line-height: 18px; margin-top: var(--sp-2); }
}

@media (max-width: 640px) {
  .it-db.af-sections { padding: 0 16px 24px; }
  .it-bag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-hh { display: none; }
  .it-ht { gap: 8px; }
  .it-hr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who act" "role act" "qty price" "state state";
    row-gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  }
  .it-h-who { grid-area: who; font-weight: 600; white-space: normal; }
  .it-h-role { grid-area: role; color: var(--muted); font-size: 12.5px; white-space: normal; }
  .it-h-qty { grid-area: qty; text-align: left; }
  .it-h-price { grid-area: price; text-align: right; }
  .it-h-state { grid-area: state; font-size: 12px; }
  .it-h-act { grid-area: act; align-self: start; }
  .it-h-qty::before, .it-h-price::before { content: attr(data-l) " "; color: var(--muted); font-size: 11.5px; }
  .it-price-diff th:nth-child(1) { width: 22%; }
  .it-price-diff th:nth-child(2), .it-price-diff th:nth-child(3) { width: 25%; }
  .it-price-diff th:nth-child(4) { width: 28%; }
}

/* ---------- 自由編輯 E1：世界多欄位、玩家實例、新增 ---------- */
dialog.it-drawer.instance { width: min(680px, 100vw); }
dialog.it-drawer.editing.instance { width: min(680px, 100vw); }
.it-new { white-space: nowrap; }
.it-warn-list { margin: 8px 0 10px; padding-left: 1.2em; }
.it-warn-list li + li { margin-top: 2px; }
.it-check { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0; font-size: 13px; }
.it-check input { flex: none; margin-top: 3px; }
.it-name-warn { margin-top: 4px; }
.it-hgrp { border-bottom: 1px solid var(--line); }
.it-hgrp:last-child { border-bottom: 0; }
.it-hgrp > .it-hr { border-bottom: 0; }
.it-hform { padding: 0 0 10px 12px; border-left: 2px solid var(--line-strong, var(--line)); margin: 0 0 6px 2px; }
.it-inst-list { display: flex; flex-direction: column; gap: 8px; }
.it-inst { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 9px 10px; }
.it-inst-h { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; font-size: 13px; }
.it-inst-name { font-weight: 600; min-width: 8em; }
.it-inst-name .muted { font-weight: 400; font-size: 12px; }
.it-inst-v { color: var(--muted); font-variant-numeric: tabular-nums; }
.it-inst-act { margin-left: auto; }
.it-inst-f { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.it-inst-numbers { inline-size: 100%; align-items: flex-start; }
.it-inst-numbers > .af-f { flex: 0 0 auto; }
.it-inst-form .af-v > .af-line { min-inline-size: 0; }
.it-inst-form #instNote { min-inline-size: 0; }
.it-hv { flex-wrap: wrap; }
.it-hv-pair { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.it-hv-pair + .it-hv-pair { margin-left: 10px; }
.it-edit-diff td:nth-child(2), .it-edit-diff td:nth-child(3) { font-variant-numeric: tabular-nums; }
.it-edit-diff td:nth-child(4) { color: var(--muted); }
@media (max-width: 640px) {
  .it-hform { padding-left: 0; margin-left: 0; border-left: 0; }
  .it-inst { border: 0; border-radius: 0; background: transparent; padding: 4px 0; }
  .it-inst-h { align-items: flex-start; }
  .it-inst-v { flex: 1 1 100%; }
  .it-inst-act { margin-left: 0; }
  .it-inst-f { margin-top: 4px; padding-top: 10px; }
  .it-inst-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--af-gx); }
  .it-inst-numbers > .af-f { inline-size: 100%; max-inline-size: none; }
  .it-inst-numbers .af-in { inline-size: 100%; }
}