/* Makado components: Spectrum 2 shapes, spacing and shadows, with Makado's type (Outfit and Figtree) and colors from the logo. Every value comes from tokens.css; nothing here redeclares a token. */

body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; background: var(--background-layer-1); color: var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.gv-btn, .gv-ab, .gv-seg-item, .gv-tab, .gv-nav-item, .gv-row, .gv-tabbar-item, .gv-card, .gv-tag { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

/* preview helpers */
.gv-pv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-300); padding: var(--spacing-400); box-sizing: border-box; }
.gv-pv * { box-sizing: border-box; }
.gv-pv-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-200); }
.gv-pv-start { align-items: flex-start; }

/* focus: Spectrum's 2px outline, 2px offset, on every control */
.gv-btn:focus-visible, .gv-ab:focus-visible, .gv-seg-item:focus-visible, .gv-tab:focus-visible, .gv-nav-item:focus-visible, .gv-row:focus-visible, .gv-tabbar-item:focus-visible, .gv-card:focus-visible, .gv-link:focus-visible, .gv-tag:focus-visible {
  outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap);
}
.gv-field-control:focus-within { border-color: var(--gray-900); }
.gv-field-control:has(input:focus-visible) { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* Icon */
.gv-icon { display: inline-block; flex: none; vertical-align: middle; fill: currentColor; }

/* Type helpers that mirror the token styles */
.gv-heading { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--heading); }
.gv-title { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--heading); }
.gv-detail { font-weight: 500; color: var(--detail); }

/* Link */
.gv-link { color: var(--accent-content); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: var(--radius-sm); }
.gv-link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.gv-link-quiet { text-decoration: none; }
.gv-link-quiet:hover { text-decoration: underline; }
.gv-link-standalone { display: inline-flex; align-items: center; gap: var(--spacing-75); font-size: 14px; line-height: 18px; }

/* Button: pills, label in the display face */
.gv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); height: var(--component-height-100); min-width: 72px; padding: 0 14px; border: var(--border-width-200) solid transparent; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--motion-duration-100) ease, border-color var(--motion-duration-100) ease, color var(--motion-duration-100) ease, box-shadow var(--motion-duration-100) ease, transform var(--motion-duration-100) var(--motion-ease-out); }
.gv-btn-s { height: var(--component-height-75); min-width: 54px; padding: 0 10px; font-size: 12px; line-height: 16px; gap: var(--spacing-85); }
.gv-btn-l { height: var(--component-height-200); min-width: 90px; padding: 0 18px; font-size: 16px; line-height: 20px; }
.gv-btn-xl { height: var(--component-height-300); min-width: 108px; padding: 0 22px; font-size: 18px; line-height: 22px; }
.gv-btn-icononly { min-width: 0; aspect-ratio: 1 / 1; padding: 0; }
.gv-btn-accent { background: var(--accent); color: var(--on-accent); }
.gv-btn-accent:hover { background: var(--accent-hover); }
/* Primary (black) is of a piece with the glass: an inner rim like the glass edge, a quiet shadow, and on hover a small lift with a slightly lighter fill instead of a flat color swap */
.gv-btn-primary { background: var(--neutral); color: var(--on-neutral); box-shadow: var(--cta-rim), var(--cta-shadow); }
.gv-btn-primary:hover { box-shadow: var(--cta-rim), var(--cta-shadow-hover); transform: translateY(-1px); }
.gv-btn-primary:active { box-shadow: var(--cta-rim), var(--cta-shadow-pressed); }
.gv-btn-secondary { background: var(--button-fill); color: var(--heading); }
.gv-btn-secondary:hover { background: var(--button-fill-hover); color: var(--heading); }
.gv-btn-negative { background: var(--negative); color: var(--on-accent); }
.gv-btn-negative:hover { background: var(--negative-hover); }
.gv-btn-outline { background: transparent; }
.gv-btn-outline.gv-btn-primary { border-color: var(--gray-800); color: var(--body); }
.gv-btn-outline.gv-btn-primary:hover { background: var(--gray-100); border-color: var(--gray-900); color: var(--heading); }
.gv-btn-outline.gv-btn-secondary { border-color: var(--gray-300); color: var(--body); }
.gv-btn-outline.gv-btn-secondary:hover { background: var(--gray-100); border-color: var(--gray-400); }
.gv-btn-outline.gv-btn-negative { border-color: var(--negative-content); background: var(--background-elevated); color: var(--negative-content); }
.gv-btn-outline.gv-btn-negative:hover { background: var(--negative-subtle); border-color: var(--negative-content); color: var(--negative-content); }
.gv-btn:disabled, .gv-btn[aria-disabled="true"] { background: var(--gray-100); border-color: transparent; color: var(--gray-600); cursor: not-allowed; box-shadow: none; transform: none; }
/* Every button presses in a little */
.gv-btn:active:not(:disabled):not([aria-disabled="true"]), .gv-ab:active { transform: scale(var(--motion-press-scale)); }
.gv-btn-outline.gv-btn-primary, .gv-btn-outline.gv-btn-primary:hover, .gv-btn-outline.gv-btn-primary:active { box-shadow: none; }
.gv-btn-outline.gv-btn-primary:hover { transform: none; }
.gv-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); }

/* ActionButton: 8px corners, gray-100 fill or quiet */
.gv-ab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); flex: none; height: var(--component-height-100); min-width: var(--component-height-100); padding: 0 12px; border: 0; border-radius: var(--radius-default); background: var(--neutral-subtle); color: var(--body); font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-duration-100) ease, color var(--motion-duration-100) ease, transform var(--motion-duration-100) var(--motion-ease-out); }
.gv-ab:hover { background: var(--neutral-subtle-hover); color: var(--heading); }
.gv-ab-quiet { background: transparent; }
.gv-ab-quiet:hover { background: var(--neutral-subtle); }
.gv-ab-selected, .gv-ab-selected:hover { background: var(--neutral); color: var(--on-neutral); }
/* Anything that deletes or removes is red */
.gv-ab-negative { color: var(--negative-content); }
.gv-ab-negative:hover { background: var(--negative-subtle); color: var(--negative-content); }
.gv-ab-icononly { padding: 0; }
.gv-ab-s { height: var(--component-height-75); min-width: var(--component-height-75); padding: 0 8px; border-radius: 7px; font-size: 12px; }
.gv-ab-l { height: var(--component-height-200); min-width: var(--component-height-200); padding: 0 14px; border-radius: 9px; font-size: 16px; }
.gv-ab-xl { height: var(--component-height-300); min-width: var(--component-height-300); padding: 0 16px; border-radius: 10px; font-size: 18px; }
.gv-ab-icononly.gv-ab-s, .gv-ab-icononly.gv-ab-l, .gv-ab-icononly.gv-ab-xl { padding: 0; }
.gv-ab-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--negative); color: var(--on-accent); font-size: 11px; line-height: 16px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--background-base); }
.gv-ab-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 5px; right: 5px; }

/* SegmentedControl */
/* Only as wide as its choices, even inside a column that stretches its children (align-self), and never wider than the space. */
.gv-seg { display: inline-flex; align-self: flex-start; justify-self: start; max-width: 100%; gap: 2px; padding: 3px; border-radius: var(--radius-default); background: var(--neutral-subtle); }
.gv-seg-item { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); height: calc(var(--component-height-100) - 6px); padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.gv-seg-item:hover { color: var(--heading); }
.gv-seg-item[aria-pressed="true"] { background: var(--selected-fill); color: var(--heading); box-shadow: var(--selected-shadow); font-weight: 700; }
/* The raised thumb slides between choices (Tabs and SegmentedControl). Until it is measured, the chosen item draws its own thumb. */
.gv-seg, .gv-tabs { position: relative; }
.gv-thumb { position: absolute; top: 0; left: 0; z-index: 0; background: var(--selected-fill); box-shadow: var(--selected-shadow); pointer-events: none; }
.gv-thumb-anim { transition: transform var(--motion-duration-200) var(--motion-ease-in-out), width var(--motion-duration-200) var(--motion-ease-in-out), height var(--motion-duration-200) var(--motion-ease-in-out); }
.gv-seg .gv-thumb { border-radius: var(--radius-sm); }
.gv-tabs .gv-thumb { border-radius: var(--radius-default); }
.gv-thumbed > .gv-seg-item, .gv-thumbed > .gv-tab { position: relative; z-index: 1; transition: color var(--motion-duration-200) ease; }
.gv-thumbed > .gv-seg-item[aria-pressed="true"], .gv-thumbed > .gv-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.gv-seg-l .gv-seg-item { height: calc(var(--component-height-200) - 6px); padding: 0 16px; font-size: 16px; }

/* Badge */
.gv-badge { display: inline-flex; align-items: center; gap: var(--spacing-75); height: var(--component-height-75); padding: 0 8px; box-sizing: border-box; border: var(--border-width-200) solid transparent; border-radius: 7px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--gray-1000); }
.gv-badge-m { height: var(--component-height-100); padding: 0 12px; border-radius: var(--radius-default); font-size: 14px; line-height: 18px; }
.gv-badge-subtle.gv-badge-neutral { background: var(--gray-100); }
.gv-badge-subtle.gv-badge-accent, .gv-badge-subtle.gv-badge-informative { background: var(--accent-subtle); }
.gv-badge-subtle.gv-badge-positive { background: var(--positive-subtle); }
.gv-badge-subtle.gv-badge-notice { background: var(--notice-subtle); }
.gv-badge-subtle.gv-badge-negative { background: var(--negative-subtle); }
.gv-badge-subtle.gv-badge-cyan { background: var(--cyan-subtle); }
.gv-badge-subtle.gv-badge-orange { background: var(--orange-subtle); }
.gv-badge-subtle.gv-badge-yellow { background: var(--yellow-subtle); }
.gv-badge-bold { color: var(--on-accent); }
.gv-badge-bold.gv-badge-neutral { background: var(--gray-700); color: var(--gray-25); }
.gv-badge-bold.gv-badge-accent, .gv-badge-bold.gv-badge-informative { background: var(--accent); }
.gv-badge-bold.gv-badge-positive { background: var(--positive); }
.gv-badge-bold.gv-badge-negative { background: var(--negative); }
.gv-badge-bold.gv-badge-notice { background: var(--notice); color: var(--on-notice); }
.gv-badge-outline { background: var(--background-base); }
.gv-badge-outline.gv-badge-neutral { border-color: var(--neutral-visual); }
.gv-badge-outline.gv-badge-accent, .gv-badge-outline.gv-badge-informative { border-color: var(--accent-visual); }
.gv-badge-outline.gv-badge-positive { border-color: var(--positive-visual); }
.gv-badge-outline.gv-badge-notice { border-color: var(--notice-visual); }
.gv-badge-outline.gv-badge-negative { border-color: var(--negative-visual); }

/* StatusLight */
.gv-sl { display: inline-flex; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-75); font-size: 14px; line-height: 18px; color: var(--body); white-space: nowrap; }
.gv-sl-s { font-size: 12px; line-height: 16px; gap: var(--spacing-85); }
.gv-sl-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--neutral-visual); }
.gv-sl-s .gv-sl-dot { width: 8px; height: 8px; }
.gv-sl-accent .gv-sl-dot, .gv-sl-informative .gv-sl-dot { background: var(--accent-visual); }
.gv-sl-positive .gv-sl-dot { background: var(--positive-visual); }
.gv-sl-notice .gv-sl-dot { background: var(--notice-visual); }
.gv-sl-negative .gv-sl-dot { background: var(--negative-visual); }

/* Tag */
.gv-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-100); }
.gv-tag { display: inline-flex; align-items: center; gap: var(--spacing-85); height: var(--component-height-75); padding: 0 10px; border: 0; border-radius: 7px; background: var(--neutral-subtle); color: var(--body); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
button.gv-tag { cursor: pointer; }
button.gv-tag:hover { background: var(--neutral-subtle-hover); }
.gv-tag[aria-pressed="true"] { background: var(--neutral); color: var(--on-neutral); }
button.gv-tag[aria-pressed="true"]:hover { background: var(--neutral-hover); }

/* Avatar */
.gv-avatar { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-800); font-family: var(--font-display); font-weight: 600; line-height: 1; }
.gv-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-avatar-square { border-radius: var(--radius-default); }
.gv-avatar-accent { background: var(--accent-subtle); color: var(--gray-1000); }
.gv-avatar-cyan { background: var(--cyan-subtle); color: var(--gray-1000); }
.gv-avatar-orange { background: var(--orange-subtle); color: var(--gray-1000); }
.gv-avatar-yellow { background: var(--yellow-subtle); color: var(--gray-1000); }
.gv-avatar-bold { background: var(--neutral); color: var(--on-neutral); }

/* Meter */
.gv-meter { display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 48px; }
.gv-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-200); font-size: 14px; line-height: 18px; color: var(--body); }
.gv-meter-value { font-variant-numeric: tabular-nums; color: var(--body); }
.gv-meter-track { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
.gv-meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--gradient-informative); }
.gv-meter-s .gv-meter-track { height: 4px; }
.gv-meter-l .gv-meter-track { height: 8px; }
.gv-meter-positive .gv-meter-fill { background: var(--gradient-positive); }
.gv-meter-notice .gv-meter-fill { background: var(--gradient-notice); }
.gv-meter-negative .gv-meter-fill { background: var(--gradient-negative); }
.gv-meter-neutral .gv-meter-fill { background: var(--gradient-neutral); }

/* Divider */
.gv-divider { border: 0; margin: 0; height: var(--border-width-100); background: var(--divider); }
.gv-divider-m { height: var(--border-width-200); }
.gv-divider-v { width: var(--border-width-100); height: auto; align-self: stretch; }

/* Card */
.gv-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); background: var(--background-elevated); color: var(--body); text-decoration: none; overflow: hidden; transition: box-shadow 130ms ease; }
.gv-card-primary { background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); }
.gv-card-secondary { background: var(--background-layer-1); box-shadow: var(--shadow-emphasized); }
.gv-card-tertiary { background: var(--background-base); box-shadow: 0 0 0 2px var(--gray-100); }
.gv-card-quiet { background: transparent; box-shadow: none; overflow: visible; }
a.gv-card, button.gv-card { cursor: pointer; border: 0; text-align: left; padding: 0; }
a.gv-card-primary:hover, button.gv-card-primary:hover { box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); }
a.gv-card-secondary:hover, button.gv-card-secondary:hover { box-shadow: 0 0 0 1px var(--divider), var(--shadow-elevated); }
a.gv-card-tertiary:hover, button.gv-card-tertiary:hover { box-shadow: 0 0 0 2px var(--gray-200); }
.gv-card-preview { position: relative; overflow: hidden; height: 140px; background: var(--gray-100); display: grid; place-items: center; color: var(--gray-500); }
.gv-card-preview > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* imageFit contain: a product shot, shown whole on the light product backdrop (never cropped), the same in both themes. */
.gv-card-preview-contain { overflow: hidden; background: var(--background-product); }
/* Pinned to the frame, so a tall or wide shot can't size the frame itself: it scales down inside it. */
.gv-card-preview-contain > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; box-sizing: border-box; padding: var(--spacing-200); }
/* No photo yet: a short, quiet strip with a small icon instead of a big gray block */
.gv-card-preview-empty { height: 72px; background: var(--background-layer-1); color: var(--gray-400); border-bottom: var(--border-width-100) solid var(--surface-edge); }
.gv-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-300); }
.gv-card-body-l { padding: var(--spacing-400); gap: var(--spacing-200); }
.gv-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-200); }
.gv-card-title { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 600; color: var(--heading); }
.gv-card-desc { margin: 0; font-size: 14px; line-height: 21px; color: var(--subdued); }
.gv-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); border-top: var(--border-width-100) solid var(--divider); }

/* InlineAlert */
.gv-alert { display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-400); border: var(--border-width-200) solid var(--neutral-visual); border-radius: var(--radius-lg); background: var(--background-base); color: var(--body); }
.gv-alert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-200); }
.gv-alert-title { margin: 0; font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--heading); }
.gv-alert-body { margin: 0; font-size: 14px; line-height: 21px; }
.gv-alert-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-100); margin-top: var(--spacing-100); }
.gv-alert-informative, .gv-alert-accent { border-color: var(--accent-visual); }
.gv-alert-positive { border-color: var(--positive-visual); }
.gv-alert-notice { border-color: var(--notice-visual); }
.gv-alert-negative { border-color: var(--negative-visual); }
.gv-alert-informative .gv-alert-icon { color: var(--accent-content); }
.gv-alert-positive .gv-alert-icon { color: var(--positive-visual); }
.gv-alert-notice .gv-alert-icon { color: var(--notice-visual); }
.gv-alert-negative .gv-alert-icon { color: var(--negative-content); }
.gv-alert-subtle { border-color: transparent; }
.gv-alert-subtle.gv-alert-neutral { background: var(--gray-100); }
.gv-alert-subtle.gv-alert-informative { background: var(--accent-subtle); }
.gv-alert-subtle.gv-alert-positive { background: var(--positive-subtle); }
.gv-alert-subtle.gv-alert-notice { background: var(--notice-subtle); }
.gv-alert-subtle.gv-alert-negative { background: var(--negative-subtle); }
.gv-alert-subtle, .gv-alert-subtle .gv-alert-title, .gv-alert-subtle .gv-alert-icon { color: var(--gray-1000); }

/* ListRow (Spectrum list view rows) */
.gv-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gv-list-divided > * + * { border-top: var(--border-width-100) solid var(--divider); }
.gv-row { display: flex; align-items: center; gap: var(--spacing-200); width: 100%; min-height: 56px; padding: var(--spacing-200) var(--spacing-100); border: 0; border-radius: var(--radius-default); background: transparent; text-align: left; text-decoration: none; color: var(--body); }
a.gv-row, button.gv-row { cursor: pointer; }
a.gv-row:hover, button.gv-row:hover { background: var(--gray-75); }
.gv-row-lead { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-default); background: var(--gray-100); color: var(--gray-800); }
.gv-row-lead-negative { background: var(--negative-subtle); color: var(--negative-content); }
.gv-row-lead-notice { background: var(--notice-subtle); color: var(--gray-1000); }
.gv-row-lead-positive { background: var(--positive-subtle); color: var(--gray-1000); }
.gv-row-lead-accent, .gv-row-lead-informative { background: var(--accent-subtle); color: var(--accent-content); }
.gv-row-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gv-row-title { font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-row-desc { font-size: 14px; line-height: 18px; color: var(--detail); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gv-row-trail { flex: none; display: flex; align-items: center; gap: var(--spacing-200); color: var(--subdued); }
/* stack: when the trailing badges don't fit beside the title, they move to their own line under it instead of squeezing the title. */
.gv-row-stack { flex-wrap: wrap; row-gap: var(--spacing-100); }
.gv-row-stack .gv-row-trail { flex-wrap: wrap; }
@media (max-width: 767px) {
  .gv-row-stack .gv-row-trail { flex: 1 1 100%; gap: var(--spacing-100); }
  .gv-row-stack.gv-row-has-lead .gv-row-trail { padding-left: calc(40px + var(--spacing-200)); }
  .gv-row-stack .gv-row-trail > .gv-icon:last-child { margin-left: auto; }
}

/* Meta */
.gv-meta { display: inline-flex; align-items: center; gap: var(--spacing-85); min-width: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--detail); font-variant-numeric: tabular-nums; }
.gv-meta > .gv-icon { color: var(--subdued); }
.gv-meta-sep { color: var(--gray-500); }
.gv-meta-s { font-size: 12px; line-height: 16px; }

/* StatTile */
.gv-stat { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
.gv-stat-visual { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
.gv-stat-visual > * { width: 100%; }
.gv-stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); }
.gv-stat-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--detail); }
/* The icon is a filled glyph in its tone's color, no tile behind it */
.gv-stat-icon { display: inline-flex; flex: none; color: var(--gray-500); }
.gv-stat-icon-accent, .gv-stat-icon-informative { color: var(--accent-visual); }
.gv-stat-icon-negative { color: var(--negative-visual); }
.gv-stat-icon-notice { color: var(--notice-visual); }
.gv-stat-icon-positive { color: var(--positive-visual); }
.gv-stat-icon-brand { color: var(--heading); }
.gv-stat-value { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gv-stat-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); font-size: 12px; line-height: 16px; color: var(--detail); }
/* compact (phones): a shorter tile with the number and its bar; the caption stays for screen readers. */
.gv-stat-compact .gv-card-body { padding: var(--spacing-200) var(--spacing-300); }
.gv-stat-compact .gv-stat { gap: var(--spacing-75); }
.gv-stat-compact .gv-stat-value { font-size: 20px; line-height: 24px; }
.gv-stat-compact .gv-stat-label { font-size: 12px; line-height: 16px; }
a.gv-stat-link { text-decoration: none; color: inherit; border-radius: var(--radius-lg); }

