/*
 * Tallis Grove Site & Landscape, on top of Filament's own styles.
 * Plain CSS, loaded after Filament's, so no build step is needed.
 *
 * Loam brown for the top bar, a limestone page, sage for actions,
 * terracotta only for a window being missed or a plant dead, amber for a
 * window closing. Schibsted Grotesk; IBM Plex Mono for plant keys, sizes
 * and figures. Light only. Contrast of every text color against its
 * background is listed in docs/DEMO_REPORT.md (all at least WCAG AA).
 *
 * The "Sample system" strip at the top is Rowhouse Systems', not Tallis
 * Grove's: the same navy on every demo (docs/DEMO_REGISTRY.md).
 */

:root {
    --tg-loam: #3B2F26;
    --tg-loam-2: #4A3C31;
    --tg-sage: #4F6B4B;
    --tg-sage-2: #40573D;
    --tg-sage-soft: #EAF0E8;
    --tg-sage-line: #C5D5C2;
    --tg-terra: #A6461F;
    --tg-terra-soft: #F8E6DD;
    --tg-amber: #8A5300;
    --tg-amber-soft: #FBEFD6;
    --tg-page: #F4F1EA;
    --tg-card: #FFFFFF;
    --tg-ink: #2B231C;
    --tg-ink-2: #5C5248;
    --tg-line: #E3DDD2;
    --tg-line-strong: #CFC7B9;
    --tg-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --rowhouse-navy: #1C2B45;
    --rowhouse-brass: #D4962F;
    --brand-accent: #B4532A;
}

body.fi-body,
.fi-body {
    background: var(--tg-page);
    color: var(--tg-ink);
}

/* ---- The Rowhouse Systems strip (the same on every demo) ---- */

