/* ============================================================
   Tasgaon Tax Assessment — design system
   ============================================================
   Maharashtra civic — modern but rooted.
   Colors: deep red, saffron, warm cream pulled from the Nagar
   Parishad seal. Type: Fraunces (serif display) + Outfit (UI sans)
   + Anek Devanagari (Marathi) + JetBrains Mono (codes/IDs).
   ============================================================ */

/* ---- Local font face declarations ---- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-var.woff2') format('woff2-variations'),
         url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-var-italic.woff2') format('woff2-variations'),
         url('../fonts/fraunces-var-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit-var.woff2') format('woff2-variations'),
         url('../fonts/outfit-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Anek Devanagari';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
    src: url('../fonts/anek-devanagari.woff2') format('woff2-variations'),
         url('../fonts/anek-devanagari.woff2') format('woff2');
}
@font-face {
    font-family: 'Anek Devanagari';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('../fonts/anek-latin.woff2') format('woff2-variations'),
         url('../fonts/anek-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-var.woff2') format('woff2-variations'),
         url('../fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ---- Design tokens ---- */
:root {
    /* Brand */
    --tg-red:        #A8201E;
    --tg-red-dark:   #7A0E0C;
    --tg-red-soft:   #F5DDD8;
    --tg-saffron:    #D2691E;
    --tg-saffron-dark: #A14F11;
    --tg-saffron-soft: #FBE4CC;

    /* Surface */
    --tg-paper:      #FBF6EC;
    --tg-paper-2:    #F5EFE2;
    --tg-card:       #FFFFFF;
    --tg-dark:       #2B221E;
    --tg-dark-2:     #3A2F2A;

    /* Text */
    --tg-ink:        #1C1A17;
    --tg-ink-2:      #4A4137;
    --tg-mute:       #6B6058;
    --tg-line:       #DDD2BE;
    --tg-line-soft:  #ECE3D0;

    /* Status */
    --tg-ok:         #2D6A4F;
    --tg-ok-soft:    #DCEEE3;
    --tg-warn:       #B97D11;
    --tg-warn-soft:  #FBEFD2;
    --tg-err:        #8E1F1B;
    --tg-err-soft:   #F5DDD8;

    /* Type */
    --font-display:  'Fraunces', 'Times New Roman', Georgia, serif;
    --font-body:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mr:       'Anek Devanagari', var(--font-body);
    --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Layout */
    --radius:        4px;
    --radius-md:     8px;
    --radius-lg:     14px;
    --shadow-sm:     0 1px 2px rgba(28, 26, 23, 0.06);
    --shadow:        0 4px 14px rgba(28, 26, 23, 0.08);
    --shadow-lg:     0 18px 38px rgba(28, 26, 23, 0.12);

    --topbar-h:      64px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--tg-paper);
    color: var(--tg-ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtle paper texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    z-index: 0;
}

:lang(mr), .mr { font-family: var(--font-mr); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tg-red); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* ---- Layout primitives ---- */
.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}
.wrap-narrow {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   Topbar — appears on all logged-in pages
   ============================================================ */

.topbar {
    background: var(--tg-paper);
    border-bottom: 1px solid var(--tg-line);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(251, 246, 236, 0.92);
}
.topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: var(--topbar-h);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.brand:hover { text-decoration: none; }
.brand-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.brand-text strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--tg-ink);
    display: block;
}
.brand-text strong em {
    font-style: italic;
    font-weight: 500;
    color: var(--tg-red);
}
.brand-text small {
    font-family: var(--font-mr);
    font-size: 11px;
    color: var(--tg-mute);
    line-height: 1.1;
    display: block;
    margin-top: 1px;
}

.topbar-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    margin-left: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }

