/* WerxFlow look and feel (Stage 6.5). Every colour, size and spacing is a named value in :root,
   so a later change is one edit. The palette pairs are checked for contrast by workflow.tests_style. */

:root {
  /* Palette: the Boat Werx website, with the logo red as the one accent. */
  --navy-deep: #0A2342;      /* header, dark areas */
  --navy-rich: #0D3B6E;      /* headings, links, selected things */
  --navy-tint: #E8EEF6;      /* hover on white buttons */
  --accent: #9B1B2A;         /* logo red: the main action of a page and small highlights */
  --accent-hover: #7E1522;
  --page: #F5F7FA;           /* off-white page background */
  --surface: #FFFFFF;        /* cards and fill-in boxes */
  --surface-quiet: #EEF2F6;  /* table header rows, quiet areas */
  --ink: #1A2633;            /* body text */
  --muted: #4A5868;          /* help text; still dark enough to read */
  --line: #D5DDE5;           /* card borders and dividers */
  --field-border: #7B8DA3;   /* fill-in box border, visible against white */
  --focus: #0D3B6E;
  --focus-ring: rgba(13, 59, 110, .28);
  --disabled-bg: #E4E9EF;
  --disabled-ink: #56636F;

  /* Status colours that carry meaning (kept from Stages 5 and 6). */
  --safety: #D93025;          /* red SAFETY tag, white text */
  --safety-dark: #A50E0E;
  --danger-ink: #B3261E;      /* required mark, field errors, destructive buttons */
  --good: #1E7B34;
  --good-bg: #E6F4EA;
  --good-line: #8CC79B;
  --good-tint: #F0F9F2;
  --warn-bg: #FFF8E1;
  --warn-line: #C79A00;
  --warn-ink: #5C4600;
  --error-bg: #FDECEA;
  --error-ink: #8A1C13;
  --due-grey-bg: #EEF1F3;
  --due-grey-line: #C5CED4;
  --due-grey-ink: #44525C;
  --due-yellow-bg: #FFF3CD;
  --due-yellow-line: #E0C060;
  --due-red-bg: #FDE2E1;
  --due-red-ink: #A50E0E;
  --pretend: #6A1B9A;         /* purple pretend-time bar (testing only) */

  /* Type: Arial-style everywhere. Staff pages 16px; the customer's tablet screens 18px. */
  --font: Arial, Helvetica, sans-serif;
  --text-body: 16px;
  --line-height: 1.5;
  /* The Boat Werx logo lettering (Gutsand Regular, Chris's Envato Elements licence), for the "WerxFlow" title only. */
  --font-title: 'Gutsand', Arial, Helvetica, sans-serif;

  /* Spacing, corners, shadows, widths. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(10, 35, 66, .06), 0 2px 10px rgba(10, 35, 66, .06);
  --touch: 44px;              /* smallest button or control height */
  --field-height: 48px;
  --main-width: 1100px;
}