/* TextField and SearchField */
.gv-field { display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; }
.gv-field-label { font-size: 14px; line-height: 18px; color: var(--subdued); }
.gv-field-control { display: flex; align-items: center; gap: var(--spacing-100); height: var(--component-height-100); padding: 0 10px; border: var(--border-width-200) solid var(--control-border); border-radius: var(--radius-default); background: var(--gray-25); color: var(--detail); box-sizing: border-box; transition: border-color 130ms ease; }
.gv-field-control:hover { border-color: var(--gray-400); }
/* Search fields usually sit in a page's toolbar, so they're drawn on a solid surface and share the corners of the buttons beside them. */
.gv-field-search .gv-field-control { border-radius: var(--radius-default); padding: 0 12px; background: var(--background-elevated); }
.gv-field-l .gv-field-control { height: var(--component-height-200); }
.gv-field-control input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--body); font: inherit; font-size: 14px; }
.gv-field-l .gv-field-control input { font-size: 16px; }
.gv-field-control input::placeholder { color: var(--detail); }
.gv-field-help { font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-field-invalid .gv-field-control { border-color: var(--negative-visual); }
.gv-field-invalid .gv-field-help { color: var(--negative-content); }

/* PageHeader and SectionHeader */
.gv-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-300); }
.gv-page-header-text { display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; }
.gv-page-eyebrow { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--accent-content); }
.gv-page-title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
.gv-page-title-l { font-size: 26px; line-height: 32px; }
.gv-page-desc { margin: 0; font-size: 16px; line-height: 24px; color: var(--subdued); }
.gv-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); }
/* Centered page header: title and description centered, section tabs centered underneath */
.gv-page-header-center { flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--spacing-400); text-align: center; }
.gv-page-header-center .gv-page-header-text { align-items: center; }
.gv-page-header-center .gv-page-actions { justify-content: center; }
.gv-section { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-200); }
.gv-section-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; color: var(--heading); }
.gv-section-title-m { font-size: 22px; line-height: 26px; }
.gv-section-desc { margin: 2px 0 0; font-size: 14px; line-height: 18px; color: var(--subdued); font-weight: 500; }

/* SideNav */
.gv-nav { display: flex; flex-direction: column; gap: var(--spacing-75); margin: 0; padding: 0; list-style: none; }
.gv-nav-heading { padding: var(--spacing-400) var(--spacing-200) var(--spacing-100); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--detail); }
.gv-nav-item { display: flex; align-items: center; gap: var(--spacing-200); min-height: var(--component-height-200); padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-default); color: var(--body); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none; transition: background-color 130ms ease; }
.gv-nav-item .gv-icon { color: var(--subdued); }
.gv-nav-item:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-nav-item[aria-current="page"], .gv-nav-item[aria-current="page"]:hover { background: transparent; color: var(--heading); font-weight: 700; }
/* The current item is one raised thumb that slides between items as you go (still with reduced motion). */
.gv-nav-wrap { position: relative; }
.gv-nav-wrap > .gv-nav { position: relative; z-index: 1; }
.gv-nav-thumb { position: absolute; top: 0; left: 0; border-radius: var(--radius-default); background: var(--selected-fill); box-shadow: var(--selected-shadow); opacity: 0; pointer-events: none; }
.gv-nav-thumb[data-on] { opacity: 1; }
.gv-nav-thumb[data-ready] { transition: transform var(--motion-duration-300) var(--motion-ease-out), width var(--motion-duration-300) var(--motion-ease-out), height var(--motion-duration-300) var(--motion-ease-out), opacity var(--motion-duration-200) ease; }
@media (prefers-reduced-motion: reduce) { .gv-nav-thumb[data-ready] { transition: none; } }
.gv-nav-item[aria-current="page"] .gv-icon { color: var(--heading); }
.gv-nav-label { flex: 1; min-width: 0; }
.gv-nav-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--selected-fill); box-shadow: var(--selected-shadow); color: var(--heading); font-size: 11px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.gv-nav-count-negative { background: var(--negative-hover); color: var(--on-accent); box-shadow: none; }

/* Tabs */
/* Tabs: a glass bar with the same rounded-rectangle shape as the panels below; the current tab is the raised thumb */
/* Content, so a solid track (not glass): the quiet layer-1 surface with a hairline edge, under the raised thumb. */
.gv-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 4px; align-self: flex-start; border-radius: var(--radius-lg); background: var(--background-layer-1); box-shadow: 0 0 0 1px var(--surface-edge); }
.gv-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); flex: none; height: calc(var(--component-height-200) - 8px); min-width: 72px; padding: 0 14px; border-radius: var(--radius-default); border: 0; background: none; color: var(--subdued); font-size: 14px; line-height: 18px; cursor: pointer; }
.gv-tab:hover { color: var(--heading); }
.gv-tab[aria-selected="true"] { background: var(--selected-fill); color: var(--heading); box-shadow: var(--selected-shadow); font-weight: 700; }

/* TabBar (phone) */
.gv-tabbar { display: flex; align-items: stretch; justify-content: space-around; padding: 6px var(--spacing-100) 10px; background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: var(--border-width-100) solid var(--divider); }
.gv-tabbar-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 6px 2px 0; border: 0; border-radius: var(--radius-default); background: none; color: var(--subdued); font-size: 11px; line-height: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.gv-tabbar-pill { display: grid; place-items: center; }
.gv-tabbar-item[aria-current="page"] { color: var(--heading); font-weight: 700; }
.gv-tabbar-dot { position: absolute; top: 4px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--negative); box-shadow: 0 0 0 2px var(--background-base); }

/* EmptyState (Spectrum illustrated message) */
.gv-empty { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-100); padding: var(--spacing-500) var(--spacing-400); text-align: center; }
.gv-empty-art { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--spacing-100); border-radius: var(--radius-full); background: var(--gray-100); color: var(--subdued); }
.gv-empty-illo { display: block; width: 200px; height: auto; margin-bottom: var(--spacing-100); }
.gv-empty-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; color: var(--heading); }
.gv-empty-body { margin: 0; max-width: 360px; font-size: 14px; line-height: 21px; color: var(--subdued); }
.gv-empty .gv-btn-group { margin-top: var(--spacing-200); justify-content: center; }

/* ProjectCard */
.gv-project .gv-card-body { gap: var(--spacing-200); }
.gv-project-brand { display: flex; align-items: center; gap: var(--spacing-100); min-width: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--detail); }
.gv-project-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-project-title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 22px; font-weight: 600; color: var(--heading); }

/* ScheduleTable */
.gv-sched-wrap { overflow-x: auto; }
.gv-sched { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; color: var(--body); font-variant-numeric: tabular-nums; }
.gv-sched caption { text-align: left; padding: 0 0 var(--spacing-200); font-family: var(--font-display); font-size: 18px; line-height: 22px; font-weight: 700; color: var(--heading); }
.gv-sched th { padding: 8px 12px; text-align: left; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--subdued); white-space: nowrap; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-sched th[scope="row"] { padding: 10px 12px 10px 0; min-width: 160px; font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); border-bottom: var(--border-width-100) solid var(--divider); }
.gv-sched-rowsub { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-sched td { padding: 10px 12px; min-width: 96px; white-space: nowrap; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-sched-current td.gv-sched-on, td.gv-sched-on { font-weight: 700; color: var(--heading); }
.gv-sched-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-300); padding-top: var(--spacing-200); }
.gv-sched-none { color: var(--gray-400); }

/* Checkbox: Spectrum's 2px box with small corners; `round` is an option */
.gv-check { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-75); font-size: 14px; line-height: 18px; color: var(--body); cursor: pointer; }
.gv-check-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gv-check-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; box-sizing: border-box; border: var(--border-width-200) solid var(--gray-500); border-radius: var(--radius-sm); background: var(--gray-25); color: transparent; transition: background-color 130ms ease, border-color 130ms ease; }
.gv-check-round .gv-check-box { border-radius: var(--radius-full); }
.gv-check-l .gv-check-box { width: 20px; height: 20px; }
.gv-check:hover .gv-check-box { border-color: var(--gray-700); }
.gv-check-input:checked + .gv-check-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gv-check:hover .gv-check-input:checked + .gv-check-box { background: var(--accent-hover); border-color: var(--accent-hover); }
.gv-check-input:focus-visible + .gv-check-box { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-check-disabled { cursor: not-allowed; color: var(--gray-400); }
.gv-check-disabled .gv-check-box { border-color: var(--gray-300); }

/* TaskCard */
.gv-task { display: flex; align-items: flex-start; gap: var(--spacing-100); padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-default); background: var(--background-elevated); box-shadow: var(--shadow-emphasized); color: var(--body); }
.gv-task > .gv-check { margin-top: -3px; }
.gv-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-75); }
.gv-task-title { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); text-decoration: none; overflow-wrap: anywhere; }
a.gv-task-title:hover { text-decoration: underline; }
.gv-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); font-variant-numeric: tabular-nums; }
.gv-task-meta .gv-sl { min-height: 0; color: var(--body); }
.gv-task-late { display: inline-flex; align-items: center; gap: var(--spacing-75); color: var(--negative-content); }
.gv-task-done .gv-task-title { color: var(--detail); text-decoration: line-through; text-decoration-thickness: 1px; }
.gv-task-done .gv-task-meta { opacity: .75; }
.gv-task-brand { display: flex; align-items: center; gap: var(--spacing-100); min-width: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-task-brand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-task-brand .gv-task-amount { flex: none; margin-left: auto; }
.gv-task-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-100); margin-top: 2px; }
.gv-task-project { padding: var(--spacing-200); }
.gv-task-compact { flex-direction: column; align-items: stretch; gap: var(--spacing-75); padding: var(--spacing-100) 10px; }
.gv-task-compact .gv-task-title { font-size: 13px; line-height: 17px; }
.gv-task-row { display: flex; align-items: center; gap: var(--spacing-85); min-height: 20px; }
.gv-task-row .gv-check { min-height: 0; }
.gv-task-row .gv-sl { min-height: 0; color: var(--body); }
.gv-task-compact .gv-task-meta { gap: 2px 6px; }

/* KanbanColumn and KanbanBoard */
.gv-board { position: relative; min-width: 0; }
.gv-board-scroll { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--gv-board-col, 208px), 1fr); gap: var(--spacing-200); align-items: start; overflow-x: auto; padding: 2px 2px var(--spacing-100); margin: -2px; scroll-snap-type: x proximity; }
.gv-col { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; min-height: 160px; box-sizing: border-box; padding: var(--spacing-100); border-radius: var(--radius-default); background: var(--background-layer-1); border: var(--border-width-100) solid var(--container-edge); scroll-snap-align: start; transition: box-shadow 130ms ease; }
.gv-col-today { background: var(--accent-subtle); }
.gv-col-over { box-shadow: inset 0 0 0 var(--border-width-200) var(--accent-visual); }
.gv-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); padding: 2px 2px 2px 4px; min-height: 24px; }
.gv-col-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.gv-col-titles:has(.gv-col-mark) { flex-wrap: nowrap; align-items: flex-start; }
.gv-col-mark { margin-top: 3px; }
/* A project card with a link opens it from anywhere on the card */
.gv-task-project:has(a[href]) { cursor: pointer; transition: box-shadow var(--motion-duration-100) ease; }
/* A project card opens as a whole (Makado opens its drawer), so its title doesn't read as a separate link; the card lifts instead. */
.gv-task-project a.gv-task-title:hover { text-decoration: none; }
.gv-task-project:has(a[href]):hover { box-shadow: var(--shadow-elevated); }
@media (prefers-reduced-motion: reduce) { .gv-task-project:has(a[href]) { transition: none; } }
.gv-col-title { margin: 0; font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--heading); }
.gv-col-sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-col-today .gv-col-sub { color: var(--subdued); }
.gv-col-today .gv-col-count { background: var(--background-elevated); }
.gv-col-tag { align-self: center; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--brand-yellow); color: var(--on-brand-yellow); font-size: 12px; line-height: 16px; font-weight: 600; }
.gv-col-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--gray-100); color: var(--subdued); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.gv-col-list { display: flex; flex-direction: column; gap: var(--spacing-100); margin: 0; padding: 0; list-style: none; }
/* Fill: the board fits its container's height and each column scrolls on its own. */
.gv-board-fill { height: 100%; display: flex; flex-direction: column; }
.gv-board-fill .gv-board-scroll { flex: 1 1 0; min-height: 0; align-items: stretch; }
.gv-board-fill .gv-col { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* More below: a small solid pill that stays at the foot of a column while more cards sit below; it scrolls the column down. */
.gv-col-below { position: sticky; bottom: 0; align-self: center; display: inline-flex; align-items: center; gap: var(--spacing-50); flex: none; height: var(--component-height-75); margin-top: auto; padding: 0 var(--spacing-200) 0 var(--spacing-100); border: 0; border-radius: var(--radius-full); background: var(--background-elevated); box-shadow: var(--shadow-elevated), 0 4px 24px 22px var(--background-layer-1); color: var(--heading); font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer; }
/* The pill sits on a soft haze of the column's own color, so the cards behind it fall back (a blurred shadow, not a gradient). */
.gv-col-below:hover { background: var(--neutral-subtle); }
.gv-col-below:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-col-item { border-radius: var(--radius-default); }
.gv-col-item[draggable="true"] { cursor: grab; }
.gv-col-item[draggable="true"]:active { cursor: grabbing; }
.gv-col-item:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-col-item-dragging { opacity: .45; }
.gv-col-empty { margin: 0; padding: 14px 8px; border-radius: var(--radius-default); border: var(--border-width-100) dashed var(--gray-400); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); text-align: center; }
.gv-col-add { display: flex; align-items: center; gap: var(--spacing-85); width: 100%; min-height: var(--component-height-100); padding: 0 8px; border: 0; border-radius: var(--radius-default); background: transparent; color: var(--subdued); font: inherit; font-size: 13px; line-height: 16px; font-weight: 500; text-align: left; cursor: pointer; }
.gv-col-add:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-col-add:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-col-more { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-85); min-height: var(--component-height-100); padding: 0 var(--spacing-100); border-radius: var(--radius-default); color: var(--accent-content); font-size: 13px; line-height: 16px; font-weight: 600; text-decoration: none; }
.gv-col-more:hover { background: var(--neutral-subtle); }
.gv-col-more:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-col-input { width: 100%; height: var(--component-height-100); box-sizing: border-box; padding: 0 10px; border: var(--border-width-200) solid var(--gray-900); border-radius: var(--radius-default); background: var(--background-elevated); color: var(--body); font: inherit; font-size: 14px; outline: none; }
.gv-col-input:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* TextField multiline */
.gv-field-multiline .gv-field-control { height: auto; align-items: flex-start; padding: 8px 10px; }
.gv-field-control textarea { flex: 1; min-width: 0; min-height: 80px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--body); font: inherit; font-size: 14px; line-height: 20px; resize: vertical; }
.gv-field-l .gv-field-control textarea { font-size: 16px; line-height: 24px; }
.gv-field-control textarea::placeholder { color: var(--detail); }
.gv-field-control:has(textarea:focus-visible) { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* Picker: Spectrum's filled picker with a menu below */
.gv-picker { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-75); min-width: 0; max-width: 100%; }
.gv-picker-btn { display: inline-flex; align-items: center; gap: var(--spacing-100); max-width: 100%; height: var(--component-height-100); padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-default); background: var(--neutral-subtle); color: var(--body); font: inherit; font-size: 14px; line-height: 18px; font-weight: 500; cursor: pointer; transition: background-color 130ms ease; }
.gv-picker-btn:hover { background: var(--neutral-subtle-hover); color: var(--heading); }
.gv-picker-btn:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-picker-btn:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.gv-picker-quiet { position: relative; left: -6px; background: transparent; padding-left: 6px; }
.gv-picker-quiet:hover { background: var(--neutral-subtle); }
.gv-picker-badges { padding-left: 4px; gap: var(--spacing-75); }
.gv-picker-quiet.gv-picker-badges { left: -4px; }
.gv-picker-l { height: var(--component-height-200); font-size: 16px; }
.gv-picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-picker-ph { color: var(--detail); }
.gv-picker-chev { flex: none; color: var(--subdued); }
.gv-picker-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; margin: 0; padding: var(--spacing-75); box-sizing: border-box; list-style: none; border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); }
.gv-picker-quiet + .gv-picker-menu { left: -6px; }
/* Every menu scrolls inside itself: capped to the room on screen (320px at most), the wheel and swipes stay in it. */
.gv-picker-menu { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.gv-picker-menu-up { top: auto; bottom: calc(100% + 4px); }
.gv-picker-opt { display: flex; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-100); padding: 4px 8px; border-radius: var(--radius-default); color: var(--body); font-size: 14px; line-height: 18px; cursor: pointer; outline: none; }
.gv-picker-opt-active { background: var(--neutral-subtle); color: var(--heading); }
.gv-picker-opt:focus-visible { box-shadow: inset 0 0 0 var(--focus-indicator-thickness) var(--focus-indicator); }
.gv-picker-check { flex: none; margin-left: auto; color: var(--accent-content); }

/* PropertyList: side labels, Spectrum's form layout for the facts at the top of a record */
.gv-props { display: flex; flex-direction: column; gap: var(--spacing-75); }
.gv-prop { display: grid; grid-template-columns: var(--gv-prop-label, 160px) minmax(0, 1fr); align-items: center; gap: var(--spacing-200); min-height: var(--component-height-200); }
.gv-prop-label { display: flex; align-items: center; gap: var(--spacing-100); min-width: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--subdued); }
.gv-prop-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-prop-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); min-width: 0; font-size: 14px; line-height: 18px; color: var(--body); }
.gv-task-amount { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* WinsCard: a ring of the month's done to-dos, a cheer, and a few wins; a small burst in the logo's colors on each check-off */
.gv-wins { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-300) var(--spacing-400); min-width: 0; box-sizing: border-box; padding: var(--spacing-300) var(--spacing-400); border-radius: var(--radius-lg); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--divider), var(--shadow-emphasized); color: var(--body); }
.gv-wins-main { flex: 1 1 200px; display: flex; align-items: center; gap: var(--spacing-300); min-width: 0; }
.gv-wins-ring { position: relative; flex: none; display: grid; place-items: center; }
.gv-wins-ring svg { position: absolute; inset: 0; overflow: visible; }
.gv-wins-track { fill: none; stroke: var(--gray-200); }
.gv-wins-fill { fill: none; stroke: var(--positive-visual); stroke-linecap: round; transition: stroke-dashoffset 600ms cubic-bezier(.2, .8, .2, 1); }
.gv-wins-count { position: relative; display: flex; flex-direction: column; align-items: center; }
.gv-wins-done { display: inline-block; font-family: var(--font-display); font-size: 24px; line-height: 26px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.gv-wins-s .gv-wins-done { font-size: 20px; line-height: 22px; }
.gv-wins-of { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--detail); font-variant-numeric: tabular-nums; }
.gv-wins-text { display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; }
.gv-wins-title { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--heading); }
.gv-wins-cheer { margin: 0; font-size: 14px; line-height: 20px; color: var(--body); }
.gv-wins-list { flex: 0 1 auto; display: flex; flex-direction: column; gap: var(--spacing-100); margin: 0; padding: 0; list-style: none; }
.gv-wins-item { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 18px; color: var(--subdued); white-space: nowrap; }
.gv-wins-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--neutral-subtle); color: var(--body); }
.gv-wins-value { font-family: var(--font-display); font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.gv-wins-pop { animation: gv-wins-pop 520ms cubic-bezier(.2, .8, .2, 1); }
@keyframes gv-wins-pop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
.gv-wins-burst { position: absolute; inset: 0; pointer-events: none; }
.gv-wins-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--radius-full); opacity: 0; animation: gv-wins-spark 760ms cubic-bezier(.2, .8, .2, 1) forwards; }
.gv-wins-spark-0 { background: var(--brand-yellow); }
.gv-wins-spark-1 { background: var(--brand-mint); }
.gv-wins-spark-2 { background: var(--brand-sky); }
@keyframes gv-wins-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--gv-wins-r) * -0.85)) scale(.5); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--gv-wins-r) * -1.5)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gv-wins-fill { transition: none; }
  .gv-wins-pop { animation: none; }
  .gv-wins-burst { display: none; }
}