.tg-demo-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
    color: #FFFFFF;
    background: var(--rowhouse-navy);
}
.tg-demo-strip a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.tg-demo-strip a:focus-visible { outline: 3px solid var(--rowhouse-brass); outline-offset: 2px; }
.tg-demo-strip-short { display: none; }
@media (max-width: 1023px) {
    .tg-demo-strip-long { display: none; }
    .tg-demo-strip-short { display: inline; }
}
.tg-demo-strip a.tg-demo-strip-quote {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.tg-demo-strip a.tg-demo-strip-quote:hover { color: var(--rowhouse-navy); background: #FFFFFF; }
.tg-visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Top bar: loam brown, menu across it ---- */

.fi-topbar, .fi-topbar nav, .fi-topbar > nav {
    background: var(--tg-loam) !important;
    border-bottom: 3px solid var(--brand-accent);
    box-shadow: none;
}
.fi-topbar .fi-topbar-item-btn, .fi-topbar .fi-topbar-item-label, .fi-topbar .fi-icon,
.fi-topbar .fi-topbar-item > button, .fi-topbar .fi-topbar-item > a {
    color: #F4EFE6 !important;
}
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn,
.fi-topbar .fi-topbar-item-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label { color: #FFFFFF !important; font-weight: 700; }
.fi-topbar .fi-user-avatar { outline: 2px solid rgba(255, 255, 255, 0.4); }

.tg-logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.tg-logo-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.tg-logo-words { display: flex; flex-direction: column; line-height: 1.05; }
.tg-logo-name { white-space: nowrap; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--tg-ink); }
.tg-logo-sub { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tg-ink-2); }
.fi-topbar .tg-logo-name { color: #FFFFFF; }
.fi-topbar .tg-logo-sub { color: #E3DAC9; }

/* ---- Sign-in page ---- */

.fi-simple-main { border-top: 4px solid var(--tg-sage); }
.kit-demo-login { margin-top: 0.25rem; }
.kit-demo-login h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; }
.tg-demo-login-note { font-size: 0.8rem; color: var(--tg-ink-2); margin-bottom: 0.75rem; }
.kit-demo-login ul { display: grid; gap: 0.5rem; }
.kit-demo-login button {
    display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
    padding: 0.65rem 0.9rem; border-radius: 0.4rem; border: 1px solid var(--tg-line-strong);
    background: var(--tg-card); cursor: pointer;
}
.kit-demo-login button:hover, .kit-demo-login button:focus-visible {
    border-color: var(--tg-sage); background: var(--tg-sage-soft); outline: none;
}
.tg-demo-who { font-weight: 700; color: var(--tg-ink); }
.tg-demo-what { font-size: 0.8rem; color: var(--tg-ink-2); }
.tg-staff-sign-in { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--tg-line); }
.tg-staff-sign-in > summary {
    width: fit-content; margin: 0 auto; padding: 0.25rem 0.5rem; border-radius: 0.375rem;
    font-size: 0.85rem; color: var(--tg-sage); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tg-staff-sign-in > summary:focus-visible { outline: 2px solid var(--tg-sage); outline-offset: 2px; }
.tg-staff-sign-in[open] > summary { margin-bottom: 1rem; }

/* ---- Banners and history (the kit's) ---- */

.kit-banner {
    margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem;
    border-left: 4px solid var(--brand-accent); background: var(--tg-amber-soft); color: var(--tg-ink); font-size: 0.875rem;
}
.kit-diff { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.kit-diff th, .kit-diff td { padding: 0.375rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tg-line); }
.kit-diff td.kit-before { color: #9B2C2C; }
.kit-diff td.kit-after { color: #22543D; }
.kit-diff th { font-weight: 600; }

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

.tg-stack { display: grid; gap: 1rem; }
.tg-muted { color: var(--tg-ink-2); }
.tg-small { font-size: 0.82rem; }
.tg-bad { color: var(--tg-terra); font-weight: 600; }
.tg-warn { color: var(--tg-amber); font-weight: 600; }
.tg-mono { font-family: var(--tg-mono); font-size: 0.86em; }
.tg-num { font-family: var(--tg-mono); font-variant-numeric: tabular-nums; font-size: 0.86em; white-space: nowrap; }
.tg-r { text-align: right; }
.tg-h3 { font-size: 0.95rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.tg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin: 0.45rem 0; }
.tg-scroll { overflow-x: auto; }
.tg-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.tg-block { display: grid; gap: 0.25rem; margin: 0.5rem 0; font-size: 0.85rem; color: var(--tg-ink-2); }
.tg-link { color: var(--tg-sage); text-decoration: underline; font-size: 0.85rem; }

.tg-card {
    background: var(--tg-card);
    border: 1px solid var(--tg-line);
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
}
.tg-card + .tg-card { margin-top: 1rem; }
.tg-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.65rem; }
.tg-card-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--tg-ink); }
.tg-card-head a, .tg-card a, .tg-paper a { color: var(--tg-sage); }
.tg-card-head a:hover, .tg-card a:hover { color: var(--tg-sage-2); text-decoration: underline; }

.tg-figures { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1rem; }
.tg-figure {
    display: grid; gap: 0.2rem; padding: 0.9rem 1.1rem; border-radius: 0.5rem;
    background: var(--tg-card); border: 1px solid var(--tg-line); border-top: 4px solid var(--tg-sage);
    text-decoration: none; color: var(--tg-ink);
}
a.tg-figure:hover { border-color: var(--tg-sage-line); box-shadow: 0 1px 4px rgba(59, 47, 38, 0.12); }
.tg-figure-warn { border-top-color: var(--tg-terra); }
.tg-figure-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tg-ink-2); }
.tg-figure-value { font-family: var(--tg-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.tg-figure-note { font-size: 0.82rem; color: var(--tg-ink-2); }

.tg-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tg-table th {
    text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tg-ink-2); padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--tg-line-strong); white-space: nowrap;
}
.tg-table td { padding: 0.5rem; border-bottom: 1px solid var(--tg-line); vertical-align: top; }
.tg-table th.tg-r, .tg-table td.tg-r { text-align: right; }
.tg-table-tight td { padding: 0.3rem 0.5rem; }
.tg-table tbody tr:target { background: var(--tg-amber-soft); }
.tg-table em, .tg-list em, .tg-paper em { font-style: italic; }

