/* tenders.ldp.net — built to the TEN-4 canvas (claude/TEN-design). Self-hosted fonts (OFL), no third-party requests. */

@font-face { font-family: "PT Sans"; src: url("../fonts/PTSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("../fonts/PTSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/SourceCodePro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/SourceCodePro-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* ---------- tokens: light, then dark by preference or by choice (user menu) ---------- */
:root {
  color-scheme: light;
  --bg: #FFFFFF; --ink: #16191D; --sub: #555B62; --line: #D5D9DE; --field: #8A9097; --gold: #DFC358;
  --hl: #FBF3DA; --soft: #F4F5F6; --input-bg: #FFFFFF; --thumb-bg: #F4F5F6; --on-gold: #16191D;
  --g-ok: #2E7D57; --g-err: #A63A2C; --g-info: #2C6A84; --g-warn: #B7791F; --g-faint: #8A9097; --g-on-fill: #FFFFFF; --g-on-warn: #16191D;
  --mono: "Source Code Pro", ui-monospace, monospace;
  --label: "Jost", "PT Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --ink: #E6E6E6; --sub: #A6A6A6; --line: #2A2E33; --field: #3A3F45; --gold: #FFCD5D;
    --hl: #241F0E; --soft: #0C0D0F; --input-bg: #0C0D0F; --thumb-bg: #16181B;
    --g-ok: #5BBF8A; --g-err: #E06A5E; --g-info: #7FB8CE; --g-warn: #E0A84E; --g-faint: #6B7178; --g-on-fill: #0C0D0F; --g-on-warn: #0C0D0F;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --ink: #E6E6E6; --sub: #A6A6A6; --line: #2A2E33; --field: #3A3F45; --gold: #FFCD5D;
  --hl: #241F0E; --soft: #0C0D0F; --input-bg: #0C0D0F; --thumb-bg: #16181B;
  --g-ok: #5BBF8A; --g-err: #E06A5E; --g-info: #7FB8CE; --g-warn: #E0A84E; --g-faint: #6B7178; --g-on-fill: #0C0D0F; --g-on-warn: #0C0D0F;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "PT Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
a:hover { text-decoration: underline; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; }
h2.label, .label { margin: 0; font-family: var(--label); font-size: 14px; font-weight: 400; letter-spacing: 3px; color: var(--sub); text-transform: uppercase; }
.code, .ref { font-family: var(--mono); }
.ref { font-weight: 600; }
.sub { color: var(--sub); }
.small { font-size: 14px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.struck { text-decoration: line-through; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rule { display: block; width: 48px; height: 2px; margin-top: 12px; background: var(--gold); }
.glyph { display: inline-block; flex: 0 0 18px; vertical-align: middle; }
.with-glyph { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; padding: 10px 16px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--soft); }
.btn.quiet { border-color: var(--line); }
.btn.dashed { border-style: dashed; border-color: var(--sub); }
.btn.primary { border: 0; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 16px; padding: 12px 22px; }
.btn.primary:hover { filter: brightness(0.96); }
.btn.danger { border-color: var(--g-err); color: var(--g-err); }
.btn[disabled] { border-color: var(--line); color: var(--sub); background: transparent; cursor: not-allowed; filter: none; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--sub); }
.field input, .field select, input.answer, textarea {
  font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--field); border-radius: 0; background: var(--input-bg); color: var(--ink); width: 100%;
}
input.answer { font-size: 14px; padding: 6px 10px; max-width: 220px; }
.field input[readonly] { border-style: dashed; }
.amount-box { display: flex; align-items: stretch; }
.amount-box .code-label { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--field); border-right: 0; font-family: var(--mono); font-size: 14px; color: var(--sub); background: var(--soft); }
.amount-box input { text-align: right; }
.computed { font-size: 16px; padding: 8px 10px; border: 1px dashed var(--line); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; min-height: 42px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: 5px; }
.save-state { font-size: 14px; color: var(--sub); min-height: 21px; }
.save-state[data-state="error"], .message.error { color: var(--g-err); }

/* ---------- the flag (F1): the website's invariants, design system §2.3b ----------
   fixed full-bleed left, dropped 1.44 × the logo height, above everything; 56 px, 42 px from 560 px down, nudged left
   on phones. The plate is 146 × 32 (4.5625 : 1), so the masthead reserves exactly its width. */
:root { --logo-h: 56px; --flag-nudge: 0px; }
.ten-flag { position: fixed; left: var(--flag-nudge); top: calc(1.44 * var(--logo-h)); z-index: 50; display: block; line-height: 0; }
.ten-flag img { display: block; height: var(--logo-h); width: auto; }
.ten-flag:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- masthead ---------- */
.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  min-height: var(--logo-h); padding: calc(1.44 * var(--logo-h)) 40px 18px calc(4.5625 * var(--logo-h) + var(--flag-nudge) + 28px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 28px; text-decoration: none; }
.brand .word { font-family: var(--label); font-size: 14px; letter-spacing: 4px; }
.usermenu { position: relative; font-size: 14px; }
.usermenu > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 6px 0; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: translateY(-3px) rotate(45deg); }
.usermenu .panel { position: absolute; right: 0; top: 100%; z-index: 10; min-width: 280px; display: flex; flex-direction: column; gap: 16px;
  padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.choice { display: flex; flex-direction: column; gap: 8px; }
.choice .options { display: flex; flex-wrap: wrap; gap: 8px; }
.choice button { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.choice button[aria-pressed="true"] { border-color: var(--ink); font-weight: 700; }

/* ---------- frame: rail + main ---------- */
.frame { display: flex; flex-wrap: wrap; }
.rail { flex: 1 1 240px; max-width: 280px; padding: 40px 24px 40px 40px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 36px; font-size: 14px; }
.rail .closes { display: flex; flex-direction: column; gap: 2px; }
.rail .closes strong { font-size: 16px; }
.rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rail li { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 12px; border-left: 2px solid transparent; }
.rail li[aria-current="page"] { border-left-color: var(--gold); }
.rail li[aria-current="page"] a { font-weight: 700; }
.rail li a { flex: 1; text-decoration: none; }
.rail li .locked { flex: 1; color: var(--sub); }
.page { flex: 999 1 640px; min-width: 0; padding: 40px 48px 72px; display: flex; flex-direction: column; gap: 36px; }
.page.narrow > * { max-width: 760px; }
.head { display: flex; flex-direction: column; gap: 8px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; background: var(--hl); }
.banner > span { flex: 1 1 420px; }
.banner.soft { background: var(--soft); }
.flash { padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--soft); }

/* ---------- tables ---------- */
.scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; color: var(--sub); font-weight: 400; padding: 0 12px 12px; border-bottom: 1px solid var(--ink); }
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid th:first-child, table.grid td:first-child { padding-left: 0; }
table.grid th:last-child, table.grid td:last-child { padding-right: 0; }
table.grid tr.changed td, table.grid tr.changed th { background: var(--hl); }
table.grid tr.withdrawn { opacity: .5; }
table.grid tr.withdrawn .ref, table.grid tr.withdrawn .name { text-decoration: line-through; }
table.grid tbody th { font-weight: 400; text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.lum-index { min-width: 860px; }
.thumb { display: block; width: 56px; height: 56px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); }
.thumb-empty { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px dashed var(--line); color: var(--sub); font-size: 11px; }
.counts { display: flex; flex-wrap: wrap; gap: 14px; }
.counts span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ink); }
.tally { display: flex; flex-wrap: wrap; gap: 32px; font-size: 14px; }
.tally strong { font-size: 16px; }
.key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; font-size: 14px; }
.two { display: flex; flex-wrap: wrap; gap: 48px; }
.two > * { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- luminaire page ---------- */
.spec { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.spec .drawing { display: block; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); }
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery a { display: block; }
.gallery img { width: 72px; height: 72px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); }
.offer-col { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.crit-group + .crit-group { margin-top: 24px; }
.crit-group h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.crit-table { min-width: 520px; }
.crit-table td.result { width: 28px; padding-right: 0; }
.crit-table .was { color: var(--sub); text-decoration: line-through; margin-left: 6px; }
.crit-table .evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--sub); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 20px; }
.grid-2 > h2, .grid-5 > h2 { grid-column: 1 / -1; }
.files { display: flex; flex-wrap: wrap; gap: 20px; }
.file { margin: 0; width: 148px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.file .tile { position: relative; width: 148px; height: 148px; border: 1px solid var(--line); background: var(--thumb-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.file .tile img { width: 100%; height: 100%; object-fit: cover; }
.file .tile .type { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 13px; }
.file .page-sketch { width: 92px; height: 124px; background: #FFFFFF; border: 1px solid #D5D9DE; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.file .page-sketch span { display: block; height: 3px; background: #C9CDD2; }
.file .page-sketch span:first-child { height: 38px; background: #E8EAED; }
.file figcaption { display: flex; flex-direction: column; gap: 4px; }
.file .name { font-family: var(--mono); word-break: break-all; }
.file .meta { display: flex; align-items: center; gap: 6px; color: var(--sub); }
.file .meta form { margin-left: auto; }
.icon-btn { width: 28px; height: 28px; border: 0; background: transparent; color: var(--sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.add-file { width: 148px; min-height: 148px; border: 1px dashed var(--sub); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px; font-size: 14px; color: var(--sub); text-align: center; }
.add-file input[type=file] { width: 100%; font-size: 12px; }
.sample { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- agreement, notes, review, confirmation ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps li { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 2px solid var(--line); }
.steps li[aria-current="step"] { border-top-color: var(--gold); font-weight: 700; }
.agreement-doc { width: 100%; height: 520px; border: 1px solid var(--line); background: var(--soft); }
.offer-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.offer-choice legend { margin-bottom: 4px; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.decline-box { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.agreement-text { height: 200px; overflow-y: auto; padding: 20px 24px; border: 1px solid var(--line); background: var(--soft); font-size: 14px; color: var(--sub); }
.sign { display: flex; flex-wrap: wrap; gap: 32px; }
.sign > * { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.sign > .paper { flex-basis: 280px; padding-left: 32px; border-left: 1px solid var(--line); }
.sign h3 { margin: 0; font-size: 16px; }
.notes details { border-top: 1px solid var(--line); }
.notes details:last-of-type { border-bottom: 1px solid var(--line); }
.notes summary { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; list-style: none; cursor: pointer; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary .n { font-family: var(--mono); width: 28px; color: var(--sub); }
.notes summary strong { flex: 1; }
.notes .clauses { padding: 0 0 20px 44px; display: flex; flex-direction: column; gap: 10px; }
.notes .clauses p { margin: 0; }
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; }
.checks > div { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--line); }
.checks > div > div { display: flex; flex-direction: column; }
.submit-box { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--soft); }
.receipt { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.receipt > div { padding: 14px 0; border-top: 1px solid var(--line); }
.receipt dt { font-size: 14px; color: var(--sub); }
.receipt dd { margin: 2px 0 0; word-break: break-all; }
.diff td.from { color: var(--sub); text-decoration: line-through; }
.problems { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- plain pages (staff side, sign-in) ---------- */
.plain { max-width: 960px; padding: 32px 16px 72px; }
.plain.wide { max-width: 1440px; padding: 32px 40px 72px; display: flex; flex-direction: column; gap: 32px; }
.faint { color: var(--g-faint); }
.state { font-family: var(--label); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.state.open { color: var(--g-ok); }
.state.closed { color: var(--sub); }

/* ---------- the register (the tenders list): ProjectManager's fileman grid on the web ----------
   one header strip, then a band per project (caret, gold bar, label in caps, count, next date right). Columns line up
   because the strip and every band share one colgroup with table-layout: fixed. Rows 26 px min, 13 px text, hairlines
   only, no stripes; the sorted column shows a gold arrow. */
.register { min-width: 0; }
.register table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; }
.register-head th { height: 30px; padding: 0 10px; text-align: left; background: var(--soft); border-bottom: 1px solid var(--line);
  font-family: var(--label); font-size: 12px; font-weight: 400; letter-spacing: 1.3px; text-transform: uppercase; color: var(--g-faint); }
.register-head th.num { text-align: right; }
.register-head a.sort { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.register-head a.sort:hover, .register-head a.sort:focus-visible { color: var(--ink); }
.register-head .arrow { color: var(--gold); font-size: 10px; }
.band > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px;
  background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > summary::-webkit-details-marker { display: none; }
.band > summary:hover { background: var(--hl); }
.band .caret { font-size: 10px; color: var(--sub); transition: transform .15s ease; }
.band:not([open]) .caret { transform: rotate(-90deg); }
.band .bar { width: 3px; align-self: stretch; margin: 7px 0; background: var(--gold); opacity: .8; }
.band-label { font-family: var(--label); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sub); }
.band-meta { font-family: var(--mono); font-size: 12px; color: var(--g-faint); }
.band-meta.right { margin-left: auto; }
.register-rows td, .register-rows th { font-size: 13px; height: 26px; padding: 4px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.register-rows td.num, .register-rows th.num { text-align: right; }
.register-rows tbody tr:hover { background: var(--hl); }
@media (prefers-reduced-motion: reduce) { .band .caret { transition: none; } }

/* ---------- phone width ---------- */
@media (max-width: 560px) {
  :root { --logo-h: 42px; --flag-nudge: -15px; }
  /* beside the flag there is room for the name only; the tier and organisation stay inside the menu */
  .usermenu > summary .sub { display: none; }
}
@media (max-width: 760px) {
  .masthead { padding-right: 16px; padding-bottom: 16px; }
  .brand { gap: 16px; }
  .agreement-doc { height: 420px; }
  .rail { max-width: none; flex-basis: 100%; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); gap: 16px; }
  .rail ul { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .rail li { padding: 6px 0 6px 8px; }
  .page { padding: 24px 16px 56px; gap: 28px; }
  h1 { font-size: 24px; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .checks, .receipt, .steps, .key { grid-template-columns: 1fr; }
  .sign > .paper { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .usermenu .panel { right: -16px; min-width: 0; width: calc(100vw - 32px); }
  .two { gap: 32px; }
}