/* ============================================================
   ZUNVI ATLAS — ADMIN REVIEW
   Design tokens inherited from app.css.
   Scope all selectors to Atlas administration components.
   ============================================================ */

.atlas-admin {
    padding-block: clamp(2.5rem, 6vw, 5.5rem) 6rem;
}

.atlas-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}

    .atlas-admin-header h1 {
        font-family: "Manrope", sans-serif;
        font-size: clamp(2.4rem, 5vw, 4.6rem);
        font-weight: 600;
        letter-spacing: -.06em;
        line-height: 1.1;
        margin: .75rem 0 1rem;
    }

.atlas-admin-subtitle {
    max-width: 620px;
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 0;
}

.atlas-admin-counter {
    flex: 0 0 auto;
    min-width: 148px;
    padding: 1.4rem;
    text-align: center;
    border: 1px solid rgba(67,229,233,.25);
    border-radius: 18px;
    background: rgba(67,229,233,.045);
}

.atlas-counter-number,
.atlas-counter-label {
    display: block;
}

.atlas-counter-number {
    font-family: "Manrope", sans-serif;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cyan);
}

.atlas-counter-label {
    margin-top: .4rem;
    color: var(--muted);
    font-size: .76rem;
}

.atlas-workspace {
    padding-top: 3rem;
}

.atlas-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

    .atlas-section-heading h2 {
        font: 600 clamp(1.5rem, 3vw, 2rem) "Manrope", sans-serif;
        letter-spacing: -.04em;
        margin: .6rem 0;
    }

    .atlas-section-heading p:not(.kicker) {
        color: var(--muted);
        margin: 0;
    }

.atlas-refresh {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1rem;
    text-decoration: none;
    color: var(--ink);
    font-size: .85rem;
}

    .atlas-refresh:hover {
        border-color: var(--cyan);
        color: var(--cyan);
    }

.atlas-queue-meta {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: .78rem;
}

.atlas-import-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.atlas-import-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient( 140deg, rgba(16,35,54,.95), rgba(9,21,37,.98) );
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .atlas-import-card:hover {
        transform: translateY(-3px);
        border-color: rgba(67,229,233,.38);
        box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }

.atlas-card-visual {
    min-height: 310px;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient( circle at 52% 44%, rgba(67,229,233,.16), transparent 45% ), linear-gradient(155deg, #10263a, #171936);
    border-right: 1px solid var(--line);
}

.atlas-visual-orbit {
    position: absolute;
    width: 185px;
    aspect-ratio: 1;
    border: 1px solid rgba(67,229,233,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(67,229,233,.025), 0 0 0 58px rgba(67,229,233,.025);
}

.atlas-business-initial {
    position: relative;
    z-index: 1;
    color: rgba(217,245,255,.48);
    font: 500 5.5rem "Manrope", sans-serif;
}

.atlas-visual-caption {
    position: absolute;
    bottom: 1.2rem;
    left: .8rem;
    right: .8rem;
    text-align: center;
    font-size: .57rem;
    letter-spacing: .12em;
    color: var(--muted);
}

.atlas-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
}

.atlas-card-topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.atlas-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .71rem;
    color: #f7d498;
}

.atlas-status-dot {
    width: 7px;
    height: 7px;
    background: #efbc6a;
    border-radius: 50%;
}

.atlas-card-type {
    color: var(--muted);
    font-size: .57rem;
    letter-spacing: .13em;
}

.atlas-card-content h3 {
    font: 600 clamp(1.12rem, 2vw, 1.4rem) / 1.35 "Manrope", sans-serif;
    letter-spacing: -.025em;
    margin: 1.4rem 0 1rem;
    overflow-wrap: anywhere;
}

.atlas-card-source span {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}

.atlas-card-source strong {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.atlas-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.5rem 0 1rem;
}

    .atlas-card-facts dt {
        color: var(--muted);
        font-size: .68rem;
    }

    .atlas-card-facts dd {
        margin: .25rem 0 0;
        font-size: .76rem;
    }

.atlas-card-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-bottom: 1rem;
}

.atlas-import-id {
    color: var(--muted);
    font-size: .7rem;
    font-family: monospace;
}

.atlas-source-link {
    color: var(--cyan);
    font-size: .74rem;
}

