/* eKasi Media corporate identity, version 2.0 (September 2026).
   Street Black and Paper White anchor the interface; Kasi Yellow is the primary signal;
   orange, red and teal are used sparingly for warning, error and success.
   Yellow and teal are only ever fills behind black text, never text on white. */
:root{
  --black:#080808;--paper:#F7F7F7;--yellow:#FFC629;--orange:#FF6A00;--red:#E61E4D;--teal:#00C2A8;
  --panel:#161616;--rule:#2b2b2b;--on-dark-muted:#a8a8a8;--on-light-muted:#565656;--field-border:#b9b9b9;--soft:#e9e9e9;
  font-family:"Satoshi","Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--paper);background:var(--black)
}
*{box-sizing:border-box}
body{margin:0;background:var(--black)}
button,input,textarea,select{font:inherit}
a{color:inherit}
p{line-height:1.5}
h1{font-size:28px;font-weight:800;letter-spacing:-.3px;margin:4px 0 8px;color:var(--paper)}
h2{font-size:18px;font-weight:800;margin:4px 0 14px}
h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 12px}

/* Buttons: one yellow action per group; everything else is an outline. */
button{border:2px solid transparent;cursor:pointer;border-radius:6px;padding:10px 16px;min-height:44px;font-weight:700}
button:disabled{opacity:.4;cursor:not-allowed}
button:hover:not(:disabled){filter:brightness(.94)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.primary{background:var(--yellow);color:var(--black)}
.secondary{background:transparent;color:var(--paper);border-color:var(--paper)}
.card .secondary,dialog .secondary{color:var(--black);border-color:var(--black)}
.danger{background:var(--red);color:#fff}
.busy button{pointer-events:none;opacity:.6}

/* Page frame */
.top{background:var(--black);border-bottom:1px solid var(--rule);padding:14px 24px;display:flex;gap:22px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:16px}
.logo{height:34px;width:auto;display:block}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.topright{display:flex;align-items:center;gap:14px}
.shell{max-width:1270px;margin:auto;padding:24px}
.headerline{margin-bottom:18px}
.muted{color:var(--on-dark-muted)}
.card .muted,dialog .muted{color:var(--on-light-muted)}
.sub{font-size:12px;color:var(--on-dark-muted)}
.card .sub,dialog .sub{color:var(--on-light-muted)}
.small{font-size:12px}
.click{cursor:pointer}

/* Paper cards on the black canvas */
.card{background:var(--paper);color:var(--black);border-radius:8px;padding:22px}
.card+.card,form.card+.card,.card+form.card{margin-top:16px}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.actionbar,.actionsplit{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;margin-bottom:12px}
.field input,.field textarea,.field select{width:100%;border:2px solid var(--field-border);background:#fff;border-radius:6px;padding:10px;min-height:44px;font-weight:500;color:var(--black)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--black)}
.field input:disabled,.field textarea:disabled,.field select:disabled,.field input[readonly]{background:var(--soft);color:#3d3d3d;border-color:var(--soft)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.check{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;padding:12px;background:var(--soft);border-radius:6px;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--black)}
.scoreline{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:12px;border-bottom:1px solid #dcdcdc;padding:9px 0;font-size:13px}
.scoreline select{width:100%;padding:9px;min-height:44px;border:2px solid var(--field-border);border-radius:6px;background:#fff;color:var(--black)}
.filebox{padding:13px;border:2px dashed var(--field-border);border-radius:6px;margin-bottom:10px}
.filebox label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.filebox input{max-width:100%;font-size:12px}
[hidden]{display:none!important}

/* Signals */
.pill{display:inline-block;border-radius:100px;padding:5px 12px;background:var(--yellow);color:var(--black);font-size:12px;font-weight:800;white-space:nowrap}
.card .pill,.pill.status{background:var(--black);color:var(--paper)}
.pill.warn{background:var(--red);color:#fff}
.note{background:var(--soft);border-left:5px solid var(--yellow);padding:12px;border-radius:4px;font-size:13px;line-height:1.5;color:var(--black)}
.error{background:var(--red);color:#fff;padding:12px;border-radius:6px;margin-bottom:14px;font-weight:600}
.error button{color:#fff!important;border-color:#fff!important}
.success{background:var(--teal);color:var(--black);padding:12px;border-radius:6px;margin-bottom:14px;font-weight:600}

/* Numbers can be the slide */
.stat{background:var(--black);color:var(--paper);border-radius:6px;padding:18px}
.stat strong{display:block;font-size:30px;font-weight:800;color:var(--yellow);line-height:1.1;margin-bottom:6px}
.stat .muted{color:var(--paper);font-weight:700}
.stat .sub{margin-top:6px;color:var(--on-dark-muted)}

/* Navigation and lists */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}
.tabs button{background:transparent;color:var(--paper);border-color:var(--rule);font-size:13px}
.tabs button.active{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.listitem{display:flex;justify-content:space-between;align-items:center;padding:15px 12px;border-bottom:1px solid #dcdcdc;gap:12px}
.listitem:hover{background:var(--soft);cursor:pointer}
.doclink{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #dcdcdc;font-size:13px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border-bottom:1px solid #dcdcdc;text-align:left;padding:11px 10px}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.stages{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px}
.stages li{font-size:12px;font-weight:700;padding:6px 11px;border-radius:100px;background:var(--soft);color:var(--on-light-muted)}
.stages li.done{background:var(--black);color:var(--paper)}
.stages li.now{background:var(--yellow);color:var(--black)}
.map{width:100%;height:auto;background:var(--soft);border-radius:6px}

details.person{border-bottom:1px solid #dcdcdc;padding:6px 0}
details.person summary{cursor:pointer;padding:10px 0;min-height:44px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
details.person[open]{padding-bottom:16px}
.top .pill.warn{background:var(--orange);color:var(--black)}

/* Sign-in and dialogs */
.login{max-width:460px;margin:7vh auto;padding:0 16px}
.login .logo{height:56px;margin-bottom:10px}
.login .tagline{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);margin:0 0 22px}
dialog.reason{width:min(480px,calc(100vw - 32px));border:0;background:var(--paper);color:var(--black);border-radius:8px;padding:22px}
.reason::backdrop{background:#080808c7}

@media(max-width:720px){
  .shell{padding:13px}.top{padding:12px 14px}.grid,.grid3,.checks{grid-template-columns:1fr}
  .topright .muted{display:none}.card{padding:16px}.logo{height:28px}.listitem{align-items:flex-start}h1{font-size:23px}
}
.trend .bar{display:inline-block;height:10px;background:var(--yellow);border:1px solid var(--black);border-radius:2px;vertical-align:middle;min-width:0}
.trend td{white-space:nowrap}
.progress{position:sticky;top:0;z-index:5;background:var(--paper);border:2px solid var(--black);border-radius:6px;padding:10px 12px;margin-bottom:14px;color:var(--black)}
.progress .track{height:8px;background:var(--soft);border-radius:4px;margin:8px 0;overflow:hidden}
.progress .track div{height:100%;background:var(--yellow);border-right:2px solid var(--black)}
.progress .ok{font-weight:700}.progress .todo{color:var(--on-light-muted)}
.bars{display:grid;gap:6px}
.barrow{display:grid;grid-template-columns:170px 1fr 36px;align-items:center;gap:10px;font-size:13px}
.barrow div{background:var(--soft);border-radius:3px;height:16px}
.barrow i{display:block;height:100%;border-radius:3px;min-width:0}
.barrow b{text-align:right}
@media(max-width:560px){.barrow{grid-template-columns:110px 1fr 30px}}