/* KTB ESG ingest console.
   Tokens match the flow-view mockup so the two read as one product.
   Light palette is the base; dark redefines only the tokens. */

:root{
  --ground:#eff3f4; --surface:#ffffff; --surface-2:#f7fafa;
  --ink:#111a1f; --ink-2:#33454d; --muted:#5b6e77; --faint:#8598a1;
  --line:#cbd7dc; --line-soft:#dde6e9;
  --accent:#0b6e77; --accent-soft:#d9ebed; --accent-ink:#06484f;
  --ok:#1e7a57; --ok-soft:#dcefe6;
  --warn:#9a6410; --warn-soft:#f6ead3;
  --bad:#a93226; --bad-soft:#f7e0dd;
  --idle:#7a8b93; --idle-soft:#e6ecee;
  --shadow:0 1px 2px rgba(17,26,31,.06), 0 6px 18px -10px rgba(17,26,31,.18);
  --r:7px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0d1417; --surface:#141d21; --surface-2:#19242a;
    --ink:#e4edf0; --ink-2:#bcccd2; --muted:#92a5ad; --faint:#6d828b;
    --line:#27353b; --line-soft:#1f2c31;
    --accent:#3db2bc; --accent-soft:#123338; --accent-ink:#8fd7de;
    --ok:#4cb98c; --ok-soft:#11302a;
    --warn:#d9a441; --warn-soft:#332714;
    --bad:#e0705f; --bad-soft:#35191a;
    --idle:#7d919a; --idle-soft:#1d272c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0d1417; --surface:#141d21; --surface-2:#19242a;
  --ink:#e4edf0; --ink-2:#bcccd2; --muted:#92a5ad; --faint:#6d828b;
  --line:#27353b; --line-soft:#1f2c31;
  --accent:#3db2bc; --accent-soft:#123338; --accent-ink:#8fd7de;
  --ok:#4cb98c; --ok-soft:#11302a;
  --warn:#d9a441; --warn-soft:#332714;
  --bad:#e0705f; --bad-soft:#35191a;
  --idle:#7d919a; --idle-soft:#1d272c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.mono,code{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;}
a{color:var(--accent-ink)}
h1,h2,h3{margin:0; text-wrap:balance}
.wrap{max-width:1240px; margin:0 auto; padding-inline:20px; padding-block:26px 56px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:600}

/* --- masthead --- */
.mast{border-bottom:1px solid var(--line); background:var(--surface)}
.mast .inner{max-width:1240px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.mast h1{font-size:16px; font-weight:600; letter-spacing:-.01em}
.mast .sp{flex:1}
.mast nav{display:flex; gap:14px; font-size:13px}
.mast nav a{color:var(--muted); text-decoration:none}
.mast nav a:hover{color:var(--accent-ink)}

/* --- generic --- */
.shead{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:30px 0 13px}
.shead h2{font-size:16px; font-weight:600}
.shead p{margin:0; font-size:12.5px; color:var(--faint)}
.lede{color:var(--muted); max-width:64ch; margin:6px 0 0}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden}
.tile{background:var(--surface); padding:13px 15px}
.tile .k{font-size:11.5px; color:var(--muted)}
.tile .v{font-size:24px; font-weight:600; line-height:1.15; margin-top:2px; letter-spacing:-.02em}
.tile .s{font-size:11.5px; color:var(--faint)}
.tile.is-bad .v{color:var(--bad)} .tile.is-warn .v{color:var(--warn)}
.tile.is-ok .v{color:var(--ok)} .tile.is-idle .v{color:var(--idle)}

.banner{padding:11px 15px; border-radius:var(--r); font-size:13.5px; margin-bottom:18px;
  border:1px solid transparent}
.banner.bad{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.banner.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}

/* --- upload --- */
.drop{
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--surface);
  padding:26px 22px; text-align:center; transition:border-color .15s, background .15s;
}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop p{margin:6px 0 0; color:var(--muted); font-size:13.5px}
.drop .big{font-size:16px; font-weight:600}
.btn{
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:var(--r); padding:8px 16px;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--accent-ink); border-color:var(--line)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.filelist{margin-top:12px; font-size:13px; color:var(--ink-2); text-align:left;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.pill{background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:20px; padding:2px 10px; font-size:12px}

/* --- scope cards --- */
.scopes{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:12px}
.scope{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; display:flex; flex-direction:column; gap:7px}
.scope .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.scope h3{font-size:14px; font-weight:600}
.scope .tor{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--accent);
  letter-spacing:.04em; white-space:nowrap}
