/* A garnet and porcelain gallery, deliberately independent of the old row table. */
.tt-page { --tt-panel:#261f27; --tt-deep:#1d181f; --tt-card:#392c35; --tt-line:#60454f; --tt-text:#f3e5d4; --tt-muted:#c5adb4; --tt-accent:#e3b8b6; --tt-active:#793449; --tt-glow:#8b405128; padding:36px 0 10px; }
.tt-page svg { width:19px; height:19px; flex-shrink:0; }
.tt-heading { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:0 8px 30px; }
.tt-eyebrow { display:flex; align-items:center; gap:12px; color:var(--tt-muted); font-size:12px; font-weight:600; letter-spacing:1.4px; }
.tt-eyebrow i { display:block; width:24px; height:1px; background:#a76c78; }
.tt-heading h1 { margin:22px 0 20px; color:var(--tt-text); font:400 clamp(40px,4vw,56px)/1.08 Georgia,serif; letter-spacing:-1.6px; }
.tt-heading h1 em { color:var(--tt-accent); font-weight:400; }
.tt-heading p { margin:0; color:var(--tt-muted); font-size:15px; line-height:1.85; }
.tt-heading-note { padding:20px 32px; border-left:1px solid var(--tt-line); min-width:245px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.tt-heading-note > span { color:var(--tt-accent); font-size:33px; line-height:1; }
.tt-heading-note strong { font:400 24px/1.4 Georgia,serif; color:var(--tt-text); }
.tt-heading-note .small-link { font-size:13px; color:var(--tt-muted); }
.tt-workspace { border:1px solid var(--tt-line); border-radius:18px; background:linear-gradient(120deg,var(--tt-glow),transparent 60%),var(--tt-panel); box-shadow:0 12px 35px #05030712; overflow:hidden; }
.tt-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; gap:16px; border-bottom:1px solid var(--tt-line); }
.tt-modes { display:flex; padding:5px; border:1px solid var(--tt-line); border-radius:12px; background:var(--tt-deep); gap:4px; }
.tt-modes button { display:flex; align-items:center; gap:9px; border:0; padding:12px 18px; border-radius:8px; font-size:14px; font-weight:600; background:transparent; color:var(--tt-muted); }
.tt-modes button.active { background:var(--tt-active); color:#fff1e2; box-shadow:0 3px 12px #0e071526; }
.tt-collection { background:transparent; border:0; color:var(--tt-text); font-size:13px; display:flex; align-items:center; gap:9px; }
.tt-collection b { display:grid; place-items:center; padding:4px 8px; min-width:26px; background:var(--tt-deep); border:1px solid var(--tt-line); border-radius:7px; color:var(--tt-accent); font-size:12px; }
.tt-filters { display:grid; grid-template-columns:minmax(200px,1.7fr) 1fr 1fr auto; gap:18px; padding:22px; align-items:end; }
.tt-filters .filter-caption { color:var(--tt-muted); font-size:13px; }
.tt-filters .search-box,.tt-filters .sd-select-wrap select { background:var(--tt-deep); border-color:var(--tt-line); color:var(--tt-text); height:49px; font-size:14px; }
.tt-filters input::placeholder { color:var(--tt-muted); opacity:.85; }
.tt-filters .search-box:focus-within { background:var(--tt-deep); border-color:var(--tt-accent); }
.tt-owned { display:flex; align-items:center; gap:10px; min-height:49px; color:var(--tt-muted); font-size:13px; line-height:1.5; cursor:pointer; }
.tt-owned input { width:18px; height:18px; margin:0; accent-color:#ad6379; }
.tt-rank-bar { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:0 22px 22px; }
.tt-ranks { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.tt-ranks button { min-height:36px; min-width:38px; padding:7px 12px; border:1px solid var(--tt-line); border-radius:8px; background:transparent; font-size:13px; font-weight:600; color:var(--tt-muted); }
.tt-ranks button:first-child { padding-inline:15px; }
.tt-ranks button:hover { border-color:var(--tt-accent); color:var(--tt-text); }
.tt-ranks button.active { color:var(--tt-text); background:var(--tt-deep); border-color:var(--tt-accent); box-shadow:inset 0 -2px var(--rank-color,var(--tt-accent)); }
.tt-mode-note { font-size:12px; color:var(--tt-muted); text-align:right; line-height:1.7; }
.tt-board-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:38px 2px 0; }
.tt-board-heading h2 { font:400 29px/1.3 Georgia,serif; color:var(--tt-text); margin:0 0 8px; }
.tt-board-heading p { font-size:14px; color:var(--tt-muted); margin:0; line-height:1.8; }
.tt-mobile-roles { display:none; }
.tt-result-count { color:var(--tt-muted); font-size:13px; margin:17px 2px 18px; display:flex; gap:7px; align-items:center; }
.tt-result-count strong { color:var(--tt-text); font-size:14px; }
.tt-result-count > span { opacity:.6; }
.tt-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:20px; }
.tt-lane { min-width:0; border:1px solid var(--tt-line); background:var(--tt-panel); border-radius:16px; overflow:hidden; }
.tt-lane-header { display:flex; align-items:center; gap:13px; padding:22px 20px 18px; background:linear-gradient(130deg,var(--tt-glow),transparent); }
.tt-role-icon { display:grid; place-items:center; background:#71304444; border:1px solid #a56c7a66; width:44px; height:44px; border-radius:13px; color:var(--tt-accent); flex-shrink:0; }
.tt-lane-header h2 { font-size:22px; font-weight:650; letter-spacing:-.5px; color:var(--tt-text); margin:0 0 5px; }
.tt-lane-header p { font-size:12px; color:var(--tt-muted); margin:0; line-height:1.5; }
.tt-lane-count { color:var(--tt-muted); font-size:13px; font-weight:500; margin-left:auto; }
.tt-lane-intro { padding:0 20px 20px; border-bottom:1px solid var(--tt-line); }
.tt-lane-intro p { font-size:13px; color:var(--tt-muted); line-height:1.8; margin:0; min-height:46px; }
.tt-lane-intro button { display:flex; width:100%; justify-content:center; align-items:center; gap:8px; margin:16px 0 0; padding:10px; min-height:42px; border:1px dashed #a16e7d; color:var(--tt-accent); border-radius:9px; background:var(--tt-deep); font-size:13px; }
.tt-rank-groups { padding:0 17px 8px; }
.tt-rank-group { padding:20px 0; border-bottom:1px solid var(--tt-line); transition:background .15s,outline .15s; }
.tt-rank-group:last-child { border-bottom:0; }
.tt-rank-heading { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.tt-rank-heading h3 { display:grid; place-items:center; font-size:19px; font-weight:700; line-height:1; margin:0; min-width:40px; min-height:32px; border:1px solid color-mix(in srgb,var(--rank-color) 60%,transparent); border-radius:7px; color:var(--rank-color); background:color-mix(in srgb,var(--rank-color) 9%,transparent); }
.tt-rank-heading > span { color:var(--tt-muted); font-size:12px; }
.tt-rank-heading small { margin-left:auto; color:var(--tt-muted); font-size:12px; }
.tt-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; align-items:start; }
.tt-card { min-width:0; display:block; position:relative; padding:0; width:100%; text-align:left; border:1px solid #78606c55; border-radius:9px; overflow:hidden; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--el) 12%,transparent),transparent 75%),var(--tt-card); color:var(--tt-text); transition:transform .2s,border-color .2s,box-shadow .2s; isolation:isolate; }
.tt-card:hover { transform:translateY(-3px); border-color:var(--tt-accent); box-shadow:0 8px 18px #05030830; }
.tt-portrait { display:block; height:auto; aspect-ratio:1; max-height:116px; position:relative; overflow:hidden; }
.tt-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .3s; }
.tt-card:hover img { transform:scale(1.035); }
.tt-card::after { display:none; }
.tt-element { position:absolute; top:5px; left:5px; z-index:2; display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#211b24c9; border:1px solid #ffffff1c; color:var(--el); }
.tt-element svg { width:13px; height:13px; }
.tt-card-caption { display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; padding:6px 6px 7px; min-height:44px; background:var(--tt-deep); }
.tt-card-caption strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.35; font-weight:600; color:#fff2e5; overflow-wrap:anywhere; }
.tt-card-caption small { display:block; font-size:11px; line-height:1.3; margin-top:2px; color:#dec8cf; }
.tt-edit { position:absolute; top:5px; right:5px; z-index:2; background:#321c2bd4; border:1px solid #bd839644; color:#f0cad8; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-size:12px; }
.tt-personal { border-color:#b88a9b; }
.tt-lane-empty { padding:38px 8px; color:var(--tt-muted); text-align:center; font-size:13px; line-height:1.9; }
.tt-drop-hint { grid-column:1/-1; text-align:center; margin:0; color:var(--tt-muted); border:1px dashed var(--tt-line); border-radius:9px; padding:20px 8px; font-size:12px; }
.tt-rank-group.dg-drop-active { background:var(--tt-glow); outline:2px dashed var(--tt-accent); outline-offset:7px; border-radius:4px; }
.tt-card.dg-dragging { opacity:.45; }
.tt-source { margin-top:28px; border:1px solid var(--tt-line); border-radius:14px; padding:23px 25px; background:var(--tt-panel); }
.tt-source > div { display:flex; align-items:center; gap:18px; }
.tt-source-mark { font-size:30px; color:var(--tt-accent); }
.tt-source strong { font:400 21px/1.5 Georgia,serif; color:var(--tt-text); }
.tt-source p { font-size:13px; line-height:1.9; color:var(--tt-muted); margin:5px 0 0; }
.tt-source > p { border-top:1px solid var(--tt-line); padding-top:15px; margin-top:17px; display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap; }
.tt-source a { color:var(--tt-accent); text-decoration:underline; text-underline-offset:4px; }
.tt-tier-pick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:24px; }
.tt-tier-pick button { background:#31252d; border:1px solid #7d5968; color:#efddd6; border-radius:10px; min-height:90px; padding:15px 6px; }
.tt-tier-pick strong { display:block; font-size:25px; color:var(--rank-color); margin-bottom:7px; }
.tt-tier-pick span { font-size:12px; }
.tt-tier-pick button[aria-pressed="true"] { outline:2px solid #deb2bf; outline-offset:2px; }
:root[data-theme="light"] .tt-page { --tt-panel:#fffdf8; --tt-deep:#f7eee9; --tt-card:#e6dad4; --tt-line:#d4bfc3; --tt-text:#422633; --tt-muted:#74525f; --tt-accent:#87354e; --tt-active:#87354e; --tt-glow:#f1dce4a1; }
:root[data-theme="light"] .tt-heading h1,:root[data-theme="light"] .tt-heading-note strong,:root[data-theme="light"] .tt-board-heading h2,:root[data-theme="light"] .tt-lane-header h2 { color:var(--tt-text); }
:root[data-theme="light"] .tt-heading h1 em { color:var(--tt-accent); }
:root[data-theme="light"] .tt-page p,:root[data-theme="light"] .tt-lane-header p,:root[data-theme="light"] .tt-source p { color:var(--tt-muted); }
:root[data-theme="light"] .tt-modes button.active { color:#fff7ec; }
:root[data-theme="light"] .tt-role-icon { background:#efdde5; border-color:#d5aebd; }
:root[data-theme="light"] .tt-card { border-color:#c3a7b1; box-shadow:0 4px 10px #7a4b5c13; }
:root[data-theme="light"] .tt-card::after { background:linear-gradient(transparent,#f6ebe61a 18%,#fff9f1ef 78%,#fffaf5); }
:root[data-theme="light"] .tt-card-caption strong { color:#462b38; }
:root[data-theme="light"] .tt-card-caption small { color:#795260; }
:root[data-theme="light"] .tt-element { background:#fffaf1ed; border-color:#d9c5c0; }
:root[data-theme="light"] .tt-edit { background:#8b3a52; color:#fff4ea; border-color:#a7677d; }
:root[data-theme="light"] .tt-rank-heading h3 { color:#654457; background:color-mix(in srgb,var(--rank-color) 22%,#fffaf4); border-color:color-mix(in srgb,var(--rank-color) 80%,#81626e); }
:root[data-theme="light"] .tt-tier-pick button { background:#fff9f3; border-color:#c7a3b2; color:#6b4254; }
:root[data-theme="light"] .tt-tier-pick strong { color:#70425c; }
@media(max-width:1100px) {
 .tt-lanes { gap:14px; }
 .tt-lane-header { padding:20px 15px 16px; gap:10px; }
 .tt-lane-header h2 { font-size:20px; }
 .tt-role-icon { width:37px; height:39px; border-radius:10px; }
 .tt-lane-intro { padding-inline:15px; }
 .tt-rank-groups { padding-inline:12px; }
 .tt-cards { gap:7px; }
 .tt-card-caption strong { font-size:12px; }
}
@media(max-width:1100px) {
 .tt-heading { gap:20px; }
 .tt-heading-note { min-width:190px; padding:15px 0 15px 22px; }
 .tt-heading-note strong { font-size:21px; }
 .tt-filters { grid-template-columns:minmax(180px,1.4fr) 1fr 1fr; gap:15px; }
 .tt-owned { grid-column:1/-1; min-height:30px; }
 .tt-owned br { display:none; }
 .tt-lanes { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; scrollbar-width:thin; scrollbar-color:#9b6176 transparent; padding:0 0 15px; }
 .tt-lane { flex:0 0 calc(50% - 9px); scroll-snap-align:start; }
 .tt-mobile-roles { display:flex; gap:8px; margin:20px 0 0; }
 .tt-mobile-roles button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 8px; min-height:44px; font-size:13px; font-weight:600; color:var(--tt-muted); background:var(--tt-panel); border:1px solid var(--tt-line); border-radius:9px; }
 .tt-mobile-roles button[aria-pressed="true"] { color:#fff3e8; background:#793449; border-color:#ba8294; }
}
@media(max-width:560px) {
 .tt-page { padding-top:30px; }
 .tt-heading { display:block; padding:0 2px 28px; }
 .tt-heading h1 { font-size:42px; letter-spacing:-1.2px; margin:20px 0 17px; }
 .tt-eyebrow { font-size:11px; letter-spacing:.7px; gap:9px; }
 .tt-eyebrow i { width:14px; }
 .tt-heading p { font-size:14px; line-height:1.85; }
 .tt-desktop-break { display:none; }
 .tt-heading-note { display:none; }
 .tt-workspace { border-radius:14px; }
 .tt-toolbar { padding:14px; flex-wrap:wrap; gap:14px; }
 .tt-modes { flex:1; }
 .tt-modes button { flex:1; padding:10px 8px; font-size:12px; justify-content:center; gap:6px; white-space:nowrap; }
 .tt-modes svg { width:16px; height:16px; }
 .tt-collection { width:100%; font-size:13px; justify-content:flex-end; }
 .tt-filters { grid-template-columns:1fr 1fr; padding:16px 14px; gap:15px 10px; }
 .tt-filters .sd-search-field { grid-column:1/-1; }
 .tt-filters .sd-select-wrap select { padding-left:11px; font-size:13px; }
 .tt-filters .filter-caption { font-size:12px; margin-bottom:7px; }
 .tt-rank-bar { display:block; padding:0 14px 17px; }
 .tt-ranks { gap:6px; }
 .tt-ranks button { padding:7px 9px; min-width:32px; font-size:12px; }
 .tt-ranks button:first-child { padding-inline:10px; }
 .tt-mode-note { display:block; margin-top:13px; text-align:left; font-size:12px; }
 .tt-board-heading { margin-top:28px; align-items:start; }
 .tt-board-heading h2 { font-size:27px; }
 .tt-board-heading p { font-size:13px; line-height:1.8; }
 .tt-board-heading .small-link { max-width:95px; font-size:12px; }
 .tt-lane { flex-basis:calc(100% - 18px); }
 .tt-lane-header { padding:20px 18px 15px; }
 .tt-lane-header h2 { font-size:23px; }
 .tt-lane-header p { font-size:13px; }
 .tt-role-icon { width:43px; height:43px; }
 .tt-lane-intro { padding:0 18px 18px; }
 .tt-lane-intro p { min-height:0; }
 .tt-rank-groups { padding-inline:14px; }
 .tt-cards { gap:7px; }
 .tt-card-caption strong { font-size:12px; }
 .tt-source { padding:20px 18px; }
 .tt-source > div { align-items:flex-start; gap:12px; }
 .tt-source strong { font-size:20px; }
 .tt-source p { font-size:12px; }
 .tt-source > p { gap:7px; }
 .tt-result-count { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .tt-card,.tt-portrait img { transition:none; } }

@media(min-width:1101px) { .tt-lane { overflow:clip; } .tt-lane-header { position:sticky; top:var(--header-offset); z-index:5; background:linear-gradient(130deg,var(--tt-glow),transparent),var(--tt-panel); border-bottom:1px solid var(--tt-line); } }
@media(max-width:1100px) { .tt-mobile-roles { position:sticky; top:var(--header-offset); z-index:6; padding:9px 0; background:var(--bg); } }
:root[data-theme="light"] .tt-element { color:color-mix(in srgb,var(--el) 75%,#2f1b2b); }

@media(min-width:561px) and (max-width:720px) { .tt-lane { flex-basis:calc(100% - 18px); } }