/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.
   Proprietary and confidential. See LICENSE in the project root. */

/* ═══════════════════════════════════════════════════════════════════════════
   rg-app.css — RG ONE, the signed-in system: the primitives every signed-in
   surface shares (cards, lists, chips, the photo gallery, the progress steps)
   and the office's own screens. Linked in the body by MainLayout, CrewLayout
   and PortalLayout, preloaded by App.razor (CLAUDE.md §2 "Layout", rules 2
   and 6: a class two surfaces use lives in a sheet both of them load). The
   installer's and the customer's own chrome is in rg-one.css.

   Every colour, gap and radius is a token: the Forge core tokens that
   forge-tokens.css re-tunes for RG (warm paper / warm graphite, the brand red)
   or the --rga-* scale below. Heights from the screen are dvh, never vh.
   Everything that moves stops under prefers-reduced-motion and data-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --rga-brand: var(--rg-brand);
    --rga-on-brand: var(--rg-on-brand);
    --rga-live: var(--ok);

    /* The one vertical rhythm of the system's pages. */
    --rga-gap-xs: 6px;
    --rga-gap-s: 10px;
    --rga-gap: 16px;
    --rga-gap-l: 24px;
    --rga-gap-xl: 36px;

    /* Type of the system, one step up from the dashboard's 14 px base. */
    --rga-fs-xs: 0.75rem;
    --rga-fs-sm: 0.8125rem;
    --rga-fs: 0.9375rem;
    --rga-fs-lg: 1.0625rem;
    --rga-fs-xl: 1.375rem;
    --rga-fs-2xl: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
    --rga-fs-hero: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);

    --rga-card-pad: 20px;
    --rga-radius-card: var(--r-xl);
    --rga-ring: 0 0 0 3px var(--accent-soft);
}

@media (min-width: 1100px) {
    :root { --rga-card-pad: 24px; }
}

/* ══ The Forge shell, in RG's clothes ══════════════════════════════════════ */

/* The page behind the canvas: paper with a faint warm light from the top
   right, so a long screen never reads as a flat grey slab. */
.app {
    background:
        radial-gradient(1200px 520px at 100% -10%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.055), transparent 60%),
        var(--bg-0);
}

.app .header {
    background: color-mix(in oklab, var(--bg-0) 78%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--line);
}

.app .sidebar {
    background: var(--bg-1);
    border-right: 1px solid var(--line);
}

.app .sidebar .brand {
    gap: 12px;
}

/* The logo mark, not a gradient chip: the company's own sign. */
.brand-mark.rg-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

.brand-mark.rg-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.app .brand-name {
    font-weight: 700;
    letter-spacing: var(--rg-tracking-tight);
    font-size: 15px;
}

.app .brand-name b {
    color: var(--rga-brand);
    font-weight: 700;
}

.app .brand-version {
    font-family: var(--font-sans);
    color: var(--fg-3);
    font-size: 11px;
    letter-spacing: 0.01em;
}

.app .nav-section {
    padding: 18px 12px 6px;
    font-size: 10.5px;
    letter-spacing: var(--rg-tracking-caps);
    color: var(--fg-4);
}

.app .nav-item {
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fg-2);
}

.app .nav-item:hover {
    background: color-mix(in oklab, var(--fg-1) 5%, transparent);
    border-color: transparent;
}

.app .nav-item.active {
    background: var(--surface-elevated);
    border-color: var(--line);
    box-shadow: var(--shadow-md);
    color: var(--fg-1);
}

.app .nav-item.active::before {
    left: -12px;
    width: 3px;
    height: 50%;
    background: var(--rga-brand);
    box-shadow: none;
}

.app .nav-item .nav-icon {
    border-radius: 9px;
}

.app .nav-item.active .nav-icon {
    background: color-mix(in oklab, var(--rga-brand) 12%, transparent);
    color: var(--rga-brand);
}

.app .sidebar-user {
    padding: 12px;
}

.rga-sideuser {
    display: grid;
    gap: var(--rga-gap-s);
}

