/* ONOTO site portal. Visual system follows the onoto site models: near-black panels, Fraunces headings, Inter text,
   amber for attention. Status colours are reserved for meaning and always come with a label. */
:root {
  --bg: #0f1316; --panel: #151b1f; --panel-2: #1a2126; --line: #2a3238; --line-2: #354048;
  --fg: #ece8e1; --mute: #9aa3a8; --dim: #6f7a80;
  --acc: #e4b25a;                       /* brand / attention */
  --good: #5fb3a1; --warn: #e4b25a; --bad: #e07a5f; --info: #7fa6c8; --none: #6f7a80;
  --r: 14px; --r-s: 9px;
  --serif: Fraunces, Georgia, serif; --sans: Inter, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit }
img { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em }
h1 { font-size: 30px; line-height: 1.15 }
h2 { font-size: 20px; line-height: 1.25 }
h3 { font-size: 16px; line-height: 1.3 }
p { margin: 6px 0; color: var(--mute) }
p b, li b { color: var(--fg); font-weight: 600 }
.num { font-variant-numeric: tabular-nums }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }

/* ---------- shell */
.top { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: 22px; padding: 0 24px; height: 58px;
       background: rgba(15, 19, 22, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap }
.brand b { font: 600 19px var(--serif); letter-spacing: .02em }
.brand span { color: var(--mute); font-size: 13.5px }
.sites { display: flex; gap: 4px }
.sites a { text-decoration: none; padding: 6px 13px; border-radius: 999px; color: var(--mute); font-weight: 500; font-size: 14px; white-space: nowrap }
.sites a:hover { color: var(--fg); background: var(--panel-2) }
.sites a[aria-current] { color: #1a1408; background: var(--acc) }
.who { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 13.5px }
.who form { margin: 0 }
.sub { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: var(--bg) }
.sub a { text-decoration: none; padding: 12px 14px 11px; color: var(--mute); font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap }
.sub a:hover { color: var(--fg) }
.sub a[aria-current] { color: var(--fg); border-bottom-color: var(--acc) }
main { max-width: 1320px; margin: 0 auto; padding: 28px 24px 64px }
.page-head { display: flex; align-items: flex-end; gap: 20px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px }
.page-head p { max-width: 760px }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 6px }

/* ---------- controls */
.btn { display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px var(--sans); color: var(--fg); background: transparent;
       border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; white-space: nowrap }
.btn:hover { border-color: var(--mute) }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #1a1408 }
.btn.primary:hover { filter: brightness(1.06) }
.btn[aria-pressed=true] { background: var(--acc); border-color: var(--acc); color: #1a1408 }
.btn.small { padding: 4px 10px; font-size: 12.5px }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
input[type=text], input[type=password], select { font: 15px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line-2);
       border-radius: var(--r-s); padding: 9px 12px; width: 100% }
select { width: auto; padding: 6px 10px; font-size: 13.5px }
label { font-size: 13px; color: var(--mute); font-weight: 500 }

/* ---------- surfaces */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px }
.card > h2:first-child, .card > .card-head { margin-bottom: 12px }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.card-head a { font-size: 13.5px; color: var(--mute); text-decoration: none; white-space: nowrap }
.card-head a:hover { color: var(--fg) }
.grid { display: grid; gap: 18px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) }
.stack > * + * { margin-top: 18px }
.flush { padding: 0; overflow: hidden }
.note { font-size: 13.5px; border-left: 2px solid var(--acc); padding: 2px 0 2px 12px; margin: 12px 0 0; color: var(--mute) }
.muted { color: var(--mute) } .dim { color: var(--dim) }
.small { font-size: 13px }

/* ---------- KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 15px }
.kpi .l { font-size: 13px; color: var(--mute); font-weight: 500 }
.kpi .v { font: 600 34px/1.1 var(--serif); margin-top: 6px; font-variant-numeric: tabular-nums }
.kpi .v small { font: 500 15px var(--sans); color: var(--mute); margin-left: 4px }
.kpi .s { font-size: 13px; color: var(--mute); margin-top: 4px; display: flex; align-items: center; gap: 6px }

/* ---------- status chips: colour + icon + word, never colour alone */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: 999px;
        border: 1px solid var(--line-2); color: var(--fg); white-space: nowrap; background: var(--panel-2) }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--none)) }
.chip.good { --c: var(--good) } .chip.warn { --c: var(--warn) } .chip.bad { --c: var(--bad) } .chip.info { --c: var(--info) } .chip.none { --c: var(--none) }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c, var(--none)); flex: none }

/* ---------- tables */
table.list { width: 100%; border-collapse: collapse; font-size: 14px }
table.list th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 0 12px 10px 0; border-bottom: 1px solid var(--line) }
table.list td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top }
table.list tr:last-child td { border-bottom: 0 }
table.kv { width: 100%; border-collapse: collapse; font-size: 14px }
table.kv td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top }
table.kv td:first-child { color: var(--mute); padding-right: 14px }
table.kv td:last-child { text-align: right; font-variant-numeric: tabular-nums }
table.kv tr:last-child td { border-bottom: 0 }

/* ---------- empty states */
.empty { text-align: center; padding: 34px 20px; color: var(--mute) }
.empty h3 { color: var(--fg); margin-bottom: 4px }

