/* parts.css — the kit of shared page parts (UX installment 1, 2026-10-11). Every part is class-prefixed ts- so it never
   collides with a module's own styles. Widths are decided by the part's own column (container queries), not by the
   screen (UI.IPHONE rule 6), so the same part works on a phone, in an iPad split screen and in a desk side panel.

   Parts and their templates (ux/templates/parts/):
     .ts-tiles / .ts-tile          count tiles that jump to their lists           parts/tiles.html
     .ts-filter                    check-box filter panel, every option visible     parts/filter.html
     .ts-list-wrap + table.ts-list a table that becomes labeled cards when narrow  (class on any table; td data-h)
     .ts-chip                      small state chips (held, mine, free, waiting)    {% arb_holder_chip %}
     .ts-panel                     a boxed message: waiting, attention, done, note
     .ts-actions / .ts-btn         buttons: main (full width on a phone), ghost
     .ts-arb                       the live "also open / who has it" strip          {% arb_strip %}
     .ts-bigscreen                 "Detailed work on this page needs a larger screen" parts/bigscreen.html
     .ts-strip                     the copy and switch strips at the very top        (UI.IPHONE rule 8) */

.ts-lead { margin: .2rem 0 .9rem; color: var(--ts-ink); line-height: 1.45; }
.ts-order { margin: .1rem 0 .4rem; color: var(--ts-muted); font-size: var(--ts-type-floor); }
.ts-empty { color: var(--ts-muted); }

/* tiles: two across on a phone, more when there is room */
.ts-tiles { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: .4rem 0 1rem; }
.ts-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--ts-rule); border-radius: var(--ts-radius);
  background: #f7f8fa; color: var(--ts-ink); text-decoration: none; min-height: 64px; }
