/* ==========================================================================
   WrenchUr CMMS — design system

   Brand pass, 2026-09-02 (owner: "the thing needs some pizzaz ... build up
   a design to match the brand"). The palette is now derived from the WrenchUr
   logo: one royal blue (measured off wrenchur-logo.png, #1C4EA8) and the
   navy it darkens to. Dark mode keeps the v13 shape — a dark ground, light
   text, an accent for the interactive things — but the near-black greys are
   re-derived as a navy family, and the cyan accent became a lighter WrenchUr
   blue. Light mode (theme.css) is white with light-grey bands and the heavy
   dark outlines the owner asked for.

   Every foreground/background pair below was checked with the dataviz
   validator (scratchpad brand-contrast.mjs): 4.5:1 for text, 3:1 for UI.
   Rule 8 still holds — nothing signals by hue alone; colour is decoration
   on top of a label, a shape or an outline.
   ========================================================================== */

:root{
  /* --- the brand --- */
  --brand:#1C4EA8;        /* the logo blue — headings, primary buttons in light mode */
  --brand-ink:#15325F;    /* the navy under the top bars, both themes */
  --brand-lt:#6FA0F0;     /* the light WrenchUr blue: text and edges ON navy, the dark accent */
  --ink-muted:#9DB0CE;    /* muted text on navy (wm-text, dt labels in a navy header) */

  /* --- surfaces: the v13 dark palette, re-derived as a navy family --- */
  --bg:#0B1630; --chrome:#101D3B; --panel:#172A52; --panel-2:#1B3060; --line:#2B4272;
  --text:#E3EAF6; --muted:#9DB0CE;
  --accent:#6FA0F0; --accent-text:#0B1630; --accent-hover:#86AFF4;
  --accent-dim:rgba(111,160,240,.14);
  --accent-line:rgba(111,160,240,.42);
  --accent-hi:rgba(111,160,240,.26);

  /* --- meaning: never re-used for decoration --- */
  --target:#FF4F92;                            /* "this one" — find target, badges, contractor work */
  --good:#3DDC84; --warn:#FFB648; --bad:#FF7373; /* repaired / acknowledged / open */

  /* --- the warm call to action, site-style. ONLY the sign-in button and
     the hub tile icon on hover. Never a state: --warn is the amber that
     means "acknowledged", this is the orange that means "press here". --- */
  --cta:#F58A2C; --cta-text:#140A00; --cta-hover:#FF9A45; --cta-dim:rgba(245,138,44,.16);

  /* --- the map keeps its field-tested marker colours (v13). The pins sit on
     the coloured floor plan, not on the app's surfaces, so they do not
     follow the accent. --- */
  --pin:#35c2ff;
  /* the job colours on a pin (D74) — the same in both themes, never the
     theme's warn/bad (light warn is a brown, and the owner wants orange) */
  --pin-job:#FF9800;
  --pin-safety:#E53935;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);

  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px; --r-btn:8px;
  --shadow:0 6px 24px rgba(3,8,20,.55);
  --shadow-sm:0 2px 10px rgba(3,8,20,.4);
  --tap:44px;                       /* minimum touch target */

  /* The WrenchUr dicing mark, shown on the light disc of every wordmark
     (.wm-mark in screens.css). The demo build injected it as a data URL;
     the real app serves the file. */
  --logo:url("/icons/wrenchur-logo.png");

  /* The starburst (tools/starburst.mjs): seven slim swept rays around an open
     centre. WRITTEN BY tools/generate-motif.mjs from the same geometry as the
     badge, the logo and the icons — do not hand-edit the URI. Used as a CSS
     mask so it takes its colour from a token (--motif-ink) and can be laid
     over any surface at a few percent opacity (.motif in screens.css). Never
     on the map screen. */
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='%23000'%3E%3Cpath d='M237 184L275 184L282 20Z'/%3E%3Cpath d='M300.4 196.3L324.1 226L456.7 129.2Z'/%3E%3Cpath d='M330.4 253.5L322 290.5L480.3 333.9Z'/%3E%3Cpath d='M304.4 312.6L270.1 329.1L335 479.9Z'/%3E%3Cpath d='M241.9 329.1L207.6 312.6L130.2 457.3Z'/%3E%3Cpath d='M190 290.5L181.6 253.5L20.1 283.2Z'/%3E%3Cpath d='M187.9 226L211.6 196.3L87.7 88.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --motif-ink:var(--brand-lt);
  --glow:rgba(111,160,240,.20);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

html,body{
  margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family:var(--sans); overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

body{display:flex; flex-direction:column;}

/* screens ---------------------------------------------------------------- */
.screen{display:none; flex:1; min-height:0;}
.screen.active{display:flex; flex-direction:column;}

/* typography ------------------------------------------------------------- */
h1{font-size:26px; line-height:1.15; margin:0 0 8px; letter-spacing:-.02em;}
h2{font-size:19px; margin:0 0 6px; letter-spacing:-.01em;}
/* section headings: uppercase with tracking in the brand blue — the site's
   bold-heading feel. Light mode's --accent is the logo blue itself. */
h3{font-size:14px; margin:18px 0 6px; color:var(--accent);
   text-transform:uppercase; letter-spacing:.1em; font-weight:700;}
p{margin:0 0 14px; line-height:1.55;}
.sub{color:var(--muted); font-size:13.5px; line-height:1.5;}
.mono{font-family:var(--mono);}

/* buttons ---------------------------------------------------------------- */
/* Rounded rectangles, as the site uses. Default and .ghost are outlined;
   .primary is filled with the accent; .cta is the one warm button. */
button{
  font-family:inherit; font-size:16px; min-height:var(--tap);
  padding:12px 16px; border-radius:var(--r-btn);
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  cursor:pointer; transition:background .12s, border-color .12s, transform .06s;
}
button:active{transform:scale(.985);}
button:hover:not(:disabled){background:var(--panel-2);}
button:disabled{opacity:.45; cursor:default;}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

button.primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-text); font-weight:650;
}
button.primary:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover);}
button.cta{
  background:var(--cta); border-color:var(--cta); color:var(--cta-text); font-weight:700;
  letter-spacing:.01em;
}
button.cta:hover:not(:disabled){background:var(--cta-hover); border-color:var(--cta-hover);}
button.danger{color:var(--bad); border-color:rgba(255,115,115,.45);}
button.ghost{background:transparent;}
button.ghost:hover:not(:disabled){background:var(--panel);}
button.small{min-height:36px; padding:7px 12px; font-size:14px; border-radius:var(--r-btn);}
button.block{width:100%;}

