/* ==========================================================================
   Landing theme — the small layer on top of Bootstrap 5.3 RTL.
   Bootstrap does the grid, spacing, buttons, accordion, carousel and cards;
   everything here is either a design token or a shape Bootstrap has no class
   for (the hero sky, the plot chips, the stats band, the step connectors).
   ========================================================================== */

:root {
    --brand: #2f9e5e;
    --brand-dark: #1f7a45;
    --brand-darker: #14532d;
    --brand-soft: #e8f5ee;
    --brand-softer: #f2faf5;
    /* the brand as components, for the shadows and focus rings that need an
       alpha — `rgba(var(--brand-rgb), .15)`, never a second copy of the hex */
    --brand-rgb: 47, 158, 94;
    --ink: #1b2a23;
    --ink-muted: #6b7a73;
    --line: #e6eeea;
    --surface: #ffffff;
    --page: #f6f8f7;
    /* the rail's chip and its active link. It lived on `.panel-shell`, which
       is inside <html>, so it beat every palette the reader could pick and
       every panel kept a green accent whatever colour the rest went. */
    --accent: #4fc07f;
    /* the words on a brand fill — a button, the open tab, a chip. White in
       the light; in the dark every palette lifts its brand to read as an ink
       on the page, and white on that is 2.3-2.9:1, so it is the page colour */
    --on-brand: #fff;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* The type scale. Five steps on a 16px root, and nothing below --fs-xs.
       The skin used to carry about sixty different sizes between 0.62rem and
       0.95rem — 10px to 15px — which is why the secondary text on a settings
       page could not be read. A new rule picks a step; it does not invent a
       value between two of them. */
    --fs-xs: 0.75rem;      /* 12px — badges and pills, the floor */
    --fs-sm: 0.8125rem;    /* 13px — dense chips, table meta */
    --fs-md: 0.875rem;     /* 14px — secondary text, field labels */
    --fs-lg: 0.9375rem;    /* 15px — dense body */
    --fs-base: 1rem;       /* 16px — body */

    /* The site's one face. Written once here and read by the panels' skins,
       because a left-to-right page swaps it below. */
    --font-sans: Vazirmatn, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Same glyphs, a line box cut for Latin text — see "Vazirmatn Latin" in
   vazirmatn.css. Keyed on the direction rather than the language: a
   left-to-right page is set in Latin script, a right-to-left one in Arabic. */
:root[dir="ltr"] {
    --font-sans: "Vazirmatn Latin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------- base ---- */

.landing-body {
    font-family: var(--font-sans);
    background-color: var(--page);
    color: var(--ink);
    font-size: 1.0rem;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body h4,
.landing-body h5,
.landing-body h6 {
    font-weight: 800;
    color: var(--ink);
}

.section-title {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 800;
}

.section-subtitle {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.text-brand {
    color: var(--brand) !important;
}

.bg-brand-soft {
    background-color: var(--brand-soft) !important;
}

/* ------------------------------------------------------------ buttons ---- */

.btn-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}

.btn-outline-brand {
    background-color: transparent;
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--brand);
    color: var(--on-brand);
}

.btn-soft {
    background-color: var(--brand-softer);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-soft:hover {
    background-color: var(--brand-soft);
    color: var(--brand-darker);
}

.btn-back-to-top {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 1.5rem;
    z-index: 1030;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* the same trick the picker's button uses: a flex item ignores the .125em
   baseline nudge bootstrap-icons puts on every glyph */
.btn-back-to-top > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* Every button that carries a bootstrap-icon, the same way. Left inline, the
   glyph hangs off the label's baseline at -.125em, which puts it on the
   middle of the Latin capitals: the button's middle on an English page, but
   about 3px above it beside Persian, whose baseline Vazirmatn's line box puts
   lower. As a flex item the <i> is a 1em box centred in the button, and the
   glyph fills that box — in either language. Flex drops the space between
   icon and label, so `gap` stands in at a space's width; `:where` keeps it
   below any component that sets its own (.filter-toggle, a `gap-*`). */
.landing-body .btn:has(> .bi) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:where(.landing-body .btn:has(> .bi)) {
    gap: 0.25em;
}

.landing-body .btn > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* ------------------------------------------------------------- header ---- */

.landing-header {
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 20px rgba(20, 60, 40, 0.06);
}

/* The "this is not finished yet" pill beside the site's name — BETA, RC.
   SystemSetting.project_status draws it and its default is empty, so a
   finished site has no rule to undo, only nothing to render. Amber by
   default; maintenance is the one that should read as a warning. */
.site-status-badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    vertical-align: middle;
    background-color: #fdf1e2;
    color: #b8741c;
    border: 1px solid #f0d3a6;
    white-space: nowrap;
}

.site-status-badge.is-maintenance {
    background-color: #fdeaea;
    color: #c43d3d;
    border-color: #f3c9c9;
}

.site-status-badge.is-demo,
.site-status-badge.is-preview {
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    border-color: var(--brand-soft);
}

[data-bs-theme="dark"] .site-status-badge {
    background-color: rgba(216, 160, 84, 0.16);
    border-color: rgba(216, 160, 84, 0.34);
    color: #e0ac62;
}

[data-bs-theme="dark"] .site-status-badge.is-maintenance {
    background-color: rgba(196, 61, 61, 0.18);
    border-color: rgba(196, 61, 61, 0.36);
    color: #f08a8a;
}

/* on a dark rail the pill has the rail behind it, not a card */
.panel-sidebar .site-status-badge {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: var(--brand);
    color: var(--on-brand);
    font-size: 1.05rem;
}

.brand-name {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
}

.landing-header .nav-link {
    color: var(--ink-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    padding-inline: 0.75rem;
    position: relative;
}

.landing-header .nav-link:hover {
    color: var(--brand);
}

.landing-header .nav-link.active {
    color: var(--brand);
    font-weight: 700;
}

/* the small green underline the active item carries in the design */
.landing-header .nav-link.active::after {
    content: "";
    position: absolute;
    inset-block-end: 0.35rem;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--brand);
}

/* --------------------------------------------------------------- hero ---- */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #cfe7f7 0%, #e2f0f9 45%, #eef7f2 100%);
}

/* soft clouds, drawn rather than shipped as images */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    filter: blur(18px);
    pointer-events: none;
}

.hero::before {
    width: 320px;
    height: 120px;
    top: 12%;
    inset-inline-start: 8%;
}

.hero::after {
    width: 420px;
    height: 150px;
    top: 45%;
    inset-inline-end: 10%;
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.35;
}

.hero-lead {
    color: #3d5449;
    line-height: 2.1;
    font-size: 1.0rem;
}

.hero-visual {
    position: relative;
}

/* stand-in for the hero photograph — a drawn house scene, no binary asset */
.hero-artwork {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(18, 60, 42, 0.18);
    background: linear-gradient(160deg, #dbeafe 0%, #eef7f2 100%);
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    display: block;
}

.hero-trust {
    color: #33564a;
    font-size: 0.875rem;
    font-weight: 600;
}

.hero-trust i {
    color: var(--brand-dark);
}

/* the floating "example split" card over the hero image */
.split-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(18, 60, 42, 0.16);
    padding: 1rem;
}

@media (min-width: 992px) {
    .split-card {
        position: absolute;
        inset-block-end: -1.5rem;
        inset-inline-end: -1.5rem;
        width: 340px;
    }
}

.plot-chip {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ink-muted);
    line-height: 1.7;
    background: #fff;
}

.plot-chip.is-taken {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* --------------------------------------------------------------- card ---- */

.surface-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.feature-icon.tone-green {
    background-color: #e6f5ec;
    color: #24915a;
}

.feature-icon.tone-purple {
    background-color: #efeafd;
    color: #7c5cd6;
}

.feature-icon.tone-blue {
    background-color: #e6f0fd;
    color: #3f7fd6;
}

.feature-icon.tone-amber {
    background-color: #fdf1e2;
    /* #d08a2c was 2.6:1 on its own cream */
    color: #a1651a;
}

.feature-icon.tone-red {
    background-color: #fdeaea;
    color: #c43d3d;
}

.feature-icon.tone-gray {
    background-color: #eef1f0;
    color: #6b7a73;
}

.feature-icon.tone-cyan {
    background-color: #e3f6fb;
    color: #1b8aa6;
}

.feature-icon.is-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.0rem;
}

.feature-title {
    font-size: 1.0rem;
    font-weight: 700;
}

.feature-text {
    color: var(--ink-muted);
    font-size: 0.875rem;
    line-height: 2;
}

/* ------------------------------------------------------------- steps ---- */

.step-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    height: 100%;
}

.step-connector {
    color: #cfe0d6;
    letter-spacing: 3px;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------- buildings ---- */

.building-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.building-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(18, 60, 42, 0.1);
}

.building-cover {
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
}

/* placeholder used when a building has no gallery image yet */
.building-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8fae9e;
    font-size: 2rem;
}

.building-badge {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    background: #fff;
    color: var(--brand-dark);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
}

.stat-cell {
    text-align: center;
    padding: 0.5rem 0.25rem;
}

/* the separator sits on the side each cell shares with the one before it, so
   the outer edges stay the container's own border — `end` put it on the far
   edge instead, which doubled one side and left the other open */
.stat-cell + .stat-cell {
    border-inline-start: 1px solid var(--line);
}

/* The generic caption: a hint under a heading, a timestamp, a unit. It was
   12px, which is the badge floor and too small for a sentence — this class
   carries most of the secondary prose in the panel. */
.stat-label {
    color: var(--ink-muted);
    font-size: var(--fs-md);
}

/* …except when it is standing in for a *value* in a detail row, where it has
   to match the row it sits on rather than shrink away from its own label. */
.receipt-row .stat-label {
    font-size: inherit;
}

.stat-value {
    font-weight: 700;
    font-size: 0.875rem;
}

.progress.progress-brand {
    height: 6px;
    background-color: var(--brand-soft);
    border-radius: 99px;
}

.progress.progress-brand .progress-bar {
    background-color: var(--brand);
}

/* -------------------------------------------------------- stats band ---- */

.stats-band {
    background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand-dark) 100%);
    border-radius: var(--radius-lg);
    color: #fff;
}

.stats-band .stat-number {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800;
    line-height: 1.3;
}

.stats-band .stat-caption {
    font-size: 0.8125rem;
    opacity: 0.85;
}

.stats-band i {
    font-size: 1.6rem;
    opacity: 0.9;
}

/* ------------------------------------------------------ testimonials ---- */

.quote-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    height: 100%;
}

.quote-mark {
    color: #cfe0d6;
    font-size: 1.6rem;
    line-height: 1;
}

.quote-text {
    color: #44584e;
    font-size: 0.875rem;
    line-height: 2.1;
}

.quote-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.carousel-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    border: 0;
    padding: 0;
    background-color: #cfe0d6;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.carousel-dots button.active {
    width: 22px;
    background-color: var(--brand);
}

/* ---------------------------------------------------------------- faq ---- */

.faq-accordion .accordion-item {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.85rem 1rem;
    background-color: var(--surface);
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--brand-dark);
    background-color: var(--brand-softer);
}

.faq-accordion .accordion-body {
    font-size: 0.875rem;
    color: var(--ink-muted);
    line-height: 2.1;
    padding-top: 0;
}

.help-card {
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------- cta ---- */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand-dark) 100%);
    color: #fff;
}

/* the faint skyline the design puts behind the CTA copy */
.cta-band::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 60%;
    opacity: 0.16;
    background-image: repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(255, 255, 255, 0.9) 18px 34px,
            transparent 34px 46px,
            rgba(255, 255, 255, 0.6) 46px 70px
    );
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, transparent 100%);
    pointer-events: none;
}

.cta-band > * {
    position: relative;
    z-index: 1;
}

.btn-on-dark {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-on-dark:hover {
    background-color: #fff;
    color: var(--brand-darker);
}

/* ------------------------------------------------------------- footer ---- */

.landing-footer {
    background-color: var(--surface);
    border-top: 1px solid var(--line);
}

.footer-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
}

.footer-text {
    color: var(--ink-muted);
    font-size: 0.875rem;
    line-height: 2.1;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 0.55rem;
}

.footer-list a {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.875rem;
}