@font-face { font-family: 'Gutsand'; src: url("fonts/Gutsand.581e9a748d07.woff2") format('woff2'); font-weight: 400;
             font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
body { font-family: var(--font); font-size: var(--text-body); line-height: var(--line-height); margin: 0;
       color: var(--ink); background: var(--page); overflow-wrap: break-word; }
body.customer { --text-body: 18px; }
img { max-width: 100%; }
a { color: var(--navy-rich); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Page frame */
header { background: var(--navy-deep); color: #fff; padding: var(--space-3) var(--space-5); min-height: 64px;
         display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
header .brand { font-weight: 700; font-size: 1.375em; letter-spacing: .01em; color: #fff; text-decoration: none; }
header .who { margin-left: auto; font-size: .9375em; }
header form { display: inline; }
header :focus-visible { outline-color: #fff; }
/* The "WerxFlow" title: the only place the logo lettering is used. */
.title-mark { font-family: var(--font-title); font-weight: 400; font-synthesis: none; letter-spacing: .02em; }
header .brand.title-mark { font-size: 1.625em; font-weight: 400; }
header button { min-height: 40px; padding: var(--space-1) var(--space-4); font-size: .9375em; background: transparent;
                border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
header button:hover { background: rgba(255, 255, 255, .12); }
/* Customer tablet screens: a white bar with the Boat Werx logo instead of the navy staff header. */
header.customer-bar { background: var(--surface); color: var(--navy-deep); border-bottom: 4px solid var(--accent);
                      padding: var(--space-3) var(--space-5); }
header.customer-bar .logo { height: 84px; width: auto; }
header.customer-bar .brand { margin-left: auto; color: var(--navy-deep); }
header.customer-bar :focus-visible { outline-color: var(--focus); }
@media (max-width: 600px) { header.customer-bar .logo { height: 56px; } }
main { max-width: var(--main-width); margin: var(--space-5) auto var(--space-6); padding: 0 var(--space-4); }

/* Type */
h1 { font-size: 1.75em; line-height: 1.25; margin: 0 0 var(--space-4); color: var(--navy-rich); }
legend, h2 { font-size: 1.25em; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-1); padding: 0;
             color: var(--navy-rich); }
h3 { font-size: 1.0625em; color: var(--navy-rich); }
.sro { font-size: 2em; font-weight: 800; letter-spacing: .02em; color: var(--navy-deep); }
.help { color: var(--muted); font-size: .9375em; margin: var(--space-1) 0 0; }
code { font-size: .9375em; }

/* Cards and layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
        padding: 20px var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow); }
@media (max-width: 600px) { .card { padding: var(--space-4); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.actions form { display: flex; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 var(--space-4); }
.grid .wide { grid-column: 1 / -1; }
/* A label that wraps onto two lines pushes its own box down; line the boxes of a row up along the bottom instead. */
.grid > div:not(.has-error) { display: flex; flex-direction: column; justify-content: flex-end; }
fieldset { border: 0; padding: 0; margin: 0; }
/* Keeps a fieldset's title inside its card instead of on the top edge. */
legend { float: left; width: 100%; }
legend ~ * { clear: both; }
.engine { border-top: 1px solid var(--line); padding-top: var(--space-2); margin-top: var(--space-2); }
.divided { margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.scroll-x { overflow-x: auto; }
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.pre-line { white-space: pre-line; }
details > summary { cursor: pointer; min-height: var(--touch); display: list-item; padding: var(--space-2) 0;
                    color: var(--navy-rich); font-weight: 700; }

/* Buttons. Plain buttons are the secondary style (white, navy border); .primary is the one main
   action of a page (logo red); .quiet is a small text action; .danger is for destructive actions. */
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
                  min-height: var(--touch); padding: 10px 20px; font: inherit; font-size: 1em; font-weight: 700;
                  line-height: 1.25; border-radius: var(--radius); border: 1.5px solid var(--navy-rich);
                  background: var(--surface); color: var(--navy-rich); text-decoration: none; text-align: center;
                  cursor: pointer; }
.button:hover, button:hover { background: var(--navy-tint); text-decoration: none; }
.button.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover, button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.danger, button.danger { background: var(--surface); border-color: var(--danger-ink); color: var(--danger-ink); }
.button.danger:hover, button.danger:hover { background: var(--error-bg); }
.button.quiet, button.quiet { background: transparent; border-color: transparent; padding: var(--space-2) var(--space-1);
                              text-decoration: underline; font-weight: 600; }
button:disabled, button:disabled:hover, .button[aria-disabled="true"] {
  background: var(--disabled-bg); border-color: var(--line); color: var(--disabled-ink); cursor: not-allowed; }

/* Fill-in boxes: label above, white, rounded, navy ring when selected. 16px text or larger so an iPad does not zoom. */
label { display: block; font-weight: 700; margin: var(--space-4) 0 6px; }
input, select, textarea { width: 100%; min-height: var(--field-height); font: inherit; font-size: max(16px, 1em);
                          padding: 10px var(--space-3); color: var(--ink); border: 1px solid var(--field-border);
                          border-radius: var(--radius); background: var(--surface); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-rich);
                                            box-shadow: 0 0 0 3px var(--focus-ring); }
input[readonly], textarea[readonly] { background: var(--page); }
input[type=checkbox], input[type=radio] { width: 26px; min-height: 26px; height: 26px; padding: 0; margin: 0 6px 0 0;
                                          vertical-align: middle; accent-color: var(--navy-rich); }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; }
input[type=file] { min-height: 0; border: 0; padding: 0; }
.req { color: var(--danger-ink); }
.field-error { color: var(--danger-ink); font-weight: 600; margin-top: 6px; font-size: .9375em; }
.has-error input, .has-error textarea, .has-error select { border: 2px solid var(--safety); }

/* Messages and banners: same meaning and colours as before, softer shape. */
.msg { padding: 14px var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); }
.msg.success { background: var(--good-bg); border: 1px solid var(--good-line); }
.msg.error, .error-box { background: var(--error-bg); border: 2px solid var(--safety); color: var(--error-ink); font-weight: 600; }
.msg.warning, .msg.info { background: var(--warn-bg); border: 2px solid var(--warn-line); color: var(--warn-ink); font-weight: 600; }
.note { background: var(--warn-bg); border: 1px solid var(--due-yellow-line); }

/* Lists and tables: roomy rows, a quiet header row. */
.row-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.row-link:hover { border-color: var(--navy-rich); }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: var(--space-3) 10px; border-bottom: 1px solid var(--line);
                               vertical-align: top; }
table.list th { background: var(--surface-quiet); color: var(--muted); font-size: .875em; font-weight: 700; }
table.list tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-4); margin: var(--space-2) 0 0; }
dl.facts dt { font-weight: 700; }
dl.facts dd { margin: 0; }
.choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
          border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-2) 0; }
