:root {
  /* Primaries carry the interface */
  --fort-navy: #000C55;
  --fort-blue: #2655E7;
  --fort-black: #131313;
  --fort-white: #FFFFFF;
  /* Secondaries: highlighting information only (band states, warnings, confirmations) */
  --fort-navy-deep: #0E1E40;
  --fort-slate: #7585B2;
  --fort-mist: #DEE5F0;
  --fort-green: #30A86E;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("brand/RedHatDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("brand/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("brand/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fort-black);
  background: var(--fort-white);
}

/* Brand guide limits headline colour to black, white or FORT navy: never blue. */
h1, h2, h3 {
  font-family: "Red Hat Display", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fort-navy);
}

a { color: var(--fort-navy); text-decoration: underline; }

.site-header {
  display: flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 1rem;
  background: var(--fort-navy);
}

.site-logo {
  height: 2.75rem;
  width: auto;
}

/* Entry screens (sign in, register) show the vertical lockup instead of the
   slim bar. The lockup is 57% diamond, then a wordmark at 17% of its height
   and a tagline at 15%: at the 2.75rem bar height those read 9px and 8px and
   turn to mush, so it is given 7rem here, where there is room for it. */
.brand-panel {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 1.5rem;
  background: var(--fort-navy);
}

.brand-lockup {
  height: 7rem;
  width: auto;
}

/* The lockup is a link on the entry screens, so it needs a visible focus ring
   on the navy panel and must not add an inline-box gap under the image. */
.brand-home {
  display: inline-flex;
  border-radius: 0.25rem;
}

.brand-home:focus-visible {
  outline: 2px solid var(--fort-white);
  outline-offset: 4px;
}

/* The "already have an account" line under an entry form. */
.entry-alt {
  margin-top: 1.25rem;
  text-align: center;
}

/* Single content column, capped for phones held in one hand */
.column {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 6rem; /* room for the bottom-anchored action bar */
}

/* A screen that is a table, reviewed on a laptop: the same column, wider. */
.column-wide { max-width: 72rem; }

/* Primary actions sit at the bottom, under the thumb */
.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--fort-white);
  border-top: 1px solid var(--fort-mist);
}

.actions-inner {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  gap: 0.75rem;
}

.btn {
  flex: 1;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  font: 600 1rem/1.2 "Inter", system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--fort-white);
  background: var(--fort-blue);
}

.btn:focus-visible { outline: 3px solid var(--fort-navy); outline-offset: 2px; }

.form-stack { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 6rem; }
.form-stack label { font-weight: 600; margin-top: 0.5rem; }
.form-stack input,
.form-stack select {
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.5rem;
  font: 1rem/1.2 "Inter", system-ui, sans-serif;
}
.form-stack.form-compact { padding-bottom: 0.5rem; }
.form-error { color: #b00020; font-weight: 600; }

/* Admin: accounts */
.subnav { display: flex; gap: 1.25rem; margin-bottom: 0.5rem; }
.subnav a[aria-current="page"] { font-weight: 600; }

.card-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.card { padding: 0.75rem 1rem; border: 1px solid var(--fort-mist); border-radius: 0.5rem; }
.card p { margin: 0; }
.card-title { font-weight: 600; }
.card-meta { color: var(--fort-slate); overflow-wrap: anywhere; }

/* A real table, wrapped so a narrow screen scrolls the table, not the page. */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--fort-mist); border-radius: 0.5rem; }
.data-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fort-mist); }
.data-table th { background: var(--fort-mist); color: var(--fort-navy); font-weight: 600; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f5f7fb; }
.data-table td { overflow-wrap: anywhere; }
.data-table .col-nowrap { white-space: nowrap; overflow-wrap: normal; }
.data-table td:first-child { font-weight: 600; min-width: 9rem; }
.data-table td:first-child .status { display: block; font-weight: 600; }