.footer-list a:hover {
    color: var(--brand);
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.footer-contact i {
    color: var(--brand);
}

.social-dot {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--brand-softer);
    color: var(--brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9375rem;
}

.social-dot:hover {
    background-color: var(--brand);
    color: var(--on-brand);
}

/* the eNamad seal (components/enamad_seal.html): drawn for a white page, so
   it keeps a white card of its own on a dark palette too */
.enamad-seal {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.375rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background-color: #fff;
}

.enamad-seal img {
    display: block;
    width: 4.5rem;
    height: auto;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

.footer-bottom a {
    color: var(--brand);
    text-decoration: none;
}

/* ------------------------------------------------ CSP-safe decorations ---- */
/* CSP forbids `style` attributes, so every one-off size or colour that would
   have been inline lives here as a class instead. */

.placeholder-glyph {
    font-size: 2rem;
    color: #9fc4b1;
}

.placeholder-glyph-lg {
    font-size: 5rem;
}

.help-glyph {
    font-size: 2.2rem;
}

.stat-grid {
    border: 1px solid var(--line);
}

/* progress bars start collapsed and are widened by landing.js from
   `data-progress`; the transition makes that read as a fill, not a jump */
.progress.progress-brand .progress-bar {
    width: 0;
    transition: width 0.6s ease;
}

/* --------------------------------------------------- building detail ---- */

.building-hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
}

/* --------------------------------------------------------------- blog ---- */

.blog-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--brand-softer) 0%, var(--page) 100%);
    border-bottom: 1px solid var(--line);
}

.blog-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -260px;
    inset-inline-end: -120px;
    border-radius: 50%;
    background-color: var(--brand-soft);
    opacity: 0.55;
    pointer-events: none;
}

.blog-hero > .container {
    position: relative;
}

.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-dark);
    border: 1px solid var(--line);
    border-radius: 99px;
    background-color: var(--surface);
}

.blog-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 580px;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    box-shadow: 0 10px 30px rgba(20, 60, 40, 0.08);
    transition: border-color 0.15s ease;
}

.blog-search:focus-within {
    border-color: var(--brand);
}

.blog-search > i {
    padding-inline-start: 0.6rem;
    color: var(--ink-muted);
}

.blog-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.25rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 0.9375rem;
}

.blog-chips {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 99px;
    background-color: var(--surface);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.blog-chip:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.blog-chip.is-active {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
}

a.blog-chip.is-active:hover {
    color: #fff;
}

.blog-chip.is-static {
    padding: 0.1rem 0.6rem;
    font-size: 0.8125rem;
    background-color: var(--brand-softer);
}

.blog-chip-count {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 99px;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
}

.blog-chip.is-active .blog-chip-count {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.blog-filter-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.blog-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #c43d3d;
    text-decoration: none;
}

.article-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20, 60, 40, 0.1);
}

.article-card-cover {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
}

.article-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.article-card:hover .article-card-cover img {
    transform: scale(1.04);
}

.article-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--brand);
    opacity: 0.6;
}

.article-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.2rem;
}

.article-card-category {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-dark);
    text-decoration: none;
    border-radius: 99px;
    background-color: var(--brand-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.article-card-category:hover {
    background-color: var(--brand);
    color: var(--on-brand);
}

.article-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #9a6200;
    border-radius: 99px;
    background-color: #fff3d6;
}

.article-card-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.7;
}

.article-card-title a {
    color: var(--ink);
    text-decoration: none;
}

.article-card-title a:hover {
    color: var(--brand-dark);
}

.article-card-summary {
    flex: 1 1 auto;
    margin-bottom: 0.9rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--ink-muted);
}

.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.article-card-meta i,
.article-full-meta i {
    margin-inline-end: 0.3rem;
}

@media (min-width: 768px) {
    .article-card.is-featured {
        flex-direction: row;
    }

    .article-card.is-featured .article-card-cover {
        flex: 0 0 52%;
        aspect-ratio: auto;
        min-height: 300px;
    }

    .article-card.is-featured .article-card-body {
        justify-content: center;
        padding: 1.75rem;
    }

    .article-card.is-featured .article-card-title {
        font-size: 1.35rem;
    }
}

.blog-rail-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.0rem;
    font-weight: 800;
}

.blog-rail-title i {
    color: var(--brand);
}

.blog-rank {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rank;
}

.blog-rank li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 0.65rem;
    counter-increment: rank;
}

.blog-rank li::before {
    content: counter(rank);
    grid-row: span 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--brand-dark);
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
}

[dir="rtl"] .blog-rank li::before {
    content: counter(rank, persian);
}

.blog-rank a {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--ink);
    text-decoration: none;
}

.blog-rank a:hover {
    color: var(--brand-dark);
}

.blog-rank-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.blog-tag {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.blog-tag:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.blog-tag.is-active {
    background-color: var(--brand);
    color: var(--on-brand);
}

.blog-breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-muted);
    --bs-breadcrumb-item-active-color: var(--ink-muted);
    font-size: 0.875rem;
}

.blog-breadcrumb a {
    color: var(--brand-dark);
    text-decoration: none;
}

.article-full {
    overflow: hidden;
}

.article-full-cover {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

.article-full-body {
    padding: 1.5rem;
}

@media (min-width: 992px) {
    .article-full-body {
        padding: 2.5rem 3rem;
    }
}

.article-full-title {
    margin: 0.75rem 0 1rem;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 800;
    line-height: 1.6;
}

.article-full-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--line);
}

.article-author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--ink);
}

.article-author .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.9375rem;
}

.article-lead {
    margin-bottom: 1.75rem;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    line-height: 2;
    color: var(--ink);
    border-inline-start: 4px solid var(--brand);
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    color: var(--ink-muted);
}

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.article-share-label {
    margin-inline-end: 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.share-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--ink-muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background-color: var(--surface);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.share-btn:hover,
.share-btn:focus-visible,
.share-btn.is-done {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
}

.blog-mini-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink);
    text-decoration: none;
}

.blog-mini img,
.blog-mini-placeholder {
    flex: 0 0 72px;
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
}

.blog-mini-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}

.blog-mini-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.7;
}

.blog-mini:hover .blog-mini-title {
    color: var(--brand-dark);
}

[data-bs-theme="dark"] .blog-hero::before {
    opacity: 0.35;
}

[data-bs-theme="dark"] .article-card-cover {
    background: var(--brand-softer);
}

[data-bs-theme="dark"] .article-card-badge {
    background-color: rgba(255, 190, 60, 0.14);
    color: #f3c566;
}

@media (prefers-reduced-motion: reduce) {
    .article-card,
    .article-card-cover img {
        transition: none;
    }

    .article-card:hover,
    .article-card:hover .article-card-cover img {
        transform: none;
    }
}

/* --------------------------------------------------- building gallery ---- */

.gallery-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.gallery-open-hint {
    position: absolute;
    bottom: 0.75rem;
    inset-inline-start: 0.75rem;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(8, 22, 16, 0.55);
    color: #fff;
    font-size: 1.0rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-open:hover .gallery-open-hint,
.gallery-open:focus-visible .gallery-open-hint {
    opacity: 1;
}

@media (hover: none) {
    .gallery-open-hint {
        opacity: 1;
    }
}

.gallery-thumbs,
.gallery-lightbox-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.gallery-thumbs {
    padding: 0.75rem;
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 78px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
    opacity: 1;
}

.gallery-thumb.active {
    opacity: 1;
    border-color: var(--brand);
}

.gallery-lightbox .modal-content {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background-color: #060d0a;
    color: #fff;
}

.gallery-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.gallery-lightbox-count {
    padding: 0.2rem 0.75rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.1);
}

.gallery-lightbox-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.9375rem;
    opacity: 0.85;
}

.gallery-lightbox-close {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background-color 0.15s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.24);
}

.gallery-lightbox-stage {
    flex: 1 1 auto;
    min-height: 0;
}

.gallery-lightbox-stage .carousel-inner,
.gallery-lightbox-stage .carousel-item {
    height: 100%;
}

.gallery-lightbox-frame {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4.5rem;
}

.gallery-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-lightbox-nav {
    width: 4.5rem;
    opacity: 1;
}

.gallery-lightbox-nav .carousel-control-prev-icon,
.gallery-lightbox-nav .carousel-control-next-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    background-size: 42%;
    transition: background-color 0.15s ease;
}

.gallery-lightbox-nav:hover .carousel-control-prev-icon,
.gallery-lightbox-nav:hover .carousel-control-next-icon,
.gallery-lightbox-nav:focus-visible .carousel-control-prev-icon,
.gallery-lightbox-nav:focus-visible .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.26);
}

.gallery-lightbox-thumbs {
    justify-content: safe center;
    padding: 0.75rem 1rem 1rem;
}

.gallery-lightbox-thumbs .gallery-thumb {
    background-color: rgba(255, 255, 255, 0.06);
}

/* phones swipe; the side arrows would only eat the photo's width */
@media (max-width: 575.98px) {
    .gallery-lightbox-frame {
        padding: 0 0.5rem;
    }

    .gallery-lightbox-nav {
        display: none;
    }
}

.sticky-panel {
    position: sticky;
    top: 90px;
}

.price-figure {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.4;
}

.price-unit {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.icon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    background-color: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    padding: 0.35rem 0.65rem;
    font-size: 0.9375rem;
}

.icon-toggle:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.icon-toggle.is-on {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.countdown-cell {
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.25rem;
    text-align: center;
}

.countdown-value {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-dark);
}

.countdown-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------ article ---- */

.article-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
}

.article-body {
    line-height: 2.2;
    color: #3d4f47;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* A detail row is the body text of these pages, not a caption — it was
   `--fs-lg` (15px), a step below the browser default, which is why a page of
   them read as small print. It is `--fs-base` now, and the value carries the
   weight so the eye has something to run down the column. */
.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-base);
    line-height: 1.8;
}

.receipt-row > :last-child {
    font-weight: 600;
}

.receipt-row:last-child {
    border-bottom: 0;
}

.receipt-row .label {
    color: var(--ink-muted);
    font-weight: 400;
    flex-shrink: 0;
}

.success-glyph {
    font-size: 3rem;
    color: var(--brand);
}

/* `.article-cover` / `.building-cover` set display:block, so the empty state
   has to re-assert its centring after both of them */
.building-cover.building-cover-empty,
.article-cover.building-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Auth — a full-bleed hero panel beside the form column, per the design.
   ========================================================================== */

.auth-shell {
    display: flex;
    min-height: 100vh;
}

.auth-hero {
    position: relative;
    flex: 0 0 46%;
    overflow: hidden;
    display: none;
}

@media (min-width: 992px) {
    .auth-hero {
        display: block;
    }
}

/* The photograph is shown as it is — no blur, no wash over the whole of it.
   Legibility comes from where the copy sits instead: the brand and the feature
   row on a short dark fade at each end, the headline on a glass card. */
.auth-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* only the two ends darken; the middle, where the card sits, stays clear */
.auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(8, 22, 16, 0.72) 0%,
            rgba(8, 22, 16, 0.18) 20%,
            rgba(8, 22, 16, 0) 42%,
            rgba(8, 22, 16, 0.12) 70%,
            rgba(8, 22, 16, 0.82) 100%
    );
}

/* brand on top, the card in the middle, the features at the bottom: the card's
   auto block margins are what centre it between the other two */
.auth-hero-body {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    color: #fff;
}