.rga-sideuser__who {
    display: flex;
    align-items: center;
    gap: var(--rga-gap-s);
    min-width: 0;
}

.rga-sideuser__text {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
}

.rga-sideuser__name,
.rga-sideuser__mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rga-sideuser__name { font-size: var(--rga-fs-sm); font-weight: 600; color: var(--fg-1); }
.rga-sideuser__mail { font-size: var(--rga-fs-xs); color: var(--fg-3); }

.app .canvas {
    padding: var(--rga-gap-l) var(--gutter-app, 20px) var(--rga-gap-xl);
}

@media (min-width: 1100px) {
    .app .canvas { padding: 32px clamp(28px, 3vw, 48px) 56px; }
}

/* Cards in the system do not jump under the pointer — only a card that is a
   link does. A static card that lifts reads as a button that does nothing. */
.rga-page .forge-card {
    border-radius: var(--rga-radius-card);
    padding: var(--rga-card-pad);
    box-shadow: var(--shadow-md);
}

.rga-page .forge-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: var(--line);
}

.rga-page .forge-card__header {
    margin-bottom: var(--rga-gap);
}

/* Buttons: the primary one carries the brand's light, the secondary one is a
   surface with an edge — never the grey slab that reads as disabled on paper. */
.forge-button {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.forge-button--primary {
    box-shadow: 0 8px 20px -10px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.7), inset 0 1px 0 oklch(1 0 0 / 0.2);
}

.forge-button--secondary {
    background: var(--surface-elevated);
    border: 1px solid var(--line-strong);
    color: var(--fg-1);
    box-shadow: var(--shadow-sm);
}

.forge-button--secondary:hover:not(:disabled) {
    background: var(--bg-1);
    border-color: color-mix(in oklab, var(--fg-1) 22%, transparent);
}

/* The upload's hint is a sentence, not code. */
.forge-file-upload__hint { font-family: var(--font-sans); }

/* A status pill reads as a word, not as code: the sans face, a little air. */
.forge-badge {
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    padding-block: 0.2rem;
}

/* ══ Page frame ════════════════════════════════════════════════════════════ */

.rga-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    font-size: var(--rga-fs);
}

.rga-page--narrow { max-width: 780px; }
.rga-page--wide { max-width: 1600px; }

.rga-back {
    display: inline-flex;
    align-items: center;
    gap: var(--rga-gap-xs);
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
    font-weight: 500;
    text-decoration: none;
    justify-self: start;
    transition: color var(--t-fast) var(--ease-out);
}

.rga-back:hover { color: var(--fg-1); }

.rga-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rga-gap);
}

/* A page's context picker beside its title (the delivery notes' job). */
.rga-head__context {
    flex: 0 1 360px;
    min-width: min(100%, 260px);
}

.rga-head > div:first-child {
    display: grid;
    gap: var(--rga-gap-xs);
    min-width: 0;
    flex: 1 1 320px;
}

.rga-head__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rga-gap-s);
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: var(--rga-fs-xs);
    letter-spacing: 0.04em;
}

.rga-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--rga-fs-2xl);
    font-weight: 700;
    letter-spacing: var(--rg-tracking-tight);
    color: var(--fg-1);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.rga-head__lead {
    margin: 0;
    color: var(--fg-2);
    font-size: var(--rga-fs-lg);
    line-height: 1.5;
    max-width: 68ch;
}

/* Links in a heading's lead are facts one can act on (the customer, a phone,
   an address): ink with a quiet underline, the accent on hover. */
.rga-head__lead a,
.rga-facts a {
    color: var(--fg-1);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}

.rga-head__lead a:hover,
.rga-facts a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.rga-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rga-gap-s);
    align-items: center;
}

.rga-status-picker { min-width: 220px; }

.rga-card-title {
    margin: 0;
    font-size: var(--rga-fs-lg);
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--fg-1);
}

.rga-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rga-gap-s);
}

.rga-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
    font-weight: 500;
    text-decoration: none;
}

.rga-card-link:hover { color: var(--accent); }

.rga-hint {
    margin: var(--rga-gap-xs) 0 0;
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
    line-height: 1.5;
}

