/*
 * Ardenmoor Mission Services: the look, on top of Filament's own styles.
 * Plain CSS loaded after Filament's, so no build step. Rowhouse demo
 * palette 8: oxblood for actions (Filament's primary, config/brand.php),
 * stone gray for structure and text, steel blue for links and focus, amber
 * only for the funds notice line. A finance dashboard: a dark stone
 * sidebar (Brightwater's is light), ledgers with figures in DM Mono.
 *
 * Contrast (WCAG AA): white on oxblood #7A1F2B 10.2:1; steel blue #2F5D8A
 * on white 6.9:1; stone #57534E on white 7.6:1; amber text #92400E on
 * white 7.1:1; #1C1917 on amber #F59E0B 8.1:1; stone #D6D3D1 on the
 * sidebar #1C1917 12.4:1.
 *
 * Nothing here borrows the look of a government website: no seal, no flag
 * motif, no USWDS blue.
 */

:root {
    --am-oxblood: #7A1F2B;
    --am-oxblood-2: #A13A49;
    --am-oxblood-soft: #FBF3F4;
    --am-stone-900: #1C1917;
    --am-stone-800: #292524;
    --am-stone-700: #44403C;
    --am-stone-600: #57534E;
    --am-stone-300: #D6D3D1;
    --am-stone-200: #E7E5E4;
    --am-stone-100: #F5F5F4;
    --am-stone-50: #FAFAF9;
    --am-steel: #2F5D8A;
    --am-steel-soft: #E1EAF3;
    --am-amber: #F59E0B;
    --am-amber-text: #92400E;
    --am-amber-soft: #FEF3C7;
    --am-green: #166534;
    --am-green-soft: #DCFCE7;
    --am-red: #991B1B;
    --am-red-soft: #FEE2E2;
    --am-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --rowhouse-navy: #1C2B45;
    --rowhouse-brass: #D4962F;
}

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

body.fi-body { background: var(--am-stone-50); }

/* ---- The sidebar: dark stone, the active item marked in oxblood ---- */
.fi-sidebar.fi-main-sidebar,
.fi-sidebar.fi-main-sidebar .fi-sidebar-header {
    background: var(--am-stone-900);
    border-color: var(--am-stone-800);
}

.fi-sidebar .fi-sidebar-group-label {
    color: #A8A29E;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon,
.fi-sidebar .fi-icon-btn .fi-icon {
    color: var(--am-stone-300);
}

.fi-sidebar .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item-btn:focus-visible {
    background: var(--am-stone-800);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--am-stone-800);
    box-shadow: inset 3px 0 0 #E0848F;
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-icon {
    color: #FFFFFF;
}

.fi-sidebar .fi-badge {
    background: var(--am-oxblood);
    color: #FFFFFF;
}

.fi-sidebar .am-logo-name { color: #FFFFFF; }
.fi-sidebar .am-logo-sub { color: #D6D3D1; }

.fi-topbar { border-bottom: 1px solid var(--am-stone-200); box-shadow: none; }

/* ---- The logo ---- */
.am-logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.am-logo-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.am-logo-square { fill: var(--am-oxblood); }
.am-logo-ridge { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.am-logo-rule { stroke: var(--am-stone-200); stroke-width: 2; stroke-linecap: round; }
.am-logo-words { display: flex; flex-direction: column; line-height: 1.05; }
.am-logo-name { font-weight: 700; font-size: 1.05rem; color: var(--am-stone-900); letter-spacing: -0.01em; }
.am-logo-sub { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-stone-600); }

/* ---- Figures: DM Mono, tabular ---- */
.am-num,
.am-num * {
    font-family: var(--am-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fi-ta-text-item.am-num,
.fi-in-text-item.am-num { font-family: var(--am-mono); }

/* ---- The demo's one line, shared by every Rowhouse demo ---- */
.am-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);
    position: relative;
    z-index: 40;
}

.am-demo-strip a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.am-demo-strip a:focus-visible { outline: 3px solid var(--rowhouse-brass); outline-offset: 2px; }
.am-demo-strip-short { display: none; }

@media (max-width: 1023px) {
    .am-demo-strip-long { display: none; }
    .am-demo-strip-short { display: inline; }
}

.am-demo-strip a.am-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;
}

.am-demo-strip a.am-demo-strip-quote:hover { color: var(--rowhouse-navy); background: #FFFFFF; }

.am-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;
}

/* ---- Banners the kit adds ---- */
.kit-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border-left: 4px solid var(--am-steel);
    background: var(--am-steel-soft);
    color: var(--am-stone-900);
    font-size: 0.875rem;
}

/* ---- The demo's sign-in page ---- */
.fi-simple-main { border-top: 4px solid var(--am-oxblood); }
.kit-demo-login { margin-top: 0.25rem; }
.kit-demo-login h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; }
.am-demo-login-note { font-size: 0.8rem; color: var(--am-stone-600); 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(--am-stone-200);
    background: #FFFFFF;
    cursor: pointer;
}

