/* The Table: party plates, a dock that appears once players are chosen, and the chronicle. Tokens only. */
#table-view{--rail:218px;padding:26px 0 120px}
.tb-head{display:flex;justify-content:flex-end;gap:10px;margin-bottom:22px}

/* Plates: the party as illustrations in a book. Answers land on the plate itself. */
/* Always four plates to a row, so a plate is the same size whatever the party size. */
.tb-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tb-plate{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.tb-plate:focus-visible{outline:2px solid var(--lapis);outline-offset:4px}
.tb-art{position:relative;display:block;aspect-ratio:3/4;background:var(--foxed);border:1px solid var(--rule);box-shadow:var(--frame);overflow:hidden}
.tb-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tb-plate:hover .tb-art img{transform:scale(1.03)}
.tb-initial{display:grid;place-items:center;height:100%;font:400 64px var(--font-display);color:var(--text-soft)}
.tb-art{transition:border-color .15s,box-shadow .15s}
.tb-plate:hover .tb-art,.tb-plate[aria-pressed=true] .tb-art{border-color:var(--vermilion);box-shadow:inset 0 0 0 4px var(--leaf),inset 0 0 0 5px var(--vermilion),0 0 0 1px var(--vermilion)}
.tb-band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sheet);border-top:1px solid var(--rule-strong);font-size:15px;color:var(--text)}
.tb-band .seal{--seal-size:13px}
.tb-band b{font-size:18px}
.tb-w{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-now{display:flex;align-items:center;gap:9px;white-space:normal;background:var(--sheet);border-top:1px solid var(--rule-strong);border-left:3px solid var(--gold-leaf);color:var(--text);font-style:normal;font-weight:600;line-height:1.25;min-height:44px}
.tb-now::before{content:"\2726";color:var(--gold);flex:none;font-size:17px}
.tb-now[data-tb-letter]{cursor:pointer}.tb-read{margin-left:auto;font-weight:400}
.tb-pass,.tb-fail,.tb-wait{font:700 12px var(--font-label);letter-spacing:.08em;text-transform:lowercase}
.tb-pass{color:var(--verdigris)}.tb-fail{color:var(--wound)}.tb-wait{color:var(--gold);font-style:italic}
.tb-caption{display:block;padding:12px 2px 0}
.tb-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:italic 500 21px var(--font-text)}
.tb-name small{font:700 12px var(--font-label);letter-spacing:.08em;text-transform:lowercase;color:var(--text-soft);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-plate[aria-pressed=true] .tb-name{color:var(--vermilion)}
.tb-hp{display:block;height:3px;background:var(--rule);margin:7px 0 5px}
.tb-hp span{display:block;height:100%;background:var(--verdigris)}
.tb-hp .mid{background:var(--gold-leaf)}.tb-hp .low{background:var(--wound)}
.tb-vit{display:block;font-size:14px;color:var(--text-soft)}
.tb-vit b{color:var(--text);font-weight:600}


/* Chronicle: the last eight things, the rest folded away. */
.tb-chronicle{margin-top:44px;border-top:1px solid var(--rule-strong);padding-top:22px}
.tb-chronicle h2{font-size:28px;margin:2px 0 6px}
.tb-chron{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.tb-chron li{break-inside:avoid;display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule)}
.tb-chron p{margin:0}
.tb-chron-icon{color:var(--text-soft);font-size:16px;line-height:1.4;text-align:center}
.tb-chron li.open .tb-chron-icon{color:var(--gold)}
.tb-chron-what{font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-chron .tb-secret .tb-chron-what,.tb-chron .tb-note .tb-chron-what{font-style:italic}
.tb-chron-meta{font-size:14px;color:var(--text-soft);margin-top:2px!important}
.tb-chron-res{margin-top:5px!important;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px}
.tb-chron-res .seal{--seal-size:14px}
.tb-res{display:inline-flex;align-items:baseline;gap:4px;font-size:15px;color:var(--text-soft)}
.tb-res b{color:var(--text);font-size:16px}
.tb-more{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;font-size:15px}

/* Dock: floats in only while someone is chosen. Floating things may cast --lift. */
.tb-dock{position:fixed;left:calc(var(--rail) + (100% - var(--rail)) / 2);bottom:24px;z-index:6;transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .22s ease-out,visibility .22s;display:flex;align-items:center;gap:6px;max-width:calc(100vw - var(--rail) - 32px);background:var(--sheet);border:1px solid var(--rule-strong);border-radius:var(--radius);box-shadow:var(--lift);padding:8px 8px 8px 12px}
.tb-dock.up{transform:translate(-50%,0);visibility:visible}
.tb-faces{display:flex;flex:none}
.tb-faces img{width:32px;height:32px;object-fit:cover;border:2px solid var(--sheet);margin-left:-8px}
.tb-faces img:first-child{margin-left:0}
.tb-for{font:italic 17px var(--font-text);margin:0 10px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-for b{color:var(--vermilion);font-weight:500}
.tb-sep{width:1px;align-self:stretch;background:var(--rule);margin:0 4px;flex:none}
.tb-act{all:unset;cursor:pointer;flex:none;padding:9px 14px;font:600 16px var(--font-text);border-radius:var(--radius);white-space:nowrap;color:var(--text)}
.tb-act:hover{background:var(--foxed)}
.tb-act:focus-visible{outline:2px solid var(--lapis)}
.tb-act[aria-pressed=true]{background:var(--text);color:var(--paper)}
.tb-act i{font-style:normal;opacity:.7;margin-right:6px}
.tb-x{color:var(--text-soft);padding:9px 10px}

/* Composer: a sheet that rises above the dock. */
.tb-sheet{position:fixed;left:calc(var(--rail) + (100% - var(--rail)) / 2);bottom:92px;transform:translateX(-50%);z-index:5;width:min(660px,calc(100vw - var(--rail) - 32px));max-height:calc(100vh - 140px);overflow:auto;background:var(--sheet);border:1px solid var(--rule-strong);border-radius:var(--radius);box-shadow:var(--lift);padding:24px;animation:tb-rise .18s ease-out}
@keyframes tb-rise{from{opacity:0;transform:translate(-50%,10px)}}
.tb-sheet h3{margin:0 0 22px;font-size:17px;line-height:1.4}
.tb-sheet h3 b{display:block;color:var(--vermilion);font-weight:500;font-size:22px;margin-top:3px}
.tb-sheet textarea{width:100%;font-size:18px!important;line-height:1.5;padding:10px!important;min-height:120px}
.tb-sheet footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule)}
.tb-sheet>input,#tb-reveal-pane>input{width:100%;margin-top:10px}
.tb-pick-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.tb-seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--radius)}
.tb-seg button{border:0;background:transparent;color:var(--text-soft);font:700 14px var(--font-label);letter-spacing:.06em;text-transform:lowercase;padding:7px 12px;cursor:pointer}
.tb-seg button+button{border-left:1px solid var(--rule)}
.tb-seg button[aria-pressed=true]{background:var(--text);color:var(--paper)}
.tb-again{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tb-chip{border:1px solid var(--rule);background:transparent;color:var(--text);font:500 15px var(--font-text);padding:5px 10px;border-radius:var(--radius-tag);cursor:pointer}
.tb-chip:hover{background:var(--foxed)}
.tb-chip[aria-pressed=true]{border-color:var(--vermilion);color:var(--vermilion);background:var(--vermilion-wash)}
.tb-roll-fields{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 90px;gap:18px;margin-top:24px}
.tb-roll-fields>label{display:grid;gap:8px;min-width:0;align-content:start}
.tb-roll-fields .label{display:flex;align-items:center;gap:7px;min-height:20px}
.tb-roll-fields .seal{--seal-size:14px}
.tb-roll-fields select,.tb-roll-fields input{width:100%;min-width:0;height:44px;padding:8px 10px!important;font-size:17px!important;box-sizing:border-box}
.tb-roll-fields input{text-align:center}
.tb-secret-roll{display:flex;gap:8px;align-items:center;font-size:16px;color:var(--text);margin:0 auto 0 0;white-space:nowrap}
.tb-secret-roll input{width:18px;height:18px;margin:0}
.tb-sheet-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.tb-drop{display:grid;place-items:center;gap:4px;border:1px dashed var(--rule-strong);border-radius:var(--radius);padding:22px;color:var(--text-soft);font-style:italic;cursor:pointer;text-align:center}
.tb-drop:hover{background:var(--foxed)}
.tb-lib{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto;margin-top:10px}
#tb-reveal-pane{margin-top:14px}
.tb-drop b{font-style:normal;color:var(--text);font-weight:600}

/* Player side: a revealed PDF handout. */
.reveal-pdf{width:100%;height:70vh;border:1px solid var(--rule);background:var(--sheet)}

@media(max-width:900px){#table-view{--rail:63px}.tb-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-chron{columns:1}.tb-act i{margin-right:0}.tb-act{font-size:0;padding:9px 12px}.tb-act i{font-size:18px;opacity:1}.tb-for{display:none}}
@media(max-width:610px){#table-view{--rail:0px}.tb-dock{bottom:12px}.tb-sheet{bottom:76px}.tb-sentence{font-size:18px}}

@media(max-width:540px){.tb-sheet{padding:20px}.tb-roll-fields{grid-template-columns:minmax(0,1fr) 90px;gap:16px}.tb-roll-fields>label:first-child{grid-column:1/-1}.tb-again{margin-left:0}.tb-sheet footer{flex-wrap:wrap}.tb-sheet-actions{gap:8px}}
@media(min-width:651px){#table-view{--rail:var(--campaign-sidebar-width)}}
@media(max-width:650px){#table-view{--rail:0px}}