/* start-aligned: the right edge in RTL, the left in LTR */
.auth-brand {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.75rem;
    text-align: start;
    text-decoration: none;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.auth-brand-name {
    display: block;
    font-weight: 800;
    font-size: 1.35rem;
}

.auth-brand-tagline {
    display: block;
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* the headline card: frosted glass over the clear photo, with a gradient
   hairline border (a masked pseudo-element — a `border` cannot be a gradient
   and keep rounded corners on a translucent box) */
.auth-hero-copy {
    position: relative;
    margin: auto;
    max-width: 32rem;
    padding: 2rem 2.25rem;
    text-align: center;
    border-radius: 24px;
    background: linear-gradient(
            150deg,
            rgba(10, 32, 23, 0.62) 0%,
            rgba(10, 32, 23, 0.42) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.auth-hero-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(
            135deg,
            rgba(125, 255, 184, 0.9) 0%,
            rgba(255, 255, 255, 0.28) 30%,
            rgba(255, 255, 255, 0.08) 60%,
            rgba(125, 255, 184, 0.65) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.auth-hero-copy h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.7;
    margin-bottom: 1rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.auth-hero-copy p {
    font-size: 0.9375rem;
    line-height: 2.1;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

.text-brand-light {
    color: #7dffb8;
}

.auth-hero-features {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.auth-hero-features li {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.8;
    position: relative;
}

.auth-hero-features li + li::after {
    content: "";
    position: absolute;
    inset-block: 0.2rem;
    inset-inline-end: 100%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.auth-hero-features i {
    display: block;
    font-size: 1.3rem;
    color: #7dffb8;
    margin-bottom: 0.35rem;
}

/* ------------------------------------------------------------ form side ---- */

.auth-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--page);
}

.auth-panel-inner {
    width: 100%;
    max-width: 30rem;
}

.auth-panel-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.auth-foot {
    margin-top: 1.75rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

.auth-foot-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.auth-foot-links a {
    color: var(--ink-muted);
    text-decoration: none;
}

.auth-foot-links a:hover {
    color: var(--brand);
}

/* the ورود / ثبت‌نام segmented switch at the top of the card */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.auth-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--page);
    color: var(--ink-muted);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.65rem 0.5rem;
    text-decoration: none;
}

.auth-tab:hover {
    color: var(--brand-dark);
}

.auth-tab.active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* the "or" rule above the social button */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin: 1.1rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--line);
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.6rem;
}

.btn-social:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* sign in with Google, GitHub, … — a form per provider, stacked */
.social-login-list {
    display: grid;
    gap: 0.5rem;
}

button.btn-social {
    cursor: pointer;
}

/* the provider's mark: centred by layout, not by its line box — see
   `.panel-tab-icon` — and drawn in the provider's own colour */
.btn-social > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: 1.1rem;
}

.btn-social > .bi::before {
    display: block;
    line-height: 1;
    vertical-align: 0;
}

.social-google > .bi {
    color: #ea4335;
}

.social-microsoft > .bi {
    color: #00a4ef;
}

.social-facebook > .bi {
    color: #1877f2;
}

.social-gitlab > .bi {
    color: #fc6d26;
}

.social-discord > .bi {
    color: #5865f2;
}

/* GitHub's mark is black on white and white on black: the ink of the page */
.social-github > .bi {
    color: var(--ink);
}

/* the password / one-time-code method switch */
.method-switch {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.1rem;
}

.method-switch button {
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 0 0.6rem;
    border-bottom: 2px solid transparent;
}

.method-switch button.active {
    color: var(--brand-dark);
    border-bottom-color: var(--brand);
}

/* ------------------------------------------------------------ form bits ---- */

.landing-body .form-control,
.landing-body .form-select {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.9375rem;
}

/* Bootstrap draws a select's chevron as a background image pinned to the
   *physical* right and reserves room for it with `padding-right: 2.25rem`.
   Two things went wrong with that here, and they compounded:

   - the `padding` shorthand above wipes the reservation, so the glyph sat on
     top of the text;
   - these panels load Bootstrap's **LTR** build inside a `dir="rtl"` page, so
     "right" is the side a Persian sentence *starts* on — the chevron landed
     on the first word rather than after the last.

   Both are settled per page direction: the chevron goes to the end of the
   line and the padding that keeps text off it goes on the same side. */
[dir="ltr"] .landing-body .form-select {
    background-position: right 0.85rem center;
    padding-right: 2.4rem;
    padding-left: 0.85rem;
}

[dir="rtl"] .landing-body .form-select {
    background-position: left 0.85rem center;
    padding-left: 2.4rem;
    padding-right: 0.85rem;
}

/* A floating label sets its own padding; keep the chevron's side, drop the
   rest so the label still has the room Bootstrap gives it. */
[dir="rtl"] .landing-body .form-floating > .form-select {
    padding-right: 0.85rem;
}

.landing-body .form-control:focus,
.landing-body .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

.landing-body .form-label {
    color: var(--ink-muted);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.landing-body .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.landing-body .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

/* An input with an icon tucked into each edge. The wrapper holds the control
   and its icons and nothing else — with the label inside it, `50%` was half of
   label-plus-input and the icon floated above the box. */
.field-icon {
    position: relative;
}

/* The boxes that take an email address or a phone number carry `dir="ltr"`,
   because what is typed into them is Latin and has to *read* left to right.
   Where the box sits on the line is a different question, and the answer is
   the page's: on a Persian page an email pinned to the left edge is a stray
   column of text with its own label above it on the right.

   `dir="ltr"` keeps the characters in order; `text-align` moves the block. It
   used to apply only while the placeholder showed, so the text jumped sides
   the moment somebody typed. */
[dir="rtl"] .field-icon .form-control[dir="ltr"],
[dir="rtl"] .landing-body .form-control[dir="ltr"] {
    text-align: right;
}

[dir="ltr"] .field-icon .form-control[dir="rtl"],
[dir="ltr"] .landing-body .form-control[dir="rtl"] {
    text-align: left;
}

/* The field's own icon — the person, the lock — sits where the reading
   starts, beside the first character of what is typed: it labels the box, so
   it belongs with the words. The show/hide button goes to the far end, where
   a control the reader reaches for on purpose belongs. They used to be the
   other way round, which put a button in the middle of the sentence and the
   label out at the edge. */
.field-icon > i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.85rem;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 1.0rem;
    pointer-events: none;
}

/* The padding is written per *page* direction rather than with
   `padding-inline-*`, and the difference is not pedantry: the email / phone
   boxes carry `dir="ltr"` because what is typed in them is Latin, so the
   input's own inline-start is the left even on a Persian page — while the
   icon is positioned against `.field-icon`, which follows the page. Logical
   padding on the input therefore lands on the opposite side from the icon,
   and typed text runs underneath it. */
[dir="ltr"] .field-icon .form-control {
    padding-left: 2.6rem;
}

[dir="rtl"] .field-icon .form-control {
    padding-right: 2.6rem;
}

.password-field {
    position: relative;
}

/* a password box has something at both ends */
[dir="ltr"] .password-field .form-control {
    padding-left: 2.6rem;
    padding-right: 2.9rem;
}

[dir="rtl"] .password-field .form-control {
    padding-right: 2.6rem;
    padding-left: 2.9rem;
}

.password-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.5rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

.password-toggle:hover {
    color: var(--brand);
}

/* ==========================================================================
   User panel — an app-like shell: a dark rail on the start side, a top bar,
   and a content area. Deliberately not the landing header/footer.
   ========================================================================== */

:root {
    --rail: #0e3b28;
    --rail-deep: #0e3b28;
    --rail-soft: rgba(255, 255, 255, 0.08);
    --rail-text: rgba(255, 255, 255, 0.72);
    --rail-width: 232px;
    --topbar-height: 68px;
}

.panel-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--page);
}

/* ------------------------------------------------------- desk palettes ---- */
/* One account can hold all three desks at once, so each one wears its own
   brand colour: the user panel keeps the site's green (it is the same shop
   the landing pages are), the expert desk is amber on navy and the notary
   desk violet. Only the tokens change — every piece below is drawn from
   them, so a desk never needs a second copy of a component. */

.panel-shell.theme-expert {
    --brand: #c07c22;
    --brand-dark: #a1651a;
    --brand-darker: #6f4410;
    --brand-soft: #fbeedb;
    --brand-softer: #fdf8f0;
    --line: #ece5db;
    --page: #f8f7f4;
    --rail: #1b2342;
    --accent: #d9912f;
}

.panel-shell.theme-notary {
    --brand: #6d4bd6;
    --brand-dark: #573bb0;
    --brand-darker: #3a2678;
    --brand-soft: #ece6fb;
    --brand-softer: #f6f3fd;
    --line: #e8e4f0;
    --page: #f7f6fa;
    --rail: #241b42;
    --accent: #a78bfa;
}

/* ---------------------------------------------------------------- rail ---- */

.panel-sidebar {
    width: var(--rail-width);
    flex: 0 0 var(--rail-width);
    background-color: var(--rail);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.85rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1035;
}

.panel-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.35rem 0.5rem 1.4rem;
}

.panel-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--brand);
    color: var(--on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.panel-rail-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--rail-text);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
}

.panel-rail-nav .nav-link i {
    font-size: 1.05rem;
    width: 22px;       /* a fixed box keeps the labels aligned down the rail */
    text-align: center;
    flex-shrink: 0;
}

.panel-rail-nav .nav-link:hover {
    background-color: var(--rail-soft);
    color: #fff;
}

.panel-rail-nav .nav-link.active {
    background-color: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
}

.panel-support {
    margin-top: auto;
    background-color: var(--rail-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}

/* `--accent` and not a literal: it is the brand's light tint, the same token
   the rail's mark and its active link use, and `personalize.css` redefines it
   for every palette. The hard-coded green that was here stayed green while
   the rest of the card went amber or violet. */
.panel-support i {
    font-size: 1.5rem;
    color: var(--accent);
}

.panel-support-title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.35rem;
}

.panel-support-text {
    color: var(--rail-text);
    font-size: 0.8125rem;
    line-height: 1.9;
    margin-bottom: 0.75rem;
}

.panel-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 22, 0.5);
    z-index: 1030;
}

@media (max-width: 991.98px) {
    /* Off-canvas on the inline-start edge (the right, in RTL). `translateX` is
       not direction-aware, so the hidden position is written per direction. */
    .panel-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    [dir="rtl"] .panel-sidebar {
        transform: translateX(100%);
    }

    .panel-sidebar.is-open,
    [dir="rtl"] .panel-sidebar.is-open {
        transform: translateX(0);
    }
}

/* -------------------------------------------------------------- body ---- */

.panel-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.panel-topbar {
    height: var(--topbar-height);
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.panel-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
}

.panel-search i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.75rem;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.panel-search .form-control {
    background-color: var(--page);
    border-color: transparent;
    border-radius: var(--radius-sm);
    padding-inline-end: 0.9rem;
    padding-inline-start: 2.2rem;
    font-size: 0.875rem;
}

.panel-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: auto;
}

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background-color: transparent;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    padding: 0;
}

.btn-icon:hover {
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

.topbar-badge {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 99px;
    background-color: var(--brand);
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.panel-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 0;
    background: transparent;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
}

.panel-user:hover {
    background-color: var(--brand-softer);
}

.panel-user > i {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

.panel-user-text {
    display: flex;
    flex-direction: column;
    text-align: start;
    line-height: 1.4;
}

.panel-user-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ink);
}

.panel-user-role {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.panel-content {
    padding: 1.25rem;
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    .panel-user-text {
        display: none;
    }
}

/* --------------------------------------------------------- dropdowns ---- */
/* Bootstrap's menu re-dressed in the site's tokens, so every dropdown — the  */
/* header's menu groups, the language picker, the account menu — reads as    */
/* the same surface as the cards around it, in both themes.                  */

.landing-body .dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-inner-border-radius: var(--radius-sm);
    --bs-dropdown-padding-x: 0.4rem;
    --bs-dropdown-padding-y: 0.4rem;
    --bs-dropdown-spacer: 0.5rem;
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-min-width: 11rem;
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: var(--brand-dark);
    --bs-dropdown-link-hover-bg: var(--brand-softer);
    --bs-dropdown-link-active-color: var(--on-brand);
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-divider-bg: var(--line);
    --bs-dropdown-divider-margin-y: 0.35rem;
    --bs-dropdown-header-color: var(--ink-muted);
    box-shadow: 0 16px 40px rgba(20, 60, 40, 0.12), 0 2px 6px rgba(20, 60, 40, 0.05);
}

/* One step more specific than the block above, and deliberately so. The admin
   panel loads its theme's stylesheet before this file, and that sheet paints
   every dark dropdown navy from `[data-bs-theme="dark"] .dropdown
   .dropdown-menu` — which outranks a two-class selector. The bell's menu came
   out a navy sheet in front of whatever colour the rest of the panel was. */
.landing-body .dropdown .dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: var(--brand-dark);
    --bs-dropdown-link-hover-bg: var(--brand-softer);
    --bs-dropdown-divider-bg: var(--line);
}

/* opacity + the separate `translate` property: Popper positions the menu */
/* through `transform`, so the entrance must not touch that one           */
.landing-body .dropdown-menu.show {
    animation: dropdown-in 0.16s ease-out;
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        translate: 0 -6px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-body .dropdown-menu.show {
        animation: none;
    }
}

.landing-body .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-body .dropdown-item > i {
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
    color: var(--ink-muted);
    transition: color 0.15s ease;
}

.landing-body .dropdown-item:hover > i,
.landing-body .dropdown-item:focus > i {
    color: var(--brand);
}

.landing-body .dropdown-item.active > i,
.landing-body .dropdown-item:active > i {
    color: inherit;
}

.landing-body .dropdown-item.is-danger {
    color: #c43d3d;
}

.landing-body .dropdown-item.is-danger > i {
    color: inherit;
}

.landing-body .dropdown-item.is-danger:hover,
.landing-body .dropdown-item.is-danger:focus {
    background-color: #fdeeee;
    color: #b02f2f;
}

[data-bs-theme="dark"] .landing-body .dropdown-menu {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .landing-body .dropdown-item.is-danger {
    color: #f08a8a;
}

[data-bs-theme="dark"] .landing-body .dropdown-item.is-danger:hover,
[data-bs-theme="dark"] .landing-body .dropdown-item.is-danger:focus {
    background-color: rgba(196, 61, 61, 0.16);
    color: #f5a3a3;
}

/* ------------------------------------------------------ account menu ---- */

.panel-user > i {
    transition: transform 0.2s ease;
}

.panel-user[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.account-menu {
    width: 18.5rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.5rem;
}

.account-menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.45rem 0.75rem;
}

.account-menu-head .user-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.account-menu-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.55;
}