/* Status marks: shape plus color, for chips and lists where a dot alone would be ambiguous */
.gv-mark { flex: none; display: block; }
.gv-mark-neutral { color: var(--detail); }
.gv-mark-informative, .gv-mark-accent { color: var(--accent-visual); }
.gv-mark-notice { color: var(--notice-visual); }
.gv-mark-negative { color: var(--negative-visual); }
.gv-mark-positive { color: var(--positive-visual); }
.gv-sl-mark { gap: var(--spacing-85); }

/* MonthCalendar: Spectrum's calendar grid at month scale, with the chosen day's list beside it */
.gv-cal { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-300); min-width: 0; }
.gv-cal-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
.gv-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); min-height: var(--component-height-100); }
.gv-cal-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; color: var(--heading); }
.gv-cal-nav { display: flex; align-items: center; gap: var(--spacing-75); }
/* The grid sits in a hairline frame, so it reads as one block beside the day list. */
.gv-cal-frame { border: var(--border-width-100) solid var(--divider); border-radius: var(--radius-lg); overflow: hidden; background: transparent; overscroll-behavior-x: contain; touch-action: pan-y pinch-zoom; }
.gv-cal-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.gv-cal-table th { padding: 8px 10px; background: transparent; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--detail); text-align: left; }
.gv-cal-day { height: 144px; box-sizing: border-box; padding: 0; vertical-align: top; border-top: var(--border-width-100) solid var(--divider); border-left: var(--border-width-100) solid var(--divider); background: transparent; cursor: pointer; transition: background-color 130ms ease, box-shadow 130ms ease; }
.gv-cal-day:first-child { border-left: 0; }
/* A day holds what fits its height; the rest waits behind "2 more" at the foot. Opened, the day grows to show everything. */
.gv-cal-daybox { position: relative; height: 144px; box-sizing: border-box; padding: 6px 4px; overflow: hidden; }
.gv-cal-daybox-all { height: auto; min-height: 144px; overflow: visible; }
.gv-cal-cut { visibility: hidden; }
.gv-cal-daybox:not(.gv-cal-daybox-all) > .gv-cal-more { position: absolute; left: 4px; right: 4px; bottom: 6px; margin: 0; text-align: left; }
/* Days that are not workdays (workDays): a shade darker, so the working week stands out. Detail gray text moves up to subdued there to keep 4.5:1. */
.gv-cal-rest { background: var(--background-rest); }
.gv-cal-rest .gv-cal-chip-done { color: var(--subdued); }
.gv-cal-out { background: var(--background-layer-1); }
/* The chosen day: a soft gray fill, no outline. Today keeps its blue circle. */
.gv-cal-sel { background: var(--neutral-subtle); }
.gv-cal-over { background: var(--accent-subtle); }
.gv-cal-dayhead { display: flex; align-items: center; gap: var(--spacing-50); min-width: 0; margin: 0 0 var(--spacing-50); }
.gv-cal-date { display: inline-flex; flex: none; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.gv-cal-num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; box-sizing: border-box; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 15px; line-height: 18px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 130ms ease; }
@media (hover: hover) { .gv-cal-date:hover .gv-cal-num { background: var(--neutral-subtle); } }
.gv-cal-out .gv-cal-num { color: var(--detail); font-weight: 500; }
.gv-cal-today .gv-cal-num, .gv-cal-today .gv-cal-date:hover .gv-cal-num { background: var(--accent); color: var(--on-accent); }
.gv-cal-date:focus-visible, .gv-cal-cell:focus-visible, .gv-cal-more:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-cal-chips { display: flex; flex-direction: column; gap: var(--spacing-50); margin: 0; padding: 0; list-style: none; }
.gv-cal-chip { display: flex; align-items: flex-start; gap: var(--spacing-85); min-width: 0; min-height: 26px; padding: 5px 7px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--neutral-subtle); color: var(--body); font-size: 13px; line-height: 17px; font-weight: 500; cursor: grab; transition: background-color 130ms ease; }
.gv-cal-chip:hover { background: var(--neutral-subtle-hover); color: var(--heading); }
.gv-cal-chip:active { cursor: grabbing; }
.gv-cal-chip:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-cal-chip .gv-mark { margin-top: 2.5px; }
.gv-cal-chip-t { flex: 1; min-width: 0; font-weight: 700; color: var(--heading); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Chips take their stage's color: gray to do, blue in production, orange in review, green published; the mark and its label carry the stage too */
.gv-cal-chip-informative, .gv-cal-chip-accent { background: var(--accent-subtle); }
.gv-cal-chip-informative:hover, .gv-cal-chip-accent:hover { background: color-mix(in srgb, var(--accent-subtle) 88%, var(--accent-visual)); }
.gv-cal-chip-notice { background: var(--notice-subtle); }
.gv-cal-chip-notice:hover { background: color-mix(in srgb, var(--notice-subtle) 88%, var(--notice-visual)); }
.gv-cal-chip-positive { background: var(--positive-subtle); }
.gv-cal-chip-positive:hover { background: color-mix(in srgb, var(--positive-subtle) 88%, var(--positive-visual)); }
.gv-cal-chip-negative { background: var(--negative-subtle); }
.gv-cal-chip-late, .gv-cal-chip-late:hover { background: var(--negative-subtle); color: var(--gray-1000); }
.gv-cal-chip-done { background: transparent; color: var(--detail); }
.gv-cal-chip-dragging { opacity: .45; }
.gv-cal-chip-ghost { background: var(--background-elevated); color: var(--heading); outline: 1.5px dashed var(--accent-visual); outline-offset: -1.5px; pointer-events: none; }
.gv-cal-legend-late { display: inline-flex; align-items: center; gap: var(--spacing-85); font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-cal-legend-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--negative-subtle); box-shadow: inset 0 0 0 1px var(--negative-visual); }
.gv-cal-dot.gv-cal-dot-pub { background: var(--positive-visual); }
.gv-badge-mark { flex: none; }
.gv-cal-more { display: block; margin-top: 2px; padding: 2px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer; }
.gv-cal-more:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.gv-cal-legend .gv-sl { min-height: 0; color: var(--subdued); }
.gv-cal-agenda { flex: 1 1 var(--gv-cal-agenda, 300px); min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-200); border-radius: var(--radius-lg); background: var(--background-layer-1); border: var(--border-width-100) solid var(--container-edge); transition: box-shadow 130ms ease; }
.gv-cal-agenda-over { box-shadow: inset 0 0 0 var(--border-width-200) var(--accent-visual); }
.gv-cal-group { margin: var(--spacing-75) 4px 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); }
.gv-cal-compact { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--spacing-300); }
.gv-cal-compact > .gv-cal-main, .gv-cal-compact > .gv-cal-agenda { flex: none; }
/* Phones (pinned, the Calendar page): the list under the week runs edge to edge and down to the bottom of the screen
   (--gv-cal-agenda-bottom keeps its last card clear of the tab bar), with bigger, calmer cards: no format line. */
.gv-cal-pinned.gv-cal-compact > .gv-cal-agenda { flex: 1 0 auto; margin: 0 calc(var(--gv-cal-pin-bleed, 0px) * -1); padding: var(--spacing-200) var(--gv-cal-pin-bleed, var(--spacing-300)) calc(var(--gv-cal-agenda-bottom, 0px) + var(--spacing-400)); border-radius: 0; background: transparent; gap: var(--spacing-200); }
/* No container edge on phones: the list sits right on the page under the pinned week, so no top curve shows. */
.gv-cal-compact .gv-cal-agenda .gv-task-project { padding: var(--spacing-300); }
.gv-cal-compact .gv-cal-agenda .gv-task-body { gap: var(--spacing-100); }
.gv-cal-compact .gv-cal-agenda .gv-task-title { font-size: 16px; line-height: 22px; }
.gv-cal-compact .gv-cal-agenda .gv-task-brand, .gv-cal-compact .gv-cal-agenda .gv-task-meta { font-size: 13px; line-height: 18px; }
.gv-cal-compact .gv-cal-agenda .gv-col-list { gap: var(--spacing-200); }
.gv-cal-compact .gv-cal-group { margin: var(--spacing-200) 4px 0; font-size: 13px; line-height: 18px; }
.gv-cal-compact .gv-cal-weekday:first-of-type > .gv-cal-group { margin-top: 0; }
.gv-cal-table tr > td:first-child { border-left: 0; }
.gv-cal-compact .gv-cal-frame { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.gv-cal-compact .gv-cal-table th { padding: 0 0 6px; background: transparent; text-align: center; }
.gv-cal-compact .gv-cal-day { height: 50px; padding: 1px; border: 0; background: transparent; text-align: center; cursor: default; }
.gv-cal-compact .gv-cal-sel { box-shadow: none; }
.gv-cal-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; height: 100%; padding: 3px 0 0; border: 0; border-radius: var(--radius-default); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.gv-cal-cell .gv-cal-num { min-width: 32px; height: 32px; padding: 0; font-size: 15px; line-height: 18px; }
@media (hover: hover) { .gv-cal-cell:hover .gv-cal-num { background: var(--neutral-subtle); } }
.gv-cal-compact .gv-cal-today .gv-cal-cell .gv-cal-num { background: var(--accent); color: var(--on-accent); }
.gv-cal-compact .gv-cal-sel { background: transparent; }
.gv-cal-compact .gv-cal-sel .gv-cal-num { background: var(--neutral-subtle-hover); }
.gv-cal-compact .gv-cal-over .gv-cal-cell { background: var(--accent-subtle); }
/* Pinned: the month sticks at the top. --gv-cal-pin-top is room kept for anything fixed above it (filled with the surface, so nothing shows through);
   --gv-cal-pin-surface matches the surface it sits on; --gv-cal-pin-bleed stretches that surface out to the page edges. */
.gv-cal-pinned .gv-cal-main { position: sticky; top: 0; z-index: 2; background: var(--gv-cal-pin-surface, var(--background-elevated)); padding: var(--gv-cal-pin-top, 0px) var(--gv-cal-pin-bleed, 0px) var(--spacing-200); margin: calc(var(--gv-cal-pin-top, 0px) * -1) calc(var(--gv-cal-pin-bleed, 0px) * -1) 0; box-shadow: 0 var(--border-width-100) 0 var(--surface-edge); }
.gv-cal-pinned.gv-cal-compact .gv-cal-day { height: var(--component-height-200); }
/* Weeks: one run of weeks in a scrolling frame (height from --gv-cal-height), the weekday row stays on top. */
.gv-cal-weeks .gv-cal-frame, .gv-cal-weeks.gv-cal-compact .gv-cal-frame { max-height: var(--gv-cal-height, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Swiping the weeks settles on a week, not partway through one, and the colors stay put while it moves. */
.gv-cal-weeks .gv-cal-frame { scroll-snap-type: y proximity; scroll-padding-top: 34px; -webkit-overflow-scrolling: touch; }
.gv-cal-weeks .gv-cal-table tbody tr { scroll-snap-align: start; }
.gv-cal-weeks .gv-cal-day { transition: none; }
.gv-cal-weeks .gv-cal-table thead th { position: sticky; top: 0; z-index: 1; background: var(--gv-cal-pin-surface, var(--background-elevated)); }
.gv-cal-weeks.gv-cal-compact .gv-cal-frame { max-height: var(--gv-cal-height, calc(var(--component-height-200) * 6 + var(--spacing-400))); }
.gv-cal-agenda > .gv-seg { margin-bottom: var(--spacing-100); }
.gv-cal-weekday { display: flex; flex-direction: column; gap: var(--spacing-100); }
/* Add a project and Add a day note: icons at the top right of the day list, beside the count. */
.gv-cal-agenda .gv-col-head .gv-col-titles { flex: 1; }
.gv-cal-agenda-actions { display: inline-flex; align-items: center; gap: var(--spacing-50); flex: none; }
/* Phones, strip: the month title is a button that opens the scrolling month view and folds it back to one week. */
.gv-cal-title-btn { display: inline-flex; align-items: center; gap: var(--spacing-75); margin: 0; padding: 0; border: 0; border-radius: var(--radius-default); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.gv-cal-title-btn:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-cal-title-chev { color: var(--subdued); transition: transform var(--motion-duration-200) var(--motion-ease-out); }
.gv-cal-title-chev-up { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .gv-cal-title-chev { transition: none; } }
/* The strip: three weeks side by side that scroll under your finger and snap one week at a time (no scrollbar). */
.gv-cal-strip .gv-cal-frame.gv-cal-strip-scroll { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; border-radius: var(--radius-default); }
.gv-cal-strip-scroll::-webkit-scrollbar { display: none; }
.gv-cal-strip-scroll:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-cal-strip-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* Week list: the chosen day's heading reads stronger. */
.gv-cal-weekday-sel > .gv-cal-group { color: var(--heading); }
/* Fill: the calendar takes its container's height. The grid gets the room left over and scrolls inside; the day list matches it and scrolls on its own. */
.gv-cal-fill { height: 100%; flex-wrap: nowrap; align-items: stretch; }
.gv-cal-fill .gv-cal-main { min-height: 0; }
.gv-cal-fill .gv-cal-frame, .gv-cal-fill.gv-cal-weeks .gv-cal-frame { flex: 1 1 0; min-height: 0; max-height: none; }
.gv-cal-fill .gv-cal-agenda { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* A tall, narrow screen (a tablet in portrait): the month on top at full width and the day list under it, both filling the height. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .gv-cal-fill { flex-direction: column; }
  .gv-cal-fill > .gv-cal-main { flex: 3 1 0; }
  .gv-cal-fill > .gv-cal-agenda { flex: 2 1 0; width: 100%; }
}
.gv-cal-dots { display: flex; justify-content: center; gap: 3px; height: 5px; }
.gv-cal-dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--detail); }
.gv-cal-dot-late { background: var(--negative-visual); }
.gv-cal-dot-done { background: var(--gray-400); }

/* Illustration: objects in ink line with fills from the logo colors, recolored per theme */
.gv-illo { display: block; flex: none; max-width: 100%; height: auto; }
.gv-illo * { fill: none; }
.gv-illo .k { stroke: var(--illo-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gv-illo .t { stroke-width: 2; }
.gv-illo .kf { fill: var(--illo-ink); }
.gv-illo .p { fill: var(--illo-paper); }
.gv-illo .b { fill: var(--illo-blue); }
.gv-illo .m { fill: var(--illo-mint); }
.gv-illo .y { fill: var(--illo-sand); }
.gv-illo .bs { fill: var(--illo-blue-soft); }
.gv-illo .ms { fill: var(--illo-mint-soft); }
.gv-illo .ys { fill: var(--illo-sand-soft); }

.gv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .gv-btn, .gv-ab, .gv-thumb, .gv-thumbed > .gv-seg-item, .gv-thumbed > .gv-tab, .gv-card, .gv-field-control, .gv-check-box, .gv-col, .gv-cal-day, .gv-cal-num, .gv-cal-chip, .gv-cal-agenda { transition: none; }
}

/* Logo: the lockup, swapped by theme */
.gv-logo { display: inline-flex; align-items: center; flex: none; }
.gv-logo img { display: block; height: 100%; width: auto; }
.gv-logo .gv-logo-dark { display: none; }
[data-theme="dark"] .gv-logo .gv-logo-light { display: none; }
[data-theme="dark"] .gv-logo .gv-logo-dark { display: block; }

/* Account: avatar, name and a detail line at the foot of the side navigation */
.gv-account { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-default); }
a.gv-account:hover .gv-account-name { color: var(--accent-content); }
a.gv-account:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-account-text { display: flex; flex-direction: column; min-width: 0; }
.gv-account-name { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-account-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* MonthCalendar day notes: holiday, time off or a custom note; holidays and time off shade the day, always with a label and icon */
.gv-cal-off { background: var(--background-layer-1); }
/* Notes stack under the date, each in its own small box, and wrap. A note over a run of days is one bar through them. */
.gv-cal-notes { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0 0 var(--spacing-50); padding: 0; list-style: none; }
/* A day note in the grid: quiet italic text in the subdued gray (4.5:1 in both themes) in a small outlined box. The day list shows its icon. */
.gv-cal-note, .gv-cal-span { box-sizing: border-box; border: var(--border-width-100) solid var(--divider); border-radius: var(--radius-sm); background: var(--background-elevated); color: var(--subdued); font-size: 11px; line-height: 14px; font-weight: 500; font-style: italic; }
.gv-cal-note { min-width: 0; padding: 2px 6px; overflow-wrap: anywhere; }
.gv-cal-day:first-child { position: relative; }
.gv-cal-lanes { height: calc(var(--lanes) * 20px - 2px); margin: 0 0 var(--spacing-50); }
.gv-cal-spans { position: absolute; z-index: 0; left: 0; top: calc(6px + 28px + var(--spacing-50)); width: calc(var(--cols) * 100%); height: 0; pointer-events: none; }
.gv-cal-span { position: absolute; top: calc(var(--lane) * 20px); left: calc(var(--s) / var(--cols) * 100% + 4px); width: calc(var(--n) / var(--cols) * 100% - 8px); height: 18px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.gv-cal-span-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A bar that carries on from last week or into next week runs to the edge. */
.gv-cal-span-l { left: calc(var(--s) / var(--cols) * 100%); width: calc(var(--n) / var(--cols) * 100% - 4px); border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gv-cal-span-r { width: calc(var(--n) / var(--cols) * 100% - 4px); border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gv-cal-span-l.gv-cal-span-r { width: calc(var(--n) / var(--cols) * 100%); }
.gv-cal-notemark { display: block; width: 12px; height: 2px; border-radius: var(--radius-full); background: var(--subdued); }
.gv-cal-compact .gv-cal-off .gv-cal-cell { background: var(--background-layer-1); }
.gv-cal-compact .gv-cal-rest .gv-cal-cell { background: var(--background-rest); }
.gv-cal-daynotes { display: flex; flex-direction: column; gap: var(--spacing-75); }
.gv-cal-daynote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-200); padding: var(--spacing-75) var(--spacing-75) var(--spacing-75) var(--spacing-200); box-sizing: border-box; border: var(--border-width-100) solid var(--divider); border-radius: var(--radius-default); background: var(--background-elevated); }
.gv-cal-daynote-icon { display: inline-flex; flex: none; color: var(--subdued); }
.gv-cal-daynote-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gv-cal-daynote-label { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
.gv-cal-daynote-meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-cal-daynote-actions { display: flex; flex: none; gap: 2px; }
/* Removing a repeating note asks which: this day, this and later, or all. */
.gv-cal-daynote-remove { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--spacing-75); padding-bottom: var(--spacing-75); }
.gv-cal-daynote-remove-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.gv-cal-noteform { display: flex; flex-direction: column; gap: var(--spacing-200); padding: var(--spacing-200); border-radius: var(--radius-default); background: var(--background-elevated); box-shadow: var(--shadow-emphasized); }
/* In a sheet (phones) the form is the sheet's content, not a card of its own. */
.gv-drawer-body > .gv-cal-noteform { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.gv-cal-noteform .gv-seg { align-self: flex-start; max-width: 100%; }
.gv-cal-noteform-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-100); }

/* TagGroup sizes: S (24px) for filters, M (32px) and L (40px, phones) for picking on forms */
.gv-tags-m .gv-tag { height: var(--component-height-100); padding: 0 var(--spacing-200); gap: var(--spacing-100); border-radius: var(--radius-default); font-size: 14px; line-height: 18px; }
.gv-tags-l .gv-tag { height: var(--component-height-200); padding: 0 var(--spacing-300); gap: var(--spacing-100); border-radius: var(--radius-default); font-size: 16px; line-height: 20px; }
.gv-tags-m .gv-tag .gv-icon, .gv-tags-l .gv-tag .gv-icon { width: 16px; height: 16px; }

/* FileDrop: a dashed drop zone with a Choose files button */
.gv-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-200) var(--spacing-300); padding: var(--spacing-300); box-sizing: border-box; border: var(--border-width-200) dashed var(--field-border); border-radius: var(--radius-lg); background: var(--background-layer-1); transition: border-color 130ms ease, background-color 130ms ease; }
.gv-drop-over { border-color: var(--accent-visual); background: var(--accent-subtle); }
.gv-drop-disabled { opacity: .6; }
.gv-drop-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--neutral-subtle); color: var(--subdued); }
.gv-drop-text { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gv-drop-title { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-drop-hint { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-drop-l .gv-drop-title { font-size: 16px; line-height: 20px; }
.gv-drop-error { flex-basis: 100%; display: flex; align-items: center; gap: var(--spacing-75); color: var(--negative-content); font-size: 12px; line-height: 16px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .gv-drop { transition: none; } }

/* MonthCalendar: a project chip leads with the mark and title; the brand sits smaller underneath, lined up with the title (12px mark + 6px gap).
   The brand uses subdued so it holds 4.5:1 on the chip's fill. */
.gv-cal-chip-stack { flex-direction: column; align-items: stretch; gap: 2px; }
.gv-cal-chip-row { display: flex; align-items: flex-start; gap: var(--spacing-85); min-width: 0; }
.gv-cal-chip-meta { align-items: center; gap: 5px; }
.gv-cal-chip-meta .gv-mark { margin-top: 0; }
.gv-cal-chip-brand { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; font-weight: 400; color: color-mix(in srgb, var(--subdued), var(--detail)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-cal-chip-stack .gv-cal-chip-t { -webkit-line-clamp: 3; }
.gv-cal-chip-late .gv-cal-chip-brand { color: var(--gray-900); }
/* Deadlines (publish date, draft due date): quieter than chips, no fill, always with words. Late ones swap the icon for an alert. */
.gv-cal-deadline-item { display: flex; min-width: 0; }
.gv-cal-deadline { display: flex; align-items: flex-start; gap: var(--spacing-50); width: 100%; min-width: 0; min-height: 18px; margin: 0; padding: 1px 6px; box-sizing: border-box; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); font: inherit; font-size: 11px; line-height: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.gv-cal-deadline-move { cursor: grab; }
.gv-cal-deadline-move:active { cursor: grabbing; }
.gv-cal-deadline:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-cal-deadline:focus-visible, .gv-cal-due:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-cal-deadline .gv-icon { flex: none; margin-top: 1px; color: var(--detail); }
.gv-cal-deadline-k { flex: none; font-weight: 600; }
.gv-cal-deadline-t { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.gv-cal-deadline-late, .gv-cal-deadline-late .gv-icon, .gv-cal-deadline-late:hover { color: var(--negative-content); }
.gv-cal-deadmark { display: block; width: 5px; height: 5px; box-sizing: border-box; border: 1.5px solid var(--subdued); border-radius: 1px; transform: rotate(45deg); }
.gv-cal-deadmark-late { border-color: var(--negative-visual); }
.gv-cal-duelist { display: flex; flex-direction: column; gap: var(--spacing-75); margin: 0; padding: 0; list-style: none; }
.gv-cal-due { display: flex; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-200); padding: var(--spacing-75) var(--spacing-200); box-sizing: border-box; border: var(--border-width-100) solid var(--divider); border-radius: var(--radius-default); color: inherit; text-decoration: none; }
a.gv-cal-due:hover { background: var(--neutral-subtle); }
.gv-cal-due-icon { display: inline-flex; flex: none; color: var(--subdued); }
.gv-cal-due-late { color: var(--negative-content); font-weight: 600; }

/* BackLink: chevron and the name of where it goes, at the top of a detail page */
.gv-back { display: inline-flex; align-items: center; gap: var(--spacing-100); height: var(--component-height-100); padding: 0 var(--spacing-200) 0 var(--spacing-100); border-radius: var(--radius-default); color: var(--body); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none; transition: background-color 130ms ease; }
.gv-back:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-back:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-back-l { height: var(--component-height-200); font-size: 16px; line-height: 20px; }

/* PropertyList stacked: the label above its value, for forms on phones */
/* Stacked: each label over its control, with room between groups so a long form doesn't read as one block. */
.gv-props-stacked { gap: var(--spacing-500); }
.gv-props-stacked .gv-prop { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-200); align-items: start; min-height: 0; }

/* ProjectCard: the fee at the right of the footer */
.gv-project-amount { margin-left: auto; font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }

/* WeekProgress: one segment per shown day; past days filled, today filled as far as the day has gone */
.gv-week { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
.gv-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-200); }
.gv-week-caption { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-week-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-week-track { display: flex; gap: var(--spacing-75); }
.gv-week-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-75); }
.gv-week-seg { position: relative; display: block; height: 8px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
/* Finished days are solid: the deepest color of the bar's gradient (the accent). Only today, still filling, carries the gradient. */
.gv-week-past .gv-week-seg { background: var(--accent); }
.gv-week-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--gradient-informative); }
.gv-week-plain .gv-week-label { display: none; }
/* Time off: an open, outlined segment, so a day off reads as a gap in the week, not as work left */
.gv-week-off .gv-week-seg { background: transparent; box-shadow: inset 0 0 0 var(--border-width-100) var(--gray-400); }
.gv-week-today .gv-week-seg { box-shadow: inset 0 0 0 var(--border-width-100) var(--accent-visual); }
.gv-week-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); text-align: center; }
.gv-week-today .gv-week-label { font-weight: 700; color: var(--heading); }