.choice.chosen { border: 2px solid var(--good); background: var(--good-tint); }
.chosen-label { color: var(--good); font-weight: 700; }

/* Tags and badges: pill shape; colours keep their Stage 5 and 6 meaning. */
.tag { display: inline-block; background: var(--due-yellow-bg); color: var(--ink); border: 1px solid var(--due-yellow-line);
       padding: 1px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.6;
       letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
h1 .tag, h2 .tag { font-size: .9375rem; }
.tag.good { background: var(--good-bg); border-color: var(--good-line); }
/* A Yes answer shown as a tag: navy with a ✓ (green is kept for Good and done; red for Service and safety). */
.tag.on { background: var(--navy-rich); border-color: var(--navy-rich); color: #fff; }
.tag.plain { background: var(--surface); border-color: var(--line); color: var(--muted); font-weight: 600; }
/* A chosen option that is a selection, not a result: navy, like the chosen answers on the inspection. */
.choice.picked { border: 2px solid var(--navy-rich); background: var(--navy-tint); }
.picked-label { color: var(--navy-rich); font-weight: 700; }
/* The red safety marker (Stage 5 decision 10). */
.tag.safety { background: var(--safety); border-color: var(--safety-dark); color: #fff; }
/* Boat delivery date badges (Stage 6): grey, then yellow, then red once the date has passed. */
.tag.due.grey { background: var(--due-grey-bg); border-color: var(--due-grey-line); color: var(--due-grey-ink); font-weight: 600; }
.tag.due.yellow { background: var(--due-yellow-bg); border-color: var(--due-yellow-line); }
.tag.due.red { background: var(--due-red-bg); border-color: var(--safety); color: var(--due-red-ink); }

/* Customer tablet: bigger buttons; hand-back screens that cannot be mistaken for a form; the staff exit kept
   small and apart; staff-only password screens marked with a navy band. */
body.customer .button, body.customer button { min-height: 56px; padding: 12px 28px; }
body.customer .actions.main { margin-top: var(--space-5); }
body.customer .actions.main .button, body.customer .actions.main button { min-width: 240px; font-size: 1.1em; }
.handback { text-align: center; padding: var(--space-6) var(--space-5); max-width: 640px; margin: var(--space-6) auto; }
.handback .mark { font-size: 3.5em; line-height: 1; color: var(--navy-rich); margin-bottom: var(--space-3); }
.handback h1 { font-size: 2.25em; }
.handback p { font-size: 1.15em; margin: 0; }
.staff-exit { display: flex; justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-4);
              border-top: 1px dashed var(--line); }
body.customer .staff-exit .button { min-height: var(--touch); padding: 8px 16px; font-size: .875em; font-weight: 600;
                                    border-color: var(--line); color: var(--muted); }
.card.staff-only { border-top: 8px solid var(--navy-deep); }
.card.staff-only h1::before { content: "🔒 "; }

/* Job history: the newest 3 entries, then a fold-out for the rest. The two tables share column widths. */
.history h2 .count { color: var(--muted); font-weight: 600; font-size: .8em; }
.history table.list { table-layout: fixed; }
.history table.list td:first-child, .history table.list th:first-child { width: 9.5rem; }
.history table.list td:nth-child(2), .history table.list th:nth-child(2) { width: 30%; }
.history details { border-top: 1px solid var(--line); }
.history details[open] > summary { border-bottom: 1px solid var(--line); }
.history details .when-open, .history details[open] .when-closed { display: none; }
.history details[open] .when-open { display: inline; }

/* Job page: the top area (who, boat, status, SAFETY, date, Needs attention) and folded finished parts. */
.job-head .sro { line-height: 1.1; }
.job-head h1 { margin: var(--space-1) 0 var(--space-2); }
.job-head .boat { font-size: 1.125em; margin: 0 0 var(--space-2); }
.job-head .facts-line { margin: 0; }
.attention-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.attention-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
               margin-bottom: var(--space-4); box-shadow: var(--shadow); }
details.fold > summary { padding: var(--space-3) var(--space-5); font-size: 1.125em; display: flex; flex-wrap: wrap;
                         align-items: center; gap: var(--space-2); }
details.fold > summary::before { content: "▸"; color: var(--muted); }
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .done { color: var(--good); font-size: .875em; }
details.fold > .fold-body { padding: 0 var(--space-4) var(--space-1); }
details.fold > .fold-body > .card { box-shadow: none; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-5); }
.facts-grid .wide { grid-column: 1 / -1; }
.facts-grid h2 { font-size: 1.0625em; margin-bottom: var(--space-1); }
.facts-grid dl.facts { margin: 0; }