.nav-link {
    padding: 7px 12px;
    border-radius: var(--radius);
    color: var(--tg-ink-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.nav-link:hover {
    background: var(--tg-red-soft);
    color: var(--tg-red);
    text-decoration: none;
}
.nav-link.is-active {
    background: var(--tg-red);
    color: white;
}
.nav-link.is-active:hover { background: var(--tg-red-dark); color: white; }
.nav-link.is-future {
    color: var(--tg-mute);
    cursor: default;
    opacity: 0.6;
}
.nav-link.is-future:hover { background: transparent; color: var(--tg-mute); }
.nav-link.is-future::after {
    content: ' · soon';
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.7;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    flex-shrink: 0;
}
.user-name {
    font-weight: 600;
    color: var(--tg-ink);
}
.user-role {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tg-saffron);
    background: var(--tg-saffron-soft);
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
}
.user-logout {
    padding: 6px 12px;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--tg-line);
    color: var(--tg-ink);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.12s;
}
.user-logout:hover {
    background: var(--tg-paper-2);
    text-decoration: none;
    border-color: var(--tg-red);
    color: var(--tg-red);
}

/* ============================================================
   Page chrome
   ============================================================ */

.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 60px;
    position: relative;
    z-index: 1;
}

.page-head {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--tg-ink);
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.page-head .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tg-red);
    font-weight: 600;
    margin: 0 0 4px;
}
.page-head h1 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
    font-variation-settings: "opsz" 80;
    color: var(--tg-ink);
}
.page-head h1 em { font-style: italic; color: var(--tg-red); font-weight: 500; }
.page-head .subtitle {
    font-family: var(--font-mr);
    color: var(--tg-mute);
    font-size: 16px;
    margin: 6px 0 0;
}
.page-head p:not(.subtitle) {
    color: var(--tg-mute);
    margin: 4px 0 0;
    max-width: 70ch;
}

h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 32px 0 14px;
    color: var(--tg-ink);
}
h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--tg-ink);
    letter-spacing: -0.01em;
}
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tg-red);
    font-weight: 600;
}
.muted { color: var(--tg-mute); }

p { max-width: 70ch; }

/* ============================================================
   Cards
   ============================================================ */

.card {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    margin: 14px 0;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.card.is-featured {
    background: linear-gradient(135deg, var(--tg-saffron-soft) 0%, var(--tg-paper) 100%);
    border-color: var(--tg-saffron);
    border-left-width: 4px;
}
.card.is-featured strong { color: var(--tg-saffron-dark); }
.card.is-featured h2, .card.is-featured h3 { color: var(--tg-ink); }

.card.is-info {
    background: var(--tg-saffron-soft);
    border-color: var(--tg-saffron);
    border-left: 4px solid var(--tg-saffron);
}

/* ============================================================
   Banners and flash messages
   ============================================================ */

.flash {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin: 0 0 18px;
    border-left: 4px solid var(--tg-saffron);
    background: var(--tg-saffron-soft);
    font-size: 14px;
}
.flash-success { background: var(--tg-ok-soft); border-left-color: var(--tg-ok); color: var(--tg-ok); }
.flash-error   { background: var(--tg-err-soft); border-left-color: var(--tg-err); color: var(--tg-err); }
.flash-warn    { background: var(--tg-warn-soft); border-left-color: var(--tg-warn); color: var(--tg-warn); }
.flash-info    { background: var(--tg-saffron-soft); border-left-color: var(--tg-saffron); color: var(--tg-saffron-dark); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--tg-line);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: var(--tg-ink);
    background: white;
    transition: all 0.15s;
    line-height: 1;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-primary {
    background: var(--tg-red);
    color: white;
    border-color: var(--tg-red);
}
.btn-primary:hover {
    background: var(--tg-red-dark);
    border-color: var(--tg-red-dark);
    color: white;
}
.btn-saffron {
    background: var(--tg-saffron);
    color: white;
    border-color: var(--tg-saffron);
}
.btn-saffron:hover {
    background: var(--tg-saffron-dark);
    border-color: var(--tg-saffron-dark);
    color: white;
}
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--tg-paper-2); }
.btn-block { width: 100%; display: flex; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }

/* ============================================================
   Forms
   ============================================================ */