.account-menu-name,
.account-menu-email {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-name {
    font-weight: 800;
    font-size: 0.9375rem;
    color: var(--ink);
}

.account-menu-email {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.account-menu-role {
    margin-top: 0.2rem;
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-dark);
    background-color: var(--brand-soft);
    border-radius: 99px;
}

.account-wallet {
    position: relative;
    overflow: hidden;
    margin: 0 0.1rem 0.45rem;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
    color: var(--on-brand);
}

/* two soft rings, the same ornament the stats band carries */
.account-wallet::before,
.account-wallet::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.account-wallet::before {
    width: 130px;
    height: 130px;
    inset-inline-start: -45px;
    bottom: -70px;
}

.account-wallet::after {
    width: 70px;
    height: 70px;
    inset-inline-end: 18%;
    top: -40px;
}

.account-wallet > * {
    position: relative;
    z-index: 1;
}

.account-wallet-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    opacity: 0.85;
}

.account-wallet-amount {
    margin-top: 0.3rem;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.45;
}

.account-wallet-unit {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.8;
}

.account-wallet-note {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

.account-wallet-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.16);
    transition: background-color 0.15s ease;
}

.account-wallet-action:hover,
.account-wallet-action:focus-visible {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.account-menu .dropdown-divider {
    margin-inline: 0.35rem;
}

/* ------------------------------------------------------------ pieces ---- */

.user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-sm {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

.tile-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.5;
}

.panel-table {
    --bs-table-bg: transparent;
    font-size: 0.875rem;
}

.panel-table > thead th {
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    border-bottom-color: var(--line);
}

.panel-table > tbody td {
    border-bottom-color: var(--line);
    vertical-align: middle;
}

/* the wallet card, the hero banner, the NFT strip and the promo band all sit
   on the same rounded surface as the rest of the site */
.wallet-card {
    background-color: #eef8f2;
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius-md);
}

.wallet-figure {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.4;
}

.panel-hero {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: center;
}

.panel-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* a dark wash so the copy stays readable over any photo */
.panel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, rgba(8, 40, 26, 0.86) 0%, rgba(8, 40, 26, 0.35) 55%, transparent 100%);
}

.panel-hero-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    max-width: 60%;
    color: #fff;
}

.panel-hero-body h2 {
    color: #fff;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
}

.panel-hero-body p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 2;
}

.panel-hero-badge {
    display: inline-block;
    background-color: var(--brand);
    color: var(--on-brand);
    border-radius: 99px;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.8rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 767.98px) {
    .panel-hero-body {
        max-width: 100%;
    }
}

/* ownership ring — a conic gradient, no chart library for one number */
.ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    margin-inline: auto;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--brand) calc(var(--ring-value, 0) * 1%), var(--brand-soft) 0);
}

.ring::before {
    content: "";
    grid-area: 1 / 1;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: var(--surface);
}

.ring-label {
    grid-area: 1 / 1;
    text-align: center;
    line-height: 1.4;
}

.ring-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
}

.nft-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    background-color: var(--surface);
}

.nft-card.is-current {
    border-color: var(--brand);
}

.nft-cover {
    position: relative;
    aspect-ratio: 4 / 3;
}

.nft-cover img,
.nft-cover .building-cover-empty {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nft-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 40, 26, 0.75) 0%, transparent 55%);
}

.nft-badge {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--brand-dark);
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.nft-caption {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline: 0.6rem;
    z-index: 2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.7;
}

.promo-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, var(--brand-darker) 0%, var(--brand-dark) 100%);
    color: #fff;
}

.promo-card h3 {
    color: #fff;
}

.promo-card p {
    /* at .8 the line under the title read 4:1 on the band's lighter end */
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.guide-list .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--line);
    background-color: transparent;
}

.guide-list .accordion-item:last-child {
    border-bottom: 0;
}

.guide-list .accordion-button {
    background-color: transparent;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.7rem 0;
}

.guide-list .accordion-button:not(.collapsed) {
    color: var(--brand-dark);
}

.guide-list .accordion-body {
    font-size: 0.875rem;
    color: var(--ink-muted);
    line-height: 2;
    padding: 0 0 0.7rem;
}

.code-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--brand-softer);
    border: 1px dashed var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.wallet-foot {
    border-top: 1px solid var(--brand-soft);
}

.thumb-64 {
    width: 64px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8fae9e;
}

.thumb-64 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-bar {
    min-width: 80px;
}

.switch-code {
    font-size: 0.75rem;
    font-weight: 700;
    margin-inline-start: 0.15rem;
}

/* ==========================================================================
   Dark theme. Bootstrap's own components follow `data-bs-theme="dark"`; these
   are the project's tokens, which it knows nothing about. Only the values move
   — every selector above keeps working unchanged.
   ========================================================================== */

[data-bs-theme="dark"] {
    --brand: #34ad68;
    --brand-rgb: 52, 173, 104;
    --accent: #4fc07f;
    --brand-dark: #2b9459;
    --brand-darker: #0e3b28;
    --brand-soft: #1b3d2c;
    --brand-softer: #163023;
    --ink: #e8f0ec;
    --ink-muted: #9db3a8;
    --line: #23392f;
    --surface: #14241d;
    --page: #0d1a15;
    --rail: #0a1712;
    --rail-deep: #0a1712;
    --rail-soft: rgba(255, 255, 255, 0.06);
    --rail-text: rgba(255, 255, 255, 0.66);
    --on-brand: var(--page);
}

[data-bs-theme="dark"] .landing-header {
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
}

[data-bs-theme="dark"] .hero {
    background: linear-gradient(180deg, #12262e 0%, #12242a 45%, #101f19 100%);
}

[data-bs-theme="dark"] .hero::before,
[data-bs-theme="dark"] .hero::after {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .hero-lead,
[data-bs-theme="dark"] .quote-text,
[data-bs-theme="dark"] .article-body {
    color: var(--ink-muted);
}

[data-bs-theme="dark"] .hero-trust {
    color: #9ecdb6;
}

[data-bs-theme="dark"] .hero-trust i,
[data-bs-theme="dark"] .quote-mark,
[data-bs-theme="dark"] .step-connector,
[data-bs-theme="dark"] .placeholder-glyph {
    color: #5f8a75;
}

[data-bs-theme="dark"] .split-card,
[data-bs-theme="dark"] .plot-chip {
    background-color: var(--surface);
    color: var(--ink-muted);
}

[data-bs-theme="dark"] .plot-chip.is-taken {
    color: #fff;
}

[data-bs-theme="dark"] .wallet-card {
    background-color: #163023;
}

[data-bs-theme="dark"] .auth-main,
[data-bs-theme="dark"] .panel-main {
    background: linear-gradient(180deg, #12261d 0%, var(--page) 55%);
}

[data-bs-theme="dark"] .panel-search .form-control,
[data-bs-theme="dark"] .landing-body .form-control,
[data-bs-theme="dark"] .landing-body .form-select {
    background-color: var(--page);
    border-color: var(--line);
    color: var(--ink);
}

[data-bs-theme="dark"] .btn-light {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

[data-bs-theme="dark"] .ring::before {
    background-color: var(--surface);
}

[data-bs-theme="dark"] .building-cover,
[data-bs-theme="dark"] .article-cover,
[data-bs-theme="dark"] .thumb-64,
[data-bs-theme="dark"] .hero-artwork {
    background: linear-gradient(150deg, #1c3a2b 0%, #163023 100%);
}

.panel-hero-media {
    position: absolute;
    inset: 0;
}

.panel-hero .carousel-control-prev,
.panel-hero .carousel-control-next {
    width: 8%;
    z-index: 2;
}

/* ==========================================================================
   User panel — the pieces the ledger, the tickets and the expert workspace
   share: pager, tabs, filter box, status badges, alerts, ticket thread,
   upload box, subject cards and the expert desk. Tokens only, so the dark
   theme block at the end only has to move the few literal colours.
   ========================================================================== */

/* ------------------------------------------------------------- pager ---- */

.pagination-brand {
    --bs-pagination-color: var(--ink);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--brand-dark);
    --bs-pagination-hover-bg: var(--brand-softer);
    --bs-pagination-hover-border-color: var(--brand-soft);
    --bs-pagination-focus-color: var(--brand-dark);
    --bs-pagination-focus-bg: var(--brand-softer);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
    --bs-pagination-active-color: var(--on-brand);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-disabled-color: var(--ink-muted);
    --bs-pagination-disabled-bg: var(--surface);
    --bs-pagination-disabled-border-color: var(--line);
    --bs-pagination-font-size: 0.875rem;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* separate pills, so no shared borders and no first/last-only rounding */
.pagination-brand .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
}

.pagination-brand.pagination-sm .page-link {
    min-width: 32px;
    height: 32px;
}

.panel-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.panel-pager-info {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.panel-pager-info b {
    color: var(--ink);
    font-weight: 700;
}

/* -------------------------------------------------------------- tabs ---- */

.panel-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

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

.panel-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

/* The glyph's own box. A bare `<i class="bi">` is a line box wider than what
   it draws, and bootstrap-icons pins `.bi::before` with
   `vertical-align: -.125em` — so centring the `<i>` centres the box and the
   icon still reads low beside its label. A flex item ignores
   `vertical-align`, which is what this holder buys; same fix as `.icon-chip`.
   Written only by `panels/v3/admin/includes/components/panel_tab.html`. */
.panel-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
}

.panel-tab-icon .bi,
.panel-tab-icon .bi::before {
    display: block;
    line-height: 1;
    vertical-align: 0;
}

.panel-tab-label {
    display: inline-block;
    line-height: 1.2;
}

.panel-tab:hover {
    color: var(--brand-dark);
    border-color: var(--brand-soft);
    background-color: var(--brand-softer);
}

.panel-tab.active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.panel-tab-count {
    min-width: 22px;
    height: 20px;
    border-radius: 99px;
    background-color: var(--page);
    color: var(--ink-muted);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.panel-tab.active .panel-tab-count {
    /* a 22% white wash on the brand left the white count at 2.3-2.5:1 */
    background-color: var(--surface);
    color: var(--ink);
}

/* ------------------------------------------------------------ filter ---- */

#filter .panel-filter {
    border-top: 1px dashed var(--line);
}

.panel-filter .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: 0.3rem;
}

.panel-filter .form-control,
.panel-filter .form-select {
    font-size: 0.875rem;
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-count {
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    background-color: var(--brand);
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ------------------------------------------------------------ badges ---- */

.badge-tone {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 99px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
}

.badge-tone.tone-green {
    background-color: var(--brand-soft);
    color: var(--brand-dark);
}

/* The inks are a step darker than the feature icons' of the same tone: a
   badge is 13px text, which wants 4.5:1, and the icon hues gave 3.4-4.4:1. */
.badge-tone.tone-amber {
    background-color: #fdf1e2;
    color: #8a5310;
}

.badge-tone.tone-red {
    background-color: #fdeaea;
    color: #a83232;
}

.badge-tone.tone-blue {
    background-color: #e6f0fd;
    color: #2b63b5;
}

.badge-tone.tone-purple {
    background-color: #efeafd;
    color: #6446c2;
}

/* cyan is the public site's second accent, so the cards and projects the admin
   colours with it need a badge of their own here */
.badge-tone.tone-cyan {
    background-color: #e3f6fb;
    color: #1b8aa6;
}

.badge-tone.tone-gray {
    background-color: var(--page);
    color: var(--ink-muted);
    border: 1px solid var(--line);
}

/* ------------------------------------------------------------ alerts ---- */

.panel-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------------- setting scope ---- */
/* "Which of the four settings groups is this?" — the banner at the top of a
   settings page's side column, written only by
   `panels/v3/admin/includes/panel/setting_scope.html`.

   Painted in `--rail` rather than given a tint: it sits directly above the
   green "in use" alert, and two coloured boxes in a row read as two messages.
   The rail's colour is the one the reader already associates with "where I
   am", and it follows the desk palette with everything else. */

.setting-scope {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--rail);
    /* logical, not `border-left`: this sits in a page that may be RTL, and
       the marker belongs where the reading starts */
    border-inline-start: 3px solid var(--accent);
    color: #fff;
}

/* In the dark theme `--rail` is *darker* than `--page` (#0a1712 against
   #0d1a15), so the banner sank into the page instead of standing on it.
   `--surface` is the token that lifts, and the accent edge is what still
   tells it apart from the plain record card below. */
:root[data-bs-theme="dark"] .setting-scope {
    background-color: var(--surface);
}

.setting-scope-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--accent);
}

/* the glyph, not its line box — see `.panel-tab-icon` for the why */
.setting-scope-icon .bi,
.setting-scope-icon .bi::before {
    display: block;
    line-height: 1;
    vertical-align: 0;
    font-size: 1.1rem;
}

.setting-scope-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.setting-scope-title {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.4;
}

.setting-scope-subtitle {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.panel-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.9;
}

.panel-alert > i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.panel-alert.tone-green {
    background-color: #e9f7ef;
    border-color: #c9ead6;
    color: #1d6b40;
}

.panel-alert.tone-red {
    background-color: #fdecec;
    border-color: #f5cccc;
    color: #a33232;
}

.panel-alert.tone-amber {
    background-color: #fdf3e4;
    border-color: #f4dcb4;
    color: #8f5a14;
}

.panel-alert.tone-blue {
    background-color: #e9f1fd;
    border-color: #c9dbf6;
    color: #2c5f9e;
}

.panel-alert.tone-gray {
    background-color: var(--page);
    border-color: var(--line);
    color: var(--ink-muted);
}

.panel-alert-close {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    padding: 0.15rem;
    line-height: 1;
}

.panel-alert-close:hover {
    opacity: 1;
}

/* ------------------------------------------------------------ ledger ---- */

.ledger-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.0rem;
}

.ledger-icon.is-in {
    background-color: var(--brand-soft);
    color: var(--brand-dark);
}

.ledger-icon.is-out {
    background-color: #fdecec;
    color: #c43d3d;
}

.ledger-icon.is-pending {
    background-color: var(--brand-softer);
    color: var(--ink-muted);
}

[data-bs-theme="dark"] .ledger-icon.is-out {
    background-color: #3a1f1f;
    color: #f0a3a3;
}

/* --------------------------------------------------- wallet balance ---- */
/* The customer's wallet card. Four numbers that are easy to confuse, so the
   spendable one is given the size and the other three are tiles that explain
   it — the layout is the explanation, not the labels. */

.wallet-headline {
    background: linear-gradient(135deg, var(--brand-softer) 0%, var(--surface) 70%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
}

/* The one number the page exists to answer. `tabular-nums` so a balance that
   changes does not shuffle the digits around it, and `ch` units so the row
   does not reflow between 0 and 9 999 999. */
.wallet-amount {
    font-weight: 800;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem);
    line-height: 1.2;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .wallet-amount {
    color: var(--accent);
}

.wallet-unit {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink-muted);
}

.wallet-meter .progress.progress-brand {
    height: 8px;
}

/* `auto-fit` rather than a fixed three: the card sits in a column that is
   full width on the detail page and half of one inside a narrower shell, and
   a tile whose sentence wraps to four lines is worse than two rows of two. */
.wallet-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.wallet-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.wallet-tile-value {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.wallet-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}

.ledger-building {
    max-width: 220px;
    font-weight: 600;
}

/* ------------------------------------------------------------- forms ---- */

/* The chip and the words beside it are centred on each other. A section head
   is one line of title, sometimes with a hint under it, and against a 30px
   chip `flex-start` left the title riding the top of the chip rather than
   sitting in the middle of it. */
.form-step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-step-head label {
    margin: 0;
}

/* `.icon-chip` is the component in `base/icon/icon_chip.html`; `.step-num` is
   the name the skin arrived with and is kept so a downstream template that
   still writes it looks the same. */
.icon-chip,
.step-num {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background-color: var(--brand);
    color: var(--on-brand);
    font-weight: 800;
    font-size: 0.9375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The glyph gets a box of its own. bootstrap-icons shifts `.bi::before` down
   by .125em and the <i> is a 24px line box around a 16px glyph, so flex alone
   centres the *box*, not what you see — the icon lands low and off to one
   side. A flex item ignores `vertical-align` entirely, which is what actually
   centres it. */
.icon-chip > i,
.step-num > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

.icon-chip-lg {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.125rem;
}

.field-error {
    color: #c43d3d;
    font-size: 0.8125rem;
    margin-top: 0.35rem;
}

.landing-body .input-group-text {
    background-color: var(--brand-softer);
    border-color: var(--line);
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guide-steps li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--ink-muted);
    line-height: 1.9;
}

.guide-steps li i {
    color: var(--brand);
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* the ticket subjects: a radio per card, the input itself kept focusable */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}

.topic-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.topic-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.topic-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    height: 100%;
    padding: 0.95rem 0.6rem;
    text-align: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.topic-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--brand-softer);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.topic-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