.tg-pill {
    display: inline-block; padding: 0.08rem 0.5rem; margin: 0.08rem 0.15rem 0.08rem 0; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: #EEEAE2; color: var(--tg-ink-2); border: 1px solid var(--tg-line-strong);
}
.tg-pill-ok { background: var(--tg-sage-soft); color: var(--tg-sage-2); border-color: var(--tg-sage-line); }
.tg-pill-warn { background: var(--tg-amber-soft); color: var(--tg-amber); border-color: #EBCB8B; }
.tg-pill-bad { background: var(--tg-terra-soft); color: var(--tg-terra); border-color: #E7B49C; }

.tg-btn, .tg-btn-quiet {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 0.4rem;
    font-weight: 700; font-size: 0.875rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tg-btn { background: var(--tg-sage); color: #FFFFFF !important; border: 1px solid var(--tg-sage); }
.tg-btn:hover { background: var(--tg-sage-2); }
.tg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.tg-btn-quiet { background: #FFFFFF; color: var(--tg-sage) !important; border: 1px solid var(--tg-sage-line); }
.tg-btn-quiet:hover { border-color: var(--tg-sage); background: var(--tg-sage-soft); }
.tg-btn:focus-visible, .tg-btn-quiet:focus-visible, .tg-link:focus-visible { outline: 3px solid #7E9C79; outline-offset: 2px; }
.tg-btn-big { padding: 0.65rem 1.15rem; font-size: 0.95rem; }

.tg-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.tg-filter a { padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--tg-line-strong); background: #FFFFFF; font-size: 0.85rem; color: var(--tg-ink); }
.tg-filter a.is-on { background: var(--tg-loam); border-color: var(--tg-loam); color: #FFFFFF; font-weight: 700; }

.tg-list { display: grid; gap: 0.25rem; }
.tg-list-item { padding: 0.45rem 0; border-bottom: 1px solid var(--tg-line); }
.tg-list-link { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--tg-line); color: var(--tg-ink) !important; text-decoration: none; }
.tg-list-link:hover { background: var(--tg-sage-soft); }

.tg-notes { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; background: var(--tg-sage-soft); border-radius: 0.4rem; font-size: 0.85rem; }

.tg-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 0.6rem 0; }
.tg-fields label { display: grid; gap: 0.2rem; font-size: 0.82rem; color: var(--tg-ink-2); }
.tg-fields .tg-grow { flex: 1 1 22rem; }
.tg-fields input, .tg-block input, .tg-upload select, .tg-upload input {
    padding: 0.4rem 0.55rem; border: 1px solid var(--tg-line-strong); border-radius: 0.35rem; background: #FFFFFF; color: var(--tg-ink); font-size: 0.9rem;
}
.tg-radio { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; font-size: 0.9rem; color: var(--tg-ink); }
.tg-check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; margin: 0.5rem 0; }
.tg-draft { padding: 0.75rem 1rem; background: var(--tg-sage-soft); border-radius: 0.4rem; }
.tg-draft fieldset legend { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.3rem; }
.tg-draft-row > td { background: var(--tg-sage-soft); }
.tg-upload { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--tg-line); }
.tg-upload label { display: grid; gap: 0.2rem; font-size: 0.82rem; color: var(--tg-ink-2); }

.tg-hold { display: block; font-size: 0.82rem; }
.tg-milestones { display: grid; gap: 0.2rem; margin: 0 0 0.75rem; font-size: 0.875rem; }
.tg-milestones li.is-done { color: var(--tg-ink-2); }

.tg-status-line { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin-bottom: 0.75rem; }

/* ---- The substitution request, as paper ---- */

.tg-paper {
    max-width: 52rem; padding: 1.4rem 1.6rem; background: #FFFFFF; border: 1px solid var(--tg-line);
    box-shadow: 0 1px 3px rgba(59, 47, 38, 0.08); border-radius: 0.25rem;
}
.tg-form-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 0.5rem; }
.tg-form-table th { width: 11rem; text-align: left; vertical-align: top; padding: 0.45rem 0.6rem; background: var(--tg-page); border: 1px solid var(--tg-line); font-weight: 700; }
.tg-form-table td { padding: 0.45rem 0.6rem; border: 1px solid var(--tg-line); }
.tg-answer { max-width: 52rem; margin-top: 1rem; }

/* ---- Planting windows: the calendar strip ---- */

.tg-cal { display: grid; gap: 0; }
.tg-cal-row {
    display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 0.25rem 1rem;
    padding: 0.6rem 0; border-bottom: 1px solid var(--tg-line);
}
.tg-cal-row:target { background: var(--tg-amber-soft); }
.tg-cal-label { font-size: 0.875rem; display: grid; }
.tg-cal-label .tg-muted { font-size: 0.8rem; }
.tg-cal-track { position: relative; height: 1.9rem; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 9 - 1px), var(--tg-line) calc(100% / 9 - 1px), var(--tg-line) calc(100% / 9)); border-radius: 0.25rem; }
.tg-cal-months .tg-cal-track { height: 2.3rem; background: none; }
.tg-cal-month { position: absolute; top: 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tg-ink-2); transform: translateX(0.2rem); }
.tg-cal-today { position: absolute; top: 0; bottom: -0.2rem; border-left: 2px solid var(--tg-loam); }
.tg-cal-today span { position: absolute; top: 1.15rem; left: 0.25rem; font-size: 0.72rem; font-weight: 800; color: var(--tg-loam); white-space: nowrap; }
.tg-cal-window { position: absolute; top: 0.35rem; height: 1.2rem; border-radius: 0.3rem; background: #C5D5C2; border: 1px solid #A2BB9E; }
.tg-cal-window.is-current { background: #9CB896; border-color: var(--tg-sage); }
.tg-cal-window.is-closing { background: repeating-linear-gradient(135deg, #E9B98F 0, #E9B98F 6px, #F2CFAF 6px, #F2CFAF 12px); border-color: var(--tg-terra); }
.tg-cal-today-line { position: absolute; top: -0.6rem; bottom: -0.6rem; border-left: 2px solid var(--tg-loam); }
.tg-cal-ready { position: absolute; top: -0.2rem; bottom: -0.2rem; border-left: 2px dashed var(--tg-terra); }
.tg-cal-ready::after { content: ''; position: absolute; top: 0.6rem; left: -6px; width: 10px; height: 10px; background: var(--tg-terra); transform: rotate(45deg); }
.tg-cal-target { position: absolute; top: 0.6rem; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 999px; background: var(--tg-loam); border: 2px solid #FFFFFF; }
.tg-cal-detail { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; align-items: baseline; font-size: 0.85rem; }
.tg-cal-alert, .tg-cal-actions { grid-column: 2; }
.tg-cal-alert { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; padding: 0.6rem 0.8rem; margin-top: 0.3rem; border-left: 4px solid var(--tg-terra); background: var(--tg-terra-soft); border-radius: 0.3rem; font-size: 0.85rem; }
.tg-cal-alert p { flex: 1 1 24rem; }

@media (max-width: 760px) {
    .tg-cal-row { grid-template-columns: 1fr; }
    .tg-cal-detail, .tg-cal-alert, .tg-cal-actions { grid-column: 1; }
}

/* ---- The warranty walk, phone first ---- */

.tg-walk { max-width: 44rem; }
.tg-walk-lines { display: grid; }
.tg-walk-lines > li { border-bottom: 1px solid var(--tg-line); }
.tg-walk-lines > li.is-open { background: var(--tg-sage-soft); }
.tg-walk-line { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.6rem; align-items: center; width: 100%; min-height: 3.4rem; padding: 0.5rem 0.25rem; text-align: left; }
.tg-walk-line:focus-visible { outline: 3px solid #7E9C79; outline-offset: -3px; }
.tg-walk-key { font-weight: 700; font-size: 0.95rem; color: var(--tg-loam); }
.tg-walk-name { font-size: 0.9rem; line-height: 1.3; }
.tg-walk-count { font-size: 1.15rem; font-weight: 700; text-align: right; }
.tg-walk-count small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--tg-ink-2); }
.tg-walk-watch { margin: 0 0 0.5rem 3.2rem; font-size: 0.82rem; color: var(--tg-amber); }
.tg-walk-form { display: grid; gap: 0.5rem; padding: 0 0.5rem 0.9rem 3.2rem; }
.tg-seg { display: inline-flex; border: 1px solid var(--tg-sage); border-radius: 0.4rem; overflow: hidden; width: fit-content; }
.tg-seg label { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; font-weight: 700; cursor: pointer; }
.tg-seg label:has(input:checked) { background: var(--tg-sage); color: #FFFFFF; }
.tg-seg input { accent-color: #FFFFFF; }
.tg-stepper { display: inline-flex; align-items: stretch; width: fit-content; border: 1px solid var(--tg-line-strong); border-radius: 0.4rem; overflow: hidden; background: #FFFFFF; }
.tg-stepper button { width: 3rem; font-size: 1.4rem; font-weight: 700; color: var(--tg-sage); }
.tg-stepper input { width: 4rem; text-align: center; font-family: var(--tg-mono); font-size: 1.1rem; border: none; border-left: 1px solid var(--tg-line); border-right: 1px solid var(--tg-line); }

@media (max-width: 640px) {
    .tg-walk-form { padding-left: 0.5rem; }
    .tg-walk-watch { margin-left: 0.5rem; }
}

/* ---- Try this first ---- */

.tg-try { position: relative; padding: 1rem 1.25rem 1.1rem; border-radius: 0.6rem; background: var(--tg-sage-soft); border: 1px solid var(--tg-sage-line); }
.tg-try-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-right: 2rem; margin-bottom: 0.75rem; }
.tg-try-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--tg-ink); }
.tg-try-close { position: absolute; top: 0.5rem; right: 0.6rem; width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.35rem; line-height: 1; color: var(--tg-ink-2); }
.tg-try-close:hover, .tg-try-close:focus-visible { background: rgba(0, 0, 0, 0.06); outline: 2px solid var(--tg-sage); }
.tg-try-steps { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tg-try-step { display: grid; grid-template-columns: 2rem 1fr; gap: 0.15rem 0.6rem; height: 100%; padding: 0.7rem 0.8rem; border-radius: 0.5rem; background: var(--tg-card); border: 1px solid var(--tg-line); text-decoration: none; }
.tg-try-step:hover, .tg-try-step:focus-visible { border-color: var(--tg-sage); outline: none; box-shadow: 0 0 0 2px rgba(79, 107, 75, 0.25); }
.tg-try-number { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--tg-loam); color: #FFFFFF; font-weight: 800; }
.tg-try-step.is-done .tg-try-number { background: var(--tg-sage); }
.tg-try-title { font-weight: 700; color: var(--tg-ink); }
.tg-try-note { font-size: 0.82rem; color: var(--tg-ink-2); }
@media (max-width: 640px) { .tg-try-note { display: none; } }

[x-cloak] { display: none !important; }

@media print {
    .tg-demo-strip, .fi-topbar, .fi-header { display: none !important; }
    body.fi-body { background: #FFFFFF; }
}