.am-demo-who { font-size: 0.9rem; font-weight: 700; color: var(--am-oxblood); }
.am-demo-what { font-size: 0.78rem; color: var(--am-stone-600); }

.kit-demo-login button:hover,
.kit-demo-login button:focus-visible {
    border-color: var(--am-oxblood);
    background: var(--am-oxblood-soft);
    outline: none;
}

.am-staff-sign-in { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--am-stone-200); }

.am-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(--am-steel);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.am-staff-sign-in > summary:focus-visible { outline: 2px solid var(--am-steel); outline-offset: 2px; }
.am-staff-sign-in[open] > summary { margin-bottom: 1rem; }

/* ---- History (the kit's) ---- */
.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(--am-stone-200); }
.kit-diff td.kit-before, .kit-before { color: var(--am-red); }
.kit-diff td.kit-after, .kit-after { color: var(--am-green); }
.kit-diff th { font-weight: 600; }

/* ---- Shared pieces ---- */
.am-muted { color: var(--am-stone-600); font-size: 0.875rem; }
.am-sub { display: block; color: var(--am-stone-600); font-size: 0.78rem; font-weight: 400; }
.am-footnote { margin-top: 0.75rem; color: var(--am-stone-600); font-size: 0.8rem; }
.am-link { color: var(--am-steel); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.am-link:focus-visible { outline: 2px solid var(--am-steel); outline-offset: 2px; border-radius: 2px; }
.am-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--am-stone-700); margin-bottom: 0.2rem; }
.am-error { margin-top: 0.75rem; color: var(--am-red); font-weight: 600; }
.am-negative { color: var(--am-red); }
.am-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.am-subhead { margin: 1.25rem 0 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--am-stone-800); }
.am-grow { flex: 1; }
.am-tag { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 0.25rem; background: var(--am-steel-soft); color: var(--am-steel); font-weight: 600; }
.am-file { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; margin-top: 0.5rem; }
.am-metadata-note { display: block; max-width: 70rem; font-size: 0.85rem; color: var(--am-stone-600); }

.am-panel {
    background: #FFFFFF;
    border: 1px solid var(--am-stone-200);
    border-radius: 0.375rem;
    padding: 1rem 1.25rem 1.1rem;
    overflow-x: auto;
}

.am-panel + .am-panel { margin-top: 0; }
.am-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.am-panel-title { font-size: 1rem; font-weight: 700; color: var(--am-stone-900); letter-spacing: -0.005em; }
.am-panel > .am-panel-title { margin-bottom: 0.6rem; }