.row-form { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.row-form select {
  flex: 1;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.5rem;
  font: 1rem/1.2 "Inter", system-ui, sans-serif;
  background: var(--fort-white);
}

.btn-secondary { color: var(--fort-navy); background: var(--fort-mist); }
.btn-danger { color: var(--fort-white); background: #b00020; }
.row-form .btn { flex: 1; }

.status { font-size: 0.875rem; font-weight: 600; }
.status-active { color: var(--fort-green); }
.status-pending { color: var(--fort-navy); }
.status-disabled { color: #b00020; }

.link-box {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--fort-mist);
  overflow-wrap: anywhere;
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Home screen: one tall tap target per destination, reachable one-handed. */
.nav-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }

.nav-card {
  display: block;
  padding: 0.875rem 1rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.625rem;
  text-decoration: none;
  color: var(--fort-black);
}

.nav-card:focus-visible { outline: 3px solid var(--fort-navy); outline-offset: 2px; }

.nav-label { display: block; font-weight: 600; color: var(--fort-navy); }
.nav-hint { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--fort-slate); }

.muted { color: var(--fort-slate); }

/* Signed-in header: the mark links home, with an explicit text link beside it
   so the way back is obvious on a phone and not just an icon convention. */
.site-home { display: flex; align-items: center; text-decoration: none; }

.site-nav-link {
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  color: var(--fort-white);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0.5rem;
}

.site-home:focus-visible,
.site-nav-link:focus-visible { outline: 3px solid var(--fort-white); outline-offset: 2px; }

/* Room settings: single column, one field per row on a phone. */
.day-title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.block-title { margin: 1rem 0 0.25rem; font-size: 1rem; }
.time-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.time-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 8rem; }
.time-field-wide { flex-basis: 100%; }
.time-field label { font-weight: 600; font-size: 0.875rem; }
.time-field input {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fort-slate);
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.time-form .btn { flex-basis: 100%; }
.blocked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.blocked-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.blocked-item form { margin: 0; }

/* Booking screen: free bands, longest first, each one tappable in place. */
.band-list { margin-bottom: 1rem; }

.band[data-bookable="false"] {
  background: var(--fort-mist);
  color: var(--fort-slate);
}
.band[data-bookable="false"] .card-title { color: var(--fort-slate); }

/* <details> rather than a script, so a band still opens if booking.js fails. */
.band-open > summary {
  cursor: pointer;
  padding: 0.25rem 0;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  color: var(--fort-navy);
}
.band-open > summary:focus-visible { outline: 3px solid var(--fort-navy); outline-offset: 2px; }

.band-form { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.band-form label { font-weight: 600; font-size: 0.875rem; margin-top: 0.5rem; }
.band-form input[type="text"],
.band-form input[type="number"] {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fort-slate);
  border-radius: 0.5rem;
  width: 100%;
}
.band-form .time-form { margin-top: 0.25rem; }
.band-form .btn { margin-top: 1rem; flex: 0 0 auto; }

/* The live line the duration fields drive; it reads correctly before any JS runs. */
.band-confirm {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--fort-mist);
  font-weight: 600;
  color: var(--fort-navy);
}

.booked-note {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--fort-mist);
  font-weight: 600;
  color: var(--fort-green);
}

