/* ==========================================================================
   v23 "Sky Glass" (31 Oct 2026)
   The page is the sky-blue template background; every card, box, panel and bar is
   translucent glass; text is navy; gold stays the accent; the "needs you" bar is
   navy glass; the Agentive logo keeps its own navy and fades into the sky at the edges.
   Loaded after app.css (layout.php) and wins over files.css, agent.css and
   dashboard.css through the "html body" sections below. Delete the <link> to roll back.
   ========================================================================== */

/* 1. Tokens. Names are unchanged, so every page and inline style follows them. */
:root {
  --ink: #13204A;
  --sky: #2A6F97;
  --fg: #13204A;                       /* body text */
  --muted: #3B4868;                    /* secondary text */
  --subtle: #3F4A66;                   /* captions and labels; AA on glass and on the darkest sky */
  --gold-tx: #13204A;                  /* no gold text: every former gold-text token is navy */
  --gold-hi: #13204A;                  /* the same for the former light-gold text, ticks and focus rings */
  --gold: #D9A84C;                     /* decoration only: rules, dots, borders, button fill */
  --gold-lo: #A67A2C;
  --copper: #A9692E;
  --success: #1D6B45;
  --danger: #B42318;
  --line: rgba(19, 32, 74, .12);
  --line-2: rgba(19, 32, 74, .22);
  --line-3: rgba(166, 122, 44, .65);
  --field-edge: #566079;               /* form field and button outline, 3:1 or more on glass and sky (WCAG 1.4.11) */
  --placeholder: #48536E;              /* placeholder text, AA inside fields */
  --bg: #E6EEF4;
  --navy-1: rgba(255, 255, 255, .55);  /* panels that used the navy fills now take glass */
  --navy-2: rgba(255, 255, 255, .72);
  --navy-3: rgba(255, 255, 255, .80);
  --navy-4: rgba(255, 255, 255, .62);
  --surface: rgba(255, 255, 255, .30);
  --surface-2: rgba(255, 255, 255, .52);
  --glass: rgba(255, 255, 255, .50);
  --box: rgba(255, 255, 255, .40);
  --box-edge: rgba(255, 255, 255, .78);
  --box-inset: rgba(255, 255, 255, .42);
  --action: #A67A2C;
  --glass-navy: rgba(19, 32, 74, .82);
  --glass-blur: blur(20px) saturate(160%);
  --glass-shadow: 0 12px 32px -14px rgba(25, 55, 95, .30), inset 0 1px 0 rgba(255, 255, 255, .85);
  --pop-shadow: 0 22px 50px -12px rgba(25, 55, 95, .38);
  --scrim: rgba(19, 32, 74, .48);
  --shadow-pop: var(--pop-shadow);
  --glow: none;
  --grad-btn: linear-gradient(135deg, #F2D68E 0%, #D9A84C 55%, #C98A4C 100%);
  --grad-text: linear-gradient(100deg, #13204A 0%, #13204A 100%);   /* navy text only */
  --grad-num: linear-gradient(180deg, #13204A, #13204A);
  --grad-rec: linear-gradient(180deg, rgba(255, 240, 205, .55), rgba(255, 255, 255, .38));
  --grad-panel: rgba(255, 255, 255, .40);
}

/* 2. The page: the template background, pinned behind everything.
   A fixed layer rather than background-attachment: fixed, which iPhone Safari ignores. */
html { background: var(--bg); }
body { background: transparent; background-image: none; color: var(--fg); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg) url("/images/sky-bg.jpg") center / cover no-repeat;
}

/* 3. Glass: every card, box, tile and panel */
.card, .glass, details.card, .kpi, .board-col, .welcome-banner, .viewer, .person-row, .drive-block,
.cal-day, .msg, .auth-card, .hero, .setup-banner, .book-cta, .appr-tile, .person-card, .week-day,
.settings-smtp, .lead-card, .secret-box, .fx-movepanel {
  background: var(--box);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--box-edge);
  box-shadow: var(--glass-shadow);
}
.card .card, .card .kpi, .card .person-row, .card .drive-block, .tab-panel .card .card,
.card .person-card, .card .msg, .card .cal-day, .card .lead-card, .card .secret-box, .card .appr-tile {
  background: var(--box-inset); border-color: var(--box-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* one blur layer is enough inside a card */
}
.card h2, .card h3, .prose h2, .article-body h2, .article-body h3 { color: var(--fg); }
.msg.mine { background: var(--grad-rec); border-color: rgba(166, 122, 44, .35); }
.msg.internal { background: rgba(42, 111, 151, .08); border-style: dashed; border-color: rgba(42, 111, 151, .45); }
.secret-box { border-color: var(--line-3); background: rgba(255, 240, 205, .55); }
.setup-banner, .welcome-banner { background: var(--grad-rec); border-color: rgba(166, 122, 44, .35); }

/* 4. The hero is a glass card (no spine on the light page) */
.hero { padding: 1.75rem 1.9rem; border-radius: var(--r-lg); margin-bottom: 1.25rem; overflow: hidden; }
.hero::before, .hero::after, .dash-main::before, .dash-main .tab-panel > *::before { content: none; display: none; }
.dash-main { padding-left: 0; }
.hero h1 { color: var(--fg); }
.hero .lede { color: var(--muted); }
.hero-meta span { color: var(--subtle); }
.hero-meta strong { color: var(--fg); }
h1 em, h2 em, .hero h1 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); padding-right: 0; margin-right: 0; }