/* Drawer: slides in from the right over a dimmed page */
.gv-drawer-root { position: fixed; inset: 0; z-index: 50; }
.gv-drawer-scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: gv-drawer-fade var(--motion-duration-200) ease; }
.gv-drawer { position: absolute; top: var(--spacing-200); right: var(--spacing-200); bottom: var(--spacing-200); width: min(var(--gv-drawer-w, 560px), calc(100vw - var(--spacing-200) * 2)); box-sizing: border-box; display: flex; flex-direction: column; background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); border-radius: var(--radius-xl); overflow: hidden; animation: gv-drawer-in var(--motion-duration-300) var(--motion-ease-out); }
.gv-drawer-grab { display: none; }
.gv-drawer-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-350) var(--spacing-300) var(--spacing-300) var(--spacing-400); background: transparent; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-drawer-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-drawer-eyebrow { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--detail); }
.gv-drawer-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.gv-drawer-actions { flex: none; display: flex; align-items: center; gap: var(--spacing-75); }
.gv-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-400); display: flex; flex-direction: column; gap: var(--spacing-300); }
.gv-drawer-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-400); background: transparent; border-top: var(--border-width-100) solid var(--divider); }
@keyframes gv-drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gv-drawer-out { from { transform: none; opacity: 1; } to { transform: translateX(32px); opacity: 0; } }
@keyframes gv-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gv-drawer-unfade { from { opacity: 1; } to { opacity: 0; } }
/* Closing: it slides back out the way it came, and the dimmed page clears. */
.gv-drawer-leaving { pointer-events: none; }
.gv-drawer-leaving .gv-drawer { animation: gv-drawer-out var(--motion-duration-300) var(--motion-ease-in-out) forwards; }
.gv-drawer-leaving .gv-drawer-scrim { animation: gv-drawer-unfade var(--motion-duration-300) ease forwards; }
@keyframes gv-side-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes gv-side-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes gv-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gv-sheet-out { from { transform: translateY(var(--gv-drag, 0px)); } to { transform: translateY(100%); } }
@media (max-width: 767px) {
  /* Phones: a sheet that fills the bottom and both sides, with its rounded top corners showing a little below the top of the screen. */
  /* It is as tall as its content (a short form is a short sheet), up to just below the status bar, where the body scrolls. */
  .gv-drawer { top: auto; max-height: calc(100% - env(safe-area-inset-top) - var(--spacing-300)); right: 0; bottom: 0; left: 0; width: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); animation: gv-sheet-in var(--motion-duration-400) var(--motion-ease-out); }
  .gv-drawer-leaving .gv-drawer { animation: gv-sheet-out var(--motion-duration-400) var(--motion-ease-in-out) forwards; }
  .gv-drawer-leaving .gv-drawer-scrim { animation-duration: var(--motion-duration-400); }
  /* side: right (the phone menu): full height from the right edge, rounded on its left side, sliding in and out sideways. */
  /* side: right (the phone menu) fills the whole screen, edge to edge with no rounding, on the page surface, sliding in from the right. */
  .gv-drawer.gv-drawer-side { top: 0; max-height: none; right: 0; bottom: 0; left: 0; width: auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border-radius: 0; background: var(--background-page); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; animation: gv-side-in var(--motion-duration-400) var(--motion-ease-out); }
  /* A grab bar on top of a sheet: drag the sheet down to dismiss it. */
  .gv-drawer:not(.gv-drawer-side) > .gv-drawer-grab { display: block; flex: none; width: 36px; height: 5px; margin: var(--spacing-100) auto 0; border-radius: var(--radius-full); background: var(--neutral-subtle-hover); }
  .gv-drawer:not(.gv-drawer-side) > .gv-drawer-head { padding-top: var(--spacing-100); touch-action: none; }
  .gv-drawer:not(.gv-drawer-side) > .gv-drawer-grab { touch-action: none; }
  .gv-drawer-body { overscroll-behavior: contain; }
  .gv-drawer-leaving .gv-drawer.gv-drawer-side { animation: gv-side-out var(--motion-duration-400) var(--motion-ease-in-out) forwards; }
  .gv-drawer-head { padding: var(--spacing-200) var(--spacing-200) var(--spacing-200) var(--spacing-350); }
  .gv-drawer-body { padding: var(--spacing-350); }
}
@media (prefers-reduced-motion: reduce) { .gv-drawer, .gv-drawer-scrim, .gv-drawer-leaving .gv-drawer, .gv-drawer-leaving .gv-drawer-scrim, .gv-drawer-leaving .gv-drawer.gv-drawer-side { animation: none; } }

/* Popover: a small glass card anchored to a spot on the page (a day on the calendar), in a portal on body so nothing clips it; it flips above or beside its anchor near the window edges */
.gv-popover { position: fixed; z-index: 55; box-sizing: border-box; width: min(var(--gv-popover-w, 320px), calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); }
.gv-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-100); padding: var(--spacing-200) var(--spacing-100) var(--spacing-100) var(--spacing-300); }
.gv-popover-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.gv-popover-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); }
.gv-popover-title { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.gv-popover-body { display: flex; flex-direction: column; gap: var(--spacing-200); padding: var(--spacing-100) var(--spacing-300) var(--spacing-200); }
.gv-popover-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-100); padding: var(--spacing-200) var(--spacing-300); border-top: var(--border-width-100) solid var(--divider); }
.gv-popover-foot .gv-btn-group { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) { .gv-popover { animation: gv-popover-in 140ms ease-out; } .gv-popover[data-side="top"] { animation-name: gv-popover-up; } }
@keyframes gv-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes gv-popover-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Toast: a short glass note at the bottom of the window with one action; it leaves on its own */
.gv-toast { position: fixed; z-index: 65; left: 50%; bottom: calc(var(--spacing-400) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); box-sizing: border-box; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-100) var(--spacing-100) var(--spacing-100) var(--spacing-300); border-radius: var(--radius-full); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); color: var(--heading); font-size: 14px; line-height: 20px; font-weight: 600; }
.gv-toast-icon { flex: none; display: inline-flex; color: var(--positive-visual); }
.gv-toast-text { min-width: 0; overflow-wrap: anywhere; }
.gv-toast-action { flex: none; color: var(--accent-content); font-weight: 700; text-decoration: none; border-radius: var(--radius-sm); }
.gv-toast-action:hover { text-decoration: underline; }
.gv-toast-action:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
@media (max-width: 640px) { .gv-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); border-radius: var(--radius-lg); } }
@media (prefers-reduced-motion: no-preference) { .gv-toast { animation: gv-toast-in 180ms ease-out; } }
@keyframes gv-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

/* Backdrop: quiet texture behind the page. Faint dots in gray-200 (the default); peaks (the logo's M as faint lines) in accent-subtle at low opacity. Decorative only, behind opaque cards. */
.gv-backdrop { position: relative; isolation: isolate; overflow: clip; }
.gv-backdrop-dots::before, .gv-backdrop-peaks::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--gray-200); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%3E%3Ccircle%20cx%3D'3'%20cy%3D'3'%20r%3D'1.25'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%3E%3Ccircle%20cx%3D'3'%20cy%3D'3'%20r%3D'1.25'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") repeat; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; opacity: .5; }
.gv-backdrop-peaks::after { content: ''; position: absolute; top: -40px; right: -80px; width: 560px; height: 327px; z-index: -1; pointer-events: none; opacity: .3; background-color: var(--accent-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20360%20210'%3E%3Cpolyline%20points%3D'24%2C186%20104%2C34%20184%2C150%20264%2C34%20344%2C186'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'16'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20360%20210'%3E%3Cpolyline%20points%3D'24%2C186%20104%2C34%20184%2C150%20264%2C34%20344%2C186'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'16'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
@media (max-width: 767px) {
  .gv-backdrop-peaks::after { top: -24px; right: -64px; width: 420px; height: 246px; }
}

/* Stepper: a linear flow. Markers joined by a line; done steps check off in positive green, the next step is ringed in accent. */
.gv-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gv-step { position: relative; display: flex; align-items: center; gap: var(--spacing-200); min-height: 48px; padding: var(--spacing-75) 0; }
.gv-step:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: calc(50% + 16px); height: calc(100% - 32px); width: 2px; border-radius: var(--radius-full); background: var(--gray-200); }
.gv-step-done:not(:last-child)::after { background: var(--positive-visual); }
.gv-step-marker { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: var(--radius-full); border: var(--border-width-200) solid var(--gray-300); background: var(--background-elevated); color: var(--detail); font-size: 13px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gv-step-done .gv-step-marker { border-color: var(--positive-visual); background: var(--positive-visual); color: var(--on-accent); }
.gv-step-current .gv-step-marker { border-color: var(--accent-visual); color: var(--accent-content); box-shadow: 0 0 0 4px var(--accent-subtle); }
.gv-step-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gv-step-label { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-step-next .gv-step-label { font-weight: 500; color: var(--body); }
.gv-step-state { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--detail); }
.gv-step-current .gv-step-state { color: var(--accent-content); font-weight: 600; }
.gv-stepper-l .gv-step { min-height: 56px; }
.gv-step-jump { opacity: 0; transition: opacity 130ms ease; }
.gv-step:hover .gv-step-jump, .gv-step-jump:focus-visible { opacity: 1; }
@media (hover: none) { .gv-step-jump { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gv-step-jump { transition: none; } }
.gv-stepper-l .gv-step-label { font-size: 16px; line-height: 20px; }

/* Meter with segments: colored parts side by side in one continuous bar */
.gv-meter-split { display: flex; gap: 0; }
.gv-meter-seg { flex: none; height: 100%; }
.gv-meter-seg-neutral { background: var(--gradient-neutral); }
.gv-meter-seg-informative { background: var(--gradient-informative); }
.gv-meter-seg-positive { background: var(--gradient-positive); }
.gv-meter-seg-notice { background: var(--gradient-notice); }
.gv-meter-seg-negative { background: var(--gradient-negative); }

/* SideNav collapsed: icons only, centered; the label stays for screen readers (and the tooltip), a count sits on the icon as a small badge */
.gv-nav-collapsed .gv-nav-item { position: relative; justify-content: center; padding: var(--spacing-100); }
.gv-nav-collapsed .gv-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gv-nav-collapsed .gv-nav-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.gv-account-collapsed { justify-content: center; }
/* Account card: the profile in its own container, tinted in the color theme, photo on top with a ring in the theme color */
.gv-account-card { flex-direction: column; align-items: flex-start; gap: var(--spacing-200); padding: var(--spacing-300); border-radius: var(--radius-lg); background: var(--accent-subtle); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); transition: box-shadow 130ms ease; }
.gv-account-card .gv-avatar { box-shadow: 0 0 0 2px var(--accent-subtle), 0 0 0 4px var(--accent-visual); margin: 4px; }
.gv-account-card .gv-account-detail { color: var(--accent-content); font-weight: 600; }
a.gv-account-card:hover { box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); }
a.gv-account-card:hover .gv-account-name { color: var(--heading); }
.gv-account-card .gv-account-name { font-size: 15px; line-height: 20px; }
.gv-account-card .gv-account-text { gap: 2px; max-width: 100%; }
/* Account with a menu: the card is a button; the menu opens above it in glass, like the rest of the navigation layer. */
.gv-account-wrap { position: relative; min-width: 0; }
.gv-account-btn { width: 100%; margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer; background: transparent; position: relative; }
.gv-account-btn.gv-account-card { background: var(--accent-subtle); }
.gv-account-btn:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-account-btn.gv-account-card:hover { box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); }
.gv-account-btn:hover .gv-account-name { color: var(--heading); }
.gv-account-chev { position: absolute; top: var(--spacing-300); right: var(--spacing-300); color: var(--accent-content); }
.gv-account-btn:not(.gv-account-card) .gv-account-chev { position: static; margin-left: auto; flex: none; }
.gv-account-menu { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; position: fixed; z-index: 60; box-sizing: border-box; padding: var(--spacing-100); border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); display: flex; flex-direction: column; gap: var(--spacing-100); }
.gv-account-group + .gv-account-group { padding-top: var(--spacing-100); border-top: 1px solid var(--surface-edge); }
.gv-account-group { display: flex; flex-direction: column; gap: 2px; }
.gv-account-group-label { display: flex; align-items: center; gap: 6px; padding: var(--spacing-100) var(--spacing-200) var(--spacing-75); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); }
.gv-account-opt { display: flex; align-items: center; gap: var(--spacing-200); min-height: var(--component-height-200); padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-default); color: var(--body); font-size: 14px; line-height: 18px; cursor: pointer; outline: none; }
.gv-account-opt-active { background: var(--neutral-subtle); color: var(--heading); }
/* Items take focus as you hover, so the ring only shows while the keyboard is in use (gv-account-menu-kbd). */
.gv-account-opt:focus-visible { box-shadow: none; }
.gv-account-menu-kbd .gv-account-opt-active { box-shadow: inset 0 0 0 var(--focus-indicator-thickness) var(--focus-indicator); }
.gv-account-opt[aria-checked="true"] { font-weight: 700; color: var(--heading); }
.gv-account-opt-negative, .gv-account-opt-negative.gv-account-opt-active { color: var(--negative-content); }
/* highlight: an item that stands apart (Admin), tinted with the color theme and bold, so it never reads as an ordinary choice. */
.gv-account-opt-highlight { margin: 0 var(--spacing-200); background: var(--accent-subtle); color: var(--accent-content); font-weight: 700; }
.gv-account-opt-highlight-neutral, .gv-account-opt-highlight-neutral.gv-account-opt-active { background: var(--neutral-subtle); color: var(--heading); }
.gv-account-opt-highlight.gv-account-opt-highlight-neutral .gv-account-opt-detail { color: var(--subdued); }
.gv-account-opt-highlight-neutral .gv-account-opt-detail { color: var(--subdued); }
.gv-account-opt-highlight.gv-account-opt-active { background: var(--accent-subtle); color: var(--accent-content); }
.gv-account-opt-highlight .gv-account-opt-detail { color: var(--accent-content); font-weight: 500; }
.gv-account-opt-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gv-account-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-account-opt-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); }
.gv-account-check { flex: none; color: var(--accent-content); }
@media (prefers-reduced-motion: no-preference) {
  .gv-account-menu { animation: gv-account-in var(--motion-duration-200) var(--motion-ease-out); }
  .gv-account-menu-down { animation-name: gv-account-down; }
  .gv-picker-menu { animation: gv-account-down var(--motion-duration-200) var(--motion-ease-out); }
}
@keyframes gv-account-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes gv-account-down { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ThemeToggle: a segmented row of icons, the same shape as SegmentedControl; the chosen one has the selected fill (black in light, white in dark) */
.gv-theme { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-default); background: var(--glass-track); box-shadow: var(--glass-track-edge); }
.gv-theme-vertical { flex-direction: column; }
.gv-theme-opt { flex: 1 1 0; display: inline-grid; place-items: center; min-width: 34px; height: calc(var(--component-height-100) - 6px); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); cursor: pointer; transition: background-color 130ms ease, color 130ms ease; }
.gv-theme-opt:hover { color: var(--heading); }
.gv-theme-opt[aria-checked="true"] { background: var(--selected-fill); color: var(--heading); box-shadow: var(--selected-shadow); }
.gv-theme-vertical { gap: var(--spacing-75); padding: var(--spacing-75); }
.gv-theme-vertical .gv-theme-opt { flex: none; width: 36px; height: 36px; min-width: 0; }
.gv-theme-opt:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* Project cards in narrow board columns: one thing per line so nothing is cut off. Brand (up to two lines), title, fee, then formats */
.gv-col { container-type: inline-size; }
@container (max-width: 180px) {
  .gv-task-project { padding: var(--spacing-100) 10px; }
  .gv-task-project .gv-task-body { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--spacing-85); row-gap: 0; align-items: start; }
  .gv-task-project .gv-task-brand { display: contents; }
  .gv-task-project .gv-task-brand > .gv-avatar { grid-column: 1; grid-row: 1; }
  .gv-task-project .gv-task-brand-name { grid-column: 2; grid-row: 1; align-self: center; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
  .gv-task-project .gv-task-title { grid-column: 1 / -1; grid-row: 2; margin-top: var(--spacing-85); }
  .gv-task-project .gv-task-brand .gv-task-amount { grid-column: 1 / -1; grid-row: 3; margin: var(--spacing-50) 0 0; font-size: 13px; line-height: 16px; }
  .gv-task-project .gv-task-meta { grid-column: 1 / -1; grid-row: 4; margin-top: var(--spacing-75); }
  .gv-task-project .gv-task-foot { grid-column: 1 / -1; grid-row: 5; margin-top: var(--spacing-75); }
  .gv-task-project .gv-task-foot .gv-meta { flex-wrap: wrap; font-size: 12px; line-height: 16px; align-items: flex-start; }
}