.rga-note {
    margin: 0;
    padding: var(--rga-gap-s) var(--rga-gap);
    border-radius: var(--r-md);
    background: var(--bg-3);
    color: var(--fg-2);
    font-size: var(--rga-fs-sm);
}

.rga-empty {
    margin: 0;
    color: var(--fg-3);
}

.rga-empty--block {
    padding: 40px var(--rga-gap);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-xl);
    text-align: center;
}

.rga-pre { white-space: pre-line; margin: 0; }
.rga-warn { color: var(--warn); }
.rga-spacer { flex: 1 1 auto; }
.rga-count, .rga-count-inline { color: var(--fg-3); font-size: var(--rga-fs-sm); }
.rga-count { margin: 0; }
.rga-count-inline { font-weight: 400; margin-left: 4px; }

.rga-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ok);
    font-size: var(--rga-fs-sm);
}

.rga-total {
    margin: var(--rga-gap) 0 0;
    text-align: right;
    color: var(--fg-2);
}

/* The decision row under a form: separated by a rule, never welded to the last field. */
.rga-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rga-gap-s);
}

/* ══ Grids ═════════════════════════════════════════════════════════════════ */

.rga-grid-2, .rga-grid-3, .rga-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
}

@media (min-width: 900px) {
    .rga-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rga-grid-2--wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .rga-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rga-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 560px) {
    .rga-grid-2--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ KPI tiles ═════════════════════════════════════════════════════════════ */

.rga-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rga-gap);
}

@media (min-width: 1000px) {
    .rga-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rga-kpi {
    position: relative;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: var(--rga-card-pad);
    border: 1px solid var(--line);
    border-radius: var(--rga-radius-card);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md);
    color: var(--fg-1);
    text-decoration: none;
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

a.rga-kpi:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

a.rga-kpi:focus-visible { outline: none; box-shadow: var(--rga-ring), var(--shadow-md); }

.rga-kpi.is-hot::after {
    content: "";
    position: absolute;
    top: var(--rga-card-pad);
    right: var(--rga-card-pad);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rga-brand);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--rga-brand) 18%, transparent);
}

.rga-kpi__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    border-radius: 11px;
    background: var(--bg-3);
    color: var(--fg-2);
}

.rga-kpi.is-hot .rga-kpi__icon {
    background: color-mix(in oklab, var(--rga-brand) 12%, transparent);
    color: var(--rga-brand);
}

.rga-kpi__value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.rga-kpi__value--money { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
.rga-kpi__label { font-weight: 600; font-size: var(--rga-fs); }
.rga-kpi__hint { color: var(--fg-3); font-size: var(--rga-fs-sm); line-height: 1.4; }
.rga-kpis--small .rga-kpi { padding: var(--rga-gap); }
.rga-kpis--small .rga-kpi__value { font-size: var(--rga-fs-xl); }
.rga-kpis--small .rga-kpi__value--money { font-size: var(--rga-fs-lg); }

/* ══ Toolbar: segments + search on one baseline ═══════════════════════════ */

.rga-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rga-gap-s);
}

.rga-toolbar__search { flex: 1 1 260px; max-width: 420px; }
.rga-toolbar__end { display: flex; gap: var(--rga-gap-s); }

.rga-segments {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-3);
}

.rga-segment {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fg-2);
    font: inherit;
    font-size: var(--rga-fs-sm);
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 34px;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.rga-segment:hover { color: var(--fg-1); }

.rga-segment.is-on {
    background: var(--surface-elevated);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
    color: var(--fg-1);
    font-weight: 600;
}

.rga-segment:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-select-all {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rga-gap-s);
}

/* ══ Lists of records ═════════════════════════════════════════════════════ */

:where(.rga-page, .one) :is(ol, ul)[class*="rga-"] { margin: 0; padding: 0; list-style: none; }

.rga-list { display: grid; gap: var(--rga-gap-s); }

.rga-list__row {
    display: flex;
    align-items: center;
    gap: var(--rga-gap-s);
}

