/* Month match: status pill, run controls, Match screen, book-lines drawer, match journal lines. Tokens only. */
.match { min-width: 0; display: grid; gap: 14px; align-content: start; }
.match .ph1 { margin-bottom: 0; }
a.match-pill { text-decoration: none; }
a.match-pill:hover { box-shadow: inset 0 0 0 1px currentColor; }
a.match-pill:focus-visible { outline: none; box-shadow: var(--focus); }
.st.teal { background: var(--teal-t); color: var(--teal); }
td .st + .st, td .st + .link { margin-left: 6px; }

.run-match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.run-cutoff { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.run-cutoff .in { height: 34px; padding: 0 10px; border: 1px solid var(--ctl); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; }
.run-cutoff .in:disabled { opacity: .5; }
.run-hint { flex: 1 1 260px; font-size: 13px; }
.run-match .err { flex-basis: 100%; margin-top: 0; }

.match .tw { max-width: 100%; }
.match-ent td .sub, .match-cells td .sub { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.match-cells td:first-child { min-width: 240px; white-space: normal; }
.match-cells td:last-child { white-space: normal; min-width: 220px; }
.match-cells td:last-child .st { height: auto; min-height: 24px; white-space: normal; padding-top: 2px; padding-bottom: 2px; }
.match-cells tr.click { cursor: pointer; }
.match-cells tr.click:hover > td { background: var(--hover); }
.match-cells tr.click:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.match-cells tr.ok-row > td { color: var(--ink-3); }
.match .mj-filter { border-top: 0; }

.mj-match td .sub { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.mj-match td.r { white-space: nowrap; }
.mj-match td .st { margin-top: 3px; }
.mj-cause { margin: 8px 0 0 24px; }
.mj-cause .st { height: auto; min-height: 24px; white-space: normal; padding-top: 2px; padding-bottom: 2px; }
.mj-meta .link { font-size: 13px; }

.bl-tot { margin: 0 0 12px; font-size: 13.5px; }
.bl-tot .sub { display: block; font-size: 12.5px; margin-top: 2px; }
.bl { font-size: 13px; }
.bl th, .bl td { padding-left: 10px; padding-right: 10px; }
.bl td .sub { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.bl td.nar { min-width: 180px; max-width: 280px; white-space: normal; color: var(--ink-2); }
.bl tr.excl > td { color: var(--ink-3); background: var(--subtle); }
.drawer:has(.bl) { width: min(860px, 100vw); }

@media (max-width: 760px) {
  .mj-cause { margin-left: 0; }
  .match .mj-filter .mis-sel { flex: 1 1 100%; min-width: 0; }
  .match .mj-filter .mis-sel select { width: 100%; }
  .mj-match { min-width: 760px; }
  .match-cells { min-width: 640px; }
  .match-ent { min-width: 560px; }
  .bl { min-width: 760px; }
  .run-cutoff { flex: 1 1 100%; justify-content: space-between; }
}
/* phone: the status pill in the page header wraps instead of widening the page */
@media (max-width: 760px) { .ph1 .meta .match-pill { white-space: normal; height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; max-width: 100%; } .ph1 > div { min-width: 0; } }