/* ==========================================================================
   firstemployee.ai design system

   See DEVELOPMENT_PLAN.md §3. The governing rule: ONE object per screen.
   One column, max 68ch, readable on a phone in 30 seconds. Never a panel grid
   — the competitor's nine-panel dashboard is precisely what we are not.

   Palette: a light professional greyscale with a single confident accent.
   Deliberately NOT near-black (too severe for a business tool people open
   first thing in the morning) and deliberately NOT indigo/violet, which is the
   generic AI-product look. Teal reads adult and it pairs with greyscale without
   fighting it.

   Loaded AFTER bootstrap.min.css, so it wins on specificity ties without
   !important spam. Bootstrap's own defaults are light, so almost nothing needs
   overriding — the previous dark experiment required a large compatibility
   layer for ~40 inherited templates; this needs a handful of lines.
   ========================================================================== */

:root {
    --bg:         #FFFFFF;
    --bg-2:       #F7F7F8;  /* raised surface: cards, the shift report */
    --bg-3:       #EFEFF1;  /* wells, meters, table zebra */
    --text:       #18181B;  /* near-black for body, not pure black */
    --text-dim:   #52525B;
    --text-faint: #8B8B94;
    --line:       #E4E4E7;
    --line-2:     #D4D4D8;

    --accent:     #0F766E;  /* the ONLY accent. Used solely on the thing to act on. */
    --accent-hi:  #0B5A54;
    --accent-wash:#E6F2F0;

    --good:       #0F766E;
    --warn:       #B45309;
    --bad:        #B91C1C;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --measure: 68ch;   /* the one column */
    --radius: 10px;
}

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- the column ----------
   NOTE: never set the `margin` shorthand on .fe-col from a template — it
   overwrites margin-inline:auto and the section slams to the left edge. Use
   .fe-end / .fe-top, or margin-block, instead. This shipped broken once. */
.fe-col {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 22px;
}
.fe-wide { max-width: 90ch; }

/* vertical rhythm helpers that are safe on a centred column */
.fe-top   { margin-block: 5.5rem 0; }
.fe-end   { margin-block: 3.2rem 5rem; }
.fe-tight { margin-block: 1.4rem; }