.topic-text {
    font-size: 0.75rem;
    color: var(--ink-muted);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-check {
    position: absolute;
    inset-block-start: 0.45rem;
    inset-inline-end: 0.5rem;
    color: var(--brand);
    opacity: 0;
}

.topic-card:hover .topic-body {
    border-color: var(--brand-soft);
}

.topic-input:checked + .topic-body {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}

.topic-input:checked + .topic-body .topic-check {
    opacity: 1;
}

.topic-input:focus-visible + .topic-body {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* the documents box: the file input covers it, so click and drop both work */
.file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.25rem;
    text-align: center;
    border: 1.5px dashed var(--brand-soft);
    border-radius: var(--radius-md);
    background-color: var(--brand-softer);
    transition: border-color 0.15s ease;
}

.file-drop:hover,
.file-drop.is-dragover,
.file-drop:focus-within {
    border-color: var(--brand);
}

.file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-drop > i {
    font-size: 1.7rem;
    color: var(--brand);
}

.file-drop-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
}

.file-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
}

.file-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list-note {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.file-list li.is-invalid {
    border-color: #efb4b4;
}

.file-list li.is-invalid .file-list-note {
    color: #c43d3d;
}

.file-list-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.file-list-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--ink-muted);
    font-size: 0.8125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.file-list-remove:hover,
.file-list-remove:focus-visible {
    background-color: #fbe3e3;
    color: #c43d3d;
}

[data-bs-theme="dark"] .file-list-remove:hover,
[data-bs-theme="dark"] .file-list-remove:focus-visible {
    background-color: rgba(196, 61, 61, 0.18);
}

/* ----------------------------------------------------- list rows ---- */

.ticket-list,
.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ticket-row,
.assignment-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-row:hover,
.assignment-row:hover {
    color: var(--ink);
    border-color: var(--brand-soft);
    box-shadow: 0 6px 18px rgba(20, 83, 45, 0.06);
}

.ticket-row.is-unread {
    border-inline-start: 3px solid var(--brand);
}

.ticket-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--brand-softer);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ticket-row-main,
.assignment-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ticket-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ticket-row-title,
.assignment-title {
    font-weight: 700;
    font-size: 0.9375rem;
}

.ticket-code {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.ticket-row-summary {
    font-size: 0.875rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-row-meta,
.assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.ticket-row-side,
.assignment-side {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    color: var(--ink-muted);
}

@media (max-width: 575.98px) {
    .ticket-row,
    .assignment-row {
        flex-wrap: wrap;
    }

    .ticket-row-side,
    .assignment-side {
        width: 100%;
        justify-content: space-between;
    }
}

/* ------------------------------------------------------ ticket thread ---- */

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ticket-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 92%;
}

/* the user's own messages sit on the start side, support's on the end */
.ticket-msg.is-staff {
    margin-inline-start: auto;
    flex-direction: row-reverse;
}

.ticket-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ticket-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-msg.is-staff .ticket-avatar {
    background-color: var(--rail);
    color: #fff;
}

.ticket-bubble {
    min-width: 0;
    padding: 0.8rem 1rem;
    background-color: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    border-start-start-radius: 4px;
}

.ticket-msg.is-staff .ticket-bubble {
    background-color: var(--brand-softer);
    border-color: var(--brand-soft);
    border-start-start-radius: var(--radius-md);
    border-start-end-radius: 4px;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
}

.ticket-meta b {
    color: var(--ink);
    font-weight: 700;
}

.ticket-body {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.ticket-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.ticket-file {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 260px;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.8125rem;
    text-decoration: none;
}

.ticket-file:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.ticket-file > i {
    font-size: 1.05rem;
    color: var(--brand);
    flex-shrink: 0;
}

.ticket-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-file.is-image {
    width: 84px;
    height: 84px;
    padding: 0;
    overflow: hidden;
}

.ticket-file.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------ avatar ---- */

.avatar-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.user-avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--brand-soft);
}

/* ------------------------------------------------- the other workspaces ---- */
/* The expert's and the notary's desks each have their own rail and accent,  */
/* so a page never reads as the user panel while every piece stays the same. */
/* `--rail` and `--accent` come from the `.panel-shell` palette above.        */

.panel-sidebar.is-expert .panel-brand-mark,
.panel-sidebar.is-expert .panel-rail-nav .nav-link.active,
.panel-sidebar.is-notary .panel-brand-mark,
.panel-sidebar.is-notary .panel-rail-nav .nav-link.active {
    background-color: var(--accent);
}

.rail-mode-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.6rem 0.25rem 1rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

.rail-section-title {
    margin: 1.1rem 0.75rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rail-text);
    opacity: 0.8;
}

.rail-badge {
    margin-inline-start: auto;
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    background-color: var(--accent);
    /* the accent is a light tint, made to read on the dark rail: white on it
       was 2-2.2:1, the rail's own deep colour is the ink that reads */
    color: var(--rail-deep);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* on the open entry's brand fill a 25% white wash left the white count at
   2.2:1; a chip of the card's own colours reads on any palette */
.panel-rail-nav .nav-link.active .rail-badge {
    background-color: var(--surface);
    color: var(--ink);
}

.rail-link-expert {
    border: 1px dashed rgba(217, 145, 47, 0.45);
}

.panel-rail-nav .rail-link-expert i {
    color: #f3c47f;
}

.rail-link-notary {
    border: 1px dashed rgba(167, 139, 250, 0.45);
}

.panel-rail-nav .rail-link-notary i {
    color: #c4b1fd;
}

.mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background-color: var(--page);
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.mode-switch a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mode-switch a:hover {
    color: var(--ink);
}

.mode-switch a.active {
    background-color: var(--surface);
    color: var(--brand-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mode-switch a.is-expert i {
    color: #b8741c;
}

.mode-switch a.is-notary i {
    color: #6d4bd6;
}

.mode-switch a.is-expert.active {
    color: #b8741c;
}

.mode-switch a.is-notary.active {
    color: #573bb0;
}

.mode-switch-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background-color: var(--accent);
    color: var(--rail-deep);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* A row of figures read as a report rather than a form: the one that matters
   leads, the rest sit beside it. Used by an approved valuation cycle. */
.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.figure-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
}

.figure-tile strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.figure-tile.is-lead {
    grid-column: span 2;
    border-color: var(--brand-soft);
    background-color: var(--brand-softer);
}

.figure-tile.is-lead strong {
    font-size: 1.4rem;
    color: var(--brand-dark);
}

.figure-tile-note {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .figure-tile.is-lead {
        grid-column: span 1;
    }
}

/* What a numeric box holds, grouped, under itself — money here is whole
   tomans, so the boxes carry eight-digit numbers nobody can read raw. */
/* the figure a step carries beside its own title, rather than in its grid */
.form-step-aside {
    margin-inline-start: auto;
    min-width: 11rem;
    max-width: 100%;
}

.number-echo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    direction: ltr;
    unicode-bidi: isolate;
}

.number-echo::before {
    content: "≈";
    opacity: 0.6;
    font-weight: 600;
}

/* A number the form asks about but cannot change — the plot count once the
   building is already split. A greyed-out input invites a click that does
   nothing, so the figure is simply shown. */
.fact-value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
}

.fact-value-figure {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

/* the per-plot figures while they are being divided out of the totals: still
   readable, visibly not yours to type into (`[data-plot-derived].is-derived`) */
.is-derived .form-control[readonly] {
    background-color: var(--brand-softer);
    border-style: dashed;
    color: var(--ink-muted);
}

/* the banner at the top of a desk's dashboard — the expert's and the notary's
   are the same shape, told apart only by the palette they sit in */
/* ------------------------------------------------------- notifications ---- */
/* The bell's menu in the top bar and the page behind it are the same row in
   two sizes: the icon of the category, the words, and when it arrived. An
   unread one carries a tint and a marker on its start edge. */

.notification-menu {
    width: 22rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.5rem;
}

.notification-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.6rem;
    border-bottom: 1px solid var(--line);
}

.notification-menu-list {
    max-height: 21rem;
    overflow-y: auto;
    padding: 0.35rem 0;
}

