/* GolfScreen website colour system, observed on golfscreen.com/configure.
   Load after styles.css and each page's inline styles. Local sandbox only. */
@font-face {
  font-family: Archivo;
  src: url('/brand-archivo.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url('/brand-archivo-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --gs-signal: #e2ff3d;
  --gs-signal-dim: #c8e52a;
  --gs-signal-wash: #f7ffd6;
  --gs-neutral-25: #fafafa;
  --gs-neutral-50: #f4f4f3;
  --gs-neutral-100: #eaeae8;
  --gs-neutral-200: #d7d7d4;
  --gs-neutral-300: #b7b7b3;
  --gs-neutral-400: #8e8e8b;
  --gs-neutral-500: #6a6a68;
  --gs-neutral-600: #4a4a48;
  --gs-neutral-700: #2e2e2d;
  --gs-neutral-800: #1a1a19;
  --gs-neutral-900: #0d0d0c;
  --gs-ok: #1f7a4d;
  --gs-ok-wash: #e8f4ee;
  --gs-due: #8a6a00;
  --gs-due-wash: #fbf3d8;
  --gs-over: #b3261e;
  --gs-over-wash: #fbeae9;
  --navy: var(--gs-neutral-900);
  --green: var(--gs-neutral-900);
  --lime: var(--gs-signal);
  --bg: #fff;
  --card: #fff;
  --line: var(--gs-neutral-200);
  --text: #000;
  --muted: var(--gs-neutral-500);
  --amber: var(--gs-due);
  --shadow: 0 4px 18px #00000005;
  font-family: Archivo, Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
}

body { background: #fff; color: #000; }
h1, h2, h3, h4, .brand, .stat-number, .quote-total {
  font-family: Archivo, Arial, Helvetica, sans-serif;
}
.brand small, .count-dot { font-family: Archivo, Arial, Helvetica, sans-serif; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--gs-signal); color: #000; }
:focus-visible { outline: 2px solid var(--gs-neutral-900); outline-offset: 4px; }

/* Brand artwork can replace the temporary letter mark without recolouring the SVG. */
.brand-logo { display: block; width: 132px; height: auto; max-width: 100%; object-fit: contain; }
.brand:has(.brand-logo) { align-items: center; gap: 10px; }
.brand-logo-caption { font-size: 9px; letter-spacing: 1.6px; font-weight: 500; }
.sidebar { background: var(--gs-neutral-900); color: var(--gs-neutral-100); }
.sidebar .brand { color: #fff; }
.brand small, .workspace-label, .profile small, .sidebar-bottom p {
  color: var(--gs-neutral-300);
}
.brand-mark { border-color: var(--gs-neutral-400); color: var(--gs-signal); }
.brand-mark span { background: var(--gs-neutral-900); }
.sandbox-pill { border-color: var(--gs-neutral-600); color: var(--gs-signal); }
.sidebar nav a { color: var(--gs-neutral-200); }
.sidebar nav a:hover { background: var(--gs-neutral-800); color: #fff; }
.sidebar nav a.active { background: var(--gs-signal); color: #000; }
.sidebar nav a.active .nav-count { background: #0000000d; color: #000; }
.connection i { background: var(--gs-signal); }
.profile { border-color: var(--gs-neutral-700); }
.profile .avatar { background: var(--gs-neutral-700); color: var(--gs-signal); }
.avatar { background: var(--gs-neutral-100); color: var(--gs-neutral-700); }
.breadcrumbs span { color: var(--gs-neutral-300); }
.eyebrow { color: var(--gs-neutral-700); }
.date-chip, .stat-top, .pipeline-label { color: var(--gs-neutral-600); }
.button { color: #000; border-color: var(--gs-neutral-200); background: #fff; }
.button:hover:not(:disabled) { background: var(--gs-neutral-50); border-color: var(--gs-neutral-400); }
.button.primary { background: var(--gs-signal); border-color: var(--gs-signal); color: #000; }
.button.primary:hover:not(:disabled) { background: var(--gs-signal-dim); border-color: var(--gs-signal-dim); }
.button.dark { background: var(--gs-neutral-900); border-color: var(--gs-neutral-900); color: #fff; }
.button.dark:hover:not(:disabled) { background: var(--gs-neutral-700); border-color: var(--gs-neutral-700); }
.button.link { color: #000; background: transparent; }
.button.warning { color: var(--gs-due); background: var(--gs-due-wash); border-color: var(--gs-due); }
.button.warning:hover:not(:disabled) { background: var(--gs-due-wash); border-color: var(--gs-due); }

/* Neutral surfaces carry the information; lime marks navigation and primary actions. */
.card, .stat, .message, .photo-steps { border-color: var(--gs-neutral-200); }
.stat-icon, .count-dot, .task-icon, .icon-button {
  background: var(--gs-neutral-50); color: var(--gs-neutral-600);
}
.stat-note, .task-meta, .ref, .back-link, .summary-text, .message-body, .preview-caption,
.field-hint, .evidence, .evidence summary, .timeline-item time, footer,
.callout p, .callout .eyebrow { color: var(--gs-neutral-500); }
.task-row, .data-table td { border-color: var(--gs-neutral-100); }
.task-icon.amber { background: var(--gs-due-wash); color: var(--gs-due); }
.badge { background: var(--gs-neutral-50); color: var(--gs-neutral-700); }
.badge.gray, .badge.blue { background: var(--gs-neutral-50); color: var(--gs-neutral-600); }
.badge.amber { background: var(--gs-due-wash); color: var(--gs-due); }
.badge.red { background: var(--gs-over-wash); color: var(--gs-over); }
.badge.green, .badge.success { background: var(--gs-ok-wash); color: var(--gs-ok); }
.pipeline-track, .progress-steps span { background: var(--gs-neutral-100); }
.pipeline-track i, .progress-steps span.done { background: var(--gs-neutral-900); }
.callout { background: var(--gs-signal-wash); border-color: var(--gs-neutral-200); }
.callout .eyebrow { color: var(--gs-neutral-700); }
.data-table th { background: var(--gs-neutral-25); color: var(--gs-neutral-500); }
.data-table tbody tr:hover { background: var(--gs-neutral-25); }
.row-link:hover strong { color: #000; text-decoration: underline; text-decoration-thickness: 1px; }
.job-tabs button.active { color: #000; border-bottom-color: #000; }
.message.outbound { background: var(--gs-neutral-25); }
.issue { border-color: var(--gs-due); }
.issue strong { color: var(--gs-due); }
.issue p { color: var(--gs-neutral-600); }
.issue.unsupported { border-color: var(--gs-over); }
.issue.unsupported strong { color: var(--gs-over); }
.success-note { background: var(--gs-ok-wash); border-color: #1f7a4d33; color: var(--gs-ok); }
.notice { background: var(--gs-due-wash); border-color: #8a6a0033; color: var(--gs-due); }
label { color: var(--gs-neutral-600); }
input, select, textarea { background: #fff; border-color: var(--gs-neutral-200); color: #000; }
input:focus, select:focus, textarea:focus { outline-color: var(--gs-neutral-900); border-color: var(--gs-neutral-900); }
input::placeholder, textarea::placeholder { color: var(--gs-neutral-400); }
.check-label input, .fixing-choices input { accent-color: var(--gs-neutral-900); }
.evidence blockquote { border-color: var(--gs-neutral-200); }
.edge-editor, .quote-email { background: var(--gs-neutral-25); }
.design-preview, .pdf-preview { background: var(--gs-neutral-50); }
.payment-link, .original-link { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.timeline-item { border-color: var(--gs-neutral-200); }
.timeline-item:before { background: var(--gs-neutral-700); }
dialog { box-shadow: 0 30px 100px #00000033; }
dialog::backdrop { background: #00000066; }
.form-error, .photo-form-error { color: var(--gs-over); }
.inline-error { background: var(--gs-over-wash); border-color: #b3261e33; color: var(--gs-over); }
#toast { background: var(--gs-neutral-900); box-shadow: 0 10px 30px #00000022; }
#toast.error { background: var(--gs-over); }
.attachment-picker { background: var(--gs-neutral-25); border-color: var(--gs-neutral-300); }
.message-attachment>img, .message-attachment .attachment-symbol { background: var(--gs-neutral-50); }
.message-attachment .attachment-symbol, .message-attachment small { color: var(--gs-neutral-600); }
.email-writing-fields input:disabled, .email-writing-fields textarea:disabled {
  background: var(--gs-neutral-50); color: var(--gs-neutral-500);
}

/* Customer builder and optional photo guide use the same website palette. */
.builder-header, .photo-header { background: #fff; border-color: var(--gs-neutral-200); }
.builder-header .brand, .photo-header .brand { color: #000; }
.builder-header .brand small, .photo-header .brand small { color: var(--gs-neutral-500); }
.builder-header .brand-mark, .builder-header .brand-mark span,
.photo-header .brand-mark, .photo-header .brand-mark span { background: #fff; color: #000; }
.screen-stage { background: var(--gs-neutral-50); }
.shot-button { color: var(--gs-neutral-600); }
.shot-button:hover { background: var(--gs-neutral-50); }
.shot-button.active { background: var(--gs-signal-wash); border-color: var(--gs-neutral-300); color: #000; }
.shot-index { background: var(--gs-neutral-100); color: var(--gs-neutral-600); }
.shot-button.active .shot-index { background: var(--gs-signal); color: #000; }
.shot-button.captured .shot-index { background: var(--gs-neutral-900); color: #fff; }
.shot-button small, .other-shots, .framing-caption, .photo-quality, .capture-note,
.photo-progress, .skip-form summary, .photo-footer p, .photo-head-ref,
.photo-summary { color: var(--gs-neutral-500); }
.capture-frame { background: var(--gs-neutral-50); border-color: var(--gs-neutral-200); }
.capture-frame .original-preview { background: var(--gs-neutral-50); }
.guide-label { background: #ffffffed; color: var(--gs-neutral-700); }
.guide-corner { border-color: var(--gs-neutral-400); }
.photo-quality span:before { color: var(--gs-neutral-700); }
.photo-progress .track { background: var(--gs-neutral-100); }
.photo-progress .track i { background: var(--gs-neutral-900); }
.saved-photo-banner { background: var(--gs-ok-wash); border-color: #1f7a4d33; color: var(--gs-ok); }
.photo-skip-state { background: var(--gs-due-wash); color: var(--gs-due); }
.photo-summary { background: var(--gs-neutral-25); }

/* Neutralise only the generated guide illustration; original uploaded photos stay untouched. */
.guide-svg rect[fill], .guide-svg path[fill]:not([fill="none"]) { fill: var(--gs-neutral-100); }
.guide-svg [stroke]:not([stroke="none"]) { stroke: var(--gs-neutral-400); }
.guide-svg [stroke-width="5"], .guide-svg [stroke-width="10"] { stroke: var(--gs-neutral-700); }
.guide-svg circle[fill]:not([fill="none"]) { fill: #eaeae844; }
.guide-svg text { fill: var(--gs-neutral-500); }
.guide-svg rect[fill="#fcfdf8"] { fill: #fff; }
.guide-svg rect[fill="#e5d792"] { fill: var(--gs-signal); }

@media (max-width: 540px) {
  .brand-logo { width: 112px; }
}