/* ---------- frames for 3D scenes and maps */
.frame { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #0b0f11 }
.frame iframe { display: block; width: 100%; height: 100%; border: 0 }
.frame .open { position: absolute; right: 12px; top: 12px; z-index: 5; background: rgba(15, 19, 22, .85) }
.map { height: 100%; min-height: 320px; background: #1b2125 }

/* ---------- portfolio */
.sitecard { display: grid; grid-template-rows: 230px auto; text-decoration: none; background: var(--panel); border: 1px solid var(--line);
            border-radius: var(--r); overflow: hidden; transition: border-color .15s }
.sitecard:hover { border-color: var(--mute) }
.sitecard .img { background: #0b0f11 center/cover no-repeat; position: relative }
.sitecard .img .chip { position: absolute; left: 14px; top: 14px; background: rgba(15, 19, 22, .85) }
.sitecard .body { padding: 18px 20px 20px }
.sitecard .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line) }
.sitecard .stats b { display: block; font: 600 22px var(--serif); font-variant-numeric: tabular-nums }
.sitecard .stats span { font-size: 12.5px; color: var(--mute) }

/* ---------- worker gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px }
.wk { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; cursor: pointer; text-align: left;
      padding: 0; color: inherit; font: inherit }
.wk:hover { border-color: var(--mute) }
.wk img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #0b0f11 }
.wk .m { padding: 7px 9px 8px; font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px }

/* ---------- video + timeline */
.video { background: #000; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line) }
.video video { width: 100%; display: block; aspect-ratio: 16/9; background: #000 }
.chart { position: relative; user-select: none }
.chart svg { display: block; width: 100%; overflow: visible }
.chart .tip { position: absolute; pointer-events: none; background: #0b0f11; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px;
              font-size: 12.5px; white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; transition: opacity .1s }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute); margin-top: 8px }
.legend span { display: inline-flex; align-items: center; gap: 6px }

/* ---------- façade grid (Ixora) */
.facade { display: grid; gap: 6px }
.facade .lab { font-size: 12px; color: var(--dim); display: flex; align-items: center; justify-content: center }
.unit { border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 6px; text-align: center; font: 600 13px var(--sans); cursor: pointer;
        background: var(--panel-2); color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 5px }
.unit small { font-weight: 500; color: var(--mute); font-size: 11.5px }
.unit.issues { border-color: var(--warn) } .unit.clean { border-color: var(--good) } .unit.unjudged { color: var(--dim); border-style: dashed }
.unit[aria-pressed=true] { outline: 2px solid var(--fg); outline-offset: 1px }
.views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.views figure { margin: 0; position: relative }
.views img { border-radius: 8px; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0b0f11 }
.views figcaption { font-size: 11.5px; color: var(--dim); margin-top: 3px }
.item { border-top: 1px solid var(--line); padding: 12px 0 }
.item:first-child { border-top: 0 }
.item .ev { font-size: 13px; color: var(--mute); margin: 4px 0 0; padding-left: 16px }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.thumbs figure { margin: 0 }
.thumbs img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; width: 100%; background: #0b0f11 }
.thumbs figcaption { font-size: 12px; color: var(--mute); margin-top: 5px }

/* ---------- issues */
.issue-photo { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: #0b0f11 }
form.inline { display: inline }
.addform { display: grid; grid-template-columns: 2fr 1.2fr 1fr auto; gap: 10px; align-items: end }

/* ---------- login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr }
.login-art { background: #0b0f11 center/cover no-repeat; position: relative }
.login-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,19,22,.15), rgba(15,19,22,.85)) }
.login-art .cap { position: absolute; left: 32px; bottom: 28px; z-index: 1; font-size: 13px; color: var(--mute) }
.login-box { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 6vw, 88px); max-width: 560px }
.login-box form { display: grid; gap: 14px; margin-top: 26px }
.err { color: var(--bad); font-size: 14px; display: flex; gap: 8px; align-items: center }

/* ---------- leaflet */
.leaflet-container { font: 13px var(--sans); background: #1b2125 }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--fg); border: 1px solid var(--line-2); box-shadow: none }
.leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.45 }
.leaflet-popup-content a { color: var(--acc) }
.leaflet-container a.leaflet-popup-close-button { color: var(--mute) }
.leaflet-bar a { background: var(--panel); color: var(--fg); border-color: var(--line) }
.leaflet-bar a:hover { background: var(--panel-2) }
.leaflet-control-attribution { background: rgba(15, 19, 22, .75) !important; color: var(--dim) !important }
.leaflet-control-attribution a { color: var(--mute) !important }
.maplayers { position: absolute; left: 12px; top: 12px; z-index: 1000; background: rgba(21, 27, 31, .94); border: 1px solid var(--line);
             border-radius: 12px; padding: 12px 14px; width: 250px; max-height: calc(100% - 24px); overflow: auto }
.maplayers h3 { font-size: 14px; margin-bottom: 8px }
.maplayers .lyr { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--fg); cursor: pointer }
.maplayers .lyr input { accent-color: var(--acc); margin: 0 }
.maplayers .lyr small { color: var(--dim); margin-left: auto; font-size: 12px }
.maplayers hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0 }

/* ---------- responsive */
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .g-main, .g3 { grid-template-columns: minmax(0, 1fr) }
  .addform { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  .top { gap: 12px; padding: 0 16px }
  .brand span, .who span { display: none }
  main { padding: 20px 16px 48px }
  .sub { padding: 0 8px }
  .g2 { grid-template-columns: minmax(0, 1fr) }
  .login-wrap { grid-template-columns: 1fr } .login-art { display: none }
  h1 { font-size: 25px }
  .maplayers { width: 210px }
}