.notification-menu-empty {
    margin: 0;
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.notification-menu-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.4rem 0.2rem;
    border-top: 1px solid var(--line);
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

.notification-row:hover {
    background-color: var(--brand-softer);
}

.notification-row.is-unread {
    background-color: var(--brand-soft);
}

.notification-row .feature-icon,
.notification-item .feature-icon {
    flex: none;
}

.notification-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.notification-row-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.notification-row-text {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    line-height: 1.8;
}

.notification-row-time {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

/* ---- the page ---- */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.notification-item.is-unread {
    border-color: var(--brand-soft);
    background-color: var(--brand-softer);
    border-inline-start: 3px solid var(--brand);
}

.notification-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.notification-item-text {
    margin: 0.4rem 0 0.3rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
    line-height: 2;
}

.notification-item-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 575.98px) {
    .notification-item {
        flex-wrap: wrap;
    }

    .notification-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.expert-hero {
    position: relative;
    overflow: hidden;
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius-md);
    /* the desk's own rail colour, lifted into a gradient */
    background: linear-gradient(
        120deg,
        var(--rail) 0%,
        color-mix(in srgb, var(--rail) 62%, var(--accent)) 100%
    );
    color: #fff;
}

.expert-hero-body {
    position: relative;
    z-index: 1;
}

.expert-hero h1 {
    color: #fff;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.expert-hero p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 2;
}

.expert-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.8rem;
    border-radius: 99px;
    background-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

.expert-hero-done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9be3b8;
}

.expert-hero-glyph {
    position: absolute;
    inset-block-end: -1.5rem;
    inset-inline-end: 1rem;
    font-size: 9rem;
    color: rgba(255, 255, 255, 0.06);
}

/* A tile is an <a>, and an <a> is inline until told otherwise: `h-100` was
   ignored, the vertical padding did not grow the box, and the card painted as
   one strip per line of text instead of one rectangle. */
.tile-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tile-link:hover {
    box-shadow: 0 10px 24px rgba(var(--brand-rgb), 0.1);
}

.tile-link:hover {
    color: var(--ink);
    border-color: var(--brand-soft);
}

.expert-building-cover {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
    color: #8fae9e;
    font-size: 2.4rem;
}

.expert-building-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------- dark theme ---- */

[data-bs-theme="dark"] .badge-tone.tone-amber,
[data-bs-theme="dark"] .panel-alert.tone-amber {
    background-color: rgba(208, 138, 44, 0.16);
    border-color: rgba(208, 138, 44, 0.3);
    color: #f0b865;
}

[data-bs-theme="dark"] .badge-tone.tone-red,
[data-bs-theme="dark"] .panel-alert.tone-red,
[data-bs-theme="dark"] .ledger-icon.is-out {
    background-color: rgba(196, 61, 61, 0.16);
    border-color: rgba(196, 61, 61, 0.3);
    color: #ef8a8a;
}

[data-bs-theme="dark"] .badge-tone.tone-blue,
[data-bs-theme="dark"] .panel-alert.tone-blue {
    background-color: rgba(63, 127, 214, 0.16);
    border-color: rgba(63, 127, 214, 0.3);
    color: #8db6ee;
}

[data-bs-theme="dark"] .badge-tone.tone-purple {
    background-color: rgba(124, 92, 214, 0.18);
    color: #b3a0ef;
}

[data-bs-theme="dark"] .badge-tone.tone-cyan {
    background-color: rgba(27, 138, 166, 0.18);
    color: #7fd3e8;
}

[data-bs-theme="dark"] .panel-alert.tone-green {
    background-color: var(--brand-soft);
    border-color: var(--brand-soft);
    color: #9be3b8;
}

/* `--brand-dark` is the light theme's ink for the brand. The dark palettes
   lift their brand to read on the page but keep brand-dark a mid tone: 3.1:1
   on the soft chips, 3.7:1 on the soft buttons. The accent is the dark ink. */
[data-bs-theme="dark"] .badge-tone.tone-green,
[data-bs-theme="dark"] .btn-soft {
    color: var(--accent);
}

/* and the soft button's hover ink, `--brand-darker`, is near-black there */
[data-bs-theme="dark"] .btn-soft:hover {
    color: var(--ink);
}

/* The deep bands under white type start at `--brand-darker`, which every dark
   palette turns into a light tint (the strongest *ink* on a dark page): the
   admin dashboard's hero came out pale green under its white title, 1.5:1.
   In the dark they run from the rail's deep colour to the brand's soft one. */
[data-bs-theme="dark"] :is(.stats-band, .cta-band, .promo-card) {
    background: linear-gradient(120deg, var(--rail-deep) 0%, var(--brand-soft) 100%);
}

/* the account menu's wallet band ends on it too, under the brand ink */
[data-bs-theme="dark"] .account-wallet {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* The feature icons' chips are pastel squares, made for a white card: in the
   dark they were light islands, the grey one's figure 4:1. They take the dark
   tone pairs of the badges above. */
[data-bs-theme="dark"] .feature-icon.tone-green { background-color: rgba(36, 145, 90, 0.18); color: #7dd3a4; }
[data-bs-theme="dark"] .feature-icon.tone-purple { background-color: rgba(124, 92, 214, 0.18); color: #b3a0ef; }
[data-bs-theme="dark"] .feature-icon.tone-blue { background-color: rgba(63, 127, 214, 0.16); color: #8db6ee; }
[data-bs-theme="dark"] .feature-icon.tone-amber { background-color: rgba(208, 138, 44, 0.16); color: #f0b865; }
[data-bs-theme="dark"] .feature-icon.tone-red { background-color: rgba(196, 61, 61, 0.16); color: #ef8a8a; }
[data-bs-theme="dark"] .feature-icon.tone-gray { background-color: rgba(157, 179, 168, 0.12); color: var(--ink-muted); }

/* In the dark the neutrals are what you actually see: a page, a card and a
   rule are most of the screen, and the user panel's are tinted green. A desk
   that only swapped its brand colour still read as the user panel with an
   amber button on it, so each one carries its own surfaces too. */
[data-bs-theme="dark"] .panel-shell.theme-expert {
    --brand: #d9a054;
    --brand-dark: #c2882f;
    --brand-darker: #f0cb93;
    --brand-soft: #3a2c15;
    --brand-softer: #2c2210;
    --ink: #eceef6;
    --ink-muted: #a5aec5;
    --line: #29314a;
    --surface: #181d2e;
    --page: #10131f;
    --rail: #121832;
    --accent: #e0ac62;
}

[data-bs-theme="dark"] .panel-shell.theme-notary {
    --brand: #a78bfa;
    --brand-dark: #8b6ceb;
    --brand-darker: #cdbcfd;
    --brand-soft: #2d2350;
    --brand-softer: #241c42;
    --ink: #efebf8;
    --ink-muted: #b0a6c8;
    --line: #2f2750;
    --surface: #1b1630;
    --page: #130f1f;
    --rail: #171130;
    --accent: #b9a2fb;
}

[data-bs-theme="dark"] .expert-building-cover {
    background: linear-gradient(150deg, #1c3a2b 0%, #163023 100%);
}

/* ------------------------------------------------------------ terms ---- */

.terms-body h2 {
    scroll-margin-top: 96px;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    border-bottom: 1px solid var(--line);
}

.terms-body > h2:first-child,
.terms-body > p:first-child + h2 {
    margin-top: 1.25rem;
}

.terms-body h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.0rem;
    font-weight: 700;
}

.terms-body p,
.terms-body li {
    line-height: 2;
}

.terms-body ul,
.terms-body ol {
    padding-inline-start: 1.25rem;
}

.terms-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.terms-toc-list li {
    counter-increment: toc;
}

.terms-toc-list a {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.terms-toc-list a::before {
    content: counter(toc);
    min-width: 1.1rem;
    font-weight: 800;
    color: var(--brand);
}

[dir="rtl"] .terms-toc-list a::before {
    content: counter(toc, persian);
}

.terms-toc-list a:hover,
.terms-toc-list a:focus-visible {
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

.terms-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    background-color: var(--brand-softer);
}

.footer-legal {
    color: inherit;
    opacity: 0.8;
    text-decoration: none;
}

.footer-legal:hover,
.footer-legal:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

/* --------------------------------------------------------- kyc tour ---- */

.kyc-steps {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.kyc-step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
}

/* the connector to the previous step */
.kyc-step::before {
    content: "";
    position: absolute;
    top: 21px;
    inset-inline-start: calc(-50% + 28px);
    inset-inline-end: calc(50% + 28px);
    height: 2px;
    background-color: var(--line);
}

.kyc-step:first-child::before {
    display: none;
}

.kyc-step.is-done::before,
.kyc-step.is-current::before {
    background-color: var(--brand);
}

.kyc-step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
}

.kyc-step-dot {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--ink-muted);
    border: 2px solid var(--line);
    border-radius: 50%;
    background-color: var(--surface);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kyc-step.is-current .kyc-step-dot {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 0 0 5px var(--brand-soft);
}

.kyc-step.is-done .kyc-step-dot {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
}

a.kyc-step-inner:hover .kyc-step-dot,
a.kyc-step-inner:focus-visible .kyc-step-dot {
    box-shadow: 0 0 0 5px var(--brand-soft);
}

.kyc-step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.kyc-step.is-current .kyc-step-label,
.kyc-step.is-done .kyc-step-label {
    color: var(--ink);
}

@media (max-width: 575.98px) {
    .kyc-step-dot {
        width: 36px;
        height: 36px;
        font-size: 1.0rem;
    }

    .kyc-step::before {
        top: 17px;
        inset-inline-start: calc(-50% + 22px);
        inset-inline-end: calc(50% + 22px);
    }

    .kyc-step-label {
        font-size: 0.75rem;
    }
}

.kyc-panel {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.kyc-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.kyc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.kyc-checklist i {
    font-size: 1.25rem;
    color: var(--brand);
}

.kyc-checklist strong {
    display: block;
    font-size: 0.9375rem;
}

.kyc-checklist span {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--ink-muted);
}

.kyc-intro-art {
    max-width: 260px;
    aspect-ratio: 1;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
    color: var(--brand);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--brand-soft), var(--brand-softer) 70%);
}

.terms-reader {
    max-height: 52vh;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--page);
    scrollbar-width: thin;
    transition: border-color 0.2s ease;
}

.terms-reader:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.terms-reader.is-read {
    border-color: var(--brand);
}

.terms-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.terms-progress .progress {
    flex: 1 1 auto;
    height: 6px;
}

.terms-progress .progress-bar {
    width: 0;
    transition: width 0.15s ease;
}

.terms-progress-label {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.terms-reader.is-read + .terms-progress .terms-progress-label {
    font-weight: 600;
    color: var(--brand-dark);
}

.terms-accept {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    cursor: pointer;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.terms-accept .form-check-input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.3rem;
}

.terms-accept:has(input:checked) {
    border-color: var(--brand);
    background-color: var(--brand-softer);
}

.terms-accept:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.65;
}

.terms-accept.is-invalid {
    border-color: #e28b8b;
}

.kyc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.kyc-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.kyc-summary > div {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.kyc-summary dt {
    margin-bottom: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.kyc-summary dd {
    margin: 0;
    font-size: 1.0rem;
    font-weight: 700;
}

.kyc-accepted {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: var(--brand-dark);
    border-radius: var(--radius-md);
    background-color: var(--brand-softer);
}

.kyc-done {
    max-width: 520px;
    margin: 1rem auto;
    text-align: center;
}

.kyc-done-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #b7791f;
    border-radius: 50%;
    background-color: #fff4dc;
}

.icon-forward {
    display: inline-block;
}

[dir="ltr"] .icon-forward {
    transform: scaleX(-1);
}

[data-bs-theme="dark"] .kyc-done-icon {
    background-color: rgba(255, 190, 60, 0.14);
    color: #f3c566;
}

@media (prefers-reduced-motion: reduce) {
    .terms-progress .progress-bar,
    .kyc-step-dot {
        transition: none;
    }
}

/* ==========================================================================
   Building detail page — header, gallery mosaic, specs, plot map, tabs and
   the order box. Everything reads the site tokens, so the dark theme only
   has to override the few fixed colours at the end.
   ========================================================================== */

/* ------------------------------------------------------------- header ---- */

.bd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bd-head-main {
    flex: 1 1 22rem;
    min-width: 0;
}

.bd-title {
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-weight: 900;
    line-height: 1.5;
}

.bd-address {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.bd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.bd-chip.is-dark {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}

.bd-chip.is-brand {
    background-color: var(--brand-softer);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

.bd-chip.is-live {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}

.bd-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(18, 60, 42, 0.06);
}

.bd-value-figure {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.bd-return {
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    text-align: center;
}

.bd-return-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.bd-return-figure {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--brand-dark);
    white-space: nowrap;
}

.bd-return-figure small {
    font-size: 0.75rem;
    font-weight: 600;
}

/* ------------------------------------------------------------ gallery ---- */

.bd-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.bd-gallery-main,
.bd-gallery-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
    min-height: 0;
}

.bd-gallery-main {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

.bd-gallery-tile {
    aspect-ratio: 4 / 3;
}

.bd-tile {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.bd-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bd-tile:hover img,
.bd-tile:focus-visible img {
    transform: scale(1.03);
}

.bd-tile:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
}

.bd-tile-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8fae9e;
    font-size: 3rem;
    cursor: default;
}

/* the labels sit over the photo but never catch its click */
.bd-tile-badge,
.bd-tile-caption,
.bd-tile-zoom,
.bd-tile-more {
    pointer-events: none;
}

.bd-tile-badge {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    max-width: calc(100% - 1.2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background-color: rgba(10, 20, 15, 0.82);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.bd-tile-badge.is-brand {
    position: static;
    display: inline-block;
    background-color: var(--brand);
    margin-bottom: 0.35rem;
}

.bd-tile-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 2.5rem 1rem 0.9rem;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 16, 12, 0.78) 100%);
    color: #fff;
    font-weight: 800;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
}

.bd-tile-zoom {
    position: absolute;
    inset-block-end: 0.8rem;
    inset-inline-end: 0.8rem;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 20, 15, 0.55);
    color: #fff;
}

.bd-tile-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(8, 16, 12, 0.55);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.bd-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    text-align: center;
    background: #13241c;
    color: rgba(255, 255, 255, 0.72);
}

.bd-plan-glyph {
    font-size: 1.9rem;
    color: #45c07c;
}

.bd-plan-title {
    font-size: 1.0rem;
    font-weight: 800;
    color: #fff !important;
    margin: 0;
}

.bd-plan-note {
    font-size: 0.8125rem;
    margin: 0;
}

.bd-plan-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    background-color: #fff;
    color: #13241c;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.bd-plan-btn:hover,
.bd-plan-btn:focus-visible {
    background-color: var(--brand-soft);
    color: #13241c;
}

@media (min-width: 768px) {
    .bd-gallery.has-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        height: clamp(380px, 40vw, 540px);
    }

    .bd-gallery.has-tiles .bd-gallery-main {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }

    .bd-gallery.has-tiles .bd-gallery-tile {
        aspect-ratio: auto;
    }

    .bd-gallery:not(.has-tiles) .bd-gallery-main {
        aspect-ratio: 21 / 9;
    }

    /* fewer than four tiles: the ones there are stretch to fill the half */
    .bd-gallery.tiles-1 .bd-gallery-tile {
        grid-column: span 2;
        grid-row: span 2;
    }

    .bd-gallery.tiles-2 .bd-gallery-tile {
        grid-column: span 2;
    }

    .bd-gallery.tiles-3 .bd-gallery-main + .bd-gallery-tile {
        grid-column: span 2;
    }
}