.ts-tile:hover { text-decoration: none; border-color: var(--ts-discretionary); }
.ts-tile-n { font-size: var(--ts-type-big); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ts-tile-l { font-size: var(--ts-type-floor); color: var(--ts-muted); line-height: 1.25; }
.ts-tile-on { background: var(--ts-discretionary-bg); border-color: #b9cde8; }
.ts-tile-waiting { background: var(--ts-waiting-bg); border-color: var(--ts-waiting-rule); }
.ts-tile-attention { background: var(--ts-attention-bg); border-color: #e6a8a3; }
.ts-tile-held { background: var(--ts-held-bg); border-color: #cdb8ea; }
@media (max-width: 760px) { .ts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* filter panel: check boxes, never pull-down menus (owner, 2026-10-09) */
.ts-filter { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; padding: 8px 10px; margin: .2rem 0 .8rem;
  border: 1px solid var(--ts-rule); border-radius: var(--ts-radius); background: var(--ts-field); }
.ts-filter fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ts-filter legend { font-weight: 600; font-size: var(--ts-type-floor); padding: 0 6px 0 0; float: left; color: var(--ts-ink); }
.ts-filter label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ts-tap); font-size: var(--ts-type-floor); cursor: pointer; }
.ts-filter input[type=checkbox] { width: 22px; height: 22px; }
.ts-filter .ts-btn { min-height: var(--ts-tap); }

/* lists: a table on a wide column, labeled cards on a narrow one */
.ts-list-wrap { container-type: inline-size; width: 100%; }
table.ts-list { width: 100%; }
table.ts-list td, table.ts-list th { white-space: normal; vertical-align: top; }
table.ts-list td > a { display: inline-flex; align-items: center; min-height: var(--ts-tap); }   /* a link alone in a cell is a tap target */
table.ts-list td.ts-title > a { font-weight: 600; }
.ts-row-waiting > td { background: var(--ts-waiting-bg); }
.ts-row-held > td { background: var(--ts-held-bg); }
@container (max-width: 860px) {   /* a phone, an iPad in portrait or split screen, a desk side panel */
  table.ts-list, table.ts-list tbody { display: block; }
  table.ts-list tr:first-child { display: none; }
  table.ts-list tr { display: block; border: 1px solid var(--ts-rule); border-radius: var(--ts-radius); margin: 0 0 10px; padding: 8px 10px; }
  table.ts-list td { display: block; position: relative; border: 0; padding: 3px 0 3px 8.2em; min-height: 1.4em; font-size: var(--ts-type-floor); }
  table.ts-list td::before { content: attr(data-h); position: absolute; left: 0; top: 3px; width: 7.8em; color: var(--ts-muted); }
  table.ts-list td.ts-title { font-size: var(--ts-type-read); font-weight: 600; padding-left: 0; }
  table.ts-list td.ts-title::before { content: none; }
  table.ts-list td.ts-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 0; }
  table.ts-list td.ts-acts::before { content: none; }
}

/* chips */
.ts-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--ts-type-floor); line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.ts-chip-wrap { white-space: normal; border-radius: var(--ts-radius); display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ts-chip-free { background: #f2f4f6; color: var(--ts-muted); border-color: var(--ts-rule); }
.ts-chip-mine { background: var(--ts-mine-bg); color: var(--ts-mark); border-color: #b9cde8; }
.ts-chip-held { background: var(--ts-held-bg); color: var(--ts-held); border-color: #cdb8ea; }
.ts-chip-waiting { background: var(--ts-waiting-bg); color: var(--ts-waiting); border-color: var(--ts-waiting-rule); }
.ts-chip-attention { background: var(--ts-attention-bg); color: var(--ts-attention); border-color: #e6a8a3; }
.ts-chip-done { background: var(--ts-done-bg); color: var(--ts-done); border-color: #b9d8c9; }

/* panels */
.ts-panel { border: 1px solid var(--ts-rule); border-left-width: 5px; border-radius: var(--ts-radius); padding: 10px 14px; margin: .4rem 0 1rem; background: #fafbfc; }
.ts-panel p { margin: .35rem 0; line-height: 1.45; }
.ts-panel-head { font-weight: 700; font-size: 1.1rem; }
.ts-panel-waiting { background: var(--ts-waiting-bg); border-color: var(--ts-waiting-rule); }
.ts-panel-attention { background: var(--ts-attention-bg); border-color: var(--ts-attention); }
.ts-panel-done { background: var(--ts-done-bg); border-color: var(--ts-done); }
.ts-panel-note { background: var(--ts-discretionary-bg); border-color: var(--ts-discretionary); }
ul.ts-kv { margin: .3rem 0; padding-left: 1.1rem; } ul.ts-kv li { margin: .15rem 0; }

/* buttons: blue, never black (TS.UI STYLE) */
.ts-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: .6rem 0 1rem; }
.ts-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ts-tap); padding: 0 16px; border-radius: var(--ts-radius);
  border: 1px solid var(--ts-discretionary); background: var(--ts-discretionary); color: #fff; font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.ts-btn:hover { text-decoration: none; filter: brightness(1.06); }
.ts-btn-ghost { background: #fff; color: var(--ts-discretionary); border-color: #b9cde8; }
.ts-btn-quiet { background: #fff; color: var(--ts-muted); border-color: var(--ts-rule); }
.ts-btn[disabled] { opacity: .55; cursor: default; }
@media (max-width: 760px) {
  .ts-btn-main { width: 100%; min-height: var(--ts-btn-main); }
  .ts-actions form.inline { display: contents; }
}

/* the live arbitration strip */
.ts-arb { margin: .2rem 0 .8rem; }
.ts-arb:empty { display: none; }
.ts-arb-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border-radius: var(--ts-radius);
  background: #f7f8fa; border: 1px solid var(--ts-rule); margin: 0 0 6px; font-size: var(--ts-type-floor); line-height: 1.4; }
.ts-arb-others { background: var(--ts-waiting-bg); border-color: var(--ts-waiting-rule); }
.ts-arb-held { background: var(--ts-held-bg); border-color: #cdb8ea; }
.ts-arb-mine { background: var(--ts-mine-bg); border-color: #b9cde8; }
.ts-arb form.inline { display: inline; }

/* the large-screen note (UI.IPHONE rule 9) */
.ts-bigscreen { display: none; }
@media (max-width: 760px) { .ts-bigscreen { display: block; } }

.ts-howto { margin-top: 1.6rem; padding-top: .6rem; border-top: 1px solid var(--ts-rule); }
.ts-howto li { margin: .3rem 0; line-height: 1.45; }

@media print {
  .ts-arb, .ts-actions, .ts-filter, .ts-btn, .ts-bigscreen { display: none !important; }
  .ts-tile { border-color: #999; background: #fff !important; }
}