/* House-web-design template tokens and tool/card patterns. D7 overrides type sizes
   and adds dark mode. Fonts fall back locally: no third-party font request. */
:root {
  --navy: #002D6A; --yellow: #FFE187; --orange: #FFB765; --white: #FFFFFF;
  --radius-lg: 30px; --radius-md: 20px; --radius-sm: 12px;
  --soft-navy: rgba(0,45,106,0.07); --border-white: rgba(255,255,255,0.3);
  --shadow: 0 18px 50px rgba(0,45,106,0.16);
  --canvas: var(--white); --ink: var(--navy); --panel: var(--white);
  --field: var(--white); --line: var(--navy); --quiet: #475569;
  --neutral: #475569; --good: #17653b; --warn: #805000; --bad: #ad2424; --waiting: #005aa0;
  --primary-bg: var(--navy); --primary-line: var(--navy); --primary-ink: var(--white);
  color-scheme: light; font-size: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #001d45; --ink: #FFFFFF; --panel: #002D6A;
    --field: #001d45; --line: #FFE187; --quiet: #d3ddeb;
    --neutral: #d3ddeb; --good: #9ae6b4; --warn: #FFE187; --bad: #ffb3aa; --waiting: #9ed2ff;
    --primary-bg: var(--yellow); --primary-line: var(--yellow); --primary-ink: var(--navy);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #001d45; --ink: #FFFFFF; --panel: #002D6A;
  --field: #001d45; --line: #FFE187; --quiet: #d3ddeb;
  --neutral: #d3ddeb; --good: #9ae6b4; --warn: #FFE187; --bad: #ffb3aa; --waiting: #9ed2ff;
  --primary-bg: var(--yellow); --primary-line: var(--yellow); --primary-ink: var(--navy);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1rem/1.5 "Inter", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, button, .chip { font-family: "Montserrat", Arial, sans-serif; }
h1, h2 { margin: 0; font-weight: 900; line-height: 1.15; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 7vw, 58px); }
h2 { font-size: clamp(30px, 5vw, 42px); }
h3 { font-size: 22px; margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; font-weight: 700; }
a, summary { cursor: pointer; }
button, input, textarea, select { font: inherit; }
button, a, summary, label, input, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
button { min-height: 48px; padding: 12px 22px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--ink); background: var(--panel); }
button.primary { background: var(--primary-bg); border-color: var(--primary-line); color: var(--primary-ink); }
button:disabled { cursor: not-allowed; opacity: .6; }
.container { width: min(100%, 960px); margin-inline: auto; padding-inline: 18px; min-width: 0; }
.hero { padding: 64px 0 52px; background: var(--navy); color: var(--white); }
.eyebrow { color: var(--yellow); font-weight: 800; letter-spacing: .08em; }
.login-band { background: var(--yellow); padding: 38px 18px 64px; }
.tool-panel { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 26px; max-width: 540px; margin: auto; }
label { display: block; font-weight: 700; }
input:not([type="radio"]):not([type="checkbox"]), textarea { width: 100%; min-width: 0; min-height: 48px; border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--field); color: var(--ink); line-height: 1.5; }
textarea { display: block; resize: none; overflow-y: hidden; }
input[readonly], textarea[readonly] { border-style: dashed; }
#password { margin: 10px 0 22px; }
#login-error { margin: 16px 0 0; color: var(--bad); }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--navy); color: var(--white); border-bottom: 2px solid var(--yellow); }
.topbar .container { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; padding-block: 12px; }
.desk-title { width: 100%; font-family: "Montserrat", Arial, sans-serif; font-size: 26px; font-weight: 900; }
.theme-control, .topbar a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--navy); }
.week-band { background: var(--yellow); color: var(--navy); padding: 28px 0; }
.week-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 16px; }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; border: 2px solid var(--navy); border-radius: 999px; color: var(--navy); background: var(--white); font-weight: 700; text-decoration: none; }
.week-tabs .chip { flex: 0 0 auto; }
.chip[aria-selected="true"], .chip[aria-current="true"] { background: var(--navy); color: var(--white); }
#older-weeks { display: inline-flex; align-items: center; min-height: 48px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.cards-band { padding-block: 40px 64px; }
#week-title { margin-bottom: 28px; }
.record-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.record-card { min-width: 0; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--panel); padding: 20px 16px; overflow-wrap: anywhere; }
.card-head { border-bottom: 2px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }
.card-head time { display: block; font-family: "Montserrat", Arial, sans-serif; font-weight: 800; font-size: 24px; }
.type-chip { display: inline-block; background: var(--yellow); color: var(--navy); border-radius: var(--radius-sm); padding: 6px 12px; margin: 12px 0 4px; font-weight: 700; }
.record-card:nth-child(even) .type-chip { background: var(--orange); }
.card-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.card-links a { display: inline-flex; align-items: center; min-height: 48px; }
[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }
.status { font-size: 20px; font-weight: 700; line-height: 1.5; }
.status-prefix { display: block; font-size: 18px; }
.box-text, .ps-resolved, .import-note, .unsaved-text { white-space: pre-wrap; overflow-wrap: anywhere; }
[data-kind="neutral"] { color: var(--neutral); }
[data-kind="good"] { color: var(--good); }
[data-kind="warn"] { color: var(--warn); }
[data-kind="bad"] { color: var(--bad); }
[data-kind="waiting"] { color: var(--waiting); }
.quiet, .checker, .import-note { color: var(--quiet); }
.field { margin-top: 24px; }
.field > label { margin-bottom: 8px; }
summary { min-height: 48px; padding-block: 12px; font-weight: 700; }
.alternates { padding: 0; list-style: none; }
.alternates a { display: block; padding: 12px; min-height: 48px; border-bottom: 2px solid var(--line); }
fieldset { border: 0; padding: 0; min-width: 0; margin: 24px 0 0; }
legend { font-weight: 700; margin-bottom: 8px; }
.ps-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); }
.ps-choice:has(input:checked) { background: var(--yellow); color: var(--navy); }
.ps-resolved { padding: 16px; border-left: 4px solid var(--orange); margin-top: 16px; }
.ps-own { margin-top: 16px; }
.image-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.image-placeholder { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 12px; max-width: 100%; }
.counters { margin-top: 24px; }
.warnings { padding-left: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions button { flex: 1 1 160px; }
.save-state { display: block; margin-top: 14px; color: var(--quiet); min-height: 1.5em; }
.conflict { padding: 16px; margin-bottom: 24px; border: 2px solid var(--warn); border-radius: var(--radius-sm); }
.unsaved-text { font: inherit; max-width: 100%; }
#spares-heading { margin: 36px 0 24px; }
.banner { background: var(--orange); color: var(--navy); padding: 20px; border-bottom: 2px solid var(--navy); }
.banner p { margin: 0; }
footer { background: var(--yellow); color: var(--navy); padding: 28px 0; }
footer p:last-child { margin-bottom: 0; }
.copy-fallback { position: fixed; left: 0; top: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; padding: 0 !important; pointer-events: none; }
.desk-dialog { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px 20px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--ink); overflow-y: auto; overflow-wrap: anywhere; }
.desk-dialog::backdrop { background: rgba(0, 15, 40, .75); }
.desk-dialog h2 { font-size: clamp(26px, 5vw, 34px); margin-bottom: 24px; }
.desk-dialog .actions { margin-top: 24px; }
.desk-dialog .dialog-error { margin: 16px 0 0; color: var(--bad); }
.desk-dialog a { display: inline-flex; align-items: center; min-height: 48px; }
.slot-options { display: grid; gap: 12px; margin-bottom: 20px; }
.booking-note, .unusual { padding: 12px; border-left: 4px solid var(--orange); margin-top: 16px; }
.accept-change { display: flex; align-items: start; gap: 12px; margin-block: 20px; }
.image-strip figure, .image-grid figure { min-width: 0; margin: 0; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); }
.image-strip figure { width: min(100%, 230px); }
.image-strip img, .image-grid img { display: block; width: 100%; height: 160px; object-fit: contain; border-radius: 6px; }
.image-strip figcaption, .image-grid figcaption { margin-block: 10px; overflow-wrap: anywhere; }
.image-strip a { display: inline-flex; align-items: center; min-height: 48px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-block: 20px; }
.image-grid button { width: 100%; }
.box-text-plain { white-space: pre-wrap; margin-top: 16px; }
.kit-preview iframe { display: block; width: 100%; height: 520px; border: 2px solid var(--line); background: white; border-radius: var(--radius-sm); }
.ideas-panel { max-width: none; margin-top: 40px; }
.ideas-panel h2 { font-size: 30px; }
.ideas-panel .field { margin-bottom: 20px; }
.ideas-panel input, .ideas-panel textarea { margin-top: 8px; }
@media (min-width: 700px) {
  .container { padding-inline: 28px; }
  .desk-title { width: auto; margin-right: auto; }
  .record-card { padding: 30px; }
  .actions button { flex: 0 1 auto; }
}

@media (max-width: 699px) {
  .week-tabs { flex-wrap: wrap; overflow-x: visible; }
}