.scope .note{font-size:12px; color:var(--faint); flex:1}
.scope form{margin:0}

/* --- flow graph --- */
.scroller{overflow-x:auto; padding-bottom:6px}
.graph{display:flex; gap:30px; min-width:1000px; align-items:stretch}
.node{
  position:relative; flex:1; min-width:132px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; font:inherit; color:inherit; cursor:pointer; display:block;
  transition:border-color .13s, box-shadow .13s, transform .13s;
}
.node:hover{border-color:var(--accent); transform:translateY(-1px)}
.node:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.node[aria-pressed="true"]{border-color:var(--accent);
  box-shadow:var(--shadow), inset 0 0 0 1px var(--accent)}
.node + .node::before{content:""; position:absolute; left:-30px; top:50%;
  width:30px; height:1px; background:var(--line); pointer-events:none}
.node + .node::after{content:""; position:absolute; left:-6px; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  transform:rotate(45deg); pointer-events:none}
.node .lbl{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.node .big{font-size:17px; font-weight:600; letter-spacing:-.02em; margin-top:3px; display:block}
.node .sub{font-size:11.5px; color:var(--faint); display:block; overflow-wrap:anywhere}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--idle)}
.s-ok .dot{background:var(--ok)} .s-warn .dot{background:var(--warn)}
.s-bad .dot{background:var(--bad)} .s-idle .dot{background:var(--idle)}
.s-ok .big{color:var(--ok)} .s-warn .big{color:var(--warn)}
.s-bad .big{color:var(--bad)} .s-idle .big{color:var(--idle)}
.legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--muted); margin:12px 0 24px}
.legend span{display:inline-flex; align-items:center; gap:6px}

/* --- detail panel --- */
.detail{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.dhead{padding:15px 20px; border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.dhead h3{font-size:17px; font-weight:600; margin-top:3px}
.dhead p{margin:5px 0 0; font-size:13px; color:var(--muted); max-width:74ch}
.chips{display:flex; flex-wrap:wrap; gap:7px; padding:12px 20px; border-bottom:1px solid var(--line-soft)}
.chip{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:3px 9px;
  border-radius:20px; background:var(--idle-soft); color:var(--ink-2); white-space:nowrap}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}
.chip.acc{background:var(--accent-soft); color:var(--accent-ink)}
.filterbar{display:flex; gap:7px; padding:10px 20px; border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap; align-items:center}
.filterbar label{font-size:12px; color:var(--muted)}
.filterbar input{font:inherit; font-size:13px; padding:5px 10px; flex:1; min-width:160px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink)}
.filterbar input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
ul.items{list-style:none; margin:0; padding:4px 0; max-height:460px; overflow-y:auto}
ul.items li{display:grid; grid-template-columns:62px 1fr auto; gap:12px; align-items:start;
  padding:8px 20px; border-bottom:1px solid var(--line-soft); font-size:13.5px}
ul.items li:last-child{border-bottom:0}
.sev{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; padding:2px 0; text-align:center;
  border-radius:3px; margin-top:2px}
.sev.error{background:var(--bad-soft); color:var(--bad)}
.sev.warn{background:var(--warn-soft); color:var(--warn)}
.sev.info{background:var(--idle-soft); color:var(--muted)}
.sev.ok{background:var(--ok-soft); color:var(--ok)}
.itxt code{font-size:12.5px; background:var(--surface-2); padding:1px 5px;
  border-radius:4px; color:var(--accent-ink); border:1px solid var(--line-soft)}
.itxt .code{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:var(--faint); letter-spacing:.05em; display:block; margin-top:2px}
.where{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint);
  white-space:nowrap; margin-top:3px}
.empty{padding:20px; color:var(--muted); font-size:13.5px; margin:0}

