/* ==========================================================================
   Figma "Redesign Childcare Kiosk" -- round 3 (Hershey Nov 10 2026: "the outside
   page hasn't updated to the new design" + "audit the new app in full").
   1) Figma tokens (figma_src/TOKENS.txt) remapped onto style.css's own variables,
      so every inner screen picks up the Figma ink / wash / teal / line / radius.
   2) Figma components (.panel, .stat-card, .primary-btn, .secondary-btn, inputs,
      status pills, table heads, page titles) applied to our shared classes.
   3) The public site (marketing layout) in the Figma look.
   Loaded media="screen" only: printed forms, reports and PDFs never see it.
   Popups (.modal, .kg-sheet) get the ORIGINAL tokens back, so the sign-in
   popup is exactly as before.
   ========================================================================== */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../vendor/inter/inter-latin-var.woff2") format("woff2");
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. tokens ------------------------------------------------------------ */
html.fg-ui body, body.mk, body.fg-pub {
    --primary: #246f66; --primary-light: #e1efec; --primary-dark: #18534c;
    --primary-strong: #246f66; --primary-stronger: #18534c;
    --secondary: #2f805b; --secondary-light: #e0f0e5; --secondary-dark: #2c704d;
    --success: #2f805b; --success-dark: #2c704d; --success-strong: #2c704d; --success-stronger: #20563b;
    --danger: #ad4f3a; --danger-strong: #ae4d38; --danger-stronger: #8e3826;
    --warning-text: #946018; --warning-strong: #946018;
    --dark: #20302d; --gray: #687570; --light-gray: #edf0ed; --light: #f4f6f2;
    --bg: #f4f6f2; --surface: #ffffff; --border: #dfe5df; --text: #20302d; --muted: #687570;
    --on-tint-green: #2c704d; --on-tint-gray: #65716d;
    --border-radius: 12px;
    --box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05);
    --set-page-bg: #f4f6f2; --ico-teal: #246f66;
    --fg-line: #dfe5df; --fg-teal: #246f66; --fg-teal-dark: #18534c; --fg-teal-soft: #e1efec;
    --fg-ink: #20302d; --fg-ink-strong: #1a2b28; --fg-muted: #687570; --fg-wash: #f4f6f2;
    --fg-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05);
    --fg-serif: Georgia, 'Times New Roman', serif;
    --fg-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Popups keep the original palette (sign-in popup unchanged). */