.am-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.am-spacer { flex: 1; }
.am-segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--am-stone-300); border-radius: 0.375rem; overflow: hidden; background: #FFFFFF; }
.am-segment { padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--am-stone-700); border-right: 1px solid var(--am-stone-300); }
.am-segment:last-child { border-right: 0; }
.am-segment:hover { background: var(--am-stone-100); }
.am-segment.is-on { background: var(--am-stone-900); color: #FFFFFF; }
.am-segment:focus-visible { outline: 2px solid var(--am-steel); outline-offset: -2px; }

/* ---- Ledgers ---- */
.am-ledger { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.am-ledger th, .am-ledger td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--am-stone-200); text-align: left; vertical-align: top; }
.am-ledger thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-stone-600); font-weight: 600; border-bottom: 1px solid var(--am-stone-300); white-space: nowrap; }
.am-ledger tbody th { font-weight: 600; color: var(--am-stone-900); }
.am-ledger tbody tr:hover { background: var(--am-stone-50); }
.am-ledger tr.is-selected { background: var(--am-oxblood-soft); }
.am-ledger tr.is-selected:hover { background: var(--am-oxblood-soft); }
.am-r { text-align: right !important; }
.am-ledger .am-num { white-space: nowrap; }
.am-ledger tbody th[scope="row"] { min-width: 11rem; }
.am-wide { width: 30%; min-width: 14rem; }

/* ---- Figures in a row ---- */
.am-figures { display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0.75rem 0; }
.am-figures dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-stone-600); font-weight: 600; }
.am-figures dd { font-size: 1rem; font-weight: 600; color: var(--am-stone-900); }
.am-figures dd.am-sub { font-size: 0.78rem; font-weight: 400; color: var(--am-stone-600); }
.am-big { font-size: 1.9rem; font-weight: 500; color: var(--am-stone-900); line-height: 1.1; }

/* ---- Notice states: always a word, never color alone ---- */
.am-state { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 0.25rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; background: var(--am-stone-100); color: var(--am-stone-700); }
.am-state.is-clear { background: var(--am-green-soft); color: var(--am-green); }
.am-state.is-approaching { background: var(--am-amber-soft); color: var(--am-amber-text); }
.am-state.is-due,
.am-state.is-drafted { background: var(--am-oxblood); color: #FFFFFF; }
.am-state.is-sent { background: var(--am-steel-soft); color: var(--am-steel); }
.am-state.is-received,
.am-state.is-review { background: var(--am-amber-soft); color: var(--am-amber-text); }
.am-state.is-applied { background: var(--am-green-soft); color: var(--am-green); }
.am-state.is-los-clear { background: var(--am-green-soft); color: var(--am-green); }
.am-state.is-los-near { background: var(--am-amber-soft); color: var(--am-amber-text); }
.am-state.is-los-over { background: var(--am-oxblood); color: #FFFFFF; }

/* ---- Runway bars ---- */
.am-bar { position: relative; height: 0.85rem; border-radius: 0.2rem; background: var(--am-stone-100); border: 1px solid var(--am-stone-200); overflow: visible; margin: 0.15rem 0 0.25rem; }
.am-bar-projected { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(135deg, #E9C1C7 0 4px, #F6E3E6 4px 8px); border-radius: 0.2rem 0 0 0.2rem; }
.am-bar-spent { position: absolute; inset: 0 auto 0 0; background: var(--am-stone-700); border-radius: 0.2rem 0 0 0.2rem; }
.am-bar-spent.is-due, .am-bar-spent.is-drafted { background: var(--am-oxblood); }
.am-bar-spent.is-approaching { background: #B45309; }
.am-bar-spent.is-sent { background: var(--am-steel); }
.am-bar-line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--am-amber); box-shadow: 0 0 0 1px #FFFFFF; }

.am-contract { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--am-stone-200); }
.am-contract:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.am-contract-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.4rem; }
.am-contract-number { font-weight: 500; color: var(--am-stone-900); margin-right: 0.5rem; }
.am-contract-name { font-weight: 700; color: var(--am-stone-900); }
.am-contract-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--am-stone-600); }
.am-meter-inline { font-weight: 600; }
.am-meter-inline.is-near { color: var(--am-amber-text); }
.am-meter-inline.is-over { color: var(--am-oxblood); }