/* Day grid: three row types that differ by more than colour alone. */
.grid-list, .booking-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.grid-list li, .my-booking { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.grid-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.grid-meta { color: var(--fort-slate); }
.grid-list .booking, .my-booking { border: 1px solid var(--fort-mist); border-left: 0.375rem solid var(--fort-green); }
.grid-list .blocked { background: var(--fort-mist); border: 1px solid var(--fort-slate); font-style: italic; }
.grid-list .free { border: 1px dashed var(--fort-mist); color: var(--fort-slate); }

/* --- digital business card (app/cards.py). No inline styles anywhere: the CSP
   is style-src 'self'. --- */
/* The public card page and its present screen. Mobile first: the card is the
   whole viewport on a phone, and a centred 460px sheet on a desktop. Tokens are
   the palette at the top of this file; nothing here is a new colour. */
.bc-body { background: var(--fort-white); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.bc-card { max-width: 460px; margin: 0 auto; min-height: 100vh; background: var(--fort-white); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 480px) {
  .bc-body { background: var(--fort-mist); padding: 1.5rem 1rem 2.5rem; }
  .bc-card { min-height: 0; border-radius: 1.125rem; overflow: hidden; box-shadow: 0 0.5rem 2.5rem rgba(0, 12, 85, 0.18); }
}
.bc-card a:focus-visible, .bc-card button:focus-visible, .bc-card input:focus-visible, .bc-card textarea:focus-visible { outline: 3px solid var(--fort-blue); outline-offset: 2px; }

/* Hero: the 45 degree brand pattern, a soft highlight, then navy to blue on a diagonal. */
.bc-hero { position: relative; margin-bottom: 3.75rem; }
.bc-hero-band {
  position: relative;
  display: flex;
  align-items: center;
  height: 8.25rem;
  padding: 1rem 1.25rem 3rem;
  background-color: var(--fort-navy);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 26px),
    radial-gradient(120% 90% at 72% 8%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--fort-navy) 12%, var(--fort-blue) 125%);
}
.bc-logo { height: 3.25rem; width: auto; max-width: 70%; }
.bc-present-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--fort-white);
}
.bc-present-toggle .icon { width: 1.125rem; height: 1.125rem; }
.bc-avatar-wrap { position: absolute; left: 50%; bottom: -3.625rem; transform: translateX(-50%); }
.bc-avatar {
  display: block;
  width: 7.25rem;
  height: 7.25rem;
  border: 4px solid var(--fort-white);
  border-radius: 50%;
  object-fit: cover;
  background: var(--fort-white);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.16);
}
.bc-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fort-navy);
  color: var(--fort-white);
  font-family: "Red Hat Display", Helvetica, Arial, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
}

.bc-identity { padding: 0 1.5rem; text-align: center; }
.bc-name { margin: 0; color: var(--fort-black); font-size: 1.5rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bc-title { margin: 0.25rem 0 0; color: var(--fort-slate); font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.bc-org { margin: 0.125rem 0 0; color: var(--fort-slate); font-size: 0.8125rem; overflow-wrap: anywhere; }

.bc-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin: 1.25rem 1.5rem 0;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--fort-blue);
  color: var(--fort-white);
  font-weight: 600;
  text-decoration: none;
}
.bc-save .icon { width: 1.25rem; height: 1.25rem; }
.bc-save:active { transform: translateY(1px); }

.bc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; padding: 1.25rem 1.25rem 0; }
.bc-action {
  flex: 1 1 4.25rem;
  max-width: 6.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.25rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.875rem;
  color: var(--fort-black);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.bc-action .icon { width: 1.375rem; height: 1.375rem; color: var(--fort-blue); }

.bc-details { padding: 1.25rem 1.5rem 0; }
.bc-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--fort-mist);
  color: var(--fort-black);
  text-decoration: none;
}
.bc-detail:last-child { border-bottom: 0; }
.bc-detail-label { flex: 0 0 auto; color: var(--fort-slate); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.bc-detail-value { min-width: 0; font-size: 0.875rem; text-align: right; overflow-wrap: anywhere; }

.bc-socials { display: flex; justify-content: center; gap: 0.75rem; padding: 1.25rem 1.5rem 0; }
.bc-social { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--fort-navy); color: var(--fort-white); }
.bc-social .icon { width: 1.125rem; height: 1.125rem; }