.rga-list__row > .rga-list__item { flex: 1 1 auto; }
.rga-list__pick { flex: 0 0 auto; }

.rga-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-s) var(--rga-gap);
    align-items: center;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
    color: var(--fg-1);
    text-decoration: none;
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.rga-list__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.rga-list__item:focus-visible { outline: none; box-shadow: var(--rga-ring); }

@media (min-width: 760px) {
    .rga-list__item { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.rga-list__number {
    font-family: var(--font-mono);
    font-size: var(--rga-fs-xs);
    color: var(--fg-3);
    white-space: nowrap;
}

.rga-list__main { display: grid; gap: 3px; min-width: 0; }
.rga-list__title { font-weight: 600; overflow-wrap: anywhere; }
.rga-list__meta { color: var(--fg-2); font-size: var(--rga-fs-sm); overflow-wrap: anywhere; }

.rga-list__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rga-gap-xs) var(--rga-gap-s);
}

@media (min-width: 760px) {
    .rga-list__side { flex-direction: column; align-items: flex-end; text-align: right; }
}

.rga-list__facts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px var(--rga-gap-s);
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
}

.rga-list__facts > span { display: inline-flex; align-items: center; gap: 4px; }
.rga-list__amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rga-list__crew { color: var(--fg-3); font-size: var(--rga-fs-sm); }

/* Rows inside a card. */
.rga-rows { display: grid; }

.rga-row {
    display: flex;
    align-items: center;
    gap: var(--rga-gap-s);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.rga-row:first-child { padding-top: 0; }
.rga-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rga-row__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rga-row__title { color: var(--fg-1); font-weight: 550; text-decoration: none; overflow-wrap: anywhere; }
a.rga-row__title:hover { color: var(--accent); }
.rga-row__meta { margin: 0; color: var(--fg-3); font-size: var(--rga-fs-sm); }

.rga-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
}

.rga-dot.is-live {
    background: var(--rga-live);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--rga-live) 22%, transparent);
    animation: rga-pulse 2.2s ease-in-out infinite;
}

@keyframes rga-pulse {
    50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--rga-live) 6%, transparent); }
}

/* ══ Chips, facts, fieldsets ══════════════════════════════════════════════ */

.rga-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.rga-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--fg-2);
    font-size: var(--rga-fs-xs);
    font-weight: 500;
    line-height: 1.5;
}

.rga-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px var(--rga-gap);
    margin: 0;
}

@media (min-width: 560px) {
    .rga-facts { grid-template-columns: max-content minmax(0, 1fr); }
}

.rga-facts dt { color: var(--fg-3); font-size: var(--rga-fs-sm); }
.rga-facts dd { margin: 0 0 var(--rga-gap-s); color: var(--fg-1); overflow-wrap: anywhere; }

@media (min-width: 560px) {
    .rga-facts dd { margin-bottom: 0; }
}

.rga-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.rga-fieldset > legend {
    padding: 0;
    margin-bottom: var(--rga-gap-xs);
    font-size: var(--rga-fs-sm);
    font-weight: 500;
    color: var(--fg-2);
}

.rga-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--rga-gap-s) var(--rga-gap);
}

.rga-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rga-gap-s);
}

.rga-inline-form > :first-child { flex: 1 1 240px; }
.rga-contact { display: flex; flex-wrap: wrap; gap: var(--rga-gap-s); margin: 0; }

/* ══ Tabs ═════════════════════════════════════════════════════════════════ */

.rga-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* ══ Photos ═══════════════════════════════════════════════════════════════ */

.rga-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--rga-gap-s);
}

.rga-gallery__item { display: grid; gap: 6px; min-width: 0; }

.rga-gallery__open {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: var(--bg-3);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    box-shadow: inset 0 0 0 1px var(--line);
}

.rga-gallery__open img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}

.rga-gallery__open:hover img { transform: scale(1.035); }
.rga-gallery__open:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-gallery__shared {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-on);
    box-shadow: var(--shadow-md);
}