/* ---- This week ---- */
.am-week { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }
.am-item { display: block; padding: 0.55rem 0.75rem 0.6rem; margin-top: 0.4rem; border: 1px solid var(--am-stone-200); border-left-width: 4px; border-radius: 0.25rem; text-decoration: none; }
.am-item:hover, .am-item:focus-visible { background: var(--am-stone-50); outline: none; border-color: var(--am-stone-300); }
.am-item.is-danger { border-left-color: var(--am-oxblood); }
.am-item.is-warning { border-left-color: var(--am-amber); }
.am-item.is-info { border-left-color: var(--am-steel); }
.am-item-title { display: block; font-weight: 600; color: var(--am-stone-900); font-size: 0.9rem; }
.am-item-detail { display: block; font-size: 0.8rem; color: var(--am-stone-600); }

/* ---- The rule and figures on the burn page ---- */
.am-rule p { max-width: 75rem; }
.am-rule p + p { margin-top: 0.4rem; }

/* ---- The modification review ---- */
.am-ai { border-left: 4px solid var(--am-steel); }
.am-check { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; font-size: 0.875rem; max-width: 70rem; }
.am-check input { margin-top: 0.2rem; accent-color: var(--am-oxblood); width: 1.05rem; height: 1.05rem; flex: none; }
.am-changes { display: grid; gap: 0.6rem; }
.am-change { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; padding: 0.75rem 0.9rem; border: 1px solid var(--am-stone-200); border-radius: 0.3rem; }
.am-change.has-check { border-color: #F2C77D; background: #FFFBEB; }
.am-change.is-accepted { border-left: 4px solid var(--am-green); }
.am-change.is-rejected { border-left: 4px solid var(--am-stone-600); opacity: 0.85; }
.am-change-main { flex: 1 1 32rem; }
.am-change-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-stone-600); font-weight: 600; }
.am-change-summary { font-weight: 600; color: var(--am-stone-900); }
.am-change-check { margin-top: 0.3rem; color: var(--am-amber-text); font-size: 0.85rem; }
.am-change-ok { margin-top: 0.2rem; color: var(--am-green); font-size: 0.8rem; }
.am-change-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.am-input { padding: 0.35rem 0.55rem; border: 1px solid var(--am-stone-300); border-radius: 0.3rem; font-size: 0.85rem; background: #FFFFFF; min-width: 12rem; }
.am-input:focus { outline: 2px solid var(--am-steel); outline-offset: 0; }
.am-errors { list-style: disc; padding-left: 1.25rem; color: var(--am-stone-800); font-size: 0.875rem; }
.am-errors li + li { margin-top: 0.2rem; }
.am-done { margin-top: 1rem; padding: 0.6rem 0.8rem; background: var(--am-green-soft); color: var(--am-green); border-radius: 0.3rem; font-weight: 600; }

/* ---- The import ---- */
.am-effects { display: grid; gap: 0.4rem; font-size: 0.875rem; }
.am-effects li { padding: 0.45rem 0.7rem; border-left: 4px solid var(--am-stone-300); background: var(--am-stone-50); }
.am-effects li.is-crossing { border-left-color: var(--am-oxblood); background: var(--am-oxblood-soft); }

/* ---- The notice letter ---- */
.am-letter { width: 100%; font-family: var(--am-mono); font-size: 0.85rem; line-height: 1.5; padding: 0.75rem; border: 1px solid var(--am-stone-300); border-radius: 0.3rem; background: #FFFFFF; }
.am-letter:focus { outline: 2px solid var(--am-steel); }
.am-letter-sent { white-space: pre-wrap; font-family: var(--am-mono); font-size: 0.85rem; line-height: 1.5; padding: 0.75rem; background: var(--am-stone-50); border: 1px solid var(--am-stone-200); border-radius: 0.3rem; }
.am-send { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.am-send .am-input { display: block; margin-top: 0.2rem; }

/* ---- CPARS ---- */
.am-clock-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; }
.am-clock { display: flex; flex-direction: column; min-width: 12rem; padding: 0.8rem 1rem; border-radius: 0.375rem; background: var(--am-amber-soft); border: 1px solid #F2C77D; }
.am-clock.is-urgent { background: var(--am-oxblood-soft); border-color: #DA9CA4; }
.am-clock.is-done { background: var(--am-stone-100); border-color: var(--am-stone-200); }
.am-clock-days { font-size: 2.6rem; line-height: 1; color: var(--am-oxblood); }
.am-clock-label { font-weight: 700; color: var(--am-stone-900); }
.am-rating { font-weight: 600; }
.am-rating.is-low { color: var(--am-amber-text); }
.am-quote { margin-top: 0.75rem; padding: 0.6rem 0.9rem; border-left: 4px solid var(--am-stone-300); background: var(--am-stone-50); font-size: 0.9rem; }
.am-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); }
.am-list { list-style: disc; padding-left: 1.25rem; font-size: 0.85rem; }
.am-evidence { display: grid; gap: 0.5rem; font-size: 0.85rem; }
.am-evidence li { display: grid; gap: 0.1rem; padding: 0.45rem 0.6rem; border-left: 3px solid var(--am-stone-300); }
.am-evidence li.is-acceptance { border-left-color: var(--am-green); }
.am-evidence li.is-praise { border-left-color: var(--am-steel); }
.am-evidence li.is-other { border-left-color: var(--am-amber); }
.am-evidence-date { color: var(--am-stone-600); font-size: 0.78rem; }
.am-evidence-kind { font-weight: 600; color: var(--am-stone-800); }

/* ---- The 50 percent meter ---- */
.am-meter-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin: 0.5rem 0 0.25rem; }
.am-meter { position: relative; flex: 1 1 24rem; height: 1.4rem; border-radius: 0.25rem; background: var(--am-stone-100); border: 1px solid var(--am-stone-300); }
.am-meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--am-green); border-radius: 0.25rem 0 0 0.25rem; }
.am-meter.is-near .am-meter-fill { background: #B45309; }
.am-meter.is-over .am-meter-fill { background: var(--am-oxblood); }
.am-meter-cap { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--am-stone-900); }
.am-meter-cap span { position: absolute; top: -1.2rem; left: -1rem; font-family: var(--am-mono); font-size: 0.72rem; color: var(--am-stone-900); }
.am-meter-figure { display: flex; flex-direction: column; min-width: 12rem; }