.btncol{display:flex; flex-direction:column; gap:9px;}
.btnrow{display:flex; gap:9px;}
.btnrow > *{flex:1;}

/* inputs ----------------------------------------------------------------- */
input,textarea,select{
  width:100%; font-family:inherit; font-size:16px;   /* 16px stops iOS zoom-on-focus */
  padding:12px 13px; border-radius:var(--r-btn);
  background:var(--chrome); border:1px solid var(--line); color:var(--text);
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
}
/* a password field with its eye (owner, 2026-09-12): the field keeps its
   width and padding, the small button sits inside the right edge and says
   Show or Hide - a word, never just a glyph. Its own :active keeps the
   vertical centring the shell's button:active transform would otherwise
   drop (the pinned-transform trap, CLAUDE.md). */
.pw{position:relative;}
.pw input{padding-right:92px;}
.pw .pw-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:auto; min-height:0; height:32px; padding:0 10px; font-size:13px; line-height:1;
  margin:0; white-space:nowrap; color:var(--muted); background:transparent;}
.pw .pw-eye:hover:not(:disabled){color:var(--text); background:var(--panel);}
.pw .pw-eye:active{transform:translateY(-50%) scale(.985);}
.pw .pw-eye[aria-pressed="true"]{color:var(--text); border-color:var(--accent);}
textarea{min-height:96px; resize:vertical; line-height:1.5;}
label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px;}