html.fg-ui .modal, html.fg-ui .kg-sheet {
    --primary: #2F8F83; --primary-light: #DCECE9; --primary-dark: #256F66;
    --primary-strong: #256F66; --primary-stronger: #1C554E;
    --secondary: #3D9A6D; --secondary-light: #CDE8DA; --secondary-dark: #2E7D57;
    --success: #3D9A6D; --success-dark: #2E7D57; --success-strong: #2E7D57; --success-stronger: #20563B;
    --danger: #C6553B; --danger-strong: #A8432E; --danger-stronger: #8E3826;
    --warning-text: #92400E; --warning-strong: #96530F;
    --dark: #2B2A28; --gray: #6F6B64; --light-gray: #EFEBE4; --light: #FBFAF7;
    --bg: #F7F5F1; --surface: #FFFFFF; --border: #E7E2DA; --text: #2B2A28; --muted: #6F6B64;
    --on-tint-green: #245F42; --on-tint-gray: #57534B;
    --border-radius: 10px;
    --box-shadow: 0 1px 2px rgba(43, 42, 40, 0.04), 0 2px 8px rgba(43, 42, 40, 0.06);
    --set-page-bg: #F1EFEB; --ico-teal: #2F8F83;
}
html.fg-ui body { background: #f4f6f2; color: #20302d; font-family: var(--fg-sans); }

/* --- 2. components on inner screens (never inside a popup) ---------------- */
html.fg-ui main h1:not(.modal *):not(.kg-sheet *) {
    font-family: var(--fg-serif); font-weight: 600; color: #1a2b28; letter-spacing: -.6px; line-height: 1.12;
}
html.fg-ui main h2:not(.modal *):not(.kg-sheet *), html.fg-ui main h3:not(.modal *):not(.kg-sheet *) { color: #1a2b28; letter-spacing: -.2px; }
html.fg-ui .portal-sub, html.fg-ui .muted:not(.modal *) { color: #687570; }

/* Figma .primary-btn / .secondary-btn / danger */
html.fg-ui :is(.btn-primary, .btn, .pa-btn-primary, .set-btn-primary, .caps-fill-big, .apf-big, button[type="submit"].primary):not(.modal *):not(.kg-sheet *):not(.kiosk-tab) {
    background: #246f66; border: 1px solid #246f66; color: #fff; border-radius: 8px;
    box-shadow: 0 2px 5px rgba(36,111,102,.18); font-weight: 700; font-family: var(--fg-sans);
}
html.fg-ui :is(.btn-primary, .btn, .pa-btn-primary, .set-btn-primary, .caps-fill-big, .apf-big):not(.modal *):not(.kg-sheet *):hover { background: #18534c; border-color: #18534c; }
html.fg-ui :is(.btn-secondary, .btn-secondary-sm, .back-button, .pa-btn, .set-btn, .text-btn-outline, .food-nav-btn, .aq-btn):not(.modal *):not(.kg-sheet *):not(.kiosk-tab) {
    background: #fff; color: #42514d; border: 1px solid #d9e0da; border-radius: 8px; box-shadow: none;
    font-weight: 700; font-family: var(--fg-sans);
}
html.fg-ui :is(.btn-secondary, .btn-secondary-sm, .back-button, .pa-btn, .set-btn, .food-nav-btn, .aq-btn):not(.modal *):not(.kg-sheet *):hover { background: #f4f7f5; border-color: #c9d3cc; color: #20302d; }
html.fg-ui :is(.btn-danger, .btn-danger-sm):not(.modal *):not(.kg-sheet *) { background: #ae4d38; border: 1px solid #a64935; color: #fff; border-radius: 8px; font-weight: 700; }
html.fg-ui .text-button:not(.modal *) { color: #246f66; font-weight: 700; }

/* Figma .panel / .stat-card */
html.fg-ui :is(.settings-card, .dash-card, .pa-card, .plan-card, .fam-card, .portal-card, .table-container, .portal-section.card, .caps-fill-panel, .auth-box, .stat-card, .set-group, .card):not(.modal *):not(.kg-sheet *):not(.child-card):not(.staff-card) {
    background: #fff; border: 1px solid #dfe5df; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05);
}
html.fg-ui :is(.settings-card-title, .portal-section-title, .pa-h2, .settings-subhead):not(.modal *) { color: #1a2b28; letter-spacing: -.2px; }
html.fg-ui .stat-card .stat-num:not(.modal *), html.fg-ui .pb-num:not(.modal *), html.fg-ui .dash-card .num:not(.modal *) {
    font-family: var(--fg-serif); color: #1a2b28; letter-spacing: -.5px;
}
html.fg-ui .stat-card .stat-label:not(.modal *) { color: #687570; }

/* Tables: Figma .data-row.header */
html.fg-ui .data-table:not(.modal *) { border-collapse: separate; border-spacing: 0; background: #fff; }
html.fg-ui .data-table:not(.modal *) thead th, html.fg-ui .stack-table:not(.modal *) thead th {
    background: #fafbfa; color: #7c8783; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700;
    border-bottom: 1px solid #e7ebe7;
}
html.fg-ui .data-table:not(.modal *) td { border-bottom: 1px solid #edf0ed; }
html.fg-ui .data-table:not(.modal *) tbody tr:hover td { background: #f8faf8; }

/* Inputs: Figma .form-grid input */
html.fg-ui :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="url"], select, textarea):not(.modal *):not(.kg-sheet *):not(.date-display):not(.search-container input):not(.inline-search input):not(.lang-mini *) {
    border: 1px solid #dce2dd; border-radius: 8px; color: #30403c; background-color: #fff; font-family: var(--fg-sans);
}
html.fg-ui :is(input, select, textarea):not(.modal *):not(.kg-sheet *):focus { border-color: #246f66; outline: 2px solid rgba(36,111,102,.18); outline-offset: 0; }
html.fg-ui :is(.form-group, .settings-field) > label:not(.modal *) { color: #3c4946; font-weight: 700; }

/* Status pills: Figma .status-pill */
html.fg-ui :is(.status-chip, .status-badge):not(.modal *) { border-radius: 99px; font-weight: 700; }
html.fg-ui .status-chip-ok:not(.modal *) { background: #e0f0e5; color: #2c704d; border-color: transparent; }
html.fg-ui .status-chip-warn:not(.modal *) { background: #f8ebd8; color: #946018; border-color: transparent; }
html.fg-ui .status-chip-bad:not(.modal *) { background: #f7e4df; color: #9a3d28; border-color: transparent; }
html.fg-ui .alert:not(.modal *) { border-radius: 10px; }
html.fg-ui .alert-info:not(.modal *) { background: #e1efec; border-color: #c4ded8; color: #18534c; }

/* Sign-in / sign-up / password pages: Figma card on the wash */
html.fg-ui .auth-container { background: transparent; }
html.fg-ui .auth-box:not(.modal *) { padding: 30px 28px; }
html.fg-ui .auth-box h1, html.fg-ui .auth-box h2 { font-family: var(--fg-serif); font-weight: 600; color: #1a2b28; letter-spacing: -.6px; }
html.fg-ui .auth-sub, html.fg-ui .auth-alt { color: #687570; }
html.fg-ui .auth-box a:not(.btn):not(.btn-primary):not(.btn-secondary) { color: #246f66; }

/* Links */
html.fg-ui main a:not([class]):not(.modal *) { color: #246f66; }

/* --- 3. public site (marketing layout) ------------------------------------- */
body.mk { background: #f4f6f2; color: #20302d; font-family: var(--fg-sans); -webkit-font-smoothing: antialiased; font-synthesis: none; }
.mk h1, .mk h2 { font-family: var(--fg-serif); font-weight: 600; color: #1a2b28; letter-spacing: -.8px; }
.mk h3 { color: #1a2b28; letter-spacing: -.2px; }
.mk-header { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #dfe5df; position: sticky; top: 0; z-index: 40; }
.mk-header-inner { min-height: 68px; }
.mk-brand { color: #1a2b28; font-weight: 750; letter-spacing: -.3px; }
.mk-brand .fig-brand-mark span { background: #246f66; }
.mk-brand .fig-brand-mark span:nth-child(3) { background: #7bc1b5; }
.mk-nav-section { color: #42514d; font-weight: 600; border-radius: 8px; }
.mk-nav-section:hover { background: #eef3f0; color: #20302d; }
.mk-btn { border-radius: 8px; font-weight: 700; font-family: var(--fg-sans); min-height: 39px; }
.mk-btn-solid { background: #246f66; border-color: #246f66; color: #fff; box-shadow: 0 2px 5px rgba(36,111,102,.18); }
.mk-btn-solid:hover { background: #18534c; border-color: #18534c; color: #fff; }
.mk-btn-quiet, .mk-btn-outline { background: #fff; color: #42514d; border: 1px solid #d9e0da; }
.mk-btn-quiet:hover, .mk-btn-outline:hover { background: #f4f7f5; color: #20302d; border-color: #c9d3cc; }
.mk-eyebrow { text-transform: uppercase; letter-spacing: .11em; color: #246f66; font-size: .78rem; font-weight: 800; }
.mk-hero { background: #f4f6f2; border-bottom: 1px solid #e7ebe7; }
.mk-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -1.4px; }
.mk-lead, .mk-section-lead { color: #5c6965; }
.mk-section { background: #f4f6f2; }
.mk-section-alt { background: #ffffff; border-top: 1px solid #e7ebe7; border-bottom: 1px solid #e7ebe7; }
.mk-features > *, .mk-plan, .mk-price-card, .mk-addon, .mk-contact, .mk-form, .mk-notice, .mk-legal-toc, .mk-legal-table-wrap {
    background: #fff; border: 1px solid #dfe5df; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05);
}
.mk-section-alt .mk-features > * { background: #fbfcfb; }
.mk-feature-lead { color: #1a2b28; }
.mk-badge, .mk-feature-soon { border-radius: 99px; background: #e1efec; color: #18534c; font-weight: 700; }
.mk-shot { border-radius: 12px; border: 1px solid #dfe5df; box-shadow: 0 1px 2px rgba(25,46,40,.05), 0 18px 40px rgba(25,46,40,.10); background: #fff; overflow: hidden; }
.mk-shot img { display: block; }
.mk-checks li::marker, .mk-checks li::before { color: #2f805b; }
.mk-price-amount { font-family: var(--fg-serif); color: #1a2b28; letter-spacing: -.8px; }
.mk-plan-name { color: #246f66; }
.mk input, .mk select, .mk textarea { border: 1px solid #dce2dd; border-radius: 8px; font-family: var(--fg-sans); color: #30403c; }
.mk input:focus, .mk select:focus, .mk textarea:focus { border-color: #246f66; outline: 2px solid rgba(36,111,102,.18); }
.mk a:not([class]) { color: #246f66; }
.mk-footer { background: #143b36; color: #b9d0cc; border-top: 0; }
.mk-footer-brand { color: #fff; font-weight: 750; }
.mk-footer a, .mk-footer-links a { color: #b9d0cc; }
.mk-footer a:hover, .mk-footer-links a:hover { color: #fff; }
.mk-footer-note { color: #85a8a2; }
.mk .lang-mk, .mk .lang-switch { font-family: var(--fg-sans); }
/* help / how-to pages */
.mk :is(.hp-step, .hp-qa, .hc-item, .hc-area, .hc-search) { border-color: #dfe5df; border-radius: 12px; }
.mk .hp-step-num { background: #246f66; color: #fff; }

/* Figma brand mark in every lockup (screen); the old icon stays for print. */
.brand-lockup .fig-brand-mark { display: inline-block; width: 30px; height: 30px; margin-right: 2px; vertical-align: middle; }
.brand-lockup .fig-brand-mark ~ .brand-mark { display: none; }
.brand-lockup .fig-brand-mark span { background: #246f66; }
.brand-lockup .fig-brand-mark span:nth-child(3) { background: #7bc1b5; }
html.fg-shell .nav-drawer .brand-lockup .fig-brand-mark span { background: #7bc1b5; }
html.fg-shell .nav-drawer .brand-lockup .fig-brand-mark span:nth-child(3) { background: #fff; }

/* Overview (dashboard): Figma .stats-grid / .stat-card for the live counts */
html.fg-ui .here-stats:not(.modal *) { gap: 14px; }
html.fg-ui .here-stat:not(.modal *) {
    background: #fff; border: 1px solid #dfe5df; border-radius: 12px; padding: 18px;
    box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); text-decoration: none; color: #20302d;
}
html.fg-ui .here-stat-num { font-family: var(--fg-serif); color: #1a2b28; letter-spacing: -.5px; }
html.fg-ui .here-stat-label { color: #687570; }
html.fg-ui a.here-stat:hover { border-color: #b9d6d0; }
html.fg-ui .dash-card > h2:not(.modal *), html.fg-ui .settings-card > h2:not(.modal *) { font-size: 1.05rem; color: #1a2b28; }
html.fg-ui .name-list li { border-color: #edf0ed; }
html.fg-ui .chip-warning { background: #f8ebd8; color: #946018; border-radius: 99px; }
html.fg-ui .portal-header h1, html.fg-ui .page-header h1 { font-family: var(--fg-serif); }
/* Settings hub tiles / rows */
html.fg-ui :is(.set-row, .settings-list a, .hub-tile):not(.modal *) { border-color: #edf0ed; }
html.fg-ui :is(.settings-split-nav, .set-nav) a[aria-current="page"], html.fg-ui :is(.settings-split-nav, .set-nav) a.is-current {
    background: #fff; color: #246f66; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); border-radius: 8px;
}
/* Parent app / family portal cards */
html.fg-ui :is(.pa-card, .fam-card) { border-radius: 12px; }
html.fg-ui .pa-btn-primary, html.fg-ui .fam-btn-primary { border-radius: 8px; }

/* Menu tiles (Food, Forms, Admin home...): Figma .shortcut-grid button */
html.fg-ui .menu-button:not(.modal *) {
    border: 1px solid #e3e8e3; border-left: 1px solid #e3e8e3; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); color: #20302d;
}
html.fg-ui .menu-button:not(.modal *):hover { border-color: #9bbab4; background: #f5faf8; transform: translateY(-2px); }
html.fg-ui .menu-button:not(.modal *) > i:first-child {
    width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 10px;
    background: #e1efec; color: #246f66; font-size: 20px;
}
html.fg-ui .menu-button-title { color: #1a2b28; font-weight: 700; }
html.fg-ui .menu-card:not(.modal *) { border: 1px solid #dfe5df; border-left: 4px solid #246f66; border-radius: 12px; }

/* Forms drill-down tiles: Figma tile (no heavy colored bottom bar) */
html.fg-ui .forms-big-btn, html.fg-ui .forms-name-btn {
    border: 1px solid #e3e8e3; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); color: #20302d;
}
html.fg-ui .forms-big-btn:hover, html.fg-ui .forms-big-btn:focus-visible, html.fg-ui .forms-name-btn:hover { border-color: #9bbab4; background: #f5faf8; }
html.fg-ui .forms-big-btn i { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 16px; background: #e1efec; color: #246f66; font-size: 32px; }

html.fg-ui .forms-type-btn { border: 1px solid #e3e8e3; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); color: #20302d; }
html.fg-ui .forms-type-btn:hover { border-color: #9bbab4; background: #f5faf8; }
html.fg-ui .forms-type-add > summary.forms-type-btn { border-style: dashed; box-shadow: none; }

/* Old 5px colored rails on tiles -> Figma card */
html.fg-ui :is(.family-tile, .doc-item, .mca-card, .finish-card):not(.modal *) {
    border: 1px solid #e3e8e3; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05);
}
html.fg-ui .visitor-card:not(.modal *) { border: 1px solid #e3e8e3; border-left-width: 3px; border-radius: 12px; box-shadow: 0 1px 2px rgba(25,46,40,.04), 0 8px 24px rgba(25,46,40,.05); }
html.fg-ui :is(.flash-message, .license-banner, .closing-flags, .evac-alert, .cacfp-warn, .home-reminders):not(.modal *) { border-radius: 10px; border-left-width: 3px; }

/* Audit fix: a .container that is also width:100% (Food > meal sheet) ran 70px past the screen beside the sidebar. */
html.fg-shell main#main > .container { box-sizing: border-box; }