/* Canonical application shell. Page components own their content, not navigation. */
.modal-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(11,17,32,.58); }
.modal-container { width:min(600px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:22px; border:1px solid #d5dbe0; border-radius:6px; background:#fff; color:#18212a; box-shadow:0 18px 55px #0003; }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.modal-header h2 { margin:0; font-size:20px; }
.close-btn { display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; color:#667281; font-size:22px; cursor:pointer; }
.modal-footer { display:flex; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid #e0e5e9; }
.modal-footer .btn-primary { flex:1; }
.btn-primary,.btn-secondary { min-height:40px; padding:8px 14px; border-radius:3px; font:650 13px "Segoe UI",Arial,sans-serif; cursor:pointer; }
.btn-primary { border:1px solid #263746; background:#263746; color:#fff; }
.btn-secondary { border:1px solid #aeb8c1; background:#fff; color:#263746; }
#failedModal,#blockedModal { position:fixed!important; inset:0!important; z-index:200!important; align-items:center!important; justify-content:center!important; padding:20px!important; background:rgba(17,24,32,.46)!important; }
#failedModal .modal-content,#blockedModal .modal-content { position:relative!important; top:auto!important; left:auto!important; transform:none!important; margin:auto!important; width:min(480px,100%)!important; max-height:calc(100dvh - 40px)!important; overflow-y:auto!important; border-radius:5px!important; background:#fff!important; box-shadow:0 16px 48px #0003!important; }
#failedModal .modal-header,#blockedModal .modal-header { background:#f7f8f9!important; border-radius:0!important; color:#18212a!important; padding:16px 20px!important; }
#failedModal .modal-header h3,#blockedModal .modal-header h3 { color:#18212a!important; }
#failedModal .modal-body,#blockedModal .modal-body { padding:20px!important; }
#failedModal .modal-footer,#blockedModal .modal-footer { position:sticky; bottom:0; background:#fff!important; padding:14px 20px!important; }
#failedModal .btn,#blockedModal .btn { border-radius:3px!important; box-shadow:none!important; background-image:none!important; }
#failedModal .btn-danger { background:#b42318!important; color:#fff!important; }
#blockedModal .btn-warning { background:#694a0c!important; color:#fff!important; }
.execution-feedback { margin-bottom:12px; padding:10px 14px; border:1px solid #b7d5c5; border-radius:3px; background:#f0f8f3; color:#215738; }
.execution-feedback.error { border-color:#e5b8b8; background:#fff4f4; color:#922b2b; }
.execution-feedback[hidden] { display:none; }
.signin-shell .brand-panel { background:#111!important; }
.signin-shell .brand-panel::after { display:none!important; }
.signin-shell .brand-panel::before { background:#ffe800!important; height:4px!important; }
.signin-shell .trust-grid { display:none; }
.signin-shell .brand-message h1 { font-size:clamp(30px,3.3vw,46px)!important; max-width:520px; }
.signin-shell .signin-button { background:#263746!important; }
.signin-shell fieldset .signin-button { display:block; width:100%; min-height:44px; padding:10px 16px; border:0; border-radius:3px; color:#fff; font:600 14px "Segoe UI",Arial,sans-serif; margin-top:20px; cursor:pointer; }
.signin-shell fieldset input { border-radius:3px!important; }
.signin-shell .signin-button:hover { background:#14212b!important; }
.signin-shell input:focus { border-color:#647684!important; box-shadow:0 0 0 3px #e4e9ed!important; }
.signin-shell .remember input { accent-color:#263746!important; }
:root { --ui-primary:#263746; --ui-primary-hover:#14212b; --ui-soft:#fffbe0; --ui-bg:#f3f4f5; --ui-text:#18212a; --ui-muted:#5e6974; --ui-border:#d5dbe0; --brand-yellow:#ffe800; }
#ido-workspace .app-main { font-family:"Segoe UI",Arial,sans-serif!important; font-size:14px; line-height:1.5; }
#ido-workspace .app-main input,#ido-workspace .app-main select,#ido-workspace .app-main button,#ido-workspace .app-main textarea { font-family:inherit; }
#ido-workspace .users-kpis .kpi-icon { display:none!important; }
#ido-workspace .users-kpis .kpi-card { grid-template-columns:minmax(0,1fr)!important; }
#ido-workspace .users-kpis { width:100%; }
#ido-workspace .avatar { background:#e8edf0!important; color:#344754!important; border-radius:4px!important; font-weight:600!important; }
#ido-workspace .avatar.large { border-radius:4px; }
#ido-workspace .auto-card { min-width:0; overflow:auto; }
#ido-workspace .stat-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
#ido-workspace .stat-card { min-width:0; border-radius:4px; }
@media(max-width:760px) {
 #ido-workspace .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #ido-workspace .auto-header { align-items:flex-start; flex-wrap:wrap; }
}
#ido-workspace { min-height:100dvh; font-family:"Segoe UI",Arial,sans-serif; background:var(--ui-bg); }
#ido-workspace.app-layout { display:block!important; }
/* border-box keeps the declared width the real width: .app-main and .enterprise-topbar are
   offset by exactly 224px, so content-box padding would let the rail overlap the content. */
#ido-workspace .enterprise-sidebar { box-sizing:border-box; position:fixed!important; inset:0 auto 0 0; width:224px!important; display:flex; flex-direction:column; z-index:30; padding:0 12px 12px!important; background:#fff!important; border-right:1px solid #d5dbe0!important; color:#18212a!important; }
#ido-workspace .enterprise-brand {
  display:flex; align-items:center; justify-content:flex-start;
  box-sizing:border-box; height:58px; min-height:58px; flex:none;
  margin:0 -12px 14px; padding:0 20px!important;
  border-bottom:1px solid #d5dbe0;
}
#ido-workspace .brand-logo-full { width:160px; height:40px; display:block; }
#ido-workspace .brand-logo-inverse { display:none; width:160px; height:40px; }
#ido-workspace .brand-logo-mark { display:none; width:32px; height:32px; }
#ido-workspace .enterprise-nav { display:grid; gap:2px!important; align-content:start; overflow:auto; }
#ido-workspace .enterprise-nav-group { display:grid; gap:2px!important; border-top:1px solid #e0e5e9!important; margin:12px 0 0!important; padding:10px 0 0!important; }
/* Every nav section is a group so the hierarchy is one structure, not a loose list plus
   groups. The first section has no divider above it. */
#ido-workspace .enterprise-nav-group.root-group { border-top:0!important; margin:0!important; padding:0!important; }
#ido-workspace .nav-group-label { color:#717b84!important; padding:0 10px 5px; font-size:10px!important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#ido-workspace .enterprise-nav-link, #ido-workspace .collapse-button { min-height:34px!important; display:flex; align-items:center; gap:10px; padding:8px 10px!important; border:0; border-radius:3px!important; background:transparent!important; color:#46535e!important; font-size:13px!important; font-weight:550!important; text-decoration:none!important; cursor:pointer; }
#ido-workspace .enterprise-nav-link:hover, #ido-workspace .collapse-button:hover { background:#f2f4f5!important; color:#18212a!important; }
#ido-workspace .enterprise-nav-link.active { background:#fffbe0!important; color:#18212a!important; box-shadow:inset 3px 0 0 #e0c900!important; font-weight:700!important; }
#ido-workspace .nav-glyph { display:grid!important; place-items:center; flex:0 0 18px; width:18px!important; height:18px!important; color:currentColor!important; background:none!important; border:0!important; border-radius:0!important; font-size:20px!important; }
#ido-workspace .nav-glyph::before, #ido-workspace .nav-glyph::after { display:none!important; }
#ido-workspace .nav-glyph svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#ido-workspace .collapse-button { width:100%; }
/* Sidebar footer: automation mode switch sits above the width control. */
#ido-workspace .shell-footer { margin-top:auto; display:grid; gap:2px; padding-top:10px; border-top:1px solid #e0e5e9; }
#ido-workspace .mode-toggle { min-height:40px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px!important; border:0; border-radius:3px; background:transparent; color:#46535e; cursor:pointer; }
#ido-workspace .mode-toggle:hover { background:#f2f4f5; color:#18212a; }
#ido-workspace .mode-toggle-text { display:grid; gap:1px; text-align:left; }
#ido-workspace .mode-toggle-label { font-size:13px; font-weight:600; }
#ido-workspace .mode-toggle-state { color:#8b949c; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
#ido-workspace .mode-switch { position:relative; flex:0 0 30px; width:30px; height:17px; border-radius:9px; background:#cdd4d9; transition:background .18s ease; }
#ido-workspace .mode-knob { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #0003; transition:transform .18s ease; }
#ido-workspace .mode-toggle.on .mode-switch { background:#111820; }
#ido-workspace .mode-toggle.on .mode-knob { transform:translateX(13px); background:var(--brand-yellow); }
#ido-workspace .mode-toggle.on .mode-toggle-state { color:#8a7a00; }
#ido-workspace.sidebar-collapsed .shell-footer { justify-items:center; }
#ido-workspace.sidebar-collapsed .mode-toggle { justify-content:center; }
#ido-workspace.sidebar-collapsed .mode-toggle-text { display:none; }
/* The bar paints itself dark but used to inherit the light-background text colour, so
   anything placed in it was invisible until someone remembered to colour it by hand.
   Every other child here does that; .workspace-name never did, and the workspace name
   rendered #18212a on #14191E, a contrast ratio of 1.04:1. Setting the foreground on
   the bar itself is the fix that also covers whatever is added to it next. */
#ido-workspace .enterprise-topbar { position:fixed!important; top:0; left:224px!important; right:0; height:58px!important; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 22px!important; z-index:25; background:#14191e!important; color:#E8ECEF!important; border:0!important; box-shadow:none!important; }
#ido-workspace .workspace-context { display:flex; align-items:center; gap:9px; min-width:145px; }
#ido-workspace .organization-context select { min-width:150px; max-width:240px; height:34px; border:1px solid #46515b; border-radius:3px; padding:0 30px 0 10px; background:#242c33; color:#fff; font-size:12px; font-weight:650; }
#ido-workspace .organization-context select:focus { outline:2px solid #ffe800; outline-offset:2px; }
#ido-workspace .organization-context .workspace-health { padding-left:9px; border-left:1px solid #46515b; }
#ido-workspace .workspace-kicker { color:#fff; font-size:12px; font-weight:650; }
/* The workspace the user is in. It sits where the switcher would be if there were more
   than one, so it carries the same weight the switcher does. */
#ido-workspace .workspace-name {
  color:#fff!important; font-size:13px; font-weight:650; letter-spacing:-.005em;
  max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#ido-workspace .workspace-health { color:#a8b0b7; font-size:10px; }
#ido-workspace .global-search { display:flex; align-items:center; gap:8px; width:min(570px,45vw)!important; height:34px!important; border:1px solid #46515b!important; border-radius:3px!important; padding:0 10px!important; background:#242c33!important; }
#ido-workspace .global-search input { flex:1; min-width:0; height:30px!important; padding:0!important; border:0!important; background:transparent!important; color:#fff!important; box-shadow:none!important; font-size:12px; }
#ido-workspace .global-search input::placeholder { color:#a4afb9; }
#ido-workspace .global-search:focus-within { outline:2px solid #ffe800; outline-offset:2px; }
#ido-workspace .search-icon { color:#a4afb9; font-size:20px; }
#ido-workspace .search-submit { color:#ffe800!important; border:0!important; background:transparent!important; font-size:11px; font-weight:650; }
#ido-workspace .topbar-actions { display:flex; align-items:center; gap:16px; }
#ido-workspace .help-link { color:#c8cfd5; font-size:11px; text-decoration:none; }
#ido-workspace .user-menu-wrap { position:relative; }
#ido-workspace .user-chip { display:flex; align-items:center; gap:9px; border:0; padding:3px; min-height:38px!important; background:transparent!important; color:white!important; cursor:pointer; }
#ido-workspace .user-avatar { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:3px!important; background:#fff3a3!important; color:#302900!important; font-size:11px; font-weight:700; }
#ido-workspace .user-chip-text { display:grid; gap:2px; text-align:left; }
#ido-workspace .user-chip-text span { color:#fff!important; font-size:12px; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ido-workspace .user-chip-text small { color:#a8b0b7!important; font-size:10px; }
#ido-workspace .caret { color:#a8b0b7!important; }
#ido-workspace .caret::after { display:none!important; }
#ido-workspace .caret::before { display:none!important; }
#ido-workspace .user-dropdown { position:absolute; top:calc(100% + 12px); right:0; width:280px; background:#fff; border:1px solid #cbd2d8; border-radius:4px!important; padding:14px; box-shadow:0 8px 25px #0002; }
#ido-workspace .user-dropdown-head { display:flex; gap:12px; padding-bottom:12px; border-bottom:1px solid #e0e5e9; color:#18212a; }
#ido-workspace .user-dropdown-head div { display:grid; gap:4px; font-size:12px; }
#ido-workspace .dropdown-row { display:flex; justify-content:space-between; color:#46535e; padding:14px 0; font-size:12px; }
#ido-workspace .logout-button { min-height:34px; width:100%; background:#fff; border:1px solid #aeb8c1; color:#18212a; cursor:pointer; }
#ido-workspace .app-main { margin-left:224px!important; padding:82px 26px 32px!important; min-height:100dvh; background:#f3f4f5!important; display:block!important; }
#ido-workspace .auth-main { margin:0!important; padding:0!important; }
#ido-workspace.sidebar-collapsed .enterprise-sidebar { width:64px!important; padding-inline:8px!important; }
#ido-workspace.sidebar-collapsed .enterprise-topbar { left:64px!important; }
#ido-workspace.sidebar-collapsed .app-main { margin-left:64px!important; }
#ido-workspace.sidebar-collapsed .brand-logo-full { display:none; }
#ido-workspace.sidebar-collapsed .nav-text,
#ido-workspace.sidebar-collapsed .nav-group-label {
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
#ido-workspace.sidebar-collapsed .brand-logo-mark { display:block; }
#ido-workspace.sidebar-collapsed .enterprise-brand { justify-content:center; padding:0 8px!important; margin-inline:-8px; }
#ido-workspace.sidebar-collapsed .enterprise-nav-link,
#ido-workspace.sidebar-collapsed .collapse-button {
  justify-content:center; gap:0; padding-inline:0!important;
}
/* The clipped labels are taken out of the flow by position:absolute, so the groups
   close up on their own. They keep a gap between them so the icon runs still read as
   separate groups without their headings. */
#ido-workspace.sidebar-collapsed .enterprise-nav-group + .enterprise-nav-group { margin-top:10px; }
.skip-link { position:fixed; left:240px; top:-60px; z-index:100; padding:10px 16px; background:#ffe800; color:#111; }
.skip-link:focus { top:8px; }
.app-main .page-header { margin-bottom:16px!important; }
.app-main .page-title,.app-main .page-heading h1 { font-size:24px!important; color:#18212a!important; }
.app-main .primary-button,.app-main .btn-primary,.app-main .button.primary,.app-main .primary-action { background:#263746!important; border-color:#263746!important; color:#fff!important; }
.app-main .primary-button:hover,.app-main .button.primary:hover { background:#14212b!important; }
.app-main .content-card,.app-main .auto-card { border:1px solid #d5dbe0!important; border-radius:4px!important; box-shadow:none!important; }
.app-main .kpi-card > div { display:grid; gap:5px; }
.app-main tbody tr:hover { background:#fffdf0!important; }
.app-main .table-wrap,.app-main .matrix-scroll { overflow:auto; }
#ido-workspace .stats-bar { border:1px solid #d5dbe0!important; border-radius:4px!important; box-shadow:none!important; padding:16px!important; }
#ido-workspace .back-button { width:auto!important; display:inline-flex!important; padding:6px 10px!important; background:transparent!important; }
#ido-workspace .back-link { width:auto!important; display:inline-flex!important; padding:6px 10px!important; background:transparent!important; }
#ido-workspace .primary-button { background:#263746!important; border-color:#263746!important; color:white!important; }
.app-main button:disabled { opacity:.55; cursor:not-allowed; }
h1:focus { outline:none!important; }
@media (max-width:1000px) { #ido-workspace .organization-context select { max-width:180px; } #ido-workspace .global-search { width:100%!important; } }
@media (max-width:760px) {
 #ido-workspace .enterprise-sidebar,#ido-workspace.sidebar-collapsed .enterprise-sidebar { position:relative!important; width:100%!important; padding:12px!important; }
 #ido-workspace .enterprise-brand { padding:0 4px 12px!important; }
 #ido-workspace .enterprise-nav { display:flex!important; overflow:auto; gap:4px!important; }
 #ido-workspace .enterprise-nav-group { display:contents!important; }
 #ido-workspace .nav-group-label,#ido-workspace .collapse-button { display:none!important; }
 #ido-workspace .shell-footer { margin:10px 0 0!important; padding-top:8px; }
 #ido-workspace .enterprise-nav-link { flex-shrink:0; }
 #ido-workspace .enterprise-topbar,#ido-workspace.sidebar-collapsed .enterprise-topbar { position:sticky!important; left:0!important; top:0; padding:8px 12px!important; height:52px!important; gap:12px; }
 #ido-workspace .app-main,#ido-workspace.sidebar-collapsed .app-main { margin-left:0!important; padding:20px 14px!important; }
 #ido-workspace .user-chip-text,#ido-workspace .help-link { display:none; }
 #ido-workspace .organization-context { min-width:0; flex:1; }
 #ido-workspace .organization-context select { min-width:0; width:min(210px,100%); }
 #ido-workspace .organization-context .workspace-health { display:none; }
 #ido-workspace .enterprise-topbar { display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; }
 #ido-workspace .global-search { flex:1; min-width:0!important; width:auto!important; }
 #ido-workspace .topbar-actions { flex:0 0 auto!important; width:auto!important; margin:0!important; }
 .skip-link { left:10px; }
}

/* ── Automation mode ─────────────────────────────────────────────────────────
   The same shell rendered as a dark engineering surface. Only the chrome is
   restyled here; the automation workspace itself owns its interior layout. */
#ido-workspace.automation-mode { background:#0b0e11; }
#ido-workspace.automation-mode .enterprise-sidebar { background:#101418!important; border-right:1px solid #23292f!important; color:#c8d0d7!important; }
#ido-workspace.automation-mode .enterprise-nav-link,#ido-workspace.automation-mode .collapse-button,#ido-workspace.automation-mode .mode-toggle { color:#93a0aa!important; }
#ido-workspace.automation-mode .enterprise-nav-link:hover,#ido-workspace.automation-mode .collapse-button:hover,#ido-workspace.automation-mode .mode-toggle:hover { background:#191f25!important; color:#f0f4f7!important; }
#ido-workspace.automation-mode .enterprise-nav-link.active { background:#191f25!important; color:#fff!important; box-shadow:inset 3px 0 0 var(--brand-yellow)!important; }
#ido-workspace.automation-mode .nav-group-label { color:#6b7883!important; }
#ido-workspace.automation-mode .enterprise-nav-group,#ido-workspace.automation-mode .shell-footer { border-top-color:#23292f!important; }
#ido-workspace.automation-mode .mode-switch { background:#2b333a; }
#ido-workspace.automation-mode .mode-toggle.on .mode-switch { background:#3a4149; }
#ido-workspace.automation-mode .mode-toggle.on .mode-toggle-state { color:var(--brand-yellow); }
#ido-workspace.automation-mode .enterprise-topbar { background:#101418!important; border-bottom:1px solid #23292f!important; }
/* border-box folds the topbar offset into the 100dvh minimum so the mode does not scroll by
   the height of its own header. */
#ido-workspace.automation-mode .app-main { box-sizing:border-box; background:#0b0e11!important; padding:58px 0 0!important; }
#ido-workspace.automation-mode .brand-logo-full { display:none; }
#ido-workspace.automation-mode .brand-logo-inverse { display:block; }
#ido-workspace.automation-mode.sidebar-collapsed .brand-logo-inverse { display:none; }
/* Organization administration lives in the identity menu, not in the content rail. */
#ido-workspace .dropdown-link { display:block; margin:12px 0 10px; padding:9px 11px; border:1px solid #d5dbe0; border-radius:3px; color:#18212a!important; font-size:12px; font-weight:650; text-decoration:none!important; }
#ido-workspace .dropdown-link:hover { background:#f2f4f5; }
#ido-workspace .dropdown-link.current { border-color:#e0c900; background:#fffbe0; }

/* ---- Phase 6D: canonical search and staged import -------------------------
   Built from the existing tokens only: --ui-primary #263746, --ui-border #d5dbe0,
   --brand-yellow #ffe800, 3px radius, 36px controls, 13px dense type. No new palette,
   no card wrappers, no shadows. Yellow is used as a selected-state accent and never as
   text on white. */
#ido-workspace .cs-filters,
#ido-workspace .cs-context,
#ido-workspace .imp-row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 12px; }

/* .button carries a fill and nothing else: every container that uses one declares its
   own height, padding and radius, and a container that forgets gets white text on a
   rectangle drawn tight around the glyphs. This panel was one of those. The import
   panel's buttons are shaped here rather than left to inherit a shape that does not
   exist. */
#ido-workspace .app-main .imp-panel .button {
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; min-height:38px; padding:0 16px; flex:none;
  border:1px solid var(--trw-border); border-radius:8px;
  background:var(--trw-surface); color:var(--trw-text);
  font-size:13.5px; font-weight:600; line-height:1; cursor:pointer;
}
#ido-workspace .app-main .imp-panel .button.primary {
  border-color:var(--trw-text); background:var(--trw-text); color:#fff;
}
#ido-workspace .app-main .imp-panel .button.primary:hover:not(:disabled) { background:#000; border-color:#000; }
#ido-workspace .app-main .imp-panel .button:disabled { opacity:.45; cursor:not-allowed; }
#ido-workspace .cs-field { display:grid; gap:4px; min-width:0; flex:0 1 170px; }
#ido-workspace .cs-field.cs-grow { flex:1 1 240px; }
#ido-workspace .cs-field.cs-actions { flex-direction:row; display:flex; gap:8px; align-items:flex-end; }
#ido-workspace .cs-field label,
#ido-workspace .imp-channel label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#717b84; }
#ido-workspace .cs-panel .form-input,
#ido-workspace .imp-panel .form-input,
#ido-workspace .imp-channel .form-input { min-height:34px; border:1px solid #d5dbe0; border-radius:3px; background:#fff; color:#18212a; font-size:13px; padding:6px 8px; }
#ido-workspace .cs-size { max-width:140px; }

#ido-workspace .cs-table { width:100%; border-collapse:collapse; font-size:13px; }
#ido-workspace .cs-table th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#717b84; border-bottom:1px solid #d5dbe0; padding:7px 8px; }
#ido-workspace .cs-table td { border-bottom:1px solid #eef1f3; padding:7px 8px; color:#18212a; }
#ido-workspace .cs-table tbody tr:hover { background:#f7f9fb; }
#ido-workspace .cs-sort { border:0; background:none; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; }
#ido-workspace .cs-sort:hover { color:#263746; }

#ido-workspace .cs-state { margin:10px 0; font-size:13px; color:#5e6974; }
#ido-workspace .cs-state.error { color:#b42318; }

#ido-workspace .cs-pager { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding-top:10px; font-size:13px; color:#5e6974; }
#ido-workspace .cs-pager-actions { display:flex; gap:8px; align-items:center; }

#ido-workspace .cs-stale { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:8px 10px; margin:0 0 12px; font-size:13px; border:1px solid #e6d98a; background:#fffbe0; color:#18212a; border-radius:3px; }
#ido-workspace .cs-stale-item { display:inline-flex; gap:6px; align-items:center; }

#ido-workspace .cs-saved { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; font-size:13px; color:#5e6974; }
#ido-workspace .cs-chip { display:inline-flex; gap:4px; align-items:center; border:1px solid #d5dbe0; border-radius:3px; padding:2px 6px; background:#fff; }

#ido-workspace .imp-stages { display:flex; flex-wrap:wrap; gap:16px; list-style:none; margin:0 0 16px; padding:0 0 10px; border-bottom:1px solid #d5dbe0; font-size:12px; color:#717b84; }
#ido-workspace .imp-stages li { display:flex; gap:6px; align-items:center; }
#ido-workspace .imp-stages li.current { color:#18212a; font-weight:700; }
#ido-workspace .imp-stages li.done { color:#5e6974; }
#ido-workspace .imp-step { display:grid; place-items:center; width:18px; height:18px; border-radius:3px; background:#eef1f4; color:#263746; font-size:11px; font-weight:700; }
#ido-workspace .imp-stages li.current .imp-step { background:#ffe800; color:#18212a; }
#ido-workspace .imp-stages li.done .imp-step { background:#263746; color:#fff; }

#ido-workspace .imp-summary { display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:9px 12px; margin:0 0 14px; font-size:13px; border:1px solid #d5dbe0; background:#f7f9fb; border-radius:3px; }
#ido-workspace .imp-summary.success { border-color:#a8d5bf; background:#f2f9f5; }
#ido-workspace .imp-summary b { color:#18212a; }
#ido-workspace .imp-heading { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#717b84; margin:16px 0 6px; }
#ido-workspace .imp-hint { font-size:11px; color:#717b84; }
#ido-workspace .imp-channel { display:grid; gap:4px; max-width:280px; margin:0 0 14px; }
#ido-workspace .imp-commit { justify-content:flex-end; padding-top:14px; border-top:1px solid #d5dbe0; }
#ido-workspace .imp-legacy { margin-top:26px; border-top:1px solid #d5dbe0; padding-top:12px; }
#ido-workspace .imp-legacy summary { font-size:12px; color:#717b84; cursor:pointer; }

/* ---------------------------------------------------------------------------
   Phase 6E: the execution panel records one complete result.
   Existing tokens only: --ui-primary #263746, --ui-border #d5dbe0,
   --brand-yellow #ffe800. Same 3px radius and 13px type as the rest.
   --------------------------------------------------------------------------- */

/* Incomplete is a recorded result, not a missing one, so it reads like the other
   statuses rather than like "Not Executed". */
.kpi-icon.incomplete { background:#eef1f4 !important; color:var(--ui-primary,#263746) !important; }
.status-select.incomplete { border-color:#c9d2d9; background:#eef1f4; color:var(--ui-primary,#263746); }

.execution-panel .execution-block h3 { display:flex; align-items:center; gap:6px; }

.field-required,
.field-optional {
  font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:1px 5px; border-radius:3px; border:1px solid var(--ui-border,#d5dbe0);
}
/* Required is the one the tester must act on, so it carries the brand accent. */
.field-required { background:var(--brand-yellow,#ffe800); color:var(--ui-primary,#263746); border-color:#e6d100; }
.field-optional { background:#f3f4f5; color:var(--ui-muted,#5e6974); }

.execution-panel textarea.field-error,
.execution-panel input.field-error { border-color:#dc2626; background:#fff7f7; }

.execution-panel .save-message {
  margin-top:8px; padding:7px 9px; border-radius:3px; font-size:13px;
  border:1px solid var(--ui-border,#d5dbe0); background:#f3f4f5; color:var(--ui-text,#18212a);
}
.execution-panel .save-message.error { border-color:#fecaca; background:#fee2e2; color:#b91c1c; }

.execution-panel .primary-button { width:100%; min-height:36px; }

/* ---------------------------------------------------------------------------
   Manual test run execution workspace.

   Built to Figma frame 1:2 of IDOtest Manual Test Run UI (1648 x 928), measured
   rather than approximated: sidebar 170, top bar 54, content band 1410 from
   x=198, panels 328 / 566 / 488 with 14px gutters, 650 tall, footer 56.

   The palette is this screen's, taken from the frame. It is declared on .trw so
   it governs here without touching any other page's tokens.
   --------------------------------------------------------------------------- */

/* The palette belongs to the product, not to one screen. It lived on .trw, so every
   rule that used a token outside the test run workspace resolved to nothing: the report's
   pie drew four of its five slices with stroke:none and nobody could see why. Declared on
   the shell, which every canonical page is inside, and .trw inherits it unchanged. */
#ido-workspace {
  --trw-bg:#F6F8FA;
  --trw-surface:#FFFFFF;
  --trw-border:#D7DEE7;
  --trw-text:#111827;
  --trw-muted:#667085;
  --trw-yellow:#FFD21F;
  --trw-yellow-soft:#FFF8D8;
  --trw-green:#16A34A;
  --trw-red:#E53935;
  --trw-track:#E6EBF0;
  --trw-neutral:#F3F5F7;
  --trw-amber:#F59E0B;
  --trw-slate:#6B7A90;
}

.trw {
  --trw-bg:#F6F8FA;
  --trw-surface:#FFFFFF;
  --trw-border:#D7DEE7;
  --trw-text:#111827;
  --trw-muted:#667085;
  --trw-yellow:#FFD21F;
  --trw-yellow-soft:#FFF8D8;
  --trw-green:#16A34A;
  --trw-red:#E53935;
  --trw-track:#E6EBF0;
  --trw-neutral:#F3F5F7;
  --trw-amber:#F59E0B;
  --trw-slate:#6B7A90;

  /* Drawn, single stroke weight, tinted by whatever paints them. A glyph borrowed from
     the text font is a different weight, a different baseline and a different shape on
     every machine, which is why none of these are characters any more. */
  --trw-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.3'/%3E%3Cpath d='M10.4 10.4L14 14'/%3E%3C/svg%3E");

  /* The frame is one screen with no scroll: 928 less the 54 top bar. The panels
     take what is left and scroll inside themselves, so the page never does. */
  /* Positioned so the save confirmation can sit over the workspace instead of inside
     a panel, where it would push the three columns down. */
  position:relative;
  display:flex; flex-direction:column; height:calc(100dvh - 54px); overflow:hidden;
  background:var(--trw-bg); color:var(--trw-text);
  font-size:13px; line-height:1.45;
}

/* The shell is 224 wide and 58 tall elsewhere in the product. This screen is
   composed against 170 and 54, so it says so, and only while it is on screen.
   The id is carried because the shell rules use one, and a class selector loses
   to it however specific the rest of the selector is. */
#ido-workspace:has(.trw) .enterprise-sidebar { width:170px!important; padding:16px 10px 12px!important; }
#ido-workspace:has(.trw) .enterprise-topbar { left:170px!important; height:54px!important; padding:0 24px!important; }
#ido-workspace:has(.trw) .app-main { margin-left:170px!important; padding:54px 40px 0 28px!important; background:#F6F8FA!important; }
#ido-workspace:has(.trw) .brand-logo-full { width:132px!important; height:auto!important; }

/* Collapsing had no effect on a workspace page. The three rules above match with the
   same specificity as the collapsed rules near the top of this file and are written
   later, so they won: the sidebar stayed 170px wide while its labels disappeared,
   which is the broken half-collapsed bar with a column of small icons floating in
   empty space. Collapsed has to be stated again here to outrank the compact width. */
#ido-workspace.sidebar-collapsed:has(.trw) .enterprise-sidebar { width:64px!important; padding:0 8px 12px!important; }
#ido-workspace.sidebar-collapsed:has(.trw) .enterprise-topbar { left:64px!important; }
#ido-workspace.sidebar-collapsed:has(.trw) .app-main { margin-left:64px!important; }
#ido-workspace.sidebar-collapsed:has(.trw) .brand-logo-full { display:none!important; }

/* ---- header ------------------------------------------------------------- */

.trw-header { background:transparent; border:0; padding:18px 0 0; flex:none; }

.trw-crumbs { display:flex; align-items:center; gap:6px; font-size:12px; line-height:15px; color:var(--trw-muted); margin-bottom:8px; }
.trw-crumbs a { color:var(--trw-muted); text-decoration:none; }
.trw-crumbs a:hover { color:var(--trw-text); text-decoration:underline; }

/* The actions row is flex:none, so on a narrow main column it took its full width out
   of the title's share and left "Test runs" wrapping inside 93px. The two now wrap onto
   separate lines instead of the heading breaking mid-phrase. */
.trw-header-main {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 20px; flex-wrap:wrap; min-height:31px;
}
.trw-header-actions { margin:-4px 0; }
.trw-title { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.trw-title h1 { margin:0; font-size:26px; line-height:31px; font-weight:700; letter-spacing:-.01em; color:var(--trw-text); }
.trw-title-sep { color:var(--trw-muted); font-weight:400; }

.trw-run-state {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 8px; border-radius:5px; border:1px solid var(--trw-border);
  background:var(--trw-neutral); color:var(--trw-muted);
}
.trw-run-state.open { border-color:#BBE5C8; background:#EAF7EF; color:var(--trw-green); }
.trw-run-state.paused { border-color:var(--trw-yellow); background:var(--trw-yellow-soft); color:#8A6D00; }
.trw-run-state.closed { border-color:var(--trw-border); background:#EEF1F4; color:var(--trw-muted); }

.trw-header-actions { display:flex; gap:12px; flex:none; }
.trw-header-actions .button {
  min-height:38px; padding:0 18px; border-radius:7px; font-size:14px; font-weight:600;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text); cursor:pointer;
}
.trw-header-actions .button:hover:not(:disabled) { background:#F7F9FB; }
/* Completing a run is destructive to further editing, so it reads as such. It is
   deliberately not the brand yellow. */
/* Red is reserved for completing a run, which ends editing. Creating one is an
   ordinary primary action and must not borrow that warning. */
.app-main .trw .button.primary.trw-danger { background:var(--trw-red)!important; border-color:var(--trw-red)!important; color:#fff!important; }
.app-main .trw .button.primary.trw-danger:hover:not(:disabled) { background:#D32F2F!important; border-color:#D32F2F!important; }
.app-main .trw .button.primary:not(.trw-danger) { background:var(--trw-text)!important; border-color:var(--trw-text)!important; color:#fff!important; }
.app-main .trw .button.primary:not(.trw-danger):hover { background:#000!important; border-color:#000!important; }
.app-main .trw-record { background:var(--trw-text)!important; border-color:var(--trw-text)!important; color:#fff!important; }
.trw-header-actions .button:disabled { opacity:.55; cursor:default; }

/* Metadata sits directly on the workspace ground, not in six boxes. */
/* Row two needs air from row one. At two pixels the progress readout sat directly
   under Complete run and read as part of it. */
.trw-meta { display:flex; align-items:flex-start; gap:0; margin:14px 0 0; }
.trw-meta > div { display:flex; flex-direction:column; gap:3px; min-width:0; padding-right:30px; }
.trw-meta dt { font-size:11.5px; line-height:13px; color:var(--trw-muted); }
.trw-meta dd { margin:0; font-size:13.5px; line-height:16px; font-weight:600; color:var(--trw-text); }

.trw-progress-cell { margin-left:auto; padding-right:0 !important; min-width:300px; }
.trw-progress-cell dd { display:flex; align-items:center; gap:11px; }
.trw-bar {
  display:flex; gap:2px; flex:1; height:9px; min-width:180px;
  border-radius:5px; background:var(--trw-track);
}
.trw-bar-seg {
  position:relative; height:100%; min-width:4px;
  transition:flex-grow .25s cubic-bezier(.22,1,.36,1);
}
.trw-bar-seg:first-child { border-top-left-radius:5px; border-bottom-left-radius:5px; }
.trw-bar-seg:last-child { border-top-right-radius:5px; border-bottom-right-radius:5px; }
.trw-bar-seg.passed { background:var(--trw-green); }
.trw-bar-seg.failed { background:var(--trw-red); }
.trw-bar-seg.blocked { background:var(--trw-amber); }
.trw-bar-seg.incomplete { background:var(--trw-slate); }
/* What has not been executed is the empty part of the track, because it is. */
.trw-bar-seg.rest { background:var(--trw-track); }

/* A band is a proportion until you can ask it what it is. Instant, because a delay here
   would make a tester hold the pointer still and wait. Absolutely positioned, so asking
   never moves the three panels underneath. */
.trw-bar-seg::after {
  content:attr(data-tip); position:absolute; z-index:20; top:calc(100% + 7px); left:50%;
  transform:translateX(-50%); padding:5px 9px; border-radius:6px; white-space:nowrap;
  background:var(--trw-text); color:#fff; font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums; pointer-events:none;
  opacity:0; visibility:hidden;
}
.trw-bar-seg:hover::after, .trw-bar-seg:focus-visible::after { opacity:1; visibility:visible; }
.trw-bar-seg:hover { filter:brightness(.93); }
.trw-progress-text {
  font-size:13px; font-weight:600; color:var(--trw-text); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.trw-notice {
  margin-top:10px; padding:8px 11px; border-radius:7px; font-size:13px;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text);
}
.trw-notice.error { border-color:#F5C6C4; background:#FDECEA; color:#B3261E; }

/* ---- the three surfaces ------------------------------------------------- */

.trw-grid {
  display:grid; grid-template-columns:328px minmax(0,1fr) 488px;
  gap:14px; flex:1; min-height:0; align-items:stretch; margin-top:22px;
}
.trw-panel {
  background:var(--trw-surface); min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--trw-border); border-radius:8px; overflow:hidden;
}

.trw-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 12px; }
.trw-panel-head h2 { margin:0; font-size:17px; font-weight:700; color:var(--trw-text); }
.trw-count { font-weight:700; color:var(--trw-text); }

/* ---- left: the execution queue ------------------------------------------ */

.trw-queue-filters { padding:0 16px 10px; }

.trw-queue-filters .form-input::placeholder { color:var(--trw-muted); }

/* ---- the queue filter ---------------------------------------------------
   One line that says what is showing, one line that shows what the run is made
   of. The rail is the filter: clicking a share selects it, clicking it again
   lets everything back in. Statuses at zero live in the menu, where a zero
   reads as a zero rather than as a button nobody will press. */

.trw-filter { margin-top:12px; }
.trw-filter-row { display:flex; align-items:center; gap:8px; min-height:26px; }

.trw-filter-now { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.trw-filter-label {
  font-size:13px; font-weight:650; color:var(--trw-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trw-filter-n {
  font-size:13px; font-weight:700; color:var(--trw-muted); font-variant-numeric:tabular-nums;
}

.trw-filter-clear {
  display:grid; place-items:center; flex:none; width:20px; height:20px; padding:0;
  border:0; border-radius:5px; background:var(--trw-neutral); color:var(--trw-muted); cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.trw-filter-clear svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.trw-filter-clear:hover { background:#E7EBF0; color:var(--trw-text); }

.trw-pop-wrap { position:relative; margin-left:auto; flex:none; }
.trw-status-trigger {
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 8px;
  border:1px solid var(--trw-border); border-radius:6px; background:var(--trw-surface);
  font-size:12.5px; font-weight:600; color:var(--trw-muted); cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.trw-status-trigger:hover { border-color:#BCC7D3; color:var(--trw-text); }
.trw-status-trigger[aria-expanded="true"] { border-color:var(--trw-text); color:var(--trw-text); }
.trw-caret { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.trw-status-trigger[aria-expanded="true"] .trw-caret { transform:rotate(180deg); }

.trw-pop-scrim { position:fixed; inset:0; z-index:40; }
.trw-status-pop {
  position:absolute; z-index:41; top:calc(100% + 6px); right:0; width:212px;
  margin:0; padding:5px; list-style:none;
  border:1px solid var(--trw-border); border-radius:9px; background:var(--trw-surface);
  box-shadow:0 12px 28px -8px rgba(17,24,39,.22), 0 2px 6px -2px rgba(17,24,39,.12);
  animation:trw-pop .13s cubic-bezier(.22,1,.36,1);
}
@keyframes trw-pop { from { opacity:0; transform:translateY(-4px); } }
.trw-status-option {
  display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 9px;
  border:0; border-radius:6px; background:none; cursor:pointer;
  font-size:13px; color:var(--trw-text); text-align:left;
}
.trw-status-option:hover { background:var(--trw-neutral); }
.trw-status-option.on { background:var(--trw-yellow-soft); font-weight:650; }
.trw-status-option-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trw-status-option-n { font-variant-numeric:tabular-nums; font-weight:700; color:var(--trw-muted); }
.trw-status-option.on .trw-status-option-n { color:var(--trw-text); }

.trw-rail { display:flex; gap:2px; height:8px; margin-top:9px; border-radius:4px; overflow:hidden; }
.trw-rail-seg {
  position:relative; min-width:6px; height:100%; padding:0; border:0; cursor:pointer;
  transition:flex-grow .25s cubic-bezier(.22,1,.36,1), filter .12s ease;
}
.trw-rail-seg.passed { background:var(--trw-green); }
.trw-rail-seg.failed { background:var(--trw-red); }
.trw-rail-seg.blocked { background:var(--trw-amber); }
.trw-rail-seg.incomplete { background:var(--trw-slate); }
.trw-rail-seg.unexecuted { background:#CBD5E1; }
.trw-rail-seg:hover { filter:brightness(.92); }
/* The selected share keeps its colour and gains the ground around it, so the rail
   still reads as the run while saying which part is being looked at. */
.trw-rail-seg.on { box-shadow:inset 0 0 0 2px var(--trw-surface), inset 0 0 0 3px var(--trw-text); }
.trw-rail-empty { display:block; flex:1; height:100%; background:var(--trw-track); }

.trw-list { list-style:none; margin:0; padding:4px 0 8px; overflow-y:auto; flex:1; min-height:0; }
.trw-row {
  /* Positioned so the visually hidden status text inside it stays in this row. Without
     it the absolutely positioned span escapes the scrolling queue and lands at its
     static offset in the document, which made a 37 case run scroll the whole page. */
  position:relative;
  display:grid; grid-template-columns:10px auto minmax(0,1fr) 10px; align-items:center; gap:10px;
  width:100%; height:42px; text-align:left; cursor:pointer; background:none;
  border:0; padding:0 16px; font-size:13px; color:inherit;
}
.trw-row:hover { background:#F7F9FB; }
.trw-row.on { background:var(--trw-yellow-soft); }
.trw-list > li + li .trw-row { box-shadow:inset 0 1px 0 #EDF1F5; }
.trw-row-key { font-weight:700; color:var(--trw-text); font-variant-numeric:tabular-nums; }
.trw-row-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--trw-muted); }
.trw-row.on .trw-row-title { color:var(--trw-text); }
.trw-row-go {
  width:14px; height:14px; fill:none; stroke:#B6C0CB; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .12s ease, transform .12s cubic-bezier(.22,1,.36,1);
}
.trw-row:hover .trw-row-go { stroke:var(--trw-muted); transform:translateX(2px); }
.trw-row.on .trw-row-go { stroke:var(--trw-text); }

.trw-dot { width:10px; height:10px; border-radius:50%; background:#C3CCD6; }
.trw-dot.passed { background:var(--trw-green); }
.trw-dot.failed { background:var(--trw-red); }
.trw-dot.blocked { background:#F59E0B; }
.trw-dot.incomplete { background:#6B7A90; }

/* ---- centre: the definition --------------------------------------------- */

.trw-definition { overflow-y:auto; }
.trw-definition-head { align-items:center; padding:16px 16px 10px; }
.trw-definition-head h2 { font-size:20px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.trw-def-key { color:var(--trw-text); font-weight:700; }
.trw-def-title { font-weight:600; }

.trw-exec-chip {
  flex:none; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; padding:5px 12px; border-radius:16px;
  border:1px solid var(--trw-border); background:var(--trw-neutral); color:var(--trw-muted);
}
.trw-exec-chip::before { content:""; width:9px; height:9px; border-radius:50%; background:#C3CCD6; }
.trw-exec-chip.passed { background:#EAF7EF; border-color:#BBE5C8; color:var(--trw-green); }
.trw-exec-chip.passed::before { background:var(--trw-green); }
.trw-exec-chip.failed { background:#FDECEA; border-color:#F5C6C4; color:var(--trw-red); }
.trw-exec-chip.failed::before { background:var(--trw-red); }
.trw-exec-chip.blocked { background:#FFF4E5; border-color:#F7DCB0; color:#B45309; }
.trw-exec-chip.blocked::before { background:#F59E0B; }
.trw-exec-chip.incomplete::before { background:#6B7A90; }

/* The one definition state a tester should see before trusting what is on screen.
   It replaces a three column metadata row that said Medium, Payments and Checkout
   on every case and changed nothing about how any of them were executed. */
.trw-def-flag {
  display:flex; align-items:center; gap:8px; margin:0 16px 12px;
  padding:7px 11px; border-radius:8px;
  border:1px solid #F7DCB0; background:#FFF8EC; color:#8A5A0B;
  font-size:13px;
}
.trw-def-flag-label { font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }

/* A section label. The brand mark stays as a short lead rule rather than a tab
   underline, because there is one section here and never a second to switch to. */
/* The brand mark underlines the word. A rule set before it reads as a dash, which is
   punctuation, not an indicator: the label and its mark start at the same left edge. */
.trw-def-rule { margin-top:14px; padding:12px 16px 0; border-top:1px solid #EDF1F5; }
.trw-def-rule h3 {
  display:inline-block; margin:0; padding-bottom:7px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--trw-text); border-bottom:2.5px solid var(--trw-yellow);
}

.app-main .trw-step { display:inline-flex; align-items:center; gap:6px; }
.trw-step svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.trw-provenance {
  margin:0; padding:10px 16px 0; font-size:12px; color:var(--trw-muted);
  font-variant-numeric:tabular-nums;
}

/* ---- the definition, as a document ---------------------------------------
   Preconditions, steps and expected results were three bordered cards floating
   inside a fourth. A heading, a hairline and numbered rows carry the same
   structure at a fraction of the weight, which is what a tester reads through
   on every case. */

.trw-doc { padding:18px 16px 0; }
.trw-doc + .trw-doc { margin-top:2px; }
.trw-doc h3 {
  display:flex; align-items:center; gap:8px; margin:0 0 2px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--trw-muted);
}
.trw-doc-count {
  min-width:18px; padding:1px 5px; border-radius:9px; background:var(--trw-neutral);
  font-size:11px; font-weight:700; letter-spacing:0; color:var(--trw-muted);
  font-variant-numeric:tabular-nums; text-align:center;
}

.trw-doc-list { counter-reset:doc; list-style:none; margin:0; padding:0; }
.trw-doc-list > li {
  display:grid; grid-template-columns:20px minmax(0,1fr); align-items:baseline; gap:12px;
  padding:11px 0; font-size:13.5px; line-height:1.55; color:var(--trw-text);
}
.trw-doc-list > li + li { border-top:1px solid #F1F4F8; }
.trw-doc-n { counter-increment:doc; }
.trw-doc-n::before {
  content:counter(doc); display:block; font-size:11.5px; font-weight:700;
  color:var(--trw-muted); font-variant-numeric:tabular-nums;
}
/* Steps are the part being followed, so their markers are the one thing drawn. */
.trw-doc-steps > li .trw-doc-n::before {
  width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:50%; background:var(--trw-neutral); color:var(--trw-text);
}
.trw-provenance.warn { color:#B45309; }

.trw-def-section { padding:14px 16px 0; }
.trw-def-section:last-child { padding-bottom:16px; }
.trw-def-block { border:1px solid var(--trw-border); border-radius:8px; overflow:hidden; }
.trw-def-section h3 { margin:0; padding:14px 16px 10px; font-size:15px; font-weight:700; color:var(--trw-text); }

.trw-steps, .trw-lines { margin:0; padding:0 16px; list-style:none; }
.trw-steps > li, .trw-lines > li {
  display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:center;
  padding:11px 0; border-top:1px solid #EDF1F5; font-size:14px;
}
.trw-steps > li:first-child, .trw-lines > li:first-child { border-top:0; }
.trw-steps { counter-reset:trw-step; }
.trw-steps > li { counter-increment:trw-step; }
.trw-steps > li::before { content:counter(trw-step); }
.trw-lines { counter-reset:trw-line; }
.trw-lines > li { counter-increment:trw-line; align-items:start; }
.trw-lines > li::before { content:counter(trw-line); }
.trw-steps > li::before, .trw-lines > li::before {
  width:26px; height:26px; border-radius:50%; background:var(--trw-neutral);
  color:var(--trw-muted); font-size:12px; font-weight:600; text-align:center; line-height:26px;
}

.trw-data-box {
  margin:0 16px; padding:12px 14px; border:1px solid var(--trw-border); border-radius:8px;
  background:var(--trw-neutral); font-size:13px; white-space:pre-wrap;
}

/* ---- right: recording the result ---------------------------------------- */

.trw-execute { overflow-y:auto; }
.trw-field { padding:0 16px 12px; }
.trw-field > label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--trw-text); }
.trw-field .subtle { color:var(--trw-muted); font-weight:400; }
.app-main .trw-field .form-input, .app-main .trw-queue-filters .form-input {
  width:100%; font-size:14px!important; border-radius:7px!important; padding:0 12px!important;
  border:1px solid var(--trw-border)!important; background:var(--trw-surface)!important; color:var(--trw-text)!important;
}
.app-main .trw-field input.form-input, .app-main .trw-field select.form-input { height:42px!important; min-height:42px!important; }
.app-main .trw-queue-filters .form-input { height:40px!important; min-height:40px!important; }
.app-main .trw-field textarea.form-input { height:auto!important; }
/* The frame sizes these explicitly: 76 for the actual result, 60 for the comment. */
.app-main .trw-field textarea.form-input { padding:11px 12px!important; line-height:1.45; resize:vertical; }
.app-main .trw-field textarea#trw-actual { height:76px!important; }
.app-main .trw-field textarea#trw-comment { height:60px!important; }
.trw-field .form-input::placeholder { color:var(--trw-muted); }
.trw-field .form-input.invalid { border-color:var(--trw-red)!important; background:#FFF8F8!important; }
/* A field waiting on the tester says so with its label as well as its border, so the
   marking is legible to someone who does not separate those two reds easily. */
.trw-field:has(> .form-input.invalid) > label { color:var(--trw-red); }
.trw-defect-required.invalid { box-shadow:0 0 0 1px var(--trw-red); }
.trw-field input.form-input[readonly] { background:var(--trw-surface); color:var(--trw-text); cursor:default; }

.trw-req { font-size:11px; font-weight:700; color:#8A6D00; background:var(--trw-yellow-soft);
  border:1px solid var(--trw-yellow); border-radius:4px; padding:1px 5px; margin-left:6px; }

/* The frame shows a result dot inside the control, which a bare select cannot
   draw, so the dot sits over it and the text is inset to make room. */
.trw-status-wrap { position:relative; }
.trw-status-wrap .trw-dot { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; }
#ido-workspace .app-main .trw-status-wrap .form-input { padding-left:34px!important; }
select.trw-status { padding-left:34px; appearance:none; background-image:none; }
.trw-status-wrap::after {
  content:"⌄"; position:absolute; right:14px; top:44%; transform:translateY(-50%);
  color:var(--trw-muted); pointer-events:none; font-size:15px;
}

.trw-drop {
  display:flex; align-items:center; justify-content:center; gap:14px; position:relative;
  height:60px; padding:0 14px; border:1px dashed #C3CCD6; border-radius:8px;
  background:var(--trw-surface); text-align:left;
}
.trw-drop:hover { border-color:#A9B5C2; background:#FBFCFD; }
.trw-drop input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.trw-drop-icon { font-size:22px; color:var(--trw-muted); line-height:1; }
.trw-drop-text { font-size:14px; font-weight:600; color:var(--trw-text); display:block; }
.trw-drop-hint { font-size:12px; color:var(--trw-muted); display:block; }

.trw-search-wrap { position:relative; }
.trw-search-wrap::before {
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; pointer-events:none; background:var(--trw-muted);
  -webkit-mask:var(--trw-icon-search) center/contain no-repeat;
          mask:var(--trw-icon-search) center/contain no-repeat;
}
.trw-search-wrap:focus-within::before { background:var(--trw-text); }
.trw-search-wrap .form-input { padding-left:34px; }

.trw-inline-note { margin:7px 0 0; font-size:12px; color:var(--trw-muted); }

/* Executed by and execution time share a row, 240 and 198 inside the 456 band. */
.trw-field-pair { display:grid; grid-template-columns:240px 1fr; gap:18px; }
.trw-field-pair .trw-field { padding:0; }
.trw-duration { display:flex; align-items:center; gap:8px; }
.trw-unit-field { position:relative; display:block; }
/* The unit belongs to the number, so it sits in the field with it rather than
   floating beside it where it reads as its own word. */
.app-main .trw-unit-field .form-input {
  width:76px!important; padding-right:22px!important; text-align:left; font-variant-numeric:tabular-nums;
}
.trw-unit {
  position:absolute; right:9px; top:50%; transform:translateY(-50%); pointer-events:none;
  font-size:12px; font-weight:600; color:var(--trw-muted);
}

.trw-exec-meta { display:flex; flex-wrap:wrap; gap:0 26px; margin:0; padding:0 16px 14px; }
.trw-exec-meta > div { display:flex; flex-direction:column; gap:3px; }
.trw-exec-meta dt { font-size:12px; color:var(--trw-muted); }
.trw-exec-meta dd { margin:0; font-size:13px; font-weight:600; }

.trw-execute .trw-notice { margin:0 16px 12px; }
.trw-record {
  margin:2px 16px 16px; width:calc(100% - 32px); height:42px; border-radius:7px;
  background:var(--trw-text); border:1px solid var(--trw-text); color:#fff; font-size:14px; font-weight:600; cursor:pointer;
}
.trw-record:disabled { opacity:.55; cursor:default; }

/* ---- footer ------------------------------------------------------------- */

.trw-footer {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:56px; flex:none; margin:16px 0 18px; padding:0 16px;
  background:var(--trw-surface); border:1px solid var(--trw-border); border-radius:8px;
}
.trw-footer-meta { display:flex; flex-wrap:nowrap; gap:0; margin:0; }
.trw-footer-meta > div { display:flex; flex-direction:column; gap:2px; padding-right:60px; }
.trw-footer-meta dt { font-size:11px; color:var(--trw-muted); }
.trw-footer-meta dd { margin:0; font-size:13px; font-weight:600; }

.trw-pager { display:flex; align-items:center; gap:12px; flex:none; }
.trw-pager .button {
  height:34px; padding:0 16px; border-radius:7px; font-size:13px; font-weight:600;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text); cursor:pointer;
}
.trw-pager .button:hover:not(:disabled) { background:#F7F9FB; }
.trw-pager .button:disabled { opacity:.5; cursor:default; }
.trw-pager-text { font-size:13px; font-weight:600; color:var(--trw-text); font-variant-numeric:tabular-nums; }

/* ---- the completion confirmation ---------------------------------------- */

.trw-modal-scrim { position:fixed; inset:0; background:rgba(17,24,39,.42); z-index:60; }
.trw-modal {
  position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px)); background:var(--trw-surface);
  border:1px solid var(--trw-border); border-radius:8px; padding:20px;
}
.trw-modal h2 { margin:0 0 10px; font-size:17px; font-weight:700; }
.trw-modal p { margin:0 0 8px; font-size:13px; }
.trw-modal-list { margin:0 0 10px; padding-left:18px; font-size:13px; }
.trw-modal-warn { color:var(--trw-muted); font-size:12px; }
.trw-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.trw-modal-actions .button { height:36px; padding:0 16px; border-radius:7px; font-size:13px; font-weight:600;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text); cursor:pointer; }
.trw-modal-actions .button.primary { background:var(--trw-red); border-color:var(--trw-red); color:#fff; }

/* ---- states ------------------------------------------------------------- */

.trw-state { margin:0; padding:16px; font-size:13px; color:var(--trw-muted); }
.trw-state.error { color:#B3261E; }
.trw-state.warn { margin:0 16px 14px; padding:10px 12px; border:1px solid #F7DCB0; border-radius:7px;
  background:#FFF8EC; color:#B45309; }

/* ---- narrower than the reference ---------------------------------------- */

@media (max-width:1560px) {
  .trw-grid { grid-template-columns:300px minmax(0,1fr) 430px; }
  .trw-progress-cell { min-width:300px; }
}

@media (max-width:1240px) {
  .trw-grid { grid-template-columns:280px minmax(0,1fr); }
  .trw-execute { grid-column:1 / -1; }
  .trw-field-pair { grid-template-columns:240px 200px; }
}

@media (max-width:900px) {
  .trw-grid { grid-template-columns:1fr; }
  .trw-list { max-height:280px; }
  .trw-meta { flex-wrap:wrap; gap:14px 0; }
  .trw-progress-cell { margin-left:0; width:100%; }
  .trw-footer { height:auto; padding:12px 16px; flex-direction:column; align-items:flex-start; }
  .trw-footer-meta { flex-wrap:wrap; gap:12px 0; }
}

/* An absent value reads as absent rather than as data. */
.trw-meta dd.muted, .trw-footer-meta dd.muted { color:var(--trw-muted); font-weight:500; }

/* ---- per-case history, and the run list ---------------------------------
   Both reuse the workspace tokens. History overlays the page so the three
   panels never move; the list is the page immediately before the workspace. */

.trw-def-actions { display:flex; align-items:center; gap:10px; flex:none; }
.trw-ghost-button {
  height:28px; padding:0 11px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text);
}
.trw-ghost-button:hover { background:#F7F9FB; }

.trw-history {
  position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(640px,calc(100vw - 48px)); max-height:min(70vh,640px); overflow-y:auto;
  background:var(--trw-surface); border:1px solid var(--trw-border); border-radius:8px;
}
.trw-history-head {
  position:sticky; top:0; background:var(--trw-surface); display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--trw-border);
}
.trw-history-head h2 { margin:0; font-size:16px; font-weight:700; display:flex; gap:8px; align-items:baseline; }
.trw-history-list { list-style:none; margin:0; padding:0; }
.trw-history-list > li { padding:14px 16px; border-bottom:1px solid #EDF1F5; }
.trw-history-list > li:last-child { border-bottom:0; }
.trw-history-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trw-history-who { font-size:13px; font-weight:600; }
.trw-history-when { font-size:13px; color:var(--trw-muted); }
.trw-history-meta {
  font-size:11px; font-weight:600; color:var(--trw-muted);
  background:var(--trw-neutral); border:1px solid var(--trw-border); border-radius:4px; padding:1px 6px;
}
.trw-history-field { margin:8px 0 0; font-size:13px; line-height:1.5; }
.trw-history-field > span {
  display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--trw-muted); margin-bottom:2px;
}
.trw-history-links { display:flex; gap:8px; flex-wrap:wrap; }
.trw-history-tag {
  font-size:12px; font-weight:600; color:var(--trw-text);
  background:var(--trw-neutral); border:1px solid var(--trw-border); border-radius:4px; padding:2px 8px;
}

/* ---- the canonical run list --------------------------------------------- */

.trl .trw-header { padding-bottom:0; }
.trl-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:22px 0 18px; }
.trl-panel {
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--trw-surface); border:1px solid var(--trw-border); border-radius:8px; overflow:hidden;
}
.trl-filters {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--trw-border);
}
.trl-filters .trw-search-wrap { width:300px; }
.trl-filters .form-input {
  width:100%; height:40px; border-radius:7px; padding:0 12px 0 34px; font-size:13px;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text);
}
.trl-filters .trw-chips { margin-top:0; }
.trl-scroll { flex:1; min-height:0; overflow-y:auto; }

.trl-table { width:100%; border-collapse:collapse; font-size:13px; }
.trl-table thead th {
  position:sticky; top:0; z-index:1; background:var(--trw-surface);
  text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--trw-muted); padding:10px 16px; border-bottom:1px solid var(--trw-border); white-space:nowrap;
}
.trl-table td { padding:12px 16px; border-bottom:1px solid #EDF1F5; vertical-align:middle; }
.trl-table td.muted { color:var(--trw-muted); }
.trl-row { cursor:pointer; }
.trl-row:hover td { background:#F7F9FB; }
/* A row that acts as a link shows its focus, like the link it is. */
.trl-row:focus-visible { outline:2px solid var(--trw-yellow); outline-offset:-2px; }
.trl-run-name { display:block; font-weight:600; color:var(--trw-text); }
.trl-run-key { display:block; font-size:11px; font-weight:600; color:var(--trw-muted); margin-top:2px; }
.trl-progress { display:flex; align-items:center; gap:10px; }
.trl-progress-col { width:220px; }
.trl-progress .trw-bar { min-width:90px; flex:1; }
.trl-progress-text { font-size:12px; font-weight:600; color:var(--trw-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.trl-go { color:#B6C0CB; width:24px; text-align:right; font-size:15px; }

.trl-empty {
  margin:auto; padding:48px 24px; text-align:center; max-width:420px;
}
.trl-empty h2 { margin:0 0 8px; font-size:17px; font-weight:700; color:var(--trw-text); }
.trl-empty p { margin:0 0 16px; font-size:13px; color:var(--trw-muted); }
/* The empty state's call to action is the same button as the one in the header, but the
   shape was only ever written under .trw-header-actions. Outside that container it kept
   the fill and lost the height, the padding and the radius, so it rendered as 19px of
   white text on a black rectangle drawn tight around the glyphs. */
#ido-workspace .app-main .trl-empty .button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; height:38px; padding:0 18px; border-radius:7px;
  font-size:14px; font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid var(--trw-border); background:var(--trw-surface); color:var(--trw-text);
}
#ido-workspace .app-main .trl-empty .button.primary {
  border-color:var(--trw-text); background:var(--trw-text); color:#fff;
}
#ido-workspace .app-main .trl-empty .button.primary:hover { background:#000; border-color:#000; }

.trl .trw-header-actions .button.primary { text-decoration:none; display:inline-flex; align-items:center; }


/* ---- browser surfaces ----------------------------------------------------
   Selection, caret, scrollbars and focus ship with defaults that belong to no
   design system. In a workspace somebody reads all day they are the difference
   between a built screen and an assembled one. */

.trw ::selection { background:var(--trw-yellow-soft); color:var(--trw-text); }
.trw .form-input, .trw textarea { caret-color:var(--trw-text); }

.trw-list, .trw-execute, .trw-history-list, .trw-definition {
  scrollbar-width:thin; scrollbar-color:#C6D0DB transparent;
}
.trw-list::-webkit-scrollbar,
.trw-execute::-webkit-scrollbar,
.trw-history-list::-webkit-scrollbar,
.trw-definition::-webkit-scrollbar { width:10px; }
.trw-list::-webkit-scrollbar-track,
.trw-execute::-webkit-scrollbar-track,
.trw-history-list::-webkit-scrollbar-track,
.trw-definition::-webkit-scrollbar-track { background:transparent; }
.trw-list::-webkit-scrollbar-thumb,
.trw-execute::-webkit-scrollbar-thumb,
.trw-history-list::-webkit-scrollbar-thumb,
.trw-definition::-webkit-scrollbar-thumb {
  border:3px solid transparent; border-radius:6px;
  background:#C6D0DB; background-clip:content-box;
}
.trw-list:hover::-webkit-scrollbar-thumb,
.trw-execute:hover::-webkit-scrollbar-thumb,
.trw-history-list:hover::-webkit-scrollbar-thumb,
.trw-definition:hover::-webkit-scrollbar-thumb { background:#A9B6C5; background-clip:content-box; }

/* One focus ring for the whole workspace, in the workspace's own ink. Keyboard
   users get it; a mouse click does not paint it. */
.trw :focus-visible {
  outline:2px solid var(--trw-text); outline-offset:2px; border-radius:5px;
}
.trw-rail-seg:focus-visible { outline-offset:3px; }

@media (prefers-reduced-motion:reduce) {
  .trw-bar-seg, .trw-rail-seg, .trw-row-go, .trw-status-pop { transition:none; animation:none; }
}


/* ---- executing -----------------------------------------------------------
   The panel used to ask for six things whatever the result was. It now asks for
   what that result needs, which is the difference between recording a pass in
   two clicks and filling in a form. */

/* The clock, in the panel head where it is legible and out of the way. */
.trw-timer {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:12.5px; font-weight:650; color:var(--trw-muted);
  font-variant-numeric:tabular-nums;
}
.trw-timer svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.trw-timer.live { color:var(--trw-text); }
.trw-timer.live svg { animation:trw-tick 2s ease-in-out infinite; }
@keyframes trw-tick { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* A defect is optional here, so it asks for one line of the panel until it is wanted. */
.trw-link-defect {
  display:inline-flex; align-items:center; gap:6px; margin:0 16px;
  padding:6px 10px 6px 8px; border:1px dashed var(--trw-border); border-radius:7px;
  background:none; color:var(--trw-muted); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.trw-link-defect svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.trw-link-defect:hover:not(:disabled) { border-color:#BCC7D3; color:var(--trw-text); background:var(--trw-neutral); }
.trw-link-defect:disabled { opacity:.5; cursor:default; }

.trw-defect { display:block; }
.trw-defect-results {
  list-style:none; margin:7px 0 0; padding:4px;
  border:1px solid var(--trw-border); border-radius:8px; background:var(--trw-surface);
  max-height:164px; overflow-y:auto;
}
.trw-defect-results button {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:9px;
  width:100%; padding:7px 8px; border:0; border-radius:6px; background:none;
  font:inherit; font-size:13px; text-align:left; cursor:pointer; color:var(--trw-text);
}
.trw-defect-results button:hover { background:var(--trw-neutral); }
.trw-defect-key { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.trw-defect-summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--trw-muted); }

.trw-defect-picked {
  display:grid; grid-template-columns:auto minmax(0,1fr) 22px; align-items:center; gap:9px;
  padding:8px 9px; border:1px solid var(--trw-border); border-radius:8px;
  background:var(--trw-surface); font-size:13px;
}

.trw-defect-create { display:grid; gap:8px; }
.trw-defect-create-actions { display:flex; gap:8px; justify-content:flex-end; }
.app-main .trw-defect-create-actions .button { min-height:34px; padding:0 12px; font-size:13px; }

/* The one place the workspace turns red, and only as context. A failed result that
   nobody raised a defect for is a failure nobody has to act on, so the requirement is
   stated where the tester is looking rather than discovered when Save refuses. */
.trw-defect-required {
  margin:2px 16px 0; padding:11px 12px 12px;
  border:1px solid #F3C9C6; border-radius:9px; background:#FEF6F5;
}
.trw-defect-required.invalid { border-color:var(--trw-red); }
.trw-defect-required h3 {
  display:flex; align-items:center; gap:7px; margin:0 0 9px;
  font-size:12.5px; font-weight:700; color:#B3261E;
}
.trw-defect-required h3::after { content:"*"; color:var(--trw-red); font-weight:700; }

.app-main .trw-defect-required .form-input { background:var(--trw-surface)!important; }
.trw-defect-required .trw-link-defect { margin:8px 0 0; border-color:#EBB9B4; color:#B3261E; }
.trw-defect-required .trw-link-defect:hover:not(:disabled) { border-color:var(--trw-red); background:#FDEEEC; color:#8C1D18; }

/* Evidence chosen before the execution exists, held here until it does. */
.trw-queued { list-style:none; margin:9px 0 0; padding:0; display:grid; gap:5px; }
.trw-queued li {
  display:grid; grid-template-columns:minmax(0,1fr) auto 22px; align-items:center; gap:9px;
  padding:6px 8px; border:1px solid var(--trw-border); border-radius:7px;
  background:var(--trw-neutral); font-size:12.5px;
}
.trw-queued-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--trw-text); }
.trw-queued-size { color:var(--trw-muted); font-variant-numeric:tabular-nums; }
.trw-queued-x {
  display:grid; place-items:center; width:20px; height:20px; padding:0;
  border:0; border-radius:5px; background:none; color:var(--trw-muted); cursor:pointer;
}
.trw-queued-x svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.trw-queued-x:hover { background:#E7EBF0; color:var(--trw-text); }
.trw-queued-x:disabled { opacity:.4; cursor:default; }

.trw-drop.off { opacity:.55; }
.trw-drop-icon { width:16px; height:16px; fill:none; stroke:var(--trw-muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* What is still missing, before the button is pressed rather than after. */

/* Save is the constructive action of this screen, so it wears the brand rather than
   the navy it shared with every secondary button in the app. Red stays with Complete
   run and with the failure context above. */
#ido-workspace .app-main .trw-execute .trw-record {
  background:var(--trw-yellow)!important; border-color:var(--trw-yellow)!important;
  color:var(--trw-text)!important; font-weight:700!important;
}
#ido-workspace .app-main .trw-execute .trw-record:hover:not(:disabled) {
  background:#F5C400!important; border-color:#F5C400!important;
}
#ido-workspace .app-main .trw-execute .trw-record:disabled {
  background:var(--trw-neutral)!important; border-color:var(--trw-border)!important;
  color:var(--trw-muted)!important; cursor:default;
}
/* Raising a defect is the primary action of its own small container, not of the panel. */
#ido-workspace .app-main .trw-defect-create-actions .trw-record {
  background:var(--trw-text)!important; border-color:var(--trw-text)!important;
  color:#fff!important;
}

.trw-save-aside {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 16px 0; min-height:28px;
}
/* Alone on a case with no result yet, it does not pretend to be one end of a row. */
.trw-save-aside:has(> :only-child) { justify-content:flex-start; }
/* Alone, it centres; beside History, it sits at the other end of the row. */
.trw-save-aside:only-child, .trw-save-aside > .trw-history-button:only-child { margin-left:0; }
.trw-shortcut {
  margin:0; font-size:11px; color:#9AA5B4; font-variant-numeric:tabular-nums;
}
#ido-workspace .app-main .trw-save-aside .trw-history-button {
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  color:var(--trw-muted);
}
#ido-workspace .app-main .trw-save-aside .trw-history-button:hover {
  color:var(--trw-text); border-color:#BCC7D3;
}
.trw-save-aside .trw-history-button svg {
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* Who recorded it and what it took: metadata, not two controls nobody may edit. */
.trw-recorded {
  margin:9px 16px 12px; padding-top:9px; border-top:1px solid #EDF1F5;
  font-size:12px; color:var(--trw-muted); font-variant-numeric:tabular-nums;
}

/* A saved result confirms over the workspace. A message inside the panel would push the
   three columns down, and the layout has to hold still while a tester works. */
.trw-toast {
  position:absolute; right:22px; bottom:86px; z-index:30;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:9px;
  background:var(--trw-text); color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 12px 28px -10px rgba(17,24,39,.5);
  animation:trw-toast-in .22s cubic-bezier(.22,1,.36,1);
}
.trw-toast svg { width:14px; height:14px; fill:none; stroke:var(--trw-yellow); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes trw-toast-in { from { opacity:0; transform:translateY(6px); } }

/* History answers a question about the case; the title says which case. */
.trw-history-button { font-size:12.5px; }

/* An exceptional definition state, which is the only time it is shown at all. */

@media (prefers-reduced-motion:reduce) {
  .trw-toast, .trw-timer.live svg { animation:none; }
}


/* ---- the header, tightened ------------------------------------------------
   Two rows that read as one block: what this run is, then what it is made of.
   The space between them was doing nothing except delaying the three panels. */

.trw-run-key {
  padding:2px 7px; border-radius:5px;
  background:var(--trw-neutral); border:1px solid transparent;
  font-size:11px; font-weight:650; letter-spacing:.02em;
  color:var(--trw-muted); font-variant-numeric:tabular-nums;
}

/* ---- waiting for a result -------------------------------------------------
   Not a field, not a control, and deliberately not shaped like either. */
.trw-await {
  margin:2px 16px 0; padding:14px 0 16px;
  font-size:13px; color:var(--trw-muted); text-align:center;
}

/* ---- the test case identity reads as one line -----------------------------
   Two strong lines made the identifier and the title argue about which was the
   heading. The key stays distinct by weight and colour, not by its own row. */
.trw-definition-head h2 {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 7px;
  min-width:0; font-size:16px; line-height:1.35;
}
.trw-def-key { flex:none; font-weight:700; color:var(--trw-text); font-variant-numeric:tabular-nums; }
.trw-definition-head .trw-title-sep { flex:none; color:#C3CCD6; }
.trw-def-title { min-width:0; font-weight:600; color:var(--trw-text); overflow-wrap:anywhere; }
.trw-definition-head .trw-def-actions { flex:none; }


/* ---- the queue toolbar ----------------------------------------------------
   The search sat in more container than it needed and did not line up with the
   rows beneath it. Same width, same left edge, one hairline. */
#ido-workspace .app-main .trw-queue-filters .form-input {
  height:34px!important; min-height:34px!important;
  font-size:13px!important; padding-left:32px!important;
  border-color:#E2E8F0!important;
}
#ido-workspace .app-main .trw-queue-filters .form-input:focus {
  border-color:#BCC7D3!important;
}
.trw-search-wrap::before { left:11px; width:14px; height:14px; }
.trw-filter { margin-top:10px; }

/* ---- the timer is metadata ------------------------------------------------ */
.trw-timer { font-size:12px; font-weight:600; color:#9AA5B4; }
.trw-timer svg { width:12px; height:12px; }
.trw-timer.live { color:var(--trw-muted); }

/* ---- save is primary without being the page ------------------------------- */
#ido-workspace .app-main .trw-execute .trw-record {
  height:40px!important; min-height:40px!important; font-size:13.5px!important;
}

.trw-save-aside .trw-shortcut { margin:0; text-align:right; }

/* ---- footer --------------------------------------------------------------- */
.trw-footer-dot { color:#C3CCD6; }
#ido-workspace .app-main .trw-pager .button:disabled { opacity:.72; cursor:default; }

/* ---- DETAILS: the underline is the width of the word ---------------------- */
.trw-def-rule h3 { padding-bottom:6px; border-bottom-width:2px; }


/* ---- working on several cases at once -------------------------------------
   A queue of two hundred and forty is a library, and a library is maintained in
   sets. Selection is off until it is asked for, because most visits here are to
   execute one case rather than to reorganise many. */

#ido-workspace .app-main .trw-select-toggle { height:26px; padding:0 10px; font-size:12px; color:var(--trw-muted); }
#ido-workspace .app-main .trw-select-toggle:hover { color:var(--trw-text); border-color:#BCC7D3; }
#ido-workspace .app-main .trw-select-toggle.on {
  background:var(--trw-text)!important; border-color:var(--trw-text)!important; color:#fff!important;
}

/* The row keeps its own geometry; the checkbox and the menu sit beside it rather
   than inside it, so a click on either never selects the case for execution. */
.trw-row-wrap { position:relative; display:flex; align-items:center; }
.trw-row-wrap > .trw-row { flex:1; min-width:0; }
.trw-row-wrap.picked { background:#F3F7FF; }
.trw-row-wrap.picked > .trw-row { background:transparent; }

.trw-row-check {
  display:grid; place-items:center; flex:none; width:30px; height:42px; cursor:pointer;
  padding-left:14px;
}
/* The shell styles every input as a 40px text field, checkboxes included, which turned
   each row into a large rounded blue square. A checkbox is not a text field. */
#ido-workspace .app-main .trw-row-check input[type="checkbox"] {
  width:15px!important; height:15px!important; min-height:0!important;
  margin:0!important; padding:0!important;
  border:1px solid #B6C0CB!important; border-radius:4px!important;
  background:#fff!important; box-shadow:none!important;
  accent-color:var(--trw-text); cursor:pointer; appearance:auto;
}

.trw-row-menu-button {
  display:grid; place-items:center; flex:none; width:26px; height:26px; margin-right:10px;
  padding:0; border:0; border-radius:6px; background:none; color:#B6C0CB; cursor:pointer;
  opacity:0; transition:opacity .12s ease, background .12s ease, color .12s ease;
}
.trw-row-menu-button svg { width:14px; height:14px; fill:currentColor; }
.trw-row-wrap:hover .trw-row-menu-button,
.trw-row-menu-button:focus-visible,
.trw-row-menu-button.on { opacity:1; }
.trw-row-menu-button:hover, .trw-row-menu-button.on { background:#E7EBF0; color:var(--trw-text); }

.trw-row-menu {
  position:absolute; z-index:41; top:calc(100% - 6px); right:10px; width:206px; padding:5px;
  border:1px solid var(--trw-border); border-radius:9px; background:var(--trw-surface);
  box-shadow:0 12px 28px -8px rgba(17,24,39,.22), 0 2px 6px -2px rgba(17,24,39,.12);
  animation:trw-pop .13s cubic-bezier(.22,1,.36,1);
}
.trw-row-menu button {
  display:block; width:100%; padding:7px 9px; border:0; border-radius:6px; background:none;
  font:inherit; font-size:13px; color:var(--trw-text); text-align:left; cursor:pointer;
}
.trw-row-menu button:hover { background:var(--trw-neutral); }

/* Above the queue, not over it: the rows the actions refer to stay readable. */
.trw-bulk {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin:0; padding:9px 12px; border-top:1px solid var(--trw-border);
  background:var(--trw-neutral);
}
.trw-bulk-count { font-size:12.5px; font-weight:700; color:var(--trw-text); font-variant-numeric:tabular-nums; }
.trw-bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }
#ido-workspace .app-main .trw-bulk-actions .trw-ghost-button { height:26px; padding:0 9px; font-size:12px; }

/* ---- choosing the run to add them to -------------------------------------- */
.trw-run-picker { width:min(460px, calc(100vw - 40px)); }
.trw-modal-note { margin:0 0 14px; font-size:12.5px; color:var(--trw-muted); }
.trw-run-list { list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; display:grid; gap:5px; }
.trw-run-list button {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:10px;
  width:100%; padding:10px 11px; border:1px solid var(--trw-border); border-radius:8px;
  background:var(--trw-surface); font:inherit; font-size:13px; text-align:left; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.trw-run-list button:hover:not(:disabled) { border-color:var(--trw-text); background:#FBFCFD; }
.trw-run-list button:disabled { opacity:.55; cursor:default; }
.trw-run-list-key { font-weight:700; color:var(--trw-text); font-variant-numeric:tabular-nums; }
.trw-run-list-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--trw-text); }
.trw-run-list-n { color:var(--trw-muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce) {
  .trw-row-menu { animation:none; }
  .trw-row-menu-button { transition:none; }
}


/* ---- the project report ----------------------------------------------------
   One page that answers how the project is going, narrowed by whoever is asking,
   and able to leave the screen as a document. */

#ido-workspace .app-main .rp-filters {
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:12px 14px;
  border:1px solid var(--trw-border); border-radius:9px; background:var(--trw-surface);
}
#ido-workspace .app-main .rp-filters label { display:grid; gap:5px; min-width:0; }
#ido-workspace .app-main .rp-filters label > span {
  font-size:11.5px; font-weight:600; color:var(--trw-muted);
}
#ido-workspace .app-main .rp-filters select,
#ido-workspace .app-main .rp-filters input {
  height:34px!important; min-height:34px!important; padding:0 10px!important;
  border:1px solid var(--trw-border)!important; border-radius:7px!important;
  background:var(--trw-surface)!important; font-size:13px!important; color:var(--trw-text)!important;
}
.rp-filter-search { flex:1; min-width:180px; }
#ido-workspace .app-main .rp-filter-search input { width:100%; }
.rp-filter-count {
  margin-left:auto; font-size:12px; color:var(--trw-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* The ring and its figures, side by side, reading from one list. */
.rp-overall { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.rp-pie { width:164px; height:164px; flex:none; }
.rp-pie-track { fill:none; stroke:var(--trw-track); stroke-width:5.2; }
.rp-pie-slice { fill:none; stroke-width:5.2; transition:stroke-dasharray .3s cubic-bezier(.22,1,.36,1); }
.rp-pie-slice.passed { stroke:var(--trw-green); }
.rp-pie-slice.failed { stroke:var(--trw-red); }
.rp-pie-slice.blocked { stroke:var(--trw-amber); }
.rp-pie-slice.incomplete { stroke:var(--trw-slate); }
.rp-pie-slice.not-executed { stroke:#CBD5E1; }
.rp-pie-total {
  fill:var(--trw-text); font-size:6.4px; font-weight:700; text-anchor:middle;
  font-variant-numeric:tabular-nums;
}
.rp-pie-label { fill:var(--trw-muted); font-size:2.9px; text-anchor:middle; }

.rp-table { width:100%; border-collapse:collapse; font-size:13px; }
.rp-table th {
  padding:8px 10px; text-align:left; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--trw-muted);
  border-bottom:1px solid var(--trw-border);
}
.rp-table td { padding:9px 10px; border-bottom:1px solid #F1F4F8; color:var(--trw-text); }
.rp-table tfoot td { border-bottom:0; border-top:1px solid var(--trw-border); font-weight:700; }
.rp-table .rp-n { text-align:right; font-variant-numeric:tabular-nums; }
.rp-overall-table { flex:1; min-width:260px; }
.rp-dot {
  display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%;
  background:#CBD5E1; vertical-align:middle;
}
.rp-dot.passed { background:var(--trw-green); }
.rp-dot.failed { background:var(--trw-red); }
.rp-dot.blocked { background:var(--trw-amber); }
.rp-dot.incomplete { background:var(--trw-slate); }

/* Two hundred rows do not belong in one scroll of the page. */
.rp-table-scroll { max-height:520px; overflow-y:auto; }
.rp-case-table thead th { position:sticky; top:0; z-index:1; background:var(--trw-surface); }
.rp-key { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rp-title { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-empty { margin:0; padding:22px 0; text-align:center; font-size:13px; color:var(--trw-muted); }

.print-only { display:none; }

/* ---- the report as a document ---------------------------------------------
   Printing is how a desktop makes a PDF, so what goes on the page is decided
   here: the report, its scope, and nothing of the application around it. */
@media print {
  .enterprise-sidebar, .enterprise-topbar, .shell-footer,
  .no-print, .report-actions, .trw-toast { display:none !important; }

  #ido-workspace .app-main {
    margin:0 !important; padding:0 !important; background:#fff !important;
  }
  #ido-workspace, body, html { background:#fff !important; }

  .print-only { display:block; }
  .rp-print-scope {
    margin:0 0 14px; font-size:12px; color:#444;
    padding-bottom:8px; border-bottom:1px solid #ccc;
  }

  .content-card {
    border:1px solid #ddd !important; box-shadow:none !important;
    break-inside:avoid; page-break-inside:avoid; margin-bottom:12px !important;
  }
  .reports-grid { display:block !important; }

  /* Every row, not the first screen of them. */
  .rp-table-scroll, .matrix-scroll { max-height:none !important; overflow:visible !important; }
  .rp-case-table thead th { position:static !important; }
  .rp-table thead { display:table-header-group; }
  .rp-table tr { break-inside:avoid; page-break-inside:avoid; }
  .rp-title { max-width:none; white-space:normal; }

  a[href]::after { content:""; }
}

@media (prefers-reduced-motion:reduce) {
  .rp-pie-slice { transition:none; }
}


/* ---- the projects list -----------------------------------------------------
   The way into the product. A project is a body of testing work, so each row says
   how much of it there is and how it is going, and opening one goes to the runs. */

.pl { padding:26px 0 40px; max-width:1080px; }
.pl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.pl-head h1 { margin:0; font-size:26px; font-weight:750; letter-spacing:-.02em; color:var(--trw-text); }
.pl-sub { margin:5px 0 0; font-size:13.5px; color:var(--trw-muted); }

#ido-workspace .app-main .pl-new {
  display:inline-flex!important; align-items:center!important; gap:7px!important;
  height:38px!important; min-height:38px!important; padding:0 15px!important;
  background:var(--trw-yellow)!important; border:1px solid var(--trw-yellow)!important;
  color:var(--trw-text)!important; border-radius:8px!important;
  font-size:13.5px!important; font-weight:700!important; white-space:nowrap;
}
#ido-workspace .app-main .pl-new:hover { background:#F5C400!important; border-color:#F5C400!important; }
#ido-workspace .app-main .pl-new svg {
  width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round;
}

.pl-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }

.pl-card {
  display:grid; grid-template-columns:minmax(0,1fr) 260px 16px; align-items:center; gap:22px;
  padding:16px 18px; border:1px solid var(--trw-border); border-radius:10px;
  background:var(--trw-surface); text-decoration:none; color:inherit;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s cubic-bezier(.22,1,.36,1);
}
.pl-card:hover {
  border-color:#BCC7D3;
  box-shadow:0 6px 18px -10px rgba(17,24,39,.22);
  transform:translateY(-1px);
}
.pl-card:focus-visible { outline:2px solid var(--trw-text); outline-offset:2px; }

.pl-card-main { min-width:0; }
.pl-card h2 {
  margin:0; font-size:16px; font-weight:700; color:var(--trw-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-counts {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:5px 0 0; font-size:12.5px; color:var(--trw-muted);
  font-variant-numeric:tabular-nums;
}
.pl-counts strong { color:var(--trw-text); font-weight:700; }
.pl-sep { color:#C3CCD6; }
.pl-open { color:var(--trw-text); font-weight:600; }

.pl-progress { display:grid; gap:7px; }
.pl-bar {
  display:flex; gap:2px; height:8px; border-radius:4px;
  background:var(--trw-track); overflow:hidden;
}
.pl-bar-seg { height:100%; min-width:3px; }
.pl-bar-seg.passed { background:var(--trw-green); }
.pl-bar-seg.failed { background:var(--trw-red); }
.pl-bar-seg.blocked { background:var(--trw-amber); }
.pl-bar-seg.incomplete { background:var(--trw-slate); }
.pl-bar-seg.rest { background:var(--trw-track); }
.pl-progress-text {
  font-size:12px; color:var(--trw-muted); font-variant-numeric:tabular-nums; text-align:right;
}

/* Constrained, or it scales to fill the grid cell and becomes a black triangle the
   height of the page. An unsized inline SVG has no intrinsic size to fall back on. */
.pl-go {
  width:16px; height:16px; flex:none;
  fill:none; stroke:#B6C0CB; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .12s ease, transform .12s cubic-bezier(.22,1,.36,1);
}
.pl-card:hover .pl-go { stroke:var(--trw-text); transform:translateX(2px); }

.pl-state { margin:0; padding:26px 0; font-size:13.5px; color:var(--trw-muted); }
.pl-state.error { color:var(--trw-red); }

.pl-empty {
  padding:46px 24px; border:1px dashed var(--trw-border); border-radius:10px;
  background:var(--trw-surface); text-align:center;
}
.pl-empty h2 { margin:0 0 6px; font-size:17px; font-weight:700; color:var(--trw-text); }
.pl-empty p { margin:0 0 18px; font-size:13.5px; color:var(--trw-muted); }

/* ---- the new project dialog ------------------------------------------------
   The dialog is one padded box with its heading, its fields and its buttons all
   sharing the same inset, so the actions sit on a footer that belongs to the
   dialog rather than floating at the bottom of the content.

   Every control here is styled under #ido-workspace with its own class rather
   than the shared .button, because the shell paints .button from an id selector
   with !important and a class-only rule loses that argument silently. */
.pl-scrim {
  position:fixed; inset:0; z-index:100;
  background:rgba(17,24,39,.5); backdrop-filter:blur(2px);
}
.pl-modal {
  position:fixed; z-index:101; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--trw-border); border-radius:14px; background:var(--trw-surface);
  box-shadow:0 30px 70px -24px rgba(17,24,39,.45), 0 0 0 1px rgba(17,24,39,.04);
}
.pl-modal-head { padding:20px 22px 0; }
.pl-modal-head h2 { margin:0; font-size:18px; font-weight:700; color:var(--trw-text); letter-spacing:-.01em; }
.pl-modal-head p { margin:5px 0 0; font-size:13px; color:var(--trw-muted); }

.pl-modal-body { padding:18px 22px 4px; overflow-y:auto; }
.pl-field + .pl-field { margin-top:16px; }
.pl-modal label { display:block; margin:0 0 7px; font-size:13px; font-weight:600; color:var(--trw-text); }
.pl-optional {
  margin-left:6px; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--trw-muted);
}
.pl-hint { margin:7px 0 0; font-size:12px; line-height:1.45; color:var(--trw-muted); }

#ido-workspace .app-main .pl-modal .form-input {
  width:100%; height:40px!important; min-height:40px!important; padding:0 12px!important;
  border:1px solid var(--trw-border)!important; border-radius:9px!important;
  background:var(--trw-surface)!important; color:var(--trw-text)!important;
  font-size:14px!important; box-shadow:none!important;
  transition:border-color .15s, box-shadow .15s;
}
#ido-workspace .app-main .pl-modal .form-input:focus {
  outline:none!important;
  border-color:var(--trw-text)!important;
  box-shadow:0 0 0 3px rgba(38,55,70,.12)!important;
}
#ido-workspace .app-main .pl-modal .form-input:disabled { opacity:.55!important; }

.pl-modal-actions {
  display:flex; justify-content:flex-end; gap:9px;
  margin-top:18px; padding:14px 22px; border-top:1px solid var(--trw-border);
  background:var(--trw-neutral);
}
#ido-workspace .app-main .pl-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; min-height:38px; padding:0 16px;
  border-radius:9px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; line-height:1; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
#ido-workspace .app-main .pl-btn.ghost {
  background:var(--trw-surface); border-color:var(--trw-border); color:var(--trw-muted);
}
#ido-workspace .app-main .pl-btn.ghost:hover:not(:disabled) { color:var(--trw-text); border-color:#BCC7D3; }
#ido-workspace .app-main .pl-btn.go {
  background:var(--trw-text); border-color:var(--trw-text); color:#fff;
}
#ido-workspace .app-main .pl-btn.go:hover:not(:disabled) { background:#000; border-color:#000; }
#ido-workspace .app-main .pl-btn:disabled { opacity:.45; cursor:not-allowed; }
#ido-workspace .app-main .pl-btn:focus-visible {
  outline:2px solid var(--trw-text); outline-offset:2px;
}

/* The report and the defects, beside the runs they read across. */
#ido-workspace .app-main .trl-read {
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px;
  font-size:13px; color:var(--trw-muted); text-decoration:none;
}
#ido-workspace .app-main .trl-read:hover { color:var(--trw-text); border-color:#BCC7D3; }
.trl-read svg {
  width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

.dfc-jira { color:var(--trw-text); font-variant-numeric:tabular-nums; }
.dfc-none { color:var(--trw-muted); }

@media (max-width:900px) {
  .pl-card { grid-template-columns:minmax(0,1fr) 16px; }
  .pl-progress { grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce) {
  .pl-card, .pl-go { transition:none; }
}


/* ---- the run state filter -------------------------------------------------
   These chips lost their rules when the queue's own chips were replaced by the
   composition rail, so label and count ran together as one word. */
.trl-filters .trw-chips { display:flex; flex-wrap:wrap; gap:7px; }
.trl-filters .trw-chip {
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px;
  border:1px solid var(--trw-border); border-radius:7px; background:var(--trw-surface);
  font-size:12.5px; font-weight:600; color:var(--trw-muted); cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.trl-filters .trw-chip:hover { border-color:#BCC7D3; color:var(--trw-text); }
.trl-filters .trw-chip.on {
  background:var(--trw-yellow-soft); border-color:var(--trw-yellow); color:var(--trw-text);
}
.trl-filters .trw-chip-n {
  font-weight:700; font-variant-numeric:tabular-nums; color:var(--trw-text);
}
.trl-filters .trw-chip:not(.on) .trw-chip-n { color:var(--trw-muted); }


/* ---- the import panel's hierarchy opt-in ----------------------------------- */
#ido-workspace .app-main .imp-create {
  display:flex; align-items:flex-start; gap:10px; margin-top:12px;
  padding:11px 13px; border:1px solid var(--trw-border); border-radius:9px;
  background:var(--trw-neutral); cursor:pointer;
}
#ido-workspace .app-main .imp-create input[type="checkbox"] {
  width:16px!important; height:16px!important; min-height:16px!important;
  margin:2px 0 0!important; padding:0!important; flex:none; border-radius:4px!important;
  accent-color:var(--trw-text); cursor:pointer;
}
/* The panel's field labels are uppercased captions; this one is a sentence the user
   reads, so it opts out of the caption treatment it would otherwise inherit. */
#ido-workspace .app-main .imp-create,
#ido-workspace .app-main .imp-create span,
#ido-workspace .app-main .imp-create small {
  text-transform:none!important; letter-spacing:normal!important;
}
#ido-workspace .app-main .imp-create span { display:grid; gap:2px; font-size:13.5px; font-weight:500; color:var(--trw-text); }
#ido-workspace .app-main .imp-create small { font-size:12px; font-weight:400; color:var(--trw-muted); }

/* An export or a print that failed. Both used to fail silently, which reads as the
   button doing nothing at all. */
#ido-workspace .app-main .rp-export-error,
#ido-workspace .app-main .trc-export-error {
  margin:10px 0 0; font-size:13px; color:var(--trw-red);
}
@media print { .rp-export-error { display:none; } }

/* The way out of a project the user cannot open. Without it the only route back is the
   browser's own back button, from a page that never showed them anything. */
#ido-workspace .app-main .trl-denied-back { margin:12px 0 0; font-size:13px; }
#ido-workspace .app-main .trl-denied-back a { color:var(--trw-text); font-weight:600; }

/* ---- the defects register ---------------------------------------------------- */
#ido-workspace .app-main .dfc-toolbar {
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
}
#ido-workspace .app-main .dfc-search {
  width:min(360px, 100%); height:38px!important; min-height:38px!important;
  padding:0 12px!important; border:1px solid var(--trw-border)!important;
  border-radius:9px!important; background:var(--trw-surface)!important; font-size:13.5px!important;
}
#ido-workspace .app-main .dfc-search:focus {
  outline:none!important; border-color:var(--trw-text)!important;
  box-shadow:0 0 0 3px rgba(38,55,70,.12)!important;
}
#ido-workspace .app-main .dfc-matched { font-size:12.5px; color:var(--trw-muted); }
#ido-workspace .app-main .dfc-who,
#ido-workspace .app-main .dfc-when { font-size:13px; color:var(--trw-muted); white-space:nowrap; }
#ido-workspace .app-main .dfc-found { color:var(--trw-text); font-weight:600; text-decoration:none; }
#ido-workspace .app-main .dfc-found:hover { text-decoration:underline; }
#ido-workspace .app-main .dfc-pager {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin-top:14px; font-size:12.5px; color:var(--trw-muted);
}


/* ============================================================================
   BUTTON VARIANTS - one authoritative contract
   ============================================================================
   Until now .button.primary meant navy in the shell, near-black inside a test run,
   near-black again in the import panel and red in a run's modal, because each
   container painted it for itself. Four answers to one class is why a button placed
   in a container nobody had styled came out with a fill and no shape, three separate
   times in this codebase.

   This block is the answer, written once, by INTENT rather than by container:

     primary constructive  brand yellow, dark text
     secondary             white, bordered
     ghost / tertiary      quiet, no fill until hovered
     destructive           red, white text
     disabled              visibly inert but still readable

   It is scoped with the id because the shell's own rules are, and an id always
   outranks any number of classes; the container rules above can stay where they are
   rather than being unpicked one by one. Anything genuinely destructive opts out by
   carrying a destructive class, so a constructive default can never turn an unrelated
   action red, nor a destructive one yellow.
   ---------------------------------------------------------------------------- */

:root {
  --btn-primary-bg:#ffe800;
  --btn-primary-bg-hover:#f0da00;
  --btn-primary-text:#18212a;
  --btn-danger-bg:#D64541;
  --btn-danger-bg-hover:#C0392B;
}

/* Shared shape. Every variant is this box; only the paint differs. */
#ido-workspace .app-main .primary-button,
#ido-workspace .app-main .btn-primary,
#ido-workspace .app-main .button.primary,
#ido-workspace .app-main .secondary-button,
#ido-workspace .app-main .btn-secondary,
#ido-workspace .app-main .outline-button,
#ido-workspace .app-main .danger-button,
#ido-workspace .app-main .btn-danger {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  gap:8px!important;
  min-height:38px!important; height:auto!important; padding:0 16px!important;
  border-radius:9px!important; border:1px solid transparent!important;
  font-size:13.5px!important; font-weight:600!important; line-height:1.1!important;
  text-decoration:none!important; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}

/* ---- primary constructive ------------------------------------------------- */
#ido-workspace .app-main .primary-button:not(.danger-button):not(.trw-danger),
#ido-workspace .app-main .btn-primary:not(.danger-button):not(.trw-danger),
#ido-workspace .app-main .button.primary:not(.trw-danger):not(.danger-button) {
  background:var(--btn-primary-bg)!important;
  border-color:var(--btn-primary-bg)!important;
  color:var(--btn-primary-text)!important;
}
#ido-workspace .app-main .primary-button:not(.danger-button):not(.trw-danger):hover:not(:disabled),
#ido-workspace .app-main .btn-primary:not(.danger-button):not(.trw-danger):hover:not(:disabled),
#ido-workspace .app-main .button.primary:not(.trw-danger):not(.danger-button):hover:not(:disabled) {
  background:var(--btn-primary-bg-hover)!important;
  border-color:var(--btn-primary-bg-hover)!important;
}

/* ---- secondary ------------------------------------------------------------ */
#ido-workspace .app-main .secondary-button,
#ido-workspace .app-main .btn-secondary,
#ido-workspace .app-main .outline-button {
  background:var(--trw-surface)!important;
  border-color:var(--trw-border)!important;
  color:var(--trw-text)!important;
}
#ido-workspace .app-main .secondary-button:hover:not(:disabled),
#ido-workspace .app-main .btn-secondary:hover:not(:disabled),
#ido-workspace .app-main .outline-button:hover:not(:disabled) {
  background:#F7F9FB!important; border-color:#BCC7D3!important;
}

/* ---- destructive ---------------------------------------------------------- */
#ido-workspace .app-main .danger-button,
#ido-workspace .app-main .btn-danger,
#ido-workspace .app-main .button.primary.trw-danger,
#ido-workspace .app-main .trw .button.primary.trw-danger {
  background:var(--btn-danger-bg)!important;
  border-color:var(--btn-danger-bg)!important;
  color:#fff!important;
}
#ido-workspace .app-main .danger-button:hover:not(:disabled),
#ido-workspace .app-main .btn-danger:hover:not(:disabled),
#ido-workspace .app-main .button.primary.trw-danger:hover:not(:disabled),
#ido-workspace .app-main .trw .button.primary.trw-danger:hover:not(:disabled) {
  background:var(--btn-danger-bg-hover)!important;
  border-color:var(--btn-danger-bg-hover)!important;
}

/* ---- disabled ------------------------------------------------------------- */
/* Inert, and still legible: a disabled control the user cannot read is a control
   they cannot work out how to enable. */
#ido-workspace .app-main .primary-button:disabled,
#ido-workspace .app-main .btn-primary:disabled,
#ido-workspace .app-main .button.primary:disabled,
#ido-workspace .app-main .secondary-button:disabled,
#ido-workspace .app-main .btn-secondary:disabled,
#ido-workspace .app-main .outline-button:disabled,
#ido-workspace .app-main .danger-button:disabled,
#ido-workspace .app-main .btn-danger:disabled {
  opacity:.55!important; cursor:not-allowed!important;
  filter:saturate(.6);
}

/* ---- focus ---------------------------------------------------------------- */
#ido-workspace .app-main .primary-button:focus-visible,
#ido-workspace .app-main .btn-primary:focus-visible,
#ido-workspace .app-main .button.primary:focus-visible,
#ido-workspace .app-main .secondary-button:focus-visible,
#ido-workspace .app-main .btn-secondary:focus-visible,
#ido-workspace .app-main .outline-button:focus-visible,
#ido-workspace .app-main .danger-button:focus-visible,
#ido-workspace .app-main .btn-danger:focus-visible {
  outline:2px solid var(--trw-text)!important; outline-offset:2px!important;
}


/* ---- re-authentication ------------------------------------------------------
   Deliberately not the sign-in screen. The page underneath is intact and the user is
   coming back to it, so this reads as an interruption to be dismissed rather than a
   place they have been sent. */
.reauth-scrim {
  position:fixed; inset:0; z-index:400;
  background:rgba(17,24,39,.55); backdrop-filter:blur(3px);
}
.reauth-dialog {
  position:fixed; z-index:401; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100vw - 32px)); padding:24px;
  border:1px solid var(--trw-border); border-radius:14px; background:var(--trw-surface);
  box-shadow:0 30px 70px -24px rgba(17,24,39,.5);
}
.reauth-dialog h2 { margin:0 0 6px; font-size:18px; font-weight:700; color:var(--trw-text); }
.reauth-dialog > p { margin:0 0 18px; font-size:13.5px; line-height:1.5; color:var(--trw-muted); }

/* Who is being asked. Stated, never editable: this renews one identity, it does not
   offer to switch to another. */
.reauth-identity {
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  padding:9px 12px; border-radius:10px; background:var(--trw-neutral);
}
.reauth-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:50%;
  background:var(--brand-yellow); color:#18212a; font-size:12px; font-weight:700;
}
.reauth-email { font-size:13.5px; font-weight:600; color:var(--trw-text); overflow-wrap:anywhere; }

.reauth-field label {
  display:block; margin:0 0 7px; font-size:13px; font-weight:600; color:var(--trw-text);
}
#ido-workspace .reauth-dialog .form-input {
  width:100%; height:40px!important; min-height:40px!important; padding:0 12px!important;
  border:1px solid var(--trw-border)!important; border-radius:9px!important;
  background:var(--trw-surface)!important; color:var(--trw-text)!important; font-size:14px!important;
}
#ido-workspace .reauth-dialog .form-input:focus {
  outline:none!important; border-color:var(--trw-text)!important;
  box-shadow:0 0 0 3px rgba(38,55,70,.12)!important;
}
.reauth-error { margin:10px 0 0; font-size:13px; color:var(--trw-red); }

.reauth-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
#ido-workspace .reauth-actions .reauth-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:9px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; line-height:1; cursor:pointer;
}
#ido-workspace .reauth-actions .reauth-btn.ghost {
  background:var(--trw-surface); border-color:var(--trw-border); color:var(--trw-muted);
}
#ido-workspace .reauth-actions .reauth-btn.ghost:hover:not(:disabled) { color:var(--trw-text); border-color:#BCC7D3; }
#ido-workspace .reauth-actions .reauth-btn.go {
  background:var(--brand-yellow); border-color:var(--brand-yellow); color:#18212a;
}
#ido-workspace .reauth-actions .reauth-btn.go:hover:not(:disabled) { background:#f0da00; border-color:#f0da00; }
#ido-workspace .reauth-actions .reauth-btn:disabled { opacity:.5; cursor:not-allowed; }


/* ---- project integrations ---------------------------------------------------- */
#ido-workspace .app-main .int-lede { margin:8px 0 0; font-size:13.5px; color:var(--trw-muted); }
#ido-workspace .app-main .int-card {
  border:1px solid var(--trw-border); border-radius:12px; background:var(--trw-surface);
  padding:18px 20px; margin-bottom:14px;
}
#ido-workspace .app-main .int-card.muted { background:var(--trw-neutral); }
#ido-workspace .app-main .int-card-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
#ido-workspace .app-main .int-identity { display:flex; align-items:flex-start; gap:12px; }
#ido-workspace .app-main .int-mark {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:9px;
  background:var(--trw-text); color:#fff; font-size:15px; font-weight:700;
}
#ido-workspace .app-main .int-card h2 { margin:0; font-size:15.5px; font-weight:700; color:var(--trw-text); }
#ido-workspace .app-main .int-card-head p { margin:3px 0 0; font-size:13px; color:var(--trw-muted); }

#ido-workspace .app-main .int-status {
  flex:none; padding:4px 10px; border-radius:14px; border:1px solid var(--trw-border);
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  background:var(--trw-neutral); color:var(--trw-muted);
}
#ido-workspace .app-main .int-status.on { background:#EAF7EF; border-color:#BBE5C8; color:var(--trw-green); }
#ido-workspace .app-main .int-status.plan { background:var(--brand-yellow); border-color:var(--brand-yellow); color:#18212a; }

#ido-workspace .app-main .int-locked {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:14px 16px; border-radius:10px;
  border:1px solid var(--trw-border); background:var(--trw-neutral);
}
#ido-workspace .app-main .int-locked p { margin:0; font-size:13.5px; color:var(--trw-text); }

#ido-workspace .app-main .int-form {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin-top:18px;
}
#ido-workspace .app-main .int-field label {
  display:block; margin:0 0 7px; font-size:13px; font-weight:600; color:var(--trw-text);
}
#ido-workspace .app-main .int-form .form-input {
  width:100%; height:40px!important; min-height:40px!important; padding:0 12px!important;
  border:1px solid var(--trw-border)!important; border-radius:9px!important;
  background:var(--trw-surface)!important; color:var(--trw-text)!important; font-size:14px!important;
}
#ido-workspace .app-main .int-form .form-input:focus {
  outline:none!important; border-color:var(--trw-text)!important;
  box-shadow:0 0 0 3px rgba(38,55,70,.12)!important;
}
#ido-workspace .app-main .int-hint { margin:7px 0 0; font-size:12px; line-height:1.45; color:var(--trw-muted); }
#ido-workspace .app-main .int-verified { margin:14px 0 0; font-size:12.5px; color:var(--trw-muted); }
#ido-workspace .app-main .int-warn { margin:14px 0 0; font-size:13px; color:var(--trw-red); }
#ido-workspace .app-main .int-ok { margin:14px 0 0; font-size:13px; color:var(--trw-green); }
#ido-workspace .app-main .int-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; flex-wrap:wrap; }