.rga-gallery__caption {
    color: var(--fg-2);
    font-size: var(--rga-fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rga-photo-view {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70dvh;
    object-fit: contain;
    border-radius: var(--r-md);
    background: var(--bg-3);
}

.rga-uploader { display: grid; gap: var(--rga-gap); }

/* ══ Delivery-note review ═════════════════════════════════════════════════ */

.rga-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
}

@media (min-width: 1200px) {
    .rga-review { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .rga-review__pdf { position: sticky; top: var(--rga-gap); }
}

.rga-review__pdf iframe {
    display: block;
    width: 100%;
    height: 80dvh;
    min-height: 420px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--bg-3);
}

@media (max-width: 759px) {
    .rga-review__pdf { display: none; }
}

.rga-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.rga-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rga-fs-sm);
}

.rga-table th,
.rga-table td {
    padding: 6px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.rga-table thead th { color: var(--fg-3); font-weight: 500; white-space: nowrap; }
.rga-table tfoot th { text-align: right; color: var(--fg-2); font-weight: 500; }
.rga-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.rga-table tr.is-off td { background: color-mix(in oklab, var(--warn) 10%, transparent); }
.rga-table tfoot tr.is-off td,
.rga-table tfoot tr.is-off th { color: var(--warn); }
.rga-lines { min-width: 760px; }
.rga-lines .forge-input { min-width: 0; width: 100%; padding-inline: 8px; }
.rga-lines td:nth-child(2) { width: 9ch; }
.rga-lines td:nth-child(4), .rga-lines td:nth-child(6), .rga-lines td:nth-child(7) { width: 11ch; }
.rga-lines__unit { width: 6ch; }

/* ══ Inquiries ════════════════════════════════════════════════════════════ */

.rga-inquiry { min-width: 0; }

/* ══ The office's legacy installer blocks (CrewJobPage before RG ONE) ═════ */

.rga-live {
    display: flex;
    align-items: center;
    gap: var(--rga-gap-s);
    padding: var(--rga-gap);
    border: 1px solid color-mix(in oklab, var(--rga-live) 45%, transparent);
    border-radius: var(--r-xl);
    background: color-mix(in oklab, var(--rga-live) 10%, var(--surface-elevated));
    color: var(--fg-1);
    text-decoration: none;
}

.rga-live__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rga-live__main > span { color: var(--fg-2); font-size: var(--rga-fs-sm); }

/* ══ Progress: the four steps a customer understands ══════════════════════ */

.rga-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rga-steps__item {
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 0;
}

.rga-steps__dot {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-4);
}

.rga-steps__item.is-done .rga-steps__dot { background: var(--ok); }

.rga-steps__item.is-now .rga-steps__dot {
    background: linear-gradient(90deg, var(--accent) 0 55%, var(--bg-4) 55% 100%);
}

.rga-steps__label {
    color: var(--fg-3);
    font-size: var(--rga-fs-xs);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.rga-steps__item.is-done .rga-steps__label,
.rga-steps__item.is-now .rga-steps__label { color: var(--fg-1); }

/* ══ The owner's overview ═════════════════════════════════════════════════ */

/* The answer first: a greeting and one sentence that says what the day holds. */
.rga-hello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
    padding: clamp(22px, 3vw, 36px);
    border-radius: var(--r-2xl);
    background:
        radial-gradient(900px 300px at 0% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.08), transparent 70%),
        var(--surface-elevated);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    isolation: isolate;
}

.rga-hello::after {
    content: "";
    position: absolute;
    inset: auto -60px -120px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid var(--line);
    box-shadow: 0 0 0 40px color-mix(in oklab, var(--fg-1) 1.5%, transparent), 0 0 0 80px color-mix(in oklab, var(--fg-1) 1%, transparent);
    z-index: -1;
    pointer-events: none;
}

@media (min-width: 900px) {
    .rga-hello { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.rga-hello__date {
    margin: 0;
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.rga-hello__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: var(--rga-fs-hero);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--fg-1);
}

.rga-hello__sentence {
    margin: 14px 0 0;
    max-width: 62ch;
    color: var(--fg-2);
    font-size: var(--rga-fs-lg);
    line-height: 1.55;
}

.rga-hello__sentence b { color: var(--fg-1); font-weight: 650; }

.rga-hello__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rga-gap-s);
}

