/* Common Era Dev Portal styles. The chrome is a plain, dense working tool: near-neutral surfaces with a trace of warmth, one accent, Public Sans throughout, small consistent radii, no decorative texture. All colour comes from tokens defined once below, with a dark set swapped in via [data-theme="dark"] on (the sidebar toggle writes it, remembered per browser). COLOUR HAS A JOB. The accent marks selection and primary actions. The attention colour (--attn) marks work that is unfinished or waiting on somebody - unreviewed cards, art that is still a placeholder, deck copy that has not been written. Everything else stays neutral. The CARDS keep their own face: `.card` and the hand-size `.hcard` render on --card-face with --card-ink, because the point of the database is seeing a card as it really looks. Only their presentation on the page (grid spacing, selection ring, drop shadow) is chrome and follows the tokens. */ :root{ /* surfaces, lightest to heaviest */ --bg:#ECEBE9; /* app canvas - deliberately darker than the sidebar */ --surface:#FEFEFD; /* panels, inputs, rows */ --surface-2:#F4F3F1; /* hover fills, inset wells */ --surface-3:#E9E8E5; /* pressed / heavier wells */ --sidebar:#F9F8F7; /* lines */ --border:#E3E1DE; --border-strong:#C9C6C1; /* type */ --text:#1B1A18; --text-2:#63615C; --text-3:#918E88; /* the accent is a medium grey: selection and primary actions read as neutral, so ATTENTION amber is the only colour that carries meaning */ --accent:#6E6B65; --accent-hover:#57544F; --accent-soft:rgba(110,107,101,.13); --accent-on:#FFFFFF; /* ATTENTION - anything unfinished or waiting on someone */ --attn:#B4640E; --attn-soft:rgba(180,100,14,.12); /* semantic */ --danger:#B3402E; --danger-soft:rgba(179,64,46,.10); --success:#4A6B3A; --review:#B4640E; /* unreviewed marker - an attention state */ --shadow-card:0 1px 2px rgba(28,26,22,.09),0 4px 12px rgba(28,26,22,.07); --shadow-pop:0 8px 28px rgba(28,26,22,.16); --font-ui:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif; --r:6px; --r-sm:4px; --r-lg:8px; /* the card face and its inks. The inks are darker than a white face strictly needs, so the small print stays readable at card size. */ --card-face:#FFFFFF; --card-ink:#14181D; --card-ink-2:#5A6270; --card-ink-3:#6E7783; /* Card geometry. The card in the game is 120x176; the tiles here are the same 1:1.4667 shape one step larger, because these carry a name, a type and a sector list as text and 120px wide left no room between them. */ --cw:135px; --ch:198px; --hwc:163px; --hwh:239px; } [data-theme="dark"]{ --bg:#282725; --surface:#2F2E2C; --surface-2:#373533; --surface-3:#403E3B; --sidebar:#232220; --border:#3F3D3A; --border-strong:#55524D; --text:#EAE9E6; --text-2:#A5A39E; --text-3:#7C7A75; --accent:#A9A69F; --accent-hover:#BEBBB4; --accent-soft:rgba(169,166,159,.16); --accent-on:#1A1917; --attn:#E0954A; --attn-soft:rgba(224,149,74,.16); --danger:#EF8878; --danger-soft:rgba(239,136,120,.14); --success:#8FC47A; --review:#E0954A; --shadow-card:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.38); --shadow-pop:0 10px 34px rgba(0,0,0,.6); } *{box-sizing:border-box;} /* The hidden attribute means hidden, whatever a later rule says. Its default comes from the browser stylesheet, so any id rule setting display beats it - which has silently kept a view on screen three times in this codebase now. Said once here, with weight, so it cannot happen again. */ [hidden]{display:none !important;} body{margin:0;background:var(--bg);font-family:var(--font-ui);font-size:14px; font-variant-numeric:tabular-nums;font-synthesis:none;color:var(--text); display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;} /* ---- thin unobtrusive scrollbars ---- */ *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background-color:var(--text-3);background-clip:padding-box;} ::-webkit-scrollbar-corner{background:transparent;} /* ============================ sidebar ============================ */ #sidebar{width:244px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border); display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;font-family:var(--font-ui);} .sb-brand{padding:24px 18px 20px;border-bottom:1px solid var(--border);} .sb-brand-title{font-size:21px;font-weight:700;letter-spacing:.01em;color:var(--text);line-height:1.2;} .sb-brand-sub{font-size:12px;font-weight:500;color:var(--text-3);margin-top:2px;letter-spacing:.02em;} /* destinations: quiet rows, accent bar + tinted fill on the active one */ .sb-mainnav{padding:12px 10px 14px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border);} .sb-nav-btn{width:100%;padding:13px 14px;border:none;border-radius:var(--r-sm);background:none;color:var(--text-2); font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;text-align:left; transition:background .1s,color .1s;position:relative;} .sb-nav-btn:hover{background:var(--surface-2);color:var(--text);} .sb-nav-btn.active{background:var(--accent-soft);color:var(--accent);font-weight:600;} .sb-nav-btn.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent);} /* remembered card/deck sub-items under the nav */ .sb-subnav{display:flex;flex-direction:column;} .sb-subitem{width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 24px;border:none;border-radius:var(--r-sm); background:none;color:var(--text-3);font-family:inherit;font-size:13px;cursor:pointer;text-align:left;} .sb-subitem:hover{background:var(--surface-2);color:var(--text);} .sb-subitem.active{background:var(--surface-2);color:var(--text);font-weight:500;} .sb-sub-dot{width:4px;height:4px;border-radius:50%;background:var(--text-3);flex-shrink:0;} .sb-subitem.active .sb-sub-dot{background:var(--accent);} .sb-sub-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sb-section{padding:16px 18px;border-bottom:1px solid var(--border);} .sb-label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.03em;} /* collapsible section headers with a drawn chevron */ .sb-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;} .sb-head:hover .sb-label{color:var(--text);} .sb-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s;flex-shrink:0;} .sb-section.collapsed .sb-caret{transform:rotate(-45deg);} .sb-body{margin-top:9px;} .sb-section.collapsed .sb-body{display:none;} .sb-input{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); padding:6px 9px;font-family:inherit;font-size:12.5px;color:var(--text);outline:none; transition:border-color .12s,box-shadow .12s;} .sb-input:hover{border-color:var(--text-3);} .sb-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .sb-input::placeholder{color:var(--text-3);} select.sb-input{cursor:pointer;} .sb-sortrow{display:flex;gap:6px;align-items:stretch;} .sb-util-btn{padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface); color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-align:center; transition:background .1s,color .1s,border-color .1s;} .sb-util-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3);} .fchips{display:flex;gap:6px;align-items:center;} .fchip{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--border-strong);cursor:pointer; opacity:.4;transition:opacity .1s,box-shadow .1s;padding:0;} .fchip:hover{opacity:.75;} .fchip.on{opacity:1;box-shadow:0 0 0 2px var(--sidebar),0 0 0 3.5px var(--accent);} /* filter tags */ .sb-tags{display:flex;flex-wrap:wrap;gap:5px;} .sb-tag{padding:4px 9px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface); color:var(--text-2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer; transition:background .1s,color .1s,border-color .1s;} .sb-tag:hover{background:var(--surface-2);color:var(--text);} .sb-tag.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} /* a quiet divider inside a tag group (core sets | expansions) */ .sb-taggroup{width:100%;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em; color:var(--text-3);margin:6px 0 1px;} /* toggle switches */ .tgl-row{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;} .tgl{width:30px;height:18px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-strong); position:relative;flex-shrink:0;transition:background .15s,border-color .15s;} .tgl-knob{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface); box-shadow:0 1px 2px rgba(28,26,22,.3);transition:left .15s;} .tgl-row.on .tgl-knob{left:14px;} .tgl-row.on .tgl{background:var(--accent);border-color:var(--accent);} .tgl-row.on[data-ct="burn"] .tgl{background:#C0392B;border-color:#C0392B;} .tgl-row.on[data-ct="mint"] .tgl{background:#1B7F3B;border-color:#1B7F3B;} .tgl-lbl{font-size:12.5px;font-weight:500;color:var(--text-2);} .tgl-row:hover .tgl-lbl{color:var(--text);} /* active filters */ .sb-clear{border:none;background:none;color:var(--danger);font-size:12px;font-weight:500;padding:2px 4px; border-radius:var(--r-sm);cursor:pointer;font-family:inherit;} .sb-clear:hover{background:var(--danger-soft);} .af-chips{display:flex;flex-wrap:wrap;gap:5px;} .af-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 12px;border-radius:99px; background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font-size:12.5px;font-weight:500;} .af-chip .fac-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;border:1px solid var(--border-strong);} .af-x{cursor:pointer;font-size:12px;line-height:1;color:var(--text-3);padding:1px 2px;font-style:normal;} .af-x:hover{color:var(--danger);} /* cost/stat min-max rows */ .stat-inrow{display:flex;align-items:center;gap:8px;} .stat-inrow span{font-size:12px;color:var(--text-3);flex-shrink:0;} .sb-range-val{color:var(--text-3);font-weight:400;margin-left:6px;} .sb-bottom{margin-top:auto;border-bottom:none;display:flex;flex-direction:column;gap:10px;padding-bottom:14px;} .sb-count{font-size:13px;font-weight:400;color:var(--text-3);line-height:1.5;white-space:pre-line;} .sb-mode{font-size:11px;color:var(--text-3);} /* light/dark switch: a small segmented control */ .sb-theme{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-sm);width:max-content;} .sb-theme button{border:none;background:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600; padding:6px 12px;border-radius:3px;cursor:pointer;letter-spacing:.02em;} .sb-theme button:hover{color:var(--text);} .sb-theme button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,26,22,.12);} /* signed-in user + sign out */ .sb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-3);} .sb-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sb-me{display:flex;align-items:center;gap:8px;border:none;background:none;padding:2px;border-radius:var(--r-sm); cursor:pointer;font:inherit;color:var(--text-2);min-width:0;flex:1;text-align:left;} .sb-me:hover{background:var(--surface-2);color:var(--text);} .sb-logout{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);border-radius:var(--r-sm); font-size:12px;padding:5px 10px;cursor:pointer;font-family:inherit;flex-shrink:0;} .sb-logout:hover{background:var(--surface-2);color:var(--text);} /* nav "soon" tag on sections that are not live yet */ .sb-nav-btn.soon{opacity:.75;} /* a destination the viewer cannot open wears a small padlock, not a word */ .sb-lock{float:right;display:inline-flex;align-items:center;color:var(--text-3);margin-left:8px;} .sb-lock svg{width:13px;height:13px;display:block;} .sb-nav-btn:hover .sb-lock{color:var(--text-2);} /* a count of outstanding work, on a nav destination */ .sb-badge{float:right;min-width:18px;text-align:center;font-size:10px;font-weight:700;line-height:16px; padding:0 5px;border-radius:99px;background:var(--attn-soft);color:var(--attn);border:1px solid var(--attn);} .sb-nav-btn.active .sb-badge{background:var(--attn);color:#fff;} /* ============================ content ============================ */ #content{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--font-ui);background:var(--bg);} main{padding:26px 30px 14px;} .grid-info{font-size:12px;font-weight:500;color:var(--text-3);padding:0 2px 14px;} /* ---- the card filter bar ---- Laid out like the game's card library: every control is a labelled group, and related controls share one segmented bar with internal dividers. Picking from a list drops a chip underneath; clicking the chip removes that filter. */ .fbar{position:relative;z-index:20;flex-shrink:0;padding:13px 30px 11px;background:var(--surface); border-bottom:1px solid var(--border);} .fb-wrap{display:flex;flex-wrap:wrap;gap:11px 20px;align-items:flex-start;} .fb-group{display:flex;flex-direction:column;gap:5px;} .fb-lbl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);} /* one segmented control: children sit flush, divided by hairlines */ .fb-bar{display:inline-flex;align-items:stretch;height:31px;border:1px solid var(--border-strong); border-radius:var(--r-sm);overflow:hidden;background:var(--surface);} .fb-bar>*{height:100%;border-radius:0;box-sizing:border-box;} .fb-bar>*+*{border-left:1px solid var(--border-strong);} .fb-bar select,.fb-bar input{border:none;background:transparent;color:var(--text);font-family:inherit; font-size:12px;padding:0 9px;outline:none;} .fb-bar select{cursor:pointer;} /* a pick-list: choosing a value adds a chip and the control resets */ .fb-pick{min-width:108px;} .fb-bar input{width:172px;} .fb-bar input::placeholder{color:var(--text-3);} .fb-bar select:focus,.fb-bar input:focus{background:var(--surface-2);} /* the suggestion list under a text filter. It hangs off the group, not the bar - the bar clips its children - and the group is the positioning box. */ .fb-group{position:relative;} .ac-list{position:absolute;top:100%;left:0;z-index:5;margin-top:4px;min-width:100%;max-width:320px; max-height:290px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-strong); border-radius:var(--r-sm);box-shadow:0 10px 26px rgba(0,0,0,.16);padding:3px;} .ac-list[hidden]{display:none;} .ac-item{display:flex;align-items:baseline;gap:9px;justify-content:space-between; padding:5px 9px;border-radius:var(--r-sm);font-size:12.5px;color:var(--text);cursor:pointer; white-space:nowrap;} .ac-item:hover,.ac-item.on{background:var(--accent-soft);} .ac-name{overflow:hidden;text-overflow:ellipsis;} .ac-sub{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);flex-shrink:0;} /* a text segment that toggles on and off */ .fb-segs{display:flex;} .fb-segs>*+*{border-left:1px solid var(--border-strong);} .fb-seg{display:flex;align-items:center;justify-content:center;padding:0 11px;font-size:10.5px;font-weight:600; color:var(--text-2);cursor:pointer;background:transparent;user-select:none;white-space:nowrap;} .fb-seg:hover{background:var(--surface-2);color:var(--text);} .fb-seg.on{background:var(--accent);color:var(--accent-on);} /* a round pip: factions in their colour, mint/burn in theirs */ .fb-pip{width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;} .fb-pip:hover{background:var(--surface-2);} .fb-pip .pip{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.35); box-shadow:none;opacity:.35;transition:opacity .12s,box-shadow .12s;} .fb-pip.on .pip{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent);} .fb-pip.mint .pip{background:#1B7F3B;} .fb-pip.burn .pip{background:#C0392B;} /* faction pips carry their colour inline, from FACTION_COLORS */ .fb-pip.fac .pip{border-color:rgba(0,0,0,.3);} /* mint and burn are ON by default (they include rather than exclude) */ .fb-pip[data-ct] .pip{opacity:1;} .fb-pip[data-ct]:not(.on) .pip{opacity:.28;} /* flip-direction button */ .fb-dir{display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:10px;color:var(--text-2); cursor:pointer;user-select:none;} .fb-dir:hover{background:var(--surface-2);color:var(--text);} /* live filters, as chips you can click away */ .fb-active{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px; padding-top:10px;border-top:1px solid var(--border);} .fb-active[hidden]{display:none;} .af-chip{cursor:pointer;transition:background .1s,border-color .1s,color .1s;} .af-chip:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);} .af-chip:hover .af-x{color:var(--danger);} /* Cards view: grid on top, preview of the selected card docked below */ #view-list{display:flex;flex-direction:column;padding:0;height:100vh;} #view-list[hidden]{display:none;} /* an id+display rule otherwise beats the hidden attribute */ .cards-top{flex:1;min-height:0;overflow-y:auto;padding:24px 30px 16px;} /* sizes to whatever is in it, up to a ceiling - an empty preview is a thin strip */ .card-preview{flex:0 0 auto;max-height:44vh;min-height:0;overflow-y:auto;background:var(--surface); border-top:1px solid var(--border);padding:20px 30px;} .card-preview:has(.cp-hint){padding:12px 30px;} .cp-hint{font-size:13px;color:var(--text-3);padding:10px 2px;} /* selected grid card: a calm accent ring on the wrapper (the card clips overflow) */ .card-sel-wrap{position:relative;flex-shrink:0;transition:transform .14s;} .card-sel-wrap::before{content:'';position:absolute;inset:-4px;border-radius:11px;pointer-events:none;z-index:3; border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .card-grid .card-sel-wrap:hover{transform:translateY(-3px);z-index:2;} /* preview slides in when a card is picked, out when cleared */ @keyframes barslide{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}} @keyframes barslideout{from{transform:none;opacity:1;}to{transform:translateY(14px);opacity:0;}} .cp-wrap,.dk-prev-wrap{animation:barslide .18s ease;} .cp-wrap.bar-out,.dk-prev-wrap.bar-out{animation:barslideout .16s ease forwards;} .cp-wrap{display:flex;flex-direction:column;} .cp-head-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;} .cp-cols{display:flex;gap:22px;align-items:flex-start;} .cp-art{width:200px;height:200px;object-fit:cover;border:1px solid var(--border);border-radius:var(--r); background:var(--surface-2);flex-shrink:0;} .cp-body{flex:1;min-width:0;} .cp-title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text);} .cp-num{font-size:11px;color:var(--text-3);} .cp-fields{display:flex;flex-wrap:wrap;gap:5px 22px;margin-bottom:9px;} .cp-fl{color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600;margin-right:6px;} .cp-fv{color:var(--text);font-size:12px;} .cp-rules{font-size:13px;color:var(--text);line-height:1.55;margin-bottom:6px;max-width:660px;} .cp-rules .glyph{height:14px;vertical-align:-2px;} .cp-flavor{font-size:12px;font-style:italic;color:var(--text-3);line-height:1.5;margin-bottom:12px;max-width:660px;} .cp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .atd{display:inline-flex;align-items:center;gap:6px;} .atd-sel{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text); font-family:inherit;font-size:12px;padding:5px 8px;cursor:pointer;outline:none;} .atd-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} /* preview side panel: recent changes + comments */ .cp-side{flex:1;min-width:220px;max-width:340px;border-left:1px solid var(--border);padding-left:20px;} .cp-side-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:8px;} .cp-rev{font-size:12px;color:var(--text-2);padding:5px 0;border-top:1px solid var(--border);line-height:1.45;} .cp-rev:first-of-type{border-top:none;} .cp-rev-field{color:var(--text);} .cp-rev-old{color:var(--danger);} .cp-rev-new{color:var(--success);} .cp-rev-meta{color:var(--text-3);font-size:10px;margin-top:1px;} .cp-cmt{font-size:12px;padding:5px 0;border-top:1px solid var(--border);} .cp-cmt:first-of-type{border-top:none;} .cp-cmt-who{color:var(--text);font-weight:600;font-size:11px;} .cp-cmt-when{color:var(--text-3);font-size:10px;} .cp-cmt-body{color:var(--text-2);line-height:1.45;margin-top:1px;} .cp-empty{font-size:12px;font-style:italic;color:var(--text-3);} /* ======================= the card grid ======================= */ .card-grid{display:flex;flex-wrap:wrap;gap:22px;} /* The card. Fixed 120x176 in the grid and 163x239 at hand size - the same 1:1.47 proportion in both, so the two read as one card. The stat chip floats in the bottom-right corner rather than taking its own row, which is what lets the art keep its height. The text block absorbs any overflow, so a long name or a two-row sector list can never shove anything off the card. It wears the chrome surface and chrome ink rather than a card face, matching the tiles in the artist portal: these are database rows about a card, not the card itself, and reading them as part of the interface is the honest thing. The printed face lives in the game. */ .card{width:var(--cw);height:var(--ch);border-radius:6px;border:1px solid var(--border);background:var(--surface); position:relative;z-index:1;cursor:pointer;transition:transform .14s,box-shadow .14s;display:flex; flex-direction:column;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-card);} .card-grid .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);z-index:2;} /* unreviewed changes: an attention-coloured ring on a wrapper (the card clips overflow) */ .upd-wrap{position:relative;flex-shrink:0;transition:transform .14s;} .upd-wrap::before{content:'';position:absolute;inset:-3px;border-radius:9px;pointer-events:none;z-index:3; border:2px solid var(--review);} .card-grid .upd-wrap:hover{transform:translateY(-3px);z-index:2;} .c-art{position:relative;flex-shrink:0;overflow:hidden;height:94px;background:var(--surface-2);} .c-art img{width:100%;height:100%;object-fit:cover;display:block;} .c-pips{position:absolute;top:5px;left:5px;display:flex;flex-direction:column;gap:3px;z-index:2;} .c-pip{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;} .c-pip.pay{background:#14181D;} .c-pip.burn{background:#C0392B;} .c-pip.mint{background:#1B7F3B;} .c-div{height:4px;flex-shrink:0;} .c-txt{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--surface);padding:7px 9px 9px; display:flex;flex-direction:column;} .c-name{font-size:12px;font-weight:700;line-height:1.2;color:var(--text);letter-spacing:-.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* the type and sectors sit at the foot of the text block, clear of the stat chip */ .c-meta{margin-top:auto;padding-right:30px;} .c-type{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2); line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* sectors may run to two rows rather than being cut off */ .c-sect{font-size:10.5px;color:var(--text-3);line-height:1.3;margin-top:3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .c-rules{flex:1 1 auto;min-height:0;overflow:hidden;font-size:8.5px;color:var(--text);line-height:1.45; padding:0 9px 6px;background:var(--surface);} .c-rules .glyph,.c-rules img{height:11px;vertical-align:-2px;margin:0 1px;} .c-stat{position:absolute;right:5px;bottom:4px;line-height:0;z-index:3;} /* hand size: the same card, scaled up, with room for rules text */ .hcard{width:var(--hwc);height:var(--hwh);cursor:default;} .hcard .c-art{height:96px;} .hcard .c-txt{flex:0 0 auto;padding:6px 9px 4px;} .hcard .c-name{font-size:12.5px;} .hcard .c-type,.hcard .c-sect{font-size:10.5px;} .hcard .c-stat{right:6px;bottom:5px;} .hand-zoom{zoom:1.55;width:var(--hwc);} .card.cancelled{filter:grayscale(.85) brightness(.78);} .card.cancelled::after{content:'CANCELLED';position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-16deg); font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(160,30,20,.9);border:2px solid rgba(160,30,20,.75); border-radius:4px;padding:2px 7px;background:rgba(245,240,232,.85);z-index:3;} /* ============================ shared blocks ============================ */ .page-h1{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:2px 0 2px;} .page-sub{font-size:13px;color:var(--text-3);margin:0 0 22px;} .sample-badge{display:inline-block;margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:3px;padding:2px 7px;vertical-align:2px;} .panel,.det-panel,.an-panel,.pub-panel,.dk-stat-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);} .panel{padding:18px 22px;} .panel h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:0 0 7px;} .panel p{font-size:13px;color:var(--text-2);margin:0;line-height:1.55;} .panel .soon{font-style:italic;color:var(--text-3);} .footline{padding:10px 26px 22px;font-size:11px;color:var(--text-3);margin-top:auto;} /* buttons: one neutral default, one accent primary */ .dt-btn,.edit-btn,.pub-btn,.cmt-post,.fld-btn,.ref-btn,.de-btn,.ver-btn{ border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text); font-family:inherit;font-weight:500;cursor:pointer;transition:background .1s,border-color .1s,color .1s;} .dt-btn:hover,.edit-btn:hover,.cmt-post:hover,.fld-btn:hover,.ref-btn:hover,.de-btn:hover,.ver-btn:hover:not(:disabled),.pub-btn.ghost:hover{ background:var(--surface-2);border-color:var(--text-3);} .dt-btn{padding:6px 14px;font-size:12.5px;margin-left:8px;} .dt-btn.primary,.pub-btn,.fld-btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} .dt-btn.primary:hover,.pub-btn:hover,.fld-btn.go:hover{background:var(--accent-hover);border-color:var(--accent-hover);} .edit-btn{padding:6px 16px;font-size:12.5px;} .edit-btn.disabled{opacity:.5;cursor:default;} .backlink,.deck-back{font-size:12.5px;font-weight:500;color:var(--text-2);text-decoration:none;cursor:pointer;} .backlink:hover,.deck-back:hover{color:var(--accent);} .detail-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 16px;} .detail-cols{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;} .detail-left{width:256px;flex-shrink:0;} .detail-right{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px;} .detail-flavor{font-size:13px;font-style:italic;color:var(--text-3);line-height:1.55;margin:14px 4px 0;max-width:255px;} .card-meta{font-size:12px;color:var(--text-2);padding:10px 4px 0;line-height:1.7;} .card-meta b{color:var(--text);font-weight:600;} .rev-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--attn);margin-top:8px;} .rev-flag .dot{width:7px;height:7px;border-radius:50%;background:var(--review);} .mark-rev{border:none;background:none;color:var(--accent);font-size:11px;cursor:pointer;text-decoration:underline; font-family:inherit;padding:0;margin-left:4px;} /* text inputs, everywhere */ .ef-input,.ef-area,.fld-input,.fld-area,.de-lookup-in,.dk-desc-in,.dk-title-in,.cmt-add textarea{ width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text); font-family:var(--font-ui);font-size:13px;padding:6px 9px;outline:none;transition:border-color .12s,box-shadow .12s;} .ef-input:focus,.ef-area:focus,.fld-input:focus,.fld-area:focus,.de-lookup-in:focus,.dk-desc-in:focus, .dk-title-in:focus,.cmt-add textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .ef-area,.fld-area{resize:vertical;min-height:70px;line-height:1.5;} .ef-row{margin-bottom:11px;} .ef-label{display:block;font-size:11px;font-weight:500;color:var(--text-2);margin-bottom:4px;} .ef-3{display:flex;gap:8px;} .ef-3 .ef-cell{flex:1;} /* comments */ .cmt-add{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;} .cmt-add textarea{resize:vertical;min-height:52px;line-height:1.5;} .cmt-post{align-self:flex-start;padding:5px 13px;font-size:12px;} .cmt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;} .cmt-head{font-size:11px;margin-bottom:3px;} .cmt-who{color:var(--text);font-weight:600;} .cmt-when{color:var(--text-3);margin-left:6px;} .cmt-body{font-size:14px;color:var(--text-2);line-height:1.5;white-space:pre-wrap;} .cmt-empty,.pub-empty,.fld-empty,.dk-preview-hint{font-size:12px;font-style:italic;color:var(--text-3);} /* ---- attention: anything unfinished or waiting on someone ---- */ .needs{color:var(--attn);} .fld-empty.needs{font-style:normal;font-weight:500;} /* a status chip: amber while there is still work, quiet once it is done */ .stat-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:99px; padding:1px 9px;border:1px solid;} .stat-chip.needs{color:var(--attn);background:var(--attn-soft);border-color:var(--attn);} .stat-chip.done{color:var(--success);background:var(--surface-2);border-color:var(--border-strong);} /* a cost, shown as pips rather than words - the same reading as on the card: black = pay, red = burn, green = mint */ .cost-pips{display:inline-flex;align-items:center;gap:3px;vertical-align:-1px;} .pip{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0; box-shadow:0 0 0 1px var(--surface),0 0 0 1.5px rgba(0,0,0,.18);} .pip.pay{background:#14181D;} .pip.burn{background:#C0392B;} .pip.mint{background:#1B7F3B;} [data-theme="dark"] .pip.pay{background:#D6D3CD;} [data-theme="dark"] .pip{box-shadow:0 0 0 1px var(--surface),0 0 0 1.5px rgba(255,255,255,.22);} .cost-free{font-size:12px;color:var(--text-3);font-style:italic;} /* a set or expansion the card belongs to */ .set-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em; background:var(--surface-2);border:1px solid var(--border);border-radius:99px; padding:1px 9px;margin:0 4px 3px 0;color:var(--text);} .fld-multi{margin-top:1px;} /* a value the portal inferred rather than one that was recorded */ .fld-note{font-size:10.5px;color:var(--text-3);font-style:italic;margin-left:4px;} /* revision history */ .rev{padding:10px 0;border-top:1px solid var(--border);font-size:12px;} .rev:first-of-type{border-top:none;} .rev-meta{color:var(--text-3);margin-bottom:2px;} .rev-meta b{color:var(--text);font-weight:600;} .rev-field{color:var(--text);} .rev-old{color:var(--danger);} .rev-new{color:var(--success);} .rev-arrow{color:var(--text-3);margin:0 5px;} /* ============================ Decks ============================ */ .deck-grid{display:flex;flex-wrap:wrap;gap:14px;} .deck-card{width:210px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden; cursor:pointer;transition:border-color .12s,box-shadow .12s;} .deck-card:hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .deck-bar{height:4px;} .deck-body{padding:12px 14px 14px;} .deck-name{font-size:15px;font-weight:600;color:var(--text);line-height:1.2;} .deck-meta{font-size:11px;color:var(--text-3);margin-top:4px;} .deck-desc{font-size:12px;color:var(--text-2);margin-top:8px;line-height:1.45;} /* the deck view stacks its filter bar above whichever screen is showing. An id rule setting display beats the hidden attribute, so it needs saying again here or the view never hides - the same trap the login gate hit. */ #view-decks{padding:0;display:flex;flex-direction:column;height:100vh;} #view-decks[hidden]{display:none;} #dk-screen{flex:1;min-height:0;display:flex;flex-direction:column;} #dk-screen>.deck-editor,#dk-screen>.dk-list-screen{flex:1;min-height:0;height:auto;} .fbar[hidden]{display:none;} /* the attribute must win, whatever the layout */ .dk-list-screen{padding:0;height:100vh;display:flex;flex-direction:column;} .dk-list-top{flex:1;min-height:0;overflow-y:auto;padding:20px 26px 22px;} .dk-list-top .page-h1{margin-top:0;} .dk-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;} /* the panel is sized for a list now, not for a wall of cards at play size */ .dk-list-bottom{flex:0 0 auto;height:auto;max-height:46vh;min-height:0;overflow-y:auto; padding:16px 26px 22px;border-top:1px solid var(--border);background:var(--surface);} .dk-prev-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;} .dk-prev-title{font-size:16px;font-weight:600;color:var(--text);} .dk-prev-count{font-size:12px;color:var(--text-3);} .dk-prev-grid{display:flex;flex-wrap:wrap;gap:14px;} /* the type headings repeat down the panel, so the first one needs no rule */ .dk-prev-list .pg-list-type-lbl:first-child{margin-top:0;padding-top:0;border-top:none;} .dk-prev-list .dk-cols{column-width:190px;} .dk-prev-card{position:relative;} .dk-prev-qty{position:absolute;top:-6px;right:-6px;background:var(--accent);color:var(--accent-on);font-size:11px;font-weight:600; border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px; box-shadow:0 1px 3px rgba(28,26,22,.3);z-index:4;} /* A deck in the list. Every tile is the SAME fixed size so the grid lines up. The tile wears the CARD face, so a deck reads as a card-like object; the faction mix is carried entirely by the bar, so there are no faction tags. */ .pg-deck-card{width:195px;height:286px;border-radius:var(--r);border:1px solid var(--border); background:var(--surface);display:flex;flex-direction:column;overflow:hidden;cursor:pointer; position:relative;flex-shrink:0;transition:border-color .12s,box-shadow .12s;} .pg-deck-card:not(.pg-deck-blank):hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .pg-deck-card.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .pg-dc-art{height:116px;flex-shrink:0;overflow:hidden;background:var(--surface-2);} .pg-dc-art img{width:100%;height:100%;object-fit:cover;display:block;} /* the faction bar doubles as the rule between the art and the text */ .pg-dc-bar{height:12px;width:100%;flex-shrink:0;} /* the text block absorbs any overflow so the tile height never changes */ .pg-dc-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:9px 11px 10px;display:flex;flex-direction:column; background:var(--surface);} .pg-dc-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.2;text-align:center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* the two short log lines, stacked like a precon box */ .pg-dc-lines{margin-top:7px;text-align:center;} .pg-dc-line{font-size:10px;font-weight:600;color:var(--text);line-height:1.35; text-transform:uppercase;letter-spacing:.07em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* a hairline separates the two log lines; both lines are styled identically */ .pg-dc-line + .pg-dc-line{margin-top:4px;padding-top:4px;border-top:1px solid var(--border);} /* a log line that has not been written yet reads as outstanding work */ .pg-dc-line.empty{color:var(--attn);opacity:.8;font-weight:500;font-style:italic;} /* four lines and no more - the clamp draws its ellipsis at line four but a taller box still lets the top of a fifth line show through underneath */ .pg-dc-desc{font-size:10.5px;color:var(--text-2);line-height:1.4;margin-top:7px;flex:1 1 auto;min-height:0;padding-right:20px; max-height:calc(10.5px * 1.4 * 4); display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} /* the core-set letter, in the tile's bottom-right corner. Deliberately the only serif on the page, so it reads as a mark rather than as copy. */ .pg-dc-set{position:absolute;right:9px;bottom:6px;z-index:2; font-family:'DM Serif Display',Georgia,'Times New Roman',serif;font-size:21px;line-height:1; color:var(--text-3);opacity:.85;pointer-events:none;} .pg-deck-card:hover .pg-dc-set{color:var(--text-2);opacity:1;} /* leaders that do not have a deck yet: same footprint, dashed, no card face */ .pg-deck-blank{border-style:dashed;background:none;cursor:default;} .pg-deck-blank .pg-dc-body{background:none;} .pg-blank-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%; padding:12px;text-align:center;} .pg-blank-name{font-size:12px;font-weight:600;color:var(--text-3);line-height:1.2;} .pg-blank-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-top:6px;} /* ---- both editor pages are three columns ---- info (the editable fields) | the middle column | activity, pinned far right. The middle and activity columns are the same fixed width so neither dominates; the info column is the one that gives ground when the window narrows. */ .deck-editor{display:flex;height:100vh;} .de-col{display:flex;flex-direction:column;min-height:0;} .de-info{flex:1 1 420px;min-width:290px;} .de-mid{flex:0 0 340px;border-left:1px solid var(--border);} .de-build{flex:0 1 768px;min-width:440px;border-left:1px solid var(--border); display:flex;flex-direction:column;min-height:0;} .de-act{flex:0 0 340px;border-left:1px solid var(--border);} /* Each hideable column owns its own switch: a chevron in its header collapses it to a narrow labelled rail, and the rail's chevron brings it back. */ .de-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0; padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);} .de-head-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .de-collapse,.de-expand{border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer; font:inherit;font-size:17px;font-weight:600;line-height:1;padding:5px 11px;border-radius:var(--r-sm); transition:background .1s,color .1s,border-color .1s;} .de-collapse:hover,.de-expand:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3);} .de-colbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;} /* the rail only exists while the column is collapsed */ .de-rail{display:none;} body.hide-mid .de-mid,body.hide-act .de-act,body.hide-build .de-build{ flex:0 0 44px;min-width:44px;} body.hide-mid .de-mid .de-head,body.hide-mid .de-mid .de-colbody, body.hide-act .de-act .de-head,body.hide-act .de-act .de-colbody, body.hide-build .de-build .de-head,body.hide-build .de-build .de-colbody{display:none;} body.hide-mid .de-mid .de-rail,body.hide-act .de-act .de-rail,body.hide-build .de-build .de-rail{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:9px 0;height:100%;} .de-rail-lbl{writing-mode:vertical-rl;font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.09em;color:var(--text-3);user-select:none;} .deck-back{display:inline-block;padding:14px 20px 6px;} .de-build .de-cards-sec,.de-cards-sec{flex:1.4;overflow-y:auto;padding:4px 20px 14px;min-height:0;} .de-holding-sec{flex:.85;overflow-y:auto;padding:12px 20px 14px;min-height:110px;border-top:1px solid var(--border);} .de-lookup-sec{flex:1;overflow-y:auto;padding:12px 20px 16px;min-height:0;border-top:1px solid var(--border);} .dk-col-h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin:0 0 10px;} .de-sub{font-size:11px;font-weight:400;color:var(--text-3);text-transform:none;letter-spacing:0;} .de-toggle{cursor:pointer;display:flex;align-items:center;gap:9px;user-select:none;} .de-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;flex-shrink:0;} .de-holding-sec.collapsed,.de-lookup-sec.collapsed{flex:0 0 auto;overflow:hidden;} .de-holding-sec.collapsed .de-caret,.de-lookup-sec.collapsed .de-caret{transform:rotate(-45deg);} .de-holding-sec.collapsed .de-sec-body,.de-lookup-sec.collapsed .de-sec-body{display:none;} .de-holding-sec.collapsed .dk-col-h2,.de-lookup-sec.collapsed .dk-col-h2{margin:0;} .de-btn{flex-shrink:0;width:21px;height:21px;border-radius:var(--r-sm);font-size:14px;line-height:1; display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--text-2);} /* lookup: a small search + faction/type filters, then results */ .de-lk-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;} .de-lookup-in{width:190px;flex-shrink:0;} .de-lk-fac{display:flex;gap:5px;} .de-lk-fac .fchip.on{box-shadow:0 0 0 2px var(--surface-2),0 0 0 3.5px var(--accent);} .de-lk-type{width:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); color:var(--text);font-family:inherit;font-size:12.5px;padding:6px 9px;outline:none;} .de-hint{font-size:11px;color:var(--text-3);margin-top:8px;} /* card list: pills grouped by type */ .dk-cards{overflow-y:auto;min-height:0;padding:0 22px 16px 4px;} .dk-cols{column-width:212px;column-gap:16px;} .dk-cg{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:9px;} .pg-list-type-lbl{font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase; margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--border);} .pg-list-type-lbl:first-child{margin-top:0;padding-top:0;border-top:none;} .pg-list-item{display:flex;align-items:center;gap:5px;margin-bottom:4px;max-width:100%;} .pg-list-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;max-width:100%;} .pg-list-qty{font-size:9px;font-weight:500;color:var(--text-3);flex-shrink:0;min-width:18px;text-align:right;} .copy-num{width:12px;flex-shrink:0;text-align:center;font-size:10px;font-weight:600;color:var(--text-3);} .dup-dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);flex-shrink:0;} /* pills size to their own title, not the column width */ .pg-list-pill{display:inline-flex;align-items:center;border-radius:var(--r-sm);overflow:hidden;flex:0 1 auto;min-height:24px; max-width:100%;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:border-color .1s;} .pg-list-pill:hover{border-color:var(--text-3);} .pg-list-pill-bar{width:4px;flex-shrink:0;align-self:stretch;} .pg-list-pill-name{font-size:11.5px;font-weight:500;padding:5px 10px 5px 8px;white-space:nowrap;flex:0 1 auto; min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2;color:var(--text);} /* the notes board */ .dk-notes{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:24px;padding:24px 26px 32px;color:var(--text);} .dk-sec-h{font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em; display:flex;align-items:center;gap:8px;} .nsec-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:11px;font-weight:600; color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;} .nsec-h:hover{color:var(--text);} .nsec-caret{width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s;flex-shrink:0;} .nsec.collapsed .nsec-caret{transform:rotate(-45deg);} .nsec.collapsed .nsec-body{display:none;} /* One deck field: a fixed label column, the value, then the lock - matching the card page, so the button always shares a line with its label. `display:contents` on the row wrapper lifts the value and the buttons into the grid. */ .dk-fld{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:0 12px;align-items:start; padding:13px 12px;margin:0 -12px 4px;border-radius:var(--r-sm);transition:background .1s;} .dk-fld:hover{background:var(--surface-2);} .dk-fld.editing{background:var(--accent-soft);} .dk-fld-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3); padding-top:4px;line-height:1.4;} /* the lock / submit buttons in a deck field row (the third grid column) */ .dk-title-actions{display:flex;gap:5px;align-items:center;} .dk-fld-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3);opacity:.8;} .dk-desc-row{display:contents;} .dk-desc-in{flex:1;min-width:0;resize:vertical;min-height:64px;line-height:1.5;} .dk-desc-txt{flex:1;min-width:0;} .dk-desc{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:6px;} /* single-line deck fields (title, log lines, core set) */ .dk-line-in{min-height:0;height:32px;resize:none;} .dk-logline{font-weight:600;color:var(--text);} /* descriptor tags players pick at match end */ .pt-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;} .pt-tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-sm);padding:3px 9px;font-size:12px;color:var(--text-2);} .pt-tag b{color:var(--text);font-weight:600;} .pt-sub{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px;} .pt-cmts{max-height:220px;overflow-y:auto;padding-right:4px;} /* count + stat boxes */ .dk-count-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;} .dk-count-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:9px 10px; text-align:center;min-width:0;} .dk-count-box.total{background:var(--accent-soft);border-color:var(--accent);} .dk-count-num{font-size:19px;font-weight:600;color:var(--text);line-height:1;} .dk-count-box.total .dk-count-num{color:var(--accent);} .dk-count-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:5px;} .dk-pt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;} .dk-pt-ver{display:flex;align-items:center;gap:8px;margin-bottom:12px;} .dk-pt-ver .ver-lbl{font-size:13px;font-weight:600;color:var(--text);flex:1;} .ver-btn{width:24px;height:22px;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;} .ver-btn:disabled{opacity:.35;cursor:default;} .dk-pt-tiles{display:flex;gap:8px;} .dk-pt-tile{flex:1;text-align:center;} .dk-pt-num{font-size:18px;font-weight:600;color:var(--text);line-height:1;} .dk-pt-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:5px;} /* per-card playtest stat grid */ .cs-group-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:0 0 8px;} .cs-group-lbl:not(:first-child){margin-top:14px;} .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .cs-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:9px 10px;} .cs-num{font-size:17px;font-weight:600;color:var(--text);line-height:1;} .cs-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-top:5px;line-height:1.25;} /* ============================ card detail ============================ */ .det-left-col{flex:1;overflow-y:auto;padding:26px 30px 34px;min-height:0;} .det-hd{margin-bottom:22px;} .det-name{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.2;} .det-meta{font-size:13px;color:var(--text-3);margin-top:5px;} .det-hd-actions{margin-top:12px;} .det-panel{padding:4px 20px;max-width:820px;} /* the card's Decks section, under its fields in the info column */ .det-decks{max-width:780px;margin-top:20px;} /* the deck's identity fields, in the card page's panel */ .dk-ident{padding:8px 20px 12px;} .dk-ident .dk-fld{margin-left:-12px;margin-right:-12px;} .dk-ident .dk-fld + .dk-fld{border-top:1px solid var(--border);} /* One field row: a fixed label column, the value, then the lock. Label and button share a line, so the eye never has to track across empty space. */ .fld{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:0 12px;align-items:start; padding:13px 12px;margin:0 -10px;border-top:1px solid var(--border);border-radius:var(--r-sm); transition:background .1s;} .fld:hover{background:var(--surface-2);} .fld.editing{background:var(--accent-soft);} .fld:first-child{border-top:none;} .fld-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600; padding-top:3px;line-height:1.4;} .fld-value{font-size:14px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word;} .fld-value .glyph{height:14px;vertical-align:-2px;} .fld-art{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);border:1px solid var(--border); display:block;background:var(--surface-2);} .fld-actions{display:flex;gap:5px;align-items:center;} .fld-btn,.ref-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:4px 9px;line-height:1;} .fld-btn.icon{padding:5px;} .fld-btn svg{width:14px;height:14px;display:block;} .fld-cost3{display:flex;gap:7px;} .fld-cost3 .c3{flex:1;} .fld-cost3 .c3 span{display:block;font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;} /* ============================ Playtest / Publish ============================ */ .tile-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;min-width:130px;} .tile-num{font-size:24px;font-weight:600;color:var(--text);line-height:1.1;} .tile-lbl{font-size:11px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.04em;} .an-panel,.pub-panel{padding:18px 22px;margin-bottom:20px;max-width:680px;} .an-panel h3,.pub-panel h3{font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;} .an-table{width:100%;border-collapse:collapse;} .an-table td,.an-table th{font-size:13px;padding:6px 8px;text-align:left;color:var(--text-2);border-top:1px solid var(--border);} .an-table th{color:var(--text-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-top:none;} .an-bar{height:6px;border-radius:3px;background:var(--accent);display:inline-block;vertical-align:middle;} .num-cell{text-align:right;color:var(--text-3);} .pub-list{list-style:none;margin:0;padding:0;} .pub-list li{font-size:13px;color:var(--text-2);padding:5px 0;border-top:1px solid var(--border);} .pub-list li:first-child{border-top:none;} .pub-note{font-size:13px;color:var(--text-2);margin:0 0 12px;line-height:1.55;} .pub-btn{padding:7px 16px;font-size:12.5px;font-weight:600;} .pub-btn.ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text);} .muted{color:var(--text-3);} /* the vocabulary playtesters use to describe cards */ .tag-list{display:flex;flex-direction:column;} .tag-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);} .tag-row:first-child{border-top:none;} .tag-pill{font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px; background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);} .tag-pill.sugg{color:var(--attn);background:var(--attn-soft);border-color:var(--attn);} .tag-by{flex:1;font-size:11px;color:var(--text-3);} .tag-acts{display:flex;gap:5px;flex-shrink:0;} .tag-count{color:var(--attn);} .tag-add{display:flex;gap:8px;align-items:center;} .tag-add .fld-input{flex:1;} /* ---- playtest stats ---- */ .cs-warn{font-size:11.5px;color:var(--attn);background:var(--attn-soft);border:1px solid var(--attn); border-radius:var(--r-sm);padding:6px 10px;margin-bottom:14px;} .cs-note{font-size:9px;color:var(--text-3);margin-top:3px;line-height:1.2;} /* a descriptor tag with a little share-of-votes meter */ .pt-tag{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 10px;} .pt-tag b{color:var(--text);font-weight:700;font-size:13px;} .pt-meter{display:block;width:100%;height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden;} .pt-meter>span{display:block;height:100%;background:var(--accent);} /* matchup spread */ .mu-list{display:flex;flex-direction:column;gap:6px;} .mu-row{display:flex;align-items:center;gap:10px;font-size:12.5px;} .mu-name{flex:0 0 130px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mu-bar{flex:1;height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden;min-width:60px;} .mu-bar>span{display:block;height:100%;} .mu-bar>span.up{background:var(--success);} .mu-bar>span.down{background:var(--danger);} .mu-pct{flex:0 0 38px;text-align:right;font-weight:600;font-size:12px;} .mu-pct.up{color:var(--success);} .mu-pct.down{color:var(--danger);} /* ---- a comment pinned to one aspect of a card or deck ---- */ .cmt-aspect{display:flex;align-items:center;gap:8px;} .cmt-aspect label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .cmt-aspect select{width:auto;min-width:150px;} .cmt-asp{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:99px; padding:1px 8px;margin-right:8px;vertical-align:1px;} /* ---- the forum ---- Laid out the way a forum is: an index of sections, each a panel with its own threads listed inside it, then a thread page of posts stacked in order. What appears here is whatever the database let this person read. */ .fo-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;min-height:26px;} .fo-crumbs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);min-width:0;} .fo-bar-acts{display:flex;gap:7px;flex-shrink:0;} .fo-crumb{color:var(--text-2);text-decoration:none;} .fo-crumb:hover{color:var(--accent);text-decoration:underline;} .fo-crumb-sep{color:var(--text-3);} .fo-crumb-now{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .page-h1 .fo-gate{margin-left:10px;vertical-align:middle;} /* a section panel */ .fo-block{border:1px solid var(--border);border-radius:var(--r);background:var(--surface); margin-bottom:18px;overflow:hidden;} .fo-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);} .fo-block-h-l{min-width:0;} /* on a section page the heading above already names it */ .fo-block-head.bare{justify-content:flex-end;padding:9px 16px;} .fo-block-h-r{display:flex;align-items:center;gap:12px;flex-shrink:0;} .fo-sec-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .fo-sec-name{font-size:14.5px;font-weight:600;color:var(--text);text-decoration:none;} a.fo-sec-name:hover{color:var(--accent);text-decoration:underline;} .fo-sec-desc{font-size:12px;color:var(--text-3);margin-top:3px;} .fo-counts{font-size:11.5px;color:var(--text-3);white-space:nowrap;} /* thread rows inside a section */ .fo-rows{display:flex;flex-direction:column;} .fo-row{display:grid;grid-template-columns:1fr 90px 170px;align-items:center;gap:14px; padding:11px 16px;border-top:1px solid var(--border);color:inherit;text-decoration:none; transition:background .1s;} .fo-row:first-child{border-top:none;} .fo-row:not(.fo-row-head):hover{background:var(--surface-2);} .fo-row-head{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em; color:var(--text-3);padding-top:7px;padding-bottom:7px;background:var(--surface);cursor:default;} .fo-row-main{min-width:0;} .fo-row-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--text);} .fo-row.unread .fo-row-title{font-weight:600;} .fo-row-sub{display:block;font-size:11px;color:var(--text-3);margin-top:2px;} .fo-col-n{font-size:13px;color:var(--text-2);text-align:center;} .fo-col-last{font-size:12px;color:var(--text-2);min-width:0;overflow:hidden;} .fo-dot{width:7px;height:7px;border-radius:50%;background:var(--attn);flex-shrink:0;} .fo-none{padding:16px;font-size:13px;color:var(--text-3);} .fo-none-inline{font-size:12px;color:var(--text-3);} /* who can see a thing, said in one word */ .fo-gate{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.03em;border-radius:99px; padding:1px 7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-3); white-space:nowrap;} .fo-gate.owner{border-color:var(--attn);background:var(--attn-soft);color:var(--attn);} .fo-gate.invite{border-color:var(--border-strong);color:var(--text-2);} /* the create and manage forms, one shape at both levels */ .fo-form,.fo-manage{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2); padding:14px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:9px;} .fo-form-title{font-size:13px;font-weight:600;color:var(--text);} .fo-form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .fo-form-row .fld-input{width:auto;min-width:160px;flex:0 1 auto;} .fo-form-acts{margin-left:auto;display:flex;gap:7px;} .fo-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .fo-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);cursor:pointer;} .fld-btn.danger{color:var(--danger);border-color:var(--border);} .fld-btn.danger:hover{border-color:var(--danger);background:var(--attn-soft);} .fo-members{display:flex;align-items:center;gap:7px;flex-wrap:wrap;} .fo-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text); background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:3px 10px 3px 4px;} .fo-x{cursor:pointer;color:var(--text-3);font-size:10px;padding:0 1px;} .fo-x:hover{color:var(--danger);} .fo-add{width:auto;min-width:130px;padding:4px 8px;font-size:12px;} /* a thread: posts in order, author beside each */ .fo-posts{border:1px solid var(--border);border-radius:var(--r);background:var(--surface); overflow:hidden;margin-bottom:18px;} .fo-post{display:grid;grid-template-columns:150px 1fr;gap:0;border-top:1px solid var(--border);} .fo-post:first-child{border-top:none;} .fo-p-who{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center; padding:16px 12px;background:var(--surface-2);border-right:1px solid var(--border);} .fo-p-name{font-size:12.5px;font-weight:600;word-break:break-word;} .fo-p-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--attn);} .fo-p-main{min-width:0;padding:12px 18px 16px;} .fo-p-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px; font-size:11px;color:var(--text-3);border-bottom:1px solid var(--border);padding-bottom:7px;margin-bottom:9px;} .fo-p-n{color:var(--text-3);} .fo-p-body{font-size:14px;line-height:1.6;color:var(--text);word-break:break-word;} /* always shown - replying is a main action, and a hover-only control is no control at all on a touch screen */ .fo-p-acts{display:flex;gap:6px;margin-top:11px;} .fo-p-act{font:inherit;font-size:11.5px;color:var(--text-3);background:none;cursor:pointer; border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 9px; transition:color .12s,border-color .12s,background .12s;} .fo-p-act:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .fo-p-act.danger:hover{color:var(--danger);border-color:var(--danger);} /* the message a quote points at, when you follow it */ .fo-post.flash{animation:fo-flash 1.6s ease-out;} @keyframes fo-flash{0%{background:var(--attn-soft);}100%{background:transparent;}} /* the reply box */ .fo-reply{border:1px solid var(--border);border-radius:var(--r);background:var(--surface); padding:14px 16px;display:flex;flex-direction:column;gap:9px;} .fo-reply-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .fo-reply textarea{width:100%;min-height:110px;max-height:420px;resize:vertical;box-sizing:border-box; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:1.55;padding:10px 12px; outline:none;transition:border-color .12s,box-shadow .12s;} .fo-reply textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .fo-reply-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;} .fo-reply-acts .dt-btn{margin-left:0;} @media (max-width:820px){ .fo-row{grid-template-columns:1fr 60px;} .fo-col-last{display:none;} .fo-post{grid-template-columns:1fr;} .fo-p-who{flex-direction:row;justify-content:flex-start;border-right:none; border-bottom:1px solid var(--border);} } /* ---- references inside written text ---- A chip carries the real name and faction colour; the token behind it stays plain text, so a post survives anything being renamed around it. */ .ref-chip{display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;font-size:12.5px;font-weight:500; line-height:1.3;border:1px solid var(--border-strong);border-radius:99px;padding:1px 9px 1px 6px; background:var(--surface-2);color:var(--text);text-decoration:none;} .ref-chip:hover{border-color:var(--accent);background:var(--accent-soft);} .ref-chip.missing{color:var(--text-3);font-style:italic;border-style:dashed;} .ref-chip.ref-post{gap:4px;color:var(--text-2);} .ref-arrow{font-size:11px;line-height:1;} .ref-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;} .ref-deck-wrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;vertical-align:baseline;} .ref-expand{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3); background:none;border:1px solid var(--border);border-radius:99px;padding:1px 7px;cursor:pointer;font-family:inherit;} .ref-expand:hover,.ref-expand.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .ref-decklist{flex:1 0 100%;margin-top:6px;border:1px solid var(--border);border-radius:var(--r-sm); background:var(--surface);padding:10px 12px;font-size:12.5px;white-space:normal; max-height:320px;overflow-y:auto;} .ref-dl-head{font-weight:600;margin-bottom:6px;} .ref-dl-type{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3); margin:8px 0 3px;} .ref-dl-row{display:flex;gap:8px;line-height:1.6;} .ref-dl-q{color:var(--text-3);min-width:24px;} /* the picker, opened from any composer */ #ref-picker{position:fixed;inset:0;z-index:700002;background:rgba(20,18,15,.55);display:flex; align-items:flex-start;justify-content:center;padding:70px 20px 20px;} #ref-picker[hidden]{display:none;} /* the attribute must win over the flex */ .ref-box{width:min(560px,100%);max-height:calc(100vh - 110px);display:flex;flex-direction:column;gap:10px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r); box-shadow:0 18px 50px rgba(0,0,0,.22);padding:18px 20px;} .ref-hits{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;} .ref-hit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:13px; color:var(--text);background:none;border:1px solid transparent;border-radius:var(--r-sm); padding:6px 9px;cursor:pointer;} .ref-hit:hover{background:var(--accent-soft);border-color:var(--accent);} .cmt-acts{display:flex;align-items:center;gap:8px;} /* ---- publish ---- */ .pub-changes{display:flex;flex-direction:column;} .pub-row{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:13px;} .pub-row:first-child{border-top:none;} .pub-row>:first-child{flex:0 0 190px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pub-fields{flex:1;min-width:0;color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pub-when{flex:0 0 auto;color:var(--text-3);font-size:11.5px;} .pub-warn{border-color:var(--attn);} .pub-note-row{margin:12px 0 14px;max-width:520px;} .pub-actions{display:flex;gap:10px;flex-wrap:wrap;} /* ---- people ---- */ .user-link{color:var(--text);font-weight:600;text-decoration:none;} .user-link:hover{color:var(--accent);text-decoration:underline;} .usr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;max-width:960px;} .usr-card{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid var(--border); border-radius:var(--r);background:var(--surface);text-decoration:none;color:inherit; transition:border-color .12s,box-shadow .12s;} .usr-card:hover{border-color:var(--text-3);box-shadow:var(--shadow-card);} .usr-main{min-width:0;} .usr-name{font-size:15px;font-weight:600;color:var(--text);} .usr-sub{font-size:12px;color:var(--text-3);margin-top:2px;} .usr-role{text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:700;} .usr-nums{font-size:11.5px;color:var(--text-2);margin-top:5px;} .usr-head{display:flex;gap:16px;align-items:center;margin:14px 0 22px;} .usr-stats{max-width:760px;margin-bottom:8px;} .usr-cols{display:flex;gap:30px;flex-wrap:wrap;margin:22px 0 8px;} .usr-cols>div{flex:1 1 240px;min-width:0;} .usr-list{display:flex;flex-direction:column;} .usr-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border); font-size:13px;color:var(--text-2);} .usr-row:first-child{border-top:none;} .usr-row b{color:var(--text);} /* ---- the Changes feed ---- */ .ch-fbar{border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;max-width:1100px;} .ch-count{font-size:12px;color:var(--text-3);margin-bottom:10px;} .ch-n{opacity:.6;font-weight:500;margin-left:3px;} .ch-list{display:flex;flex-direction:column;max-width:820px;} .ch-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--border);} .ch-item:first-child{border-top:none;} /* the kind pill. Its modifier is namespaced (ch-card, not card) because bare words like "card" collide with the game card element's own class. */ .ch-kind{flex:0 0 auto;align-self:flex-start;display:block;width:64px;height:auto; text-align:center;font-size:9.5px;font-weight:700;line-height:1.5;text-transform:uppercase; letter-spacing:.06em;padding:2px 0;border-radius:99px;border:1px solid var(--border-strong); color:var(--text-3);background:var(--surface-2);margin-top:2px;box-shadow:none;} .ch-kind.ch-comment{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .ch-kind.ch-publish{color:var(--attn);border-color:var(--attn);background:var(--attn-soft);} .ch-main{flex:1;min-width:0;} .ch-what{color:var(--text-2);} /* ============================ activity timeline ============================ */ .act-sec{display:block;} .act-body{display:block;} .act-tabs{display:flex;gap:2px;margin-bottom:14px;padding:2px;border:1px solid var(--border);background:var(--surface-2); border-radius:var(--r-sm);overflow:hidden;width:max-content;} .act-tab{border:none;background:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600; padding:5px 12px;border-radius:3px;cursor:pointer;} .act-tab:hover{color:var(--text);} .act-tab.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,26,22,.12);} .tl-item{padding:12px 0;border-top:1px solid var(--border);} .tl-item:first-child{border-top:none;} .tl-meta{font-size:11px;color:var(--text-3);} .tl-meta b{color:var(--text);font-weight:600;} .tl-field{color:var(--text);} .tl-detail{font-size:12px;margin-top:3px;} .tl-detail .rev-old{color:var(--danger);} .tl-detail .rev-new{color:var(--success);} .tl-body{font-size:14px;color:var(--text-2);margin-top:3px;line-height:1.5;} .tl-comment{border-left:2px solid var(--accent);padding-left:10px;} /* ============================ card page: Decks section ============================ */ .dk-cols2{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;} .dk-col2{flex:1 1 190px;min-width:0;} .dk-col2-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3); margin-bottom:8px;} .dks{display:flex;flex-direction:column;gap:1px;} .dk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0; border-top:1px solid var(--border);} .dk-row:first-child{border-top:none;} .dk-link{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;} .dk-link:hover{color:var(--accent);text-decoration:underline;} .dk-zones{display:flex;gap:5px;flex-shrink:0;} .dk-zone{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:99px;white-space:nowrap;} .dk-zone.deck{background:var(--accent-soft);color:var(--accent);} .dk-zone.hold{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border);} .dk-add{display:flex;gap:7px;align-items:center;} .dk-add-sel{flex:1;min-width:0;} .dk-add-btn{flex-shrink:0;width:34px;height:34px;border:1px solid var(--border-strong);border-radius:var(--r-sm); background:var(--surface);color:var(--text-2);font-size:19px;line-height:1;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;justify-content:center;transition:background .1s,border-color .1s,color .1s;} .dk-add-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on);} .dk-add-none{font-size:12px;font-style:italic;color:var(--text-3);} /* ============================ art lightbox ============================ */ .fld-art,.cp-art{cursor:zoom-in;} .lightbox{position:fixed;inset:0;z-index:700000;background:rgba(14,12,10,.86);display:flex;align-items:center; justify-content:center;cursor:zoom-out;} .lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.6);} .lb-close{position:fixed;top:14px;right:20px;background:none;border:none;color:rgba(255,255,255,.85);font-size:26px; line-height:1;cursor:pointer;} .lb-close:hover{color:#fff;} /* ============================ avatars + account ============================ */ /* an avatar is a claimed card's art */ .avatar{border-radius:50%;object-fit:cover;display:block;flex-shrink:0;border:1px solid var(--border-strong);background:var(--surface-2);} .avatar.blank{border-style:dashed;} #acct-modal{position:fixed;inset:0;z-index:700001;background:rgba(20,18,15,.55);display:flex; align-items:center;justify-content:center;padding:24px;} #acct-modal[hidden]{display:none;} .acct-box{width:640px;max-width:100%;max-height:88vh;overflow-y:auto;background:var(--surface); border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:18px 20px 20px;} .acct-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .acct-title{font-size:16px;font-weight:600;letter-spacing:-.01em;} .acct-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 14px;align-items:center; padding:9px 0;border-top:1px solid var(--border);} .acct-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600;} .acct-val{display:flex;align-items:center;gap:10px;font-size:13px;} .acct-pickname{font-weight:600;} .acct-pickwrap{margin-top:14px;} .acct-search{margin-bottom:9px;} .acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:7px;max-height:270px;overflow-y:auto; padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);} .acct-pick{position:relative;padding:0;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden; background:none;cursor:pointer;aspect-ratio:1/1;} .acct-pick img{width:100%;height:100%;object-fit:cover;display:block;} .acct-pick:hover{border-color:var(--text-3);} .acct-pick.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);} .acct-pick.taken{cursor:default;opacity:.35;} .acct-taken{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;background:rgba(20,18,15,.72);color:#fff;padding:1px 0;} .acct-msg{font-size:12px;color:var(--danger);min-height:16px;margin-top:8px;} .acct-actions{display:flex;justify-content:flex-end;margin-top:6px;} /* ============================ login gate ============================ */ #login-gate{position:fixed;inset:0;z-index:800000;background:var(--bg);display:flex;align-items:center; justify-content:center;padding:20px;} #login-gate[hidden]{display:none;} .login-box{width:330px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-card);padding:26px 26px 22px;} .login-brand{margin-bottom:18px;} .login-title{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--text);} .login-sub{font-size:12px;color:var(--text-3);letter-spacing:.02em;margin-left:2px;} #login-form{display:flex;flex-direction:column;gap:9px;} #login-form input{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 11px; font-family:inherit;font-size:13.5px;color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s;} #login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} #login-btn{background:var(--accent);color:var(--accent-on);border:1px solid var(--accent);border-radius:var(--r-sm);padding:9px; font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin-top:2px;} #login-btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);} #login-btn:disabled{opacity:.55;cursor:default;} .login-msg{font-size:12px;color:var(--danger);min-height:16px;line-height:1.4;} .login-note{font-size:11px;color:var(--text-3);margin-top:14px;} #login-form[hidden]{display:none;} .no-access{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--text-2);line-height:1.5;} .no-access p{margin:0;} .no-access strong{color:var(--text);font-weight:600;} #no-access-out{align-self:flex-start;background:var(--surface);color:var(--text);border:1px solid var(--border-strong); border-radius:var(--r-sm);padding:8px 14px;font-family:inherit;font-size:13px;cursor:pointer;margin-top:4px;} #no-access-out:hover{background:var(--surface-2);} /* ============================ "Coming soon" ============================ */ .coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;} .cs-badge{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:4px 12px;margin-bottom:14px;} .cs-title{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--text);} .cs-sub{font-size:13px;color:var(--text-3);margin-top:8px;} /* ---- non-owners are read-only: hide every edit affordance (RLS also blocks writes) ---- */ body:not(.is-owner) .fld-btn, body:not(.is-owner) .de-btn, body:not(.is-owner) .mark-rev, body:not(.is-owner) .atd, body:not(.is-owner) .de-holding-sec, body:not(.is-owner) .de-lookup-sec, body:not(.is-owner) #dk-open-editor{display:none !important;} /* the reference button inside the comment box is not an edit control */ body:not(.is-owner) .cmt-add .fld-btn{display:inline-flex !important;} /* When the info column is narrow there is not room for label, value and two buttons side by side - the value ends up a word per line. Below that width the label takes its own line and the value gets the full width. Keyed to the column, not the window, because the column is what actually runs out of room. */ .de-info{container-type:inline-size;} @container (max-width: 430px){ .fld,.dk-fld{grid-template-columns:minmax(0,1fr) auto;} .fld-label,.dk-fld-lbl{grid-column:1/-1;margin-bottom:5px;} } /* ---- commenting on one field ---- The speech bubble sits beside the pencil on every field. It is not a .fld-btn on purpose: those are hidden from anyone without edit rights, and this button exists for exactly those people. */ .cmt-btn{display:inline-flex;align-items:center;justify-content:center;position:relative; background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-3); cursor:pointer;padding:5px;font:inherit;transition:color .12s,border-color .12s,background .12s;} .cmt-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .cmt-btn.on{color:var(--accent-on);background:var(--accent);border-color:var(--accent);} .cmt-btn svg{width:15px;height:15px;display:block;} .cmt-n{position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box; border-radius:99px;background:var(--attn);color:#fff;font-size:9px;font-weight:700;line-height:14px; text-align:center;} .fld.commenting{background:var(--surface-2);} .fld-cmt{grid-column:1/-1;margin-top:10px;border-top:1px solid var(--border);padding-top:11px; display:flex;flex-direction:column;gap:9px;} .dk-fld .fld-cmt{margin-top:9px;} .fld-cmt-head{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);} .fld-cmt-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;} .fld-cmt textarea{width:100%;box-sizing:border-box;min-height:64px;resize:vertical; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm); color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.5;padding:8px 10px;outline:none;} .fld-cmt textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .fld-cmt-acts{display:flex;align-items:center;justify-content:flex-end;gap:7px;} .fld-cmt-acts .dt-btn{margin-left:0;} /* ---- hover tooltip ---- */ .tt{position:fixed;z-index:600000;pointer-events:none;width:310px;padding:0;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-pop); color:var(--text);display:none;overflow:hidden;} .tt-art{width:100%;height:150px;object-fit:cover;display:block;border-bottom:1px solid var(--border);background:var(--surface-2);} .tt-body{padding:11px 14px 13px;} .ttn{font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text);} .tt-meta{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-top:4px;} .tt-sect{font-size:11px;color:var(--text-3);margin-top:2px;} .ttr{font-size:12.5px;line-height:1.55;color:var(--text);margin-top:9px;} .ttr img,.ttr .glyph{height:13px;vertical-align:-2px;margin:0 1px;} .ttf{font-size:11.5px;font-style:italic;line-height:1.5;color:var(--text-3);margin-top:8px; padding-top:7px;border-top:1px solid var(--border);} .fc-White{color:#8A8A80;}.fc-Blue{color:#3B7DD8;}.fc-Gold{color:#9A8410;} .fc-Red{color:#C0392B;}.fc-Black{color:#6B7280;}.fc-multi{color:#8A8020;} [data-theme="dark"] .fc-White{color:#B8B8AE;}[data-theme="dark"] .fc-Blue{color:#6BA0FF;} [data-theme="dark"] .fc-Gold{color:#D9C24A;}[data-theme="dark"] .fc-Red{color:#F1786C;} [data-theme="dark"] .fc-Black{color:#9BA4B0;}[data-theme="dark"] .fc-multi{color:#D0C55A;}