/* ============================================================================ ledger/kit.css: the Ledger kit (STYLEGUIDE-r2 §2, config L flattened). Contract: backend/ledger/API.md (not served). Rules of this sheet (ledger-lint T-04, T-05, S-01, S-02, API.md §0): - every selector names a .gg-* element; nothing here styles a bare element, :root or an old app class (ancestor conditions on body[data-drawer|data-modal] and :root[data-theme="light"] only); - colours are var(--role) from ledger/tokens.css, never a literal; - every padding, margin and gap is var(--s1..--s8), 0 or auto; every radius var(--r-ctl|--r-modal|--r-disc); - transitions are opacity var(--t-fade) or transform var(--t-move), nothing else. The old sheets (style.css …) style bare button/input/a/h1; the rules below set every property those leak. ========================================================================= */ /* ---- base: box model, type, helpers ------------------------------------------------------------ */ :where([class^="gg-"], [class*=" gg-"]) { box-sizing: border-box; } :where([class^="gg-"], [class*=" gg-"])::before, :where([class^="gg-"], [class*=" gg-"])::after { box-sizing: border-box; } .gg-view, .gg-drawer, .gg-modal-layer, .gg-popover, .gg-toast { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-body); font-variant-numeric: var(--nums-body); color: var(--text); } /* `hidden` wins over every kit display value (a view hides a field or an error line with node.hidden = true) */ [class^="gg-"][hidden], [class*=" gg-"][hidden] { display: none !important; } /* a page's own node shown on one side of the 600 breakpoint only (the docs page list → one select under 600) */ @media (min-width: 601px) { .gg-only-narrow { display: none !important; } } @media (max-width: 600px) { .gg-only-wide { display: none !important; } } .gg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gg-icon { flex: none; display: inline-block; vertical-align: middle; } .gg-num { font-variant-numeric: tabular-nums; } .gg-mono { font-family: var(--font-mono); font-size: var(--fs-cell); font-variant-numeric: tabular-nums; } .gg-code-inline { font-family: var(--font-code); font-size: var(--fs-cell); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .gg-meta { color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-body); } .gg-zero { color: var(--muted); } .gg-strong { font-weight: var(--w-head); } /* links: `text`, underline on hover (TX-01); in running prose a dim underline that brightens */ .gg-link { color: var(--text); text-decoration: none; text-underline-offset: 2px; cursor: pointer; } /* L-25 (r5 L2 F02, ruling R8-E: "Targets 32 / 28" exempts no link): an inline link, in a sentence or in a table or chart-table cell, is a 28px+ target. Block padding on an inline box grows its hit area and leaves the line box, the row height and any ellipsis alone; s2 keeps it on the spacing scale (a 12-13px line box + 16 = 32-33). */ a.gg-link { padding-block: var(--s2); } .gg-link:hover { text-decoration: underline; text-decoration-color: currentColor; } .gg-text .gg-link, .gg-info .gg-link, .gg-bullets .gg-link, .gg-toast .gg-link, .gg-card-main .gg-link { text-decoration: underline; text-decoration-color: var(--dim); } .gg-text .gg-link:hover, .gg-info .gg-link:hover, .gg-bullets .gg-link:hover, .gg-toast .gg-link:hover, .gg-card-main .gg-link:hover { text-decoration-color: currentColor; } /* the one focus ring: 2px accent-ink, 2px offset, :focus-visible only (S-07, L-21) */ .gg-btn:focus, .gg-link:focus, .gg-record:focus, .gg-seg-item:focus, .gg-menu-item:focus, .gg-brand:focus, .gg-input-box input:focus, .gg-select select:focus, .gg-textarea:focus, .gg-radio:focus, .gg-check:focus, .gg-switch-input:focus, .gg-drawer:focus, .gg-modal:focus, .gg-popover:focus, .gg-code-live:focus, .gg-chart-details > .gg-chart-summary:focus, .gg-fold > .gg-fold-summary:focus { outline: none; } .gg-btn:focus-visible, .gg-link:focus-visible, .gg-record:focus-visible, .gg-menu-item:focus-visible, .gg-brand:focus-visible, .gg-seg-item:focus-visible, .gg-textarea:focus-visible, .gg-check:focus-visible, .gg-code-live:focus-visible, .gg-chart-details > .gg-chart-summary:focus-visible, .gg-fold > .gg-fold-summary:focus-visible, .gg-select:has(> select:focus-visible), .gg-input-box:has(> input:focus-visible), .gg-switch-input:focus-visible + .gg-switch-track, .gg-choice-item:has(> .gg-radio:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } /* ---- Shell pieces the kit draws: lockup, brand marks ------------------------------------------- */ .gg-lockup { display: inline-block; flex: none; height: 28px; width: calc(28px * 342.6 / 64); background: url("/brand/lockup.svg") left center / contain no-repeat; } .gg-lockup[data-size="20"] { height: 20px; width: calc(20px * 342.6 / 64); } :root[data-theme="light"] .gg-lockup { background-image: url("/brand/lockup-light.svg"); } .gg-brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; border-radius: var(--r-ctl); } .gg-brand:hover { text-decoration: none; } .gg-brandmark { display: inline-flex; flex: none; width: var(--bm, 16px); height: var(--bm, 16px); } .gg-brandmark > svg { display: block; width: 100%; height: 100%; } /* ---- Page (GG.page): title row, folio, back link, breadcrumb ------------------------------------ */ .gg-view { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; } .gg-title { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } .gg-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s4); min-width: 0; } .gg-title-actions { display: flex; align-items: center; gap: var(--s2); } .gg-h { margin: 0; padding: 0; color: var(--text); font-family: var(--font); overflow-wrap: anywhere; min-width: 0; } .gg-h[data-level="1"] { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-head); } .gg-h[data-level="2"] { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-head); } .gg-h[data-level="3"] { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); } .gg-h[data-level="4"] { font-size: var(--fs-cell); line-height: var(--lh-cell); font-weight: var(--w-label); color: var(--dim); } .gg-h[data-rule] { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); } .gg-h > .gg-meta { margin-left: var(--s2); } .gg-h2-record { color: var(--dim); } .gg-folio { display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: 0; margin: 0; color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } .gg-folio > .gg-folio-run { white-space: nowrap; } .gg-back { margin: 0; font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-back > .gg-link { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--h-ctl-sm); color: var(--dim); } .gg-back > .gg-link:hover { color: var(--text); } .gg-header { min-width: 0; } .gg-crumbs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); color: var(--dim); font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-crumbs-item { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; } .gg-crumbs-item[aria-current] { color: var(--text); } .gg-crumbs-item > .gg-icon { color: var(--dim); } .gg-crumbs-item > .gg-link { display: inline-flex; align-items: center; min-height: var(--h-ctl-sm); color: var(--dim); } .gg-crumbs-item > .gg-link:hover { color: var(--text); } .gg-crumbs-back { display: none; align-items: center; gap: var(--s1); min-height: var(--h-ctl-sm); font-size: var(--fs-cell); color: var(--dim); } .gg-tabs-row { display: flex; } /* auth template: the lockup above one card */ .gg-auth { display: flex; flex-direction: column; align-items: center; gap: var(--s6); width: 100%; } .gg-auth-card { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 400px; padding: var(--s6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); } .gg-auth-card > .gg-btn { width: 100%; } /* ---- Surface: section, group, inset, split, card ----------------------------------------------- */ .gg-section { min-width: 0; padding: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); } .gg-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s4); } .gg-section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); min-width: 0; } /* the actions box may shrink, so a segment there can see that it does not fit and fold to its select (L-26) */ .gg-section-actions { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 0 1 auto; } .gg-section-body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .gg-section[data-danger] .gg-section-title > .gg-h { color: var(--text); } .gg-section-body > .gg-btn, .gg-group-body > .gg-btn, .gg-drawer-body > .gg-btn, .gg-inset > .gg-btn { align-self: flex-start; } .gg-group { min-width: 0; } .gg-group-head { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); padding: 0 0 var(--s2); border-bottom: 1px solid var(--line); } .gg-group-body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .gg-inset { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--panel2); border-radius: var(--r-ctl); min-width: 0; } .gg-inset-head { display: flex; justify-content: flex-end; align-items: center; height: var(--s7); margin: 0; padding: 0; border-bottom: 1px solid var(--line); } .gg-split { display: grid; grid-template-columns: var(--split, repeat(2, minmax(0, 1fr))); gap: var(--s6); align-items: start; } .gg-split-part { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); } /* GG.stack: a bare column with the section body's rhythm (r8b K3); data-gap="1" is the tight s1 rhythm */ .gg-stack { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .gg-stack[data-gap="1"] { gap: var(--s1); } /* GG.split({ nav: true }) on a record page: the nav column starts level with the h1, the crumbs and title sit over the content column (r5 L1-06). Over 600 only; under it the nav is one select above the article */ @media (min-width: 601px) { .gg-view[data-template="record"]:has(> .gg-split[data-nav]) { display: grid; grid-template-columns: var(--split-nav, minmax(160px, 1fr) minmax(0, 4fr)); align-items: start; } .gg-view[data-template="record"]:has(> .gg-split[data-nav]) > * { grid-column: 2; } .gg-view[data-template="record"] > .gg-split[data-nav] { display: contents; } .gg-view[data-template="record"] > .gg-split[data-nav] > .gg-split-part:first-child { grid-column: 1; grid-row: 1 / span 2; } .gg-view[data-template="record"]:has(> .gg-crumbs) > .gg-split[data-nav] > .gg-split-part:first-child { grid-row: 2 / span 2; } .gg-view[data-template="record"] > .gg-split[data-nav] > .gg-split-part:last-child { grid-column: 2; } } .gg-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s3) var(--s4); background: var(--panel2); border-radius: var(--r-ctl); color: var(--text); } .gg-card[data-aside] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .gg-card[data-role] { padding: var(--s3) 0 0; background: none; border-top: 1px solid var(--line); border-radius: 0; } .gg-section-body > .gg-card[data-role]:first-child { padding-top: 0; border-top: 0; } .gg-card-main { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } .gg-card-caption { color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } .gg-card-title { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); } .gg-card-title > .gg-link { font-weight: var(--w-head); } .gg-card-body { margin: 0; color: var(--dim); max-width: 80ch; } .gg-card-aside { min-width: 0; } /* ---- Surface: info box, empty state ------------------------------------------------------------ */ .gg-info { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); } .gg-info-text { margin: 0; min-width: 0; max-width: 80ch; } .gg-info-text > .gg-strong { font-weight: var(--w-head); } .gg-info-text > .gg-btn { vertical-align: middle; } .gg-glyph { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: var(--s1) 0 0; } .gg-list-row .gg-glyph, .gg-card-title .gg-glyph { margin: 0; } .gg-glyph[data-role="finding"]::before { content: ""; display: block; width: 12px; height: 12px; border-radius: var(--r-disc); background: var(--accent); } .gg-glyph[data-role="note"], .gg-glyph[data-role="ring"] { color: var(--dim); } .gg-glyph[data-role="warning"] { color: var(--attention); } .gg-glyph > .gg-sr { color: var(--text); } /* the glyph's hue is the icon's; its spoken word is text (L-03) */ /* discOpen 'text': with a drawer open the finding disc fills `text`; the open row is the screen's attention gold */ body[data-drawer="open"] .gg-glyph[data-role="finding"]::before { background: var(--text); } .gg-empty { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); } /* inside a section an info box or empty state is an inset (panel2, no border): surfaces stay three levels and no section sits inside a section (L-07; kit request wp6 K4) */ .gg-section .gg-info, .gg-section .gg-empty { background: var(--panel2); border: 0; } .gg-empty-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; } .gg-empty-main > .gg-h { font-size: var(--fs-section); line-height: var(--lh-section); } .gg-empty-body { margin: 0; color: var(--dim); max-width: 80ch; } .gg-empty-main > .gg-btn, .gg-empty-main > .gg-link { margin: var(--s2) 0 0; } /* ---- Text: body, key-values, bullets, status word ---------------------------------------------- */ .gg-text { margin: 0; max-width: 80ch; color: var(--text); } .gg-text[data-tone="dim"] { color: var(--dim); } .gg-text[data-tone="caption"] { color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } .gg-kv { max-width: 640px; min-width: 0; } .gg-kv > .gg-h { margin: 0 0 var(--s2); } .gg-kv-list { display: grid; grid-template-columns: minmax(128px, max-content) minmax(0, 1fr); column-gap: var(--s6); row-gap: var(--s2); align-items: center; margin: 0; font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-kv-label { margin: 0; color: var(--dim); } .gg-kv-value { display: flex; align-items: center; gap: var(--s3); margin: 0; min-width: 0; overflow-wrap: anywhere; } .gg-kv-value > .gg-chart { flex: 1; } .gg-kv[data-inline] { max-width: none; } .gg-kv[data-inline] > .gg-kv-list { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); row-gap: var(--s1); } .gg-kv[data-inline] .gg-kv-value { margin: 0 var(--s4) 0 0; } .gg-bullets { display: flex; flex-direction: column; gap: var(--s1); max-width: 80ch; margin: 0; padding: 0 0 0 var(--s5); } .gg-bullets-item { margin: 0; padding: 0; } .gg-word { display: inline-flex; align-items: center; gap: var(--s1); vertical-align: middle; white-space: nowrap; } .gg-word[data-glyph-tone="good"] > .gg-icon { color: var(--good); } .gg-word[data-glyph-tone="bad"] > .gg-icon { color: var(--bad); } .gg-word[data-glyph-tone="attention"] > .gg-icon { color: var(--attention); } .gg-word[data-glyph-tone="dim"] { color: var(--dim); } .gg-glyph[data-glyph-tone="good"] { color: var(--good); } .gg-glyph[data-glyph-tone="bad"] { color: var(--bad); } .gg-glyph[data-glyph-tone="attention"] { color: var(--attention); } .gg-glyph[data-glyph-tone="dim"] { color: var(--dim); } /* ---- Surface: code block ------------------------------------------------------------------------ */ .gg-code { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); min-width: 0; } .gg-code-key { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); } .gg-code-key-label { color: var(--dim); font-weight: var(--w-label); } .gg-code-key-value { font-family: var(--font-mono); font-size: var(--fs-cell); overflow-wrap: anywhere; } .gg-code-box { position: relative; display: flex; flex-direction: column; width: 100%; padding: var(--s3) var(--s4); background: var(--panel2); border-radius: var(--r-ctl); } .gg-code-box[data-head] { padding-top: 0; } .gg-code-head { display: flex; justify-content: flex-end; align-items: center; gap: var(--s3); height: var(--s7); margin: 0 0 var(--s3); padding: 0; border-bottom: 1px solid var(--line); } .gg-code-lang { margin-right: auto; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--dim); } .gg-code-pre { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--font-code); font-size: var(--fs-cell); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); } .gg-code-pre > .gg-code-text { display: block; font: inherit; } .gg-code[data-live] .gg-code-box { border: 1px solid var(--line-ctl); } .gg-code-live { min-height: var(--s8); cursor: text; border-radius: var(--r-ctl); } /* ---- Button: 4 variants × 32/28 (BT-01..BT-05) -------------------------------------------------- */ .gg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); flex: none; height: var(--h-ctl); margin: 0; padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--r-ctl); background: none; color: var(--text); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-body); line-height: var(--lh-body); font-variant-numeric: var(--nums-body); white-space: nowrap; text-decoration: none; cursor: pointer; opacity: 1; pointer-events: auto; box-shadow: none; } .gg-btn[data-size="28"] { height: var(--h-ctl-sm); padding: 0 var(--s2); gap: var(--s1); } .gg-btn:hover { text-decoration: none; } .gg-btn-word { display: inline-block; } .gg-btn[data-variant="primary"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent-ink); } /* no gold variant on hover (T-05): the word underlines */ .gg-btn[data-variant="primary"]:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent-ink); } .gg-btn[data-variant="primary"]:hover > .gg-btn-word { text-decoration: underline; text-underline-offset: 2px; } .gg-btn[data-variant="secondary"], .gg-btn[data-demoted] { background: none; color: var(--text); border-color: var(--line-ctl); } .gg-btn[data-variant="secondary"]:hover, .gg-btn[data-demoted]:hover { background: var(--panel2); color: var(--text); border-color: var(--line-ctl); } .gg-btn[data-variant="ghost"] { background: none; color: var(--dim); border-color: transparent; } .gg-btn[data-variant="ghost"]:hover { background: var(--panel2); color: var(--text); border-color: transparent; } /* danger: a `bad` border, the word `text`, the hue on the icon (hueOnGlyph); never borderless (BT-03) */ .gg-btn[data-variant="danger"] { background: none; color: var(--text); border-color: var(--bad); } .gg-btn[data-variant="danger"] > .gg-icon { color: var(--bad); } .gg-btn[data-variant="danger"]:hover { background: var(--panel2); color: var(--text); border-color: var(--bad); } .gg-btn:disabled, .gg-btn[aria-disabled="true"] { cursor: default; color: var(--muted); pointer-events: auto; opacity: 1; } .gg-btn:disabled:hover, .gg-btn[aria-disabled="true"]:hover { background: none; text-decoration: none; } .gg-btn[data-variant="primary"]:disabled { background: var(--panel2); border-color: var(--line-ctl); color: var(--muted); } .gg-btn[data-variant="danger"]:disabled > .gg-icon { color: var(--muted); } .gg-btn[data-icon-only] { width: var(--h-ctl); padding: 0; } .gg-btn[data-icon-only][data-size="28"] { width: var(--h-ctl-sm); padding: 0; } /* tooltip: the icon-only button's label, on hover and keyboard focus (BT-05) */ .gg-tip { position: absolute; bottom: calc(100% + var(--s2)); left: 50%; z-index: var(--z-popover); transform: translateX(-50%); display: inline-flex; align-items: center; height: var(--s6); padding: 0 var(--s2); white-space: nowrap; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--line-firm); border-radius: var(--r-ctl); font-size: var(--fs-caption); font-weight: var(--w-body); line-height: 1; opacity: 0; transition: opacity var(--t-fade); } .gg-btn[data-icon-only]:hover > .gg-tip, .gg-btn[data-icon-only]:focus-visible > .gg-tip { opacity: 1; } .gg-td-actions .gg-tip { left: auto; right: 0; transform: none; } /* a modal's head sits at its scrolling box's top edge, which clips a tooltip above it: the head's tooltips open below the button (gate v21 L2 F3, the key modal's Close) */ .gg-modal-head .gg-tip { bottom: auto; top: calc(100% + var(--s2)); } /* an anchor's tooltip gives way to the menu or popover it opened (the game kebab's "Actions for …" stayed painted over the table header while its menu was open; review r4 L1-10) */ .gg-pop:has(> .gg-popover[data-open]) > .gg-btn > .gg-tip, .gg-btn[aria-expanded="true"] > .gg-tip { opacity: 0; } /* ---- Control: inputs, select, segmented, textarea, choice, checkbox, switch, field ------------- */ .gg-ctl { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; } .gg-ctl-label { color: var(--dim); font-weight: var(--w-body); white-space: nowrap; } .gg-select, .gg-input-box { display: inline-flex; align-items: center; gap: var(--s1); height: var(--h-ctl); min-width: 0; max-width: 100%; padding: 0 var(--s2); background: var(--panel); color: var(--text); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); } .gg-ctl[data-size="28"] .gg-select, .gg-ctl[data-size="28"] .gg-input-box { height: var(--h-ctl-sm); } .gg-select > .gg-icon, .gg-input-box > .gg-icon { color: var(--dim); } /* the select reaches over the box's 1px border (transparent, so the border still shows): its hit target is the control's full 32/28, not 30/26 (L-25; kit request wp9 K4) */ .gg-select > select { appearance: none; align-self: center; height: calc(100% + 2px); min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-label); line-height: 1; cursor: pointer; } /* ...and across the box's padding and the caret too (review r3 L2 F07: a short select, "Off", was 19 wide in a 57 box, so the caret and the padding took no click). The select pulls out over the box's padding, its own padding keeps the word where it stood and clear of the caret, and the caret sits over the select's right end without taking the pointer. The box is s1 wider than before (the caret's gap is s2 now). */ .gg-select { position: relative; } .gg-select > select { margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s7) 0 var(--s2); max-width: none; } .gg-select > .gg-icon { position: absolute; top: 0; bottom: 0; right: var(--s2); margin: auto 0; pointer-events: none; } .gg-input-box > input { width: 180px; min-width: 0; max-width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-family: var(--font); font-size: var(--fs-body); line-height: 1; } .gg-input-box > input[data-fit] { width: calc(var(--ph-ch, 20) * 1ch + 2px); } .gg-input-box > input::placeholder, .gg-textarea::placeholder { color: var(--muted); } .gg-input-box > input[type="search"]::-webkit-search-cancel-button { appearance: none; } .gg-ctl[data-mono] input { font-family: var(--font-mono); font-size: var(--fs-cell); } /* the value is a key or id (mono, Y-02); the placeholder is a prose hint and stays in the text face (review r4 L1-25) */ .gg-ctl[data-mono] input::placeholder { font-family: var(--font); } .gg-ctl-area { display: flex; flex-direction: column; align-items: stretch; width: 100%; } .gg-textarea { display: block; width: 100%; min-height: 72px; margin: 0; padding: var(--s2); background: var(--panel); color: var(--text); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); resize: vertical; } .gg-seg-fit { display: inline-flex; min-width: 0; max-width: 100%; } .gg-seg-fit > .gg-seg { min-width: 0; flex: 0 1 auto; } .gg-seg-fit[data-fit="seg"] > .gg-select, .gg-seg-fit[data-fit="select"] > .gg-seg { display: none; } .gg-seg { position: relative; display: inline-flex; align-items: stretch; height: var(--h-ctl); max-width: 100%; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); } /* items reach over the group's 1px edge (each is the control's full 32/28 target, L-25) and the edge is redrawn on top */ .gg-seg::after { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); pointer-events: none; } .gg-seg > .gg-seg-item { align-self: center; height: calc(100% + 2px); } /* no overflow clip on the group, so a focused item's outward ring (S-07) shows; the end items carry the corners */ .gg-seg > :first-child { border-top-left-radius: var(--r-ctl); border-bottom-left-radius: var(--r-ctl); } .gg-seg > :last-child { border-top-right-radius: var(--r-ctl); border-bottom-right-radius: var(--r-ctl); } .gg-ctl[data-size="28"] .gg-seg { height: var(--h-ctl-sm); } .gg-seg-item { display: inline-flex; align-items: center; height: auto; margin: 0; padding: 0 var(--s3); border: 0; border-radius: 0; background: none; color: var(--dim); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-body); line-height: var(--lh-body); font-variant-numeric: var(--nums-body); white-space: nowrap; text-decoration: none; cursor: pointer; opacity: 1; } .gg-seg-item:hover { background: none; color: var(--text); text-decoration: none; } .gg-seg-item:disabled, .gg-seg-item:disabled:hover { color: var(--muted); opacity: 1; cursor: default; } .gg-seg-item[data-on], .gg-seg-item[data-on]:hover { background: var(--panel2); color: var(--text); } .gg-seg-icon { display: inline-flex; align-items: center; padding: 0 0 0 var(--s2); color: var(--dim); } /* the label is the hit area: 28 high with its word (L-25 r2 L4 F5) */ .gg-ctl-check { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-ctl-sm); cursor: pointer; } /* a bare check with no word (a row's select box): its label is a 24 × 24 icon-only hit area round the 16px box */ .gg-check-hit { display: inline-flex; align-items: center; justify-content: center; min-width: var(--s6); min-height: var(--s6); cursor: pointer; } .gg-check, .gg-radio { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line-ctl); cursor: pointer; } .gg-check { border-radius: var(--r-ctl); } .gg-check:checked { background: var(--text); } .gg-check:checked::after { content: ""; display: block; width: 4px; height: 8px; margin: 0 auto; border: solid var(--panel); border-width: 0 2px 2px 0; transform: translateY(1px) rotate(45deg); } .gg-radio { border-radius: var(--r-disc); } .gg-radio:checked::after { content: ""; display: block; width: 6px; height: 6px; margin: var(--s1); border-radius: var(--r-disc); background: var(--text); } .gg-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2); width: 100%; margin: 0; padding: 0; border: 0; } .gg-choice-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: var(--s1) var(--s2); padding: var(--s3); background: var(--panel); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); cursor: pointer; } .gg-choice-item:has(.gg-radio:checked) { background: var(--panel2); } .gg-choice-item > .gg-hint { grid-column: 2; } .gg-switch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s2); } .gg-switch-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; } .gg-switch-track { position: relative; display: inline-block; width: 32px; height: 16px; background: var(--line-ctl); border-radius: var(--r-ctl); cursor: pointer; } .gg-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--panel); border-radius: var(--r-ctl); transition: transform var(--t-move); } .gg-switch-input:checked + .gg-switch-track { background: var(--meter); } .gg-switch-input:checked + .gg-switch-track::after { transform: translateX(16px); } .gg-switch-label { display: inline-flex; align-items: center; min-height: var(--h-ctl-sm); cursor: pointer; } .gg-switch-label > .gg-strong { font-weight: var(--w-label); } .gg-switch > .gg-hint { grid-column: 2; } .gg-switch-input:disabled ~ .gg-switch-track, .gg-switch-input:disabled ~ .gg-switch-label { cursor: default; color: var(--muted); } .gg-hint { display: block; color: var(--dim); font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-error { display: block; color: var(--bad); font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-error:empty { display: none; } .gg-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } .gg-field-label { font-weight: var(--w-body); } .gg-field-ctl { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .gg-field-ctl > .gg-ctl { flex: 1; } .gg-field-ctl .gg-select, .gg-field-ctl .gg-input-box { width: 100%; } .gg-field-ctl .gg-input-box > input, .gg-field-ctl .gg-select > select { flex: 1; width: 100%; } .gg-field[data-invalid] .gg-select, .gg-field[data-invalid] .gg-input-box, .gg-field[data-invalid] .gg-textarea { border-color: var(--bad); } .gg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; } .gg-filters-actions { display: flex; align-items: center; gap: var(--s2); margin: 0 0 0 auto; } /* a filter select is as wide as the value it shows, not its longest option ("Status", not "Open (new and triaged)"), so a full filter row keeps its actions (Export CSV) as its last item at 1440 (review F14) */ .gg-filters .gg-select > select { field-sizing: content; } /* a select in a table cell is as wide as its value too ("Nightlamp Studio" clipped to "Nightlamp Stu…" with room to spare in admin Games; review r4 L1-11) */ .gg-table-cell .gg-select > select { field-sizing: content; } /* ...and keeps that width: as shrinkable flex items the select and its box gave the table a min-content smaller than the value, so the column settled at 142 and the value still read "Nightlamp Stu…" (r5 L1-14, measured). Not shrinkable, their min-content is the value's width */ .gg-table-cell .gg-ctl > .gg-select, .gg-table-cell .gg-select > select { flex: none; } .gg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; margin: 0; } /* ---- Table: data table, record control, bar states (TB-01..TB-08, M-02..M-05) ------------------ */ .gg-table-wrap { position: relative; max-width: 100%; min-width: 0; overflow-x: clip; } .gg-table-wrap[data-scroll] { overflow-x: auto; } .gg-table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; font-size: var(--fs-cell); line-height: var(--lh-cell); font-variant-numeric: tabular-nums; } .gg-table-head { position: sticky; top: 0; z-index: 1; height: var(--th-h); padding: 0 var(--s2); background: var(--panel); text-align: left; color: var(--dim); font-weight: var(--w-label); white-space: nowrap; border: 0; border-bottom: 1px solid var(--line-firm); } .gg-table-cell { height: var(--row-h); padding: 0 var(--s2); white-space: nowrap; vertical-align: middle; text-align: left; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); } th.gg-table-cell { font-weight: var(--w-body); } .gg-table-head:first-child, .gg-table-cell:first-child { padding-left: var(--s2); } .gg-table-head[data-align="right"], .gg-table-cell[data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; } .gg-table-row { background: none; } .gg-table-row:hover { background: none; } .gg-trunc { display: block; max-width: var(--trunc-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gg-table[data-wide] .gg-trunc { max-width: min(var(--trunc-w), 14vw); } .gg-td-actions { text-align: right; white-space: nowrap; } .gg-td-actions > .gg-btn + .gg-btn { margin: 0 0 0 var(--s1); } /* R7-C: the ≤600 "Show all columns" cell and its detail row; nothing of either shows above 600 */ .gg-td-more, .gg-table-more, .gg-table-more:not([hidden]) { display: none; } .gg-td-more .gg-tip { left: auto; right: 0; transform: none; } .gg-table-foot { display: flex; gap: var(--s2); padding: var(--s2) 0 0; } .gg-table-wrap[data-empty] { overflow: visible; } /* the record control is a 28px target (L-25; kit request wp6 K6): min-height 28, content centred, inside the 36px row */ .gg-record { appearance: none; display: inline-flex; align-items: center; height: auto; min-height: var(--h-ctl-sm); min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: var(--r-ctl); color: inherit; font: inherit; line-height: inherit; text-align: inherit; text-decoration: none; cursor: pointer; opacity: 1; } .gg-record:hover { background: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; } .gg-record:has(> .gg-trunc) { display: flex; max-width: 100%; } .gg-record > .gg-trunc, .gg-record > .gg-list-text { min-width: 0; } .gg-table[data-record] .gg-table-row { cursor: pointer; } .gg-table[data-record] .gg-table-cell:first-child { position: relative; } /* rest: no bar; hover / keyboard focus: 2px line-ctl on the resting surface, no fill; open: 2px accent-ink */ .gg-table[data-record] .gg-table-row:not([data-open]):is(:hover, :focus-within) > .gg-table-cell:first-child::before, .gg-list[data-record] .gg-list-row:not([data-open]):is(:hover, :focus-within)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--mark-w); background: var(--line-ctl); } .gg-table-row[data-open] { background: var(--panel2); } .gg-table-row[data-open] > .gg-table-cell:first-child::before, .gg-list-row[data-open]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--mark-w); background: var(--mark); } /* the drawer keeps priority columns (TB-08) */ body[data-drawer="open"] .gg-table [data-priority="lo"] { display: none; } /* the page's one "UTC" (GG.utc.once) gives way while an open drawer's title says it (R6-A, L-16) */ body[data-drawer="open"][data-drawer-utc] .gg-utc-once { display: none; } .gg-drawer .gg-table [data-priority="lo"] { display: table-cell; } /* ---- Table › list row (32px), tiles ------------------------------------------------------------- */ .gg-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-list-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--row-h-list); margin: 0; padding: 0 var(--s2); border-bottom: 1px solid var(--line); } .gg-list[data-record] .gg-list-row { cursor: pointer; } .gg-list-row[data-open] { background: var(--panel2); } .gg-list-label { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gg-list-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .gg-list-value { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .gg-list-row[data-dim] { color: var(--dim); } .gg-list-row[data-current] { font-weight: var(--w-label); } /* a link list's current page (the docs page nav) is the where-you-are mark, as in the section nav and the lofi docs page: panel2 fill and the 2px accent-ink bar flush left (review r4 L1-03, R3: spec silent, lofi decides) */ .gg-list-row[data-gold="where"] { background: var(--panel2); } /* the tag and the paint are one rule: a steps list's current step gets neither */ .gg-list-row[data-gold="where"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--mark-w); background: var(--accent-ink); } .gg-list-row[data-role] { align-items: flex-start; justify-content: flex-start; padding: var(--s2); } .gg-list-row[data-role] .gg-list-label { flex: 1; flex-direction: column; align-items: flex-start; gap: var(--s1); white-space: normal; overflow: visible; } .gg-list-row[data-role] .gg-list-head { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; } .gg-list-row[data-role] .gg-list-value { margin: 0 0 0 auto; color: var(--dim); } /* the glyph sits on the title's first line and the detail lines up under the title, not under the glyph (review F11): the record title's line starts 4px into the 28px target (--s1), and the 16px glyph drops the same --s1, so glyph and title ink centre on one line (measured at 1440: both at +12); both offsets on the spacing scale (S-01) */ .gg-list[data-record] .gg-list-row[data-role] .gg-record { align-items: flex-start; padding: var(--s1) 0; } .gg-list[data-record] .gg-list-row[data-role] .gg-list-head > .gg-glyph { margin-top: var(--s1); } .gg-list-row[data-role] .gg-list-meta { padding-left: var(--s6); } /* glyph 16 + gap s2 = 24 */ .gg-list-meta { color: var(--dim); font-size: var(--fs-cell); } /* the meta gives way before the label: it shrinks twice as fast and ellipsizes itself, so a long meta no longer squeezes a row's title to one letter ("M", "Love t…" at 390; review r4 L1-06, Fixer B K3) */ .gg-list-row:not([data-role]) > .gg-list-label > .gg-list-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 2; } @media (max-width: 600px) { /* under 600 a plain row's meta takes its own line under the label (pure CSS: crossing 600 never re-renders) */ .gg-list-row:not([data-role]) > .gg-list-label:has(> .gg-list-meta) { flex-wrap: wrap; white-space: normal; row-gap: 0; } .gg-list-row:not([data-role]) > .gg-list-label > .gg-list-meta { flex-basis: 100%; white-space: normal; } /* its own line, wrapped: nothing ellipsized at ≤600 */ } .gg-list-label > a.gg-link { display: inline-flex; align-items: center; min-height: var(--h-ctl-sm); min-width: 0; } /* a row link is a 28px target (L-25) */ .gg-kv-text { min-width: 0; } .gg-list[data-variant="check"] .gg-list-row { min-height: var(--row-h-list); padding: 0; border-bottom: 0; } .gg-list[data-variant="steps"] { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); } .gg-list[data-variant="steps"] .gg-list-row { min-height: 0; padding: 0; border-bottom: 0; } .gg-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } /* three to a row (Overview's six, §6) unless that leaves an orphan: 4 and 7 counters sit on one row as in the lofi, 5 too, 8 as two rows of 4; under 1100px 5 goes 3 + 2 and 7 goes 4 + 3 (review F05) */ .gg-tiles[data-n="4"], .gg-tiles[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gg-tiles[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gg-tiles[data-n="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); } @media (max-width: 1100px) { .gg-tiles[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gg-tiles[data-n="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gg-tile { min-width: 0; margin: 0; } .gg-tile-link, .gg-tile-box { display: flex; flex-direction: column; gap: var(--s1); color: var(--text); text-decoration: none; border-radius: var(--r-ctl); } .gg-tile-link:hover { text-decoration: none; } .gg-tile-link:hover > .gg-tile-value { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dim); } .gg-tile-link:focus { outline: none; } .gg-tile-link:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } .gg-tile-label { color: var(--dim); font-weight: var(--w-label); } .gg-tile-value { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: var(--w-label); font-variant-numeric: tabular-nums lining-nums; } .gg-tile-delta { color: var(--dim); font-size: var(--fs-cell); line-height: var(--lh-cell); } /* ---- Sheet: drawer (SHT-01, SHT-03..05) --------------------------------------------------------- */ .gg-drawer { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); } /* WP0 mount (no #gg-drawer-slot yet): fixed over the right edge, columns 9–12 width, the one shadow */ .gg-drawer[data-mount="body"] { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: max(var(--drawer-min), min(var(--drawer-w), 100vw)); max-width: 100vw; border-width: 0 0 0 1px; border-radius: 0; box-shadow: var(--shadow); overflow: auto; } /* WP1 mount: a grid item in columns 9–12; sticky under the top bar */ .gg-drawer[data-mount="slot"] { position: sticky; top: var(--s4); z-index: var(--z-drawer); width: 100%; min-width: var(--drawer-min); max-height: calc(100vh - 2 * var(--s4)); overflow: auto; } .gg-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .gg-drawer-title { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } .gg-drawer-title > .gg-meta { font-size: var(--fs-cell); line-height: var(--lh-cell); margin: 0; } .gg-drawer-back { display: none; align-items: center; gap: var(--s1); height: var(--h-ctl-sm); font-size: var(--fs-cell); } .gg-drawer-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); min-width: 0; } .gg-drawer-body .gg-section { padding: 0; border: 0; background: none; } .gg-drawer-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); } .gg-drawer-foot:empty { display: none; } .gg-drawer .gg-trunc { max-width: none; overflow: visible; white-space: normal; } /* ---- Sheet: modal (SHT-02, SHT-06, T-10) -------------------------------------------------------- */ .gg-modal-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--backdrop); } .gg-modal { display: flex; flex-direction: column; width: var(--modal-w); max-width: 100%; max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: var(--shadow); } .gg-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5) 0; } .gg-modal-title { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; } .gg-modal-title > .gg-h { display: inline-flex; align-items: center; gap: var(--s2); } .gg-modal-title > .gg-meta { margin: 0; font-size: var(--fs-cell); line-height: var(--lh-cell); } .gg-modal[data-tone="danger"] .gg-modal-title > .gg-h > .gg-icon { color: var(--bad); } .gg-modal-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s5); } .gg-modal-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); } .gg-modal-foot:empty { display: none; } /* ---- Sheet: popover, menu (z 30) ---------------------------------------------------------------- */ .gg-pop { position: relative; display: inline-flex; min-width: 0; } .gg-popover { position: absolute; top: calc(100% + var(--s1)); left: 0; z-index: var(--z-popover); display: none; flex-direction: column; gap: var(--s3); min-width: 240px; max-width: min(400px, calc(100vw - 2 * var(--s4))); padding: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--shadow); } .gg-popover[data-open] { display: flex; } .gg-popover[data-align="end"] { left: auto; right: 0; } /* inside a .gg-table-wrap (which clips): fixed from the anchor's rect, set by GG.popover as --pop-top/left */ .gg-popover[data-fixed], .gg-popover[data-fixed][data-align="end"] { position: fixed; top: calc(var(--pop-top) + var(--s1)); right: auto; left: var(--pop-left); } .gg-popover-title { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); } .gg-popover-body { display: flex; flex-direction: column; gap: var(--s3); } .gg-popover-foot { display: flex; justify-content: flex-end; gap: var(--s2); } .gg-popover[role="menu"] { gap: 0; min-width: 200px; padding: var(--s1); } .gg-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--s2); width: 100%; height: var(--h-ctl); margin: 0; padding: 0 var(--s2); background: none; color: var(--text); border: 0; border-radius: var(--r-ctl); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-body); line-height: var(--lh-body); font-variant-numeric: var(--nums-body); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; opacity: 1; } .gg-menu-item:hover, .gg-menu-item:focus-visible { background: var(--panel2); color: var(--text); text-decoration: none; } .gg-menu-item:focus-visible { outline-offset: calc(-1 * var(--focus-w)); } .gg-menu-item > .gg-icon { color: var(--dim); } .gg-menu-item[data-danger] > .gg-icon { color: var(--bad); } .gg-menu-meta { margin-left: auto; padding-left: var(--s4); color: var(--dim); } .gg-menu-head { padding: var(--s1) var(--s2); color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } /* a menu's caption ("Your games"), not an item */ .gg-menu-item[aria-current] { background: var(--panel2); } /* current = panel2 fill, as the section nav and segments; body weight (Y-06) */ /* ---- Sheet: toast (SHT-07) ---------------------------------------------------------------------- */ .gg-toast { position: fixed; right: var(--s6); bottom: var(--s6); z-index: var(--z-modal); display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-ctl); max-width: calc(100vw - 2 * var(--s4)); padding: var(--s2) var(--s3); background: var(--panel); color: var(--text); border: 1px solid var(--line-firm); border-radius: var(--r-ctl); transition: opacity var(--t-fade); } .gg-toast > .gg-icon { color: var(--dim); } .gg-toast[data-tone="error"] > .gg-icon { color: var(--attention); } .gg-toast[data-leaving] { opacity: 0; } /* ---- Chart chrome (chart.js draws the SVG) ------------------------------------------------------ */ .gg-chart { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; margin: 0; } .gg-chart-stage { width: 100%; min-width: 0; } .gg-chart-svg { display: block; max-width: 100%; overflow: visible; } /* a drill-down target (data.hrefs / bucket.href): invisible until hovered or focused, then a faint wash over its slot */ .gg-chart-pin-target { fill: var(--text); fill-opacity: 0; } .gg-chart-pin-hit { cursor: pointer; } .gg-chart-pin-hit:hover .gg-chart-pin-target, .gg-chart-pin-hit:focus-visible .gg-chart-pin-target { fill-opacity: 0.08; } .gg-chart-hit > rect { fill: var(--text); fill-opacity: 0; cursor: pointer; } /* per-point reading (L3 r2 F16): a line chart's bucket band is a transparent target; the tip sits over the mark */ .gg-chart-stage { position: relative; } .gg-chart-band { fill: var(--text); fill-opacity: 0; } .gg-chart-pt:focus { outline: none; } .gg-chart-pt:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } .gg-chart-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; padding: var(--s1) var(--s2); pointer-events: none; transform: translate(-50%, calc(-100% - var(--s2))); background: var(--panel2); border: 1px solid var(--line-firm); border-radius: var(--r-ctl); color: var(--text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-variant-numeric: tabular-nums; white-space: nowrap; } .gg-chart-tip[hidden] { display: none; } .gg-chart-tip > strong { font-weight: var(--w-label); } .gg-chart-tip > span { color: var(--dim); } .gg-chart-hit:hover > rect, .gg-chart-hit:focus-visible > rect { fill-opacity: 0.06; } .gg-chart-axis { font-family: var(--font); font-size: var(--fs-caption); font-weight: var(--w-body); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; } .gg-chart-answer { margin: 0; color: var(--dim); font-size: var(--fs-body); line-height: var(--lh-body); } .gg-chart-refcap { display: block; color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } .gg-chart-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; color: var(--dim); font-size: var(--fs-caption); line-height: var(--lh-caption); } .gg-chart-key { display: inline-flex; align-items: center; gap: var(--s2); } .gg-chart-swatch { display: block; flex: none; } .gg-chart-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .gg-chart-part { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); min-height: var(--s6); font-size: var(--fs-cell); } .gg-chart-part-key { display: block; width: 10px; height: 10px; } .gg-chart-part-value { text-align: right; font-variant-numeric: tabular-nums; } .gg-chart-part-pct { min-width: var(--s8); text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; } .gg-chart[data-variant="spark"] { display: inline-flex; width: auto; vertical-align: top; } /* no baseline gap: a 34px spark keeps a 36px row */ .gg-chart[data-empty] { display: flex; justify-content: center; min-height: var(--s8); } .gg-chart-empty { margin: 0; color: var(--dim); } .gg-chart-details { margin: 0; } .gg-chart-summary { display: inline-flex; align-items: center; height: var(--h-ctl-sm); color: var(--dim); font-size: var(--fs-cell); cursor: pointer; border-radius: var(--r-ctl); } .gg-chart-summary:hover { color: var(--text); } .gg-chart-details[open] > .gg-chart-summary { margin: 0 0 var(--s2); } /* GG.fold: the same disclosure as the chart's "Show as table", for a page's own folds (docs :::details) */ .gg-fold { margin: 0; min-width: 0; } .gg-fold-summary { display: inline-flex; align-items: center; gap: var(--s1); height: var(--h-ctl-sm); color: var(--dim); font-size: var(--fs-cell); cursor: pointer; border-radius: var(--r-ctl); } .gg-fold-summary:hover { color: var(--text); } .gg-fold-summary > .gg-icon { transition: transform var(--t-move); } .gg-fold[open] > .gg-fold-summary > .gg-icon { transform: rotate(90deg); } .gg-fold[open] > .gg-fold-summary { margin: 0 0 var(--s2); } .gg-fold-body { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; } .gg-meter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; } /* a long over value + status drops under the bar, at any width (r5 L2 F01: 720 at 200% zoom too) */ .gg-meter { position: relative; display: block; flex: 1; min-width: var(--s8); height: var(--meter-h); background: var(--line); } .gg-meter-fill { display: block; height: 100%; width: calc(var(--frac, 0) * 100%); background: var(--meter); } .gg-meter-mark { position: absolute; left: 80%; top: calc(-1 * var(--s1)); bottom: calc(-1 * var(--s1)); width: 0; border-left: 1px dashed var(--dim); } .gg-meter-value { white-space: nowrap; font-size: var(--fs-cell); font-variant-numeric: tabular-nums; } /* the tail wraps between the value and "Over limit", and its shared width never exceeds the row (r5 L2 F01: the page scrolled sideways at 390 and 720 and the warning clipped to "Over li") */ .gg-meter-tail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); min-width: min(var(--meter-tail, 0px), 100%); max-width: 100%; } .gg-meter-tail > * { white-space: nowrap; } /* ---- narrow (≤600, config L bp 600) ------------------------------------------------------------- */ @media (max-width: 600px) { .gg-view { gap: var(--s5); } .gg-title-actions { width: 100%; } .gg-section { padding: var(--s4); } /* a section's actions drop under its title when both do not fit, instead of squeezing a select to "1" or "Newes" (review F09); on their own line they may still shrink, so a segment there folds to its select */ .gg-section-head { flex-wrap: wrap; row-gap: var(--s2); } .gg-section-actions { flex-wrap: wrap; } .gg-split, .gg-card[data-aside] { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .gg-tiles, .gg-tiles[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gg-seg-fit[data-narrow="select"] > .gg-seg { display: none; } .gg-seg-fit[data-narrow="select"] > .gg-select { display: inline-flex; } .gg-filters .gg-ctl[data-kind="search"], .gg-filters .gg-ctl[data-kind="text"] { width: 100%; flex-wrap: wrap; } .gg-filters .gg-ctl[data-kind="search"] > .gg-ctl-label, .gg-filters .gg-ctl[data-kind="text"] > .gg-ctl-label { flex-basis: 100%; } .gg-filters .gg-ctl[data-kind="search"] .gg-input-box, .gg-filters .gg-ctl[data-kind="text"] .gg-input-box, .gg-filters .gg-input-box > input { width: 100%; } /* the filter row's buttons wrap when they do not fit on one line (Browse's three at 320 ran 29px past the page; R11-I, r8 L2); at 390 and wider they fit, so nothing moves there */ .gg-filters-actions { margin: 0; width: 100%; flex-wrap: wrap; row-gap: var(--s2); } .gg-crumbs-list { display: none; } .gg-crumbs-back { display: inline-flex; } body[data-drawer] { overflow: hidden; } /* the full-viewport drawer holds the page still behind it, as v1.62.1 did (review r4 L3 SH-F06) */ .gg-table [data-n600="lo"] { display: none; } .gg-table .gg-td-more { display: table-cell; width: 1%; text-align: right; white-space: nowrap; } .gg-table .gg-table-more:not([hidden]) { display: table-row; } .gg-table-more > .gg-table-cell { height: auto; padding: var(--s2); white-space: normal; } .gg-table[data-actions-narrow="drawer"] .gg-td-actions { display: none; } /* the record's drawer carries them (actionsNarrow: false) */ .gg-trunc, .gg-table[data-wide] .gg-trunc { max-width: 112px; } /* 112 (was 128): the bug reports table with its When cell on one line fits 343px (r8b K4, r5 L1-09) */ /* the wide table's 14vw cap is 55px here; 128 fits When + Title + Status + select in 343px (review F10) */ /* cells wrap at word boundaries only ("Wed 28 Oct / 13:10"), never mid-token ("timeou / t"); a mono value is an id or a name, so it keeps one line and ellipsizes past 14ch, the whole value in its title (review F03); a mono link stays inline, so it keeps the inline-link exemption from the 28px target (L-25) */ .gg-table-cell:not([data-truncate]):not([data-align="right"]):not([data-line="one"]):not(.gg-td-actions) { white-space: normal; overflow-wrap: normal; } /* oneLine: a stamp keeps its one line and the 36px row (r6 L1r6-04); a row's actions stay on one line (r10 B3) */ .gg-table-cell .gg-mono:not(a) { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* the first cell is the row's name (an event key): it gets the room the row has, 24ch, before it ellipsizes ("settings_opened" cut to "settings_ope…" beside 150px of empty row; review r4 L1-17) */ .gg-table-cell:first-child .gg-mono:not(a) { max-width: 24ch; } /* a column marked whole (an event name in Browse) never ellipsizes: the value is the identifier, so it shows in full and breaks only where it would not fit (r5 L1-12) */ .gg-table-cell[data-whole] .gg-mono:not(a) { max-width: none; white-space: normal; overflow-wrap: anywhere; } /* the record control wraps at word boundaries too ("Wed 28 Oct / 13:10"), so a row's status word keeps its room; a long name stops at two lines with an ellipsis; no padding, so two 16px lines keep the 36px row (S-04) (review F03) */ .gg-table[data-record] .gg-record { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: fit-content; max-width: 160px; padding: 0; overflow: hidden; white-space: normal; overflow-wrap: normal; } /* R10-B (L1 F-01, L1r6-04): a oneLine cell whose stamp is the record control keeps that one line: no clamp, no wrap, inside K4's 112px cap (a stamp is ~90px), so the row keeps 36px and the full time shows */ .gg-table[data-record] .gg-table-cell[data-line="one"] .gg-record { display: inline-block; -webkit-line-clamp: none; max-width: 112px; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } /* row actions stay on one line, as at 1440: stacked they made a 65px row (S-04; kit request wp7 K2) */ /* the drawer is a full-height sheet with "Back to list" and no gold (SHT-05) */ .gg-drawer[data-mount] { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: 100%; min-width: 0; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; overflow: auto; } .gg-drawer-back { display: inline-flex; } .gg-chart-answer { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gg-toast { right: var(--s4); bottom: var(--s4); } } @media (max-width: 480px) { .gg-tiles, .gg-tiles[data-n] { grid-template-columns: minmax(0, 1fr); } } /* GG.avatar (review fix-r2, L3 F10): an org's logo, a user image; the initial is dim text on panel2, never gold. A span with no data-size keeps 24px (the fallback): an unset --av made width/height invalid, and the top bar's account disc collapsed to an 8x12 oval around its initial (review r4 L1-01) */ .gg-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; width: var(--av, 24px); height: var(--av, 24px); border-radius: var(--r-ctl); background: var(--panel2); color: var(--dim); font-size: var(--fs-caption); line-height: 1; font-weight: 600; vertical-align: middle; } .gg-avatar[data-size="16"] { --av: 16px; font-size: 10px; } .gg-avatar[data-size="20"] { --av: 20px; } .gg-avatar[data-size="24"] { --av: 24px; } .gg-avatar[data-size="28"] { --av: 28px; font-size: 13px; } .gg-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; } h1[data-avatar] { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .gg-avatar-label { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; } /* Player paths on World (views/explore.js, ledger/flowgraph.js): a canvas wider than the column scrolls sideways inside its section, never the page; a card is dragged (pointer) or opened (click, Enter), so it shows a grab cursor */ .gg-flow { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .gg-flow > svg { display: block; } /* a card lets an up-down swipe scroll the page; the view pans sideways itself and drags only after a long press (review U7) */ .gg-flow g.state { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* ---- Pivot Trace: Player paths v1.73.0 (ledger/pivot.js) ------------------------------------------ The section (.gg-pivot, shell prefix pta-, map ptm-, panel ptp-) and its one card layer on body (.gg-pivot-layer). Ported from the Pivot Trace mock (reports/gameglow-pivot-visual-2026-11-06/mock/{map,panel}.css): the same rules under the kit's selectors, tokens only. Gold is the pivot's alone; red (--bad) is an ending or a death, and nothing else. */ .gg-pivot.pta-page { --ptm-slab: var(--text); --ptm-flow: color-mix(in srgb, var(--text) 46%, var(--panel)); --ptm-trunk: color-mix(in srgb, var(--text) 66%, var(--panel)); --ptm-dimop: .3; --ptm-dimslab: color-mix(in srgb, var(--text) 30%, var(--panel)); --ptm-fink: color-mix(in srgb, var(--text) 35%, var(--panel)); --ptm-wisp: color-mix(in srgb, var(--text) 42%, var(--panel)); /* M18 / L3 F4: 3.47:1 over the map box (dark); a 1.5px stroke, below the 46% ribbon grey (3.90:1) */ --ptm-ongold: var(--on-accent); /* L2 F2: the name on a gold slab takes the kit's text-on-gold ink in both themes: #0B111A on the dark gold #F5C542 = 11.67:1, on the light gold #A67A00 = 4.87:1 (the page's --text #131A26 is 4.49:1 there, --bg #F6F7FA 3.63:1; both under the 4.5:1 text floor) */ box-sizing: border-box; position: relative; width: 100%; padding: 0; display: flex; flex-direction: column; gap: var(--s4); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); font-variant-numeric: tabular-nums; } /* L3 F4 / L2 F1: a mix toward white loses contrast faster than one toward the dark panel (gamma sRGB), so the light theme takes deeper greys for the same roles: wisp 54% = 3.80:1, ribbon 60% = 4.58:1, trunk 66% = 5.61:1 over the white map box; the order wisp < ribbon < trunk is kept. Dark: 42% = 3.47:1, 46% = 3.90:1, 66% = 6.58:1 over --panel. */ :root[data-theme="light"] .gg-pivot.pta-page { --ptm-wisp: color-mix(in srgb, var(--text) 54%, var(--panel)); --ptm-flow: color-mix(in srgb, var(--text) 60%, var(--panel)); } .gg-pivot *, .gg-pivot *::before, .gg-pivot *::after, .gg-pivot-layer * { box-sizing: border-box; } .gg-pivot .pt-sep::before { content: "\00B7"; margin: 0 var(--s1); color: var(--muted); } .gg-pivot .pta-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } /* the first Tab stop: hidden until it has the focus, then a button at the top left of the section */ .gg-pivot button.pta-skip { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gg-pivot button.pta-skip:focus { z-index: 30; width: auto; height: var(--h-ctl); padding: 0 var(--s3); clip: auto; overflow: visible; border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: var(--panel2); color: var(--text); font: inherit; font-weight: var(--w-label); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; } .gg-pivot .pta-total { margin-left: auto; color: var(--dim); } .gg-pivot .pta-total .num { color: var(--text); font-weight: var(--w-head); } .gg-pivot .pta-bar { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-ctl); } .gg-pivot button.pta-btn, .gg-pivot-layer button.pta-btn { display: inline-flex; align-items: center; gap: var(--s1); height: var(--h-ctl); min-height: 0; margin: 0; padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: transparent; color: var(--text); font: inherit; font-weight: var(--w-label); cursor: pointer; } .gg-pivot button.pta-btn:disabled { color: var(--muted); border-color: var(--line); cursor: default; } :is(.gg-pivot, .gg-pivot-layer) :is(.pta-btn, .pta-iconbtn, .pta-sep, .pta-arrow, .pta-kind) svg { width: var(--icon); height: var(--icon); display: block; } .gg-pivot .pta-kbd { display: inline-flex; align-items: center; height: var(--h-ctl-sm); padding: 0 var(--s2); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--dim); } /* L2 F3: the crumb band is one row of a fixed height, so the map never moves between levels; what does not fit folds whole (pivot.js renderCrumbs), a crumb never wraps or shrinks mid-word */ .gg-pivot .pta-crumbs { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s1); flex: 1 1 auto; min-width: 0; height: var(--h-ctl); overflow: hidden; white-space: nowrap; color: var(--dim); font-size: var(--fs-cell); } .gg-pivot .pta-crumb { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--s1); min-height: 0; height: auto; margin: 0; padding: var(--s1); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--dim); font: inherit; } .gg-pivot :is(.pta-sep, .pta-arrow, .pta-kind) { flex: 0 0 auto; } .gg-pivot button.pta-crumb { cursor: pointer; } .gg-pivot button.pta-crumb:hover { color: var(--text); background: var(--panel2); } .gg-pivot .pta-crumb[aria-current] { color: var(--text); font-weight: var(--w-label); } .gg-pivot :is(.pta-sep, .pta-arrow, .pta-kind) { display: inline-flex; color: var(--muted); } .gg-pivot .pta-depth { display: inline-flex; gap: var(--s1); align-items: center; } .gg-pivot .pta-lvl { display: inline-block; margin-right: var(--s2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--dim); white-space: nowrap; } /* L2 F3: the widest of the five level words (pivot.js LEVEL_WORD) reserves the width, so the bar's first row is the same width at every level and never wraps on one level only (at 390 "Level three of five" wrapped the row: +44px, the map moved) */ .gg-pivot .pta-lvl::after { content: "Level three of five"; display: block; height: 0; overflow: hidden; visibility: hidden; } .gg-pivot .pta-depth i { width: 14px; height: 4px; background: var(--line-firm); } .gg-pivot .pta-depth i.on { background: var(--text); } .gg-pivot .pta-helpwrap { position: relative; display: inline-flex; } .gg-pivot button.pta-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--h-ctl); height: var(--h-ctl); min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: transparent; color: var(--dim); cursor: pointer; } .gg-pivot .pta-help { position: absolute; right: 0; top: calc(var(--h-ctl) + var(--s2)); z-index: 6; width: 280px; max-width: calc(100vw - var(--s8)); padding: var(--s3) var(--s4); background: var(--panel2); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); font-size: var(--fs-cell); line-height: var(--lh-cell); color: var(--text); } .gg-pivot .pta-help[hidden] { display: none; } .gg-pivot .pta-help p { margin: 0 0 var(--s1); } .gg-pivot :is(.pta-btn, .pta-iconbtn, .pta-crumb):focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } .gg-pivot .pta-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--pta-panel, 400px); column-gap: var(--s6); align-items: start; } .gg-pivot .pta-mapbox { padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); min-width: 0; } .gg-pivot .pta-maphost { position: relative; min-width: 0; } .gg-pivot .pta-panelhost { min-width: 0; } .gg-pivot .ptm-defs { position: absolute; } /* the shared card: floats beside the mark; a bottom sheet under 700px and on touch */ .gg-pivot-layer .pta-cardlayer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; } .gg-pivot-layer .pta-card { position: absolute; width: 264px; padding: var(--s3) var(--s4); background: var(--panel2); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); font-family: var(--font); font-size: var(--fs-cell); line-height: var(--lh-cell); color: var(--dim); font-variant-numeric: tabular-nums; pointer-events: none; } .gg-pivot-layer .pta-sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; } .gg-pivot-layer .pta-sheet .pta-card { position: static; width: auto; max-height: 60vh; overflow: auto; border-width: 1px 0 0; border-radius: 0; pointer-events: auto; } .gg-pivot-layer .pta-sheet.pta-sheet-hover, .gg-pivot-layer .pta-sheet.pta-sheet-hover .pta-card { pointer-events: none; } /* the fixed layer has a box of its own: it must let the pointer through too */ .gg-pivot-layer .pta-sheetgo { margin-top: var(--s3); } .gg-pivot-layer .pta-card p { margin: 0; } .gg-pivot-layer .pta-card .num { color: var(--text); font-weight: var(--w-head); } .gg-pivot-layer .pt-sep::before { content: "\00B7"; margin: 0 var(--s1); color: var(--muted); } /* ---- the key: sample marks, a few words each */ .gg-pivot .ptm-key { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--dim); } .gg-pivot .ptm-ki { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; } .gg-pivot .ptm-kg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s2); } .gg-pivot .ptm-ki svg { display: block; flex: none; overflow: visible; } .gg-pivot .ptm-ki .num { color: var(--text); font-weight: var(--w-label); } .gg-pivot .ptm-key path { fill: none; } /* M19: the pass-through chip at the right end of the key row; the switch is a 32px control like Back */ .gg-pivot .ptm-chip { display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto; color: var(--dim); } .gg-pivot .ptm-chip .nm { color: var(--text); } .gg-pivot button.ptm-chipbtn { padding: 0 var(--s3); } .gg-pivot .ptm-chip:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--r-ctl); } .gg-pivot .ptm-cr, .gg-pivot-layer .ptm-cr { margin: 0; color: var(--dim); } .gg-pivot .ptm-kflow { stroke: var(--ptm-trunk); } .gg-pivot .ptm-kwisp { stroke: var(--ptm-wisp); stroke-width: 1.5px; } .gg-pivot .ptm-kline { stroke: var(--ptm-trunk); stroke-width: 2px; } .gg-pivot .ptm-kline.ptm-k2 { stroke: var(--bad); } .gg-pivot .ptm-ki .ptm-head { fill: var(--ptm-slab); } .gg-pivot .ptm-key path.ptm-khead { fill: var(--ptm-trunk); } /* ---- the map */ .gg-pivot .ptm-map { display: block; } .gg-pivot .ptm-map path { fill: none; } .gg-pivot .ptm-map text { font-family: var(--font); dominant-baseline: central; } .gg-pivot .ptm-hit { fill: transparent; } .gg-pivot .ptm-hitl { stroke: transparent; pointer-events: stroke; } .gg-pivot :is(.ptm-node, .ptm-u, .ptm-area, .ptm-pair) { cursor: pointer; outline: none; } .gg-pivot :is(.ptm-node, .ptm-area):focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 1px; } /* L3 F6: a ribbon or an area pair shows the kit's ring too, drawn in the svg: its casing (the panel-coloured bridge under it, 1px each side) turns gold, and its hit band (4px wider) becomes a faint gold halo; a wisp has no casing, so its own stroke takes the ring colour */ .gg-pivot :is(.ptm-u, .ptm-pair):focus-visible > .ptm-case { stroke: var(--focus); } .gg-pivot :is(.ptm-u, .ptm-pair):focus-visible > .ptm-hitl { stroke: var(--focus); stroke-opacity: var(--ptm-dimop); } .gg-pivot .ptm-u.ptm-wisp:focus-visible > .ptm-flow, .gg-pivot .ptm-pair.ptm-wisp:focus-visible > .ptm-pflow { stroke: var(--focus); } .gg-pivot .ptm-pair.ptm-wisp:focus-visible .ptm-phead { fill: var(--focus); } .gg-pivot :is(.ptm-top, .ptm-prev) { pointer-events: none; } /* slabs: sessions that reached the state; the proud cap at the left end is who started there; the red tail is who ended there. A sized box never has a stroke: its style is a second box inside it, so the box is the size. The outline is saved-and-quit only. */ .gg-pivot :is(.ptm-slab, .ptm-head, .ptm-aslab, .ptm-fslab) { fill: var(--ptm-slab); } .gg-pivot .ptm-e { fill: var(--bad); } .gg-pivot .ptm-eic { fill: color-mix(in srgb, var(--bad) 36%, var(--panel)); } .gg-pivot .ptm-eis { fill: var(--panel); } .gg-pivot .ptm-ec.ptm-thin { fill: color-mix(in srgb, var(--bad) 50%, var(--panel)); } .gg-pivot .ptm-es.ptm-thin { fill: color-mix(in srgb, var(--bad) 28%, var(--panel)); } .gg-pivot .ptm-ex.ptm-thin { fill: color-mix(in srgb, var(--bad) 76%, var(--panel)); } .gg-pivot .ptm-hatchbg { fill: var(--panel); } .gg-pivot .ptm-hatchink { fill: var(--bad); } /* links: a ribbon as wide as its moves; under 1% of all moves a wisp, one faint curve */ .gg-pivot .ptm-case { stroke: var(--panel); stroke-linejoin: round; } .gg-pivot .ptm-flow { stroke: var(--ptm-flow); } .gg-pivot :is(.ptm-T, .ptm-st) .ptm-flow { stroke: var(--ptm-trunk); } .gg-pivot .ptm-wisp .ptm-flow { stroke: var(--ptm-wisp); } .gg-pivot .ptm-dtick { stroke: var(--bad); } .gg-pivot .ptm-pflow { stroke: var(--ptm-trunk); stroke-linejoin: round; } .gg-pivot .ptm-phead { fill: var(--ptm-trunk); } .gg-pivot .ptm-pair.ptm-wisp .ptm-pflow { stroke: var(--ptm-wisp); } .gg-pivot .ptm-pair.ptm-wisp .ptm-phead { fill: var(--ptm-wisp); } /* M18: the wisp's own arrowhead, in its own tone */ /* names: over every layer, never dimmed (the slab dims, the name does not); a 3px halo in the colour of what is under it. Every property is repeated on the class: a clone of a name (level 4) only matches compound selectors on the element itself. */ .gg-pivot .ptm-labs, .gg-pivot .ptm-labs * { pointer-events: none; } .gg-pivot .ptm-lab { font-size: var(--fs-caption); font-weight: var(--w-head); dominant-baseline: central; font-family: var(--font); paint-order: stroke; stroke-width: 3px; stroke-linejoin: round; } .gg-pivot .ptm-lab.ptm-in { fill: var(--ptm-lab, var(--bg)); stroke: var(--ptm-halo, var(--ptm-slab)); } .gg-pivot .ptm-lab.ptm-out { fill: var(--text); font-weight: var(--w-label); stroke: var(--panel); } .gg-pivot .ptm-dim .ptm-lab.ptm-in:not(.lit):not(.pivot) { --ptm-lab: var(--text); --ptm-halo: var(--ptm-dimslab); } .gg-pivot .ptm-lab.ptm-in.pivot { --ptm-lab: var(--ptm-ongold); --ptm-halo: none; } /* on a gold slab nothing crosses the name: no halo, so the slab is the one gold mark */ .gg-pivot .ptm-aname { font-size: var(--fs-body); font-weight: var(--w-head); fill: var(--text); } .gg-pivot .ptm-region { font-size: var(--fs-cell); font-weight: var(--w-head); fill: var(--text); } .gg-pivot .ptm-site { font-size: var(--fs-caption); font-weight: var(--w-label); fill: var(--text); } .gg-pivot .ptm-back { fill: var(--panel); opacity: .86; } .gg-pivot :is(.ptm-rule, .ptm-guide) { stroke: var(--line-firm); stroke-width: 1px; } .gg-pivot .ptm-sitebox { fill: var(--panel2); opacity: .55; } /* hover and focus: the mark's own links in full ink, the rest steps back */ .gg-pivot .ptm-node.hot .ptm-hit { stroke: var(--text); stroke-width: 1px; } .gg-pivot .ptm-area.hot .ptm-hit { stroke: var(--line-ctl); stroke-width: 1px; } .gg-pivot :is(.ptm-u.on, .ptm-u.hv) .ptm-flow { stroke: var(--text); } .gg-pivot .ptm-u.out .ptm-flow { stroke: var(--flow-hop); } .gg-pivot .ptm-ahead.in { fill: var(--text); } .gg-pivot .ptm-ahead.out { fill: var(--flow-hop); } .gg-pivot :is(.ptm-pair.on, .ptm-pair.hv) .ptm-pflow { stroke: var(--text); } .gg-pivot :is(.ptm-pair.on, .ptm-pair.hv) .ptm-phead { fill: var(--text); } .gg-pivot .ptm-wisp.keep .ptm-flow { stroke: var(--ptm-flow); } .gg-pivot .ptm-hov :is(.ptm-u, .ptm-pair):not(.hv):not(.on) { opacity: .4; } .gg-pivot .ptm-hovn .ptm-node:not(.hv) .ptm-sl { opacity: .35; } /* from level 2 on, one rule: everything out of scope dims to one tone (slabs and links alike), in-scope states full ink, in-scope links their resting tone (.keep) or the state's own in two tones (.in text, .out hop), the pivot gold */ .gg-pivot .ptm-dim .ptm-u:not(.on):not(.keep):not(.hv), .gg-pivot .ptm-dim .ptm-pair:not(.on):not(.keep):not(.pivot):not(.hv) { opacity: var(--ptm-dimop); } .gg-pivot .ptm-dim .ptm-node:not(.on):not(.pivot):not(.hv) .ptm-sl, .gg-pivot .ptm-dim .ptm-area:not(.on):not(.pivot):not(.hot) .ptm-sl { opacity: var(--ptm-dimop); } /* the pivot, every copy, every level: gold fill on the reached segment and its start cap, the tail keeps its coral split */ .gg-pivot .ptm-node.pivot :is(.ptm-slab, .ptm-head), .gg-pivot .ptm-area.pivot :is(.ptm-aslab, .ptm-head), .gg-pivot .ptm-map .ptm-fslab.ptm-gold { fill: var(--accent-ink); } .gg-pivot .ptm-map .ptm-pair.pivot .ptm-pflow { stroke: var(--accent-ink); } .gg-pivot .ptm-map .ptm-pair.pivot .ptm-phead { fill: var(--accent-ink); } /* level 4 (a move's sessions): the footprint's ribbons at 35% ink over the dimmed map, its slabs full ink, the pivot move gold on top. Level 5 (one session): its path as one gold line, where it began, how it ended. */ .gg-pivot .ptm-fflow { stroke: var(--ptm-fink); } .gg-pivot .ptm-fl { --ptm-lab: var(--bg); --ptm-halo: var(--ptm-slab); } .gg-pivot .ptm-fl.pivot { --ptm-lab: var(--ptm-ongold); --ptm-halo: none; } .gg-pivot .ptm-spath { stroke: var(--text); stroke-width: 2px; stroke-linejoin: round; } .gg-pivot .ptm-sstart { fill: var(--panel); stroke: var(--text); stroke-width: 1.5px; } .gg-pivot .ptm-map .ptm-fgold, .gg-pivot .ptm-map .ptm-spath.ptm-gold { stroke: var(--accent-ink); } .gg-pivot .ptm-map .ptm-fgold + .ptm-dtick { stroke: var(--bad); } /* map cards (drawn in the card layer) */ .gg-pivot-layer .ptm-ch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s1); } .gg-pivot-layer .ptm-ch b { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); color: var(--text); } .gg-pivot-layer .ptm-ch > .nm, .gg-pivot-layer .ptm-ch > span { white-space: nowrap; } .gg-pivot-layer .ptm-cmove b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); } .gg-pivot-layer .ptm-carrow { display: inline-flex; color: var(--muted); } .gg-pivot-layer .ptm-carrow svg { width: var(--icon); height: var(--icon); display: block; } .gg-pivot-layer .ptm-cc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s4); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-firm); } .gg-pivot-layer .ptm-cc h4 { margin: 0 0 var(--s1); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-body); color: var(--dim); } .gg-pivot-layer .ptm-cc ul { margin: 0; padding: 0; list-style: none; } .gg-pivot-layer .ptm-cc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); align-items: baseline; color: var(--text); } .gg-pivot-layer .ptm-cc li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gg-pivot-layer .ptm-cm { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-firm); } /* ---- the panel (ptp-): the same box as the map's; cards are drawn in the layer */ .gg-pivot .ptp, .gg-pivot-layer .ptp-card { --ptp-flow: color-mix(in srgb, var(--text) 46%, var(--panel)); --ptp-ink: color-mix(in srgb, var(--text) 66%, var(--panel)); --ptp-drain: color-mix(in srgb, var(--bad) 55%, var(--panel)); --ptp-closed: color-mix(in srgb, var(--bad) 36%, var(--panel)); --ptp-surface: var(--panel); } .gg-pivot-layer .ptp-card { --ptp-surface: var(--panel2); } .gg-pivot .ptp { box-sizing: border-box; position: relative; width: 100%; min-width: 0; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); font-variant-numeric: tabular-nums; } .gg-pivot .ptp svg { display: block; overflow: visible; } .gg-pivot .ptp-defs { position: absolute; } .gg-pivot .ptp text { font-family: var(--font); font-size: var(--fs-caption); fill: var(--dim); } .gg-pivot .ptp .num, .gg-pivot-layer .ptp-card .num { font-variant-numeric: tabular-nums; } /* headings and figures */ .gg-pivot .ptp-ph { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); min-height: var(--h-ctl); } .gg-pivot .ptp .ptp-h { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-head); color: var(--text); min-width: 0; overflow-wrap: anywhere; } .gg-pivot .ptp .ptp-moveh { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s2); } .gg-pivot .ptp-moveh > span:not(.nm):not(.ptp-arrow) { color: var(--dim); font-weight: var(--w-label); } :is(.gg-pivot, .gg-pivot-layer) .ptp-arrow { display: inline-flex; color: var(--muted); } :is(.gg-pivot, .gg-pivot-layer) :is(.ptp-arrow, .ptp-iconbtn, .ptp-kind) svg { width: var(--icon); height: var(--icon); display: block; } .gg-pivot .ptp-parea { color: var(--dim); font-size: var(--fs-cell); } .gg-pivot .ptp-kind { display: inline-flex; align-items: center; gap: var(--s1); align-self: center; } .gg-pivot .ptp-nav { display: inline-flex; gap: var(--s1); margin-left: auto; align-self: center; } .gg-pivot .ptp button.ptp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--h-ctl); height: var(--h-ctl); min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: transparent; color: var(--text); cursor: pointer; } .gg-pivot .ptp button.ptp-iconbtn:hover:not(:disabled) { background: var(--panel2); } .gg-pivot .ptp button.ptp-iconbtn:disabled { color: var(--muted); border-color: var(--line); cursor: default; } .gg-pivot .ptp .ptp-fig { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0 0 var(--s3); color: var(--dim); } .gg-pivot .ptp-fig .num { color: var(--text); font-weight: var(--w-head); } .gg-pivot .ptp-endat { display: inline-flex; align-items: center; gap: var(--s2); color: var(--dim); font-size: var(--fs-cell); } .gg-pivot .ptp-endat .nm { color: var(--text); } .gg-pivot .ptp .ptp-h3 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); color: var(--text); } .gg-pivot .ptp .ptp-hint { margin: var(--s3) 0 0; color: var(--dim); font-size: var(--fs-cell); line-height: var(--lh-cell); } /* how a session ended: quit solid, closed tint, crash hatch, saved and quit outline */ :is(.gg-pivot, .gg-pivot-layer) .ptp-eq { fill: var(--bad); } :is(.gg-pivot, .gg-pivot-layer) .ptp-ec { fill: var(--ptp-closed); } :is(.gg-pivot, .gg-pivot-layer) :is(.ptp-es, .ptp-en) { fill: var(--ptp-surface); } :is(.gg-pivot, .gg-pivot-layer) .ptp-eo { fill: none; stroke: var(--bad); stroke-width: 1px; } :is(.gg-pivot, .gg-pivot-layer) .ptp-en + .ptp-eo { stroke: var(--line-ctl); } :is(.gg-pivot, .gg-pivot-layer) .ptp-thin { fill: var(--bad); } :is(.gg-pivot, .gg-pivot-layer) .ptp-thin.ptp-ec { fill: color-mix(in srgb, var(--bad) 62%, var(--panel)); } :is(.gg-pivot, .gg-pivot-layer) .ptp-hatchbg { fill: var(--panel); } :is(.gg-pivot, .gg-pivot-layer) .ptp-hatchink { fill: var(--bad); } :is(.gg-pivot, .gg-pivot-layer) .ptp-s { fill: var(--ptp-surface); } :is(.gg-pivot, .gg-pivot-layer) .ptp-s.ptp-thin { fill: var(--ptp-ink); } :is(.gg-pivot, .gg-pivot-layer) .ptp-so { fill: none; stroke: var(--ptp-ink); stroke-width: 1px; } :is(.gg-pivot, .gg-pivot-layer) .ptp-sw { flex: none; } .gg-pivot .ptp-endbar { margin: var(--s2) 0 0; } .gg-pivot .ptp-endbar .ptp-e { cursor: default; } .gg-pivot .ptp .ptp-endkey, .gg-pivot-layer .ptp-card .ptp-endkey { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; padding: 0; list-style: none; color: var(--dim); font-size: var(--fs-cell); line-height: var(--lh-cell); } :is(.gg-pivot, .gg-pivot-layer) .ptp-endkey li { display: inline-flex; align-items: center; gap: var(--s2); } :is(.gg-pivot, .gg-pivot-layer) .ptp-endkey .num { color: var(--text); font-weight: var(--w-head); } /* when: one square per session */ .gg-pivot .ptp-hit { fill: transparent; stroke: none; } .gg-pivot .ptp-axis { stroke: var(--line-firm); stroke-width: 1px; } .gg-pivot :is(.ptp-sq, .ptp-strip, .ptp-pick[data-go], .ptp-pivot) { cursor: pointer; } .gg-pivot :is(.ptp-sq:hover, .ptp-sq.ptp-hot) .ptp-hit { stroke: var(--text); stroke-width: 1.5px; } /* flows: came from | bar | went to */ .gg-pivot .ptp-flow { margin: var(--s1) 0 0; } .gg-pivot :is(.ptp-tube, .ptp-tubein, .ptp-drain, .ptp-move, .ptp-hitline, .ptp-cap, .ptp-capin) { fill: none; stroke-linecap: butt; } .gg-pivot .ptp-hitline { stroke: transparent; stroke-width: 11px; pointer-events: stroke; } .gg-pivot .ptp-band { fill: var(--ptp-flow); stroke: none; } .gg-pivot .ptp-cap { stroke: var(--ptp-ink); } .gg-pivot .ptp-warpink { fill: var(--ptp-flow); } .gg-pivot .ptp-endrow .ptp-band { fill: var(--ptp-drain); } .gg-pivot .ptp-endrow .ptp-cap { stroke: var(--bad); } /* died (world kind 2) is not an end: the band stays link grey and a coral tick marks the entering end, the bar for came-from (.ptp-dtick) and the cap for went-to (map M3) */ .gg-pivot .ptp-out :is(.ptp-k2, .ptp-pick.ptp-k2:hover, .ptp-pick.ptp-k2.ptp-hot) .ptp-cap { stroke: var(--bad); } .gg-pivot .ptp-startrow .ptp-band { fill: var(--panel); stroke: var(--ptp-ink); stroke-width: 1px; } .gg-pivot .ptp-tube { stroke: var(--ptp-ink); } .gg-pivot :is(.ptp-tubein, .ptp-capin) { stroke: var(--panel); pointer-events: none; } .gg-pivot .ptp-drain { stroke: var(--ptp-drain); } .gg-pivot .ptp-move { stroke: var(--accent-ink); } /* the pivot: the same gold as the map's slab (P1); at level 4 the two bars and the move are one gold shape */ .gg-pivot .ptp-pivot { fill: var(--accent-ink); } .gg-pivot .ptp text.ptp-plab { font-size: var(--fs-cell); dominant-baseline: central; fill: var(--dim); } .gg-pivot .ptp-plab .nm { fill: var(--text); font-weight: var(--w-label); } .gg-pivot .ptp text.ptp-capt { fill: var(--dim); } .gg-pivot :is(.ptp-pick:hover, .ptp-pick.ptp-hot, .ptp-pick:focus-visible) .ptp-band:not(.ptp-warp) { fill: var(--ptp-ink); } .gg-pivot :is(.ptp-pick:hover, .ptp-pick.ptp-hot, .ptp-pick:focus-visible) .ptp-cap { stroke: var(--text); } .gg-pivot .ptp-pick.ptp-endrow:hover .ptp-band { fill: color-mix(in srgb, var(--bad) 75%, var(--panel)); } .gg-pivot .ptp-pick.ptp-endrow:hover .ptp-cap { stroke: var(--bad); } .gg-pivot .ptp-pick.ptp-startrow:hover .ptp-band { fill: var(--panel2); } .gg-pivot :is(.ptp-endg:hover, .ptp-endg:focus-visible) .ptp-drain { stroke: color-mix(in srgb, var(--bad) 75%, var(--panel)); } .gg-pivot :is(.ptp-pick:hover, .ptp-pick.ptp-hot) .ptp-plab .num { fill: var(--text); } .gg-pivot .ptp-minor .ptp-cap { stroke: var(--ptp-flow); } /* level 4: one strip per session */ .gg-pivot .ptp-stripax { margin: 0; } .gg-pivot .ptp-stripbox { max-height: 320px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-ctl) transparent; } /* more rows under the edge: a soft shade at the top or bottom that the first and last row cover (no script) */ .gg-pivot .ptp-stripbox { --ptp-shade: color-mix(in srgb, var(--text) 18%, transparent); background: linear-gradient(var(--panel) 40%, transparent) top / 100% 16px no-repeat local, linear-gradient(to top, var(--panel) 40%, transparent) bottom / 100% 16px no-repeat local, linear-gradient(var(--ptp-shade), transparent) top / 100% 6px no-repeat scroll, linear-gradient(to top, var(--ptp-shade), transparent) bottom / 100% 6px no-repeat scroll; } .gg-pivot .ptp-grid { stroke: var(--line); stroke-width: 1px; } .gg-pivot .ptp-len { fill: var(--ptp-flow); } .gg-pivot .ptp-tick { fill: var(--text); } .gg-pivot :is(.ptp-strip:hover, .ptp-strip.ptp-hot, .ptp-strip:focus-visible) .ptp-len { fill: var(--ptp-ink); } .gg-pivot :is(.ptp-strip:hover, .ptp-strip.ptp-hot) .ptp-hit { fill: var(--panel2); } /* level 5: the step chart */ .gg-pivot .ptp-steps { display: flex; align-items: flex-start; margin: var(--s2) 0 0; } .gg-pivot .ptp-lanes { flex: none; } .gg-pivot .ptp-stepscroll { flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line-ctl) transparent; } .gg-pivot .ptp-stepscroll { --ptp-shade: color-mix(in srgb, var(--text) 18%, transparent); background: linear-gradient(to right, var(--panel) 40%, transparent) left / 20px 100% no-repeat local, linear-gradient(to left, var(--panel) 40%, transparent) right / 20px 100% no-repeat local, linear-gradient(to right, var(--ptp-shade), transparent) left / 8px 100% no-repeat scroll, linear-gradient(to left, var(--ptp-shade), transparent) right / 8px 100% no-repeat scroll; } .gg-pivot .ptp-stepscroll text.ptp-tk.ptp-cut { visibility: hidden; } .gg-pivot .ptp text.ptp-lane { fill: var(--text); font-weight: var(--w-label); dominant-baseline: central; cursor: default; } .gg-pivot .ptp-laneline { stroke: var(--line); stroke-width: 1px; } .gg-pivot .ptp-laneline.ptp-hot { stroke: var(--line-ctl); } .gg-pivot .ptp-lanesep { stroke: var(--line-firm); stroke-width: 1px; stroke-dasharray: 2 3; } .gg-pivot .ptp-dmax { stroke: var(--line); stroke-width: 1px; stroke-dasharray: 2 3; } .gg-pivot .ptp-seg { stroke: var(--ptp-flow); stroke-width: 1.5px; fill: none; } .gg-pivot .ptp-dtick { stroke: var(--bad); stroke-width: 2px; stroke-linecap: butt; fill: none; } .gg-pivot .ptp-seg.ptp-k1 { stroke-dasharray: 3 2; } .gg-pivot .ptp-seg.ptp-hitseg { stroke: var(--text); stroke-width: 2.5px; } .gg-pivot circle.ptp-dot { fill: var(--text); } .gg-pivot circle.ptp-dot.ptp-first { fill: var(--panel); stroke: var(--text); stroke-width: 1.5px; } .gg-pivot .ptp-notch { fill: var(--text); } .gg-pivot-layer .ptp-cnotch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line-firm); color: var(--dim); } .gg-pivot-layer .ptp-cnotch .nm { color: var(--text); font-weight: var(--w-label); } .gg-pivot .ptp-dwell { fill: var(--ptp-flow); } .gg-pivot :is(.ptp-stepcol:hover, .ptp-stepcol.ptp-hot, .ptp-stepcol:focus-visible) .ptp-hit { fill: color-mix(in srgb, var(--text) 9%, transparent); } .gg-pivot :is(.ptp-stepcol:hover, .ptp-stepcol:focus-visible) .ptp-dwell { fill: var(--text); } /* focus: the one house ring */ .gg-pivot .ptp [tabindex]:focus { outline: none; } .gg-pivot .ptp:focus { outline: none; } .gg-pivot .ptp:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: calc(-1 * var(--focus-w)); } /* the panel itself holds the focus after it was redrawn under the keyboard */ .gg-pivot .ptp [tabindex]:focus-visible, .gg-pivot .ptp button.ptp-iconbtn:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } .gg-pivot .ptp :is(.ptp-sq, .ptp-strip, .ptp-stepcol):focus-visible { outline-offset: 0; } /* panel cards (drawn by the shell's card layer) */ .gg-pivot-layer .ptp-card { font-family: var(--font); font-size: var(--fs-cell); line-height: var(--lh-cell); color: var(--dim); font-variant-numeric: tabular-nums; } .gg-pivot-layer .ptp-card .num { color: var(--text); font-weight: var(--w-head); } .gg-pivot-layer .ptp-card svg { display: block; overflow: visible; } .gg-pivot-layer .ptp-ch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); color: var(--dim); } .gg-pivot-layer .ptp-ch b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-head); color: var(--text); } .gg-pivot-layer .ptp-card p { margin: var(--s1) 0 0; } .gg-pivot-layer .ptp-ce { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); } .gg-pivot-layer .ptp-ce > span { display: inline-flex; align-items: center; gap: var(--s1); white-space: pre; } .gg-pivot-layer .ptp-ce .nm { color: var(--text); } .gg-pivot-layer .ptp-cc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line-firm); } .gg-pivot-layer .ptp-cc h4 { margin: 0 0 var(--s1); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-body); color: var(--dim); } .gg-pivot-layer .ptp-cc ul { margin: 0; padding: 0; list-style: none; } .gg-pivot-layer .ptp-cc li { display: flex; justify-content: space-between; gap: var(--s2); } .gg-pivot-layer .ptp-cc li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .gg-pivot-layer .ptp-cm { padding: var(--s2) 0 0; border-top: 1px solid var(--line-firm); } .gg-pivot-layer .ptp-card p.ptp-cm { margin-top: var(--s2); } /* ---- narrow sections (pivot.js sets pta-narrow when the map's smallest layout and a 300px panel do not fit side by side) and narrow windows: the panel goes under the map; the map keeps its 1440 layout and scrolls sideways in its own box */ .gg-pivot.pta-narrow .pta-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); } .gg-pivot.pta-narrow .pta-mapbox { overflow-x: auto; } @media (max-width: 1099px) { .gg-pivot .pta-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); } .gg-pivot .pta-mapbox { overflow-x: auto; } } @media (max-width: 699px) { .gg-pivot.pta-page { gap: var(--s3); } .gg-pivot .pta-head { gap: var(--s2) var(--s3); } .gg-pivot .pta-total { margin-left: 0; } .gg-pivot .pta-bar { flex-wrap: wrap; } .gg-pivot .pta-kbd { display: none; } .gg-pivot .pta-crumbs { order: 5; flex-basis: 100%; } .gg-pivot .pta-mapbox { padding: var(--s3); } } /* L2 F3: under 480 the bar's first row (Back, the level word + pips, help: 328px) is wider than the bar (324 at 390), so the help button wrapped onto a row of its own. The level word keeps its text for readers but takes no room; the five pips stay. */ @media (max-width: 479px) { .gg-pivot .pta-lvl { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); } .gg-pivot .ptm-key { padding: var(--s2) var(--s3); gap: var(--s2) var(--s4); } }