/* 5. The "needs you" bar: navy glass, as in the template's callout box */
.next-action, .next-action.needs-you {
  --fg: #FFFFFF; --muted: #D5DBEA; --subtle: #C3CBDE; --gold-tx: #FFFFFF; --gold-hi: #FFFFFF; --line: rgba(255, 255, 255, .18);
  background: var(--glass-navy) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 16px 36px -16px rgba(19, 32, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #FFFFFF;
}
.next-action .na-body, .next-action h2, .next-action h3, .next-action strong { color: #FFFFFF; }
.next-action .na-label, .next-action .eyebrow { color: #FFFFFF; }
.next-action .na-label::before { background: var(--gold); box-shadow: none; }
.next-action a:not(.btn) { color: #FFFFFF; text-decoration-color: var(--gold); }
.next-action .btn:not(.btn-primary) { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
.next-action .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.next-action .pill-needs { background: rgba(255, 255, 255, .12); color: #FFFFFF; border-color: var(--gold); }
.next-action :focus-visible { outline-color: #FFFFFF; }
.next-action .badge, .next-action .chip { background: rgba(255, 255, 255, .12); color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }

/* 6. KPIs: separate glass tiles */
.kpi-row { gap: 1rem; border: 0; border-radius: 0; background: none; overflow: visible; }
.kpi-row > .kpi, .kpi-row > .kpi:first-child, .kpi-row > .kpi:nth-child(n) {
  background: var(--box); border: 1px solid var(--box-edge); border-radius: var(--r-lg); box-shadow: var(--glass-shadow);
}
.kpi .label { color: var(--subtle); }
.kpi .label::before { background: var(--gold); box-shadow: none; }
.kpi .value { color: var(--fg); }
.kpi .hint { color: var(--muted); }
@media (max-width: 860px) {
  .kpi-row { gap: .75rem; }
  .kpi-row > .kpi:nth-child(n+3) { border-top: 1px solid var(--box-edge); }
}

/* 7. Top bar: frosted glass; the gold trace stays */
.site-header {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--box-edge);
  box-shadow: 0 6px 24px -18px rgba(25, 55, 95, .45);
}
.site-header .brand-text { color: var(--gold-tx); border-left-color: var(--line-2); }
.site-header .nav a, .user-chip .chip-link { color: var(--muted); }
.site-header .nav a:hover { color: var(--fg); background: rgba(255, 255, 255, .45); }
.site-header .nav a.active { color: var(--fg); background: rgba(255, 255, 255, .62); border-color: var(--box-edge); box-shadow: inset 0 -2px 0 var(--gold); }
.user-chip .who, .user-chip .who strong { color: var(--fg); }
.user-chip .chip-link:hover, .user-chip .chip-link.active { color: var(--fg); }
.nav-toggle { color: var(--fg); border-color: var(--line-2); background: rgba(255, 255, 255, .4); }
.sidebar { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-right-color: var(--box-edge); }
.nav a { color: var(--muted); }
.nav a:hover, .nav a.active { color: var(--fg); background: rgba(255, 255, 255, .55); border-color: var(--box-edge); }
.nav a.active { box-shadow: inset 2px 0 0 var(--gold); }
@media (max-width: 860px) { .sidebar.open, .site-header.open { background: rgba(255, 255, 255, .86); } }

/* The Agentive logo: its own navy, faded into the sky (images/logo-sky.png carries the fade).
   The faded margin is about a quarter of the image, so the mark itself keeps its previous size. */
.brand img.logo-sky { height: 70px; margin: -12px -16px -12px -18px; }
.auth-card img.logo.logo-sky, img.logo.logo-sky { height: 92px; width: auto; margin: -10px auto .75rem; }
@media (max-width: 860px) { .site-header .brand img.logo-sky { height: 52px; margin: -9px -12px -9px -13px; } }
/* A client's own uploaded logo sits on a soft glass tile so a light or white logo still shows */
.brand img:not(.logo-sky) { background: rgba(255, 255, 255, .55); border-radius: 8px; padding: 3px 6px; }

/* 8. Tabs and section bars */
.tabs, .tabs-sub, .main-bar { border-bottom-color: var(--line-2); }
.tabs a { color: var(--muted); }
.tabs a:hover { color: var(--fg); }
.tabs a.active { color: var(--fg); border-bottom-color: var(--gold); }
.nav-badge, .tabs .count { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* 9. Buttons */
.btn { background: rgba(255, 255, 255, .55); border-color: var(--field-edge); color: var(--fg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn:hover { background: rgba(255, 255, 255, .8); border-color: var(--gold-lo); color: var(--fg); }
.btn-primary, a.nav-book, .book-cta a.btn-primary, .tabs-sub a.tab-cta {
  background: var(--grad-btn); color: var(--navy-0); border: 1px solid #8A6524;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px -10px rgba(166, 122, 44, .7);
}
.btn-primary:hover, a.nav-book:hover, .tabs-sub a.tab-cta:hover { color: var(--navy-0); background: var(--grad-btn); filter: brightness(1.04); }
.stack-list .btn-primary.btn-sm, .table .btn-primary.btn-sm { background: rgba(255, 255, 255, .55); color: var(--fg); border-color: var(--field-edge); box-shadow: none; }
.btn-ghost { color: var(--fg); border-color: var(--field-edge); background: rgba(255, 255, 255, .45); border-radius: var(--r); box-shadow: none; }
.btn-danger { color: var(--danger); border-color: rgba(180, 35, 24, .45); background: rgba(255, 255, 255, .5); }
.btn-danger:hover { background: rgba(254, 228, 226, .8); color: var(--danger); border-color: var(--danger); }
button.nav-mini-danger { border-color: rgba(180, 35, 24, .45); }
.nav-mini { color: var(--muted); border-color: var(--line-2); }

/* 10. Forms */
input, textarea, select, input:not([type="checkbox"]):not([type="radio"]) { background: rgba(255, 255, 255, .82); color: var(--fg); border-color: var(--field-edge); }
input:not([type=checkbox]):not([type=radio]), textarea, select { border-color: var(--field-edge); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--gold-lo); box-shadow: 0 0 0 3px rgba(217, 168, 76, .35); background: #FFFFFF; }
input:disabled, textarea:disabled, select:disabled { background: rgba(255, 255, 255, .4); color: var(--subtle); }
label { color: var(--muted); }
select option { background: #FFFFFF; color: var(--fg); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
.score-row label:has(input:checked), .steps-nav button[aria-current="step"] { background: var(--grad-btn); color: var(--navy-0); border-color: rgba(166, 122, 44, .55); }

/* 11. Chips, badges, alerts, status */
.badge { color: var(--muted); border-color: var(--line-2); background: rgba(255, 255, 255, .5); }
.badge-success, .health-green, .badge-ok { color: var(--success); border-color: rgba(29, 107, 69, .35); background: rgba(220, 245, 230, .65); }
.badge-danger, .health-red, .dash-flag.bad { color: var(--danger); border-color: rgba(180, 35, 24, .35); background: rgba(254, 228, 226, .6); }
.health-amber { color: var(--ink); border-color: var(--gold-lo); background: rgba(255, 240, 205, .65); }
.pill-needs { background: rgba(255, 240, 205, .75); color: var(--ink); border: 1px solid var(--gold-lo); }
.pill-needs::before { background: var(--gold-lo); box-shadow: none; }
.alert { background: rgba(255, 255, 255, .6); border-color: var(--line-2); color: var(--fg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.alert-error { background: rgba(254, 228, 226, .75); border-color: rgba(180, 35, 24, .4); color: var(--danger); }
.alert-success { background: rgba(220, 245, 230, .75); border-color: rgba(29, 107, 69, .4); color: var(--success); }
.alert-info { background: rgba(255, 240, 205, .7); border-color: var(--gold-lo); color: var(--ink); }
.status-dot.on { box-shadow: none; }
.onb-q .onb-error { color: var(--danger); }
.needs-you { border-color: var(--action) !important; }

/* 12. Progress and meters */
.progress { background: rgba(19, 32, 74, .12); }
.progress > i { background: linear-gradient(90deg, var(--sky), var(--gold)); box-shadow: none; }
.meter { background: rgba(19, 32, 74, .08); border-color: var(--line); }
.meter.warn > i { background: #B7791F; }

/* 13. Tables and lists */
.table th { color: var(--subtle); }
.table th, .table td { border-bottom-color: var(--line); }
.feed-list li.is-new, .notif-list li.is-new a { background: rgba(255, 240, 205, .5); }
.conv-list li.active a { background: rgba(255, 255, 255, .6); box-shadow: inset 3px 0 0 var(--gold); }
.timeline li::before { background: #FFFFFF; border: 1px solid var(--gold-lo); }
.files-panel-list .file-ext { color: var(--gold-tx); border-color: var(--line-2); }
.empty, .empty-lux { color: var(--subtle); }
.my-checklist .tick { color: var(--gold-hi); border-color: var(--line-3); background: rgba(255, 255, 255, .5); }
.my-checklist .is-done .tick { background: rgba(255, 240, 205, .8); }

/* 14. Approvals */
.appr-tile { color: var(--fg); }
.appr-tile.is-needed { border-color: var(--gold-lo); background: rgba(255, 240, 205, .6); }
.appr-tile.is-needed .n, .appr-tile.is-needed .l { color: var(--ink); }
.appr-review .appr-count { background: rgba(255, 240, 205, .8); color: var(--ink); border-color: var(--gold-lo); }
.appr-review .appr-item { border-left-color: var(--gold-lo); }

/* 15. Calendar colours, darkened for the light page */
.k-meeting { --k: #2F6DB5; } .k-deliverable { --k: #6B4FA0; } .k-task { --k: #B7791F; }
.k-billing { --k: #1F7A63; } .k-questionnaire { --k: #1E7B93; } .k-upload { --k: #4C5FBF; }
.k-checklist { --k: #B4602F; } .k-risk { --k: #C0294F; } .k-milestone { --k: var(--gold-lo); }
.cal-item.k-meeting { border-left-color: #2F6DB5; } .cal-legend .k-meeting::before { background: #2F6DB5; }
.cal-item.k-task { border-left-color: #B7791F; } .cal-legend .k-task::before { background: #B7791F; }
.cal-day.today, .week-day.today { background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px rgba(217, 168, 76, .7); }

/* 16. Overlays: tour, session warning, dialogs */
.tour-card, .session-warning {
  background: rgba(255, 255, 255, .88); color: var(--fg); border: 1px solid var(--box-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--pop-shadow);
}
.tour-dots span { background: var(--line-2); }
.tour-dots span.on { background: var(--gold-lo); }
.tour-spot { outline-color: var(--gold-lo); }

/* 17. Document and media viewers keep a neutral frame */
.viewer-media img, .viewer-media video { background: #FFFFFF; }
.pdf-page canvas { box-shadow: 0 4px 18px rgba(25, 55, 95, .25); }

/* 18. Focus rings: navy, 2px */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--gold-hi); }
.skip-link { background: var(--ink); color: #FFFFFF; }

/* ---- Sheets loaded later in the page (files.css, dashboard.css, agent.css) ---- */

/* Files browser */
html body .fx { --fx-hover: rgba(255, 255, 255, .45); --fx-sel: rgba(255, 240, 205, .65); --fx-sel-edge: rgba(166, 122, 44, .6); --fx-drop: rgba(255, 240, 205, .8); --fx-page: #FFFFFF; --fx-page-edge: #7C859B; }
html body .fx-row:nth-child(even) { background: rgba(255, 255, 255, .22); }
html body .fx-side { background: rgba(255, 255, 255, .38); }
html body .fx-head { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html body .fx-search input { background: rgba(255, 255, 255, .8); }
html body .fx-dropzone, html body .fx-drop-overlay { background: rgba(230, 238, 244, .86); color: var(--gold-tx); }
html body .fx-menu, html body .fx-rowmenu-body, html body .fx-dialog, html body .fx-toast, html body .fx-confirm {
  background: rgba(255, 255, 255, .92); color: var(--fg); border-color: var(--box-edge); box-shadow: var(--pop-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html body .fx-dialog::backdrop { background: rgba(19, 32, 74, .38); }
html body .fx-menu button.fx-danger:hover { background: rgba(254, 228, 226, .8); }
html body .fx-toast.is-ok { border-color: rgba(29, 107, 69, .45); }
html body .fx-toast.is-err { border-color: rgba(180, 35, 24, .5); color: var(--danger); }

/* Owner Today dashboard */
html body .week-day { background: var(--box); border-color: var(--box-edge); }
html body .week-day.today h3 { color: var(--gold-tx); }
html body .week-item { background: rgba(255, 255, 255, .6); }
html body .dash-flag.bad { border-color: rgba(180, 35, 24, .35); }
html body .deliv-kind { color: var(--gold-tx); }

/* Ava, the portal assistant: a glass panel with navy text */
html body #agentive-agent {
  --ag-bg: rgba(255, 255, 255, .78); --ag-panel: rgba(255, 255, 255, .86); --ag-raise: rgba(255, 255, 255, .7);
  --ag-line: rgba(166, 122, 44, .45); --ag-hair: rgba(19, 32, 74, .12);
  --ag-ink: #13204A; --ag-dim: #3B4868; --ag-gold: #13204A; --ag-gold-2: #A67A2C; --ag-gold-ink: #000312;
  --ag-me: rgba(255, 240, 205, .8); --ag-ok: #1D6B45;
}
html body #agentive-agent .ag-launch, html body #agentive-agent .ag-panel {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--pop-shadow);
}
html body #agentive-agent .ag-log { background-image: radial-gradient(rgba(166, 122, 44, .12) 1px, transparent 1px); }
html body #agentive-agent .ag-input { background: #FFFFFF; border-color: var(--field-edge); color: var(--ag-ink); }
html body #agentive-agent .ag-me .ag-text { border-color: rgba(166, 122, 44, .35); }
html body #agentive-agent .ag-send, html body #agentive-agent .ag-avatar { background: var(--grad-btn); color: #000312; }
html body #agentive-agent .ag-cta:hover { background: rgba(255, 240, 205, .7); }
html body #agentive-agent .ag-status, html body #agentive-agent .ag-status-dot { color: var(--ag-ok); }

/* ---- No gold text. Navy text everywhere; gold only as outlines, rules, dots and the button fill ---- */
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(166, 122, 44, .8); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* interface links (menus, tabs, buttons, tiles, list rows) keep no underline; their shape marks them */
.site-header a, .nav a, .tabs a, .tabs-sub a, .main-bar a, .btn, a.btn, a.nav-book, .tab-cta, .appr-tile, .brand, .skip-link,
.fx a, .fx-places a, .fx-path a, .fx-node a, .conv-list a, .notif-list a, .card-head a, .chip-links a, .user-chip a,
.ws-head a, #agentive-agent a { text-decoration: none; }
.card .card-head a::after { color: var(--ink); }
.ws-head .ws-eyebrow, .ws-head .eyebrow, .hero-kicker, .eyebrow, .site-header .brand-text, .na-label, .kicker, legend, .deliv-kind, .file-ext { color: var(--ink); }
.ws-head .ws-eyebrow::before, .ws-head .eyebrow::before, .hero-kicker::before { background: linear-gradient(90deg, var(--gold), transparent); }
.badge-ok { color: var(--ink); border-color: var(--gold-lo); }
.my-checklist .tick, .appr-tick { color: var(--ink); }
html body .week-day.today h3, html body .deliv-kind { color: var(--ink); }
html body #agentive-agent .ag-panel::before { background: linear-gradient(90deg, transparent, #D9A84C 30%, #A67A2C 70%, transparent); }
html body #agentive-agent .ag-bot .ag-text { border-left-color: var(--gold); }
html body #agentive-agent .ag-cta { border-color: var(--gold-lo); }