/* TabBar floating: a glass capsule over the content, the way iOS floats its tab bar */
.gv-tabbar-floating { border-top: 0; border-radius: var(--radius-full); padding: 4px; box-shadow: var(--glass-elevation); }
.gv-tabbar-floating .gv-tabbar-item { min-height: 60px; padding-top: var(--spacing-100); gap: var(--spacing-50); border-radius: var(--radius-full); font-size: 12px; line-height: 16px; }
/* AccountMenu as the last tab: it fills its share of the bar like the other tabs. */
.gv-me-tabwrap { flex: 1; display: flex; min-width: 0; }
.gv-me-tab { width: 100%; font: inherit; font-size: 11px; line-height: 14px; font-weight: 500; }
.gv-me-tab:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-tabbar-floating .gv-tabbar-item[aria-current="page"] { color: var(--heading); }
/* The selected tab is one raised thumb that slides to wherever you go (it fades out on pages that aren't tabs). */
.gv-tabbar-floating { position: relative; }
.gv-tabbar-floating > .gv-tabbar-item, .gv-tabbar-floating > .gv-me-tabwrap { position: relative; z-index: 1; }
.gv-tabbar-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--gv-tab-n, 5)); border-radius: var(--radius-full); background: var(--selected-fill); box-shadow: var(--selected-shadow); opacity: 0; transform: translateX(calc(var(--gv-tab-i, 0) * 100%)); transition: transform var(--motion-duration-400) var(--motion-ease-out), opacity var(--motion-duration-200) ease; pointer-events: none; }
.gv-tabbar-thumb[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gv-tabbar-thumb { transition: none; } }

/* Backdrop glow: soft pools of the logo's blue, sky and sand behind the whole app, fixed while the page scrolls, so the glass above has color to blur */
.gv-backdrop-glow::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.gv-backdrop-glow::before, .gv-backdrop-swatch {
  background:
    radial-gradient(42% 48% at 8% 6%, var(--glow-1), transparent 72%),
    radial-gradient(38% 46% at 92% 10%, var(--glow-2), transparent 72%),
    radial-gradient(46% 52% at 78% 96%, var(--glow-3), transparent 72%),
    radial-gradient(36% 44% at 18% 90%, var(--glow-4), transparent 72%),
    var(--background-frame); }
/* Phones have no floating side navigation and their captions sit right on the page, so they keep the plain page */
@media (max-width: 767px) { .gv-backdrop-glow:not(.gv-backdrop-glow-phone)::before { background: var(--background-page); } }

/* NavButton: an action in the side navigation that looks like a nav item (Collapse sidebar) */
.gv-nav-button { width: 100%; border: 0; background: transparent; color: var(--subdued); text-align: left; cursor: pointer; }
.gv-nav-button.gv-nav-button-collapsed { justify-content: center; padding: var(--spacing-100); }

/* BackdropPicker: swatches that preview each backdrop color, a radio group */
.gv-backdrops { display: flex; flex-wrap: wrap; gap: var(--spacing-300); }
.gv-backdrop-opt { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-100); padding: 0; border: 0; background: transparent; color: var(--subdued); font-size: 13px; line-height: 16px; font-weight: 500; cursor: pointer; }
.gv-backdrop-swatch { display: grid; place-items: center; width: 104px; height: 68px; border-radius: var(--radius-default); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); transition: box-shadow 130ms ease; }
.gv-backdrop-swatch > img { width: 52px; height: auto; display: block; }
/* ThemeToggle swatches: a little page and card drawn in that theme's own tokens (data-theme on each half) */
.gv-theme-swatch { display: flex; width: 104px; height: 68px; overflow: hidden; border-radius: var(--radius-default); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); transition: box-shadow 130ms ease; }
.gv-theme-half { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--background-frame); }
.gv-theme-half + .gv-theme-half { padding-left: 0; }
.gv-theme-half + .gv-theme-half .gv-theme-mini { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gv-theme-half:first-child:not(:last-child) { padding-right: 0; }
.gv-theme-half:first-child:not(:last-child) .gv-theme-mini { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gv-theme-mini { display: flex; flex-direction: column; gap: 5px; width: 100%; height: 100%; box-sizing: border-box; padding: 8px; border-radius: var(--radius-sm); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge); }
.gv-theme-mini i { display: block; height: 5px; border-radius: var(--radius-full); background: var(--gray-300); }
.gv-theme-mini i:first-child { width: 70%; background: var(--heading); }
.gv-theme-mini i:last-child { width: 45%; }
.gv-backdrop-opt:hover .gv-theme-swatch, .gv-backdrop-opt:hover .gv-backdrop-swatch { box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); }
.gv-backdrop-opt[aria-checked="true"] { color: var(--heading); font-weight: 700; }
.gv-backdrop-opt[aria-checked="true"] .gv-theme-swatch, .gv-backdrop-opt[aria-checked="true"] .gv-backdrop-swatch { box-shadow: 0 0 0 2px var(--background-elevated), 0 0 0 4px var(--heading); }
.gv-backdrop-opt:focus-visible { outline: none; }
.gv-backdrop-opt:focus-visible .gv-theme-swatch, .gv-backdrop-opt:focus-visible .gv-backdrop-swatch { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 6px; }

/* Tabs on phones: one row that scrolls sideways instead of wrapping */
@media (max-width: 767px) { .gv-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .gv-tabs::-webkit-scrollbar { display: none; } .gv-tab { flex: none; min-width: 0; } }

/* Motion: reduced motion turns off every press and lift */
@media (prefers-reduced-motion: reduce) {
  .gv-btn:active:not(:disabled):not([aria-disabled="true"]), .gv-ab:active, .gv-btn-primary:hover { transform: none; }
}

/* Enter: a page or view fades in and rises a few pixels. Add the class again to replay it (the app shell does on each route change). */
@media (prefers-reduced-motion: no-preference) { .gv-enter { animation: gv-enter var(--motion-duration-300) var(--motion-ease-out) backwards; } }
@keyframes gv-enter { from { opacity: 0; transform: translateY(var(--motion-rise)); } to { opacity: 1; transform: none; } }

/* Menus (Account, WorkspaceSwitcher, AccountMenu): opening downward, and a header with who is signed in */
.gv-account-menu-down { transform-origin: top; }
.gv-menu-head { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-100) var(--spacing-200) var(--spacing-200); }
.gv-menu-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gv-menu-head-name { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-menu-head-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-menu-head + .gv-account-group { padding-top: var(--spacing-100); border-top: 1px solid var(--surface-edge); }

/* WorkspaceSwitcher: which workspace is open, at the top of the side navigation; opens the list of workspaces */
.gv-ws { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; margin: 0; padding: var(--spacing-100); border: 0; border-radius: var(--radius-default); background: var(--glass-track); box-shadow: var(--glass-track-edge); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--motion-duration-100) ease, transform var(--motion-duration-100) var(--motion-ease-out); }
.gv-ws:hover { background: var(--neutral-subtle); }
.gv-ws:active { transform: scale(0.99); }
.gv-ws:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-ws-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-subtle); color: var(--accent-content); font-family: var(--font-display); font-size: 15px; line-height: 1; font-weight: 700; }
.gv-ws-mark-img { overflow: hidden; background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge); }
.gv-ws-mark-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-ws-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gv-ws-name { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-ws-detail { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-ws-collapsed { width: auto; padding: var(--spacing-75); background: transparent; box-shadow: none; }
.gv-ws-collapsed .gv-ws-mark { width: 36px; height: 36px; }
/* pill: a compact glass capsule for the top of phone pages */
.gv-ws-pill { width: auto; max-width: 100%; height: var(--component-height-200); padding: 0 var(--spacing-200) 0 var(--spacing-75); gap: var(--spacing-100); border-radius: var(--radius-full); background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); }
.gv-ws-pill .gv-ws-mark { width: 30px; height: 30px; border-radius: var(--radius-full); font-size: 14px; }
.gv-ws-pill .gv-ws-name { font-size: 15px; line-height: 20px; }
.gv-ws-pill:hover { background: var(--glass-surface-strong); }

/* AccountMenu: your photo or initials in a small glass circle at the top right; opens Profile, Settings and Sign out */
.gv-me { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--component-height-300); height: var(--component-height-300); margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); cursor: pointer; transition: box-shadow var(--motion-duration-100) ease, transform var(--motion-duration-100) var(--motion-ease-out); }
.gv-me:hover { box-shadow: var(--glass-elevation), 0 0 0 2px var(--accent-visual); }
/* With your name: a glass capsule, photo then name. On phones the name hides and it is the circle again. */
/* The photo sits 6px in from the capsule's edge on every side (48 tall, 36 photo), the name 16px from the right. */
.gv-me-named { display: inline-flex; align-items: center; gap: var(--spacing-100); width: auto; max-width: 240px; padding: 0 var(--spacing-300) 0 var(--spacing-85); }
.gv-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; color: var(--heading); }
@media (max-width: 767px) { .gv-me-named { padding: 0; width: var(--component-height-300); justify-content: center; } .gv-me-named .gv-me-name { display: none; } }
.gv-me:active { transform: scale(var(--motion-press-scale)); }
.gv-me[aria-expanded="true"] { box-shadow: var(--glass-elevation); background: var(--selected-fill); }
.gv-me:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* Footer: the quiet line at the bottom of a page, who makes Makado and the legal links */
.gv-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-100) var(--spacing-400); padding: var(--spacing-400) 0 0; font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-footer p { margin: 0; }
/* A link in the line itself (the studio name): underlined so it reads as a link without relying on color. */
.gv-footer p a { color: var(--subdued); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-sm); }
.gv-footer p a:hover { color: var(--heading); }
.gv-footer p a:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-100) var(--spacing-300); }
.gv-footer-links a { color: var(--subdued); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); }
.gv-footer-links a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.gv-footer-links a:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-footer-center { justify-content: center; text-align: center; }

@media (prefers-reduced-motion: reduce) { .gv-ws, .gv-me { transition: none; } .gv-ws:active, .gv-me:active { transform: none; } }

/* SetupChecklist: a solid card on Home for the first few visits. */
.gv-setup { position: relative; display: flex; flex-direction: column; gap: var(--spacing-200); min-width: 0; box-sizing: border-box; padding: var(--spacing-300) var(--spacing-400); border-radius: var(--radius-lg); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--divider), var(--shadow-emphasized); color: var(--body); }
.gv-setup-head { display: flex; align-items: flex-start; gap: var(--spacing-200); }
.gv-setup-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; }
.gv-setup-title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--heading); }
.gv-setup-desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--subdued); }
.gv-setup-count { flex: none; padding-top: 2px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gv-setup-close { flex: none; margin: -6px -10px 0 0; }
.gv-setup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-200); margin: 0; padding: 0; list-style: none; }
/* Each step in its own inset container inside the card: a quieter surface with a hairline edge. */
.gv-setup-step { min-width: 0; display: flex; border-radius: var(--radius-lg); background: var(--background-layer-1); box-shadow: 0 0 0 1px var(--surface-edge); }
.gv-setup-step .gv-setup-row { padding: var(--spacing-300); }
.gv-setup-row { display: flex; align-items: flex-start; gap: var(--spacing-200); box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--spacing-100); border: 0; border-radius: var(--radius-default); background: transparent; font: inherit; color: inherit; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.gv-setup-row:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-setup-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; color: var(--detail); }
.gv-setup-mark-done { color: var(--positive-visual); }
.gv-setup-step-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-setup-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--spacing-100); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--heading); }
.gv-setup-step-done .gv-setup-label { font-weight: 500; color: var(--subdued); }
.gv-setup-optional { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); }
.gv-setup-step-desc { font-size: 13px; line-height: 18px; color: var(--subdued); }
.gv-setup-skip { flex: none; margin: -4px -6px 0 0; color: var(--subdued); }
.gv-setup-action { align-self: flex-start; margin-top: var(--spacing-50); font-size: 14px; line-height: 20px; font-weight: 700; }
.gv-setup-complete { flex-direction: row; align-items: center; gap: var(--spacing-300); }
.gv-setup-complete .gv-setup-close { align-self: flex-start; }
.gv-setup-illo { flex: none; width: 120px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .gv-setup-complete .gv-setup-illo { animation: gv-setup-pop 520ms cubic-bezier(.2, .8, .2, 1); }
}
@keyframes gv-setup-pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@media (max-width: 599px) {
  .gv-setup { padding: var(--spacing-300); }
  .gv-setup-head { flex-wrap: wrap; }
  .gv-setup-head .gv-setup-text { flex: 1 1 0; }
  .gv-setup-count { order: 3; width: 100%; padding-top: 0; }
  .gv-setup-list { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-100); }
  /* Phones: tighter steps, and done steps keep just their name, so the calendar comes up sooner. */
  .gv-setup-step .gv-setup-row { padding: var(--spacing-200); }
  .gv-setup-step-done .gv-setup-step-desc { display: none; }
  .gv-setup-complete { flex-direction: column; text-align: center; }
  .gv-setup-complete .gv-setup-close { position: absolute; top: var(--spacing-200); right: var(--spacing-200); margin: 0; }
}

/* WelcomePanel: a short first-run welcome, inline in the page on a solid surface. */
.gv-welcome { position: relative; display: flex; align-items: center; gap: var(--spacing-400); min-width: 0; box-sizing: border-box; padding: var(--spacing-300) var(--spacing-400); border-radius: var(--radius-lg); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--divider), var(--shadow-emphasized); color: var(--body); }
.gv-welcome-illo { flex: none; width: 140px; height: auto; }
.gv-welcome-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-content); }
.gv-welcome-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; }
.gv-welcome-step { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--subdued); font-variant-numeric: tabular-nums; }
.gv-welcome-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--heading); }
.gv-welcome-title:focus { outline: none; }
.gv-welcome-title:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); border-radius: var(--radius-sm); }
.gv-welcome-text { margin: 0; max-width: 560px; font-size: 14px; line-height: 21px; color: var(--body); }
.gv-welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); margin-top: var(--spacing-100); }
.gv-welcome-dots { display: flex; gap: 6px; margin-top: var(--spacing-100); }
.gv-welcome-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--gray-300); }
.gv-welcome-dot-on { width: 18px; background: var(--heading); }
@media (prefers-reduced-motion: no-preference) {
  .gv-welcome-body { animation: gv-welcome-in 220ms ease-out; }
  .gv-welcome-dot { transition: width 180ms ease; }
}
@keyframes gv-welcome-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .gv-welcome { flex-direction: column; align-items: flex-start; padding: var(--spacing-300); gap: var(--spacing-200); }
  .gv-welcome-illo { width: 112px; }
}

/* TimeField: the browser's time input in a Makado field. color-scheme keeps the native picker icon readable in both themes. */
.gv-time { width: 136px; flex: none; }
.gv-time .gv-field-control input { font-variant-numeric: tabular-nums; color-scheme: light; }
[data-theme="dark"] .gv-time .gv-field-control input { color-scheme: dark; }
.gv-time .gv-field-control input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.8; }
.gv-field-control:has(input[type="time"]:focus-visible) { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }

/* TimeRange: a start and an end, named by a legend, with a note such as "8 hours" */
.gv-timerange { display: flex; flex-direction: column; gap: var(--spacing-75); min-width: 0; margin: 0; padding: 0; border: 0; }
.gv-timerange-label { padding: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-timerange-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-100); }
.gv-timerange-to { font-size: 14px; line-height: 18px; color: var(--subdued); }
.gv-timerange-detail { margin-left: var(--spacing-100); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); font-variant-numeric: tabular-nums; }
.gv-timerange-invalid .gv-field-help { color: var(--negative-content); }
.gv-timerange-l .gv-timerange-label, .gv-timerange-l .gv-timerange-to { font-size: 16px; line-height: 20px; }

