/*
  66-table.css — v46.4 Table and the DM Screen (design/table Main, NextGame,
  Dice, Person, Coins, DM, Dossier, Desktop). Dark screen, cream cards, brass
  accents; the person and dossier pages are the Modal, full height on a phone.
*/

.tb-screen { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 24px; color: #231a10; }
.tb-screen button, #modal .tb-page button { font: inherit; }
.tb-card, .tb-list { overflow: hidden; border-radius: 16px; border: 1px solid #ddd0ab; background: #efe4c3; color: #231a10; }
.tb-empty { padding: 14px 12px; font-size: 14px; color: #5c4a30; }
.tb-screen .tb-head, #modal .tb-head { margin: 6px 0 0; font-size: 15px !important; font-weight: 700; color: #f1e4c4; letter-spacing: 0; text-shadow: none; font-family: inherit; }
#modal .tb-head { color: #231a10; }
.tb-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tb-sec .tb-head { margin: 0; }
.tb-hint { font-size: 13px; color: #bfae8c; }
.tb-screen p.tb-note, #modal p.tb-note { margin: 0; font-size: 13px; line-height: 1.45; color: #e6d7b5; }
#modal p.tb-note { color: #5c4a30; }
.tb-screen button.tb-btn { align-self: flex-start; min-height: 44px !important; padding: 0 16px; border-radius: 14px; border: 1px solid #6e5b40; background: transparent; color: #e8c069; font-size: 15px; font-weight: 700; cursor: pointer; }
.tb-screen button.tb-btn.is-small { min-height: 40px !important; padding: 0 14px; font-size: 14px; }
.tb-screen button.tb-btn.is-primary { border-color: #c18a2a; background: #c18a2a; color: #1f1712; }
.tb-screen button.tb-link, #modal button.tb-link { align-self: flex-start; min-height: 40px !important; padding: 0 2px; border: 0; background: none; box-shadow: none; color: #e8c069; font-size: 14px; font-weight: 600; cursor: pointer; }
#modal button.tb-link { color: #845c0f; }
.tb-face { display: grid; place-items: center; flex-shrink: 0; border-radius: 999px; background-size: cover; background-position: top center; color: #231a10; font-weight: 800; }

/* Party */
.tb-party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tb-screen button.tb-pc { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 132px !important; padding: 14px 10px; border-radius: 16px; border: 1px solid #ddd0ab; background: #efe4c3; color: #231a10; text-align: center; cursor: pointer; }
.tb-pc-name { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.tb-pc small { font-size: 13px; color: #5c4a30; }
.tb-screen button.tb-dm { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px !important; padding: 10px 12px; border-radius: 14px; border: 1px solid #6e5b40; background: #2a1e15; color: #f1e4c4; text-align: left; cursor: pointer; }
.tb-dm-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-dm-text b { font-size: 16px; }
.tb-dm-text small { font-size: 13px; color: #bfae8c; }
.tb-dm-hint { flex-shrink: 0; font-size: 13px; color: #bfae8c; }

/* Next game */
.tb-next { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 16px; border-radius: 16px; border: 1.5px solid #c18a2a; background: #1f1712; color: #f1e4c4; }
.tb-next-kicker { font-size: 13px; font-weight: 700; color: #e8c069; }
.tb-next-date { font-size: 26px; line-height: 1.15; }
.tb-next-time { font-size: 15px; font-weight: 600; color: #e6d7b5; }
.tb-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tb-cd-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px 8px; border-radius: 12px; background: #2a1e15; }
.tb-cd-cell b { font-size: 26px; line-height: 1; color: #e8c069; font-variant-numeric: tabular-nums; }
.tb-cd-cell small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #bfae8c; }
.tb-after-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 12px; border-top: 1px solid #ddd0ab; }
.tb-after-row:first-child { border-top: 0; }
.tb-after-row b { font-size: 15px; }
.tb-after-row span { flex-shrink: 0; font-size: 13px; color: #5c4a30; }

/* Dice ledger */
.tb-dice-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tb-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid #4a3a28; background: #2a1e15; color: #f1e4c4; }
.tb-tile small { font-size: 13px; color: #bfae8c; }
.tb-tile b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tb-screen button.tb-log { min-height: 64px !important; padding: 0 8px; border: 0; border-radius: 14px; background: #c18a2a; color: #1f1712; font-size: 15px; font-weight: 700; cursor: pointer; }
.tb-dice-body { display: flex; flex-direction: column; gap: 10px; }
.tb-chart { padding: 10px 12px 12px; }
.tb-chart.is-empty { font-size: 14px; color: #5c4a30; }
.tb-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.tb-legend { display: flex; gap: 10px; font-size: 13px; font-weight: 600; color: #3d2f1d; }
.tb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tb-legend i { width: 9px; height: 9px; border-radius: 2px; }
.tb-bars { display: flex; align-items: stretch; gap: 8px; height: 96px; }
.tb-screen button.tb-col { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-width: 0; min-height: 0 !important; height: 100%; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.tb-bar { flex: 1 1 0; max-width: 18px; border-radius: 2px 2px 0 0; }
.tb-bar.is-20, .tb-legend i.is-20 { background: #4f8a45; }
.tb-bar.is-1, .tb-legend i.is-1 { background: #a8392b; }
.tb-who-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px 20px; align-items: center; gap: 6px; width: 100%; min-height: 46px; padding: 0 10px 0 12px; border: 0; border-top: 1px solid #ddd0ab; background: none; color: #231a10; text-align: left; }
.tb-who-row.is-head { min-height: 34px; border-top: 0; font-size: 12px; font-weight: 700; color: #5c4a30; }
.tb-screen button.tb-who-row { min-height: 46px !important; border-radius: 0; cursor: pointer; }
.tb-who-name { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tb-n { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
b.tb-n { font-size: 16px; }
.tb-who-row .cx-icon { color: #6e5b40; }

/* Coins */
.tb-screen button.tb-coin { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px !important; padding: 8px 12px; border: 0; border-top: 1px solid #ddd0ab; border-radius: 0; background: none; color: #231a10; text-align: left; cursor: pointer; }
.tb-screen button.tb-coin:first-child { border-top: 0; }
.tb-coin-who { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-coin-who b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.tb-coin-who small { font-size: 12px; line-height: 1.3; color: #5c4a30; }
.tb-coin-who small.is-stale { color: #a8392b; font-weight: 600; }
.tb-coin-v { flex-shrink: 0; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #3d2f1d; }
.tb-coin-v.is-gold { font-size: 15px; font-weight: 700; color: #231a10; }

/* Documents */
.tb-doc { display: flex; align-items: center; border-top: 1px solid #ddd0ab; }
.tb-doc:first-child { border-top: 0; }
.tb-doc-open { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 0 4px 0 12px; color: #231a10; text-decoration: none; }
.tb-doc-open .cx-icon { flex-shrink: 0; color: #845c0f; }
.tb-doc-open b { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.tb-doc-open small { flex-shrink: 0; max-width: 40%; overflow: hidden; font-size: 13px; color: #5c4a30; text-overflow: ellipsis; white-space: nowrap; }
.tb-screen button.tb-doc-edit { display: grid; place-items: center; flex-shrink: 0; width: 44px; min-height: 44px !important; margin-right: 4px; padding: 0; border: 0; background: none; color: #6e5b40; cursor: pointer; }

/* The DM Screen */
.group-strip .gs-sub { margin: 0; font-size: 13px; color: #bfae8c; }
.group-strip .gs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.gs-tile { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; border: 1px solid #4a3a28; background: #1f1712; color: #f1e4c4; }
.gs-tile b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-tile small { font-size: 12px; color: #bfae8c; }
body.shell-condensed .group-strip .gs-sub, body.shell-condensed .group-strip .gs-tiles { display: none; }
.tb-dossiers { display: flex; flex-direction: column; gap: 8px; }
.tb-screen button.tb-dossier { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px !important; padding: 8px 12px; border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; color: #231a10; text-align: left; cursor: pointer; }
.tb-dossier-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-dossier-text b { font-size: 16px; }
.tb-dossier-text small { font-size: 13px; color: #5c4a30; }
.tb-counts { display: flex; gap: 6px; flex-shrink: 0; }
.tb-count { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #e0d2ac; text-align: center; font-size: 12px; font-weight: 700; color: #3d2f1d; }
.tb-dm-screen .compact-board { margin-top: 4px; }

/* Person and Dossier pages */
#modal:has(.tb-page) .modal-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tb-page { display: flex; flex-direction: column; gap: 10px; margin: -4px -4px 0; color: #231a10; }
.tb-page-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 0 2px 8px; border-bottom: 1px solid #ddd0ab; font-size: 16px; font-weight: 700; }
.tb-page-head > :first-child { justify-self: start; }
.tb-person { display: flex; align-items: center; gap: 16px; padding-top: 4px; }
.tb-big { display: flex; flex-direction: column; }
.tb-big b { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tb-big small { font-size: 13px; color: #5c4a30; }
.tb-who-big { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-who-big b { font-size: 22px; }
.tb-who-big small { font-size: 14px; color: #5c4a30; }
.tb-before { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #b9a77f; }
.tb-before > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-before b { font-size: 15px; }
.tb-before small { font-size: 13px; color: #5c4a30; }
#modal button.tb-sess { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px !important; padding: 8px 12px; border: 0; border-top: 1px solid #ddd0ab; border-radius: 0; background: none; box-shadow: none; color: #231a10; text-align: left; cursor: pointer; }
#modal button.tb-sess:first-child { border-top: 0; }
.tb-sess-what { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-sess-what b { font-size: 15px; }
.tb-sess-what small { font-size: 12px; color: #5c4a30; }
.tb-sess-n { flex-shrink: 0; font-size: 14px; white-space: nowrap; color: #3d2f1d; }
.tb-sess-n .dice-person-n { display: inline; color: inherit; }
.tb-sess-n b.dice-person-n { color: #231a10; }
#modal button.tb-secret { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px !important; padding: 8px 12px; border: 0; border-top: 1px solid #ddd0ab; border-radius: 0; background: none; box-shadow: none; color: #231a10; text-align: left; cursor: pointer; }
#modal button.tb-secret:first-child { border-top: 0; }
.tb-secret .cx-icon { flex-shrink: 0; color: #845c0f; }
.tb-secret > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-secret b { font-size: 15px; }
.tb-secret small { font-size: 12px; color: #5c4a30; }
.tb-hooks { display: flex; flex-direction: column; gap: 8px; }
#modal button.tb-hook { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 52px !important; padding: 10px 12px; border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; box-shadow: none; color: #231a10; text-align: left; cursor: pointer; }
.tb-hook b { font-size: 15px; }
.tb-hook small { font-size: 13px; line-height: 1.4; color: #3d2f1d; }
.tb-tip { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #b9a77f; font-size: 13px; line-height: 1.4; color: #5c4a30; }

@layer editor-pilot {
  @media (max-width: 699px) {
    .modal-backdrop.active:has(> #modal .tb-page) { align-items: stretch !important; padding: 0 !important; }
    #modal:has(.tb-page) { width: 100% !important; max-width: none !important; max-height: none !important; min-height: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  }
}

/* Desktop (design/table/Desktop) */
#deskHead button.tb-head-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #c18a2a; color: #1f1712; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dk-next { display: flex; flex-direction: column; gap: 1px; margin: 8px 12px 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid #4a3a28; background: #2a1e15; color: #f1e4c4; font: inherit; text-align: left; cursor: pointer; }
.dk-next small { font-size: 12px; font-weight: 700; color: #bfae8c; }
.dk-next b { font-size: 15px; }
.dk-next span { font-size: 13px; color: #bfae8c; }
@media (min-width: 900px) {
  .tb-screen[data-view="dice"] .tb-dice-top { display: none; }
  .tb-dice-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .tb-dice-body .tb-bars { height: 220px; }
  .tb-dice-body .dice-backlog-btn { grid-column: 2; }
  .tb-party { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tb-screen[data-view="coins"] .tb-list, .tb-screen[data-view="documents"] .tb-list, .tb-screen[data-view="nextgame"] { max-width: 720px; }
  .tb-dm-screen .tb-sec .tb-btn { display: none; }
  .tb-dm-screen .tb-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}