/* Admin check: numbered parts that read top to bottom, with Approve last and set apart. */
main { counter-reset: check-step; }
.step { counter-increment: check-step; }
.step > h2::before { content: counter(check-step); display: inline-flex; align-items: center; justify-content: center;
                     width: 1.6em; height: 1.6em; margin-right: var(--space-2); border-radius: 50%;
                     background: var(--navy-rich); color: #fff; font-size: .8em; vertical-align: .1em; }
section.step { margin-top: var(--space-5); }
section.step > h2 { margin-bottom: var(--space-2); }
.card.step.approve { border: 2px solid var(--accent); margin-top: var(--space-5); }
.card.step.approve > h2::before { background: var(--accent); }
.card.step.approve button.primary { min-height: 56px; padding: 12px 28px; font-size: 1.1em; }

/* Home page: the role's buttons as a tidy grid of equal tiles; reference pages smaller underneath. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3);
         margin: 0 0 var(--space-4); }
.tiles form { display: flex; }
.tiles .tile { width: 100%; min-height: 72px; font-size: 1.0625em; }
.tiles .tile.attention { border-color: var(--warn-line); background: var(--due-yellow-bg); color: var(--ink); }
.tiles .tile.attention:hover { background: var(--warn-bg); }
.tiles.quiet { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tiles.quiet .tile { min-height: var(--touch); font-size: .9375em; font-weight: 600; border-color: var(--line); }

/* Needs attention: the level as a word and a colour; on narrow screens each job becomes a stacked block. */
.level-word { font-weight: 700; }
@media (max-width: 820px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr:first-child { display: none; }
  table.stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 700; font-size: .875em; }
}

/* Sign-in page: the one staff page with the logo. A centred white card on a large, faint, partly cropped logo. */
body.signin { --signin-watermark: .12;  /* Chris chose about 12% on Oct 29, 2026 */ min-height: 100vh; position: relative; overflow-x: hidden; }
/* The whole logo, centred behind the card: about 85% of the page width, smaller if the window is too short for it. */
body.signin::before { content: ""; position: fixed; z-index: 0; pointer-events: none;
                      width: min(85vw, calc(90vh * 900 / 355)); aspect-ratio: 900 / 355;
                      left: 50%; top: 50%; transform: translate(-50%, -50%);
                      background: url("img/boatwerx_logo_bg.81a4d068423e.png") no-repeat center / contain;
                      opacity: var(--signin-watermark); }
body.signin main { position: relative; z-index: 1; min-height: 100vh; margin: 0 auto; display: flex;
                   flex-direction: column; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
.signin-card { width: 100%; max-width: 440px; margin: 0; text-align: center; padding: var(--space-6) var(--space-6) var(--space-5);
               box-shadow: 0 2px 6px rgba(10, 35, 66, .08), 0 12px 32px rgba(10, 35, 66, .12); }
@media (max-width: 600px) { .signin-card { padding: var(--space-5) var(--space-4); } }
.signin-logo { width: 150px; height: auto; display: block; margin: 0 auto var(--space-2); }
.title-mark.signin-title { display: block; font-size: 2.5em; line-height: 1.1; color: var(--navy-deep); }
.signin-card h1 { font-size: 1.125em; color: var(--muted); margin: var(--space-1) 0 var(--space-4); }
.signin-card form { text-align: left; }
.signin-button { width: 100%; margin-top: var(--space-5); min-height: 52px; font-size: 1.0625em; }
.signin-note { margin: var(--space-5) 0 0; font-size: .8125em; color: var(--muted); line-height: 1.45; }
.signin-note code { font-size: 1em; }

.signin-test { margin-top: var(--space-5); }

/* Idle sign-out warning (Stage 7): stays in view at the bottom of any staff page. */
.idle-warning { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 50;
  margin: 0; box-shadow: 0 4px 16px rgba(10, 35, 66, .25); }

/* Pretend-time bar (testing only). */
.pretend { background: var(--pretend); color: #fff; padding: var(--space-2) var(--space-4); font-weight: 600; }
.pretend form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: 0; }
.pretend input { width: auto; min-height: 40px; }
.pretend button { min-height: 40px; padding: 6px 14px; background: #fff; color: var(--pretend); border-color: #fff; }