/* -------------------------------------------------------------- specs ---- */

.bd-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.bd-spec {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-block-end: 1px solid var(--line);
}

.bd-spec-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-softer);
    color: var(--brand-dark);
    font-size: 1.05rem;
}

.bd-spec-value {
    font-weight: 800;
    font-size: 0.9375rem;
}

@media (min-width: 576px) {
    .bd-spec {
        border-block-end: 0;
    }

    .bd-spec + .bd-spec {
        border-inline-start: 1px solid var(--line);
    }
}

/* ----------------------------------------------------------- plot map ---- */

.bd-progress {
    height: 10px;
}

.bd-plot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    max-height: 26rem;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    background-color: var(--page);
}

@media (min-width: 576px) {
    .bd-plot-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

.bd-plot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.bd-plot.is-sold {
    background-color: #111a15;
    color: #fff;
}

.bd-plot.is-free {
    background-color: var(--brand-dark);
    color: var(--on-brand);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.bd-plot.is-mine {
    background-color: #d08a2c;
    color: #fff;
}

/* held for another buyer who is paying at the bank right now */
.bd-plot.is-held {
    background-color: #f3e3c4;
    color: #8a5a12;
    box-shadow: inset 0 0 0 1px #d8b477;
}

.bd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.bd-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bd-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.bd-dot.is-sold {
    background-color: #111a15;
}

.bd-dot.is-free {
    background-color: var(--brand-dark);
}

.bd-dot.is-mine {
    background-color: #d08a2c;
}

.bd-dot.is-held {
    background-color: #f3e3c4;
    box-shadow: inset 0 0 0 1px #d8b477;
}

/* --------------------------------------------------------------- tabs ---- */

.bd-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    background-color: var(--page);
    scrollbar-width: none;
}

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

.bd-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

.bd-tab:hover {
    color: var(--brand-dark);
}

.bd-tab.active {
    background-color: var(--surface);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(18, 60, 42, 0.1);
}

.bd-tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.bd-report {
    padding: 1rem;
    border-radius: var(--radius-md);
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
}

.bd-report-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface);
    color: var(--brand-dark);
    font-size: 1.1rem;
}

.bd-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
}

.bd-fact-value {
    font-size: 0.875rem;
    font-weight: 800;
    text-align: end;
}

.bd-fact-value.is-brand {
    color: var(--brand-dark);
}

.bd-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.6rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.bd-download + .bd-download {
    border-block-start: 1px dashed var(--line);
}

.bd-btn-dark,
.bd-btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.bd-btn-dark {
    background-color: #111a15;
    color: #fff;
}

.bd-btn-dark:hover,
.bd-btn-dark:focus-visible {
    background-color: var(--brand-dark);
    color: var(--on-brand);
}

.bd-btn-soft {
    background-color: var(--brand-softer);
    border: 1px solid var(--brand-soft);
    color: var(--brand-dark);
}

.bd-btn-soft:hover,
.bd-btn-soft:focus-visible {
    background-color: var(--brand-soft);
    color: var(--brand-darker);
}

.bd-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
}

.bd-amenities li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    background-color: var(--page);
    border: 1px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 600;
}

.bd-amenities i {
    color: var(--brand);
}

/* ---------------------------------------------------------- order box ---- */

.bd-order {
    box-shadow: 0 16px 40px rgba(18, 60, 42, 0.08);
}

.bd-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background-color: var(--page);
}

.bd-stepper {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--page);
}

.bd-step {
    flex: none;
    width: 3.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    font-size: 1.25rem;
}

.bd-step:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
}

.bd-step:disabled {
    opacity: 0.4;
}

.bd-step-value {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.bd-step-value input {
    width: 100%;
    border: 0;
    background: none;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--ink);
    -moz-appearance: textfield;
}

.bd-step-value input::-webkit-outer-spin-button,
.bd-step-value input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bd-step-value input:focus {
    outline: none;
}

.bd-stepper:focus-within {
    border-color: var(--brand);
}

.bd-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bd-preset {
    flex: 1 1 auto;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.bd-preset:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.bd-preset.active {
    background-color: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-darker);
}

.bd-preset:disabled {
    opacity: 0.45;
}

.bd-summary {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    background-color: var(--page);
    border: 1px solid var(--line);
}

.bd-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.35rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.bd-summary-row strong {
    color: var(--ink);
    white-space: nowrap;
}

.bd-summary-rent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--brand-soft);
    color: var(--brand-darker);
    font-size: 0.875rem;
}

.bd-summary-rent span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bd-summary-rent strong {
    white-space: nowrap;
}

.bd-summary-total {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding-block-start: 0.6rem;
    font-size: 0.875rem;
    font-weight: 800;
}

.bd-total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-inline-start: auto;
}

.bd-total-figure {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.bd-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.0rem;
    font-weight: 800;
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.bd-order-btn:hover,
.bd-order-btn:focus-visible {
    background-color: var(--brand-darker);
    border-color: var(--brand-darker);
}

.bd-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.bd-trust span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.3rem;
    border-radius: 8px;
    background-color: var(--page);
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.bd-countdown .countdown-cell {
    padding: 0.35rem 0.2rem;
}

.bd-countdown .countdown-value {
    font-size: 1.0rem;
}

.bd-disclaimer {
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--line);
    color: var(--ink-muted);
    font-size: 0.75rem;
    line-height: 2;
}

/* ---------------------------------------------------------- dark theme ---- */

[data-bs-theme="dark"] .bd-value,
[data-bs-theme="dark"] .bd-order {
    box-shadow: none;
}

[data-bs-theme="dark"] .bd-plot.is-sold,
[data-bs-theme="dark"] .bd-dot.is-sold {
    background-color: #2f4038;
}

[data-bs-theme="dark"] .bd-btn-dark {
    background-color: #2f4038;
}

[data-bs-theme="dark"] .bd-plan {
    background: #0a1712;
}

@media (prefers-reduced-motion: reduce) {
    .bd-tile img {
        transition: none;
    }
}

/* ------------------------------------------------- deed appointments ---- */
/* the date picker at checkout / reschedule, the terms box and the callout */
/* that tells a buyer where and when to sign                               */

.min-w-0 {
    min-width: 0;
}

.deed-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.deed-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.7rem;
    padding-inline-start: 2.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: 0.8125rem;
    cursor: pointer;
}

.deed-slot .form-check-input {
    position: absolute;
    inset-inline-start: 0.7rem;
    inset-block-start: 0.8rem;
    margin: 0;
}

.deed-slot:hover {
    border-color: var(--brand);
}

.deed-slot:has(input:checked) {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.deed-slot-day {
    font-weight: 800;
    color: var(--ink);
}

.deed-slot-date {
    color: var(--ink-muted);
}

.deed-slot-time {
    font-weight: 700;
    color: var(--brand-dark);
}

.deed-terms {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--page);
}

.deed-terms ul {
    padding-inline-start: 1.1rem;
}

.deed-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-soft);
    background-color: var(--brand-softer);
    color: var(--brand-darker);
    font-size: 0.9375rem;
    line-height: 2;
}

.deed-callout > i {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--brand);
}

[data-bs-theme="dark"] .deed-callout {
    color: var(--ink);
}

/* ---- checkout: where the buyer is, and the property on the order box ---- */

.checkout-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
}

.checkout-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
    font-weight: 700;
}

.checkout-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background-color: var(--surface);
    font-size: 0.875rem;
}

.checkout-steps li.is-current {
    color: var(--ink);
}

.checkout-steps li.is-current .checkout-step-dot {
    border-color: var(--brand);
    color: var(--brand-dark);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.checkout-steps li.is-done .checkout-step-dot {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
}

/* ---- the sell page's tour ---- */
/* The steps are tabs: one section at a time, walked with the two buttons or
   jumped to from the row above. `.is-wizard` is set by landing.js, so with no
   script every section is simply on the page and the form posts as before. */

.is-wizard [data-wizard-step] {
    display: none;
}

.is-wizard [data-wizard-step].is-current {
    display: block;
}

.wizard-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.checkout-property {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.checkout-property img {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* ------------------------------------------------ people and experts ---- */
/* a round photo with an icon fallback — the expert picker, the expert      */
/* profile and the experts listed on a building page                        */

.person-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 1.2rem;
}

.person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-avatar.is-lg {
    width: 76px;
    height: 76px;
    font-size: 2rem;
}

.person-avatar.is-xl {
    width: 120px;
    height: 120px;
    font-size: 3rem;
}

/* the admin's new valuation cycle */
/* stops just under the panel's sticky top bar instead of sliding over it */
.cc-sticky {
    position: sticky;
    top: calc(var(--topbar-height, 64px) + 1rem);
}

.cc-building-cover {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #d8e9df 0%, #c3ddd0 100%);
    color: #8fae9e;
    font-size: 2.5rem;
}

.cc-building-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-selected {
    display: grid;
    gap: 0.75rem;
}

.cc-empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.cc-expert-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-soft);
    background-color: var(--brand-softer);
}

.cc-expert-card-main {
    flex: 1;
    min-width: 0;
}

.cc-expert-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.4rem 0.9rem;
    margin-top: 0.6rem;
    font-size: 0.8125rem;
}

.cc-expert-facts dt {
    color: var(--ink-muted);
    font-weight: 500;
}

.cc-expert-facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* A column, not a grid with a gap: a row that the search filters out
   collapses to nothing, and its own margin has to go with it or the list is
   left with a hole where the row used to be. */
.cc-expert-list {
    display: flex;
    flex-direction: column;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.2rem;
}

.cc-expert-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease,
        margin-bottom 0.18s ease, padding-top 0.18s ease,
        padding-bottom 0.18s ease, border-width 0.18s ease;
    max-height: 6rem;
}

.cc-expert-list > *:last-child {
    margin-bottom: 0;
}

/* on its way out of the list, and the first frame of its way back in */
.cc-expert-option.is-leaving,
.cc-expert-option.is-entering {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cc-expert-option {
        transition: none;
    }
}