main { flex: 1 0 auto; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: 660; letter-spacing: -0.021em; line-height: 1.15; color: #0B0B0C; }
h1 { font-size: clamp(2.05rem, 5.6vw, 3.25rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.42rem, 3.4vw, 1.95rem); margin: 3.1rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 2.1rem 0 .6rem; }
p  { margin: 0 0 1.1rem; }
.lead { font-size: 1.19rem; color: var(--text-dim); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
small, .small { font-size: .9rem; }
ul.dim li { margin-bottom: .5rem; }

/* Monospace means "this is a fact" — costs, receipts, diffs, counts. */
.mono, .fe-receipts td, .fe-receipts th { font-family: var(--mono); font-size: .93em; }
.fe-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }

/* ---------- nav ---------- */
.fe-nav {
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(150%) blur(8px);
    position: sticky; top: 0; z-index: 50;
}
.fe-nav-inner {
    max-width: 90ch; margin-inline: auto; padding: 13px 22px;
    display: flex; align-items: center; gap: 22px;
}
.fe-brand {
    font-weight: 690; color: #0B0B0C; text-decoration: none;
    letter-spacing: -0.022em; font-size: 1.03rem; margin-right: auto;
}
.fe-brand:hover { color: #0B0B0C; }
.fe-nav a.fe-navlink { color: var(--text-dim); text-decoration: none; font-size: .95rem; }
.fe-nav a.fe-navlink:hover, .fe-nav a.fe-navlink.is-active { color: #0B0B0C; }

/* ---------- buttons: exactly one primary per screen ---------- */
.fe-btn {
    display: inline-block; font: inherit; font-weight: 560;
    padding: 12px 22px; border-radius: var(--radius);
    border: 1px solid var(--line-2); background: #fff; color: var(--text);
    text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.fe-btn:hover { border-color: #A9A9B2; color: #0B0B0C; }
.fe-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.fe-btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.fe-btn-lg { padding: 15px 30px; font-size: 1.04rem; }
.fe-btn-sm { padding: 8px 15px; font-size: .9rem; }

/* ---------- the shift report: the product surface ---------- */
.fe-shift {
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--bg-2); padding: 26px 24px; margin-block: 1.6rem;
}
.fe-shift-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; margin-bottom: 14px;
}
.fe-shift-when { font-family: var(--mono); font-size: .84rem; color: var(--text-faint); }
.fe-shift-headline { font-size: 1.27rem; color: #0B0B0C; font-weight: 620; margin: 0 0 1.3rem; line-height: 1.35; }
.fe-rule { border: 0; border-top: 1px solid var(--line); margin-block: 1.3rem; opacity: 1; }

.fe-line { display: flex; gap: 14px; padding: 7px 0; align-items: baseline; }
.fe-line-key {
    font-family: var(--mono); font-size: .8rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-faint); min-width: 76px; flex: none;
}
.fe-line-val { flex: 1; }
.fe-line-out { font-family: var(--mono); font-size: .86rem; color: var(--accent); flex: none; }

/* the single decision — the only place accent fills a shape in the report */
.fe-ask { border-left: 3px solid var(--accent); padding-left: 16px; margin-block: 1.3rem; }
.fe-ask-label { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.fe-ask-q { color: #0B0B0C; font-size: 1.06rem; font-weight: 560; margin: .45rem 0 1rem; }
.fe-ask-opts { display: flex; gap: 10px; flex-wrap: wrap; }

/* spend meter — always visible, never a surprise */
.fe-meter { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-block: .5rem; }
.fe-meter > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- receipts ledger ---------- */
.fe-receipts { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .86rem; }
.fe-receipts th {
    text-align: left; color: var(--text-faint); font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em; font-size: .74rem;
    border-bottom: 1px solid var(--line-2); padding: 9px 12px 9px 0;
}
.fe-receipts td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fe-receipts tr:hover td { background: var(--bg-2); }
.fe-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- comparison table (us vs them) ---------- */
.fe-vs { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fe-vs th, .fe-vs td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fe-vs thead th { color: var(--text-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--line-2); }
.fe-vs .fe-us { color: var(--accent); font-weight: 600; }
.fe-vs .fe-them { color: var(--text-dim); }
.fe-vs tbody th { font-weight: 540; color: var(--text); }

/* ---------- misc blocks ---------- */
.fe-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--bg-2); }
.fe-grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .fe-grid2 { grid-template-columns: 1fr 1fr; } }

.fe-quiet { background: var(--accent-wash); border: 1px solid #CFE4E1; border-radius: var(--radius); padding: 16px 18px; }
.fe-badge {
    display: inline-block; font-family: var(--mono); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .07em; padding: 3px 8px;
    border-radius: 5px; border: 1px solid var(--line-2); color: var(--text-dim);
}
.fe-hr { border: 0; border-top: 1px solid var(--line); margin-block: 3rem; opacity: 1; }

/* FAQ — plain <details>, no JS */
.fe-faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.fe-faq > summary { cursor: pointer; padding: 13px 0; color: #0B0B0C; font-weight: 560; list-style: none; }
.fe-faq > summary::-webkit-details-marker { display: none; }
.fe-faq > summary::before { content: "+"; color: var(--accent); font-family: var(--mono); margin-right: 11px; }
.fe-faq[open] > summary::before { content: "–"; }
.fe-faq > div { padding: 0 0 14px 25px; color: var(--text-dim); }

/* ---------- footer ---------- */
.fe-foot { border-top: 1px solid var(--line); padding: 30px 0 40px; margin-top: 4rem; background: var(--bg-2); }
.fe-foot a { color: var(--text-dim); text-decoration: none; margin-right: 18px; font-size: .92rem; }
.fe-foot a:hover { color: #0B0B0C; }

/* ---------- command palette (⌘K) ---------- */
.fe-pal-back { position: fixed; inset: 0; background: rgba(24,24,27,.34); display: none; z-index: 100; }
.fe-pal-back.is-open { display: block; }
.fe-pal {
    max-width: 520px; margin: 12vh auto 0; background: #fff;
    border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
    box-shadow: 0 22px 55px rgba(24,24,27,.18);
}
.fe-pal input {
    width: 100%; padding: 16px 19px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; color: var(--text); font: inherit; outline: none;
}
.fe-pal ul { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.fe-pal li a {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px;
    color: var(--text); text-decoration: none; border-radius: 7px; font-size: .95rem;
}
.fe-pal li a:hover, .fe-pal li a.is-cursor { background: var(--accent-wash); color: var(--accent-hi); }
.fe-pal li a span { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); }
.fe-pal-hint { padding: 9px 19px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .74rem; color: var(--text-faint); }

/* Motion: one thing at a time, and never for people who asked us not to. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Inherited djangobase templates (~40 of them, light Bootstrap markup).
   Now that we are light too, this is mostly about matching radius, spacing and
   the single accent rather than repainting anything.
   ========================================================================== */

.container { max-width: 90ch; }

.card, .box-shadowed, .hero-description {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
h1.page-header { font-size: clamp(1.85rem, 5vw, 2.6rem); margin-bottom: 1.2rem; }
.text-muted, .text-secondary { color: var(--text-dim) !important; }

/* forms */
.form-label, label { color: var(--text-dim); font-size: .93rem; margin-bottom: .35rem; }
.form-control, .form-select, textarea {
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: 1rem;
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* buttons — map Bootstrap variants onto the one-accent rule */
.btn { border-radius: var(--radius); font-weight: 545; padding: 11px 20px; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-outline-secondary, .btn-secondary, .btn-light {
    background: #fff; border-color: var(--line-2); color: var(--text);
}
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover {
    background: var(--bg-2); border-color: #A9A9B2; color: #0B0B0C;
}
.btn-group > .btn.active, .btn-check:checked + .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-danger, .btn-outline-danger { background: #fff; border-color: #E7BDBD; color: var(--bad); }
.btn-danger:hover, .btn-outline-danger:hover { background: #FDF2F2; border-color: #D99; color: var(--bad); }

/* alerts, tables, modals */
.alert { border-radius: var(--radius); }
.table { border-color: var(--line); }
.modal-content { border-radius: 14px; border-color: var(--line-2); }
hr { border-color: var(--line); opacity: 1; }
.hero-container { padding-top: 3.5rem; }
.margin-less { margin-inline: auto; }

/* Plan cards: equal height with the CTA pinned to the bottom, so a card with
   fewer bullets does not float its button up the middle of the panel. */
.fe-grid2 > .fe-card { display: flex; flex-direction: column; }
.fe-grid2 > .fe-card > ul { flex: 1 0 auto; }
.fe-grid2 > .fe-card > p:last-child { margin-bottom: 0; }