.bc-share { margin: 1.75rem 1.5rem 0; padding: 1.25rem; border: 1px solid var(--fort-mist); border-radius: 1.125rem; scroll-margin-top: 1rem; }
.bc-share-title { margin: 0 0 0.25rem; color: var(--fort-black); font-size: 0.9375rem; }
.bc-share-hint { margin: 0 0 1rem; color: var(--fort-slate); font-size: 0.75rem; }
.bc-share-error { margin: 0 0 1rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--fort-mist); border-left: 0.375rem solid #b00020; color: var(--fort-black); font-size: 0.875rem; font-weight: 600; }
.bc-thanks { margin: 0; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--fort-mist); border-left: 0.375rem solid var(--fort-green); color: var(--fort-black); font-size: 0.875rem; font-weight: 600; }
.bc-form { display: flex; flex-direction: column; }
.bc-form label { margin: 0 0 0.25rem; color: var(--fort-slate); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.bc-form input[type="text"], .bc-form input[type="email"], .bc-form input[type="tel"], .bc-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 0.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.625rem;
  background: var(--fort-white);
  color: var(--fort-black);
  font: inherit;
  font-size: 1rem; /* 16px: iOS Safari zooms the page on focus below this */
}
.bc-form textarea { min-height: 5.25rem; resize: vertical; }
.bc-form ::placeholder { color: var(--fort-slate); opacity: 1; }
.bc-send { min-height: 3rem; border: 0; border-radius: 999px; background: var(--fort-blue); color: var(--fort-white); font: 600 0.9375rem/1.2 "Inter", system-ui, sans-serif; cursor: pointer; }
/* The honeypot is moved off-screen rather than display:none, which bots detect. */
.bc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bc-qr { padding: 1.75rem 1.5rem 0; text-align: center; }
.bc-qr img { width: 10.5rem; height: 10.5rem; padding: 0.5rem; border: 1px solid var(--fort-mist); border-radius: 0.75rem; background: var(--fort-white); }
.bc-qr-hint { margin: 0.625rem 0 0; color: var(--fort-slate); font-size: 0.75rem; }
.bc-footer { padding: 1.25rem 1.5rem 0.5rem; text-align: center; color: var(--fort-slate); font-size: 0.75rem; font-weight: 600; }
.bc-footer p { margin: 0; }
.bc-footer .bc-footer-line { margin-top: 0.25rem; font-weight: 400; overflow-wrap: anywhere; }

.bc-present { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.75rem 3rem; text-align: center; }
.bc-present-name { margin: 0; color: var(--fort-black); font-family: "Red Hat Display", Helvetica, Arial, sans-serif; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.bc-present-title { margin: 0.25rem 0 0; color: var(--fort-slate); font-size: 0.9375rem; font-weight: 600; }
.bc-present-qr { margin: 2rem 0 0; padding: 0.875rem; border-radius: 1.25rem; background: var(--fort-white); box-shadow: 0 0.5rem 1.875rem rgba(0, 12, 85, 0.16); }
.bc-present-qr img { display: block; width: min(15rem, 62vw); height: auto; aspect-ratio: 1; }
.bc-present-hint { margin: 1.125rem 0 0; color: var(--fort-slate); font-size: 0.875rem; }
.bc-present-link { margin-top: 1.75rem; color: var(--fort-blue); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }

.qr-panel { text-align: center; margin: 1rem 0; }
.qr-image { display: block; margin: 0.5rem auto; width: min(100%, 20rem); height: auto; image-rendering: pixelated; background: var(--fort-white); }
.notice { padding: 0.75rem 1rem; border-left: 0.375rem solid var(--fort-slate); background: var(--fort-mist); border-radius: 0.5rem; }
.form-ok { color: var(--fort-green); font-weight: 600; }
/* The current photo on the admin card editor, so the admin sees what a new file replaces. */
.card-photo-preview { display: block; width: 8rem; height: 8rem; object-fit: cover; border-radius: 0.5rem; }
.check-row { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 400; }
.form-stack .check-row input { width: auto; flex: 0 0 auto; margin-top: 0.25rem; }

/* Admin: cards */
.summary { font-size: 1.25rem; font-weight: 600; margin: 0.5rem 0; }
.card-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 0.75rem; }
.card-links .btn { flex: 0 0 auto; }

/* Leads (app/leads.py) */
.form-stack textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fort-mist);
  border-radius: 0.5rem;
  font: 1rem/1.4 "Inter", system-ui, sans-serif;
  resize: vertical;
}
.lead-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.card-title a { color: inherit; }

/* The scanned business card shown beside a lead's details. */
.lead-card-photo { display: block; width: 100%; max-width: 30rem; height: auto; border: 1px solid var(--fort-mist); border-radius: 0.5rem; }

/* The card just scanned, above the review form it filled in. Larger than the detail
   page's thumbnail rule needs: a phone number has to be readable off it. */
.scan-review-photo { margin: 0.75rem 0 1rem; }
.scan-review-photo .lead-card-photo { max-width: 100%; }
.scan-review-photo p { margin: 0.25rem 0 0; }