/* SaveStatus: a quiet word for saving as you go. Words and an icon, never color alone. */
.gv-save { display: inline-flex; align-items: center; gap: var(--spacing-100); min-height: 20px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--subdued); white-space: nowrap; }
.gv-save-text { display: inline-flex; align-items: center; transition: opacity var(--motion-duration-300) ease; }
.gv-save-text[data-hidden] { opacity: 0; }
/* Each word fades in; going away, the whole status fades out before it clears. */
.gv-save-word { display: inline-flex; align-items: center; gap: var(--spacing-75); animation: gv-save-in var(--motion-duration-300) ease-out; }
@media (prefers-reduced-motion: reduce) { .gv-save-text { transition: none; } .gv-save-word { animation: none; } }
.gv-save-saving .gv-icon { color: var(--detail); }
.gv-save-saved .gv-icon { color: var(--positive-visual); }
.gv-save-error { color: var(--negative-content); }
.gv-save-error .gv-icon { color: var(--negative-visual); }
.gv-save-retry { margin: 0; padding: 0 var(--spacing-50); border: 0; border-radius: var(--radius-sm); background: none; color: var(--accent-content); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gv-save-retry:hover { text-decoration-thickness: 2px; }
.gv-save-retry:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
@keyframes gv-save-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gv-save-text { animation: none; } }
/* A page header whose only action is an idle SaveStatus takes no room (phones would get an empty row), but its live region stays */
.gv-page-actions:has(> .gv-save-idle:only-child) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 3.4 (landing): pieces for public pages. */
/* SiteBar: the floating glass bar at the top of public pages, inset from the edges like the side navigation. Navigation layer, so glass. */
.gv-sitebar { position: sticky; top: var(--spacing-200); z-index: 20; display: flex; justify-content: center; padding: 0 var(--spacing-200); pointer-events: none; }
.gv-sitebar-pill { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); width: 100%; max-width: 1200px; height: 64px; box-sizing: border-box; padding: 0 var(--spacing-300); border-radius: var(--radius-full); background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); }
.gv-sitebar-brand { display: inline-flex; align-items: center; border-radius: var(--radius-default); text-decoration: none; }
.gv-sitebar-brand:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--spacing-75); }
.gv-sitebar-actions { display: flex; align-items: center; gap: var(--spacing-200); }
@media (max-width: 767px) { .gv-sitebar { padding: 0 var(--spacing-100); } .gv-sitebar-pill { height: 56px; padding: 0 var(--spacing-200); gap: var(--spacing-100); } }

/* Showcase: a still life of the app over the Backdrop glow. The back window and the middle board are in the flow, offset left and right; the float toolbar tucks between them;
   the two front cards hang off the corners. Deeper layers lift with bigger shadows. On scroll the front layers drift up faster than the back ones (a CSS scroll timeline,
   where supported), and the layers settle in on load. Nothing moves with reduced motion. */
.gv-showcase { position: relative; margin: 0; min-width: 0; }
.gv-showcase-stage { --gv-showcase-back-h: 600px; position: relative; display: flex; flex-direction: column; padding-bottom: var(--spacing-700); }
.gv-showcase-layer { position: relative; min-width: 0; box-sizing: border-box; --gv-depth: 0; --gv-drift: 0px; }
.gv-showcase-solid, .gv-showcase-panel { padding: var(--spacing-400); border-radius: var(--radius-xl); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-elevated); color: var(--body); }
.gv-showcase-glass, .gv-showcase-rail { padding: var(--spacing-200); border-radius: var(--radius-xl); background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); }
/* Staggered: no two layers share an edge, so each card reads as sitting in front of the one behind it. */
.gv-showcase-back { order: 0; align-self: flex-start; width: 74%; margin-left: 7%; z-index: 1; }
.gv-showcase-float { order: 1; align-self: center; margin: calc(var(--spacing-500) * -1) 0 var(--spacing-200) 18%; z-index: 4; border-radius: var(--radius-full); padding: var(--spacing-75); --gv-depth: 3; --gv-drift: -120px; }
.gv-showcase-middle { order: 2; align-self: flex-end; width: 66%; margin-top: calc(var(--spacing-600) * -1); margin-right: 5%; z-index: 2; --gv-depth: 1; --gv-drift: -40px; }
.gv-showcase-front-start { position: absolute; left: 0; top: calc(var(--gv-showcase-back-h) - var(--spacing-800)); width: 26%; z-index: 3; --gv-depth: 2; --gv-drift: -72px; }
.gv-showcase-front-end { position: absolute; right: 0; top: calc(var(--spacing-800) * 2); width: 28%; z-index: 3; --gv-depth: 2; --gv-drift: -96px; }
.gv-showcase-front-start.gv-showcase-solid, .gv-showcase-front-end.gv-showcase-solid { box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-dragged); }
.gv-showcase-window { display: flex; align-items: stretch; gap: var(--spacing-200); }
/* The back window is cut at a fixed height; the board and the front card cover the cut */
.gv-showcase-back .gv-showcase-window { height: var(--gv-showcase-back-h); }
.gv-showcase-back .gv-showcase-panel { overflow: hidden; }
.gv-showcase-rail { flex: none; width: 188px; display: flex; flex-direction: column; gap: var(--spacing-400); padding-top: var(--spacing-300); }
.gv-showcase-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-300); }
@media (max-width: 1023px) {
  .gv-showcase-rail { display: none; }
  .gv-showcase-back { width: 80%; margin-left: 8%; }
  .gv-showcase-middle { width: 78%; margin-right: 6%; }
  .gv-showcase-front-start, .gv-showcase-front-end { width: 40%; }
}
/* Phones: one column, each layer tucked a little under the one before, offset left and right for depth */
@media (max-width: 767px) {
  .gv-showcase-stage { padding-bottom: 0; }
  .gv-showcase-nophone { display: none; }
  .gv-showcase-back .gv-showcase-window { height: auto; }
  .gv-showcase-layer { position: relative; inset: auto; width: auto; align-self: stretch; margin: 0; }
  .gv-showcase-float { order: 0; align-self: center; margin: 0 0 var(--spacing-200); }
  .gv-showcase-middle { order: 1; }
  .gv-showcase-front-start { order: 2; margin: calc(var(--spacing-300) * -1) var(--spacing-500) 0 0; }
  .gv-showcase-front-end { order: 3; margin: calc(var(--spacing-300) * -1) 0 0 var(--spacing-500); }
  .gv-showcase-solid, .gv-showcase-panel { padding: var(--spacing-300); }
}
@keyframes gv-showcase-in { from { opacity: 0; scale: 0.96; } }
@keyframes gv-showcase-drift { to { translate: 0 var(--gv-drift); } }
@media (prefers-reduced-motion: no-preference) {
  .gv-showcase-layer { animation: gv-showcase-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--gv-depth) * 110ms); }
  @supports (animation-timeline: scroll()) {
    .gv-showcase-layer { animation-name: gv-showcase-in, gv-showcase-drift; animation-duration: 700ms, auto; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), linear; animation-fill-mode: both, both; animation-delay: calc(var(--gv-depth) * 110ms), 0s; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
  }
}
@media (max-width: 767px) { .gv-showcase-layer { --gv-drift: 0px !important; } }

/* StageTrack: the project stages in order, joined by a quiet line. Across on wide screens, down on narrow ones. Words always come with the marks. */
.gv-stagetrack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.gv-stagetrack-item { position: relative; display: flex; flex-direction: column; gap: var(--spacing-50); min-width: 0; padding-right: var(--spacing-200); }
.gv-stagetrack-mark { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--spacing-100); border-radius: var(--radius-full); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--shadow-emphasized); }
.gv-stagetrack-item:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 40px; right: var(--spacing-100); height: 2px; border-radius: var(--radius-full); background: var(--gray-200); }
.gv-stagetrack-name { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--heading); }
.gv-stagetrack-caption { font-size: 13px; line-height: 18px; color: var(--subdued); }
@media (max-width: 1023px) {
  .gv-stagetrack { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .gv-stagetrack-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--spacing-200); row-gap: 0; padding: 0 0 var(--spacing-300); }
  .gv-stagetrack-mark { grid-row: span 2; margin: 0; }
  .gv-stagetrack-name { align-self: end; padding-top: var(--spacing-50); }
  .gv-stagetrack-item:not(:last-child)::after { top: 40px; bottom: var(--spacing-100); left: 15px; right: auto; width: 2px; height: auto; }
}

/* PlanCard: the one plan on a solid surface. The price is the biggest thing on it; the included lines are checked; the actions sit along the bottom. */
.gv-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-500) var(--spacing-600); align-items: center; box-sizing: border-box; padding: var(--spacing-600); border-radius: var(--radius-xl); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); color: var(--body); }
.gv-plan-head { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
.gv-plan-title { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--accent-content); }
.gv-plan-amount { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-100); }
.gv-plan-figure { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--heading); font-variant-numeric: tabular-nums; }
.gv-plan-period { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--subdued); }
.gv-plan-alt { margin: 0; font-size: 16px; line-height: 24px; color: var(--body); }
.gv-plan-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--spacing-200); min-width: 0; }
.gv-plan-point { display: flex; align-items: flex-start; gap: var(--spacing-200); font-size: 15px; line-height: 24px; color: var(--body); }
.gv-plan-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-content); }
.gv-plan-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-200); padding-top: var(--spacing-400); border-top: var(--border-width-100) solid var(--divider); }
@media (max-width: 767px) {
  .gv-plan { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-500); gap: var(--spacing-400); }
  .gv-plan-figure { font-size: 56px; }
}

/* Hero: the display type for public pages. Big, tight, left aligned; the second line in the accent so the color theme shows in the words. Size M opens a section. */
.gv-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-500) var(--spacing-700); align-items: end; min-width: 0; }
.gv-hero-main { min-width: 0; }
/* The kicker is plain text, no chip; in the heading color so it holds 4.5:1 over any color theme's glow */
.gv-hero-kicker { display: block; margin: 0 0 var(--spacing-300); font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--heading); }
.gv-hero-kicker-positive { color: var(--positive-content); }
/* Pulled left by the big letters' own side space (about 0.068em on M and E in Figtree 800), so their ink lines up with the kicker and lede. */
.gv-hero-title { margin: 0 0 0 -0.058em; font-family: var(--font-display); font-size: clamp(52px, 8.6vw, 120px); line-height: 0.94; font-weight: 800; letter-spacing: -0.045em; color: var(--heading); text-wrap: balance; }
.gv-hero-accent { display: block; color: var(--accent-content); }
.gv-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-300); min-width: 0; padding-bottom: var(--spacing-100); }
.gv-hero-lede { margin: 0; font-size: 19px; line-height: 28px; color: var(--heading); text-wrap: pretty; }
.gv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-200); }
.gv-hero-note { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--heading); }
.gv-hero-m .gv-hero-title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
.gv-hero-m .gv-hero-lede { font-size: 17px; line-height: 26px; }
@media (max-width: 1023px) { .gv-hero { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-400); } }
@media (max-width: 767px) { .gv-hero-lede { font-size: 17px; line-height: 26px; } }

/* Skeleton: placeholders while a page loads. A soft pulse in opacity, never a gradient sweep; still with reduced motion. */
.gv-skel { display: block; box-sizing: border-box; width: 100%; height: 16px; border-radius: var(--radius-default); background: var(--neutral-subtle); animation: gv-skel-pulse 1.4s var(--motion-ease-in-out) infinite; }
.gv-skel-text { height: 12px; border-radius: var(--radius-full); }
.gv-skel-circle { border-radius: var(--radius-full); flex: none; }
.gv-skel-lines { display: flex; flex-direction: column; gap: var(--spacing-100); width: 100%; }
@keyframes gv-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .gv-skel { animation: none; } }

/* PullRefresh: a solid round button-sized dot that comes down from the top while you pull, its arrow turning with the pull. */
.gv-pull { position: fixed; top: calc(env(safe-area-inset-top) + var(--spacing-200)); left: 50%; z-index: 60; pointer-events: none; transform: translate(-50%, calc((var(--gv-pull, 0) - 1) * var(--spacing-600))); opacity: var(--gv-pull, 0); }
.gv-pull-dot { display: grid; place-items: center; width: var(--component-height-200); height: var(--component-height-200); border-radius: var(--radius-full); background: var(--background-elevated); box-shadow: var(--shadow-elevated); color: var(--subdued); }
.gv-pull-dot .gv-icon { transform: rotate(calc(var(--gv-pull, 0) * 270deg)); }
.gv-pull-ready .gv-pull-dot, .gv-pull-busy .gv-pull-dot { color: var(--accent-content); }
.gv-pull-busy .gv-pull-dot .gv-icon { animation: gv-pull-spin 0.8s linear infinite; }
@keyframes gv-pull-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gv-pull-busy .gv-pull-dot .gv-icon { animation: none; } }

/* The Profile tab's menu on phones: a full-width sheet of rows (your name and email on top, then each choice). */
.gv-me-sheet .gv-menu-head { padding: 0 0 var(--spacing-200); }
.gv-sheet-group { display: flex; flex-direction: column; }
.gv-sheet-group + .gv-sheet-group { border-top: var(--border-width-100) solid var(--divider); padding-top: var(--spacing-200); }
.gv-sheet-label { padding: 0 var(--spacing-100) var(--spacing-100); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--subdued); }
.gv-sheet-item { display: flex; align-items: center; gap: var(--spacing-200); min-height: var(--component-height-300); padding: 0 var(--spacing-100); border: 0; border-radius: var(--radius-default); background: transparent; color: var(--heading); font: inherit; font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; }
.gv-sheet-item:hover { background: var(--neutral-subtle); }
.gv-sheet-item:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-sheet-item > .gv-icon { flex: none; color: var(--subdued); }
.gv-sheet-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gv-sheet-item-detail { font-size: 13px; line-height: 18px; color: var(--subdued); }
.gv-sheet-item-negative, .gv-sheet-item-negative > .gv-icon { color: var(--negative-content); }
.gv-sheet-item-highlight { color: var(--accent-content); font-weight: 700; }

/* Press and hold to drag (touch): no system callout or text selection on what can be held; the lifted copy follows the
   finger on top of everything; the original fades where it was; a line shows where a list row will land. */
.gv-col-item[draggable="true"], .gv-cal-agenda .gv-col-item[tabindex] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.gv-touch-ghost { position: fixed; z-index: 90; margin: 0; pointer-events: none; list-style: none; box-shadow: var(--shadow-elevated); border-radius: var(--radius-lg); opacity: 0.96; will-change: transform; }
.gv-touch-source { opacity: 0.35; }
/* Where a dragged item will land: a straight accent line just above or below the item it's over, drawn outside it so a
   card or a rounded corner never hides or bends it. */
.gv-touch-before, .gv-touch-after { position: relative; }
.gv-touch-before::before, .gv-touch-after::after { content: ''; position: absolute; left: 0; right: 0; height: var(--border-width-200); border-radius: 0; background: var(--accent-visual); pointer-events: none; z-index: 3; }
/* The line sits in the middle of the gap between items (--gv-drop-gap, set by tighter lists), never over the next item. */
.gv-touch-before::before { top: calc(var(--gv-drop-gap, var(--spacing-100)) / -2 - var(--border-width-200) / 2); }
.gv-touch-after::after { bottom: calc(var(--gv-drop-gap, var(--spacing-100)) / -2 - var(--border-width-200) / 2); }
.gv-cal-chips { --gv-drop-gap: var(--spacing-50); }
/* The day list's Day and Week switch spans the list. */
.gv-cal-agenda-toggle { align-self: stretch; display: flex; }
.gv-cal-agenda-toggle > .gv-seg-item { flex: 1 1 0; }

/* TagField: type to choose several. Chosen ones are tokens in the field; the menu suggests matches and can add what's new. */
.gv-tagfield { position: relative; }
.gv-tagfield-control { flex-wrap: wrap; height: auto; min-height: var(--component-height-100); padding: 3px 6px; gap: var(--spacing-50); cursor: text; }
.gv-field-l .gv-tagfield-control { height: auto; min-height: var(--component-height-200); padding: 5px 8px; }
.gv-tagfield-control input { flex: 1 1 96px; min-width: 96px; height: calc(var(--component-height-100) - 10px); padding: 0 4px; }
.gv-field-l .gv-tagfield-control input { height: calc(var(--component-height-200) - 14px); }
.gv-tagfield-control:has(input:focus-visible) { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-tagfield-token { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: calc(var(--component-height-100) - 12px); padding: 0 2px 0 8px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--neutral-subtle); color: var(--heading); font-size: 13px; line-height: 16px; font-weight: 600; }
.gv-field-l .gv-tagfield-token { height: calc(var(--component-height-200) - 16px); font-size: 15px; line-height: 18px; padding-left: 10px; }
.gv-tagfield-token-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-tagfield-x { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); cursor: pointer; }
.gv-field-l .gv-tagfield-x { width: 28px; height: 28px; }
.gv-tagfield-x:hover { background: var(--neutral-subtle-hover); color: var(--heading); }
.gv-tagfield-x:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 0; }
.gv-tagfield-menu { right: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.gv-tagfield-opt { display: flex; flex-direction: column; min-width: 0; }
.gv-tagfield-detail { font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-tagfield-create { color: var(--heading); font-weight: 600; }
.gv-tagfield-create .gv-icon { flex: none; color: var(--subdued); }
.gv-tagfield-empty { padding: 8px; font-size: 14px; line-height: 18px; color: var(--subdued); }
/* ComboField: one value typed or picked, with TagField's menu. The chevron shows every item. */
.gv-combofield { position: relative; }
.gv-combofield .gv-field-control input { flex: 1 1 auto; min-width: 0; }
.gv-combofield-toggle { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); cursor: pointer; }
.gv-combofield-toggle:hover { background: var(--neutral-subtle-hover); color: var(--heading); }
.gv-combofield-toggle .gv-icon { margin: 0; transition: transform var(--motion-duration-100) ease; }
.gv-combofield-toggle[aria-expanded="true"] .gv-icon { transform: rotate(180deg); }
.gv-combofield .gv-picker-opt:not(.gv-tagfield-create) > .gv-icon { flex: none; margin-left: auto; color: var(--heading); }
.gv-combofield-loading { animation: gv-combofield-pulse 1.4s ease-in-out infinite; }
@keyframes gv-combofield-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .gv-combofield-loading { animation: none; } .gv-combofield-toggle .gv-icon { transition: none; } }
/* Button premium: the crown after the label, a little smaller than the button's icon. */
.gv-btn-premium { flex: none; opacity: 0.9; }

/* NotificationCenter: a bell with the unread count, and a panel of what needs a look, grouped, each a link to resolve it. */
.gv-notify { position: relative; display: inline-flex; }
.gv-ab-badge-accent .gv-ab-badge { background: var(--accent); color: var(--on-accent); }
.gv-notify-pop .gv-popover-body { max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain; padding-top: 0; }
.gv-notify-list { display: flex; flex-direction: column; gap: var(--spacing-200); }
.gv-notify-group ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gv-notify-head { margin: 0 0 var(--spacing-50); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); }
.gv-notify-item { display: flex; align-items: flex-start; gap: var(--spacing-100); margin: 0 calc(var(--spacing-100) * -1); padding: var(--spacing-100); border-radius: var(--radius-default); color: inherit; text-decoration: none; }
.gv-notify-item:hover { background: var(--neutral-subtle); }
.gv-notify-item:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 0; }
.gv-notify-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-default); background: var(--gray-100); color: var(--gray-800); }
.gv-notify-icon-negative { background: var(--negative-subtle); color: var(--negative-content); }
.gv-notify-icon-notice { background: var(--notice-subtle); color: var(--gray-1000); }
.gv-notify-icon-positive { background: var(--positive-subtle); color: var(--gray-1000); }
.gv-notify-icon-accent { background: var(--accent-subtle); color: var(--accent-content); }
.gv-notify-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gv-notify-title { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.gv-notify-new .gv-notify-title { font-weight: 700; }
.gv-notify-detail { font-size: 12px; line-height: 16px; color: var(--subdued); overflow-wrap: anywhere; }
.gv-notify-action { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent-content); }
/* Unread: a small filled circle (a shape, with "New" for screen readers), never color alone. */
.gv-notify-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: var(--radius-full); background: var(--accent); }
.gv-notify-empty { display: flex; align-items: flex-start; gap: var(--spacing-100); padding: var(--spacing-100) 0 var(--spacing-200); color: var(--positive-visual); }
.gv-notify-empty p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.gv-notify-empty strong { font-size: 14px; line-height: 18px; color: var(--heading); }
.gv-notify-empty span { font-size: 12px; line-height: 16px; color: var(--subdued); }
/* Floating: the same glass circle as the account button beside it. */
.gv-notify-floating > .gv-ab { width: var(--component-height-300); height: var(--component-height-300); border-radius: var(--radius-full); background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); color: var(--heading); }
.gv-notify-floating > .gv-ab:hover { background: var(--glass-surface-strong); }
.gv-notify-floating .gv-ab-badge { top: 4px; right: 4px; }

