/* ── McKinneyTech Shared Base Styles ── */
/* FILE: shared/base.css | VERSION: 2026-07-11.2 */
/*
  Universal, theme-independent base styling — centralized 11 July 2026
  after a systematic duplication search. Two rounds: the first five
  rules were found identical across all 14 real pages; everything below
  them was found identical across specific pairs of related pages
  (confirmed, in each case, to not be defined anywhere else on the
  site), added the same night once the search widened.

  Deliberately separate from shared/theme.css, which has its own
  distinct, narrower purpose (body.theme-light color overrides only —
  see that file's own header comment). Page-specific component styles
  not confirmed identical elsewhere still belong in that page's own
  <style> block, same as before.

  Usage: <link rel="stylesheet" href="/shared/base.css"> (portal pages,
  absolute) or href="./shared/base.css" (site-root pages, relative).
*/

body { font-family: 'Inter', sans-serif; }
/* ── #203: TWO mono voices, defined ONCE for the whole site (Matt, 10 Aug) ──
   Share Tech Mono is the BRAND voice — the wordmark, the page eyebrows, the
   screensaver. It has a single weight and thin square strokes, which is exactly
   why it was hard to read wherever it was doing DATA work: numbers, dates, ids.
   Data now speaks in the device's own text-grade monospace with a real semibold
   and lined-up digits. Any future uplift to either voice is an edit HERE. */
.font-mono-tech { font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', 'SF Mono', Consolas, monospace; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.font-brand-mono { font-family: 'Share Tech Mono', monospace; }
/* #203: THE status chip — one definition for the fifteen pages that each carried
   their own drifting copy (0.06em vs 0.08em tracking, wrap vs nowrap, all in
   Share Tech Mono at 0.6rem). The st-* colour grammar stays with each page.
   font-family is explicit so a chip beside a mono number never inherits it. */
.status-chip { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 0.3rem; border: 1px solid; white-space: nowrap; }
.section-heading::after { content: ''; display: block; width: 48px; height: 3px; background: #3b82f6; border-radius: 2px; margin: 10px auto 0; }
.circuit-card { position: relative; }
.circuit-card::before { content: ''; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-top: 1.5px solid #3b82f6; border-right: 1.5px solid #3b82f6; opacity: 0.3; border-radius: 0 4px 0 0; }
*, *::before, *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }

/* The following were each confirmed identical across exactly one pair of
   pages, and confirmed to not be defined anywhere else — safe to
   centralize here since there's no risk of a third page silently
   inheriting styling it never asked for. Added 11 July 2026 as the
   second pass of the same duplication search. */

/* index.html + remote-support.html (both public pages) */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 50; overflow-y: auto; }
.modal-overlay.active { display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
.step-connector { width: 2px; height: 2rem; background: #334155; margin: 0 auto; }
body.theme-light .step-connector { background: #cbd5e1 !important; }
body.theme-light .modal-overlay { background: rgba(0,0,0,0.5) !important; }

/* remote-support.html + portal/remote-management */
.agent-card { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.agent-card:hover { border-color: #3b82f6 !important; box-shadow: 0 0 24px rgba(59,130,246,0.18); transform: translateY(-2px); }

/* portal/index + portal/site-admin (the two dashboard-style pages) */
body.theme-light .dash-card { background: #f8fafc !important; border-color: #e2e8f0 !important; }
body.theme-light .dash-card p { color: #475569 !important; }
.dash-card { transition: border-color 0.2s ease, transform 0.15s ease; }
.dash-card.is-live:hover { border-color: #3b82f6; transform: translateY(-2px); }
.dash-card.is-soon { opacity: 0.55; cursor: not-allowed; }

/* portal/office + portal/site-admin/admin-tools (the two tile-grid pages) */
.app-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.app-card:hover { border-color: #3b82f6 !important; box-shadow: 0 0 24px rgba(59,130,246,0.18); transform: translateY(-2px); }
.app-card:active { transform: translateY(0); }

/* ── The row-hover engine (Matt, 31 July): the users-grid tint, centralised. Put
   .mck-rows on any list container and its DIRECT children glow on mouse-over — the
   same quiet blue at 6%%, with a soft transition so the eye tracks the pointer.
   Touch screens skip it (a sticky glow after a tap reads as a stuck state). */
.mck-rows > * { transition: background-color 0.15s ease; }
@media (hover: hover) {
  .mck-rows > *:hover { background: rgba(59, 130, 246, 0.06); }
}
/* Single-element flavour — the same tint for one-off hoverable rows. */
@media (hover: hover) {
  .mck-hover { transition: background-color 0.15s ease; }
  .mck-hover:hover { background: rgba(59, 130, 246, 0.06); }
}
/* Table flavour — the users grid can retire its private rule onto this. */
@media (hover: hover) {
  .mck-rows-table tbody tr { transition: background-color 0.15s ease; }
  .mck-rows-table tbody tr:hover { background: rgba(59, 130, 246, 0.06); }
}


/* ── #146b: ADDRESS ACTIONS LIVE INSIDE THE FIELD ─────────────────────────────────
   Owned by shared/mck-map-pick.js, so every address input on both portals gets the
   same two glyphs from one place. The input is padded to the width of the bar; the
   bar is centred on the first line so a multi-line textarea keeps them where the eye
   expects rather than floating beside the middle of the text. */
.mck-addr-wrap { position: relative; display: block; }
.mck-addr-acts { position: absolute; top: 6px; right: 6px; display: inline-flex; gap: 2px; z-index: 2; }
.mck-addr-padded { padding-right: 4.2rem !important; }
.mck-addr-act { width: 1.55rem; height: 1.55rem; border-radius: 0.3rem; border: 1px solid transparent;
  background: transparent; color: #60a5fa; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.78rem; line-height: 1; }
.mck-addr-act:hover { color: #93c5fd; border-color: #334155; background: rgba(59,130,246,0.10); }
.mck-addr-act:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
body.theme-light .mck-addr-act { color: #2563eb; }
body.theme-light .mck-addr-act:hover { color: #1d4ed8; border-color: #cbd5e1; background: rgba(37,99,235,0.08); }
/* The lock-until-edit pencil owns the same corner on a populated field — sit beside it,
   never on top of it. The wrapper nests INSIDE .cf-editwrap (we always wrap the input
   itself), so this matches whichever order the two were built in. */
.cf-editwrap .mck-addr-acts { right: 30px; }
/* A textarea's glyphs belong on its FIRST line, not floating against a tall box. */
.mck-addr-wrap textarea + .mck-addr-acts { top: 8px; }
/* INLINE: the site-row shape. A normal row under the field, glyphs to the right, so the
   field's own corner belongs to the lock-until-edit pencil alone. */
.mck-addr-inlinewrap { display: block; }
.mck-addr-acts.is-inline { position: static; display: flex; justify-content: flex-end;
  gap: 2px; margin-top: 0.25rem; }