/* What needs a decision: one row per thing, the verb first. */
.rga-attention {
    display: grid;
    gap: 8px;
}

.rga-attention__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--fg-1);
    text-decoration: none;
    min-width: 0;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

a.rga-attention__item:hover { background: var(--surface-elevated); border-color: var(--line-strong); }
a.rga-attention__item:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-attention__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--rga-brand) 11%, transparent);
    color: var(--rga-brand);
}

.rga-attention__item.is-calm .rga-attention__icon {
    background: color-mix(in oklab, var(--warn) 16%, transparent);
    color: color-mix(in oklab, var(--warn) 80%, var(--fg-1));
}

.rga-attention__text { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.rga-attention__title { font-weight: 600; overflow-wrap: anywhere; }
.rga-attention__meta { color: var(--fg-3); font-size: var(--rga-fs-sm); overflow-wrap: anywhere; }
.rga-attention__go { flex: 0 0 auto; color: var(--fg-4); }

.rga-allclear {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--ok) 9%, transparent);
    color: var(--fg-1);
}

.rga-allclear__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--ok) 18%, transparent);
    color: var(--ok);
}

.rga-allclear p { margin: 0; }
.rga-allclear span { display: block; color: var(--fg-3); font-size: var(--rga-fs-sm); }

/* Who is where: an avatar, the job, since when. */
.rga-people { display: grid; gap: 4px; }

.rga-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.rga-person:first-child { padding-top: 0; }
.rga-person:last-child { border-bottom: 0; padding-bottom: 0; }

.rga-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--bg-4), var(--bg-3));
    color: var(--fg-1);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px var(--line);
}

.rga-avatar.is-live::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--rga-live);
    box-shadow: 0 0 0 2px var(--surface-elevated);
}

.rga-person__main { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.rga-person__name { font-weight: 600; overflow-wrap: anywhere; }
.rga-person__job { color: var(--fg-3); font-size: var(--rga-fs-sm); text-decoration: none; overflow-wrap: anywhere; }
a.rga-person__job:hover { color: var(--accent); }
.rga-person__time { flex: 0 0 auto; color: var(--fg-2); font-size: var(--rga-fs-sm); font-variant-numeric: tabular-nums; text-align: right; }

/* Jobs in progress: a card per job, the phase as a bar. */
.rga-jobcards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap);
}

@media (min-width: 720px) {
    .rga-jobcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .rga-jobcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rga-jobcard {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
    color: var(--fg-1);
    text-decoration: none;
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

.rga-jobcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.rga-jobcard:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-jobcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rga-jobcard__title {
    display: block;
    margin: 0;
    font-size: var(--rga-fs-lg);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rga-jobcard__customer { display: block; margin: 4px 0 0; color: var(--fg-3); font-size: var(--rga-fs-sm); }

.rga-jobcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
}

.rga-jobcard__when { display: inline-flex; align-items: center; gap: 6px; }

.rga-stack {
    display: inline-flex;
}

.rga-stack .rga-avatar {
    width: 28px;
    height: 28px;
    font-size: 10.5px;
    box-shadow: 0 0 0 2px var(--surface-elevated);
}

.rga-stack .rga-avatar + .rga-avatar { margin-left: -8px; }

.rga-stack__none { color: var(--warn); font-size: var(--rga-fs-sm); }

/* The latest photographs from the sites, as a mosaic. */
.rga-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) {
    .rga-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rga-mosaic__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-lg);
    aspect-ratio: 4 / 3;
    background: var(--bg-3);
    color: #fff;
    text-decoration: none;
}

.rga-mosaic__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}

.rga-mosaic__item:hover img { transform: scale(1.04); }
.rga-mosaic__item:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-mosaic__label {
    position: absolute;
    inset: auto 0 0;
    padding: 28px 10px 8px;
    background: linear-gradient(transparent, rgb(0 0 0 / 0.62));
    font-size: var(--rga-fs-xs);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The overview's two columns: the work on the left, the people on the right. */
.rga-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
}

