/* SEARCH & RANK USES THIS TOO, and Overview must not notice. #tab-rank is a SIBLING of #tab-gbp, so none of the rules below reached it. Rather than renaming the scope -- which would drop every selector from (1,1,0) to (0,2,0) and let anything in between start winning on a live screen -- each #tab-gbp selector keeps its exact self and gains a `.gxui` twin. Overview's cascade is unchanged by construction, not by measurement. Both tab pages carry class="gxui" in app.html. */ /* THE MOCK'S PALETTE. These were Google's Material values and the mock is on a Tailwind-ish scale -- close enough to look almost right and different enough to look wrong beside it. Greys were the tell: #5f6368 against #6b7280, and a border of #e8eaed against #e5e7eb, across every card on the screen. Amber for warnings rather than orange, and a softer red. */ #tab-gbp, .gxui{ --gx-blue:#2563eb; --gx-blue-deep:#1d4ed8; --gx-blue-tint:#eff6ff; --gx-green:#16a34a; --gx-green-tint:#dcfce7; --gx-orange:#b45309; --gx-orange-tint:#fffbeb; --gx-red:#b91c1c; --gx-red-tint:#fef2f2; --gx-ink:#111827; --gx-ink2:#374151; --gx-muted:#6b7280; --gx-line:#e5e7eb; --gx-surface:#fff; --gx-surface-alt:#f9fafb; --gx-star:#f59e0b; --gx-yellow:#f59e0b; /* THE HEADER BAR'S TINT SAYS WHAT KIND OF SECTION IT IS. It was one cool grey, #f8fafc, on a #fff body -- a 7/255 step, which is a difference you can measure and cannot see. Seventeen sections wearing it read as one undifferentiated column, which is what the owner meant by "very plain". Four tints now, and each is a CLAIM about the section rather than decoration: (default) blue information -- where you stand, what the numbers say .s-do green work already done, or the one action the screen offers .s-warn amber something needs doing .s-quiet grey reference; no time dimension, nothing to act on `-line` is the head's bottom hairline, `-rail` the inset stripe down its left edge. Blue and green take their rail from --gx-blue/--gx-green, which already mean exactly this elsewhere on the screen. A BARE .gx-shead KEEPS THE OLD GREY. Manage builds four panels whose heads are not inside a .gx-section at all, and Photos ends with a loose "Smart Tips" head; none of those screens was mocked, so none of them moves. --gx-head is unchanged and still theirs. */ --gx-head:#f8fafc; --gx-head-info:#eff6ff; --gx-head-info-line:#dbeafe; --gx-head-warn:#fffbeb; --gx-head-warn-line:#fde68a; --gx-head-warn-rail:#d97706; --gx-head-do:#ecfdf5; --gx-head-do-line:#bbf7d0; --gx-head-quiet:#f5f7fa; --gx-head-quiet-line:#e4e8ee; --gx-head-quiet-rail:#cbd5e1; /* The card's own edge. --gx-line (#e5e7eb) is right for a hairline INSIDE a card and too faint to be its boundary -- with no shadow under it either, a section had nothing at all separating it from the page. */ --gx-line-card:#dfe3ea; } /* THE SECTION IS THE CARD, and its title sits in a bar INSIDE it. The title used to float above an unrelated bordered box, so the screen read as a list of headings with boxes under them rather than as a stack of titled cards -- which is the single biggest reason it did not look like the mock. All seventeen GBP sections share this shape (head, then content), so this lands uniformly. */ #tab-gbp .gx-section, .gxui .gx-section{ background:var(--gx-surface); border:1px solid var(--gx-line-card); border-radius:11px; overflow:hidden; margin-bottom:11px; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); } /* One action, one line: a label and the time, as the mock draws it. The hairline is the separator, so the last row does not need one. */ #tab-gbp .gx-row, .gxui .gx-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 13px; font-size:12.5px; border-bottom:1px solid #f1f3f6; } #tab-gbp .gx-row:last-child, .gxui .gx-row:last-child{ border-bottom:none; } #tab-gbp .gx-row b, .gxui .gx-row b{ font-weight:600; color:var(--gx-ink); min-width:0; } #tab-gbp .gx-row span, .gxui .gx-row span{ color:var(--gx-muted); white-space:nowrap; font-size:11.5px; } #tab-gbp .gx-row.empty, .gxui .gx-row.empty{ color:var(--gx-muted); display:block; } /* space-between is kept: several sections put an action button opposite the title. */ #tab-gbp .gx-shead, .gxui .gx-shead{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 13px; border-bottom:1px solid var(--gx-line); flex-wrap:wrap; background:var(--gx-head); } /* EVERY TINT IS A CHILD OF .gx-section, INCLUDING THE DEFAULT. That is the whole containment strategy: a head only takes a meaning when it heads a section, so the loose heads Manage and Photos build keep the grey above and this change cannot reach a screen that was never mocked. THE RAIL IS AN INSET SHADOW, NOT A border-left -- a border would move the title 3px right and re-wrap the head at narrow widths; the inset draws inside the box the head already occupies. It repeats the hue down the left edge so the tint still reads when only a few pixels of the bar are showing at the top of a scroll. */ #tab-gbp .gx-section > .gx-shead, .gxui .gx-section > .gx-shead{ background:var(--gx-head-info); border-bottom-color:var(--gx-head-info-line); box-shadow:inset 3px 0 0 var(--gx-blue); } #tab-gbp .gx-section.s-warn > .gx-shead, .gxui .gx-section.s-warn > .gx-shead{ background:var(--gx-head-warn); border-bottom-color:var(--gx-head-warn-line); box-shadow:inset 3px 0 0 var(--gx-head-warn-rail); } #tab-gbp .gx-section.s-do > .gx-shead, .gxui .gx-section.s-do > .gx-shead{ background:var(--gx-head-do); border-bottom-color:var(--gx-head-do-line); box-shadow:inset 3px 0 0 var(--gx-green); } #tab-gbp .gx-section.s-quiet > .gx-shead, .gxui .gx-section.s-quiet > .gx-shead{ background:var(--gx-head-quiet); border-bottom-color:var(--gx-head-quiet-line); box-shadow:inset 3px 0 0 var(--gx-head-quiet-rail); } #tab-gbp .gx-stitle, .gxui .gx-stitle{ font-size:13px; font-weight:800; color:var(--gx-ink); display:flex; align-items:center; gap:6px; } #tab-gbp .gx-ssub, .gxui .gx-ssub{ font-size:12.5px; color:var(--gx-muted); } #tab-gbp .gx-link, .gxui .gx-link{ font-size:12.5px; color:var(--gx-blue); font-weight:600; cursor:pointer; } #tab-gbp .gx-card, .gxui .gx-card{ background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:12px; box-shadow:0 1px 2px rgba(60,64,67,.10); } /* A card sitting directly in a section is that section's BODY -- the border, the radius and the shadow belong to the section now, or they draw twice. */ /* DESCENDANT, not child: the feed's wrapper sat one level deeper and a `>` missed it, which drew a box inside a box around the three rows. */ #tab-gbp .gx-section .gx-card, .gxui .gx-section .gx-card{ border:0; border-radius:0; box-shadow:none; } /* The trend is the one section body that is raw content rather than rows or a card, so it needs the inset the card used to give it. Named rather than matched by a :not() chain -- that guessed at every future child of a section. */ #tab-gbp .gx-section > #gbpTrend, .gxui .gx-section > #gbpTrend{ padding:11px 13px; } /* AI actions */ /* The Impact card's bar chart, legend and metric grids were removed with the chart itself: on a new listing every bar rendered at its 3px minimum, which is a chart drawn over no data. Three plain cells replaced them -- see .gx-parts below. */ /* THE HEADLINE IS ONE BASELINE ROW. Centred and stacked it took four lines to say one thing and pushed the numbers under it below the fold. */ #tab-gbp .gx-lead, .gxui .gx-lead{ display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; padding:12px 13px 10px; } #tab-gbp .gx-lead-n, .gxui .gx-lead-n{ font-size:31px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; } #tab-gbp .gx-lead-l, .gxui .gx-lead-l{ font-size:12px; font-weight:600; color:var(--gx-muted); } #tab-gbp .gx-lead-d, .gxui .gx-lead-d{ font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--gx-surface-alt); color:var(--gx-muted); white-space:nowrap; } #tab-gbp .gx-lead-d.up, .gxui .gx-lead-d.up{ color:#188038; background:#e6f4ea; } #tab-gbp .gx-lead-d.down, .gxui .gx-lead-d.down{ color:#c5221f; background:#fce8e6; } /* Three plain cells with a hairline between, in place of three bar charts that were drawn over no data on every new listing. The gap IS the divider. */ #tab-gbp .gx-parts, .gxui .gx-parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--gx-line); border-top:1px solid var(--gx-line); } #tab-gbp .gx-part, .gxui .gx-part{ background:var(--gx-surface); padding:9px 13px; } #tab-gbp .gx-part-k, .gxui .gx-part-k{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gx-muted); } #tab-gbp .gx-part-v, .gxui .gx-part-v{ font-size:16px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; } #tab-gbp .gx-part-d, .gxui .gx-part-d{ font-size:10.5px; font-weight:700; margin-top:1px; color:var(--gx-muted); } #tab-gbp .gx-part-d.up, .gxui .gx-part-d.up{ color:#188038; } #tab-gbp .gx-part-d.down, .gxui .gx-part-d.down{ color:#c5221f; } #tab-gbp .gx-part-d span, .gxui .gx-part-d span{ font-weight:600; color:var(--gx-muted); } #tab-gbp .gx-seen, .gxui .gx-seen{ padding:9px 13px; border-top:1px solid var(--gx-line); font-size:11.5px; color:var(--gx-muted); } #tab-gbp .gx-seen b, .gxui .gx-seen b{ color:var(--gx-ink); font-weight:700; font-variant-numeric:tabular-nums; } #tab-gbp .gx-cap, .gxui .gx-cap{ padding:0 13px 10px; font-size:11px; color:var(--gx-muted); } /* the scale beside the number: what other profiles here actually get */ /* Where your number sits against the typical range. One track: the band is the shaded region, your value the solid bar, and where you were a tick. */ #tab-gbp .gx-scale, .gxui .gx-scale{ padding:2px 13px 11px; } #tab-gbp .sc-track, .gxui .sc-track{ position:relative; height:12px; border-radius:999px; overflow:hidden; background:var(--gx-surface-alt); border:1px solid var(--gx-line); } /* Translucent with solid EDGES, and painted OVER the bar. A blue-50 fill was invisible on a grey-50 track; an opaque fill under the bar disappeared entirely for a profile ahead of the range. Edges survive both. */ #tab-gbp .sc-band, .gxui .sc-band{ position:absolute; top:0; bottom:0; background:rgba(96,165,250,.28); border-left:2px solid #60a5fa; border-right:2px solid #60a5fa; box-sizing:border-box; } #tab-gbp .sc-you, .gxui .sc-you{ position:absolute; top:0; bottom:0; left:0; background:var(--gx-blue); } /* The tick sits wherever the earlier figure fell, which is often INSIDE your own bar -- a grey line on a blue bar is not there. The white ring makes it read on the bar, on the band and on the empty track alike. */ #tab-gbp .sc-was, .gxui .sc-was{ position:absolute; top:0; bottom:0; width:2px; background:var(--gx-ink); box-shadow:0 0 0 1.5px #fff; } #tab-gbp .sc-keys, .gxui .sc-keys{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:7px; font-size:11px; color:var(--gx-muted); } #tab-gbp .sc-k i, .gxui .sc-k i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; } #tab-gbp .sc-k.you i, .gxui .sc-k.you i{ background:var(--gx-blue); } #tab-gbp .sc-k.was i, .gxui .sc-k.was i{ background:var(--gx-muted); } /* The key has to be the thing it is a key TO: same fill and same edge as the band. */ #tab-gbp .sc-k.band i, .gxui .sc-k.band i{ background:rgba(96,165,250,.28); border:1px solid #60a5fa; } /* No band to key: the swatch is hollow, so it reads as "nothing here" rather than as a colour that means something. */ #tab-gbp .sc-k.band.none i, .gxui .sc-k.band.none i{ background:transparent; border:1px dashed var(--gx-line); } #tab-gbp .sc-k b, .gxui .sc-k b{ color:var(--gx-ink); font-weight:700; font-variant-numeric:tabular-nums; } /* at a glance (reviews / profile) */ #tab-gbp .gx-glance, .gxui .gx-glance{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--gx-line); } #tab-gbp .gx-gl, .gxui .gx-gl{ background:var(--gx-surface); padding:11px 13px; } #tab-gbp .gx-gl-v, .gxui .gx-gl-v{ font-size:17px; font-weight:800; color:var(--gx-ink); font-variant-numeric:tabular-nums; } #tab-gbp .gx-gl-l, .gxui .gx-gl-l{ font-size:11px; color:var(--gx-muted); margin-top:2px; } /* recommendations */ #tab-gbp .gx-rec, .gxui .gx-rec{ display:flex; align-items:center; gap:11px; padding:12px; border-bottom:1px solid var(--gx-line); cursor:pointer; } #tab-gbp .gx-rec:last-child, .gxui .gx-rec:last-child{ border-bottom:none; } #tab-gbp .gx-rec-ico, .gxui .gx-rec-ico{ width:36px; height:36px; border-radius:9px; background:var(--gx-blue-tint); display:grid; place-items:center; font-size:18px; flex-shrink:0; } #tab-gbp .gx-rec-main, .gxui .gx-rec-main{ flex:1; min-width:0; } #tab-gbp .gx-rec-act, .gxui .gx-rec-act{ font-size:13.5px; font-weight:700; color:var(--gx-ink); line-height:1.3; } /* how much this one matters. 'big' is earned by a high-impact item, never by being first. */ #tab-gbp .gx-fx, .gxui .gx-fx{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:999px; font-size:9.5px; font-weight:800; font-style:normal; text-transform:uppercase; letter-spacing:.3px; vertical-align:1px; white-space:nowrap; color:var(--gx-muted); background:var(--gx-surface-alt); border:1px solid var(--gx-line); } #tab-gbp .gx-fx.big, .gxui .gx-fx.big{ color:#b45309; background:#fef3e2; border-color:#f6dcae; } #tab-gbp .gx-rec-why, .gxui .gx-rec-why{ font-size:11.5px; color:var(--gx-muted); margin-top:2px; } #tab-gbp .gx-rec-cta, .gxui .gx-rec-cta{ font-size:20px; color:var(--gx-blue); font-weight:700; flex-shrink:0; } #tab-gbp .gx-aitips, .gxui .gx-aitips{ background:var(--gx-blue-tint); border-radius:10px; padding:12px; font-size:13px; line-height:1.6; color:var(--gx-ink); white-space:pre-wrap; } #tab-gbp .gx-pills, .gxui .gx-pills{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } #tab-gbp .gx-pill, .gxui .gx-pill{ border:1px solid var(--gx-line); background:var(--gx-surface); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--gx-muted); cursor:pointer; } #tab-gbp .gx-pill.on, .gxui .gx-pill.on{ background:var(--gx-blue); color:#fff; border-color:var(--gx-blue); } #tab-gbp .gx-chart, .gxui .gx-chart{ width:100%; height:170px; display:block; } #tab-gbp .gx-xaxis, .gxui .gx-xaxis{ display:flex; justify-content:space-between; font-size:10px; color:var(--gx-muted); padding:4px 8px 0; } #tab-gbp .gx-tip, .gxui .gx-tip{ display:flex; gap:12px; align-items:flex-start; background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:12px; padding:12px; margin-bottom:8px; } #tab-gbp .gx-tip .tic, .gxui .gx-tip .tic{ font-size:20px; } #tab-gbp .gx-tip p, .gxui .gx-tip p{ font-size:12.5px; color:var(--gx-ink); margin:0; line-height:1.5; } /* ===== management overlay ===== */ /* THE OVERLAY IS A SIBLING OF #tab-gbp, ON PURPOSE (see the markup comment: a transformed ancestor becomes the containing block for position:fixed and the edit sheet painted underneath). The side effect is that --gx-*, which is scoped to #tab-gbp, resolved to its Google-grey FALLBACKS in here -- so this screen was the only one in the app not wearing the app's colours. Aliasing the tokens fixes every rule below at once, without moving the element back into the trap. */ #gbp-mgmt{ --gx-ink:var(--ink); --gx-muted:var(--ink3); --gx-line:var(--border); --gx-surface:var(--surface,#fff); --gx-surface-alt:var(--bg,#f7f8fa); --gx-blue:var(--green); position:fixed; inset:0; z-index:60; background:var(--gx-surface-alt); display:none; flex-direction:column; } /* On desktop it opened over the whole window, so the sidebar and topbar vanished and the only way out was its own back arrow. Inset it into the content area instead: the app chrome stays visible and clickable, which is what every other screen does. Below 880px the sidebar is display:none anyway, so full-screen is correct there. */ @media (min-width: 881px){ #gbp-mgmt{ inset: var(--topbar-h) 0 0 var(--sidebar-w); } } #gbp-mgmt.show{ display:flex; } #gbp-mgmt .gx-mhead{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--gx-surface); border-bottom:1px solid var(--gx-line); flex-shrink:0; } #gbp-mgmt .gx-back{ width:34px; height:34px; border:none; background:var(--gx-surface-alt); border-radius:999px; cursor:pointer; display:grid; place-items:center; } #gbp-mgmt .gx-back svg{ width:18px; height:18px; stroke:var(--gx-ink); fill:none; stroke-width:2.2; } #gbp-mgmt .gx-mhead h2{ font-size:16px; font-weight:700; color:var(--gx-ink); margin:0; } #gbp-mgmt .gx-mtabs{ display:flex; gap:4px; overflow-x:auto; background:var(--gx-surface); padding:0 8px; border-bottom:1px solid var(--gx-line); flex-shrink:0; scrollbar-width:none; } #gbp-mgmt .gx-mtabs::-webkit-scrollbar{ display:none; } #gbp-mgmt .gx-mtab{ flex-shrink:0; border:none; background:none; padding:12px 12px 10px; font-size:13px; font-weight:600; color:var(--gx-muted); cursor:pointer; position:relative; white-space:nowrap; } #gbp-mgmt .gx-mtab.on{ color:var(--gx-blue); } #gbp-mgmt .gx-mtab.on::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--gx-blue); } #gbp-mgmt .gx-mscroll{ flex:1; overflow-y:auto; padding:16px; padding-bottom:90px; } #gbp-mgmt .gx-phonecard{ background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:12px; padding:13px 15px; margin:0 0 16px; } #gbp-mgmt .gx-phonehead{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--gx-muted); letter-spacing:.02em; margin-bottom:8px; } #gbp-mgmt .gx-phonecard input{ width:100%; max-width:280px; padding:9px 12px; border:1px solid var(--gx-line); border-radius:9px; font-size:14px; font-family:inherit; color:var(--gx-ink); background:var(--gx-surface); } #gbp-mgmt .gx-phonecard input:focus{ outline:none; border-color:var(--gx-blue); box-shadow:0 0 0 3px var(--green-light,#2563eb18); } #gbp-mgmt .gx-phonenote{ font-size:11.5px; color:var(--gx-muted); line-height:1.55; margin-top:8px; } #gbp-mgmt .gx-count{ font-size:12px; color:var(--gx-muted); font-weight:600; } #gbp-mgmt .gx-search{ display:flex; align-items:center; gap:8px; background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:999px; padding:8px 14px; margin-bottom:12px; } #gbp-mgmt .gx-search svg{ width:18px; height:18px; stroke:var(--gx-muted); fill:none; stroke-width:2; flex-shrink:0; } /* Google's area suggestions. Sits over the chips below rather than pushing them down, so the list does not jump while you type. */ #gbp-mgmt .gx-sug{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; background:var(--gx-surface); border:1px solid #e8eaed; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.12); overflow:hidden; max-height:240px; overflow-y:auto; } #gbp-mgmt .gx-sugrow{ padding:9px 14px; font-size:13px; color:var(--gx-ink); cursor:pointer; } #gbp-mgmt .gx-sugrow:hover{ background:var(--gx-surface-alt); } #gbp-mgmt .gx-search input{ border:none; outline:none; flex:1; font-size:14px; background:none; color:var(--gx-ink); } #gbp-mgmt .gx-warn{ display:flex; gap:10px; background:#fef7e0; border:1px solid #feefc3; border-radius:10px; padding:10px 12px; margin-bottom:12px; } #gbp-mgmt .gx-warn .wt{ font-size:12px; color:#7a5b00; font-weight:600; } #gbp-mgmt .gx-warn .wb{ display:inline-block; margin-top:4px; font-size:10px; font-weight:700; color:#b06000; background:#fde8a8; padding:2px 8px; border-radius:999px; } #gbp-mgmt .gx-chips{ display:flex; flex-wrap:wrap; gap:8px; } #gbp-mgmt .gx-chip{ display:inline-flex; align-items:center; gap:6px; background:#e8f0fe; color:#1557b0; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:600; } #gbp-mgmt .gx-chip.warn{ background:#fef7e0; color:#7a5b00; } #gbp-mgmt .gx-chip .cx{ cursor:pointer; font-size:14px; opacity:.7; } #gbp-mgmt .gx-hourrow,#gbp-mgmt .gx-attrrow{ display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-bottom:1px solid var(--gx-surface-alt); } #gbp-mgmt .gx-hourrow:last-child,#gbp-mgmt .gx-attrrow:last-child{ border-bottom:none; } #gbp-mgmt .gx-hday{ font-size:13.5px; font-weight:600; color:var(--gx-ink); } #gbp-mgmt .gx-htime{ font-size:13px; color:var(--gx-muted); } #gbp-mgmt .gx-htime.closed{ color:#d93025; font-weight:600; } #gbp-mgmt .gx-attrname{ font-size:13.5px; color:var(--gx-ink); padding-right:10px; } #gbp-mgmt .gx-edit{ border:1px solid var(--gx-line); background:var(--gx-surface); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; color:#2563eb; cursor:pointer; } #gbp-mgmt .gx-ehrow,#gbp-sheet .gx-ehrow{ display:grid; grid-template-columns:minmax(78px,1fr) 1fr 1fr 40px; gap:8px; align-items:center; margin-bottom:8px; } #gbp-mgmt .gx-ehrow span,#gbp-sheet .gx-ehrow span{ font-size:12.5px; font-weight:600; color:var(--gx-ink); } #gbp-mgmt .gx-ehrow input,#gbp-sheet .gx-ehrow input{ border:1px solid var(--gx-line); border-radius:8px; padding:7px 8px; font-size:12.5px; width:100%; min-width:0; } #gbp-mgmt .gx-tog,#gbp-sheet .gx-tog{ position:relative; width:40px; height:22px; flex-shrink:0; cursor:pointer; display:inline-block; } #gbp-mgmt .gx-tog input,#gbp-sheet .gx-tog input{ opacity:0; width:0; height:0; position:absolute; } #gbp-mgmt .gx-tk,#gbp-sheet .gx-tk{ position:absolute; inset:0; background:var(--gx-line); border-radius:999px; transition:.2s; } #gbp-mgmt .gx-tb,#gbp-sheet .gx-tb{ position:absolute; left:3px; top:3px; width:16px; height:16px; background:var(--gx-surface); border-radius:999px; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.3); } #gbp-mgmt .gx-tog input:checked + .gx-tk,#gbp-sheet .gx-tog input:checked + .gx-tk{ background:#2563eb; } #gbp-mgmt .gx-tog input:checked + .gx-tk + .gx-tb,#gbp-sheet .gx-tog input:checked + .gx-tk + .gx-tb{ transform:translateX(18px); } /* A closed day's times are irrelevant — grey them so the row reads at a glance. */ #gbp-sheet .gx-ehrow.is-closed input{ opacity:.45; } /* A time Google cannot read (gbp-panel.js saveHours): the box, and the sentence naming the day and what to type. The sheet sits outside the gx token scope, hence literal colours. */ #gbp-sheet .gx-ehrow input.is-bad{ border-color:#dc2626; background:#fef2f2; box-shadow:0 0 0 2px rgba(220,38,38,.18); } #gbp-sheet .gx-herr{ margin:6px 0 2px; padding:9px 11px; border-radius:8px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:12.5px; line-height:1.45; } #gbp-sheet .gx-herr[hidden]{ display:none; } #gbp-mgmt .gx-mfoot{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; gap:10px; } #gbp-mgmt .gx-fsave{ flex:0 0 auto; min-width:104px; height:48px; border:1px solid #2563eb; border-radius:10px; background:var(--gx-surface); color:#2563eb; font-size:15px; font-weight:700; cursor:pointer; } #gbp-mgmt .gx-fsync{ flex:1; height:48px; border:none; border-radius:10px; background:#2563eb; color:#fff; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(26,115,232,.35); display:inline-flex; align-items:center; justify-content:center; gap:8px; } #gbp-mgmt .gx-syncbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#e8f0fe; border:1px solid #d2e3fc; border-radius:10px; padding:9px 12px; margin-bottom:14px; font-size:12.5px; color:#1557b0; font-weight:600; } #gbp-mgmt .gx-syncbar.off{ background:var(--gx-surface-alt); border-color:var(--gx-line); color:var(--gx-muted); } #gbp-mgmt .gx-pull{ border:1px solid #2563eb; background:var(--gx-surface); color:#2563eb; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } #gbp-mgmt .gx-mhint{ font-size:12.5px; color:var(--gx-muted); margin-bottom:14px; line-height:1.5; } #gbp-mgmt .gx-mlist{ background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:12px; overflow:hidden; } /* simple sheet for editing hours */ /* The sheet is a sibling of #gbp-mgmt for the same reason, and never got its aliases, so --gx-surface was undefined in here and Edit Hours was SEE-THROUGH: the panel's own text showed behind its title (8 Oct 2026). The same aliases, the same fix. */ #gbp-sheet{ --gx-ink:var(--ink); --gx-muted:var(--ink3); --gx-line:var(--border); --gx-surface:var(--surface,#fff); --gx-surface-alt:var(--bg,#f7f8fa); position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45); display:none; align-items:flex-end; } #gbp-sheet.show{ display:flex; } #gbp-sheet .gx-sheet{ background:var(--gx-surface); width:100%; max-width:480px; margin:0 auto; border-radius:18px 18px 0 0; padding:18px 16px 22px; max-height:85vh; overflow-y:auto; } #gbp-sheet .gx-sheet h3{ font-size:16px; font-weight:700; margin:0 0 14px; color:var(--gx-ink); } #gbp-sheet .gx-sheet-btn{ width:100%; border:none; border-radius:10px; background:#2563eb; color:#fff; font-size:15px; font-weight:700; padding:13px; cursor:pointer; margin-top:8px; } /* The cold-start diagnosis, above the numbers, because when the numbers are all zero the explanation IS the content and empty bars are not an answer. */ #tab-gbp .gx-diag, .gxui .gx-diag{ background:var(--gx-surface); border:1px solid var(--gx-line); border-left:3px solid #b45309; border-radius:12px; padding:12px 14px; margin:0 12px 12px; } /* The all-clear. Same block, green rail and green heading, so "0 problems" does not read as a warning at a glance -- the colour is the first thing anyone takes from it. */ #tab-gbp .gx-diag.ok, .gxui .gx-diag.ok{ border-left-color:var(--gx-green); background:#f0fdf4; } #tab-gbp .gx-diag.ok .gx-diag-h, .gxui .gx-diag.ok .gx-diag-h{ color:#15803d; } #tab-gbp .gx-diag-h, .gxui .gx-diag-h{ font-size:14px; font-weight:800; } #tab-gbp .gx-diag-b, .gxui .gx-diag-b{ font-size:12.5px; color:var(--gx-muted); margin:4px 0 10px; } /* ---- Search & Rank inside the card system -------------------------------------- */ /* THE SECTION IS THE CARD, so a panel inside one gives up its own box. Its CONTENTS keep every rule, because the .rank-ahead / .rank-cov ancestor is still there -- stripping the wrapper instead silently removed the buckets' hairlines and the count pills (measured: border-top 0.8px -> 0, padding 10px -> 0). Same shape gbp.css already uses for `.gx-section .gx-card`. */ .gxui .gx-section .rank-ahead, .gxui .gx-section .rank-cov{ background:none; border:0; border-radius:0; padding:0; margin:0; } /* The panel's own small-caps label duplicates the section head above it. */ .gxui .gx-section .rank-ahead > .ra-t, .gxui .gx-section .rank-cov > .ra-t{ display:none; } /* Whatever carried its own inset now takes it from the section body, so every row in every section lines up on one left edge. */ .gxui .gx-section .rank-ahead .ra-s, .gxui .gx-section .rank-ahead .ra-hint, .gxui .gx-section .rank-ahead .rv-row, .gxui .gx-section .rank-cov .bk, .gxui .gx-section .rank-cov-note, .gxui .gx-section .kw-row{ padding-left:13px; padding-right:13px; } /* The gap keeps its own surface inside the card system. It is the one line in this panel that is not prose, and flattening it would bury the sentence the panel exists for among the rows. It takes the section's inset as a MARGIN instead, so the box lines up on the same left edge as everything else and still reads as a box. */ .gxui .gx-section .rank-ahead .ra-gap{ margin-left:13px; margin-right:13px; } /* The section head is the top edge now; the panel's first hairline would draw a second. */ .gxui .gx-section .rank-cov .bk:first-of-type{ border-top:none; } .gxui .gx-section .kw-row:first-child{ border-top:none; } /* At-a-glance tiles, borrowing Overview's weight rather than three grey boxes. */ .gxui .rk-tiles{ display:grid; grid-template-columns:repeat(3,1fr); } .gxui .rk-tile{ padding:12px 8px; text-align:center; border-right:1px solid var(--gx-line); } .gxui .rk-tile:last-child{ border-right:none; } /* The figures are the point of this card and were set at body-text weight. 27px is the owner's colour pass; tabular numerals so three tiles do not jitter between renders. */ .gxui .rk-v{ font-size:27px; font-weight:800; color:var(--gx-ink); letter-spacing:-.6px; line-height:1.15; font-variant-numeric:tabular-nums; } .gxui .rk-v.good{ color:var(--gx-green); } .gxui .rk-v.zero{ color:#cbd5e1; } .gxui .rk-l{ font-size:11.5px; color:var(--gx-muted); margin-top:2px; } /* The share sentence and the quota line both sit under the tiles inside the same card. GENERAL SIBLING, NOT ADJACENT: `+` matched exactly one element, so the day the share line was inserted first the quota line silently lost its inset and sat against the card edge on its own. */ .gxui .rk-tiles ~ div{ margin:0 13px 11px; } /* The share is a sentence, not a figure, and it explains what the tile above it counts: a keyword with no position is not "you are last", it is "not in the twenty we can see". Set close under the tiles so it reads as their caption rather than as the next thing down. MATCHED AS div.rk-share, not .rk-share: the sibling rule above is (0,2,1) and would otherwise win the margin outright. Equal specificity, declared later, no !important. */ .gxui div.rk-share{ font-size:12.5px; line-height:1.55; color:var(--gx-muted); margin:0 13px 8px; } .gxui div.rk-share b{ color:var(--gx-ink); font-weight:700; } /* ---- The area picker ----------------------------------------------------------- */ /* THE WARNING TRAVELS WITH THE OPTION. A sentence under the form asks the reader to re-check the list against it; a tag on the row itself is read in the same glance as the name. The two that matter are marked: a whole city (the case that produced a false "you rank nowhere") and a single building (three of ten real tenant inputs). */ .gxui .rank-pick{ margin-top:10px; } .gxui .rank-pick:empty{ display:none; } .gxui .pk-h{ font-size:11.5px; font-weight:700; color:var(--gx-muted); margin-bottom:5px; } .gxui .pk-c{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:var(--gx-surface); border:1px solid var(--gx-line); border-radius:9px; padding:8px 10px; margin-bottom:5px; cursor:pointer; font-size:12.5px; color:var(--gx-ink2); } .gxui .pk-c:hover{ background:var(--gx-surface-alt); } /* The chosen one is unmistakable: a bare border change is not enough next to a hover. */ .gxui .pk-c.on{ border-color:var(--gx-blue); background:var(--gx-blue-tint); box-shadow:inset 0 0 0 1px var(--gx-blue); } .gxui .pk-c b{ flex:1; min-width:0; font-weight:600; } .gxui .pk-c em{ font-style:normal; font-size:10.5px; font-weight:700; white-space:nowrap; padding:2px 7px; border-radius:999px; } .gxui .pk-o{ background:var(--gx-green-tint); color:var(--gx-green); } .gxui .pk-w{ background:var(--gx-orange-tint); color:var(--gx-orange); } .gxui .pk-p{ background:var(--gx-surface-alt); color:var(--gx-muted); } .gxui .pk-n{ font-size:11.5px; color:var(--gx-orange); background:var(--gx-orange-tint); border-radius:8px; padding:7px 9px; line-height:1.45; } /* "Measured from X" in the keyword detail. Neutral when the point is a sensible area and amber when it is a whole city or a single building -- the two shapes that make a rank read as something it is not. Rendered inside a modal, which sits OUTSIDE #tab-rank, so it is scoped to the modal rather than to the tab page. */ #rankDetailModal .rank-from{ font-size:12px; color:#6b7280; background:#f8fafc; border:1px solid #e5e7eb; border-radius:9px; padding:8px 10px; margin:0 0 12px; line-height:1.5; } #rankDetailModal .rank-from b{ color:#111827; font-weight:600; } #rankDetailModal .rank-from.warn{ color:#92400e; background:#fffbeb; border-color:#fcd34d; } /* ── Phase B: services on the listing (frontend/js/rank-services.js) ────────── Scoped to .gxui like the rest of the rank sections. #tab-rank is a SIBLING of #tab-gbp, which is why the file opens by saying so -- a #tab-gbp rule never reaches here. */ .gxui .svc-row{ padding:12px 13px; border-top:1px solid var(--border); } .gxui .svc-row:first-child{ border-top:0; } .gxui .svc-kw{ font-weight:600; font-size:14px; } .gxui .svc-why{ font-size:12.5px; color:var(--ink3); margin:2px 0 8px; } .gxui .svc-edit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* The input is a .form-group input -- the app's own field styling. Only the flex sizing belongs to this screen. */ .gxui .svc-edit .form-group{ flex:1 1 260px; min-width:0; margin:0; } /* Amber, and deliberately not a toast: this is the one tap in the product that edits a public profile, so it says so BEFORE the tap. */ .gxui .svc-live{ font-size:12px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:6px 9px; margin-top:8px; } .gxui .svc-note{ font-size:13px; color:var(--ink3); padding:12px 13px; } .gxui .svc-have{ font-size:13px; padding:12px 13px; } .gxui .svc-chip{ display:inline-block; font-size:12.5px; padding:3px 9px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; margin:0 6px 6px 0; } /* ── Phase E: the Description tab ───────────────────────────────────────── SCOPED TO #gbp-mgmt, not .gxui. The Manage overlay is a SIBLING of #tab-gbp, not a child, so `.gxui .gd-x` would never match here -- it is a fixed-position panel that redefines the --gx-* set on itself (line 256). Only the six variables IT defines are safe to use: --gx-ink, --gx-muted, --gx-line, --gx-surface, --gx-surface-alt, --gx-blue. --gx-orange and --gx-ink2 are NOT among them and resolve to nothing in this scope, so the warning states borrow the root palette's --orange instead. */ #gbp-mgmt .gd-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gx-muted); font-weight:600; margin:0 0 5px; } #gbp-mgmt .gd-now{ background:var(--gx-surface-alt); border:1px solid var(--gx-line); border-radius:8px; padding:10px 12px; margin:0 0 6px; color:var(--gx-ink); } #gbp-mgmt .gd-count{ font-size:12px; color:var(--gx-muted); margin:0 0 12px; font-variant-numeric:tabular-nums; } #gbp-mgmt .gd-empty, #gbp-mgmt .gd-note{ color:var(--gx-ink); margin:0 0 12px; } #gbp-mgmt .gd-unread, #gbp-mgmt .gd-warn{ background:var(--orange-light); border:1px solid var(--orange); border-radius:8px; padding:10px 12px; color:var(--ink); font-size:13px; margin:0 0 12px; } #gbp-mgmt .gd-in{ width:100%; box-sizing:border-box; border:1px solid var(--gx-line); border-radius:8px; padding:10px 12px; font:inherit; color:var(--gx-ink); background:var(--gx-surface); margin:0 0 6px; resize:vertical; } #gbp-mgmt .gd-actions{ display:flex; gap:8px; margin:0 0 9px; flex-wrap:wrap; } #gbp-mgmt .gd-live{ font-size:12px; color:var(--gx-muted); border-top:1px solid var(--gx-line); padding-top:9px; }