/* ============================================================================ ACCOUNT SURFACE — the neutral, scheme-aware design system for the platform-owned customer pages: /account/*, /auth/*, /manage/*. WHY THIS FILE EXISTS -------------------- These three surfaces are CROSS-TENANT. One sign-in spans every studio, and /account/bookings aggregates reservations from photographers who have never heard of each other. Dressing that in one studio's seasonal palette was always slightly wrong; dressing it in a studio's fixed background photo made it unreadable. So the surface is neutral and the studio keeps the chrome. WHAT IS NEUTRAL AND WHAT IS NOT ------------------------------- Neutral: page canvas, card surfaces, text, borders, inputs, tables. Studio: primary buttons, active nav, focus rings, icon accents, links. Fixed: status colours (green/amber/red). Those carry universal meaning and must never pick up a studio accent — a "cancelled" pill rendered in a studio's festive green reads as "confirmed". ⚠⚠ THE DARK SCHEME IS THE POINT, AND IT DID NOT EXIST BEFORE THIS FILE. booking.css and manage/_chrome carried ~40 `.mode-dark` rules and ThemeRuntime emitted , but NOTHING in this app has ever added the `mode-dark` class — not a controller, not a Blade file, not one line of JS. Every one of those rules was dead. Do not wire this file's dark scheme through `.mode-dark`; it is driven by the media query below and it works with no JavaScript at all. THE THREE-STATE SCHEME DRIVER ----------------------------- :root-ish light tokens on .acct → the default @media (prefers-color-scheme: dark) body:not([data-preferred-theme="light"]) → browser preference wins body[data-preferred-theme="dark"] → studio forces dark A studio that has explicitly chosen light or dark in `preferred_theme_mode` still overrides the browser; 'auto' (the default for every account today) follows the visitor. There is no flash-of-wrong-theme because nothing here is decided at runtime. ⚠ NEVER give a colour its ONLY definition inside the dark block. Every token is declared light-first on `.acct` and only REDEFINED in dark. A token that exists in one branch only renders as `unset` in the other, which is transparent — an invisible card, not an obviously broken one. LOAD ORDER ---------- Pushed via partials/_account_chrome.blade.php into @stack('head'), which the layout renders AFTER booking.css. That ordering is load-bearing: these rules beat booking.css's .location-card / .btn-book / .auth-card on load order alone, so no paint declaration here needs !important — and none may have one, because an !important colour would beat the DARK branch too and freeze itself at its light value on a dark card. The one thing load order cannot beat is another !important: booking.css:89-119 sets `font-size: … !important` on h1..h6, so the five heading sizes here must match it in kind. Those, plus the prefers-reduced-motion block where the keyword is the idiom, are the only !important declarations in this file. ============================================================================ */ /* ============================================================================ 1. TOKENS ============================================================================ */ .acct { /* ---- Neutral surface scale (light) ---- */ --ac-bg: #f5f6f8; /* page canvas behind everything */ --ac-surface: #ffffff; /* cards */ --ac-surface-2: #f3f5f7; /* insets: rows, inputs, table stripes */ --ac-surface-3: #e9ecf0; /* hover on an inset */ --ac-border: #e2e6eb; /* hairline */ --ac-border-strong: #cbd2da; /* input borders, dividers that must read */ /* ---- Text ---- */ --ac-heading: #0e1116; --ac-text: #1b1f26; --ac-text-2: #545c66; /* secondary — meets AA on --ac-surface */ --ac-text-3: #767f8a; /* muted — labels, timestamps, AA at 14px+ */ /* ---- Studio accent ---- --ac-accent is the studio's raw accent, used ONLY as a solid fill under white text. Never as text or a hairline: theme-bw ships rgba(8,6,4,1) (invisible on dark) and theme-navy ships a pale gold (invisible on light). --ac-accent-text is the corrected one — see the note on it below. */ --ac-accent: var(--accent-orange, #4f46e5); --ac-accent-on: #ffffff; /* ⚠ --ac-accent-text is DECLARED TWICE on purpose. The first declaration is the raw accent, which is exactly today's behaviour and is what a browser without color-mix() keeps. The second corrects the accent AWAY from the current surface — darkening it on light, lightening it on dark — so a pale gold stays readable on white and a near-black stays readable on charcoal. Deleting either line breaks one of those. */ --ac-accent-text: var(--ac-accent); --ac-accent-text: color-mix(in srgb, var(--ac-accent) 84%, #000); /* Accent tints. rgba fallback first, color-mix second — same contract. */ --ac-accent-soft: rgba(0, 0, 0, .04); --ac-accent-soft: color-mix(in srgb, var(--ac-accent) 10%, transparent); --ac-accent-softer: rgba(0, 0, 0, .02); --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 6%, transparent); --ac-accent-line: rgba(0, 0, 0, .12); --ac-accent-line: color-mix(in srgb, var(--ac-accent) 30%, transparent); /* ---- Semantic status. FIXED — never studio-tinted. ---- */ --ac-ok: #15803d; --ac-ok-bg: rgba(34, 197, 94, .11); --ac-ok-line: rgba(34, 197, 94, .34); --ac-ok-led: #22c55e; --ac-warn: #a16207; --ac-warn-bg: rgba(245, 158, 11, .12); --ac-warn-line: rgba(245, 158, 11, .36); --ac-warn-led: #f59e0b; --ac-danger: #b91c1c; --ac-danger-bg: rgba(239, 68, 68, .10); --ac-danger-line: rgba(239, 68, 68, .32); --ac-danger-led: #ef4444; --ac-info: #1d4ed8; --ac-info-bg: rgba(59, 130, 246, .10); --ac-info-line: rgba(59, 130, 246, .32); --ac-info-led: #3b82f6; /* ---- Elevation + geometry ---- */ --ac-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .14); --ac-shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 44px -20px rgba(16, 24, 40, .22); --ac-radius: 14px; --ac-radius-sm: 10px; --ac-radius-lg: 20px; --ac-radius-pill: 999px; /* ---- Focus ring. Studio-tinted but always visible: the ring is drawn against the page canvas, not against the accent, so a near-black accent reads on light and the lightened variant reads on dark. ---- */ --ac-focus: var(--ac-accent-text); /* Tell the browser which native widget palette to use — checkboxes, radios, scrollbars, date pickers, autofill. Without this, dark mode renders a white checkbox on a charcoal card. */ color-scheme: light; color: var(--ac-text); font-family: var(--body-font, system-ui, -apple-system, "Segoe UI", sans-serif); } /* ---- Dark: browser preference, unless the studio has pinned light ---- */ @media (prefers-color-scheme: dark) { body:not([data-preferred-theme="light"]) .acct { --ac-bg: #0e1014; --ac-surface: #16191f; --ac-surface-2: #1d212a; --ac-surface-3: #262b35; --ac-border: #282d37; --ac-border-strong: #39404b; --ac-heading: #f3f5f8; --ac-text: #e4e8ed; --ac-text-2: #a5adb8; --ac-text-3: #848d99; --ac-accent-text: var(--ac-accent); --ac-accent-text: color-mix(in srgb, var(--ac-accent) 62%, #fff); --ac-accent-soft: rgba(255, 255, 255, .06); --ac-accent-soft: color-mix(in srgb, var(--ac-accent) 20%, transparent); --ac-accent-softer: rgba(255, 255, 255, .03); --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 12%, transparent); --ac-accent-line: rgba(255, 255, 255, .16); --ac-accent-line: color-mix(in srgb, var(--ac-accent) 42%, transparent); --ac-ok: #4ade80; --ac-ok-bg: rgba(34, 197, 94, .15); --ac-warn: #fbbf24; --ac-warn-bg: rgba(245, 158, 11, .15); --ac-danger: #fb7185; --ac-danger-bg: rgba(239, 68, 68, .15); --ac-info: #93b4fd; --ac-info-bg: rgba(59, 130, 246, .16); --ac-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); --ac-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 20px 44px -20px rgba(0, 0, 0, .8); color-scheme: dark; } } /* ---- Dark: the studio has explicitly chosen it. Duplicated rather than combined with the media query because a selector list is invalid the moment one selector in it is unsupported, and because these must apply with the browser preference set to light. ---- */ body[data-preferred-theme="dark"] .acct { --ac-bg: #0e1014; --ac-surface: #16191f; --ac-surface-2: #1d212a; --ac-surface-3: #262b35; --ac-border: #282d37; --ac-border-strong: #39404b; --ac-heading: #f3f5f8; --ac-text: #e4e8ed; --ac-text-2: #a5adb8; --ac-text-3: #848d99; --ac-accent-text: var(--ac-accent); --ac-accent-text: color-mix(in srgb, var(--ac-accent) 62%, #fff); --ac-accent-soft: rgba(255, 255, 255, .06); --ac-accent-soft: color-mix(in srgb, var(--ac-accent) 20%, transparent); --ac-accent-softer: rgba(255, 255, 255, .03); --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 12%, transparent); --ac-accent-line: rgba(255, 255, 255, .16); --ac-accent-line: color-mix(in srgb, var(--ac-accent) 42%, transparent); --ac-ok: #4ade80; --ac-ok-bg: rgba(34, 197, 94, .15); --ac-warn: #fbbf24; --ac-warn-bg: rgba(245, 158, 11, .15); --ac-danger: #fb7185; --ac-danger-bg: rgba(239, 68, 68, .15); --ac-info: #93b4fd; --ac-info-bg: rgba(59, 130, 246, .16); --ac-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); --ac-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 20px 44px -20px rgba(0, 0, 0, .8); color-scheme: dark; } /* ============================================================================ 2. PAGE CANVAS ⚠ The scrim is a FIXED, FULL-VIEWPORT layer at z-index:-1. That is what covers a studio's `background-attachment: fixed` photo, which the layout paints onto and which no amount of card styling can make an account dashboard readable on top of. Negative z-index paints ABOVE the root background but BELOW every in-flow block descendant, so the navbar and footer — which are in normal flow — still render over it and the studio keeps its chrome. Do not "fix" this to z-index:0; that buries the nav. ============================================================================ */ .acct { position: relative; } .acct::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--ac-bg); } /* Content spacing. Bootstrap's container still owns the max-width and gutters (G12 — framework base first); this only sets the vertical rhythm. */ .acct-page { padding: 28px 0 64px; } @media (max-width: 767.98px) { .acct-page { padding: 18px 0 48px; } } /* Headings inside the surface take the neutral heading colour, overriding booking.css's global `h1..h6 { color: var(--heading-color) }` — a studio heading colour (often a deep navy) is unreadable on the dark canvas. */ .acct h1, .acct h2, .acct h3, .acct h4, .acct h5, .acct h6 { color: var(--ac-heading); } /* One focus treatment for everything interactive on the surface. */ .acct :focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .acct *, .acct *::before, .acct *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* ============================================================================ 3. PAGE HEADER ============================================================================ */ .acct-head { margin-bottom: 22px; } .acct-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ac-accent-text); } .acct-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac-accent); } .acct-title { margin: 0; font-size: clamp(1.5rem, 1.34rem + .7vw, 1.95rem) !important; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ac-heading); font-family: var(--heading-font, inherit); } .acct-lede { margin: 8px 0 0; max-width: 62ch; /* Fluid, like the title it sits under. This lede is the successor to the manage flow's .mng-hero .mng-sub, which was clamp()'d; the move into account.css flattened it to a fixed size. Floor holds the phone value. */ font-size: clamp(.93rem, .89rem + .18vw, 1.04rem); line-height: 1.6; color: var(--ac-text-2); } /* Title row that carries an action on the right. */ .acct-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ============================================================================ 4. SIDEBAR NAV Desktop: a sticky rail. Mobile: a horizontally-scrollable pill strip, which keeps every destination one tap away instead of pushing the page content below a nine-item stack. ============================================================================ */ .acct-side { position: sticky; top: 18px; } .acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); } .acct-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--ac-radius-sm); font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ac-text-2); transition: background-color .15s ease, color .15s ease; } .acct-nav-item .ic { flex: 0 0 18px; text-align: center; font-size: .95rem; color: var(--ac-text-3); transition: color .15s ease; } .acct-nav-item:hover { background: var(--ac-surface-2); color: var(--ac-text); } .acct-nav-item:hover .ic { color: var(--ac-text-2); } .acct-nav-item.is-active { background: var(--ac-accent-soft); color: var(--ac-accent-text); font-weight: 700; } .acct-nav-item.is-active .ic { color: var(--ac-accent-text); } .acct-nav-item--danger { color: var(--ac-text-2); } .acct-nav-item--danger:hover { background: var(--ac-danger-bg); color: var(--ac-danger); } .acct-nav-item--danger:hover .ic { color: var(--ac-danger); } .acct-nav-sep { height: 1px; margin: 7px 12px; background: var(--ac-border); } @media (max-width: 767.98px) { .acct-side { position: static; margin-bottom: 18px; } .acct-nav { flex-direction: row; flex-wrap: nowrap; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .acct-nav::-webkit-scrollbar { display: none; } .acct-nav-item { flex: 0 0 auto; white-space: nowrap; border-radius: var(--ac-radius-pill); padding: 8px 14px; } .acct-nav-sep { display: none; } } /* ============================================================================ 5. IDENTITY BLOCK (dashboard header) ============================================================================ */ .acct-ident { display: flex; align-items: center; gap: 14px; } .acct-avatar { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ac-accent-soft); border: 1px solid var(--ac-accent-line); color: var(--ac-accent-text); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .acct-ident .who { min-width: 0; } .acct-ident .who .nm { font-size: 1.12rem; font-weight: 700; color: var(--ac-heading); line-height: 1.25; } .acct-ident .who .em { font-size: .86rem; color: var(--ac-text-3); overflow-wrap: anywhere; } /* ============================================================================ 6. CARD ============================================================================ */ .ac-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); color: var(--ac-text); } .ac-card + .ac-card { margin-top: 16px; } .ac-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--ac-border); } .ac-card-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1rem !important; font-weight: 700; letter-spacing: -.01em; color: var(--ac-heading); } .ac-card-title .ic { color: var(--ac-accent-text); font-size: .95rem; } .ac-card-sub { margin: 4px 0 0; font-size: .85rem; color: var(--ac-text-3); line-height: 1.5; } .ac-card-body { padding: 20px; } .ac-card-body > :last-child { margin-bottom: 0; } .ac-card-foot { padding: 14px 20px; border-top: 1px solid var(--ac-border); background: var(--ac-surface-2); border-radius: 0 0 var(--ac-radius) var(--ac-radius); } /* Accent-tinted card, for a single call to action per page. */ .ac-card--accent { background: var(--ac-accent-softer); border-color: var(--ac-accent-line); } @media (max-width: 575.98px) { .ac-card-head, .ac-card-body { padding: 15px 16px; } .ac-card-foot { padding: 12px 16px; } } /* ============================================================================ 7. STAT TILES ============================================================================ */ .ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; } .ac-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); } .ac-stat .ic { width: 32px; height: 32px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--ac-accent-soft); color: var(--ac-accent-text); font-size: .88rem; } .ac-stat .n { font-size: 1.7rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ac-heading); font-variant-numeric: tabular-nums; } .ac-stat .k { font-size: .78rem; font-weight: 500; color: var(--ac-text-3); } /* ============================================================================ 8. ROWS + LISTS ============================================================================ */ .ac-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 15px 18px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); box-shadow: var(--ac-shadow); transition: border-color .15s ease, transform .15s ease; } .ac-row + .ac-row { margin-top: 10px; } .ac-row:hover { border-color: var(--ac-border-strong); } .ac-row-main { flex: 1 1 260px; min-width: 0; } .ac-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; } .ac-row-title { font-size: .99rem; font-weight: 700; color: var(--ac-heading); line-height: 1.3; } /* One metadata line: icon + text, dot-separated segments. */ .ac-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: .855rem; color: var(--ac-text-2); line-height: 1.5; } .ac-meta .ic { color: var(--ac-text-3); font-size: .8rem; } .ac-meta .sep { color: var(--ac-border-strong); } .ac-meta--quiet { color: var(--ac-text-3); font-size: .8rem; } /* Simple bulleted list, accent markers. */ .ac-list { margin: 0; padding-left: 20px; color: var(--ac-text-2); line-height: 1.75; font-size: .92rem; } .ac-list li::marker { color: var(--ac-accent-text); } /* Bordered stack of plain rows inside a card (sessions, activity, factors). */ .ac-stack { display: flex; flex-direction: column; } .ac-stack > * { padding: 13px 0; border-bottom: 1px solid var(--ac-border); } .ac-stack > *:first-child { padding-top: 0; } .ac-stack > *:last-child { padding-bottom: 0; border-bottom: 0; } /* An inset panel — a row-within-a-card that needs its own boundary. */ .ac-inset { padding: 13px 15px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-sm); } .ac-inset + .ac-inset { margin-top: 9px; } /* ============================================================================ 9. STATUS PILLS — fixed semantic colour, never studio-tinted. ⚠ Colour is never the only signal. Every pill carries its own word ("Confirmed", "Cancelled"), so the state survives with no colour perception. ============================================================================ */ .ac-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid transparent; border-radius: var(--ac-radius-pill); font-size: .755rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .ac-pill .led { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; } .ac-pill--ok { background: var(--ac-ok-bg); border-color: var(--ac-ok-line); color: var(--ac-ok); } .ac-pill--ok .led { background: var(--ac-ok-led); } .ac-pill--warn { background: var(--ac-warn-bg); border-color: var(--ac-warn-line); color: var(--ac-warn); } .ac-pill--warn .led { background: var(--ac-warn-led); } .ac-pill--danger { background: var(--ac-danger-bg); border-color: var(--ac-danger-line); color: var(--ac-danger); } .ac-pill--danger .led { background: var(--ac-danger-led); } .ac-pill--info { background: var(--ac-info-bg); border-color: var(--ac-info-line); color: var(--ac-info); } .ac-pill--info .led { background: var(--ac-info-led); } .ac-pill--neutral { background: var(--ac-surface-2); border-color: var(--ac-border); color: var(--ac-text-2); } .ac-pill--neutral .led { background: var(--ac-text-3); } .ac-pill--accent { background: var(--ac-accent-soft); border-color: var(--ac-accent-line); color: var(--ac-accent-text); } .ac-pill--accent .led { background: var(--ac-accent); } /* ============================================================================ 10. CODE CHIP — confirmation / photo codes ============================================================================ */ .ac-code { display: inline-block; padding: 3px 9px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .875rem; font-weight: 700; letter-spacing: .07em; color: var(--ac-heading); } .ac-code--lg { padding: 6px 14px; font-size: 1.1rem; letter-spacing: .12em; } .ac-code-label { font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ac-text-3); margin-bottom: 3px; } /* ============================================================================ 11. BUTTONS These override booking.css's .btn-book/.btn-outline-book on this surface by load order, but the views use .ac-btn directly so the two never interleave. ============================================================================ */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--ac-radius-sm); font-size: .9rem; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .ac-btn:active { transform: translateY(1px); } .ac-btn:disabled, .ac-btn.is-disabled { opacity: .55; pointer-events: none; } .ac-btn--primary { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-on); } .ac-btn--primary:hover { filter: brightness(1.08); color: var(--ac-accent-on); } .ac-btn--ghost { background: var(--ac-surface); border-color: var(--ac-border-strong); color: var(--ac-text); } .ac-btn--ghost:hover { background: var(--ac-surface-2); border-color: var(--ac-text-3); color: var(--ac-text); } .ac-btn--quiet { background: transparent; border-color: transparent; color: var(--ac-text-2); } .ac-btn--quiet:hover { background: var(--ac-surface-2); color: var(--ac-text); } .ac-btn--danger { background: transparent; border-color: var(--ac-danger-line); color: var(--ac-danger); } .ac-btn--danger:hover { background: var(--ac-danger-bg); border-color: var(--ac-danger); color: var(--ac-danger); } .ac-btn--danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; } .ac-btn--danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; } .ac-btn--sm { padding: 6px 13px; font-size: .82rem; border-radius: 8px; } .ac-btn--lg { padding: 12px 22px; font-size: 1rem; } .ac-btn--block { display: flex; width: 100%; } /* Text link that reads as a link without a full button's weight. */ .ac-link { color: var(--ac-accent-text); text-decoration: none; font-weight: 600; } .ac-link:hover { color: var(--ac-accent-text); text-decoration: underline; } .ac-link--quiet { color: var(--ac-text-2); font-weight: 500; text-decoration: none; } .ac-link--quiet:hover { color: var(--ac-text); text-decoration: underline; } /* A control that ACTS (submits a form, opens a disclosure) but reads as a link. ⚠ It must be a real