/* NHO data landscape workshop tool. Mobile first; large touch targets; a "big screen" mode for projection. */
:root {
  --ink: #14212b; --muted: #51606d; --line: #c9d3dc; --bg: #f4f6f8; --card: #ffffff;
  --brand: #1f4e79; --brand-ink: #ffffff; --accent: #0b6e4f; --warn: #9a5b00; --warn-bg: #fff4d6;
  --bad: #b3261e; --bad-bg: #fde8e6; --ok-bg: #e2f3ea; --draft-bg: #eef1f4; --focus: #ffbf47;
  --l1: #dcebf7; --l2: #ffe2a8; --l3: #f6b0a8;
  font-size: 17px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.4; }
h1 { font-size: 1.45rem; margin: .2rem 0 .6rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 1.2rem 0 .5rem; }
h3 { font-size: 1rem; margin: .8rem 0 .3rem; }
p { margin: .4rem 0 .7rem; }
a { color: var(--brand); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: .5rem; top: .5rem; background: #fff; padding: .5rem; z-index: 50; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main { padding: .8rem .8rem 5rem; max-width: 1100px; margin: 0 auto; }
main.wide { max-width: none; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; background: var(--brand); color: var(--brand-ink); padding: .45rem .7rem; }
.top .brand { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.top .who { font-size: .8rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; }
.sync { border: 2px solid #fff; background: transparent; color: #fff; border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; min-height: 36px; white-space: nowrap; cursor: pointer; }
.sync.pending { background: #ffe08a; color: #3b2a00; border-color: #ffe08a; }
.sync.offline { background: #fff; color: var(--bad); border-color: #fff; font-weight: 700; }

button, .btn { font: inherit; min-height: 48px; padding: .55rem 1rem; border-radius: 10px; border: 2px solid var(--brand); background: #fff; color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
button.primary, .btn.primary { background: var(--brand); color: #fff; }
button.good { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { border-color: var(--bad); color: var(--bad); }
button.small, .btn.small { min-height: 40px; padding: .3rem .7rem; font-size: .9rem; border-width: 1.5px; }
button.quiet { border-color: var(--line); color: var(--ink); font-weight: 500; }
button[aria-pressed="true"] { background: var(--brand); color: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

label { display: block; font-weight: 600; margin: .8rem 0 .25rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .88rem; display: block; margin-top: .1rem; }
input[type=text], input[type=search], input[type=password], input[type=date], select, textarea { font: inherit; width: 100%; min-height: 48px; padding: .55rem .7rem; border: 2px solid #7b8a97; border-radius: 10px; background: #fff; color: var(--ink); }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.check { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .6rem; border: 2px solid var(--line); border-radius: 10px; margin: .35rem 0; font-weight: 500; background: #fff; cursor: pointer; min-height: 48px; }
.check input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; }
.check small { display: block; color: var(--muted); font-weight: 400; }
fieldset { border: 0; padding: 0; margin: .8rem 0 0; }
legend { font-weight: 600; padding: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .85rem; margin: .55rem 0; }
.card h3 { margin: 0 0 .15rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.card .actions { margin-top: .55rem; }
.card.draft { background: var(--draft-bg); border-style: dashed; border-color: #8795a1; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1.5px solid currentColor; vertical-align: middle; white-space: nowrap; }
.badge.draft { color: #4a5661; background: #fff; }
.badge.confirmed, .badge.new { color: var(--accent); background: var(--ok-bg); }
.badge.disputed { color: var(--warn); background: var(--warn-bg); }
.badge.rejected { color: var(--bad); background: var(--bad-bg); }
.badge.pending { color: var(--warn); background: var(--warn-bg); }
.badge.flag { color: var(--bad); background: var(--bad-bg); }
.docref { font-size: .82rem; color: var(--muted); border-left: 4px solid #8795a1; padding-left: .5rem; margin: .4rem 0; overflow-wrap: anywhere; }

.tiles { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.tile { display: flex; align-items: center; gap: .7rem; text-align: left; justify-content: flex-start; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: .75rem .9rem; color: var(--ink); text-decoration: none; min-height: 68px; }
.tile:hover { border-color: var(--brand); }
.tile .num { flex: 0 0 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tile .t { font-weight: 700; display: block; }
.tile .d { color: var(--muted); font-size: .88rem; display: block; }
.tile .count { display: block; font-weight: 700; color: var(--brand); font-size: .9rem; margin-top: .1rem; }
.banner { padding: .6rem .8rem; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.banner.warn { background: var(--warn-bg); }
.banner.bad { background: var(--bad-bg); }
.banner.info { background: #e4eef7; }
.note { background: #e4eef7; border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.note.warn { background: var(--warn-bg); }
.similar { background: var(--warn-bg); border: 2px solid #d9a400; border-radius: 10px; padding: .5rem .7rem; margin-top: .4rem; }
.similar button { margin: .25rem .25rem 0 0; }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: #14212b; color: #fff; padding: .7rem 1.1rem; border-radius: 10px; z-index: 60; max-width: 92vw; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(680px, 100vw - 1rem); max-height: calc(100vh - 1rem); color: var(--ink); }
dialog::backdrop { background: rgba(10, 20, 30, .55); }
dialog .dhead { position: sticky; top: 0; background: #fff; padding: .7rem .9rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; z-index: 2; }
dialog .dhead h2 { margin: 0; flex: 1; font-size: 1.15rem; }
dialog .dbody { padding: .3rem .9rem 1rem; }
dialog .dfoot { position: sticky; bottom: 0; background: #fff; padding: .6rem .9rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

table.t { border-collapse: collapse; width: 100%; background: #fff; }
table.t th, table.t td { border: 1px solid var(--line); padding: .45rem .55rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.t th { background: #e7edf2; position: sticky; top: 52px; z-index: 1; }
table.t td.num, table.t th.num { text-align: center; }
.scroll { overflow-x: auto; }
.todo { color: var(--bad); font-weight: 700; }
.done { color: var(--accent); font-weight: 700; }

.viewbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.viewbar select, .viewbar input[type=search] { width: auto; min-width: 9rem; flex: 1 1 9rem; max-width: 20rem; }
.viewtabs { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .4rem; }
.viewtabs a { flex: 0 0 auto; padding: .5rem .8rem; border-radius: 999px; border: 2px solid var(--brand); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; background: #fff; }
.viewtabs a[aria-current=page] { background: var(--brand); color: #fff; }
#cy { width: 100%; height: 68vh; min-height: 380px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; margin: .5rem 0; align-items: center; }
.legend span.i { display: inline-flex; align-items: center; gap: .35rem; }
.sw { width: 18px; height: 18px; border: 2px solid #33414d; display: inline-block; flex: 0 0 auto; }
.sw.round { border-radius: 50%; }
.sw.diamond { transform: rotate(45deg) scale(.8); }
.sw.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #33414d; }
.ln { width: 34px; height: 0; border-top: 3px solid #2b6cb0; display: inline-block; }
.ln.file { border-top-style: dashed; border-color: #51606d; }
.ln.manual { border-top: 6px dashed #c0392b; }
.ln.report { border-top-style: dotted; border-color: #7d4fb3; }
.ln.unsure { border-top: 2px solid #9aa7b2; }

.board { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.col { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; }
.col > h2 { margin: .1rem 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.col > h2 .n { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 .55rem; font-size: .95rem; }
.col > h2 .n.zero { background: #8795a1; }
.item { border-top: 1px solid var(--line); padding: .5rem 0; }
.item .what { font-weight: 700; overflow-wrap: anywhere; }
.item .q { font-style: italic; margin: .25rem 0; }
.item .res { background: var(--ok-bg); border-radius: 8px; padding: .3rem .5rem; margin-top: .3rem; }
.item .res.steering { background: var(--warn-bg); }

table.grid td.c { text-align: center; font-weight: 700; font-size: 1.2rem; }
table.grid td.l1 { background: var(--l1); }
table.grid td.l2 { background: var(--l2); }
table.grid td.l3 { background: var(--l3); outline: 3px solid var(--bad); outline-offset: -3px; }
.gridkey span { display: inline-block; padding: .1rem .5rem; border-radius: 6px; margin-right: .4rem; }
.stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.stat div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; text-align: center; }
.stat b { display: block; font-size: 1.8rem; color: var(--brand); }
.qr { background: #fff; padding: 12px; display: inline-block; border-radius: 12px; border: 1px solid var(--line); }
.qr svg { display: block; width: min(60vw, 320px); height: auto; }
.bigcode { font-size: 2.2rem; font-weight: 800; letter-spacing: .08em; }
pre.out { background: #14212b; color: #e7edf2; padding: .7rem; border-radius: 10px; overflow: auto; max-height: 40vh; font-size: .8rem; white-space: pre-wrap; }

@media (min-width: 700px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .board { grid-template-columns: 1fr 1fr; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}
@media (min-width: 1300px) { .board { grid-template-columns: repeat(4, 1fr); } }

/* Big-screen mode for the projector: larger type, no navigation chrome. */
html.display { --bg: #ffffff; }
html.display { font-size: 22px; }
html.display main { padding: .6rem 1rem 1rem; }
html.display .top .who, html.display .hide-display { display: none; }
html.display .legend { font-size: .7rem; margin: .2rem 0; }
html.display .viewbar button, html.display .viewbar select, html.display .viewbar input, html.display .viewtabs a { min-height: 34px; font-size: .62rem; padding: .15rem .5rem; }
html.display .viewtabs { margin-bottom: .2rem; }
html.display p.meta { margin: .1rem 0; font-size: .7rem; }
html.display table.t th { top: 0; position: static; }
html.display h1 { font-size: 1.7rem; }
@media (min-width: 1500px) { html.display { font-size: 25px; } }
@media print { .top, .viewtabs, .viewbar, button { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
table.grid th.num { overflow-wrap: normal; word-break: keep-all; min-width: 5.2rem; }