/* surfaces --------------------------------------------------------------- */
.card{
  background:var(--chrome); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px;
}
.pad{padding:16px;}
.scroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* top bar ---------------------------------------------------------------- */
/* Navy in both themes — the site's navigation bar. White wordmark and
   title, buttons outlined in the light WrenchUr blue. The one place the
   light theme and the dark theme look the same, so the eye has an anchor. */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:calc(var(--sat) + 10px) 14px 10px;
  background:var(--brand-ink); color:#fff;
  border-bottom:1px solid rgba(111,160,240,.4);
  position:sticky; top:0; z-index:20;
}
.topbar h2{flex:1; margin:0; font-size:17px; color:#fff; min-width:0;}
/* the short brand rule under the module title (the site's bold headings) */
#modTitle::after{
  content:''; display:block; width:26px; height:3px; margin-top:4px;
  border-radius:2px; background:var(--brand-lt);
}
#modTitle:empty::after{display:none;}
.topbar button{
  min-height:36px; padding:7px 12px; font-size:14px; white-space:nowrap;
  background:rgba(255,255,255,.06); border-color:var(--brand-lt); color:#fff;
}
.topbar button:hover:not(:disabled){background:rgba(255,255,255,.14);}
.topbar button.ghost{background:transparent;}
.topbar button.primary{background:var(--brand-lt); border-color:var(--brand-lt); color:var(--brand-ink);}
.topbar button.primary:hover:not(:disabled){background:#8DBAF7; border-color:#8DBAF7;}
.topbar button:focus-visible{outline-color:#fff;}
.topbar .pill{background:rgba(255,255,255,.06); border-color:var(--brand-lt); color:#fff;
  min-width:0; max-width:42vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; line-height:1.5;}
.topbar .pill.accent{color:var(--brand-lt);}
.topbar .pill.warn{color:var(--warn); border-color:var(--warn);}
.topbar .pill.bad{color:var(--bad); border-color:var(--bad);}
.topbar .pill.good{color:var(--good); border-color:var(--good);}
.topbar .wm-text{color:var(--ink-muted);}
.topbar .wm-text b{color:#fff;}
/* phones: the mark stays, the wordmark text goes, so "who is signed in" fits */
@media (max-width:480px){
  .topbar .wm-text{display:none;}
  .topbar .pill{max-width:none; flex:1 1 auto;}
  .topbar button{flex:none;}
  /* the hub bar can carry four buttons (Full screen, Notifications, Light,
     Sign out); on a phone they flow to a second line instead of clipping */
  #screen-hub .topbar{flex-wrap:wrap; row-gap:8px;}
}
/* A tile's bar on a phone (owner's first phone test, 2026-09-08: the tile's
   own buttons stacked down the middle of the bar over the title and the
   Light button fell off the edge). First line: Menu and the title. Every
   other button — the tile's own actions, Full screen, Light — flows onto
   the lines below, wrapping as buttons, never over the title. */
@media (max-width:600px){
  #modBar{flex-wrap:wrap; row-gap:8px;}
  #modBar h2{flex:1 1 auto;}
  /* a full-width break after the title: everything ordered after it starts a new line */
  #modBar::after{content:''; flex:1 0 100%; height:0; order:5;}
  #modActions{display:contents;}
  #modActions > *, #modBar [data-fullscreen-toggle], #modBar [data-theme-toggle]{order:10; flex:none;}
}

/* badges / pills --------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--r-pill);
  font-size:12px; font-family:var(--mono); border:1px solid var(--line);
  background:var(--panel); color:var(--muted);
}
.pill.accent{color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim);}
.pill.warn{color:var(--warn); border-color:rgba(255,182,72,.45);}
.pill.bad{color:var(--bad); border-color:rgba(255,115,115,.45);}
.pill.good{color:var(--good); border-color:rgba(61,220,132,.45);}

.badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill);
  /* the deep target pink: white digits read at 5.5:1 (QA audit — the light
     pink gave 3.1:1); a lighter ring keeps the "this one" colour family */
  background:#C81058; border:1.5px solid var(--target); color:#fff; font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* toast ------------------------------------------------------------------ */
#toast{
  position:fixed; left:50%; bottom:calc(var(--sab) + 24px); transform:translateX(-50%);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 18px; font-size:14px; box-shadow:var(--shadow);
  z-index:100; opacity:0; pointer-events:none; transition:opacity .2s;
  max-width:calc(100vw - 32px); text-align:center;
}
#toast.show{opacity:1;}

/* modal ------------------------------------------------------------------ */
.modal{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(3,8,20,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal .card{width:100%; max-width:420px; box-shadow:var(--shadow);}

/* utility ---------------------------------------------------------------- */
.hidden{display:none !important;}
.spacer{flex:1;}
.center{text-align:center;}
.stack{display:flex; flex-direction:column; gap:12px;}
.muted{color:var(--muted);}
.err{color:var(--bad);} .ok{color:var(--good);} .warnc{color:var(--warn);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* Print (plan item L, 2026-09-12): what is on screen is the sheet - the bar,
   the toast and any modal are not, and a scrolling pane prints whole. */
@media print{
  .topbar, #toast, .modal{display:none !important;}
  .scroll{overflow:visible !important; height:auto !important; max-height:none !important;}
  body{background:#fff; color:#000;}
}