/* ============================================================ Tests workbench v2 — tw- namespaced component layer. Loads AFTER app.css / theme-luxe.css / theme-dark.css and consumes their tokens; declares NO globals and touches no selector the chrome or the v1 workbench uses, so the two layouts coexist and the switch is instant. ============================================================ */ #tests-v2-root { --tw-pass: var(--pass, #3cc69a); --tw-fail: var(--fail, #c1153a); --tw-partial: var(--partial, #faa938); --tw-pending: #9a9b98; --tw-inprog: var(--accent, #4180f2); --tw-nt: #b6b7b4; --tw-coral: linear-gradient(135deg, #ff6b2e, #f04e0e); --tw-coral-hover: linear-gradient(135deg, #ff7a42, #f5581c); --tw-ink: #1d2554; --tw-ease: cubic-bezier(0.22, 1, 0.36, 1); --tw-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; display: flex; flex-direction: column; /* Fill the content-area viewport (header 56px + content padding 24px×2) so the list and inspector scroll internally, not the page. */ height: calc(100vh - var(--header-height, 56px) - 48px); min-height: 420px; } /* shared tokens for the overlay layers appended to */ .tw-pop-layer, .tw-modal-layer { --tw-pass: var(--pass, #3cc69a); --tw-fail: var(--fail, #c1153a); --tw-partial: var(--partial, #faa938); --tw-pending: #9a9b98; --tw-inprog: var(--accent, #4180f2); --tw-nt: #b6b7b4; --tw-coral: linear-gradient(135deg, #ff6b2e, #f04e0e); --tw-coral-hover: linear-gradient(135deg, #ff7a42, #f5581c); --tw-ink: #1d2554; --tw-ease: cubic-bezier(0.22, 1, 0.36, 1); --tw-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--font, 'Montserrat', sans-serif); color: var(--text); } [data-theme="dark"] .tw-pop-layer, [data-theme="dark"] .tw-modal-layer, [data-theme="dark"] #tests-v2-root { --tw-ink: #4a5694; } /* spec-gen proposal banner */ .tw-proposal-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; background: var(--bg-secondary); flex-shrink: 0; } /* ---------- command bar ---------- */ .tw-cmdbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow); position: relative; z-index: 5; flex-shrink: 0; } .tw-ctl { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: 12.5px; background: var(--bg-card); color: var(--text); white-space: nowrap; cursor: pointer; font-family: inherit; transition: all .2s var(--tw-ease); } .tw-ctl:hover { border-color: rgba(37,51,120,.22); background: var(--bg-hover); } .tw-caret { font-size: 9px; opacity: .55; } .tw-ctl-label { color: var(--text-muted); font-weight: 500; } .tw-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--tw-ink); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .tw-ctl.on { border-color: var(--tw-ink); background: var(--tw-ink); color: #fff; } .tw-ctl.on .tw-ctl-label { color: rgba(255,255,255,.65); } .tw-search { position: relative; display: flex; align-items: center; min-width: 150px; flex: 0 1 220px; } .tw-search svg { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; } .tw-search input { width: 100%; padding: 8px 12px 8px 33px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-secondary); color: var(--text); font-family: inherit; font-size: 13px; transition: all .2s var(--tw-ease); } .tw-search input:focus { background: var(--bg-card); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* the status spine — suite health that IS the status filter */ .tw-spine { flex: 1; display: flex; height: 26px; border-radius: 999px; overflow: hidden; min-width: 120px; box-shadow: inset 0 0 0 1px var(--border-light); } .tw-spine-seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 4px; border: 0; padding: 0; cursor: pointer; transition: filter .15s var(--tw-ease), opacity .2s var(--tw-ease); } .tw-spine-seg:hover { filter: brightness(1.06); } .tw-spine-seg .tw-seg-n { font-size: 10px; font-weight: 700; font-family: var(--tw-mono); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); opacity: 0; transition: opacity .15s; pointer-events: none; } .tw-spine-seg:hover .tw-seg-n, .tw-spine-seg.on .tw-seg-n { opacity: 1; } .tw-spine.filtered .tw-spine-seg:not(.on) { opacity: .28; } .tw-spine-seg.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); } .tw-cmd-actions { display: flex; align-items: center; gap: 8px; } /* buttons */ .twb { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: 12.5px; border: 0; cursor: pointer; font-family: inherit; color: var(--text); background: none; white-space: nowrap; transition: all .2s var(--tw-ease); } .twb-ghost { border: 1px solid var(--border); background: var(--bg-card); } .twb-ghost:hover { border-color: rgba(37,51,120,.22); background: var(--bg-hover); } .twb-cta { background: var(--tw-coral); color: #fff; box-shadow: 0 6px 16px -6px rgba(245,88,25,.55); } .twb-cta:hover { background: var(--tw-coral-hover); box-shadow: 0 8px 22px -6px rgba(245,88,25,.6); } .twb-icon { padding: 8px 11px; } .twb-ink { background: var(--tw-ink); color: #fff; } .twb-ink:hover { filter: brightness(1.12); } .twb-danger { color: var(--tw-fail); border: 1px solid rgba(193,21,58,.3); background: var(--bg-card); } .twb-danger:hover { background: rgba(193,21,58,.08); } .twb-sm { padding: 5px 11px; font-size: 11.5px; } /* quiet one-line active-filter summary (no pills) */ .tw-filter-summary { padding: 7px 18px 0; font-size: 11.5px; color: var(--text-secondary); display: flex; gap: 14px; align-items: center; flex-shrink: 0; } /* renderFilterBtn() takes this row down with the `hidden` attribute once no filter is active. Same author-vs-UA cascade as .tw-bulkbar[hidden] below — the display:flex above outranks the UA stylesheet's [hidden]{display:none}, so without this the emptied row keeps its 7px top padding as a phantom gap. */ .tw-filter-summary[hidden] { display: none; } .tw-filter-summary b { font-weight: 700; color: var(--text); } .tw-clear-link { color: var(--accent); font-weight: 600; cursor: pointer; } .tw-clear-link:hover { text-decoration: underline; } /* ---------- split ---------- */ .tw-split { flex: 1; display: flex; gap: 16px; min-height: 0; padding: 14px 0 4px; } .tw-list-pane { flex: 0 0 46%; min-width: 360px; overflow-y: auto; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-light); box-shadow: var(--shadow); scrollbar-width: thin; } .tw-inspector { flex: 1; min-width: 0; overflow-y: auto; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-light); box-shadow: var(--shadow); scrollbar-width: thin; } /* area group header */ .tw-area-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 9px 16px; background: var(--bg-card); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border-light); cursor: pointer; user-select: none; } /* Per-area select ("all the YMS ones") — item ec06ee45. Reveal mirrors the row checkbox rule below: invisible at rest so the header keeps its weight, shown on hover, and pinned visible whenever it carries state (checked or the partial dash) or the pane is already in selecting mode. opacity — not visibility/display — because the box stays clickable while transparent, which is what lets a first click land on it. */ .tw-area-head .tw-area-sel { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; } .tw-area-head .tw-area-cb { width: 14px; height: 14px; accent-color: var(--tw-ink); opacity: 0; transition: opacity .12s; flex-shrink: 0; cursor: pointer; margin: 0; } .tw-area-head:hover .tw-area-cb, .tw-area-head .tw-area-cb:checked, .tw-area-head .tw-area-cb:indeterminate, .tw-list-pane.selecting .tw-area-cb { opacity: 1; } .tw-area-head .tw-twirl { font-size: 9px; color: var(--text-muted); transition: transform .2s var(--tw-ease); } .tw-area-head.closed .tw-twirl { transform: rotate(-90deg); } .tw-area-head h3 { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin: 0; color: var(--text); } .tw-area-head .tw-area-n { font-size: 10.5px; color: var(--text-muted); font-family: var(--tw-mono); } .tw-area-head .tw-area-mini { display: flex; gap: 4px; margin-left: auto; align-items: center; } .tw-area-mini i { display: block; width: 7px; height: 7px; border-radius: 50%; font-style: normal; } .tw-area-head .tw-area-run { opacity: 0; font-size: 10.5px; font-weight: 700; color: var(--accent); padding: 3px 9px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-family: inherit; transition: opacity .15s; } .tw-area-head:hover .tw-area-run { opacity: 1; } .tw-area-head .tw-area-run:hover { background: var(--accent-soft); } /* rows */ .tw-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background .12s; position: relative; } .tw-row:hover { background: var(--bg-hover); } .tw-row.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .tw-row.checked { background: rgba(65,128,242,.06); } .tw-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--tw-ink); opacity: 0; transition: opacity .12s; flex-shrink: 0; } .tw-row:hover input, .tw-row input:checked, .tw-list-pane.selecting .tw-row input { opacity: 1; } .tw-row .tw-rid { font-family: var(--tw-mono); font-size: 10.5px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-row .tw-rtitle { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-row .tw-rglyphs { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .tw-rglyph { font-size: 11px; opacity: .8; cursor: help; } .tw-row .tw-rstatus { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; width: 86px; justify-content: flex-end; font-size: 10.5px; font-weight: 700; } .tw-rstatus i { width: 8px; height: 8px; border-radius: 50%; display: block; font-style: normal; } .tw-row .tw-rrun { position: absolute; right: 10px; opacity: 0; transition: opacity .12s; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; color: var(--text); cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); } .tw-row:hover .tw-rrun { opacity: 1; } .tw-row .tw-rrun:hover { border-color: #f04e0e; color: #f04e0e; } .tw-load-more { display: block; width: 100%; text-align: center; padding: 10px; font-size: 11.5px; font-weight: 600; color: var(--accent); border: 0; background: none; cursor: pointer; font-family: inherit; } .tw-load-more:hover { background: var(--bg-hover); } .tw-list-empty { padding: 60px 30px; text-align: center; color: var(--text-secondary); } .tw-list-empty .tw-big { font-size: 30px; margin-bottom: 10px; } .tw-list-empty h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; } .tw-list-empty p { font-size: 12px; line-height: 1.6; max-width: 380px; margin: 0 auto 14px; } /* status colors */ .tw-c-pass { background: var(--tw-pass); } .tw-c-fail { background: var(--tw-fail); } .tw-c-pending { background: var(--tw-pending); } .tw-c-partial { background: var(--tw-partial); } .tw-c-in-progress { background: var(--tw-inprog); } .tw-c-blocked { background: #7a0f26; } .tw-c-not-testable { background: var(--tw-nt); } .tw-t-pass { color: var(--tw-pass); } .tw-t-fail { color: var(--tw-fail); } .tw-t-pending { color: var(--tw-pending); } .tw-t-partial { color: #d98b13; } .tw-t-in-progress { color: var(--tw-inprog); } .tw-t-blocked { color: #7a0f26; } .tw-t-not-testable { color: var(--tw-nt); } /* ---------- inspector ---------- */ .tw-insp-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 10px; padding: 40px; text-align: center; } .tw-insp-empty .tw-big { font-size: 34px; opacity: .5; } .tw-insp-empty p { font-size: 12.5px; line-height: 1.6; max-width: 300px; } .tw-kbd { font-family: var(--tw-mono); font-size: 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; } .tw-insp-head { padding: 18px 22px 0; } .tw-insp-id-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .tw-insp-id { font-family: var(--tw-mono); font-size: 12px; font-weight: 700; color: var(--text-secondary); background: var(--bg-secondary); padding: 3px 10px; border-radius: 7px; } .tw-status-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all .15s var(--tw-ease); } .tw-status-chip:hover { filter: brightness(.97); box-shadow: var(--shadow-sm); } .tw-status-chip i { width: 8px; height: 8px; border-radius: 50%; display: block; font-style: normal; } .tw-s-pass { background: rgba(60,198,154,.16); color: #157a5b; } .tw-s-fail { background: rgba(193,21,58,.10); color: var(--tw-fail); } .tw-s-pending { background: rgba(103,104,101,.10); color: var(--text-secondary); } .tw-s-partial { background: rgba(250,169,56,.14); color: #b06d05; } .tw-s-in-progress { background: var(--accent-soft); color: var(--accent); } .tw-s-blocked { background: rgba(193,21,58,.10); color: #7a0f26; } .tw-s-not-testable { background: rgba(103,104,101,.10); color: #8b8c89; } [data-theme="dark"] .tw-s-pass { color: #5fe0b7; } [data-theme="dark"] .tw-s-partial { color: #ffc46b; } .tw-insp-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 4px; color: var(--text); } .tw-insp-sub { font-size: 11.5px; color: var(--text-secondary); display: flex; gap: 14px; flex-wrap: wrap; } .tw-insp-sub b { font-weight: 600; color: var(--text); } .tw-insp-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; } .tw-tabs { display: flex; gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--border-light); padding: 0 22px; } .tw-tab { padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--text-secondary); border: 0; background: none; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .tw-tab:hover { color: var(--text); } .tw-tab.on { color: var(--text); border-bottom-color: var(--tw-ink); } .tw-tab .tw-tab-n { font-size: 9.5px; font-family: var(--tw-mono); background: var(--bg-secondary); padding: 1px 6px; border-radius: 999px; margin-left: 5px; color: var(--text-muted); } .tw-tab-body { padding: 18px 22px 30px; } .tw-sect { margin-bottom: 20px; } .tw-sect > h4 { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; } .tw-sect p { font-size: 12.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0; } .tw-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tw-meta-cell { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 9px 12px; } .tw-meta-cell .tw-k { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .tw-meta-cell .tw-v { font-size: 12px; font-weight: 600; margin-top: 3px; color: var(--text); } /* steps */ .tw-steps { counter-reset: twstep; } .tw-step { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-light); font-size: 12.5px; line-height: 1.6; color: var(--text); } .tw-step::before { counter-increment: twstep; content: counter(twstep, decimal-leading-zero); font-family: var(--tw-mono); font-size: 10px; font-weight: 700; color: var(--text-muted); padding-top: 3px; flex-shrink: 0; } .tw-step.exp::before { content: "✓"; color: var(--tw-pass); font-size: 12px; } /* ---------- hardening provenance rail ---------- */ .tw-harden-rail { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; background: linear-gradient(180deg, rgba(65,128,242,.035), transparent 55%); } .tw-hr-track { display: flex; align-items: center; gap: 0; margin-bottom: 10px; } .tw-hr-node { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .tw-hr-node .tw-nd { width: 9px; height: 9px; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 3px rgba(37,51,120,.05); } .tw-hr-node.done { color: var(--text); } .tw-hr-node.done .tw-nd { background: var(--tw-ink); } .tw-hr-node.live { color: var(--accent); } .tw-hr-node.live .tw-nd { background: var(--accent); animation: tw-pulse 2s infinite; } .tw-hr-node.gold { color: #157a5b; } .tw-hr-node.gold .tw-nd { background: var(--tw-pass); } .tw-hr-link { flex: 1; height: 1.5px; background: var(--border); margin: 0 8px; min-width: 14px; } .tw-hr-link.done { background: var(--tw-ink); } @keyframes tw-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(65,128,242,.15);} 50% { box-shadow: 0 0 0 6px rgba(65,128,242,.06);} } .tw-hr-blurb { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; } .tw-hr-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .tw-hr-stamp { font-size: 11px; font-weight: 700; color: #157a5b; display: inline-flex; align-items: center; gap: 6px; } /* harden diff */ .tw-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .tw-diff-col { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; } .tw-diff-col > h5 { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 8px 12px; margin: 0; } .tw-diff-col.was > h5 { background: var(--bg-secondary); color: var(--text-muted); } .tw-diff-col.now > h5 { background: rgba(60,198,154,.16); color: #157a5b; } .tw-diff-col ul { list-style: none; padding: 6px 12px 10px; margin: 0; max-height: 300px; overflow-y: auto; } .tw-diff-col li { font-size: 11.5px; line-height: 1.6; padding: 5px 0; border-bottom: 1px dashed var(--border-light); word-break: break-word; color: var(--text); } .tw-diff-col.was li { color: var(--text-secondary); } .tw-unverified { border-left: 3px solid var(--tw-partial); background: rgba(250,169,56,.10); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin-top: 12px; } .tw-unverified h5 { font-size: 10.5px; font-weight: 800; color: #b06d05; margin: 0 0 5px; } .tw-unverified li { font-size: 11.5px; line-height: 1.6; margin-left: 16px; color: var(--text); } /* runs */ .tw-run-item { border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 15px; margin-bottom: 12px; transition: box-shadow .2s var(--tw-ease); } .tw-run-item:hover { box-shadow: var(--shadow); } .tw-run-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tw-run-head .tw-mode { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .tw-run-head .tw-when { font-size: 11px; color: var(--text-muted); margin-left: auto; font-family: var(--tw-mono); } .tw-run-notes { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; margin-top: 8px; max-height: 120px; overflow: hidden; position: relative; white-space: pre-wrap; word-break: break-word; } .tw-run-notes.open { max-height: none; } .tw-run-notes:not(.open)::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, var(--bg-card)); } .tw-run-notes code { font-family: var(--tw-mono); font-size: 10.5px; background: var(--bg-secondary); padding: 1px 5px; border-radius: 4px; } .tw-run-more { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; } .tw-shots { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .tw-shot { width: 88px; height: 58px; border-radius: 8px; object-fit: cover; object-position: top; border: 1px solid var(--border); cursor: zoom-in; transition: transform .18s var(--tw-ease), box-shadow .18s; } .tw-shot:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-md); } .tw-shot-ph { width: 88px; height: 58px; border-radius: 8px; background: var(--bg-secondary); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: var(--text-muted); text-align: center; padding: 4px; } .tw-wms-note { font-size: 11px; color: var(--text-secondary); background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 8px; line-height: 1.5; } /* ---------- popovers ---------- */ .tw-pop-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; } .tw-pop { position: absolute; pointer-events: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 230px; max-width: 360px; animation: tw-popin .18s var(--tw-ease); overflow: hidden; } @keyframes tw-popin { from { opacity: 0; transform: translateY(-5px) scale(.98); } } .tw-pop-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 12px 16px 6px; } .tw-pop-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: var(--text); border: 0; background: none; cursor: pointer; font-family: inherit; transition: background .1s; } .tw-pop-opt:hover { background: var(--bg-hover); } .tw-pop-opt.on { background: var(--accent-soft); } .tw-pop-opt .tw-n { margin-left: auto; font-family: var(--tw-mono); font-size: 10.5px; color: var(--text-muted); } .tw-pop-opt .tw-hint { display: block; font-size: 10.5px; color: var(--text-secondary); font-weight: 400; margin-top: 2px; } .tw-pop-opt .tw-check { width: 15px; text-align: center; color: var(--tw-ink); font-weight: 800; } .tw-pop-sep { height: 1px; background: var(--border-light); margin: 6px 0; } .tw-pop-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-light); background: var(--bg-secondary); } .tw-pop-foot .tw-spacer { flex: 1; } /* filter popover */ .tw-fpop { width: 330px; max-width: 330px; } .tw-fpop-body { max-height: 62vh; overflow-y: auto; padding-bottom: 4px; } .tw-f-sect { padding: 4px 0 8px; } .tw-f-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text); border: 0; background: none; cursor: pointer; font-family: inherit; border-radius: 0; transition: background .1s; } .tw-f-row:hover { background: var(--bg-hover); } .tw-f-row i { width: 9px; height: 9px; border-radius: 50%; display: block; font-style: normal; flex-shrink: 0; } .tw-f-row .tw-n { margin-left: auto; font-family: var(--tw-mono); font-size: 10.5px; color: var(--text-muted); } .tw-f-row .tw-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; flex-shrink: 0; transition: all .12s var(--tw-ease); } .tw-f-row.on .tw-check { background: var(--tw-ink); border-color: var(--tw-ink); } .tw-f-row.dim { opacity: .45; } .tw-f-select { margin: 2px 16px 8px; width: calc(100% - 32px); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text); font-weight: 600; font-family: inherit; font-size: 12.5px; } .tw-f-toggle-track { width: 30px; height: 17px; background: var(--border); border-radius: 999px; position: relative; transition: background .15s var(--tw-ease); flex-shrink: 0; } .tw-f-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: left .15s var(--tw-ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .tw-f-row.on .tw-f-toggle-track { background: var(--tw-ink); } .tw-f-row.on .tw-f-toggle-track::after { left: 15px; } /* ---------- modals ---------- */ .tw-modal-layer { position: fixed; inset: 0; z-index: 950; display: none; } .tw-modal-layer.show { display: flex; align-items: center; justify-content: center; background: rgba(23,26,63,.45); animation: tw-fade .2s var(--tw-ease); } @keyframes tw-fade { from { opacity: 0; } } .tw-modal { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(600px, 94vw); max-height: 86vh; overflow-y: auto; padding: 24px; animation: tw-mup .25s var(--tw-ease); } @keyframes tw-mup { from { opacity: 0; transform: translateY(14px) scale(.98); } } .tw-modal h3 { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--text); } .tw-modal .tw-m-sub { font-size: 12px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.55; } .tw-modal label.tw-fl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 5px; } .tw-modal input[type="text"], .tw-modal textarea, .tw-modal select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text); resize: vertical; font-family: inherit; font-size: 13px; box-sizing: border-box; } .tw-modal input:focus, .tw-modal textarea:focus { background: var(--bg-card); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .tw-m-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-light); align-items: center; } .tw-m-foot .tw-m-status { margin-right: auto; font-size: 11.5px; color: var(--text-secondary); } .tw-gen-card { display: flex; gap: 12px; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; margin-bottom: 9px; transition: all .15s var(--tw-ease); } .tw-gen-card:hover { border-color: var(--accent); background: var(--bg-hover); } .tw-gen-card.on { border-color: var(--tw-ink); background: var(--accent-soft); } .tw-gen-card .tw-gi { font-size: 17px; } .tw-gen-card b { font-size: 13px; display: block; margin-bottom: 2px; color: var(--text); } .tw-gen-card span { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; } /* ---------- bulk bar ---------- */ .tw-bulkbar { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 800; display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 18px; background: var(--tw-ink); color: #fff; border-radius: 999px; box-shadow: 0 16px 40px -8px rgba(29,37,84,.55); animation: tw-bup .28s var(--tw-ease); white-space: nowrap; } /* Item 718d8988: `hidden` is the ONLY way renderBulk() takes this bar down — it sets bar.hidden = true the moment the selection empties, and the shell ships the element pre-hidden before anything is selected. But `display: flex` above is an AUTHOR declaration and the [hidden]{display:none} it relies on lives in the User-Agent stylesheet, which every author rule outranks regardless of specificity. So the bar stayed painted at the bottom of the viewport — with the stale count it last rendered, since renderBulk() returns before rewriting its contents on the empty path — and the ✕ inside it could not close it either, because ✕ just clears the selection and re-enters the same hide. Restating it here is what makes the attribute mean anything. */ .tw-bulkbar[hidden] { display: none; } @keyframes tw-bup { from { opacity: 0; transform: translateX(-50%) translateY(16px); } } .tw-bulkbar .tw-bcount { font-size: 12px; font-weight: 800; margin-right: 8px; } .tw-bulkbar button { padding: 7px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.92); border: 0; background: none; cursor: pointer; font-family: inherit; transition: background .12s; } .tw-bulkbar button:hover { background: rgba(255,255,255,.13); } .tw-bulkbar .tw-b-run { background: var(--tw-coral); } .tw-bulkbar .tw-b-run:hover { background: var(--tw-coral-hover); } .tw-bulkbar .tw-b-danger:hover { background: rgba(193,21,58,.55); } .tw-bulkbar .tw-b-x { padding: 7px 10px; opacity: .7; } /* lightbox */ .tw-lightbox { position: fixed; inset: 0; z-index: 990; background: rgba(23,26,63,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: tw-fade .2s; } .tw-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* responsive */ @media (max-width: 1100px) { .tw-split { flex-direction: column; } .tw-list-pane { flex: 1; min-width: 0; } .tw-inspector { display: none; } .tw-spine { display: none; } }