/* Additions to vga.css (the VGA portal's stylesheet, used as-is) for what this
   portal has and the VGA one does not: the stage list, the language switch,
   the staff preview banner. Only VGA's colour variables are used. */
.steps{list-style:none;padding:6px 0 0;margin:0}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;color:var(--slate)}
.steps .n{width:24px;height:24px;border-radius:50%;border:2px solid var(--dash);flex:0 0 24px;
  display:grid;place-items:center;font-size:12px;font-weight:600}
.steps li.done{color:var(--text)} .steps li.done .n{background:var(--green);border-color:var(--green);color:#fff}
.steps li.now{color:var(--text);font-weight:600} .steps li.now .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps .d{font-weight:400;color:var(--slate);font-size:13.5px;margin-top:2px}
.task .tick.sent{border-color:var(--amber);background:var(--amber-soft)}
.langbtn{background:none;border:0;color:#9fb8d0;text-decoration:underline;padding:0;font:inherit;font-size:12.5px;cursor:pointer;margin-left:10px}
.login .langrow{text-align:center;margin-top:16px}
.login .langrow .langbtn{color:var(--accent);margin:0}
.login input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--text)}
.login .ok,.login .err{margin:14px 0 0}
.preview-banner{background:var(--amber-soft);color:var(--amber);border:1px solid var(--line);border-radius:9px;padding:10px 14px;margin-bottom:18px;font-size:14px}
.drop{cursor:pointer;display:block}
.drop input{display:none}
.thread{max-height:460px;overflow:auto;padding:4px 2px}
textarea.reply{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--text);margin-top:10px}
.doc-row{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--text)}
.doc-row:last-child{border-bottom:0}
.dates .task .t{font-weight:600}
/* vga.css's firm-mark section re-shows the sidebar logo after its own phone
   rule hid it; on a phone the sidebar is the bottom bar, so hide it again. */
@media (max-width:900px){ aside.side .logo{ display:none } }
/* signing (portal.js signView) */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;cursor:pointer}
.consent input{margin-top:4px;width:18px;height:18px;flex:0 0 18px}
.sg-name{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--text)}
.sg-typed{font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;font-size:30px;color:#0d2b66;padding:8px 2px;min-height:48px;border-bottom:1px solid var(--line)}
[data-theme="dark"] .sg-typed{color:#9cc2ff}
.sg-pad{width:100%;max-width:600px;height:160px;border:1px dashed var(--dash);border-radius:10px;background:#fff;touch-action:none;display:block}
.back{display:inline-block;margin-bottom:10px}