/* ReorderList: a list you put in order by a handle on each row (drag it, or Alt with Up or Down). */
.gv-reorder { display: flex; flex-direction: column; gap: var(--spacing-75); margin: 0; padding: 0; list-style: none; }
.gv-reorder-row { display: flex; align-items: center; gap: var(--spacing-100); min-height: var(--component-height-200); padding: var(--spacing-75) var(--spacing-100); box-sizing: border-box; border-radius: var(--radius-default); background: var(--background-layer-2); box-shadow: inset 0 0 0 var(--border-width-100) var(--divider); transition: box-shadow var(--motion-duration-200) ease, transform var(--motion-duration-200) var(--motion-ease-out); }
.gv-reorder-lifted { box-shadow: var(--shadow-emphasized); transform: scale(1.01); position: relative; z-index: 1; }
.gv-reorder-dragging { cursor: grabbing; user-select: none; }
.gv-reorder-handle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--subdued); cursor: grab; touch-action: none; }
.gv-reorder-handle:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-reorder-handle:active { cursor: grabbing; }
.gv-reorder-handle:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 0; }
.gv-reorder-pin { flex: none; width: 32px; height: 32px; }
.gv-reorder-body { display: flex; flex: 1; align-items: center; gap: var(--spacing-100); min-width: 0; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .gv-reorder-row { transition: none; } .gv-reorder-lifted { transform: none; } }

/* Stage colors you can pick (Workspace settings, Stages): cyan and yellow beside gray and blue. Green, orange and red stay for published, review and late. */
.gv-mark-cyan { color: var(--cyan-visual); }
.gv-mark-yellow { color: var(--yellow-visual); }
.gv-sl-cyan .gv-sl-dot { background: var(--cyan-visual); }
.gv-sl-yellow .gv-sl-dot { background: var(--yellow-visual); }
.gv-cal-chip-cyan { background: var(--cyan-subtle); }
.gv-cal-chip-cyan:hover { background: color-mix(in srgb, var(--cyan-subtle) 88%, var(--cyan-visual)); }
.gv-cal-chip-yellow { background: var(--yellow-subtle); }
.gv-cal-chip-yellow:hover { background: color-mix(in srgb, var(--yellow-subtle) 88%, var(--yellow-visual)); }
.gv-meter-seg-cyan { background: var(--gradient-cyan); }
.gv-meter-seg-yellow { background: var(--gradient-yellow); }

/* ReplyPanel: the comment, the product picker, Draft, then the editable reply with what it drew on, Copy and Save. */
.gv-reply { display: flex; flex-direction: column; gap: var(--spacing-300); }
.gv-reply-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-100); }
.gv-reply-draft { display: flex; flex-direction: column; gap: var(--spacing-200); padding-top: var(--spacing-300); border-top: var(--border-width-100) solid var(--divider); }
.gv-reply-source { display: flex; align-items: flex-start; gap: var(--spacing-75); margin: 0; font-size: 13px; line-height: 18px; color: var(--subdued); }
.gv-reply-source .gv-icon { flex: none; margin-top: 2px; }

/* PremiumTag: marks what comes with Makado Premium (reply drafts and Autofill). The magic wand and the word, in the accent. */
.gv-premium { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 8px 0 7px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle; }
.gv-premium-m { height: 24px; padding: 0 10px 0 8px; font-size: 12px; line-height: 16px; }
/* While free tries are left: an outline in the same ink, so it reads as "try it" rather than "you have it". */
.gv-premium-trial { background: transparent; color: var(--accent-content); box-shadow: inset 0 0 0 var(--border-width-100) var(--accent-content); }
/* AccountMenu with add-ons: tags under your name, and a small crown on your photo. */
.gv-menu-head-addons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--spacing-75); }
.gv-me-photo { position: relative; display: inline-flex; flex: none; }
.gv-me-addon { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--background-elevated); }

/* ImageCropper: a square frame over the picture (a circle for photos of people), drag to move, a zoom slider under it. The result is a square. */
.gv-crop { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-200); width: 100%; max-width: 360px; }
.gv-crop-frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-default); background: var(--background-layer-1); box-shadow: inset 0 0 0 var(--border-width-100) var(--divider); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.gv-crop-dragging { cursor: grabbing; }
.gv-crop-frame:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-crop-img { position: absolute; max-width: none; pointer-events: none; user-select: none; }
/* Photos: the corners outside the circle are dimmed with the scrim, and a hairline marks the circle. Logos: just the hairline. */
.gv-crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 var(--border-width-100) var(--surface-edge); }
.gv-crop-circle .gv-crop-mask { border-radius: var(--radius-full); box-shadow: 0 0 0 999px var(--scrim), inset 0 0 0 var(--border-width-100) var(--glass-rim); }
.gv-crop-help { margin: 0; font-size: 12px; line-height: 16px; color: var(--detail); }
.gv-crop-zoom { display: flex; align-items: center; gap: var(--spacing-100); }
.gv-crop-range { flex: 1; min-width: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.gv-crop-range:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); border-radius: var(--radius-full); }
.gv-crop-l { max-width: none; }
.gv-crop-l .gv-crop-help { font-size: 14px; line-height: 18px; }

/* PairEditor: rows of short fields that save as you go (key facts, links). Quiet until pointed at; a quiet x removes a row. */
.gv-pairs { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; }
.gv-pairs-head { display: grid; gap: var(--spacing-100); padding: 0 var(--spacing-100); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); }
.gv-pairs-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--border-width-100) solid var(--divider); }
.gv-pairs-row { display: grid; align-items: center; gap: var(--spacing-100); padding: var(--spacing-50) 0; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-pairs-input { width: 100%; min-width: 0; height: var(--component-height-100); box-sizing: border-box; margin: 0; padding: 0 var(--spacing-100); border: var(--border-width-100) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--body); font: inherit; font-size: 14px; line-height: 18px; text-overflow: ellipsis; transition: background-color 130ms ease, border-color 130ms ease; }
.gv-pairs-input:first-child { font-weight: 600; color: var(--heading); }
.gv-pairs-input::placeholder { color: var(--detail); font-weight: 400; }
.gv-pairs-input:hover { background: var(--neutral-subtle); }
.gv-pairs-input:focus { background: var(--gray-25); border-color: var(--field-border); outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-pairs-input[readonly] { background: transparent; border-color: transparent; outline: 0; }
.gv-pairs-remove { opacity: 0; transition: opacity 130ms ease; }
.gv-pairs-row:hover .gv-pairs-remove, .gv-pairs-row:focus-within .gv-pairs-remove { opacity: 1; }
@media (hover: none) { .gv-pairs-remove { opacity: 1; } }
.gv-pairs-l .gv-pairs-input { height: var(--component-height-200); font-size: 16px; line-height: 20px; }
@media (prefers-reduced-motion: reduce) { .gv-pairs-input, .gv-pairs-remove { transition: none; } }

/* ListRow image: a product's picture as the row's lead, shown whole on the product backdrop. */
.gv-row-thumb { flex: none; width: 40px; height: 40px; box-sizing: border-box; padding: 3px; border-radius: var(--radius-default); background: var(--background-product); object-fit: contain; box-shadow: inset 0 0 0 1px var(--surface-edge); }

/* Switch: on or off, right away. The track takes the accent when on; the thumb is the raised selected style. */
.gv-switch { position: relative; display: inline-flex; align-items: flex-start; gap: var(--spacing-100); font-size: 14px; line-height: 20px; color: var(--body); cursor: pointer; }
.gv-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gv-switch-track { position: relative; flex: none; width: 34px; height: 20px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--gray-400); transition: background-color var(--motion-duration-100) ease; }
.gv-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--on-accent); box-shadow: var(--selected-shadow); transition: transform var(--motion-duration-200) var(--motion-ease-out); }
.gv-switch:hover .gv-switch-track { background: var(--gray-500); }
.gv-switch-input:checked + .gv-switch-track { background: var(--accent); }
.gv-switch:hover .gv-switch-input:checked + .gv-switch-track { background: var(--accent-hover); }
.gv-switch-input:checked + .gv-switch-track .gv-switch-thumb { transform: translateX(14px); }
.gv-switch-input:focus-visible + .gv-switch-track { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-switch-text { display: flex; flex-direction: column; min-width: 0; }
.gv-switch-label { color: var(--heading); font-weight: 600; }
.gv-switch-desc { font-size: 13px; line-height: 18px; color: var(--subdued); }
.gv-switch-l { font-size: 16px; line-height: 24px; }
.gv-switch-l .gv-switch-track { width: 42px; height: 24px; }
.gv-switch-l .gv-switch-thumb { width: 20px; height: 20px; }
.gv-switch-l .gv-switch-input:checked + .gv-switch-track .gv-switch-thumb { transform: translateX(18px); }
.gv-switch-disabled { cursor: not-allowed; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .gv-switch-track, .gv-switch-thumb { transition: none; } }

/* Project cards (TaskCard, ProjectCard) and calendar chips say how they stand with the whole card: a faint red when late,
   a faint green when finished, with a finished card's contents a little faded. The words and marks still say it too. */
.gv-task-is-late, .gv-project-is-late { background: color-mix(in srgb, var(--negative-subtle) 38%, var(--background-elevated)); }
.gv-task-is-done, .gv-project-is-done { background: color-mix(in srgb, var(--positive-subtle) 42%, var(--background-elevated)); }
.gv-task-is-done .gv-task-brand, .gv-task-is-done .gv-task-title, .gv-task-is-done .gv-task-meta,
.gv-project-is-done .gv-project-brand, .gv-project-is-done .gv-project-title, .gv-project-is-done .gv-meter { opacity: 0.78; }
.gv-cal-chip-positive .gv-cal-chip-t, .gv-cal-chip-positive .gv-cal-chip-brand { opacity: 0.8; }

/* Phones, week list: the busy days before the chosen one, folded into one row above it. */
.gv-cal-earlier { display: flex; align-items: center; gap: var(--spacing-100); width: 100%; box-sizing: border-box; min-height: var(--component-height-200); margin: 0 0 var(--spacing-200); padding: 0 var(--spacing-300); border: 0; border-radius: var(--radius-default); background: var(--neutral-subtle); color: var(--heading); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.gv-cal-earlier:hover { background: var(--neutral-subtle-hover); }
.gv-cal-earlier:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-cal-earlier-n { margin-left: auto; font-weight: 500; color: var(--subdued); }
.gv-cal-earlier .gv-icon { color: var(--subdued); margin-left: 0; }

/* A menu group laid out as a row (layout: 'row'): short choices side by side in a track, the chosen one the raised
   selected thumb with bold text, the same selected style as SegmentedControl. */
.gv-account-row { position: relative; display: flex; gap: 2px; margin: var(--spacing-50) var(--spacing-200) var(--spacing-100); padding: 3px; border-radius: var(--radius-default); background: var(--background-layer-1); box-shadow: inset 0 0 0 1px var(--surface-edge); }
.gv-account-row .gv-account-opt { position: relative; z-index: 1; flex: 1 1 0; justify-content: center; min-height: var(--component-height-200); padding: 0; border-radius: calc(var(--radius-default) - 2px); background: transparent; transition: color 200ms ease; }
.gv-account-row .gv-account-opt[aria-checked="true"] { color: var(--heading); }
.gv-account-row .gv-account-opt:hover:not([aria-checked="true"]) { background: transparent; color: var(--heading); }
/* The raised thumb fills one slot and slides under the chosen glyph with a small overshoot. */
.gv-account-row-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - 2px * (var(--n, 3) - 1)) / var(--n, 3)); border-radius: calc(var(--radius-default) - 2px); background: var(--selected-fill); box-shadow: var(--selected-shadow); transform: translateX(calc((100% + 2px) * var(--i, 0))); transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.gv-account-row .gv-account-opt-active:not([aria-checked="true"]) { background: transparent; color: var(--heading); }
/* The focus ring on a row choice shows for the keyboard only, never on hover. */
.gv-account-menu-kbd .gv-account-row .gv-account-opt-active { box-shadow: inset 0 0 0 var(--border-width-200) var(--focus-indicator); }
@media (prefers-reduced-motion: reduce) { .gv-account-row-thumb { transition: none; } }

/* SideNav children: pages nested under an item (Workspace under Settings), indented so their labels line up with the
   parent's label. The parent of the current child keeps bold text; the thumb sits on the child. */
.gv-nav-sub { margin-top: 2px; padding-left: calc(20px + var(--spacing-200)); }
.gv-nav-sub .gv-nav-item { min-height: var(--component-height-100); }
.gv-nav-item-open { color: var(--heading); font-weight: 700; }
.gv-nav-collapsed .gv-nav-sub { padding-left: 0; }

/* The projects legend as one short row: To do, each stage's mark in order, Published; then Late. */
.gv-cal-legend-ramp { display: inline-flex; align-items: center; gap: var(--spacing-100); font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-cal-legend-marks { display: inline-flex; align-items: center; gap: 3px; }
.gv-cal-legend-marks > span { display: inline-flex; }

/* A menu item's progress bar (AccountMenuItem progress): thin, the width of the text, between the label and the detail. */
.gv-account-opt-meter { display: block; width: 100%; min-width: 140px; margin: 4px 0 2px; }

.gv-tabs::-webkit-scrollbar { display: none; }

/* ThemeGlyph: Auto, Light and Dark, outlined at rest, filled and moving once chosen. The sun core fills and its rays
   burst out and settle; the moon fills and its stars fade up one by one, then twinkle; Auto's half spins round. */
.gv-theme-glyph { flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gv-theme-glyph .gv-tg-fill, .gv-theme-glyph .gv-tg-half { fill: currentColor; fill-opacity: 0; transition: fill-opacity 260ms ease; }
.gv-tg-rays { transform-origin: 10px 10px; transition: transform 400ms ease; }
.gv-tg-stars path { fill: currentColor; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gv-tg-half { transform-origin: 10px 10px; transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), fill-opacity 260ms ease; }
.gv-tg-on .gv-tg-fill, [aria-checked="true"] > .gv-theme-glyph .gv-tg-fill, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-fill { fill-opacity: 1; }
.gv-tg-on .gv-tg-half, [aria-checked="true"] > .gv-theme-glyph .gv-tg-half, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-half { fill-opacity: 1; transform: rotate(180deg); }
.gv-tg-on .gv-tg-rays, [aria-checked="true"] > .gv-theme-glyph .gv-tg-rays, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-rays { transform: rotate(45deg) scale(1.08); animation: gv-tg-burst 720ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.gv-tg-on.gv-tg-light .gv-tg-fill, [aria-checked="true"] > .gv-tg-light .gv-tg-fill, [aria-pressed="true"] > .gv-tg-light .gv-tg-fill { transform-box: fill-box; transform-origin: center; animation: gv-tg-core 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.gv-tg-on .gv-tg-stars path, [aria-checked="true"] > .gv-theme-glyph .gv-tg-stars path, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-stars path { animation: gv-tg-star-up 520ms cubic-bezier(0.2, 0.9, 0.25, 1) both, gv-tg-twinkle 2.6s ease-in-out 900ms infinite; }
.gv-tg-stars g:nth-child(2) path { animation-delay: 90ms, 1.4s !important; }
.gv-tg-stars g:nth-child(3) path { animation-delay: 180ms, 1.1s !important; }
.gv-tg-stars g:nth-child(4) path { animation-delay: 270ms, 1.9s !important; }
.gv-tg-stars g:nth-child(5) path { animation-delay: 360ms, 1.6s !important; }
.gv-tg-stars g:nth-child(6) path { animation-delay: 450ms, 2.2s !important; }
@keyframes gv-tg-burst { 0% { transform: rotate(-30deg) scale(.35); opacity: 0; } 55% { transform: rotate(35deg) scale(1.32); opacity: 1; } 100% { transform: rotate(45deg) scale(1.08); opacity: 1; } }
@keyframes gv-tg-core { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes gv-tg-star-up { from { opacity: 0; transform: translateY(4px) scale(.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gv-tg-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) {
  .gv-tg-rays, .gv-tg-half { transition: none; }
  .gv-tg-on .gv-tg-rays, [aria-checked="true"] > .gv-theme-glyph .gv-tg-rays, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-rays,
  .gv-tg-on.gv-tg-light .gv-tg-fill, [aria-checked="true"] > .gv-tg-light .gv-tg-fill, [aria-pressed="true"] > .gv-tg-light .gv-tg-fill { animation: none; }
  .gv-tg-on .gv-tg-stars path, [aria-checked="true"] > .gv-theme-glyph .gv-tg-stars path, [aria-pressed="true"] > .gv-theme-glyph .gv-tg-stars path { animation: none; opacity: 1; }
}

/* OfferCard: one thing to buy, on a solid surface. A tinted icon tile and the name, a big price, what it includes as
   checked lines, then the action across the bottom. The one you have wears the selected style, a green ring and a
   "Yours" badge; the suggested one a thin accent ring. Lay several out in .gv-offers; they keep one height per row. */
.gv-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--spacing-200); align-items: stretch; max-width: 820px; }
@media (max-width: 767px) { .gv-offers { grid-template-columns: minmax(0, 1fr); } }
.gv-offer { position: relative; display: flex; flex-direction: column; gap: var(--spacing-100); box-sizing: border-box; padding: var(--spacing-200); border-radius: var(--radius-lg); background: var(--background-elevated); box-shadow: 0 0 0 1px var(--surface-edge), var(--surface-shadow); color: var(--body); }
.gv-offer-current { background: var(--selected-fill); box-shadow: 0 0 0 var(--border-width-200) var(--positive-visual), var(--selected-shadow); }
.gv-offer-featured { box-shadow: 0 0 0 var(--border-width-200) var(--accent-visual), var(--surface-shadow); }
.gv-offer-top { display: flex; align-items: center; gap: var(--spacing-100); min-height: 32px; }
.gv-offer-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-default); background: var(--accent-subtle); color: var(--accent-content); }
.gv-offer-current .gv-offer-icon { background: var(--positive-subtle); color: var(--positive-content); }
.gv-offer-title { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--heading); }
.gv-offer-badge { flex: none; align-self: flex-start; }
.gv-offer-flag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--accent-subtle); color: var(--accent-content); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.gv-offer-amount { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-75); }
.gv-offer-price { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--heading); font-variant-numeric: tabular-nums; }
.gv-offer-period { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--subdued); }
.gv-offer-detail { margin: calc(var(--spacing-100) * -1) 0 0; font-size: 14px; line-height: 20px; color: var(--subdued); }
.gv-offer-points { margin: 0; padding: var(--spacing-100) 0 0; border-top: 1px solid var(--surface-edge); list-style: none; display: flex; flex-direction: column; gap: var(--spacing-100); }
.gv-offer-points li { display: flex; gap: var(--spacing-75); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--body); }
.gv-offer-points .gv-icon { flex: none; margin-top: 2px; color: var(--positive-visual); }
.gv-offer-actions { margin-top: auto; padding-top: var(--spacing-100); display: flex; flex-direction: column; gap: var(--spacing-100); }
.gv-offer-actions > .gv-btn, .gv-offer-actions > button, .gv-offer-actions > a { width: 100%; justify-content: center; }

/* Changing between light and dark cross fades the whole page (with View Transitions, when the app starts one), so the
   switch is calm instead of a snap. Still under reduced motion. */
