/* Lead Extractor (/amazon/leads) — the page's own looks. Split out of leads.html on 2026-08-15 at the House Page Standard's 2,500-line rule, following the same shape as the Market / PPC / Sales v2 dashboards: styles.css (looks) next to the page, loaded BEFORE shell.css so the shared shell always wins on anything both of them touch. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6fa; color: #2d3436; } .sidebar { position: fixed; top: 0; left: 0; width: 150px; height: 100vh; background: #1a1f2e; color: #fff; display: flex; flex-direction: column; z-index: 100; } .sidebar .logo { padding: 14px 10px; border-bottom: 1px solid #2d3450; display: flex; align-items: center; gap: 8px; } .sidebar .logo svg { width: 28px; height: 28px; flex-shrink: 0; } .sidebar .logo span { font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: 1.5px; color: #e8eaed; } .sidebar nav { flex: 1; padding: 12px 0; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #8892a4; text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s; } .sidebar nav a:hover { background: #252b3d; color: #fff; } .sidebar nav a.active { background: #252b3d; color: #ff9900; border-left: 3px solid #ff9900; } .sidebar nav a .icon { width: 18px; text-align: center; font-size: 15px; } .sidebar .sidebar-footer { padding: 14px 14px; border-top: 1px solid #2d3450; font-size: 11px; color: #555e70; } .main { margin-left: 150px; } .topbar { background: #232f3e; color: #fff; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .topbar h1 { font-size: 18px; font-weight: 600; letter-spacing: .3px; } .topbar .subtitle { font-size: 12px; color: #a0aec0; margin-top: 2px; } .topbar .tb-actions { display: flex; align-items: center; gap: 18px; } .topbar .tabs { margin: 0; border: 0; flex: none; } .topbar .tab { white-space: nowrap; } .topbar .subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar > div:first-child { min-width: 0; } .set-wrap { position: relative; } .set-btn { padding: 6px 14px; border: none; border-radius: 16px; background: #ff9900; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; } .set-btn:hover { background: #e68a00; } .set-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: #2d3436; border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,.28); min-width: 280px; z-index: 80; overflow: hidden; text-align: left; } .set-menu.open { display: block; } .set-item { padding: 11px 16px; font-size: 13px; font-weight: 600; cursor: pointer; } .set-item + .set-item { border-top: 1px solid #edf2f7; } .set-item:hover { background: #f4f7fb; } .set-item span { display: block; font-size: 11px; color: #8a93a0; font-weight: 400; margin-top: 2px; line-height: 1.4; } .btn { border: 0; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn-blue { background: #2563eb; color: #fff; } .btn-blue:hover:not(:disabled) { background: #1e4fd1; } .btn-ghost { background: #fff; color: #2563eb; border: 1px solid #2563eb; } .btn-ghost:hover { background: #eaf1fe; } .btn-amz { background: #2563eb; color: #fff; display: inline-flex; align-items: center; gap: 6px; } .btn-amz:hover:not(:disabled) { background: #ff9900; color: #131a22; } .btn:disabled { opacity: .45; cursor: default; } .content { padding: var(--cg-row, 14px) var(--cg-gutter, 28px); } /* page rhythm: gaps come from --cg-row / --cg-gutter (shell.css, RULEBOOK Rule 6) */ .app-notice { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; } .app-notice.info { background: #e9f5ff; color: #1e3a8a; } .app-notice.warn { background: #fff4e5; color: #92400e; } .app-notice.danger { background: #fef2f2; color: #b42318; font-weight: 600; } /* Tabs */ .tabs { display: flex; gap: 4px; margin-bottom: var(--cg-row, 14px); border-bottom: 1px solid #e6e8ec; } .tab { padding: 9px 16px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: #2563eb; } .tab.active { color: #2563eb; border-bottom-color: #2563eb; } /* ONE stat strip with dividers — eight separate drop-shadowed boxes read as visual noise and pushed the table down. */ .summary { display: flex; flex-wrap: nowrap; align-items: stretch; /* one-row summary cards (2026-08-04) */ background: #fff; border: 1px solid #e9edf3; border-radius: 10px; margin-bottom: var(--cg-row, 14px); overflow: hidden; } .drawer-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.28); z-index: 70; display: none; } .drawer-scrim.open { display: block; } /* Column layout so a long list (history) fills the drawer's full height instead of stopping a third of the way down. */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 94vw; background: #fff; border-left: 1px solid #e6e9ee; box-shadow: -12px 0 34px rgba(20,30,50,.16); z-index: 71; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .18s ease; } .drawer > .drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; gap: 9px; padding: 15px 16px; border-bottom: 1px solid #eef0f3; font-size: 14.5px; font-weight: 700; color: #1f2733; position: sticky; top: 0; background: #fff; z-index: 2; } .drawer-head .count { font-weight: 500; font-size: 12.5px; color: #98a1b0; } .drawer-head .drawer-x { margin-left: auto; } .drawer-x { border: 0; background: none; font-size: 22px; line-height: 1; color: #98a1b0; cursor: pointer; padding: 0 2px; } .drawer-x:hover { color: #ef4444; } /* Last-scrape filter button + its on-state, and the banner over the table. */ .lastrun-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; } .lastrun-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 14px; background: #eff5ff; border: 1px solid #bcd0f5; border-left: 3px solid #2563eb; border-radius: 8px; font-size: 13px; color: #1e40af; font-weight: 600; } .lastrun-banner button { margin-left: auto; border: 1px solid #2563eb; background: #fff; color: #2563eb; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .lastrun-banner button:hover { background: #2563eb; color: #fff; } /* Scrape strip — the RUN's status, not a catalogue counter, so it gets its own panel instead of reading as another stat square in the row above. */ /* The box that holds the process row: a caption, the eight steps, and a tail of what came back last time. Three stacked bands, always — letting them share one line meant they sat together at 1600 and broke apart at 1440, the same strip reading two different ways depending on the window. */ .scrape-bar { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 10px; padding: 10px 14px; background: #fff; border: 1px solid #e9edf3; border-radius: 10px; } /* A term the AI suggested and you kept, vs one you typed — the waiting list has to show the split the strip's chip claims. */ .seed-pill.by-ai { border-color: #cddcfa; background: #f4f8ff; } .pill-ai { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #2563eb; background: #e5eefe; border-radius: 4px; padding: 1px 4px; margin-right: 5px; } /* "No" — the AI checked the name and says it is not a real brand. Deliberately quiet: it is a finished answer that needs nothing from you, unlike the amber question above it. `.you` marks the ones YOU answered. */ .brand-no { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #8a93a2; background: #f3f5f8; border: 1px solid #e6e9ee; cursor: pointer; } .brand-no:hover { color: #5b6472; background: #eef1f5; } .brand-no.you { color: #5b6472; background: #eef2f7; border-color: #dbe1ea; } /* ⚙ Bulk actions ▾ — the Market table's menu, same shape (owner 2026-08-15). */ /* (.bulk-menu / .bulk-item / .bulk-head / .bulk-sep were this page's own copy of a menu the shell already owned. They are deleted, not edited: the shell styles `#bulkMenu` BY ID as position:fixed and loads after this file, so this page's `top: calc(100% + 5px)` — written for an absolute box — resolved against the VIEWPORT and opened the menu at y=1005 on a 1000px screen. The lines now use the house `.bulk-mi` classes and cgBulkMenu places the box. RULEBOOK Rule 6: a second, slightly-different version of an existing component is a BUG. This is what that bug looks like from the outside: "we click it and nothing happens".) */ .bulk-wrap { position: relative; display: inline-flex; } /* Visible but inert with nothing ticked — it says the feature exists. */ .bulk-btn:disabled { opacity: .5; cursor: default; } .bulk-btn .amz-n { background: #2563eb; color: #fff; border-radius: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; margin: 0 2px; } background: #fff; border: 1px solid #dfe3e9; border-radius: 10px; box-shadow: 0 10px 26px rgba(20,26,40,.16); padding: 5px; } color: #98a1b0; padding: 6px 10px 4px; } padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: #2d3436; } /* A line that needs ticked rows, with none ticked. Shown rather than hidden so the menu keeps its shape and you can see what ticking would give you. */ /* The one action inside a toast (“Show them” after a bulk status change). */ .toast-act { margin-left: 8px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.14); color: inherit; font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 9px; cursor: pointer; } .toast-act:hover { background: rgba(255,255,255,.28); } /* Copy a brand name — on each row, and the whole column from the header. */ .brand-copy, .brand-copy-all { border: 0; background: transparent; cursor: pointer; padding: 2px 3px; font-size: 10px; line-height: 1; opacity: .35; filter: grayscale(1); font-family: inherit; } .brand-copy:hover, .brand-copy-all:hover { opacity: 1; filter: none; } .brand-copy { margin-left: 2px; flex: none; } /* Pinned into the header's top-LEFT corner, out of the text flow: inline it pushed the emoji onto a second line and made the cell taller than every other header (2026-08-15). Top-right belongs to the `i`, bottom-right to the sort arrow. */ thead th .brand-copy-all { position: absolute; left: 3px; top: 3px; margin: 0; font-size: 9px; } .brand-pop { position: absolute; z-index: 2000; background: #fff; border: 1px solid #dfe3e9; border-radius: 9px; box-shadow: 0 8px 22px rgba(20,26,40,.14); padding: 4px; min-width: 180px; } .brand-pop button { display: flex; width: 100%; justify-content: space-between; gap: 10px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; color: #2d3436; padding: 7px 10px; border-radius: 6px; text-align: left; } .brand-pop button:hover { background: #f6f9ff; color: #2563eb; } .brand-pop b { color: #98a1b0; font-weight: 700; } /* A prompt editor is a SIDE screen, never the main view. When one is on screen it gets a blue outline, not the slate fill Leads wears — that fill is what made the two prompt tabs read as main tabs (owner 2026-08-15). */ .aside-btn.side-btn.active { background: #fff; border-color: #2563eb; color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; } .aside-btn.side-btn.active:hover { background: #f6f9ff; border-color: #1e4fd1; color: #1e4fd1; } /* The one-line "which model" summary that replaced a card of prose. */ .ai-line { background: #fff; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px 16px; font-size: 13px; color: #5b6472; cursor: help; } .ai-line b { color: #1a1d23; font-weight: 700; } /* The generator tab's top row: two actions, and a chip that opens the term list nobody normally reads. */ .gen-actions .ai-row { flex-wrap: wrap; } .gen-peek { font-weight: 600; } .gen-peek .cx { color: #98a1b0; font-size: 10px; margin-left: 2px; } .gen-list { margin-top: 10px; border-top: 1px solid #eef0f3; padding-top: 6px; max-height: 340px; overflow: auto; } /* Save confirmation, on the button itself (the toast says the rest). */ .btn.btn-saved { background: #15803d !important; border-color: #15803d !important; color: #fff !important; } /* ═══ THE PROCESS ROW ═══════════════════════════════════════════════════ Eight steps in the order they happen, arrows between, drawn from the SAME prSteps() the map window uses (owner 2026-08-18: "this new row will create this new diagram flow"). A step is a CARD, not a chip: its number, its name and who does it, what it says RIGHT NOW, and the button that fires it. A chip could only ever say "Search terms"; a card says "2 need your answer" without being opened, which is the whole reason the process is back on the page instead of behind the ⚙ menu. */ .pf-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #98a1b0; } .pf-cap i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: #b6bfcc; margin-left: 8px; } /* ONE LINE, NEVER TWO (owner 2026-08-26: "the squares that show the process should be more compact and 1 line, not 2"). Eight steps wrapped onto two rows and cost 260px of page before the table. Three things buy that back: the buttons sit INSIDE the card instead of under their own hairline, the paddings and type come down a notch, and the row NO LONGER WRAPS — below the width where eight fit it scrolls sideways instead, which keeps the shape of the process readable rather than folding it in half. */ /* WRAPS ON A SMALL SCREEN, ONE LINE ON A BIG ONE. A row that scrolls sideways hides steps, and a hidden step is worse than a folded row — so narrow windows keep the old two-row behaviour and only a window wide enough to hold all eight gets the single line the owner asked for. */ .pf-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 1px; row-gap: 6px; } @media (min-width: 1400px) { .pf-flow { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } } .pf-step { display: flex; flex-direction: column; flex: 0 0 auto; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff; padding: 4px 4px 5px; } .pf-step.hot { border-color: #bcd0f5; background: #f8fbff; } .pf-open { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: inherit; padding: 0; border-radius: 6px; } .pf-open:hover { background: #f6f9ff; } .pf-open:hover .pf-t { color: #2563eb; } .pf-n { display: inline-block; min-width: 15px; height: 15px; line-height: 15px; text-align: center; background: #eef2f7; color: #5b6472; border-radius: 20px; font-size: 10px; font-weight: 800; margin-right: 5px; } .pf-step.hot .pf-n { background: #2563eb; color: #fff; } .pf-t { font-size: 12px; font-weight: 700; color: #1f2733; white-space: nowrap; } .pf-t i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #98a1b0; margin-left: 4px; } .pf-l { display: block; margin: 1px 0 0 20px; font-size: 11px; color: #5b6472; white-space: nowrap; } .pf-step.hot .pf-l { color: #2563eb; font-weight: 600; } .pf-a { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin: 4px 0 0 20px; } .pf-b { border: 1px solid #dfe3e9; background: #fff; color: #3d4551; border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; } .pf-b:hover:not(:disabled) { border-color: #bcd0f5; color: #2563eb; background: #f6f9ff; } .pf-b:disabled { opacity: .5; cursor: default; } /* Blue fill = pressing it SPENDS something: an AI call, or a night of proxy bandwidth. Everything else on the row only opens a panel. */ .pf-b.pf-do { background: #2563eb; border-color: #2563eb; color: #fff; } .pf-b.pf-do:hover:not(:disabled) { background: #1e4fd1; border-color: #1e4fd1; color: #fff; } /* The pool we are MOVING OFF (2026-08-24). Still a real button — it runs — but it must never look like the one to press: no fill, muted ink, and the warning is part of the label, not hidden in a tooltip. */ .pf-b.pf-old { color: #98a1b0; border-color: #ececf1; background: #fbfbfc; } .pf-b.pf-old i { font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #b45309; background: #fef6e7; border-radius: 3px; padding: 1px 3px; margin-left: 4px; } .pf-b.pf-old:hover:not(:disabled) { color: #5b6472; border-color: #dfe3e9; background: #fff; } .pf-busy { font-size: 10.5px; font-weight: 600; color: #2563eb; white-space: nowrap; } .pf-arrow { align-self: center; flex: 0 0 auto; color: #c3ccd8; font-size: 11px; padding: 0; margin: 0 1px; user-select: none; } /* The tail: what came back LAST time. Backward-looking, so it sits under the flow rather than inside it. */ .pf-tail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; border-top: 1px solid #f0f3f7; padding-top: 6px; } .pf-q { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: #5b6472; font-family: inherit; padding: 2px; border-radius: 6px; } .pf-q:hover { color: #2563eb; } .pf-q b { background: #eef2f7; color: #5b6472; border-radius: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; } .pf-last { font-size: 12px; color: #98a1b0; white-space: nowrap; } .pf-last b { color: #5b6472; font-weight: 700; } .pf-last .dim { color: #b6bfcc; } .pf-fail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .pf-fail .fk { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #b91c1c; font-weight: 700; } .pf-fail .fp { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 5px; padding: 1px 6px; font-size: 11.5px; } .pf-fail .fmore { font-size: 11.5px; color: #b91c1c; } .pf-fail .fauto { font-size: 11.5px; font-weight: 600; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 5px; padding: 2px 7px; cursor: help; } .stat { flex: 1 1 0; min-width: 92px; padding: 9px 10px; border-left: 1px solid #f0f3f7; } .stat:first-child { border-left: 0; } .stat.gap { border-left: 1px solid #dde3ec; } .stat .k { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 600; color: #98a1b0; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .stat .v { font-size: 17px; font-weight: 700; color: #1a1d23; margin-top: 1px; } .stat .v small { font-size: 10.5px; font-weight: 500; color: #98a1b0; } .stat.t1 { border-left: 3px solid #d97706; } .stat.t2 { border-left: 3px solid #2563eb; } .stat.t3 { border-left: 3px solid #94a3b8; } /* Centre-screen toast for the Run-now feedback */ .cg-toast { display: none; position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 400; padding: 14px 22px; border-radius: 12px; font-size: 15px; font-weight: 600; box-shadow: 0 12px 40px rgba(0,0,0,.28); max-width: 90vw; text-align: center; } .cg-toast.ok { background: #ecfdf3; color: #067647; border: 1px solid #a6f4c5; } .cg-toast.warn { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; } .cg-toast.err { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; } .card { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: var(--cg-row, 14px); overflow: hidden; } .card > h2 { font-size: 13.5px; padding: 9px 14px; border-bottom: 1px solid #eef0f3; display: flex; align-items: center; gap: 9px; cursor: pointer; } /* The two rarely-open setup cards sit SIDE BY SIDE — stacked full-width they pushed the table below the fold for no benefit (both are collapsed by default). */ .card > h2 .count { color: #98a1b0; font-weight: 500; font-size: 12.5px; } .cg-expand { display: inline-block; width: 14px; font-size: 9px; color: #ff9900; transition: transform .15s; margin-right: 2px; flex: none; } .cg-expand.open { transform: rotate(90deg); } .q-note { padding: 6px 16px; font-size: 12.5px; color: #5b6472; line-height: 1.6; } .q-note b { color: #1a1d23; } .seed-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 16px; } .seed-pill { display: inline-flex; align-items: center; gap: 7px; background: #eaf1fe; border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12.5px; color: #1e3a8a; font-weight: 600; } .seed-pill .seed-x { cursor: pointer; color: #7aa0e6; font-weight: 700; font-size: 14px; line-height: 1; } .seed-pill .seed-x:hover { color: #c0392b; } .seed-add { display: flex; gap: 8px; padding: 4px 16px 14px; } .seed-add input { flex: 1; max-width: 420px; border: 1px solid #cbd5e0; border-radius: 7px; padding: 7px 10px; font-size: 13px; font-family: inherit; } .q-cap { font-weight: 700; } .q-cap.full { color: #c0392b; } .hist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; font-size: 12.5px; } .hist-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #f2f4f7; } .hist-row .h-when { color: #98a1b0; white-space: nowrap; } /* ONE control height for every field, chip, checkbox and button in the bar — they each had their own padding before, so nothing lined up. */ .filters-bar { --ctl: 32px; display: flex; align-items: flex-end; gap: 10px 12px; padding: 14px 16px; background: #fff; border-radius: 10px; margin-bottom: var(--cg-row, 14px); box-shadow: 0 1px 3px rgba(0,0,0,.06); flex-wrap: wrap; } .filters-bar .in, .filters-bar .range input, .filters-bar .filter-chip, .filters-bar .clear-btn, .filters-bar .btn { height: var(--ctl); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .filter-group { display: flex; flex-direction: column; gap: 6px; } .filter-group > label { font-size: 11px; font-weight: 600; color: #636e72; text-transform: uppercase; letter-spacing: .5px; line-height: 1.2; height: 13px; } .filter-chips { display: flex; gap: 6px; } .filter-chip { padding: 0 13px; border: 1px solid #cbd5e0; border-radius: 16px; font-size: 12px; cursor: pointer; user-select: none; background: #fff; } .filter-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; } /* (.tier-chks was the Tier filter's checkbox pills. The filter became house .filter-chip chips long ago and the markup is gone entirely since the Matches rewrite — deleted 2026-09-03 rather than left to look load-bearing.) */ .range { display: flex; align-items: center; gap: 5px; } .range input { width: 74px; border: 1px solid #cbd5e0; border-radius: 7px; padding: 0 8px; font-size: 13px; font-family: inherit; } .range span { color: #b0b8c0; } /* A date box needs room for dd/mm/yyyy and its picker button, but not a pixel more — the filter bar is a two-row budget (House Standard §4). */ .range input.date-in { width: 112px; color: #2d3436; padding: 0 4px; } .range input.date-in:invalid { color: #94a3b8; } .in { border: 1px solid #cbd5e0; border-radius: 7px; padding: 0 10px; font-size: 13px; font-family: inherit; color: #2d3436; background: #fff; } select.in { padding-right: 6px; } .clear-btn { background: #fff; color: #64748b; border: 1px solid #cbd5e0; border-radius: 7px; padding: 0 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .clear-btn:hover { border-color: #2563eb; color: #2563eb; } /* Actions sit together on the control line — no fake   labels above them. */ .filter-actions { display: flex; align-items: center; gap: 8px; align-self: flex-end; } .filters-bar .filter-actions .btn { padding: 0 14px; } /* The window a diagram opens in. Same class names and values the PPC page uses for its optimization windows, so the two look identical; the .fl-* drawing styles themselves already live in shell.css. */ .rules-overlay { display:none; position:fixed; inset:0; background:rgba(20,26,40,0.45); z-index:1500; align-items:flex-start; justify-content:center; padding:60px 16px 16px; } .rules-card { background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25); max-width:760px; width:100%; padding:20px 24px; font-size:13.5px; max-height:calc(100vh - 90px); overflow:auto; } .rules-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .rules-head h3 { font-size:17px; } .rules-x { font-size:22px; color:#8a93a0; cursor:pointer; line-height:1; } .rules-x:hover { color:#e74c3c; } /* The process windows are wide drawings — the house card maxes at 760px. */ .rules-card.lead-flow-card { max-width: 1580px; } /* The archive — a collapsed strip under the table, in the house card look. */ .arch-box { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-top: var(--cg-row, 14px); } .arch-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-size: 13px; color: #2d3436; } .arch-head .gray { font-size: 12px; } .arch-body { border-top: 1px solid #edf0f4; padding: 6px 16px 14px; max-height: 380px; overflow: auto; } .arch-tools { display: flex; gap: 10px; padding: 8px 0 10px; } .arch-row { display: grid; grid-template-columns: 1fr 200px 110px 96px; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #f4f6f9; font-size: 12.5px; } .arch-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arch-n, .arch-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The header's occasional-use corner — same component as the Market page's "BSR curves" button: quiet by default, SOLID slate when it IS the screen. */ .aside-btn { margin: 0 8px 0 0; background: #fff; color: #5b6472; border: 1px solid #dde2ea; border-radius: 8px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; line-height: 16px; } .aside-btn:hover { color: #1a1d23; border-color: #c3ccd8; background: #f7f9fc; } .aside-btn.active { background: #475569; border-color: #475569; color: #fff; } .aside-btn.active:hover { background: #3d4a5c; border-color: #3d4a5c; color: #fff; } .tb-sep { width: 1px; height: 22px; background: #e3e8ef; margin: 0 12px 0 4px; display: inline-block; } .bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; color: #92400e; } .bulk-bar select, .bulk-bar button { font-family: inherit; } /* ── The table's own bar (House Standard §5.6) ────────────────────────────── Title, count and every control that ACTS on the table, in ONE row that sits ABOVE the scroll pane and never scrolls away. Its height is fixed, so ticking a row swaps the words on the left and the buttons on the right instead of pushing the table down (owner 2026-08-12). Buttons in it are all the same house height, so a row of them lines up instead of stepping. */ /* ── "More" — the occasional filters, behind one button (owner 2026-08-26) ── The rule that makes this safe: a filter you cannot see must never be able to narrow the list silently. So the button COUNTS how many of the filters inside it are applied and wears the count, turning into an active chip while any of them is on. Clear filters still clears them. */ .more-wrap { position: relative; display: inline-block; } .filter-more { height: 30px; padding: 0 11px; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; color: #3d4551; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; } .filter-more:hover { border-color: #bcd0f5; color: #2563eb; } .filter-more.on { background: #2563eb; border-color: #2563eb; color: #fff; } .filter-more .mn { display: inline-block; margin-left: 5px; min-width: 15px; padding: 0 4px; border-radius: 9px; background: #fff; color: #2563eb; font-size: 10.5px; font-weight: 800; } .more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; flex-direction: column; gap: 10px; min-width: 268px; padding: 12px 13px; background: #fff; border: 1px solid #e2e6ec; border-radius: 10px; box-shadow: 0 10px 28px rgba(16,24,40,.14); } .more-menu .filter-group { margin: 0; } .tbl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid #edf0f4; flex-wrap: wrap; } .tbl-bar-l h2 { margin: 0; font-size: 14px; font-weight: 700; color: #1a1f2e; line-height: 1.2; } .tbl-count { font-size: 12px; color: #636e72; margin-top: 1px; white-space: nowrap; } /* How many products teach the search-term generator. Quiet until there are too many, then it says so where the ticks are made. */ .ex-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: #eef2f7; color: #5b6472; font-size: 11px; font-weight: 600; cursor: help; } .ex-count.over { background: #fdecea; color: #b3261e; } /* The two lines under the Generate buttons: what the last run produced, and what the next one will read. */ .gen-note { margin-top: 8px; font-size: 12.5px; color: #5b6472; line-height: 1.6; } .gen-note b { color: #1a1d23; } .ex-warn { color: #b3261e; } /* One row on any normal screen (measured: everything fits from ~1150px up, even with rows ticked AND terms waiting). Below that it takes a second line rather than squeezing the labels — a squashed button that reads "Sort with…" is worse than a taller bar. Buttons never shrink. */ .tbl-bar-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .tbl-bar-r .btn, .tbl-bar-r .in, .tb-sel { flex-shrink: 0; } /* .btn-amz is inline-flex with a gap for its icon buttons; inside the table bar a label split into two spans must read as ONE phrase, not two items. */ .tbl-bar-r .btn { gap: 0; } /* On a small laptop the longest labels shed a word rather than push a button out of the card; the tooltips carry the full meaning. */ @media (max-width: 1240px) { .tbl-bar-r .btn { padding: 0 10px; } } @media (max-width: 1140px) { .tbl-bar-r .lbl-long { display: none; } .tbl-bar-r .btn { padding: 0 8px; } .tbl-bar-r { gap: 5px; } .tb-sel { padding-right: 6px; margin-right: 0; gap: 6px; } } .tbl-bar-r .btn, .tbl-bar-r .in { height: 30px; box-sizing: border-box; } .tbl-bar-r .in { border: 1px solid #cbd5e0; border-radius: 8px; padding: 0 8px; font-size: 12px; font-family: inherit; } .tb-sel { display: inline-flex; align-items: center; gap: 8px; padding-right: 10px; margin-right: 2px; border-right: 1px solid #edf0f4; } .tb-sel label { font-size: 12px; color: #636e72; font-weight: 600; } .btn-plain { background: transparent; color: #636e72; border: 1px solid transparent; } .btn-plain:hover { color: #1a1f2e; background: #f1f3f5; } /* Part of the count LINE now, not a line of its own (owner 2026-08-26). */ .tbl-ai { font-size: 11.5px; white-space: nowrap; } .tbl-ai a { color: #7a8494; text-decoration: none; } .tbl-ai a:hover { color: #2563eb; } .tbl-ai-x { color: #2563eb; font-weight: 600; } .tbl-aistatus { font-size: 12px; font-weight: 600; white-space: nowrap; } /* A "Show" filter chip that has nothing to show yet — dimmed, not clickable, but the SAME size, so the bar never reflows. */ .filter-chip.chip-off { opacity: .4; cursor: default; } .table-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; } /* House-standard table (like Market/Inventory): the table is its OWN scroll region with a capped height, so BOTH scrollbars stay in view — you can scroll left/right at any point without first scrolling to the bottom — and the header row freezes at the top while the rows scroll under it. Column widths are made draggable by shell.js. */ .table-wrap .table-scroll { max-height: calc(100vh - 210px); overflow: auto; } /* Fixed proxy horizontal scrollbar pinned to the viewport bottom (house pattern, copied from the Market table) — always reachable without scrolling the page down. */ table { width: 100%; border-collapse: collapse; font-size: 13px; } /* header COLOURS come from the shell's house table tokens (Rule 6 §5a) */ thead th { padding: 9px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; user-select: none; } .table-wrap thead th { position: sticky; top: 0; z-index: 6; box-shadow: inset 0 -1px 0 var(--cg-th-line); } thead th.nosort { cursor: default; } th.l, td.l { text-align: left; } td.nowrap, .nowrap { white-space: nowrap; } /* Fixed row height so a bigger picture never grows the row (house style, like Sales/Market). house-table-ok: every column here except the product title IS a figure or a badge (revenue, units, reviews, rating, date, status chips), so the body centres wholesale and the two identity columns opt out with `.l` on the line below — tagging ~15 cells one by one would say the same thing louder. Vertical centring is NOT repeated: shell.css's house standard gives it. */ tbody td { padding: 3px 6px; height: 54px; border-top: 1px solid #f0f2f5; text-align: center; } tbody tr:hover td { background: #f7faff; } /* Alternating shade PER NICHE GROUP so same-niche products read as one block. */ tbody tr.grp-b td { background: #f5f8fd; } tbody tr.grp-a:hover td, tbody tr.grp-b:hover td { background: #eef4ff; } .prod-title { color: #1a1d23; max-width: 210px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.25; vertical-align: middle; } .prod-title:hover { color: #2563eb; text-decoration: underline; } .thumb { width: 40px; height: 40px; max-width: 100%; object-fit: contain; border-radius: 5px; background: #fff; border: 1px solid #eef0f3; display: inline-block; cursor: zoom-in; } .thumb-none { width: 40px; height: 40px; max-width: 100%; border-radius: 5px; background: #f1f5f9; display: inline-block; } /* Hover preview — a single shared, viewport-fixed image so it never gets clipped by the table's own scroll region. */ #thumbPreview { position: fixed; z-index: 300; width: 240px; height: 240px; object-fit: contain; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 8px; pointer-events: none; display: none; } /* Shared type-ahead suggestion dropdown (niche finder + brand list). */ .suggest { position: fixed; z-index: 200; background: #fff; border: 1px solid #cbd5e0; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.16); min-width: 240px; max-width: 380px; max-height: 300px; overflow-y: auto; font-size: 12.5px; } .suggest .sg-head { padding: 5px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; background: #fbfcfe; border-bottom: 1px solid #eef0f3; position: sticky; top: 0; } .suggest .sg-item { padding: 6px 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .suggest .sg-item:hover { background: #eef4ff; } .suggest .sg-item .sg-cnt { color: #98a1b0; font-size: 11px; white-space: nowrap; } .suggest .sg-item .sg-x { color: #c0392b; font-weight: 700; cursor: pointer; padding: 0 4px; } .suggest .sg-add { color: #16a34a; font-weight: 700; } .suggest .sg-exists { padding: 7px 10px; background: #fff7ed; color: #92400e; font-weight: 600; border-bottom: 1px solid #fed7aa; } .suggest .sg-empty { padding: 8px 10px; color: #98a1b0; } .suggest mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; } .link-open { font-family: 'IBM Plex Mono', monospace; white-space: nowrap; color: #2563eb; text-decoration: none; font-size: 11.5px; } .link-open:hover { text-decoration: underline; } /* One-click "search this ASIN tonight" chip — saves copy-pasting the ASIN into the queue box. */ .add-seed { display: inline-block; margin-left: 3px; padding: 0 4px; border: 1px solid #d7dbe2; border-radius: 4px; background: #fff; color: #5b6472; font-size: 11px; line-height: 16px; cursor: pointer; user-select: none; vertical-align: middle; } .add-seed:hover { border-color: #2563eb; color: #2563eb; background: #f3f7ff; } .add-seed.queued { border-color: #16a34a; color: #16a34a; background: #f0fdf4; cursor: default; } /* (the ⧉ copy chip's look lives in Shared Data/shell.css; this page's copy was dead code — it creates no .copy-btn anywhere — and went 2026-08-30) */ .amz-check, .amz-check-all { accent-color: #ff9900; cursor: pointer; margin: 0; vertical-align: middle; } .editable { cursor: text; border-radius: 5px; padding: 2px 6px; display: inline-block; min-width: 40px; } .editable:hover { background: #eef4ff; outline: 1px dashed #93c5fd; } .edit-in { border: 1px solid #2563eb; border-radius: 5px; padding: 3px 6px; font-size: 12.5px; font-family: inherit; width: 150px; } .niche-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #ede9fe; color: #5b21b6; } /* The AI's own mark: this niche came from the newest AI sort and nobody has touched it since. Click it to read what the AI said; ↺ puts back what the row held before. Both disappear the moment the row is edited or reverted. */ .ai-wrap { white-space: nowrap; } .ai-mark { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .3px; background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; cursor: pointer; vertical-align: middle; } .ai-mark:hover { background: #ffedd5; } /* The AI looked and would not commit — grey, not orange: nothing was changed. */ .ai-unsure { background: #f1f3f5; color: #57606a; border-color: #d8dee4; } .ai-you { background: #eaf7ee; color: #15803d; border-color: #9fd3b0; } /* you named it */ .ai-unsure:hover { background: #e7eaee; } .ai-undo { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 3px; border: 1px solid #e4e7eb; border-radius: 6px; background: #fff; color: #8a93a2; cursor: pointer; font-size: 12px; font-weight: 700; vertical-align: middle; } .ai-undo:hover { color: #b91c1c; border-color: #f0b4b4; background: #fef6f6; } .ai-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; margin: 0 0 var(--cg-row, 14px); padding: 9px 14px; border: 1px solid #fed7aa; background: #fff7ed; border-radius: 12px; font-size: 13px; color: #7c2d12; } .ai-banner .aib-l { min-width: 0; } .ai-banner .aib-meta { font-size: 11.5px; color: #9a6b4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-banner .aib-facts { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-banner .aib-r { display: flex; align-items: center; gap: 8px; flex: none; } .ai-banner b { color: #7c2d12; } .ai-banner button { margin-left: 4px; border: 1px solid #fdba74; background: #fff; color: #9a3412; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .ai-banner button:hover { background: #ffedd5; } .ai-banner .aib-meta, .ai-banner .aib-facts { display: block; } /* The AI's brand guess: a question with two worded answers. Click the chip to read what each one does — a tick and a cross explained neither. */ #results table { table-layout: fixed; } /* the widths above are kept */ #results tbody td { height: 58px; } /* every row identical */ #results th { white-space: normal; line-height: 1.15; word-break: normal; overflow-wrap: anywhere; padding-left: 4px; padding-right: 4px; } #results td.c-title { overflow: hidden; } .c-brand .brand-tag { max-width: 100%; font-size: 10.5px; padding: 1px 7px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } #results tbody td > * { vertical-align: middle; } .prod-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .c-niche { white-space: nowrap; } /* The AI-example tick. No text-align here — the shell owns cell alignment (RULEBOOK Rule 6); the box centres itself with auto margins. */ .c-ex input { display: block; margin: 0 auto; cursor: pointer; } /* (.brand-ask / .bt-yes / .bt-no were the in-cell Yes/No buttons. Deleted 2026-09-03 with the markup — the brand question is answered in the "AI right?" column now. The .brand-tag chip below is still drawn: it is the AI's ANSWER, which is a statement, not a question.) */ /* Only the NAME gives way. Putting `overflow:hidden` on the chip itself hid the copy button behind a long name and made it unclickable (2026-08-15). */ .brand-tag { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #fef3c7; color: #92400e; white-space: nowrap; cursor: pointer; } .brand-tag .bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .brand-tag:hover { background: #fde68a; } .notes-cell { max-width: 180px; text-align: left; color: #64748b; font-size: 12px; } /* MATCHES — the plain count of qualifying products sharing the niche (2026-09-03, replacing the T1/T2/T3 badges). The colour is a RAMP, so the number and the shade say the same thing: pale for alone, strong for a crowded niche. The old ladder ran the other way round (2 products = "T3", the darkest-sounding name) and had no colour at all for 1. */ .match-badge { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center; } .m-1 { background: #f1f5f9; color: #64748b; } .m-2 { background: #e2e8f0; color: #475569; } .m-3 { background: #dbeafe; color: #1e40af; } .m-4 { background: #bfdbfe; color: #1e3a8a; } .m-5 { background: #d97706; color: #fff; } .units-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; background: #eef2f7; color: #475569; } .rev-badge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-weight: 800; font-size: 12.5px; background: #e7f7ee; color: #1a7f4b; } .rev-badge.imp { background: #fdf6ec; color: #9a6700; } .rating-weak { color: #c0392b; font-weight: 700; } .gray { color: #98a1b0; } .empty { padding: 30px; text-align: center; color: #98a1b0; font-size: 13px; line-height: 1.7; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #eef0f3; font-size: 12.5px; color: #5b6472; } .pager .pg-btns { display: flex; gap: 8px; align-items: center; } .pager button { background: #fff; border: 1px solid #cbd5e0; border-radius: 7px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #2563eb; } .pager button:disabled { opacity: .4; color: #94a3b8; } /* AI prompt tab */ .ai-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 900px; } .ai-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 16px 18px; } .ai-card h3 { font-size: 14px; color: #1a1d23; margin-bottom: 8px; } .ai-model { font-size: 13px; color: #5b6472; margin-bottom: 6px; } .ai-model b { color: #1a1d23; } .added-pre { margin: 0; padding: 10px 12px; background: #f8fafc; border: 1px solid #e6eaf0; border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.55; color: #46505e; white-space: pre-wrap; max-height: 220px; overflow: auto; } .added-pre b { color: #1a1f2e; } .prompt-ta { width: 100%; min-height: 200px; border: 1px solid #cbd5e0; border-radius: 8px; padding: 12px; font-size: 13px; font-family: 'IBM Plex Mono', monospace; line-height: 1.5; resize: vertical; } .ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .ai-row input[type=text] { border: 1px solid #cbd5e0; border-radius: 7px; padding: 7px 10px; font-size: 13px; font-family: inherit; } /* ── THE PROMPT, INSIDE THE WINDOW THAT DRAWS ITS STEP (owner 2026-08-18) ── Phase 1 of retiring the two prompt tabs: each prompt now lives under the flow it drives, so a step's picture, its words and its instruction are one thing. The panel is a plain section of the window — it must not look like a second card floating in it. */ .fl-prompt { margin: 18px 0 4px; border-top: 1px solid #eef0f3; padding-top: 14px; } .fl-prompt-h { font-size: 13px; font-weight: 700; color: #1a1f2e; padding: 0 2px 10px; } /* TWO COLUMNS, because the window is 1,580px wide and the two things you compare are the PROMPT and WHAT THE CODE WRAPS AROUND IT (owner's words: "see the box of text coming before our prompt"). Side by side, not one under the other — and no 900px cap, which was sized for the old tab. */ .fl-prompt .ai-grid { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .fl-prompt .gen-actions, .fl-prompt .ai-line { grid-column: 1 / -1; } .fl-prompt .ai-card { background: #fbfcfe; border: 1px solid #eef1f6; box-shadow: none; } .fl-prompt .prompt-ta { min-height: 300px; } .fl-prompt .added-pre { max-height: 320px; } @media (max-width: 1180px) { .fl-prompt .ai-grid { grid-template-columns: minmax(0, 1fr); } } /* ── THE PROCESS MAP (owner 2026-08-18, phase 2) ────────────────────────── A spine of steps on the left, the open step on the right. The spine is a fixed rail that never scrolls away — you always see where you are in the pipeline — and only the stage scrolls, because a diagram plus a prompt editor is taller than any window. */ .rules-card.process-card { max-width: 1660px; width: 96vw; } .pr-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; align-items: stretch; max-height: calc(90vh - 62px); } .pr-spine { border-right: 1px solid #eef1f6; padding: 12px 12px 16px; overflow-y: auto; background: #fbfcfe; } .pr-stage { padding: 14px 18px 20px; overflow-y: auto; } .pr-step { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 9px 11px 10px 34px; position: relative; cursor: pointer; font-family: inherit; } .pr-step:hover { background: #f1f5fb; } .pr-step.on { background: #fff; border-color: #cddcf5; box-shadow: 0 1px 3px rgba(37,99,235,.10); } .pr-n { position: absolute; left: 9px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #e6ecf7; color: #4a5568; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .pr-step.on .pr-n { background: #2563eb; color: #fff; } .pr-t { display: block; font-size: 13px; font-weight: 700; color: #1a1f2e; line-height: 1.3; } .pr-who { font-style: normal; font-size: 10.5px; font-weight: 700; color: #7b8794; text-transform: uppercase; letter-spacing: .4px; margin-left: 4px; } .pr-l { display: block; font-size: 11.5px; color: #5b6472; margin-top: 3px; line-height: 1.45; } .pr-c { display: block; font-size: 10.5px; color: #98a1b0; margin-top: 2px; } .pr-arrow { display: block; text-align: center; color: #c3cbd8; font-size: 12px; line-height: 10px; } /* the detail side */ .pr-panel { max-width: 780px; } .pr-p-h { font-size: 15px; font-weight: 700; color: #1a1f2e; margin-bottom: 8px; } .pr-p-b { font-size: 13px; color: #4a5568; line-height: 1.65; } .pr-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* a flow body sitting in the stage brings its own padding already */ .pr-stage .fl-body { display: block; } @media (max-width: 1100px) { .pr-wrap { grid-template-columns: 1fr; } .pr-spine { border-right: 0; border-bottom: 1px solid #eef1f6; max-height: 240px; } } .pr-stage-h { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; color: #1a1f2e; padding: 0 0 12px; } .pr-stage-h .pr-n { position: static; width: 20px; height: 20px; line-height: 20px; font-size: 11.5px; } .pr-stage-c { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 500; color: #98a1b0; } /* ═══ THE TWO VERDICT COLUMNS, AND THE PROMPT'S OWN PICTURES ═════════════ Owner 2026-09-03. Nothing here re-declares table geometry, header colour, cell alignment or block spacing — the shell owns all of that (RULEBOOK "THE DEFAULT IS CODE, NOT MEMORY"). These rules only style controls that did not exist on the page before. */ /* The dropdown fills its column and no more. `width:100%` + border-box is what keeps a native