:root{ --ink:#212423; --ink-2:#33403a; --panel:#fcf8f3; --line:#e7dcc4; --paper:#ffffff; --muted:#6c7169; --soft:#a2a294; --accent:#1f6f4f; --accent-soft:#e4f0ea; --accent-line:#a8d3c1; --brand:#004226; --brand-2:#00603a; /* Item 213 - the parts band and the strip under it, both read straight off Andy's design rather than guessed at: #29825a and #e3dbc7. The active part is cut out of the band in the strip's own colour, so the two read as one surface. */ --brand-3:#29825a; --strip:#e3dbc7; --ok:#2f6b4f; --ok-soft:#e6f0ea; --warn:#9a5b00; --warn-soft:#f8ecd6; --stop:#b50000; --stop-soft:#f7dede; /* Item 237 - one colour for every count-on-a-thing badge, so the one on your initials and the one on a tool in the menu are the same thing said twice rather than two different alarms. Andy: *"they should be the same. Maybe the orange is best so not so drastic looking"*. */ --badge:#c0452f; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box} body{margin:0;font-family:var(--sans);color:var(--ink);background:#efe9da;font-size:14px;line-height:1.5} header.top{background:linear-gradient(105deg,var(--brand),var(--brand-2) 72%,#006b3c);color:#f4f1ea;padding:15px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} /* The green bar stays at the top as the page scrolls, as it does on the Import Builder (Andy, 11 September), so the menu, Help, what is running and the account menu are always in reach. Not on phones or short windows, where the bar wraps to several lines and would take a quarter of the screen. --hdr-h is the bar's height (set by MOTION_JS), for anything else that sticks, and for jumps to a #link. */ @media (min-width:760px) and (min-height:560px){ /* Item 233. The local-copy bar stays put too, above the header. It used to scroll away, which was a deliberate choice and a wrong one: Andy, looking at a scrolled local page, *"the orange bar goes off the screen - which again could lead to confusion"*. A warning you can scroll past is a warning that is absent exactly when somebody is deep in a screen and has forgotten which copy they are on. --copy-h is its height (MOTION_JS), 0px on the live copy, which has no bar - so every sum below is unchanged there. */ .copybar{position:sticky;top:0;z-index:46} header.top{position:sticky;top:var(--copy-h,0px);z-index:45; box-shadow:0 2px 12px rgba(0,32,18,.16)} /* Item 213 - the parts band sticks under the header, so the way between the parts is always in reach. --chrome-h is both bars together, which is what anything sticking below them has to clear. */ /* --hdr-h already counts the copy bar above it, so this is the header's bottom edge, not the header's own height. */ .partsbar{position:sticky;top:var(--hdr-h,0px);z-index:44} html{scroll-padding-top:calc(var(--chrome-h,var(--hdr-h,0px)) + 12px)} .stick-below{top:calc(var(--chrome-h,var(--hdr-h,0px)) + 14px) !important} /* Column headings stay under the green bar as the table scrolls past. Only where the table fits the window: a table wide enough to scroll sideways sits in a scrolling box of its own, and nothing inside one of those can stick to the window. MOTION_JS adds .fits when it fits. */ .table-wrap.fits{overflow:visible} .table-wrap.fits thead{position:sticky; top:var(--chrome-h,var(--hdr-h,0px));z-index:3} .table-wrap.fits thead th{box-shadow:inset 0 -1px 0 var(--line),0 1px 0 var(--line)} } /* Item 213 - an icon-only link in the green header, beside the page's name. Light enough to read on the dark green (Andy: *"needs to be light to be easier to see"*), and given room on its left so it does not touch the badge it sits next to. */ header.top .hdricon{display:inline-flex;align-items:center; color:rgba(244,241,234,.92);margin-left:12px;vertical-align:middle; padding:2px} header.top .hdricon:hover{color:#fff} header.top .logo{display:flex;align-items:center;color:#fff} header.top .logo svg{height:25px;width:auto;display:block} header.top .divider{width:1px;height:26px;background:rgba(255,255,255,.22)} header.top .titles{display:flex;flex-direction:column;gap:2px} header.top h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em} /* Which tool this page belongs to, before the page's own name. */ header.top h1 .crumb{color:#bcd7c9;font-weight:500} header.top h1 .crumb::after{content:' / ';color:rgba(255,255,255,.45)} header.top .sub{font-family:var(--mono);font-size:10.5px;color:#a9c6b8;letter-spacing:.05em;text-transform:uppercase} header.top .spacer{flex:1} header.top .ver{font-family:var(--mono);font-size:11px;font-weight:400;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:1px 8px;border-radius:20px;letter-spacing:.04em;vertical-align:middle;margin-left:8px} /* Item 233 - on a copy that is not the live one, the version roundel wears the bar's colour. A second signal, in the header, which sticks whatever else scrolls and survives any later change to the bar. Andy asked for one or the other; both is cheap and they fail differently. */ body.notlive header.top .ver{background:#c0452f;border-color:#e08a78;color:#fff} header.top .helpbtn{font-family:var(--mono);font-size:11px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:4px 12px;border-radius:20px;letter-spacing:.03em;cursor:pointer} header.top .helpbtn:hover{background:rgba(255,255,255,.28)} .peekimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:11px;max-height:40vh;overflow:auto} .peekimgs figure{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fafbfa} .peekimgs img{display:block;width:100%;height:96px;object-fit:contain;background:#fff} .peekimgs figcaption{font-size:9.5px;color:var(--muted);padding:4px 5px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .peekimgs figure.dead{border-color:#d9534f} .peekimgs figure.dead img{display:none} .peekimgs figure.dead figcaption{color:#d9534f} .peekimgs figure.dead::before{content:'image did not load';display:block;height:96px;line-height:96px;text-align:center;font-size:10px;color:#d9534f} .peekbox{border:1px solid var(--line);border-radius:8px;overflow:hidden} .peekbox.second{margin-top:12px} .peekhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 11px;background:var(--wash,#f6f7f5);border-bottom:1px solid var(--line);font-size:12px} .peektext{padding:11px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:34vh;overflow:auto} .peek{background:none;border:1px solid var(--line);border-radius:5px;color:var(--muted);padding:2px 5px;cursor:pointer;vertical-align:middle;line-height:1;margin-left:2px} .peek:hover{border-color:var(--accent);color:var(--accent)} .peek:disabled{opacity:.35;cursor:default} a.tag, a.tag:visited{color:var(--accent);text-decoration:underline;text-underline-offset:2px} a.tag:hover{color:var(--accent-dark,var(--accent));} /* Zero-JS image comparison overlay: a plain #anchor + :target, same trick used nowhere else in this app yet but no different in kind from the
toggles already relied on elsewhere - the browser does the showing/hiding, not a script. */ .imgcompare{display:none;position:fixed;inset:0;z-index:80} .imgcompare:target{display:block} .imgcompare-bg{position:absolute;inset:0;background:rgba(20,26,22,.7)} .imgcompare-panel{position:relative;max-width:1200px;width:92vw;margin:4vh auto;background:#fff;border-radius:12px;padding:28px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;box-shadow:0 10px 40px rgba(0,0,0,.25)} .imgcompare-col{flex:1;min-width:280px;max-width:540px;text-align:center} .imgcompare-col img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff} .imgcompare-col .tag{margin-bottom:8px;display:inline-block} .imgcompare-close{position:absolute;top:10px;right:14px;font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;padding:4px 9px;border:1px solid var(--line);border-radius:20px;background:#fff} .imgcompare-close:hover{border-color:var(--accent);color:var(--accent)} .peek:disabled:hover{border-color:var(--line);color:var(--muted)} /* inside a field label: no border or padding, so the label keeps its normal height and every dropdown in the row still lines up. The label is uppercase, so the icon is sized to the capitals and lifted 1px to sit on their optical centre rather than the centre of the whole line box, which includes descender space the capitals never use. */ label.fld .peek{border:none;padding:0;margin:0 0 0 6px;height:12px;display:inline-flex;align-items:center;transform:translateY(-1px)} label.fld .peek svg{display:block;width:12px;height:12px} label.fld{display:flex;align-items:center;min-height:14px} .mergecols{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:5px} .mrow{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:2px 0;cursor:pointer} .mrow input{margin:0} .guide h4{margin:0 0 6px;font-size:13.5px;color:var(--ink)} .guide p{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-2)} .guide ul{margin:0 0 8px;padding-left:18px;font-size:12.5px;line-height:1.6;color:var(--ink-2)} .guide li{margin:0 0 4px} .guide details summary{color:var(--accent);font-weight:600} .guide .intro{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 14px} .wrap{max-width:1180px;margin:0 auto;padding:22px} /* stepper */ .steps{display:flex;gap:0;margin:0 0 20px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)} .steps .st{flex:1;padding:11px 14px;font-size:12px;font-family:var(--mono);letter-spacing:.03em;color:var(--soft);border-right:1px solid var(--line);display:flex;align-items:center;gap:9px} .steps .st:last-child{border-right:0} .steps .st .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--soft)} .steps .st.active{color:var(--ink);background:var(--accent-soft)} .steps .st.active .n{background:var(--accent);color:#fff;border-color:var(--accent)} .steps .st.done{color:var(--ink)} .steps .st.done .n{background:var(--ok);color:#fff;border-color:var(--ok)} .card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px;margin-bottom:18px} .card h2{margin:0 0 4px;font-size:15px} .card .lead{color:var(--muted);margin:0 0 18px;font-size:13px} /* dropzone */ .drop{border:1.5px dashed var(--accent-line);border-radius:8px;background:var(--accent-soft);padding:40px;text-align:center;cursor:pointer;transition:.15s} .drop:hover{background:#dcebe3} .drop strong{display:block;font-size:15px;margin-bottom:5px} .drop span{color:var(--muted);font-size:12.5px} .drop.busy{opacity:.6;pointer-events:none} button,a.ghost{font-family:var(--sans);font-size:13px;border-radius:6px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:9px 16px;cursor:pointer;font-weight:500;text-decoration:none;display:inline-block} button:hover{background:var(--ink-2)} button.ghost,a.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)} button.ghost:hover,a.ghost:hover{background:var(--accent-soft);border-color:var(--accent-line)} /* item 49: a.ghost is a real link, not a button - the global a:visited/a:hover rules below (element+pseudo-class, same specificity as a.ghost's own element+class selector) would win any tie by sitting later in this file - the exact trap items 13/33 hit on .badge/.amznbadge. A class-only override (no "a") outranks both regardless of source order. */ .ghost:visited{color:var(--ink)} .ghost:hover{text-decoration:none} button.accent{background:var(--accent);border-color:var(--accent)} button.accent:hover{filter:brightness(1.06)} button:disabled{opacity:.4;cursor:not-allowed} button.sm,a.sm{padding:7px 12px;font-size:12px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .right{margin-left:auto} label.fld{display:block;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 5px} select,input[type=text],input[type=number],input:not([type]){font-family:var(--sans);font-size:13px;padding:8px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;width:100%} select:focus,input:focus{outline:2px solid var(--accent-line);outline-offset:-1px} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .fieldset{border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px} .fieldset.spaced{margin-top:26px} .fexplain{color:var(--muted);font-size:12.5px;line-height:1.55;margin:0 0 12px} .fieldset > .ftitle{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin:0 0 13px;font-weight:600} table{border-collapse:collapse;width:100%;font-size:12.5px} th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600} thead th{background:var(--panel)} tbody td{background:var(--paper)} td.mono,.mono{font-family:var(--mono);font-size:12px} .pill{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:20px;letter-spacing:.03em} .pill.opt{background:var(--accent-soft);color:var(--accent)} .pill.app{background:var(--panel);color:var(--muted);border:1px solid var(--line)} .pill.skip{background:#eee;color:var(--soft);text-decoration:line-through} .pill.role{background:#eef0d8;color:#5c6027} .preview{overflow:auto;border:1px solid var(--line);border-radius:6px;max-height:240px} .preview th.fromsec{color:var(--accent)} .preview .secdot{font-size:9px;border:1px solid var(--accent);border-radius:8px;padding:0 4px;margin-left:3px;vertical-align:middle;font-weight:400} .preview table{font-size:11.5px} .preview td{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis} table.outtbl th{position:sticky;top:0;background:var(--brand);color:#f4f1ea;z-index:2;white-space:nowrap} table.outtbl td{max-width:220px} table.outtbl td.empty{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f3f3f3 4px,#f3f3f3 8px)} .bucketbar{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden} .bucketbar button{border:0;border-radius:0;background:#fff;color:var(--muted);padding:4px 10px;font-size:11.5px;font-family:var(--mono)} .bucketbar button.on.opt{background:var(--accent);color:#fff} .bucketbar button.on.app{background:var(--ink);color:#fff} .bucketbar button.on.bullet{background:#3a6b53;color:#fff} .bucketbar button.on.skip{background:#777;color:#fff} .bucketbar button+button{border-left:1px solid var(--line)} .note{font-size:12px;padding:11px 13px;border-radius:6px;margin:0 0 14px} .note.info{background:#e9f1ec;color:#236b4d} .note.warn{background:var(--warn-soft);color:var(--warn)} .note.ok{background:var(--ok-soft);color:var(--ok)} .stat{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 18px} .statrow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .statrow .stat{margin:0} /* Every figure is the same box whether or not it is a link, so the labels line up (Andy, 13 September), and a long label wraps to a second line rather than stretching the row. */ .stat{align-items:flex-start} .stat .s{min-width:96px;max-width:136px;box-sizing:border-box;padding:4px 8px; border:1px solid transparent;border-radius:10px;margin:0 -8px} .stat .s .k{white-space:normal} a.s.go{display:block;color:inherit;text-decoration:none} a.s.go:hover{background:var(--accent-soft);border-color:var(--accent-line);text-decoration:none} a.s.go:hover .v,a.s.go:hover .k{color:var(--accent)} a.s.go.on{background:var(--accent-soft);border-color:var(--accent-line)} a.s.go.on .v,a.s.go.on .k{color:var(--accent)} .stat .s .v{font-size:26px;font-weight:600;font-family:var(--mono)} .stat .s .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono)} .stat .s .k{line-height:1.45} /* Item 232 - the second line under a figure's label: how much of the job is NOT done. Smaller and quieter than the label, because it qualifies the number rather than naming it, and on its own line so the eye reads "checked" first and the caveat second. */ .stat .s .k .substat{display:block;text-transform:none;letter-spacing:0; font-size:10.5px;opacity:.8;margin-top:1px} .flagrow{border-left:3px solid var(--warn);padding:8px 12px;background:var(--warn-soft);border-radius:0 6px 6px 0;margin-bottom:7px;font-size:12.5px} .flagrow.stop{border-color:var(--stop);background:var(--stop-soft)} .fdetail{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(0,0,0,.12);font-size:11.5px;line-height:1.55} .fdetail .mono{font-size:11px} .hidden{display:none} .muted{color:var(--muted)} .tag{font-family:var(--mono);font-size:11px;color:var(--muted)} code.k{font-family:var(--mono);background:var(--panel);border:1px solid var(--line);padding:1px 5px;border-radius:4px;font-size:11.5px} .scrollx{overflow-x:auto} .dvals{display:flex;gap:5px;flex-wrap:wrap;align-items:center;max-width:340px} .dval{font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--line);padding:1px 6px;border-radius:4px;color:var(--ink)} .dcount{font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:20px;white-space:nowrap} .dcount.one{color:var(--soft);background:#eee} .rowbadge{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:20px;margin-left:8px;vertical-align:middle} /* Item 29: icon-only Amazon-link badge, replacing a text "Amazon" pill that was costing real width on the sellers list. A plain arrow on a neutral orange tint - not Amazon's own logo shape or exact brand orange, same reasoning as item 12's favicon decision. Item 33: switched from a circle/tinted-background+dark-text combo to a solid orange rounded square with a white arrow - Andy reported the icon looking like different colours across rows, root-caused to the browser's own a:visited style (0,1,1 specificity) beating the plain .amznbadge class rule (0,1,0), the exact same trap item 13's .badge:visited note describes - a clicked/visited badge showed the browser default visited colour bleeding through instead of the intended tint. Explicit :visited/:hover overrides below close that gap for good, on top of the new solid-orange design Andy asked for. */ .amznbadge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#e2861f;color:#fff;font-size:12px;margin-left:6px;vertical-align:middle;text-decoration:none} /* Item 71: the same badge, but wide enough to hold a label. Only the fixed square is relaxed - the orange, the radius, the flex centring and the text-decoration/:visited/:hover guards above are all inherited, so the labelled and icon-only forms cannot drift apart. Used on the seller page header, the one place with room for it: the sellers list is icon-only by choice (what item 29 traded a text pill away for), and the 420px Settings card wraps the second link onto its own line. */ .amznbadge.wide{width:auto;padding:0 9px;gap:5px;font-size:11px; font-family:var(--mono);letter-spacing:.02em} .amznbadge:visited,.amznbadge:hover,.amznbadge:active{color:#fff} table a.amznbadge{text-decoration:none} /* Item 29: numeric sellers-list cells often pair a count with a small parenthetical share ("40 (80%)") - the space between them is a natural wrap point once the column gets squeezed, so pin these to one line and let .table-wrap's existing horizontal scroll take over instead of an ugly mid-cell break. Headers are unaffected (th.num is not included), so a narrow=True sort_link() header can still wrap. */ td.num{white-space:nowrap} .filebar{font-family:var(--mono);font-size:12px;color:var(--muted);margin:2px 0 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .filebar .fname{color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:2px 9px;border-radius:5px} .filebar .prof{color:var(--accent)} /* Catalogue cleanup: one row per duplicate group. A card each was unreadable at 1,555 groups, so the row carries the decision and the evidence sits behind a toggle. */ .pickcat .pickrow{display:flex;align-items:center;gap:8px; margin-top:4px;flex-wrap:wrap} .pickcat .pickname{color:var(--ink);font-size:12.5px} .pickcat{margin:6px 0;padding:8px 11px;border:1px solid var(--warn); border-radius:6px;background:var(--panel);font-size:12.5px} .pickcat .row{flex-wrap:wrap;gap:4px 0;align-items:center} /* Only what is new here: the layout, the search box and the select all come from .filterbar, which is what every other search on the site uses. */ .pickbar{margin:12px 0 0} /* Item 197 - the run history's kind picker. Twenty kinds is a list, not a row of tabs. */ .pickbar .runpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* width:auto beats the global `select{width:100%}` on line 212, which otherwise stretches the picker across the whole page. */ .pickbar .runpick select{padding:8px 12px;border-radius:999px; border:1px solid var(--line);background:#fff;font-size:13px; font-family:var(--sans);width:auto;flex:0 1 auto;max-width:100%} .pickbar .brandpick{display:flex;align-items:center;gap:8px; flex-wrap:nowrap} /* Three classes deep on purpose: .filterbar input[type=search] sets width:100%, and a bare .brandfilter rule loses to it and stretches the box across the bar. */ .pickbar .brandpick .brandfilter{width:150px;flex:0 0 150px; padding:9px 14px;border-radius:999px;border:1px solid var(--line); background:#fff;font-size:13px;font-family:var(--sans); -webkit-appearance:none} .pickbar .brandpick .brandfilter:focus{outline:2px solid var(--accent-line); outline-offset:-1px;border-color:var(--accent-line)} .pickbar .brandpick select{flex:0 1 300px;max-width:300px} /* The product search should not eat the whole bar either. Both classes on the same element, to beat .filterbar .searchwrap's flex:1 1 280px, which otherwise wins on source order. */ .pickbar.filterbar .searchwrap{flex:0 1 330px;min-width:220px} .pickbar .brandcount{font-size:11.5px;white-space:nowrap} .pickbar .pickhint{flex:1 1 100%;font-size:11.5px;color:var(--muted)} .exportbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:12px 0 4px;padding:9px 13px;border:1px solid var(--accent); border-radius:6px;background:var(--panel);font-size:12.5px} .exportbar b{color:var(--accent)} .exportbar .right{margin-left:auto} .filebar .right{margin-left:auto} .filebar form.right{margin-left:auto;margin-right:14px} .bulkbar{margin:10px 0;align-items:center;gap:8px} .bulkbar .ticked{display:flex;align-items:center;gap:8px} .bulkbar .tickall{display:inline-flex;align-items:center;gap:5px; font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer} .bulkhelp{font-size:12px;line-height:1.55;margin:-2px 0 12px;width:100%} .filterchip{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; margin:12px 0 0;padding:8px 12px;border:1px solid var(--warn); border-radius:6px;background:var(--panel);font-size:12.5px} .filterchip .what{font-weight:600;color:var(--ink)} .filterchip .why{color:var(--muted);font-size:12px;flex:1 1 240px} .filterchip .clear{font-weight:600;white-space:nowrap} .cleanrow{border:1px solid var(--line);border-radius:8px;padding:9px 12px; margin:0 0 7px;background:#fff} .cleanrow .cleanhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cleanrow .cname{font-weight:600;font-size:13.5px;color:var(--ink)} .cleanrow .cleanact{font-size:12.5px;color:var(--ink);margin:4px 0 5px} .cleanrow input.pick{margin:0 2px 0 0} /* A warning pill. NOT .pill.skip, which carries text-decoration: line-through - item 68's trap, where a struck-through label read as "cancelled" rather than "look at this". */ .pill.risk{background:var(--warn-soft,#fbeedd);color:var(--warn,#9a5b00); border:1px solid var(--warn,#9a5b00)} .cleanrow details{margin-top:2px} .cleanrow > details.mini > summary{position:absolute;top:8px;right:12px; margin:0} .cleanrow .cleanact{padding-right:70px;margin:2px 0 0} .groupstats{margin-top:14px;padding:10px 13px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:12.5px;font-family:var(--mono);color:var(--ink);display:flex;gap:18px;flex-wrap:wrap} .groupstats b{color:var(--accent);font-weight:600} .flagrow a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .flagrow a:hover{color:var(--brand)} .ghost.mini{padding:4px 11px;font-size:12px;white-space:nowrap} .descpane{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;line-height:1.55;white-space:pre-wrap;background:#fff} .descpane .ins{background:#d6efdc} .descpane .del{background:#f7dada;text-decoration:line-through} .descedit{width:100%;min-height:120px;max-height:220px;overflow:auto;font-size:12.5px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;line-height:1.55;white-space:pre-wrap} .descedit .vary{background:#fff2c2;border-radius:3px} .flagrow .warn{color:var(--warn);font-size:11.5px} .imgblock{border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 14px;background:var(--panel)} .secttl{font-weight:600;font-size:15.5px;color:var(--ink);margin:18px 0 8px} .rsec{border:1px solid var(--line);border-radius:10px;margin:0 0 14px;background:var(--panel);overflow:hidden} .rsec-head{display:flex;align-items:center;gap:9px;padding:13px 15px;cursor:pointer;user-select:none} .rsec-head .chev{color:var(--soft);font-size:12px;transition:transform .15s;width:10px;display:inline-block} .rsec.collapsed .chev{transform:rotate(-90deg)} .rsec.collapsed .rsec-body{display:none} .rsec-title{font-weight:600;font-size:15.5px;color:var(--ink)} .rsec-count{color:var(--soft);font-size:12.5px} .rsec-actions{margin-left:auto;display:flex;gap:6px} .rsec-body{padding:0 15px 15px} footer a{color:var(--accent);text-decoration:none} footer a:hover{text-decoration:underline} .cl-entry{padding:11px 0;border-bottom:1px solid var(--line)} .cl-entry:last-child{border-bottom:none} .cl-ver{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);display:inline-block;margin-bottom:3px} .cl-ver.current{background:var(--accent);color:#fff;padding:1px 7px;border-radius:20px} .cl-entry p{margin:2px 0 0;font-size:13px;color:var(--ink);line-height:1.5} .cl-list{margin:6px 0 0;padding-left:20px} .cl-list li{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink)} .cl-list li:last-child{margin-bottom:0} .cl-list li b{display:block;color:var(--ink);margin-bottom:1px} .cl-list li span{color:var(--ink-2)} .cl-list li::marker{color:var(--muted);font-family:var(--mono);font-size:11px} .modal-overlay{position:fixed;inset:0;background:rgba(0,32,18,.42);display:none;align-items:center;justify-content:center;z-index:50;padding:20px} .modal-overlay.show{display:flex} .modal{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,32,18,.25);max-width:440px;width:100%;padding:26px 26px 22px} .modal h3{margin:0 0 8px;font-size:17px;color:var(--ink)} .modal p{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.55} .modal-actions{display:flex;flex-direction:column;gap:9px} .modal-actions button{width:100%} .modal-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--soft);cursor:pointer;padding:2px 6px;border-radius:6px} .modal-x:hover{color:var(--ink);background:var(--panel)} .groupstats .warn{color:var(--warn)} details{border:1px solid var(--line);border-radius:6px;padding:0 12px;margin-bottom:10px} details summary{cursor:pointer;padding:10px 0;font-size:12.5px;font-weight:500} footer{color:var(--soft);font-size:11px;text-align:center;padding:18px} footer .build{margin-top:6px;font-family:var(--mono);font-size:10px;opacity:.8} /* Item 295. A confirming action beside a way out, wherever it appears: the confirm pop-up, the report pop-up, the edit page, the four cleanup confirmations and the Import Builder's own confirm. Andy, with a screenshot of a Mac dialog: *"On my Mac save is always on the right ... I think we should stick to this format"*. One rule rather than the five it replaces, because a value repeated in five places drifts, which is how the Toolbox came to do it three ways at once. The way out goes first in the markup and so appears on the left; the thing that acts is last, at the right, where the eye finishes. It wraps rather than reversing on a narrow screen: putting the primary back on top there would mean the tab order and the drawn order disagreeing, which is worse than a second line. It is a modifier, not a replacement: `.modal-actions` keeps its stacked full-width shape for the dialogs that offer two real alternatives rather than an action and a way out (the Import Builder's "check images first?" and its profile save), where two even columns would squeeze labels that are whole sentences. **The Import Builder's frame cannot read this file**, so `import_builder/toolbox.css` carries a second copy and `test_actions295.py` holds the two together. BASE_CSS's `.modal-actions button{width:100%}` is a class AND an element, so `.actionrow > *` loses to it on specificity and every button wraps onto a line of its own - which draws exactly like the column it was meant to replace. Naming the elements matches that specificity, and APP_CSS being emitted later settles the tie. */ .actionrow{display:flex;flex-direction:row;justify-content:flex-end; align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px; padding-top:16px;border-top:1px solid var(--line)} .actionrow > button,.actionrow > a,.actionrow > label{width:auto;flex:none} /* Item 150 - a bigger tick with a big hit area. The label is the whole left strip of the row, full height, so a click anywhere down the left edge ticks rather than folding the row open. The first attempt used negative margins and covered only the title line (36px of a 59px row), which left the second line's edge as a miss. A ticked row is outlined, so a miss is visible before approving rather than after. */ .cleanrow .pickhit{position:absolute;left:0;top:0;bottom:0;width:38px; display:flex;justify-content:center;align-items:center; cursor:pointer;border-radius:8px 0 0 8px} /* Centred while collapsed (Andy: it sat too near the top). Once Why is open the row grows, so the box goes back to where it sat when collapsed rather than floating halfway down the evidence. 20px is (59 - 18) / 2, the collapsed height of a one-line title. */ .cleanrow:has(> details.mini[open]) .pickhit{align-items:flex-start; padding-top:20px} .cleanrow.tickable{padding-left:44px} .cleanrow .pickhit:hover{background:var(--accent-soft)} .cleanrow .pickhit input.pick{width:18px;height:18px;margin:0; cursor:pointer;accent-color:var(--accent)} .cleanrow:has(input.pick:checked){border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)} /* Item 213 - the parts of a seller, as a band of the chrome rather than furniture on the page (Andy's design, 14 September). Item 212 put these on the page as pills, above the cleanup switcher's big boxed tabs - two navigations of the same kind at different sizes, and the bigger one moved you the shorter distance. In the chrome they are a different surface instead of a louder version of the same one, so nothing below them has to compete. The active part is cut out of the band in the page's own colour and joins the content under it, which is the whole trick: it says "this band and that page are one thing" without a word. */ /* Item 290 (report #39). Every part is the same tab shape: clear of the top of the band by 4px, rounded at the top corners, with a little air at each side. Only the colour tells them apart, so a hover draws the tab the active part draws rather than a full-height block, and no two of them ever touch. Andy: *"when you hover over a none active tab it should look like a tab not full height"*, and *"add a slight margin to the side of tabs so they never hit each other or the borders"*. The dividing lines went with it. They were the only thing separating one part from the next, and a line touching a rounded tab is exactly what the second of those asks is about; the space does the separating now. */ .partsbar{background:var(--brand-3);display:flex;align-items:stretch; gap:6px;padding:0 26px;flex-wrap:wrap} /* Item 309 (Andy): *"make the lighter tab colour that occurs on hover show before you hover so you can see the tab shapes before going over them. Then on hover make them even lighter"*. Item 290 gave every part the same tab SHAPE, but an inactive one was the band's own colour until you found it with the cursor, so the shapes were invisible at rest and the band read as one bar with a cream tab stuck on it. Now the shape is always drawn and hovering lightens it further, so the tabs read as tabs and the hover still answers. */ .partsbar .part{display:flex;flex-direction:column;gap:2px;justify-content:center; padding:9px 18px 10px;color:rgba(244,241,234,.86);text-decoration:none; font-size:13.5px;font-weight:600;line-height:1.25; margin-top:4px;border-radius:6px 6px 0 0; background:rgba(255,255,255,.08)} .partsbar .part:hover{background:rgba(255,255,255,.18);color:#fff} .partsbar .part .ps{font-size:11.5px;font-weight:400; color:rgba(244,241,234,.72);text-transform:none} /* The strip's colour exactly, no line of its own along the bottom: the tab and the strip under it have to read as one shape, and a border or a shadow across the band is the seam that gives it away. */ .partsbar .part.on{background:var(--strip);color:var(--ink)} .partsbar .part.on:hover{background:var(--strip);color:var(--ink)} /* The strip itself: full width, the seller's own line inside it, lined up with the page column below. */ .sellerstrip{background:var(--strip)} /* One height for every part's strip (item 290). Andy, answering the report's own question about what the Settings bar should carry: *"also make sure the height of this bar stays the same across all tabs"*. It did not: 38px of chips on the Price Checker, 42 once a badge was beside them, 49 on Catalogue cleanup, where the strip holds buttons. The band is chrome, and chrome that changes height as you move between parts makes the page jump under the cursor. 49px is the tallest thing that legitimately goes in it, a row of buttons, so that is the height. */ .sellerstrip .stripin{max-width:1600px;margin:0 auto;padding:9px 22px; display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:49px} .sellerstrip .filebar{margin:0} .partsbar .part.on .ps{color:var(--muted)} /* Not a part: the way out, and the seller's runs. Pushed to the right, and never styled as a tab - they do not join the page below. */ .partsbar .partaway{margin-left:auto;display:flex;align-items:center;gap:16px; padding:0 2px 0 18px} .partsbar .partaway a{color:rgba(244,241,234,.88);text-decoration:none; font-size:12.5px;white-space:nowrap} .partsbar .partaway a:hover{color:#fff;text-decoration:underline} @media (max-width:760px){ .partsbar{padding:0 12px} .partsbar .part{padding:8px 12px} .partsbar .partaway{margin-left:0;padding:8px 12px} } /* Items 155-157 - the Catalogue cleanup screen switcher. */ .screens{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px} .screens a{flex:1 1 200px;display:flex;justify-content:space-between; align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line); border-radius:8px;background:#fff;color:var(--ink);text-decoration:none; font-weight:600;font-size:14px} .screens a:hover{border-color:var(--accent-line);background:var(--accent-soft)} .screens a.on{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)} .screens .n{font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap} .screens .n.work{color:var(--warn,#9a5b00)} .screens .n.ok{color:var(--accent)} table.offlist td{vertical-align:middle} table.offlist td:first-child,table.offlist td:last-child{white-space:nowrap} /* Item 147 - "Compare all 3 in the portal" on each cleanup row. */ .cleanrow .portalcmp{margin-left:10px;font-size:12px;white-space:nowrap; color:var(--accent);text-decoration:underline;text-underline-offset:2px} .cleanrow .portalcmp:hover{color:var(--brand)} /* Item 150, follow-up. The Compare link and the Ad ID links inside Why sit on a row that folds when you miss them. A few pixels of padding widens the target, and the matching negative margin gives it back, so nothing on the line moves. Kept small on purpose: the Ad lines are close together, and a bigger box would overlap its neighbours. */ .cleanrow .cleanact a, .cleanrow details.mini a{display:inline-block; padding:3px 5px;margin:-3px -5px} .cleanrow .cleanact a.portalcmp{margin-left:5px} /* Item 144 - the "Updated ..." line under each sellers-list button. */ .stamped{display:flex;flex-direction:column;align-items:center;gap:3px} .stamped .stamp{font-size:11.5px;line-height:1.2;white-space:nowrap} /* Item 65. BASE_CSS caps the page column at 1180px - inherited from the Import Builder theme this file's base is extracted from, never a decision made for this app, and never revisited until Andy asked why a wide monitor was not being used. Measured before changing it (Playwright at 2560px, real-length seller names and product titles): at 1180px the sellers list table renders 1136px wide, so nothing was being cut off - content was being *truncated early* by .sellerlink and td.notes below, both of which cap independently of the page width. Raising this alone would only have widened the padding, which is why all three move together. 1600px rather than no cap at all: at full stretch on a 2560px monitor a card's intro paragraph runs as one ~2,500px line, and the sellers list's numbers sit far enough from the seller names to make scanning a single row harder. 1600 fits a 40-character seller name whole and a full product title plus its note on one line, which was the whole ask. Nothing changes below 1600px. Andy chose this from side-by-side screenshots of all three options. Overrides BASE_CSS by sitting later in the file at equal specificity - do not hand-edit the BASE_CSS rule itself, extract_theme.py will silently put it back. */ .wrap { max-width: 1600px; } /* A small (i) button that pops the shared info modal (see INFO_MODAL_HTML above) - sized to sit inline right after a label.fld's uppercase text without dominating it, not to match that text's own scale. */ .infoicon{display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;border-radius:50%;border:1px solid var(--line); background:var(--panel);color:var(--muted);font:italic 600 10px Georgia,serif; line-height:1;cursor:pointer;padding:0;margin-left:5px;vertical-align:middle} .infoicon:hover{color:var(--ink);border-color:var(--soft);background:var(--paper)} /* The base
border/padding box (see BASE_CSS) suits a standalone section - "Choose from N variants", the technical log - but reads as a button when it wraps one small toggle sitting inline inside a table cell, like the Linked tab's per-row "Details". This strips the box back to plain text for just that case, leaving every other
alone. */ details.mini { border: none; padding: 0; margin-bottom: 0; display: inline-block; } /* The app's identity (logo, name, version) used to be folded into whatever title a page passed in, which put a version badge next to a seller's own name on the seller detail page. Now it is its own fixed block stacked under the logo, left of the page's own heading - see page() in this file. */ header.top .brand{display:flex;flex-direction:column;align-items:center;gap:4px} header.top .brand .appname{font-family:var(--mono);font-size:10.5px; color:#a9c6b8;letter-spacing:.05em;text-transform:uppercase; display:flex;align-items:center;justify-content:center} /* The Import Builder only ever styles links inside .flagrow and footer, so every other link fell back to browser purple. */ a { color: var(--accent, #1f6f4f); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--accent, #1f6f4f); } table a { text-decoration: underline; text-underline-offset: 2px; } /* .rowbadge (BASE_CSS) is a pill, not a plain link - the table-wide underline above would cut straight through it. Used for the sellers list's "Amazon" flag on rows with a confirmed seller ID. */ table a.rowbadge, table a.rowbadge:hover { text-decoration: none; } table a.badge, table a.badge:hover { text-decoration: none; } /* Site-wide nav in the header's top-right corner. One link today ("All sellers"), but a