.cc-expert-option:hover {
    border-color: var(--brand);
}

.cc-expert-option:has(input:checked) {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.cc-expert-option .form-check-input {
    flex: none;
    margin: 0;
}

.cc-option-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cc-option-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
}

.cc-option-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.cc-deadline {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid #f1d9b5;
    background-color: #fdf6ec;
}

[data-bs-theme="dark"] .cc-deadline {
    border-color: #4a3b22;
    background-color: #2a2116;
}

/* the experts behind a building's approved price */
.bd-experts {
    display: grid;
    gap: 0.5rem;
}

.bd-expert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: 0.875rem;
}

.bd-expert-main {
    flex: 1;
    min-width: 0;
}

.bd-expert-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

@media (max-width: 575.98px) {
    .bd-expert {
        flex-wrap: wrap;
    }

    .bd-expert-side {
        width: 100%;
        align-items: flex-start;
        text-align: start;
    }
}

/* ---- secondary market: opening a listing, and the market board ---- */

.sell-picker {
    display: grid;
    gap: 0.6rem;
}

.sell-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    cursor: pointer;
}

.sell-option:hover {
    border-color: var(--brand);
}

.sell-option:has(input:checked) {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.sell-option.is-off {
    opacity: 0.55;
    cursor: not-allowed;
}

.sell-option .form-check-input {
    flex: none;
    margin: 0;
}

.sell-option-cover {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--brand-softer);
    color: var(--brand);
    font-size: 1.2rem;
}

.sell-option-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sell-option-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sell-option-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.sell-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sell-stepper .form-control {
    max-width: 6rem;
    text-align: center;
}

.sell-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--line);
}

/* How many plots go on sale is the other half of step one, so it gets a band
   of its own across the card — a tint away from the card it sits on, the same
   full width as a property row, and a stepper big enough to be the thing you
   reach for. */
.sell-count-band {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-soft);
    background-color: var(--brand-softer);
}

.sell-count-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sell-count-head .form-label {
    font-size: 1.0rem;
    font-weight: 700;
}

.sell-count-free {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    background-color: var(--surface);
    color: var(--ink-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sell-count-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.sell-count-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.sell-count-figure {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9375rem;
}

.sell-stepper.is-lg {
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
}

.sell-stepper.is-lg .btn {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0;
}

.sell-stepper.is-lg .form-control {
    max-width: 5.5rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 800;
}

.sell-stepper.is-lg .form-control:focus {
    box-shadow: none;
}

.sell-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem;
}

.sell-type {
    position: relative;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    cursor: pointer;
}

.sell-type:hover {
    border-color: var(--brand);
}

.sell-type:has(input:checked) {
    border-color: var(--brand);
    background-color: var(--brand-softer);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.sell-type .form-check-input {
    position: absolute;
    top: 0.9rem;
    inset-inline-end: 0.9rem;
    margin: 0;
}

.sell-type-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-inline-end: 1.6rem;
}

.sell-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    margin-bottom: 0.2rem;
}

.sell-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.sell-timeline li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.sell-timeline-dot {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--brand-soft);
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

/* the public market board: its filter row and the "sell yours" panel. The
   tiles themselves are `building-card`s, so the resale board and the property
   list read as one site. */

.market-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
}

.market-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 14rem;
    margin: 0;
}

.market-filter-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.market-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-soft);
    background-color: var(--brand-softer);
}

@media (max-width: 575.98px) {
    .market-filter-actions {
        width: 100%;
    }

    .market-filter-actions .btn {
        flex: 1;
    }
}

.cc-expert-option.is-off {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================================== sealed bid ==== */
/* The public listing page. Every offer on this market is sealed — nobody sees
   anybody else's figure until the window closes — so the page is built around
   that: a dark banner that says so, the property and its approved valuation on
   the start side, and the envelope on the end side. */

.sealed-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, #101a2e 0%, #1d2b48 100%);
    color: #fff;
}

.sealed-banner-mark {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.12);
}

.sealed-banner-main {
    flex: 1 1 18rem;
    min-width: 0;
}

/* `.landing-body h1` paints every heading `--ink`, which on this dark banner
   is ink on ink — so the rule that owns the banner has to outrank it. */
.sealed-banner .sealed-banner-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.sealed-banner-sub {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}

.sealed-banner-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    line-height: 2;
}

.sealed-banner-side {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-inline-start: auto;
}

.sealed-banner-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sealed-banner-stat .stat-label {
    color: rgba(255, 255, 255, 0.6);
}

.sealed-banner-stat strong {
    font-size: 1rem;
    font-weight: 800;
}

/* ---- the property ---- */

.sealed-hero {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
    overflow: hidden;
}

/* the same shape the landing hero gives a photograph, so the property is the
   first thing on the page rather than a strip above the figures */
.sealed-hero-cover {
    position: relative;
    aspect-ratio: 5 / 3;
    background-color: var(--brand-softer);
}

.sealed-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sealed-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 3rem;
    color: var(--brand);
}

.sealed-hero-badges {
    position: absolute;
    inset-block-start: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: calc(100% - 1.5rem);
}

.sealed-hero-badges.is-start {
    inset-inline-start: 0.75rem;
}

.sealed-hero-badges.is-end {
    inset-inline-end: 0.75rem;
    justify-content: flex-end;
}

.sealed-hero-body {
    padding: 1.1rem 1.25rem 0.75rem;
}

.sealed-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background-color: var(--line);
    border-top: 1px solid var(--line);
}

.sealed-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    background-color: var(--surface);
}

.sealed-stat strong {
    font-size: 1rem;
    font-weight: 800;
}

.sealed-stat-note {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

/* ---- the clock the envelopes open on ---- */

.sealed-clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.sealed-clock-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background-color: var(--brand-softer);
}

.sealed-clock-cell strong {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.sealed-clock-cell span {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

.sealed-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.6rem;
}

.sealed-mini {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

.sealed-mini .feature-icon {
    flex: none;
}

.sealed-terms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.sealed-terms li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
    line-height: 2;
}

.sealed-terms i {
    flex: none;
    margin-top: 0.4rem;
    color: var(--brand);
}

/* ---- the envelope ---- */

.sealed-box {
    border-color: var(--brand-soft);
}

.sealed-box-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sealed-box-mark {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background-color: #101a2e;
    color: #fff;
}

.sealed-floor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.9rem;
    border-radius: var(--radius-sm);
    background-color: var(--brand-softer);
    border: 1px dashed var(--brand-soft);
}

.sealed-field .form-control {
    font-size: 1.25rem;
    font-weight: 800;
}

.sealed-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.sealed-submit {
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.sealed-offer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.sealed-offer:last-child {
    border-bottom: 0;
}

/* ---- how it works, at the foot of the page ---- */

.sealed-step {
    position: relative;
    padding: 1.6rem 1.1rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
}

.sealed-step-num {
    position: absolute;
    inset-block-start: -0.9rem;
    inset-inline-end: 1.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #101a2e;
    color: #fff;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .sealed-clock {
        grid-template-columns: repeat(2, 1fr);
    }

    .sealed-hero-cover {
        aspect-ratio: 16 / 10;
    }
}

[data-bs-theme="dark"] .sealed-banner {
    background: linear-gradient(120deg, #0b1220 0%, #16223a 100%);
}

/* ======================================================= the date picker === */
/* The site's own date picker (`[data-date-picker]`, base_date_picker.js), in
   both its shapes. It is drawn from the panel tokens, so it wears whichever
   desk it is opened on — green in the user panel, amber on the expert's,
   violet on the notary's — in light and dark alike, and needs no palette of
   its own. */

/* --------------------------------------------------- the date picker ---- */
/* One popup, two shapes: a single month with year/month arrows, or two months
   with the preset list beside them. `base_date_picker.js` draws both; the
   classes below are all it uses, and the only thing it sets inline is the
   popup's own left/top, which is measured at open time. CSP lists no
   'unsafe-inline' in style-src, so nothing else can travel in an attribute. */

.dp-popup {
    position: absolute;
    z-index: 1080;
    padding: 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    color: var(--ink);
    font-size: 0.9375rem;
    max-width: calc(100vw - 16px);
}

.dp-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.dp-months {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dp-month {
    width: 16.5rem;
}

.dp-month-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.dp-month-title {
    flex: 1;
    text-align: center;
    font-weight: 800;
    font-size: 0.9375rem;
}

.dp-nav {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--ink-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.dp-nav:hover {
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

/* The month a two-month view cannot page keeps its slot, so the grids stay
   level instead of jumping by the width of a button. */
.dp-nav.is-hidden {
    visibility: hidden;
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-weekday {
    padding: 0.25rem 0;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

.dp-day {
    height: 2.1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.dp-day.is-blank {
    cursor: default;
}

/* The day's number in the middle of its cell — the ink, not the line box.
   Vazirmatn's line box is cut for Arabic script (ascent 102.5%, descent
   53.7%), so a digit, which stands on the baseline and is as tall as a Latin
   capital, rode 3px above the middle of its cell on a Persian page. The
   number is a box of its own whose text box is trimmed to the cap height
   above and the baseline below, and the cell centres that box — in any font,
   in either script of digit (۱۵ is within half a pixel of 15's height). A
   browser without `text-box` draws the cell as it did before. */
.dp-day {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-num {
    text-box: trim-both cap alphabetic;
}

.dp-day:hover:not(.is-blank) {
    background-color: var(--brand-softer);
}

.dp-day.is-today {
    box-shadow: inset 0 0 0 1px var(--brand);
    color: var(--brand-dark);
}

.dp-day.is-inside {
    background-color: var(--brand-soft);
    border-radius: 0;
}

.dp-day.is-edge {
    background-color: var(--brand);
    color: var(--on-brand);
}

/* ---- the range shape's preset column ---- */

.dp-presets {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8.5rem;
}

.dp-preset {
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    text-align: start;
    color: var(--ink-muted);
    font-size: 0.875rem;
    cursor: pointer;
}

.dp-preset:hover {
    background-color: var(--brand-softer);
    color: var(--brand-dark);
}

/* ---- the foot ---- */

.dp-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.dp-preview {
    margin-inline-end: auto;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.dp-btn {
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* the single shape's buttons — two, or three with a time — share the
   width, each on one line; the range shape's sit at the end, after the
   preview */
.dp-popup:not(.is-range) .dp-btn {
    flex: 1;
    padding-inline: 0.5rem;
    white-space: nowrap;
}

.dp-today,
.dp-cancel {
    background-color: var(--brand-softer);
    color: var(--ink-muted);
}

.dp-clear {
    background-color: transparent;
    color: var(--ink-muted);
    box-shadow: inset 0 0 0 1px var(--line);
}

.dp-apply {
    background-color: var(--brand);
    color: var(--on-brand);
}

.dp-apply:hover {
    background-color: var(--brand-dark);
}

/* ---- a moment's time: hour : minute : second, between month and foot ---- */

.dp-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.dp-time-label {
    color: var(--ink-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.dp-time-fields {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dp-time-field {
    position: relative;
}

/* a field's button: its number and a chevron */
.dp-time-part {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 3.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    cursor: pointer;
}

.dp-time-part::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    opacity: 0.6;
}

.dp-time-part:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* its list: five and a half rows, a third of the twenty a browser gives a
   select's — the cut row says it scrolls */
.dp-time-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2;
    min-width: 100%;
    max-height: calc(5.5 * 1.5rem + 0.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.dp-time-list.is-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.dp-time-option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.dp-time-option:hover {
    background-color: var(--brand-softer);
}

.dp-time-option.is-chosen {
    background-color: var(--brand);
    color: var(--on-brand);
}

.dp-time-sep {
    color: var(--ink-muted);
    font-weight: 800;
}

/* ================================================ a file box in words === */
/* A file box in the page's language (base/base_form_words.js). The browser
   writes "Choose File" and "No file chosen" in its own language, and no
   stylesheet can change them; the box draws both from `_2_locales` and the
   real input lies over it, transparent, so a click, its label, the keyboard
   and a dropped file all still reach it. The box carries the input's own
   classes (form-control, form-control-sm, is-invalid), so it is sized and
   marked like the boxes around it. */

.file-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    cursor: pointer;
}

.file-box > .file-box-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.file-box-button {
    flex: none;
    padding-inline-end: 0.75rem;
    border-inline-end: 1px solid var(--line);
    font-weight: 600;
}

.file-box-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-muted);
}

.file-box.has-file .file-box-name {
    color: var(--ink);
}

.landing-body .file-box:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

@media (max-width: 575.98px) {
    .dp-body,
    .dp-months {
        flex-direction: column;
    }

    .dp-presets {
        flex-direction: row;
        flex-wrap: wrap;
    }
}