/* --- runs table --- */
table.runs{width:100%; border-collapse:collapse; font-size:13.5px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
table.runs th{text-align:left; font-size:11.5px; color:var(--muted); font-weight:500;
  padding:9px 14px; border-bottom:1px solid var(--line)}
table.runs td{padding:9px 14px; border-bottom:1px solid var(--line-soft)}
table.runs tr:last-child td{border-bottom:0}
table.runs a{text-decoration:none; font-weight:500}
.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){*{transition:none !important}}
@media (max-width:640px){
  .wrap{padding-block:20px 40px}
  ul.items li{grid-template-columns:54px 1fr; gap:9px; padding-inline:14px}
  ul.items li .where{grid-column:2}
  .dhead,.chips,.filterbar{padding-inline:14px}
}

/* --- added for auth, tabs, forms, approval --- */
.mast .who{font-size:11.5px; color:var(--muted); line-height:1.35; text-align:right}
.mast .who b{color:var(--ink); font-size:12.5px}
.mast nav .tag{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--accent);
  border:1px solid var(--line); border-radius:3px; padding:0 3px; margin-left:4px}
.btn.sm{padding:4px 10px; font-size:12px}

.loginwrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px; align-items:start; margin-top:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--shadow)}
.card h3{font-size:15px; font-weight:600; margin-bottom:4px}
.card h2{font-size:20px; margin:6px 0 4px}
.stack{display:flex; flex-direction:column; gap:5px; margin-top:14px}
.stack label,.row label{font-size:12px; color:var(--muted); margin-top:7px}
.stack input,.row input{font:inherit; font-size:14px; padding:8px 11px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink); width:100%}
.stack input:focus-visible,.row input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.stack button{margin-top:14px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px}
.row > div{flex:1; min-width:130px}
.row button{white-space:nowrap}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tab{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:13px; padding:7px 13px; border-radius:var(--r); color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line)}
.tab.on{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.tab .tag{font-size:10.5px; color:var(--faint)}
.tab.on .tag{color:var(--accent-ink)}

.twocol{display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:22px; align-items:start}
@media (max-width:820px){ .twocol{grid-template-columns:1fr} }

.state{display:inline-block; font-size:11.5px; font-weight:500; padding:2px 9px;
  border-radius:20px; vertical-align:middle; margin-left:6px}
.state.draft{background:var(--idle-soft); color:var(--muted)}
.state.pending{background:var(--warn-soft); color:var(--warn)}
.state.approved{background:var(--ok-soft); color:var(--ok)}
.state.rejected{background:var(--bad-soft); color:var(--bad)}

.card.approve{display:flex; gap:20px; justify-content:space-between;
  align-items:center; flex-wrap:wrap; margin:22px 0 4px}
.card.approve .actions{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.card.approve .row{margin-top:0}

/* --- select boxes, to match the text inputs they sit beside ---------------- */
.stack select,.row select,.filterbar select{font:inherit; font-size:14px;
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink); max-width:100%}
.stack select:focus-visible,.row select:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}

/* A form squeezed into a table cell: no top margin, and it must not force the
   column wider than the text beside it. */
.row.tight{margin-top:0; gap:5px; flex-wrap:nowrap; align-items:center}
.row.tight select,.row.tight input{font-size:12.5px; padding:4px 7px; min-width:0}
.row.tight input{width:100%; max-width:140px}

/* The explanation under a field, for the key-in form. TOR ข้อ 3.4 asks that a
   Maker be told what shape a box wants before they type, not after. */
.fieldnote{font-size:11.5px; line-height:1.55; color:var(--faint); margin:1px 0 2px}
.fieldnote code{font-size:11px}

/* A chip that is also a button — the task filters. */
.chip.pick{border:1px solid var(--line); background:var(--surface);
  color:var(--muted); cursor:pointer; font-family:inherit; font-size:12px}
.chip.pick:hover{border-color:var(--accent)}
.chip.pick.on{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.pick:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chips .sp{flex:1}

/* The header badge links to the queue now, so it has to stop looking like text. */
a.chip{text-decoration:none}
a.chip:hover{filter:brightness(.95)}