/* The old view stays solid underneath while the new one fades in over it, so nothing behind the page shows through midway. */
/* During a fade (data-fading on <html>), open menus and panels are drawn solid, so what's behind them never shows through
   midway. The navigation that is always there (side navigation, the toolbar, the tab bar) keeps its glass: turning it
   solid and back would pop at the start and end of every fade. */
html[data-fading] :is(.gv-account-menu, .gv-popover, .gv-picker-menu, .gv-drawer) { --glass-surface: var(--background-elevated); --glass-surface-strong: var(--background-elevated); --glass-blur: none; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: gv-view-fade-in 300ms var(--motion-ease-in-out) both; mix-blend-mode: normal; }
@keyframes gv-view-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Inside a highlighted menu item (Premium), the bar reads against the tint: a deeper track and a solid accent fill. */
.gv-account-opt-highlight .gv-account-opt-meter .gv-meter-track { height: 8px; background: color-mix(in srgb, var(--accent-content) 28%, var(--accent-subtle)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-content) 75%, var(--accent-subtle)); }
.gv-account-opt-highlight .gv-account-opt-meter .gv-meter-fill { background: var(--accent-content); }
.gv-account-opt-highlight-neutral .gv-account-opt-meter .gv-meter-track { background: color-mix(in srgb, var(--heading) 18%, transparent); }
.gv-account-opt-highlight-neutral .gv-account-opt-meter .gv-meter-fill { background: var(--heading); }
/* Highlighted blocks and the Premium tag in your menu get a little more room inside. */
.gv-account-opt-highlight { padding-top: var(--spacing-200); padding-bottom: var(--spacing-200); }
.gv-account-opt-highlight .gv-account-opt-meter { margin: 6px 0 4px; }
.gv-menu-head-addons .gv-premium { height: 26px; padding: 0 12px 0 10px; font-size: 12px; line-height: 16px; }
/* Hovering Light or Dark plays its motion as a preview (the rays burst, the stars fade up) without picking it. */
.gv-account-row .gv-account-opt:hover:not([aria-checked="true"]) > .gv-tg-light .gv-tg-rays { animation: gv-tg-burst 720ms cubic-bezier(0.2, 0.9, 0.25, 1) both; transform: rotate(45deg) scale(1.08); }
.gv-account-row .gv-account-opt:hover:not([aria-checked="true"]) > .gv-tg-dark .gv-tg-stars path { animation: gv-tg-star-up 520ms cubic-bezier(0.2, 0.9, 0.25, 1) both, gv-tg-twinkle 2.6s ease-in-out 900ms infinite; }
@media (prefers-reduced-motion: reduce) {
  .gv-account-row .gv-account-opt:hover:not([aria-checked="true"]) > .gv-tg-light .gv-tg-rays { animation: none; }
  .gv-account-row .gv-account-opt:hover:not([aria-checked="true"]) > .gv-tg-dark .gv-tg-stars path { animation: none; opacity: 1; }
}

/* CreditMeter: AI credits left in a tinted block, with a bar and what the next AI action uses. The fill and the track's edge
   hold 3:1 against the tint in every color theme (fill is the accent text color; the track is a deeper tint with an edge). */
.gv-credits { display: flex; align-items: flex-start; gap: var(--spacing-200); width: 100%; box-sizing: border-box; padding: var(--spacing-200) var(--spacing-300); border: 0; border-radius: var(--radius-default); background: var(--accent-subtle); color: var(--accent-content); font: inherit; text-align: start; text-decoration: none; }
.gv-credits-s { padding: var(--spacing-200) var(--spacing-300); }
.gv-credits-action { cursor: pointer; }
.gv-credits-action:hover { background: color-mix(in srgb, var(--accent-content) 10%, var(--accent-subtle)); }
.gv-credits-action:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-credits-icon { display: inline-flex; flex: none; margin-top: 1px; }

.gv-credits-label { font-size: 14px; line-height: 18px; font-weight: 700; }
.gv-credits-detail { font-size: 12px; line-height: 16px; font-weight: 500; }
.gv-credits-track { position: relative; display: block; height: 8px; margin: 0; border-radius: var(--radius-full); overflow: hidden; background: color-mix(in srgb, var(--accent-content) 28%, var(--accent-subtle)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-content) 75%, var(--accent-subtle)); }
.gv-credits-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent-content); transition: width var(--motion-duration-300) var(--motion-ease-out); }


.gv-credits-short { font-weight: 700; }
.gv-credits-go { display: inline-flex; flex: none; align-self: center; }
.gv-credits-neutral { background: var(--neutral-subtle); color: var(--heading); }
.gv-credits-neutral .gv-credits-detail { color: var(--subdued); }
.gv-credits-neutral .gv-credits-track { background: color-mix(in srgb, var(--heading) 22%, var(--neutral-subtle)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heading) 70%, var(--neutral-subtle)); }
.gv-credits-neutral .gv-credits-fill { background: var(--heading); }
.gv-credits-wrap { display: flex; flex-direction: column; gap: var(--spacing-200); }
.gv-credits-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-100); }
@media (prefers-reduced-motion: reduce) { .gv-credits-fill { transition: none; } }

/* Rating: stars in the accent text color (3:1 on any surface), empty ones in the subdued gray, with the words beside. */
.gv-rating { display: inline-flex; align-items: center; gap: var(--spacing-200); flex-wrap: wrap; }
.gv-rating-stars { display: inline-flex; align-items: center; gap: 2px; }
.gv-rating-star { display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--subdued); cursor: pointer; }
span.gv-rating-star { padding: 0 1px; cursor: default; }
.gv-rating-star.gv-rating-on { color: var(--accent-content); }
button.gv-rating-star:hover { background: var(--neutral-subtle); }
button.gv-rating-star:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-rating-words { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-rating-s .gv-rating-words { font-size: 12px; line-height: 16px; }
.gv-rating-empty { font-weight: 500; color: var(--subdued); }
@media (prefers-reduced-motion: no-preference) { .gv-rating-star { transition: color var(--motion-duration-100) var(--motion-ease-out), background var(--motion-duration-100) var(--motion-ease-out); } }

/* SearchDialog: search everything from anywhere. A glass menu over a scrim (the navigation layer), one field on top and
   grouped results below. On phones it fills the screen. */
.gv-search { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 12vh var(--spacing-300) var(--spacing-300); border: 0; box-sizing: border-box; background: transparent; color: var(--body); overflow: hidden; }
.gv-search:not([open]) { display: none; }
.gv-search[open] { display: flex; justify-content: center; align-items: flex-start; }
.gv-search::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.gv-search-box { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); border-radius: var(--radius-xl); background: var(--glass-surface-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-elevation); overflow: hidden; }
.gv-search-field { display: flex; align-items: center; gap: var(--spacing-200); padding: 0 var(--spacing-300); min-height: 60px; border-bottom: var(--border-width-100) solid var(--divider); color: var(--subdued); }
.gv-search-field input { flex: 1; min-width: 0; height: 56px; border: 0; padding: 0; background: transparent; color: var(--heading); font: inherit; font-size: 17px; font-weight: 500; outline: none; }
.gv-search-field input::placeholder { color: var(--subdued); opacity: 1; }
.gv-search-field input::-webkit-search-cancel-button { display: none; }
.gv-search-close { display: inline-flex; align-items: center; padding: 4px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--subdued); cursor: pointer; }
.gv-search-cancel { display: none; }
.gv-search-close:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-search-results { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-100); }
.gv-search-results:empty { display: none; }
.gv-search-group + .gv-search-group { margin-top: var(--spacing-100); }
.gv-search-group-label { padding: var(--spacing-100) var(--spacing-200) 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--subdued); }
.gv-search-item { display: flex; align-items: center; gap: var(--spacing-200); min-height: 44px; padding: 6px var(--spacing-200); border-radius: var(--radius-default); cursor: pointer; }
.gv-search-item-active { background: var(--selected-fill); box-shadow: var(--selected-shadow); }
.gv-search-icon { display: inline-flex; flex: none; color: var(--subdued); }
.gv-search-item-active .gv-search-icon { color: var(--heading); }
.gv-search-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gv-search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--heading); }
.gv-search-item-active .gv-search-title { font-weight: 700; }
.gv-search-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-search-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--neutral-subtle); color: var(--subdued); font-family: var(--font-code); font-size: 11px; line-height: 20px; font-weight: 600; }
.gv-search-empty { margin: 0; padding: var(--spacing-400) var(--spacing-300); text-align: center; color: var(--subdued); font-size: 14px; }
.gv-search-foot { display: flex; align-items: center; gap: 4px; margin: 0; padding: var(--spacing-100) var(--spacing-300); border-top: var(--border-width-100) solid var(--divider); font-size: 12px; line-height: 16px; color: var(--subdued); }
@media (max-width: 767px) {
  .gv-search-esc { display: none; }
  .gv-search-cancel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-100); font-size: 16px; font-weight: 600; color: var(--accent-content); }
  .gv-search { padding: 0; }
  .gv-search-box { width: 100%; max-height: none; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top); }
  .gv-search-foot { display: none; }
}
html[data-fading] .gv-search-box { --glass-surface-strong: var(--background-elevated); --glass-blur: none; }

/* ReplyPanel: why Draft can't run yet, beside the button. */
.gv-reply-why { align-self: center; font-size: 14px; line-height: 18px; color: var(--subdued); }
.gv-cal-order-hint { margin: var(--spacing-100) 0 0; font-size: 12px; line-height: 16px; color: var(--subdued); }
.gv-rating-clear { min-height: 32px; padding: 0 var(--spacing-100); border: 0; border-radius: var(--radius-sm); background: none; color: var(--accent-content); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gv-rating-clear:hover { background: var(--neutral-subtle); }
.gv-rating-clear:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }

/* The day list with a title row of its own (agendaTitle, onAgendaToggle): the row is the same height as the month's, so
   the list and the grid start level, and the hide or show button keeps the top right corner either way. */
.gv-cal-side { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-200); }
.gv-cal-side > .gv-cal-agenda { flex: 1 1 auto; }
.gv-cal-side-head { justify-content: space-between; }
.gv-cal-fill .gv-cal-side { min-height: 0; }
.gv-cal-fill .gv-cal-side > .gv-cal-agenda { flex: 1 1 0; }
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) { .gv-cal-fill > .gv-cal-side { flex: 2 1 0; width: 100%; } }
/* The title row stays one line: the month never wraps, and tools (search) shrink before the arrows and Today move. */
.gv-cal-head { flex-wrap: nowrap; min-width: 0; }
.gv-cal-title { white-space: nowrap; flex: none; }
.gv-cal-nav { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; }
.gv-cal-nav > :not(.gv-cal-tools) { flex: none; }
.gv-cal-tools { min-width: 0; flex: 1 1 auto; }
.gv-cal-tools .gv-field { flex: 1 1 140px; width: auto; min-width: 0; max-width: 240px; }
/* On phones the day list runs edge to edge with no box, so no edge either. */
.gv-cal-compact .gv-cal-agenda { border: 0; }
.gv-cal-tools { display: flex; align-items: center; gap: var(--spacing-100); margin-right: var(--spacing-100); }
.gv-reply-credits { margin-top: calc(var(--spacing-100) * -1); }

/* An ActionButton that isn't quiet is a solid button (button-fill, no edge), so it shows on a panel. The glass buttons in
   the toolbar keep their own look. */
.gv-ab:not(.gv-ab-quiet):not(.gv-ab-selected):not(.gv-ab-negative):not(.gv-notify-floating > *) { background: var(--button-fill); color: var(--heading); }
.gv-ab:not(.gv-ab-quiet):not(.gv-ab-selected):not(.gv-ab-negative):not(.gv-notify-floating > *):hover { background: var(--button-fill-hover); }

/* BackLink sits on the backdrop above a page's title, so it's accent text (allowed there), not body gray. */
.gv-back { color: var(--accent-content); }
.gv-back:hover { color: var(--accent-content); }

/* A card's footer wraps instead of squeezing: its line of facts keeps a readable width, and a rating or tag moves to
   the next line when there isn't room beside it. */
.gv-card-footer { flex-wrap: wrap; }
.gv-card-footer > .gv-meta { flex: 1 1 auto; min-width: min(100%, 180px); }
.gv-cal-nomatch { flex: none; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); white-space: nowrap; }

/* CreditMeter: the name and "20% used" on top, the bar, then when they reset and "60 / 300" under the bar on the right. */
.gv-credits { align-items: center; }
.gv-credits-text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label pct" "track track" "detail count" "note note"; align-items: center; column-gap: var(--spacing-300); row-gap: var(--spacing-75); }
.gv-credits-label { grid-area: label; white-space: nowrap; }
.gv-credits-detail { grid-area: detail; }
.gv-credits-track { grid-area: track; }
.gv-credits-pct { grid-area: pct; font-size: 14px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gv-credits-count { grid-area: count; justify-self: end; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gv-credits-note { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--spacing-85); font-size: 12px; line-height: 16px; font-weight: 600; }
.gv-credits-note .gv-icon { flex: none; }
.gv-credits-wrap { align-self: stretch; }
/* Phones: an open search takes its own line under the month, full width, so neither is squeezed. */
.gv-cal-compact .gv-cal-head:has(.gv-cal-tools .gv-field) { flex-wrap: wrap; row-gap: var(--spacing-200); }
.gv-cal-compact .gv-cal-head:has(.gv-cal-tools .gv-field) > .gv-cal-nav { display: contents; }
.gv-cal-compact .gv-cal-head:has(.gv-cal-tools .gv-field) .gv-cal-tools { order: 3; flex: 1 1 100%; margin: 0; }
.gv-cal-compact .gv-cal-head:has(.gv-cal-tools .gv-field) .gv-cal-tools .gv-field { max-width: none; }
/* Size M (a page like Billing) has more room inside and a larger name and bar, to sit with the panel's rows. */
.gv-credits:not(.gv-credits-s) { padding: var(--spacing-300) var(--spacing-400); border-radius: var(--radius-lg); }
.gv-credits:not(.gv-credits-s) .gv-credits-label { font-size: 16px; line-height: 20px; }
.gv-credits:not(.gv-credits-s) .gv-credits-track { height: 10px; }
.gv-credits:not(.gv-credits-s) .gv-credits-pct { font-size: 16px; line-height: 20px; }
.gv-credits:not(.gv-credits-s) .gv-credits-count { font-size: 14px; line-height: 18px; }

/* DataTable: titles at the top that sort, rows that open from anywhere on them. Solid surface (inside a panel). */
.gv-table-wrap { width: 100%; overflow-x: auto; }
.gv-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; color: var(--body); }
.gv-table th { padding: 0 var(--spacing-200) var(--spacing-100); text-align: start; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--subdued); white-space: nowrap; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-table th:first-child, .gv-table td:first-child { padding-left: var(--spacing-100); }
.gv-table th:last-child, .gv-table td:last-child { padding-right: var(--spacing-100); }
.gv-table .gv-table-end { text-align: end; }
.gv-table-sort { display: inline-flex; align-items: center; gap: var(--spacing-75); margin: 0 calc(var(--spacing-75) * -1); padding: var(--spacing-75); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.gv-table-sort:hover { background: var(--neutral-subtle); color: var(--heading); }
.gv-table-sort:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: 1px; }
.gv-table-sorted { color: var(--heading); font-weight: 700; }
.gv-table-arrow { flex: none; }
.gv-table-arrow-up { transform: rotate(180deg); }
.gv-table-arrow-idle { opacity: 0; }
.gv-table-sort:hover .gv-table-arrow-idle, .gv-table-sort:focus-visible .gv-table-arrow-idle { opacity: .6; }
.gv-table td { padding: var(--spacing-200); vertical-align: middle; border-bottom: var(--border-width-100) solid var(--divider); }
.gv-table tbody tr:last-child td { border-bottom: 0; }
.gv-table-row-link { cursor: pointer; }
.gv-table-row-link:hover td { background: var(--neutral-subtle); }
.gv-table-row-link:hover td:first-child { border-radius: var(--radius-default) 0 0 var(--radius-default); }
.gv-table-row-link:hover td:last-child { border-radius: 0 var(--radius-default) var(--radius-default) 0; }
.gv-table-link { color: var(--heading); font-weight: 700; text-decoration: none; border-radius: var(--radius-sm); }
.gv-table-link:focus-visible { outline: var(--focus-indicator-thickness) solid var(--focus-indicator); outline-offset: var(--focus-indicator-gap); }
.gv-table tr { position: relative; }
@media (prefers-reduced-motion: no-preference) { .gv-table-row-link td { transition: background var(--motion-duration-100) var(--motion-ease-out); } }
/* Phones: each row is a short card, the first cell on top and the rest as a line under it. Sorting is in Filter and sort. */
@media (max-width: 767px) {
  .gv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gv-table, .gv-table tbody { display: block; }
  .gv-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-75) var(--spacing-200); padding: var(--spacing-200) var(--spacing-100); border-bottom: var(--border-width-100) solid var(--divider); }
  .gv-table tbody tr:last-child { border-bottom: 0; }
  .gv-table td { display: block; padding: 0; border: 0; }
  .gv-table td.gv-table-first { flex: 1 1 100%; }
  .gv-table .gv-table-phone-hide { display: none; }
  .gv-table-row-link:hover td { background: none; }
}

/* Hiding or showing the calendar's day list (onAgendaToggle): its width slides to nothing and back, and the month
   resizes with it. The list keeps its own width inside, so it slides out of view instead of squeezing. */
.gv-cal-side { flex: 0 0 var(--gv-cal-agenda, 300px); overflow: hidden; }
.gv-cal-side > * { min-width: var(--gv-cal-agenda, 300px); box-sizing: border-box; }
.gv-cal-side-closed { flex-basis: 0; margin-left: calc(var(--spacing-300) * -1); }
@media (prefers-reduced-motion: no-preference) {
  .gv-cal-side { transition: flex-basis var(--motion-duration-400) var(--motion-ease-in-out), margin-left var(--motion-duration-400) var(--motion-ease-in-out); }
}
/* A tablet in portrait stacks the list under the month: hidden, it simply takes no room. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) { .gv-cal-fill > .gv-cal-side-closed { flex: 0 0 0; margin: 0; } .gv-cal-side > * { min-width: 0; } }

/* Highlighted menu blocks (AI credits, Admin) keep each line to one line: a long one ends in an ellipsis, never wraps. */
.gv-account-opt-highlight .gv-account-opt-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drawer placement center: a large panel in the middle of the screen (a centered peek), scaling in from just below. */
.gv-drawer.gv-drawer-center { top: 50%; left: 50%; right: auto; bottom: auto; width: min(var(--gv-drawer-w, 760px), calc(100vw - var(--spacing-600) * 2)); height: min(880px, calc(100vh - var(--spacing-600) * 2)); transform: translate(-50%, -50%); animation: gv-center-in var(--motion-duration-300) var(--motion-ease-out); }
.gv-drawer-leaving .gv-drawer.gv-drawer-center { animation: gv-center-out var(--motion-duration-300) var(--motion-ease-in-out) forwards; }
@keyframes gv-center-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes gv-center-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } }
@media (max-width: 767px) {
  .gv-drawer.gv-drawer-center { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; transform: none; animation: gv-sheet-in var(--motion-duration-400) var(--motion-ease-out); }
  .gv-drawer-leaving .gv-drawer.gv-drawer-center { animation: gv-sheet-out var(--motion-duration-400) var(--motion-ease-in-out) forwards; }
}
@media (prefers-reduced-motion: reduce) { .gv-drawer.gv-drawer-center, .gv-drawer-leaving .gv-drawer.gv-drawer-center { animation: none; } }
/* Open as (in a drawer's actions): side, center or full page, as a small group of icon buttons. */
.gv-drawer-openas { display: inline-flex; align-items: center; gap: var(--spacing-50); padding: var(--spacing-50); border-radius: var(--radius-default); background: var(--neutral-subtle); }