.form-group {
    margin-bottom: 18px;
}
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-ink-2);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.form-group label .mr {
    color: var(--tg-mute);
    font-weight: 500;
    margin-left: 6px;
    font-size: 12px;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="url"],
textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--tg-line);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    background: var(--tg-paper);
    color: var(--tg-ink);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--tg-mute); opacity: 0.6; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--tg-red);
    background: white;
    box-shadow: 0 0 0 3px var(--tg-red-soft);
}

.form-group small {
    display: block;
    color: var(--tg-mute);
    font-size: 12px;
    margin-top: 6px;
}

/* ============================================================
   Login page (admin + surveyor)
   ============================================================ */

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tg-paper);
}
.login-page-bar {
    padding: 18px 24px;
    border-bottom: 1px solid var(--tg-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-page-bar .brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--tg-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.login-page-bar .back-link {
    font-size: 13px;
    color: var(--tg-mute);
    text-decoration: none;
}
.login-page-bar .back-link:hover { color: var(--tg-red); }

.login-screen {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 600px;
}
@media (max-width: 880px) {
    .login-screen { grid-template-columns: 1fr; min-height: 0; }
    .login-hero { min-height: 280px; }
}

.login-hero {
    background: var(--tg-dark);
    color: var(--tg-paper);
    padding: 56px 56px 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 20%, rgba(168, 32, 30, 0.4), transparent 60%),
                radial-gradient(circle at 80% 90%, rgba(210, 105, 30, 0.18), transparent 50%);
    pointer-events: none;
}
.login-hero > * { position: relative; z-index: 1; }
.login-hero-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 28px;
    filter: drop-shadow(0 4px 12px rgba(168, 32, 30, 0.5));
}
.login-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--tg-saffron);
    font-weight: 600;
    margin: 0 0 14px;
}
.login-hero h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 48px);
    line-height: 1.04;
    margin: 0 0 14px;
    font-weight: 600;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 70;
    color: var(--tg-paper);
}
.login-hero h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--tg-saffron);
}
.login-hero .marathi {
    font-family: var(--font-mr);
    font-size: 20px;
    color: rgba(251, 246, 236, 0.78);
    margin: 0 0 36px;
    line-height: 1.4;
}

.login-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(251, 246, 236, 0.18);
}
.stat-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--tg-saffron);
    line-height: 1;
    font-variation-settings: "opsz" 80;
    letter-spacing: -0.02em;
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(251, 246, 236, 0.6);
    margin-top: 7px;
}

.login-form-panel {
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--tg-card);
}
.login-form-panel h3 {
    font-family: var(--font-display);
    font-size: 28px;
    margin: 0 0 6px;
    font-weight: 600;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 80;
}
.login-form-panel .login-sub {
    color: var(--tg-mute);
    margin: 0 0 32px;
    font-size: 14px;
}

.login-foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--tg-line);
    font-size: 13px;
    color: var(--tg-mute);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.login-foot a { color: var(--tg-red); font-weight: 500; }

/* ============================================================
   Public landing
   ============================================================ */

.hero {
    background: var(--tg-dark);
    color: var(--tg-paper);
    padding: 80px 24px 100px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(168, 32, 30, 0.35), transparent 60%),
                radial-gradient(circle at 85% 80%, rgba(210, 105, 30, 0.15), transparent 50%);
    pointer-events: none;
}
.hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 760px) { .hero-inner { grid-template-columns: 1fr; gap: 24px; } }
.hero-logo {
    width: 140px;
    height: 140px;
    filter: drop-shadow(0 6px 16px rgba(168, 32, 30, 0.45));
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.02;
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 70;
    color: var(--tg-paper);
}
.hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--tg-saffron);
}
.hero .marathi {
    font-family: var(--font-mr);
    font-size: 22px;
    color: rgba(251, 246, 236, 0.78);
    margin: 0 0 4px;
}
.hero .hero-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tg-saffron);
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* ============================================================
   Stat tiles (used on dashboard + landing stats row)
   ============================================================ */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 18px 0;
}
.stat-tile {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--radius-md);
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}
.stat-tile-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tg-mute);
    font-weight: 600;
    margin: 0 0 10px;
}
.stat-tile-num {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    color: var(--tg-ink);
    font-weight: 600;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    margin: 0;
}
.stat-tile-num em { color: var(--tg-red); font-style: normal; }
.stat-tile-label {
    color: var(--tg-mute);
    font-size: 13px;
    margin-top: 8px;
}