.atlas-review-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    text-decoration: none;
    border-radius: 11px;
    background: var(--cyan);
    color: #06141c;
    font-size: .82rem;
    font-weight: 700;
    transition: background .2s ease;
}

    .atlas-review-action:hover {
        background: #91f8fb;
    }

.atlas-message,
.atlas-empty-state {
    padding: 3rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

.atlas-message-error {
    border-color: rgba(255,120,120,.45);
}

.atlas-message p {
    margin: .5rem 0 0;
}

.atlas-empty-state {
    text-align: center;
}

.atlas-empty-symbol {
    display: block;
    color: var(--cyan);
    font-size: 3rem;
}

.atlas-empty-state h3 {
    margin: .7rem 0;
}

.atlas-empty-state p {
    color: var(--muted);
    max-width: 440px;
    margin-left:auto;margin-right:auto;margin-inline:auto;
}

.atlas-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: .85rem;
}

    .atlas-pagination a {
        color: var(--cyan);
    }

@media (max-width: 1000px) {
    .atlas-import-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .atlas-admin-header,
    .atlas-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .atlas-admin-counter {
        align-self: flex-start;
    }

    .atlas-import-card {
        grid-template-columns: 1fr;
    }

    .atlas-card-visual {
        min-height: 190px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .atlas-visual-orbit {
        width: 135px;
    }

    .atlas-business-initial {
        font-size: 4rem;
    }

    .atlas-card-content {
        padding: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-import-card,
    .atlas-review-action {
        transition: none;
    }

        .atlas-import-card:hover {
            transform: none;
        }
}

/* ============================================================
   IMPORT REVIEW WORKSPACE
   ============================================================ */

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

.atlas-back {
    margin-bottom: 1.5rem;
}

    .atlas-back a {
        color: var(--muted);
    }

.atlas-state {
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.atlas-state-pending { color: var(--cyan); }
.atlas-state-approved { color: #ffd27a; }
.atlas-state-published { color: #8af0b0; }
.atlas-state-rejected { color: #ff9b9b; }

.atlas-message-success {
    border-color: rgba(138,240,176,.45);
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
}

.atlas-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.atlas-panel {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

    .atlas-panel h2 {
        font-family: "Manrope", sans-serif;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

.atlas-table-scroll {
    overflow-x: auto;
}

.atlas-proposal-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .92rem;
}

    .atlas-proposal-table th,
    .atlas-proposal-table td {
        padding: .75rem .6rem;
        border-top: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

    .atlas-proposal-table thead th {
        border-top: 0;
        color: var(--muted);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .atlas-proposal-table tbody th {
        font-weight: 600;
        white-space: nowrap;
    }

.atlas-evidence,
.atlas-field-note {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .78rem;
}

.atlas-evidence {
    font-family: monospace;
}

.atlas-unknown {
    color: var(--muted);
    font-style: italic;
}

.atlas-field-status {
    display: inline-block;
    padding: .15rem .55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .74rem;
    white-space: nowrap;
}

.atlas-field-status-proposed { color: var(--cyan); }
.atlas-field-status-needsreview { color: #ffd27a; }
.atlas-field-status-unknown { color: var(--muted); }

.atlas-blockers {
    margin: 1rem 0 0;
    padding: .9rem 1rem;
    border-left: 3px solid #ffd27a;
    background: rgba(255,210,122,.07);
}

.atlas-facts {
    margin: 0;
}

    .atlas-facts div {
        padding: .65rem 0;
        border-top: 1px solid var(--line);
    }

    .atlas-facts dt {
        color: var(--muted);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .atlas-facts dd {
        margin: .2rem 0 0;
        overflow-wrap: anywhere;
    }

.atlas-actions {
    margin-top: 1.5rem;
}

.atlas-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.atlas-actions form,
.atlas-publish-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}

    .atlas-actions form h3 {
        margin: 0;
        font-size: 1.05rem;
    }

    .atlas-actions form p {
        margin: 0;
        color: var(--muted);
    }

.atlas-actions label {
    font-weight: 600;
}

.atlas-actions input,
.atlas-actions select,
.atlas-actions textarea {
    width: min(100%, 460px);
    padding: .65rem .8rem;
    border: 1px solid rgba(180,220,255,.3);
    border-radius: 10px;
    background: var(--night);
    color: var(--ink);
}

.atlas-button {
    margin-top: .4rem;
    padding: .7rem 1.2rem;
    border: 1px solid var(--cyan);
    border-radius: 999px;
    background: var(--cyan);
    color: #06141c;
    font-weight: 700;
    cursor: pointer;
}

    .atlas-button:hover {
        background: #91f8fb;
    }

.atlas-button-secondary {
    background: transparent;
    color: var(--ink);
    border-color: rgba(180,220,255,.4);
}

    .atlas-button-secondary:hover {
        background: rgba(180,220,255,.08);
    }

.atlas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
}

    .atlas-tabs a {
        padding: .5rem 1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        text-decoration: none;
    }

        .atlas-tabs a:hover {
            color: var(--ink);
        }

        .atlas-tabs a[aria-current="page"] {
            border-color: var(--cyan);
            color: var(--cyan);
            font-weight: 600;
        }

.atlas-batch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

    .atlas-batch p {
        margin: 0;
        color: var(--muted);
    }

        .atlas-batch p strong {
            color: var(--ink);
        }

.atlas-change-decision {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .atlas-review-layout,
    .atlas-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Dawn (light) theme for the review workspace. Colours meet WCAG AA on
   white cards and the ivory page (docs/design/palette.md). */
html[data-theme="light"] .atlas-admin-counter { background: rgba(9, 113, 108, .05); border-color: rgba(9, 113, 108, .25); }
html[data-theme="light"] .atlas-import-card { background: #ffffff; box-shadow: 0 10px 30px rgba(28, 31, 63, .06); }
html[data-theme="light"] .atlas-import-card:hover { border-color: rgba(9, 113, 108, .45); box-shadow: 0 14px 34px rgba(28, 31, 63, .1); }
html[data-theme="light"] .atlas-card-visual { background: linear-gradient(145deg, #ece6f5, #dfefee); }
html[data-theme="light"] .atlas-visual-orbit { background: rgba(9, 113, 108, .04); border-color: rgba(9, 113, 108, .2); }
html[data-theme="light"] .atlas-business-initial { color: rgba(28, 31, 63, .35); }
html[data-theme="light"] .atlas-status,
html[data-theme="light"] .atlas-state-approved,
html[data-theme="light"] .atlas-field-status-needsreview { color: #8a5a00; }
html[data-theme="light"] .atlas-status-dot { background: #c77a12; }
html[data-theme="light"] .atlas-state-published { color: #1f7a45; }
html[data-theme="light"] .atlas-state-rejected { color: #b3261e; }
html[data-theme="light"] .atlas-blockers { color: #6b4700; border-left-color: #c77a12; background: rgba(201, 122, 18, .08); }
html[data-theme="light"] .atlas-message-error { border-color: rgba(179, 38, 30, .45); }
html[data-theme="light"] .atlas-message-success { border-color: rgba(31, 122, 69, .45); }
html[data-theme="light"] .atlas-review-action,
html[data-theme="light"] .atlas-button { color: #ffffff; }
html[data-theme="light"] .atlas-review-action:hover,
html[data-theme="light"] .atlas-button:hover { background: #075f5b; border-color: #075f5b; }
html[data-theme="light"] .atlas-actions input,
html[data-theme="light"] .atlas-actions select,
html[data-theme="light"] .atlas-actions textarea { background: #ffffff; border-color: rgba(28, 31, 63, .25); }
html[data-theme="light"] .atlas-button-secondary { border-color: rgba(28, 31, 63, .3); color: #1c1f3f; }
html[data-theme="light"] .atlas-button-secondary:hover { background: rgba(28, 31, 63, .05); }

/* ============================================================
   SHOP STUDIO (/admin/shop): link → check → draft → approve → live.
   ============================================================ */
.studio .studio-flow{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;margin:1.2rem 0;padding:0;counter-reset:step}
.studio .studio-flow a{display:flex;flex-direction:column;gap:.15rem;min-height:64px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;color:var(--muted);text-decoration:none;position:relative}
.studio .studio-flow li:not(:last-child) a::after{content:"→";position:absolute;right:-.55rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.8rem}
.studio .studio-flow a[aria-current]{border-color:var(--cyan);color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.studio .studio-step-count{font:700 1.3rem/1 'Manrope',sans-serif;color:var(--ink)}
.studio .studio-step-name{font-size:.8rem}
.studio .studio-add{padding:1rem;border:1px dashed var(--line);border-radius:16px;margin-bottom:1.4rem}
.studio .studio-add h2{font-size:1.05rem;margin:0 0 .6rem}
.studio .studio-add form{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.studio textarea,.studio input,.studio select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.studio .studio-add textarea{flex:1 1 320px}
.studio .studio-hint{color:var(--muted);font-size:.8rem;margin:.4rem 0 0}
.studio .studio-message{padding:.7rem 1rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.studio .studio-message.is-error{border-color:#d9534f;background:color-mix(in srgb,#d9534f 12%,transparent)}
.studio .studio-list{display:grid;gap:1rem}
.studio .studio-item{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.studio .studio-item:has(.studio-link){grid-template-columns:1fr}
.studio .studio-link a{word-break:break-all;color:var(--cyan)}
.studio .studio-details dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .8rem;margin:0 0 .6rem}
.studio .studio-details dt{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.studio .studio-details dd{margin:0;word-break:break-word}
.studio .studio-label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:.6rem 0 .3rem}
.studio .studio-keywords{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.studio .studio-keywords li{padding:.2rem .6rem;border-radius:999px;border:1px solid var(--line);font-size:.8rem}
.studio .studio-keywords .is-missing{color:var(--muted);font-style:italic}
.studio .studio-owner-note{padding:.6rem .8rem;border-left:3px solid var(--violet);background:color-mix(in srgb,var(--violet) 10%,transparent);border-radius:0 10px 10px 0}
.studio .studio-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
.studio .studio-actions form{margin:0}
.studio .studio-primary,.studio .studio-secondary,.studio .studio-danger,.studio .studio-note summary{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border-radius:999px;font-weight:600;text-decoration:none;cursor:pointer;font:inherit}
.studio .studio-primary{border:0;background:var(--cyan);color:#06141c;font-weight:700}
html[data-theme="light"] .studio .studio-primary{background:#09716c;color:#fff}
.studio .studio-secondary,.studio .studio-note summary{border:1px solid var(--line);background:transparent;color:var(--ink)}
.studio .studio-danger{border:1px solid #d9534f;background:transparent;color:#d9534f}
.studio .studio-note{list-style:none}
.studio .studio-note summary::-webkit-details-marker{display:none}
.studio .studio-note[open]{flex-basis:100%}
.studio .studio-note form{display:grid;gap:.5rem;margin-top:.5rem;max-width:520px}
.studio .studio-editor{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:1.4rem;align-items:start}
.studio .studio-editor .studio-preview{position:sticky;top:1rem;display:grid;gap:.8rem}
.studio .studio-form{display:grid;gap:1rem}
.studio .studio-form fieldset{border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;display:grid;gap:.7rem}
.studio .studio-form legend{padding:0 .4rem;font-weight:700}
.studio .studio-form label{display:grid;gap:.3rem;font-size:.9rem}
.studio .studio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}
.studio .studio-empty{color:var(--muted)}
.studio :is(a,button,summary,input,textarea,select):focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media (max-width:760px){
  .studio .studio-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio .studio-flow li:nth-child(3n) a::after{display:none}
  .studio .studio-item,.studio .studio-editor{grid-template-columns:1fr}
  .studio .studio-editor .studio-preview{position:static}
}

/* ============================================================
   ACCOUNT (/account): the tools behind sign-in, as cards.
   ============================================================ */
.account-hub{padding-block:2.5rem 4rem;max-width:760px}
.account-hub-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.account-hub-header h1{margin:.2rem 0}
.account-avatar{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 16%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);font:700 1.6rem/1 'Manrope',sans-serif;color:var(--ink)}
.account-tools{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.account-tool{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;min-height:72px;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.account-tool:hover{border-color:color-mix(in srgb,var(--cyan) 60%,transparent);transform:translateY(-1px)}
.account-tool:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.account-tool-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--cyan);font-size:1.2rem}
.account-tool-text{display:grid;gap:.2rem}
.account-tool-text span{color:var(--muted);font-size:.86rem}
.account-tool-count{color:var(--cyan);font-weight:700;font-size:.85rem;white-space:nowrap}
.account-signout{margin-top:1.6rem}
.account-signout button{min-height:44px;padding:.5rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.account-signout button:hover{color:var(--ink);border-color:var(--ink)}
.account-signout button:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media (max-width:560px){
  .account-tool{grid-template-columns:auto 1fr}
  .account-tool-count{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.account-tool{transition:none}.account-tool:hover{transform:none}}

/* At a glance (/account): labelled bars with counts and a plain next step. */
.glance{margin:0 0 1.6rem;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.glance h2{margin:0;font:600 1.15rem/1.3 'Manrope',sans-serif}
.glance-caption{margin:.3rem 0 1rem;color:var(--muted);font-size:.82rem}
.glance-bar{margin:0 0 .9rem}
.glance-label{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;font-weight:600;font-size:.92rem}
.glance-label span:last-child{font-variant-numeric:tabular-nums}
.glance-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.glance-fill{display:block;height:100%;min-width:0;border-radius:inherit;transform-origin:left;animation:glance-grow .9s cubic-bezier(.2,.8,.2,1) both}
.glance-good{background:#2a9d7f}
.glance-warm{background:#c49a3a}
.glance-alert{background:#a06a72}
.glance-next{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);font-size:1.02rem;line-height:1.45}
@keyframes glance-grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.glance-fill{animation:none}}

/* Account passport card and People list (decision 0010). */
.account-passport{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;min-height:72px;margin:0 0 1.4rem;padding:1rem 1.1rem;border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 14%,var(--panel)),var(--panel));color:var(--ink);text-decoration:none}
.account-passport:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.account-passport-seal{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px dashed var(--violet);color:var(--violet);font:800 1rem 'Manrope',sans-serif;transform:rotate(-10deg)}
.glance-cool{background:#2f7fb0}
.people-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.people-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;min-height:60px;padding:.6rem .9rem;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.people-initial{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 16%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 50%,transparent);font:700 .85rem 'Manrope',sans-serif}
.people-text{display:grid;gap:.15rem;min-width:0}
.people-text span{color:var(--muted);font-size:.82rem}
.people-stamps{color:var(--violet);font-weight:700;font-size:.82rem;white-space:nowrap}
@media (max-width:560px){.people-list li{grid-template-columns:auto 1fr}.people-stamps{grid-column:2}}

/* Activity (Pages/SiteActivity.razor, decision 0012). Charts: one series each,
   thin columns with 4px rounded tops and 2px gaps, a tooltip on hover or
   focus, and a table view. Long-hand properties for Safari 13. */
.activity-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:0 0 1.6rem}
.activity-tile{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.activity-tile strong{display:block;font:600 2rem/1.1 'Manrope',sans-serif;font-variant-numeric:tabular-nums}
.activity-tile span{display:block;margin-top:.2rem;font-weight:600;font-size:.9rem}
.activity-tile small{display:block;margin-top:.3rem;color:var(--muted);font-size:.8rem}
.activity-chart-total{margin:-.4rem 0 .6rem;color:var(--muted);font-size:.88rem}
.activity-chart-total strong{color:var(--ink);font-size:1.1rem;font-variant-numeric:tabular-nums}
.activity-columns{position:relative;display:flex;align-items:flex-end;height:150px;padding-top:2.2rem;border-bottom:1px solid var(--line)}
.activity-col{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;margin-right:2px;outline:none;cursor:default}
.activity-col:last-child{margin-right:0}
.activity-col i{display:block;width:100%;height:var(--h);border-radius:4px 4px 0 0;background:#2f7fb0;transform-origin:bottom;animation:activity-rise .8s cubic-bezier(.2,.8,.2,1) both}
.activity-signins .activity-col i{background:#2a9d7f}
.activity-col.is-zero i{height:2px;border-radius:1px;background:rgba(128,140,160,.35)}
.activity-col:hover i,.activity-col:focus-visible i{opacity:.8}
.activity-col:focus-visible{box-shadow:0 0 0 2px var(--violet,#9c72ff)}
.activity-col::after{content:attr(data-tip);position:absolute;bottom:calc(var(--h) + 8px);left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;padding:.3rem .55rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:.78rem;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:opacity 120ms}
.activity-col:nth-child(-n+5)::after{left:0;transform:none}
.activity-col:nth-last-child(-n+5)::after{left:auto;right:0;transform:none}
.activity-col:hover::after,.activity-col:focus-visible::after{opacity:1}
.activity-axis{display:flex;justify-content:space-between;margin-top:.35rem;color:var(--muted);font-size:.75rem}
.activity-table-view{margin-top:.9rem}
.activity-table-view summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600}
.activity-table-wrap{overflow-x:auto;margin-top:.6rem}
.activity-table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.activity-table th,.activity-table td{padding:.5rem .6rem .5rem 0;border-top:1px solid var(--line);text-align:left;white-space:nowrap}
.activity-table thead th{border-top:0;color:var(--muted);font-size:.78rem;font-weight:600}
.activity-table tbody th{font-weight:600}
.activity-list{list-style:none;margin:0;padding:0}
.activity-list li{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--line)}
.activity-list li:first-child{border-top:0}
.activity-what{min-width:0;margin-right:.8rem}
.activity-what strong{display:block;overflow-wrap:anywhere}
.activity-what>span{display:block;color:var(--muted);font-size:.84rem;overflow-wrap:anywhere}
.activity-when{color:var(--muted);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.activity-kind{display:inline-block;margin-right:.45rem;padding:.05rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;vertical-align:.08em;background:rgba(47,127,176,.22)}
.activity-kind-signout{background:rgba(160,106,114,.28)}
.activity-kind-signup{background:rgba(42,157,127,.28)}
.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:0 0 1.6rem}
.activity-grid .glance{margin:0}
.activity-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-empty{margin:0;color:var(--muted)}
@keyframes activity-rise{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.activity-col i{animation:none}}

/* Publish by rule (decision 0017). Long-hand spacing: no flex gap, for Safari 13. */
.rule-panel {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.rule-panel h2 {
    margin: .2rem 0 .4rem;
}

.rule-panel h3 {
    margin: 0 0 .3rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.rule-panel h4 {
    margin: 1.2rem 0 .4rem;
}

.rule-lead,
.rule-muted {
    margin: 0 0 .6rem;
    color: var(--muted);
}

.rule-muted {
    font-size: .9rem;
}

.rule-message {
    margin: .8rem 0;
    padding: 1rem 1.25rem;
}

.rule-sources,
.rule-list,
.rule-sample {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.rule-sample {
    list-style: decimal;
    padding-left: 1.6rem;
}

.rule-sources li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: .7rem 0;
    border-top: 1px solid var(--line);
}

.rule-sources li:first-child {
    border-top: 0;
}

.rule-sources li > span {
    min-width: 0;
    margin: 0 1rem .4rem 0;
}

.rule-sources strong,
.rule-sources .rule-muted {
    display: block;
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.rule-list li,
.rule-sample li {
    padding: .45rem 0;
    border-top: 1px solid var(--line);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.rule-list li:first-child,
.rule-sample li:first-child {
    border-top: 0;
}

.rule-list li > strong {
    display: inline-block;
    min-width: 3rem;
    margin-right: .5rem;
}

.rule-list li > a,
.rule-sample li > a {
    display: block;
    font-weight: 600;
}

.rule-list li > span,
.rule-sample li > span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.rule-list li > strong + span {
    display: inline;
}

.rule-stats {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: .8rem 0 0;
}

.rule-stats div {
    min-width: 6.5rem;
    margin: 0 .8rem .8rem 0;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.rule-stats dt {
    color: var(--muted);
    font-size: .78rem;
}

.rule-stats dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rule-details {
    margin: .8rem 0 0;
}

.rule-details summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

.rule-rules {
    margin: .5rem 0 0;
    padding-left: 1.4rem;
    color: var(--muted);
}

.rule-form {
    margin: 1.1rem 0 0;
}

.rule-confirm {
    display: block;
    margin: 0 0 .8rem;
}

.rule-confirm input {
    margin-right: .5rem;
    vertical-align: middle;
}

.rule-links {
    margin: 1rem 0 0;
}

.rule-links a {
    display: inline-block;
    margin: 0 1.2rem .4rem 0;
}

@media (max-width: 480px) {
    .rule-panel {
        padding: 1rem;
    }

    .rule-sources li .atlas-button,
    .rule-form .atlas-button {
        display: block;
        width: 100%;
        text-align: center;
    }
}