/* E-file. A tool, not a brochure: dense, legible, and honest about which button
   is the one that cannot be undone. */
:root{
  --bg:#EEF0F2; --card:#FFFFFF; --card2:#E6E9EC; --ink:#16202B; --muted:#5A6672;
  --line:#D3D8DD; --accent:#12212F; --accent-ink:#FFFFFF;
  --ok:#1F6B48; --ok-bg:#E2EFE8;
  --warn:#8A5A11; --warn-bg:#F5EAD6;
  --crit:#A3302A; --crit-bg:#F6E3E1;
  --shadow:0 1px 2px rgba(22,32,43,.06),0 6px 18px rgba(22,32,43,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1519; --card:#161E25; --card2:#1E272F; --ink:#E6EBEF; --muted:#96A3AE;
    --line:#2A343D; --accent:#7FB2E5; --accent-ink:#0F1519;
    --ok:#7FCCA4; --ok-bg:#163023;
    --warn:#E3B769; --warn-bg:#332816;
    --crit:#EE9189; --crit-bg:#361B19;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1519; --card:#161E25; --card2:#1E272F; --ink:#E6EBEF; --muted:#96A3AE;
  --line:#2A343D; --accent:#7FB2E5; --accent-ink:#0F1519;
  --ok:#7FCCA4; --ok-bg:#163023;
  --warn:#E3B769; --warn-bg:#332816;
  --crit:#EE9189; --crit-bg:#361B19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
/* The hidden attribute is how this app switches between the sign-in and the app, and
   the UA stylesheet's [hidden]{display:none} loses to any author rule that sets
   display — .signin below sets display:grid, so without this the sign-in panel stays
   on screen after a successful sign-in and looks like a sign-in that failed. */
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2{margin:0 0 4px; text-wrap:balance}
h1{font-size:20px} h2{font-size:16px}
.sub{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.hint{font-size:12px; color:var(--muted); font-weight:400}
.err{color:var(--crit); font-size:13px; margin:10px 0 0}

header{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; background:var(--card); border-bottom:1px solid var(--line);
}
.brand{font-weight:650; letter-spacing:.01em; display:flex; align-items:center; gap:8px}
.mark{
  display:grid; place-items:center; width:24px; height:24px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
}
.who{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}

main{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; padding:16px; align-items:start}
.col{display:flex; flex-direction:column; gap:16px; min-width:0}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:16px}

label{display:block; font-size:12.5px; font-weight:600; margin:12px 0 4px}
input,select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px;
  background:var(--card2); color:var(--ink); font:inherit;
}
textarea{min-height:110px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}

button{
  padding:8px 14px; border:1px solid var(--line); border-radius:7px;
  background:var(--card2); color:var(--ink); font:inherit; font-weight:600; cursor:pointer;
}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); margin-top:16px}
button.danger{background:var(--crit-bg); color:var(--crit); border-color:var(--crit)}
button.link{background:none; border:none; color:var(--accent); padding:0; text-decoration:underline}
.steps{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.steps button{flex:1 1 auto}

.sid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--muted);
     padding:8px 10px; background:var(--card2); border-radius:7px}
.out{
  margin-top:12px; max-height:420px; overflow:auto; white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.55;
}
.out:empty{display:none}
.badge{display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; margin-right:6px}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.crit{background:var(--crit-bg); color:var(--crit)}

.filedrop{
  border:1.5px dashed var(--line); border-radius:9px; padding:18px; text-align:center;
  color:var(--muted); font-size:13px;
}
.filedrop.over{border-color:var(--accent); background:var(--card2)}
.crumbs{margin:12px 0 2px; font-size:12.5px; color:var(--muted)}
.crumbs button{background:none;border:none;padding:0;color:var(--accent);text-decoration:underline;font-weight:400}
.docs,.attach{display:flex; flex-direction:column}
.docs .item,.attach .item{
  display:flex; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line);
  font-size:13px; min-width:0;
}
.docs .item:first-child,.attach .item:first-child{border-top:none}
.docs .name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.docs .size{font-family:ui-monospace,monospace; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.attach label{margin:0; font-weight:400; display:flex; gap:8px; align-items:center}
.attach input[type=checkbox]{width:auto}
.status{font-size:12.5px; line-height:1.6}

.signin{min-height:100dvh; display:grid; place-items:center; padding:20px}
.signin .card{width:min(360px,100%)}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--accent); color:var(--accent-ink); padding:9px 16px; border-radius:999px;
  font-size:13px; box-shadow:var(--shadow); z-index:9;
}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}