.stat-tile.is-feature {
    background: var(--tg-dark);
    color: var(--tg-paper);
    border-color: transparent;
}
.stat-tile.is-feature .stat-tile-eyebrow { color: var(--tg-saffron); }
.stat-tile.is-feature .stat-tile-num { color: var(--tg-paper); }
.stat-tile.is-feature .stat-tile-num em { color: var(--tg-saffron); }
.stat-tile.is-feature .stat-tile-label { color: rgba(251, 246, 236, 0.75); }

.stat-tile.is-future {
    opacity: 0.55;
    background: var(--tg-paper-2);
}
.stat-tile.is-future .stat-tile-num { color: var(--tg-mute); }

/* ============================================================
   Tables
   ============================================================ */

table.data {
    width: 100%;
    border-collapse: collapse;
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 14px;
}
table.data thead th {
    background: var(--tg-dark);
    color: var(--tg-paper);
    text-align: left;
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}
table.data tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--tg-line-soft);
    color: var(--tg-ink-2);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--tg-paper); }
table.data .num {
    font-family: var(--font-mono);
    text-align: right;
}
table.data code {
    font-family: var(--font-mono);
    color: var(--tg-red);
    font-weight: 600;
}

/* ============================================================
   Status pills
   ============================================================ */

.status-pill, .phase-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.4;
}
.status-pill { background: var(--tg-line-soft); color: var(--tg-ink-2); }
.status-pill.ok   { background: var(--tg-ok-soft); color: var(--tg-ok); }
.status-pill.warn { background: var(--tg-warn-soft); color: var(--tg-warn); }
.status-pill.err  { background: var(--tg-err-soft); color: var(--tg-err); }
.status-pill.info { background: var(--tg-saffron-soft); color: var(--tg-saffron-dark); }

.phase-badge {
    background: var(--tg-saffron-soft);
    color: var(--tg-saffron-dark);
    border-radius: 3px;
    letter-spacing: 0.14em;
}

/* ============================================================
   Footer
   ============================================================ */

.appfoot {
    margin-top: 80px;
    padding: 28px 24px;
    border-top: 1px solid var(--tg-line);
    background: var(--tg-paper-2);
    color: var(--tg-mute);
    font-size: 12px;
    position: relative;
    z-index: 1;
}
.appfoot-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.appfoot strong {
    font-family: var(--font-display);
    color: var(--tg-ink);
    font-weight: 600;
}
.appfoot strong em { font-style: italic; color: var(--tg-red); font-weight: 500; }
.appfoot-meta {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
}

/* ============================================================
   Mobile adjustments
   ============================================================ */

@media (max-width: 720px) {
    .topbar-inner { gap: 12px; height: 56px; }
    .brand-text small { display: none; }
    .topbar-nav { margin-left: 4px; }
    .nav-link { padding: 6px 10px; font-size: 13px; }
    .nav-link.is-future::after { display: none; }
    .topbar-user { gap: 6px; }
    .user-name { display: none; }

    .page { padding: 20px 16px 40px; }
    .page-head h1 { font-size: 28px; }
    h2 { font-size: 20px; }
}

/* Section dividers used in long content pages */
.section-divider {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tg-ink);
}
.section-divider .num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tg-red);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.section-divider .title {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.section-divider .rule {
    flex: 1;
    border-bottom: 1px dotted var(--tg-line);
    margin-bottom: 6px;
}

/* Two-column lists */
.what-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    gap: 10px;
}
.what-list li {
    padding-left: 24px;
    position: relative;
    line-height: 1.55;
}
.what-list li::before {
    content: '⏵';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--tg-saffron);
    font-size: 14px;
}