/* ---- "Try this first" (the pattern every Rowhouse demo shares) ---- */
.am-try {
    position: relative;
    padding: 1rem 1.25rem 1.1rem;
    border-radius: 0.375rem;
    background: #FFFFFF;
    border: 1px solid var(--am-stone-200);
    border-top: 4px solid var(--am-oxblood);
}

.am-try-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-right: 2rem; margin-bottom: 0.75rem; }
.am-try-head h2 { font-size: 1.05rem; font-weight: 800; }

.am-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(--am-stone-700);
}

.am-try-close:hover, .am-try-close:focus-visible { background: var(--am-stone-100); outline: 2px solid var(--am-oxblood); }
.am-try-steps { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.am-try-step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.15rem 0.6rem;
    height: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 0.3rem;
    background: var(--am-stone-50);
    border: 1px solid var(--am-stone-200);
    text-decoration: none;
}

.am-try-step:hover, .am-try-step:focus-visible { border-color: var(--am-oxblood); outline: none; box-shadow: 0 0 0 2px rgba(122, 31, 43, 0.2); }

.am-try-number {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.3rem;
    background: var(--am-oxblood);
    color: #FFFFFF;
    font-weight: 700;
    font-family: var(--am-mono);
}

.am-try-step.is-done .am-try-number { background: var(--am-green); }
.am-try-title { font-weight: 700; color: var(--am-stone-900); }
.am-try-note { font-size: 0.82rem; color: var(--am-stone-600); }

@media (max-width: 767px) {
    .am-try-note { display: none; }
    .am-week { grid-template-columns: 1fr; }
    .am-two { grid-template-columns: 1fr; }
    .am-ledger { display: block; overflow-x: auto; }
}

/* ---- The CPARS draft ---- */
.am-draft { margin-bottom: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 0.3rem; background: var(--am-stone-50); border: 1px solid var(--am-stone-200); border-left: 4px solid var(--am-steel); }
.am-draft p { font-size: 0.85rem; margin-bottom: 0.6rem; }
.am-draft-notes { margin-bottom: 0.75rem; }