/* © 2026 Thomas Oldroyd. Built for CO Home Improvements. */
/* =========================================================================
   SHARED THEME — design tokens and the handful of base rules every page
   genuinely has in common. One file, one place to improve the look of
   the whole app, rather than the same variables copy-pasted into every
   page and quietly drifting apart over time.

   Plain CSS throughout this rewrite — deliberately no Tailwind or other
   framework. The old app's redesign effort was very likely being
   silently overridden by a framework's own dynamically-injected styles
   loading after ours, and neither of us could see that fight happening.
   Writing every rule ourselves removes that entire class of risk.

   Page-specific layout (a login card's centering, a dashboard's project
   grid) stays in each page's own <style> block — this file is only for
   what's actually shared, not a dumping ground for everything.
   ========================================================================= */

:root {
    /* Daylight theme: built from the COHI logo (deep navy and sky blue) so every page reads as one brand.
       Light on purpose: surveyors work in customers' homes and gardens, often in sun, and the logos are dark-on-clear. */
    --bg: #f3f6f9;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --line: #e1e7ee;
    --ink: #12233a;
    --ink-dim: #5c6b7d;
    --accent: #1c78ae;
    --accent-deep: #17365d;
    --sky: #3aa3dc;
    --brass: #8a6a2f;
    --gold: #b39a62;
    --radius: 14px;
    --radius-sm: 10px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --shadow-lift: 0 2px 4px rgba(16, 32, 52, 0.05), 0 16px 32px -10px rgba(16, 32, 52, 0.16);
    --good: #2e7d4f;
    --warn: #9a6a0f;
    --bad: #b3422f;
    --font-display: 'Fraunces', Georgia, serif;
    --font-ui: 'Manrope', -apple-system, sans-serif;
    --shadow: 0 1px 2px rgba(16, 32, 52, 0.05), 0 8px 24px -8px rgba(16, 32, 52, 0.10);
}
/* Pages that are drawing tools on a dark canvas keep the original dark palette. */
:root[data-theme="dark"] {
    --bg: #17161c; --surface: #1e1d24; --surface-raised: #26242d; --line: #34323c;
    --ink: #ede9e3; --ink-dim: #9c98a3; --accent: #6f9cb8; --accent-deep: #3b6e91; --brass: #b08d57;
    --good: #7ba888; --warn: #c9a15a; --bad: #c47a6f; --shadow: none; --shadow-lift: none;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* The header bar used by every page that has a persistent top bar
   (the dashboard, a project's detail view, and anything added later
   that follows the same pattern). Pages without a header — like the
   login screen, which centers a single card instead — simply don't
   include a <header> element and this rule never applies. */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
:root[data-theme="dark"] header { background: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }


/* =========================================================================
   POLISH LAYER — the smooth, quiet, high-end feel shared by every page.
   Prefixed with `body` so it wins over each page's older local rules for
   look-and-feel only (radius, shadow, focus, motion). Layout stays in the pages.
   ========================================================================= */

/* Pages glide into each other instead of flashing white. Browsers without support just navigate as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
:where(p, li) { line-height: 1.55; }
body h1, body h2, body h3 { letter-spacing: -0.01em; }
button, a, input, select, textarea, summary, label[for] { touch-action: manipulation; }

body > header { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(179, 154, 98, 0.35); }

body button { transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s var(--ease), opacity 0.2s var(--ease); }
body button:not(:disabled):active { transform: scale(0.98); }
body button:disabled { cursor: not-allowed; }

body .card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
body input, body select, body textarea { border-radius: var(--radius-sm); border-color: var(--line); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); }
body input:focus, body select:focus, body textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(58, 163, 220, 0.18); background-color: var(--surface); }
body :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 8px; }

body input[type=file]::file-selector-button { font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; background: var(--accent-deep); color: #fff; border: none; border-radius: 999px; padding: 0.45rem 1rem; margin-right: 0.7rem; cursor: pointer; transition: background-color 0.2s var(--ease); }
body input[type=file]::file-selector-button:hover { background: var(--accent); }

/* Panels that open in answer to a tap ease in rather than snap. */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } }
body .modal { animation: rise-in 0.26s var(--ease) both; }
body #modalBg.open { animation: fade-in 0.2s var(--ease) both; }
body #menuPanel.open { animation: rise-in 0.2s var(--ease) both; transform-origin: top right; }

/* Placeholder blocks shown while a list loads, so the page holds its shape instead of jumping. */
.skeleton { height: 4.4rem; margin-bottom: 0.7rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(100deg, var(--surface) 30%, #eef2f6 50%, var(--surface) 70%) 0 0 / 220% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Job-page step tiles lift slightly under a finger or cursor. */
body a.step { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease); border-radius: var(--radius); }
body a.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
body a.step:active { transform: translateY(0) scale(0.99); }

/* Quiet maker's line at the foot of the sign-in and profile pages. */
.vault-credit { margin: 1.6rem 0 1rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.02em; color: var(--ink-dim); opacity: 0.55; }

/* Touch targets on phones: bigger hit areas without changing how things look (audit, 21 Oct). */
@media (max-width: 700px) {
  body > header a, a.back, #backLink { display: inline-block; padding: 0.75rem 0.5rem; margin: -0.75rem -0.5rem; }
  .status-btn { min-height: 42px; }
  .periods button, .seg button, nav.jump a, .jump-all { min-height: 40px; }
  .seg button { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}
@media (max-width: 700px) { button, .btn, select { min-height: 38px; } }