/* ============================================================
   ADMIN SIDEBAR — Phase 7L
   On admin pages we replace the topbar nav with a left sidebar
   so all menu items are visible at once on desktop. The topbar
   stays for branding + user controls. On mobile the sidebar
   becomes a drawer toggled by a ☰ button.
   ============================================================ */

/* Sidebar widths and offsets — tweak in one place */
:root {
    --sidebar-w: 220px;
    --sidebar-pad-x: 14px;
}

/* On admin role only, push the page body right by the sidebar width
 * so content doesn't sit under the sidebar. The body already has
 * data-role="admin" set by layout_head(). */
body[data-role="admin"] .page,
body[data-role="admin"] main.page,
body[data-role="admin"] .wrap {
    padding-left: calc(var(--sidebar-w) + 24px);
    transition: padding-left 0.2s ease;
}
body[data-role="admin"] {
    /* Reset any centering that would stop the offset working */
}

.admin-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--tg-paper, #FBF6EC);
    border-right: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0 32px;
    z-index: 50;
    /* Smooth shadow on the right edge so it visually separates */
    box-shadow: 1px 0 0 rgba(0,0,0,0.02);
}
.admin-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-group {
    padding: 0 8px;
    margin-bottom: 16px;
}
.sidebar-group-label {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tg-mute, #6B6058);
    padding: 0 var(--sidebar-pad-x);
    margin: 8px 0 6px;
    opacity: 0.85;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--sidebar-pad-x);
    border-radius: 6px;
    color: var(--tg-ink-2, #4A3F37);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s, transform 0.12s;
    margin: 0 6px;
}
.sidebar-link:hover {
    background: var(--tg-red-soft, #F5E2DD);
    color: var(--tg-red, #A8201E);
    text-decoration: none;
    transform: translateX(2px);
}
.sidebar-link.is-active {
    background: var(--tg-red, #A8201E);
    color: #fff;
    font-weight: 600;
}
.sidebar-link.is-active:hover {
    background: var(--tg-red-dark, #861915);
    color: #fff;
    transform: none;
}
.sidebar-link.is-future {
    color: var(--tg-mute, #6B6058);
    cursor: default;
    opacity: 0.6;
}
.sidebar-link.is-future:hover {
    background: transparent;
    color: var(--tg-mute, #6B6058);
    transform: none;
}

/* The "highlighted" link (Phase 7L Tax settings) — saffron accent
   to make discovery obvious. */
.sidebar-link.is-highlight {
    background: linear-gradient(135deg, rgba(199,122,46,0.12), rgba(199,122,46,0.04));
    border-left: 3px solid var(--tg-saffron, #C77A2E);
    padding-left: calc(var(--sidebar-pad-x) - 3px);
}
.sidebar-link.is-highlight:hover {
    background: linear-gradient(135deg, rgba(199,122,46,0.20), rgba(199,122,46,0.08));
    color: var(--tg-saffron-dark, #A45F1D);
}
.sidebar-link.is-highlight.is-active {
    background: var(--tg-saffron, #C77A2E);
    color: #fff;
    border-left-color: var(--tg-saffron-dark, #A45F1D);
}
.sidebar-link.is-highlight.is-active:hover {
    background: var(--tg-saffron-dark, #A45F1D);
    color: #fff;
}

.sidebar-icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    opacity: 0.85;
}
.sidebar-link.is-active .sidebar-icon { opacity: 1; }
.sidebar-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-badge {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.06);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--tg-mute, #6B6058);
}

/* Hamburger button for mobile — hidden on desktop */
.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    border-radius: 6px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--tg-ink, #1A1F1B);
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: var(--tg-red-soft, #F5E2DD);
    color: var(--tg-red, #A8201E);
    border-color: var(--tg-red, #A8201E);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.4);
    z-index: 40;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

/* Desktop: sidebar always visible; on screens narrower than ~960px
   we collapse to a drawer that's revealed via the ☰ button. */
@media (max-width: 960px) {
    body[data-role="admin"] .page,
    body[data-role="admin"] main.page,
    body[data-role="admin"] .wrap {
        padding-left: 24px;
    }
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }
    body.sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   SURVEY FORM — Phase 7L revision 5
   The surveyor form uses these classes extensively but no CSS
   was defined for them previously, so fields stacked vertically
   with no grid layout and no visual section grouping.
   ============================================================ */

/* Section accordions (the <details> blocks for each major group) */
.survey-section {
    background: #fff;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;
}
.survey-section[open] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.survey-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--tg-paper, #FBF6EC);
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid transparent;
    user-select: none;
    transition: background 0.15s;
}
.survey-section-head::-webkit-details-marker { display: none; }
.survey-section-head:hover { background: var(--tg-paper-2, #F5EFDF); }
.survey-section[open] .survey-section-head {
    border-bottom-color: var(--tg-line, rgba(0,0,0,0.08));
}
.survey-section-head .chev {
    display: inline-block;
    width: 16px;
    font-size: 18px;
    color: var(--tg-mute, #6B6058);
    transition: transform 0.2s;
}
.survey-section[open] .survey-section-head .chev {
    transform: rotate(90deg);
}
.survey-section-head h2 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tg-ink, #1A1F1B);
}
.survey-section-head h2 .mr {
    margin-left: 6px;
    font-weight: 400;
    font-size: 13px;
    color: var(--tg-mute, #6B6058);
}
.survey-section-body {
    padding: 18px;
}

/* The grid container that holds form rows. Default is single
   column on mobile, expanding to 2 cols on tablet+ */
.survey-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 18px;
}
@media (min-width: 720px) {
    .survey-grid {
        grid-template-columns: 1fr 1fr;
    }
    .survey-grid.cols-1 {
        grid-template-columns: 1fr;
    }
    .survey-grid.cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    /* When a field needs to span both columns */
    .survey-grid > .col-span-2 {
        grid-column: 1 / -1;
    }
}

/* Row helpers used inside floor-card-body — 2-column and 1-column */
.row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (min-width: 480px) {
    .row-2 {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}
.row-1 {
    margin-bottom: 12px;
}

/* Labels inside grids — column layout, text on top, input below */
.survey-grid > label,
.row-2 > label,
.row-1 > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--tg-ink, #1A1F1B);
    margin: 0;
}
.survey-grid > label .label,
.survey-grid > label > span:first-child,
.row-2 > label > span:first-child {
    font-weight: 600;
    font-size: 12px;
    color: var(--tg-mute, #6B6058);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.survey-grid > label .label small,
.row-2 > label > span:first-child small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tg-mute, #6B6058);
}
.survey-grid > label input[type="text"],
.survey-grid > label input[type="number"],
.survey-grid > label input[type="tel"],
.survey-grid > label input[type="email"],
.survey-grid > label input[type="date"],
.survey-grid > label select,
.survey-grid > label textarea,
.row-2 > label input,
.row-2 > label select,
.row-1 > label input,
.row-1 > label select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.12));
    border-radius: 6px;
    color: var(--tg-ink, #1A1F1B);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.survey-grid > label input:focus,
.survey-grid > label select:focus,
.survey-grid > label textarea:focus,
.row-2 > label input:focus,
.row-2 > label select:focus {
    outline: none;
    border-color: var(--tg-saffron, #C77A2E);
    box-shadow: 0 0 0 3px rgba(199,122,46,0.15);
}

/* Inline checkbox layout for "old renovated" etc */
.checkbox-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}
.checkbox-inline input[type="checkbox"] {
    width: auto !important;
    margin: 0;
}

/* Radio groups for occupancy etc — inline pills */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: none;
    padding: 0;
    margin: 0;
}
.radio-group legend {
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    font-weight: 600;
    font-size: 12px;
    color: var(--tg-mute, #6B6058);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.radio-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.12));
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.radio-inline:hover {
    background: var(--tg-paper, #FBF6EC);
    border-color: var(--tg-saffron, #C77A2E);
}
.radio-inline input[type="radio"] {
    margin: 0;
}
.radio-inline:has(input[type="radio"]:checked) {
    background: rgba(199,122,46,0.10);
    border-color: var(--tg-saffron, #C77A2E);
    color: var(--tg-saffron-dark, #A45F1D);
    font-weight: 600;
}

/* Floor card list */
#floors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.floor-card {
    background: var(--tg-paper, #FBF6EC);
    border: 1px solid var(--tg-line, rgba(0,0,0,0.10));
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.floor-card[open] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.floor-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.floor-card-head::-webkit-details-marker { display: none; }
.floor-card-head .num {
    flex: 0 0 28px;
    height: 28px;
    background: var(--tg-saffron, #C77A2E);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
}
.floor-card-head .summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.floor-card-head .summary strong {
    font-size: 14px;
    color: var(--tg-ink, #1A1F1B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.floor-card-head .summary small {
    font-size: 11px;
    color: var(--tg-mute, #6B6058);
    margin-top: 2px;
}
.floor-card-head .remove {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.10));
    color: var(--tg-mute, #6B6058);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s;
}
.floor-card-head .remove:hover {
    background: var(--tg-red, #A8201E);
    color: #fff;
    border-color: var(--tg-red, #A8201E);
}
.floor-card-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    padding-top: 14px;
    margin-top: 4px;
}

/* Floor-card readonly fields like rate/annual_rent that get
   computed by the engine — visually de-emphasize them */
.floor-card-body input[readonly],
.floor-card-body input:disabled {
    background: var(--tg-paper-2, #F5EFDF);
    color: var(--tg-mute, #6B6058);
    cursor: not-allowed;
}

/* Computed read-only displays */
.f-rate, .f-annual-rent-value, .f-taxable-value, .f-dep-pct, .f-dep-years {
    /* These get auto-computed by the engine — show them as such */
    font-variant-numeric: tabular-nums;
}

/* Add-floor button */
#add-floor-btn, .btn-add-floor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(199,122,46,0.12);
    border: 1px dashed var(--tg-saffron, #C77A2E);
    color: var(--tg-saffron-dark, #A45F1D);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
#add-floor-btn:hover, .btn-add-floor:hover {
    background: rgba(199,122,46,0.20);
    border-style: solid;
}

/* Tax breakdown card on the survey form (rendered by survey_form.js) */
.tax-breakdown-card {
    background: #fff;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.10));
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.tax-card-head {
    background: linear-gradient(135deg, var(--tg-paper, #FBF6EC), var(--tg-paper-2, #F5EFDF));
    padding: 12px 16px;
    border-bottom: 1px solid var(--tg-line, rgba(0,0,0,0.08));
}
.tax-card-head strong {
    display: block;
    font-size: 14px;
    color: var(--tg-ink, #1A1F1B);
    margin-bottom: 2px;
}
.tax-card-head small {
    font-size: 11px;
    color: var(--tg-mute, #6B6058);
    line-height: 1.4;
}
.tax-floor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.tax-floor-table th, .tax-floor-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--tg-line, rgba(0,0,0,0.06));
    text-align: left;
}
.tax-floor-table th {
    background: var(--tg-paper, #FBF6EC);
    font-weight: 600;
    color: var(--tg-mute, #6B6058);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tax-floor-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tax-floor-table td.strong {
    font-weight: 600;
    color: var(--tg-ink, #1A1F1B);
}
.tax-totals {
    padding: 12px 16px;
    background: var(--tg-paper, #FBF6EC);
    border-top: 1px solid var(--tg-line, rgba(0,0,0,0.08));
}
.tax-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.tax-total-row strong {
    font-variant-numeric: tabular-nums;
    color: var(--tg-ink, #1A1F1B);
}
.tax-total-taxable {
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px dashed var(--tg-line, rgba(0,0,0,0.15));
    font-weight: 600;
}
.tax-components {
    padding: 14px 16px;
    border-top: 1px solid var(--tg-line, rgba(0,0,0,0.08));
}
.tax-components h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-ink, #1A1F1B);
}
.tax-comp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 720px) {
    .tax-comp-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.tax-comp-grid > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--tg-paper, #FBF6EC);
    border-radius: 4px;
    font-size: 12px;
}
.tax-comp-grid > div span {
    flex: 1;
    color: var(--tg-mute, #6B6058);
    line-height: 1.35;
    padding-right: 8px;
}
.tax-comp-grid > div strong {
    color: var(--tg-ink, #1A1F1B);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tax-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, var(--tg-red, #A8201E), var(--tg-red-dark, #861915));
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
}
.tax-grand strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-size: 20px;
}

/* Capital-value comparison section in the breakdown card */
.tax-cv-method {
    border-top: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    padding: 12px 16px;
    background: rgba(199,122,46,0.04);
}
.tax-cv-method summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-saffron-dark, #A45F1D);
    padding: 4px 0;
}
.tax-cv-body {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    color: var(--tg-mute, #6B6058);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tax-cv-body strong {
    color: var(--tg-ink, #1A1F1B);
    font-variant-numeric: tabular-nums;
}

/* Side-by-side comparison card on the tax breakdown */
.tax-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--tg-line, rgba(0,0,0,0.08));
    background: linear-gradient(135deg, rgba(199,122,46,0.04), rgba(168,32,30,0.04));
}
@media (min-width: 720px) {
    .tax-comparison {
        grid-template-columns: 1fr 1fr;
    }
}
.tax-comparison-method {
    background: #fff;
    border: 1px solid var(--tg-line, rgba(0,0,0,0.10));
    border-radius: 6px;
    padding: 12px 14px;
}
.tax-comparison-method.is-primary {
    border-color: var(--tg-saffron, #C77A2E);
    box-shadow: 0 2px 8px rgba(199,122,46,0.12);
}
.tax-comparison-method h5 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tg-mute, #6B6058);
}
.tax-comparison-method.is-primary h5 {
    color: var(--tg-saffron-dark, #A45F1D);
}
.tax-comparison-method .big-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--tg-ink, #1A1F1B);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tax-comparison-method .breakdown {
    margin-top: 8px;
    font-size: 11px;
    color: var(--tg-mute, #6B6058);
    line-height: 1.5;
}

/* Phase 7L rev6: visually distinguish engine-computed fields from
 * surveyor-entered ones. Fields with data-engine-set="1" show a
 * subtle saffron tint and "auto" label, hinting that they're
 * derived. The surveyor can still type into them to override,
 * at which point the tag is stripped and they revert to normal. */
.floor-card-body input[data-engine-set="1"],
.floor-card-body input[data-engine-set="1"]:focus {
    background: rgba(199,122,46,0.06);
    border-color: rgba(199,122,46,0.20);
    color: var(--tg-ink-2, #4A3F37);
    position: relative;
}
.floor-card-body label:has(input[data-engine-set="1"]) {
    position: relative;
}
.floor-card-body label:has(input[data-engine-set="1"])::after {
    content: 'auto';
    position: absolute;
    top: 2px; right: 6px;
    font-size: 9px;
    font-family: var(--font-mono, monospace);
    color: var(--tg-saffron, #C77A2E);
    background: rgba(199,122,46,0.12);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* rev63 — Staff login dropdown (public site only) */
.staff-login-menu {
    position: relative;
}
.staff-login-menu .staff-login-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background: var(--tg-card, #fff);
    border: 1px solid var(--tg-line, #E5DCCF);
    border-radius: var(--radius, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px;
    display: none;
    z-index: 200;
}
.staff-login-menu:hover .staff-login-dropdown,
.staff-login-menu:focus-within .staff-login-dropdown {
    display: block;
}
.staff-login-menu .staff-login-dropdown a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--tg-ink, #2A2520);
    text-decoration: none;
    border-radius: 6px;
}
.staff-login-menu .staff-login-dropdown a:hover {
    background: var(--tg-paper-2, #F5EBDC);
    color: var(--tg-saffron-dark, #A14F11);
}