@media (min-width: 1100px) {
    .rga-split { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
}

.rga-split__main,
.rga-split__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-xl);
    align-content: start;
    min-width: 0;
}

.rga-split__side { gap: var(--rga-gap-l); }

/* The website at a glance, on the owner's overview: one number, one sentence. */
.rga-webglance {
    display: grid;
    gap: 4px;
    padding: var(--rga-card-pad);
    border: 1px solid var(--line);
    border-radius: var(--rga-radius-card);
    background:
        radial-gradient(420px 180px at 100% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.08), transparent 70%),
        var(--surface-elevated);
    box-shadow: var(--shadow-md);
    color: var(--fg-1);
    text-decoration: none;
    transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.rga-webglance:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.rga-webglance:focus-visible { outline: none; box-shadow: var(--rga-ring); }

.rga-webglance__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.rga-webglance__head .rga-kpi__icon { margin: 0; }
.rga-webglance__head .rga-card-title { flex: 1 1 auto; }

.rga-webglance__value {
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.rga-webglance__text { color: var(--fg-2); font-size: var(--rga-fs-sm); }

.rga-webglance__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
}

.rga-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rga-gap-s);
    margin: 0 0 var(--rga-gap);
}

.rga-section-title h2 {
    margin: 0;
    font-size: var(--rga-fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ══ Motion ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .rga-dot.is-live { animation: none; }
    :root:not([data-motion="full"]) :is(.rga-kpi, .rga-jobcard, .rga-gallery__open img, .rga-mosaic__item img) { transition: none; }
}

:root[data-motion="reduced"] .rga-dot.is-live { animation: none; }
:root[data-motion="reduced"] :is(.rga-kpi, .rga-jobcard, .rga-gallery__open img, .rga-mosaic__item img) { transition: none; }

/* ══ Delivery notes: what the documents contain ═══════════════════════════ */

/* The import: the words on the left, a large drop target on the right. */
.rga-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-l);
    padding: var(--rga-card-pad);
    border: 1px solid var(--line);
    border-radius: var(--rga-radius-card);
    background:
        radial-gradient(600px 220px at 100% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07), transparent 70%),
        var(--surface-elevated);
    box-shadow: var(--shadow-md);
}

@media (min-width: 1000px) {
    .rga-import { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
}

.rga-import__text,
.rga-import__drop { display: grid; gap: var(--rga-gap); min-width: 0; }

.rga-import__drop .forge-file-upload { min-height: 150px; border-radius: var(--r-lg); }

/* Which notes the figures describe — said once, above them. */
.rga-scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--fg-2);
    font-size: var(--rga-fs-sm);
    font-weight: 500;
}

/* The ranked bars are Forge's (ForgeRankedBars); RG only marks the row of notes
   that are on no job yet, so it reads as the one to deal with. */
.rga-warn-row .forge-ranked-bars__name { color: var(--warn); font-weight: 600; }

/* The merged material. */
.rga-material td { padding-block: 10px; }
.rga-material__name { display: block; font-weight: 550; color: var(--fg-1); }
.rga-material__meta { display: block; margin-top: 2px; color: var(--fg-3); font-size: var(--rga-fs-xs); }
.rga-material tfoot th { padding-top: 12px; font-size: var(--rga-fs); color: var(--fg-1); }

.rga-section-block { display: grid; gap: var(--rga-gap); }

/* What to do with the picked notes: a bar that stays at the bottom of the
   screen while the list scrolls, so the decision is always one tap away. */
.rga-actionbar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: color-mix(in oklab, var(--surface-elevated) 90%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: var(--shadow-xl);
}

.rga-actionbar__count { flex: 1 1 auto; font-weight: 650; }
.rga-actionbar__job { flex: 1 1 260px; min-width: 0; }

/* ══ Hours worked on a job ════════════════════════════════════════════════ */

.rga-hours {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap);
    margin-bottom: var(--rga-gap-l);
    padding-bottom: var(--rga-gap-l);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
    .rga-hours { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--rga-gap-xl); }
}

.rga-hours__total { display: grid; gap: 2px; }
.rga-hours__value { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rga-hours__label { color: var(--fg-3); font-size: var(--rga-fs-sm); }

.rga-hours__people { display: grid; gap: 8px; }

.rga-hours__people li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
}

.rga-hours__people .rga-avatar { grid-row: 1 / 3; width: 32px; height: 32px; font-size: 11px; }
.rga-hours__people b { font-variant-numeric: tabular-nums; }
.rga-hours__people small { grid-column: 2 / 4; color: var(--fg-3); font-size: var(--rga-fs-xs); }

/* ══ The team's week ══════════════════════════════════════════════════════ */

.rga-plan-answer { display: grid; gap: 4px; }
.rga-plan-answer__week { margin: 0; color: var(--fg-3); font-size: var(--rga-fs-sm); font-weight: 500; }
.rga-plan-answer__sentence { margin: 0; font-size: var(--rga-fs-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }

/* The grid itself is Forge's ForgeResourcePlanner. */
.rga-plan-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    color: var(--fg-3);
    font-size: var(--rga-fs-xs);
}

.rga-plan-legend span { display: inline-flex; align-items: center; gap: 6px; }


/* ══ Site diary ═══════════════════════════════════════════════════════════ */

.rga-diary { display: grid; gap: var(--rga-gap-l); }

.rga-diary__compose {
    display: grid;
    gap: var(--rga-gap-s);
    padding: var(--rga-gap);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}

.rga-diary__compose-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rga-gap-s);
}

.rga-diary__list { display: grid; gap: var(--rga-gap); }

.rga-diary__entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.rga-diary__entry .rga-avatar { width: 34px; height: 34px; font-size: 12px; }
.rga-diary__body { display: grid; gap: 4px; min-width: 0; }

.rga-diary__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    color: var(--fg-3);
    font-size: var(--rga-fs-sm);
}

.rga-diary__meta b { color: var(--fg-1); font-weight: 600; }
.rga-diary__shared { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--rga-fs-xs); }
.rga-diary__text { color: var(--fg-1); line-height: 1.55; overflow-wrap: anywhere; }

.rga-diary__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 4px;
}

/* ══ Phases, inspections, service ═════════════════════════════════════════ */

.rga-phase-editor { display: grid; gap: var(--rga-gap); }
.rga-phase-rows { display: grid; gap: var(--rga-gap-s); }

.rga-phase-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rga-gap-s) var(--rga-gap);
    align-items: end;
    padding: var(--rga-gap-s) var(--rga-gap);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}

.rga-phase-row > :not(.rga-phase-row__num) { grid-column: 2; min-width: 0; }

@media (min-width: 900px) {
    .rga-phase-row { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
    .rga-phase-row > :not(.rga-phase-row__num) { grid-column: auto; }
}

.rga-phase-row__num {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--fg-2);
    font-size: var(--rga-fs-sm);
    font-weight: 650;
}

.rga-phases { display: grid; gap: 4px; }

.rga-phases__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px var(--rga-gap);
    min-height: 48px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.rga-phases__item:last-child { border-bottom: 0; }
.rga-phases__item.is-done .forge-checkbox__label { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.rga-phases__when { color: var(--fg-3); font-size: var(--rga-fs-sm); }

.rga-inspection { display: grid; gap: var(--rga-gap); }

.rga-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rga-gap-s) var(--rga-gap);
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
    .rga-service { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.rga-service__main { display: grid; gap: 4px; min-width: 0; }
.rga-service__top { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--fg-2); }
.rga-service__top b { color: var(--fg-1); }
.rga-service__top a { color: var(--fg-2); }
.rga-service__text { margin: 0; color: var(--fg-1); overflow-wrap: anywhere; }
.rga-service__when { margin: 0; color: var(--fg-3); font-size: var(--rga-fs-sm); }

.rga-service__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (min-width: 900px) {
    .rga-service__side { justify-content: flex-end; max-width: 380px; }
}