/* Access levels (System → People) and the client portal journey.
   Uses the theme tokens only, so every skin (Console, Groove, After Dark, Vinyl) carries it. */

/* ── Client ID search ─────────────────────────────── */
.clpick { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm, 12px); box-shadow:var(--shadow-lg, 0 20px 40px rgba(0,0,0,.25)); padding:4px; max-height:300px; overflow:auto; }
.clpick button { display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; background:none; border:0; color:var(--ink);
  padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; }
.clpick button:hover, .clpick button.at { background:var(--hover, var(--soft)); }
.clpick .code { color:var(--gold-ink, var(--gold)); font-size:12px; white-space:nowrap; }
.clpick span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apcl, .lvcl { position:relative; display:inline-block; min-width:220px; }
.apcl input, .lvcl input { width:100%; }

/* ── Level picker (new login) ─────────────────────── */
.lvpick { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin-bottom:16px; }
.lvopt { position:relative; display:grid; gap:3px; padding:11px 13px 12px; border:1px solid var(--line); border-radius:var(--r-sm, 12px);
  background:var(--surface); cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease, ease); }
.lvopt:hover { border-color:var(--line-2); transform:translateY(-1px); }
.lvopt input { position:absolute; opacity:0; pointer-events:none; }
.lvopt b { font-weight:600; font-size:13.5px; color:var(--ink); }
.lvopt span { font-size:12px; line-height:1.4; color:var(--muted); }
.lvopt.on { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.lvopt.on b { color:var(--accent-text, var(--accent)); }
.lvedit { display:grid; gap:6px; min-width:230px; }
.lvedit select { max-width:220px; }

/* ── Portal: hero ─────────────────────────────────── */
.pj-hero { position:relative; overflow:hidden; display:flex; gap:clamp(18px, 4vw, 44px); align-items:center; flex-wrap:wrap;
  padding:clamp(20px, 3.4vw, 36px); border-radius:var(--r, 20px); margin-bottom:18px; color:var(--on-accent, #fff);
  background:var(--grad-accent, linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent)))); box-shadow:var(--shadow-lg, none); }
.pj-hero::before { content:""; position:absolute; inset:auto -80px -120px auto; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold-2, #ffc24d) 45%, transparent) 0%, transparent 65%); opacity:.55; }
.pj-hero::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--strip, linear-gradient(90deg, var(--gold), transparent)); }
.pj-ring { position:relative; width:138px; height:138px; flex:none; }
.pj-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.pj-ring circle { fill:none; stroke-width:10; }
.pj-ring .rt { stroke:color-mix(in srgb, currentColor 18%, transparent); }
.pj-ring .rf { stroke:var(--gold-2, #ffc24d); stroke-linecap:round; animation:pjring 1.4s var(--ease, ease) both; }
@keyframes pjring { from { stroke-dashoffset:var(--c); } }
.pj-ring > div { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.pj-ring b { font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em; }
.pj-ring span { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-top:4px; }
.pj-t { position:relative; flex:1; min-width:240px; }
.pj-t .eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.pj-t h2 { margin:6px 0 6px; font-size:clamp(22px, 3vw, 30px); line-height:1.15; font-weight:600; color:inherit; }
.pj-t p { margin:0; opacity:.88; }
.pj-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.pj-stats div { padding:9px 14px; border-radius:14px; background:color-mix(in srgb, currentColor 11%, transparent);
  backdrop-filter:blur(4px); display:grid; min-width:92px; }
.pj-stats b { font-size:20px; font-weight:700; line-height:1.1; }
.pj-stats span { font-size:11.5px; opacity:.8; }
.pj-stats .hot { background:var(--gold-2, #ffc24d); color:var(--accent-deep, #1a0040); }

/* ── Portal: your file ────────────────────────────── */
.pj-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-bottom:18px; align-items:start; }
.pj-grid > .panel { margin:0; }
dl.facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px 18px; margin:0; }
dl.facts dt { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
dl.facts dd { margin:2px 0 0; color:var(--ink); font-weight:500; word-break:break-word; }
.ppl { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pp { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:99px; background:var(--soft); border:1px solid var(--line); }
.pp i { width:28px; height:28px; border-radius:50%; display:grid; place-content:center; font-style:normal; font-size:11px; font-weight:700;
  background:var(--grad-mark, var(--accent)); color:var(--on-accent, #fff); }
.pp b { font-weight:500; font-size:13px; }
.pp em { font-style:normal; font-size:11.5px; color:var(--muted); }

/* ── Portal: journey, one track per service ───────── */
.pj-list { display:grid; gap:16px; }
.jt { border:1px solid var(--line); border-radius:var(--r, 20px); background:var(--surface); padding:18px 20px 20px; box-shadow:var(--shadow-sm, none);
  animation:jtin .6s var(--ease, ease) both; animation-delay:var(--d, 0ms); }
@keyframes jtin { from { opacity:0; transform:translateY(10px); } }
.jt-h { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px; }
.jt-h b { font-size:16px; font-weight:600; color:var(--ink); }
.jt-h .sub { display:block; }
.jt-pct { display:flex; align-items:center; gap:10px; }
.jt-pct > span { font-size:22px; font-weight:700; color:var(--accent-text, var(--accent)); letter-spacing:-.02em; }
.jt-rail { list-style:none; margin:0; padding:0 0 4px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(118px, 1fr);
  overflow-x:auto; scrollbar-width:thin; }
/* connectors: each step draws the line to the next one; a finished step fills its line gold */
.jt-s::before, .jt-s::after { content:""; position:absolute; z-index:-1; top:17px; left:50%; width:100%; height:4px; border-radius:4px; }
.jt-s::before { background:var(--line); }
.jt-s:last-child::before, .jt-s:last-child::after, .jt-s:not(.complete)::after { display:none; }
.jt-s.complete::after { background:linear-gradient(90deg, var(--gold), var(--gold-2, var(--gold)));
  animation:jtfill .7s var(--ease, ease) both; animation-delay:calc(var(--i) * 140ms + 250ms); transform-origin:left center; }
@keyframes jtfill { from { transform:scaleX(0); } }
.jt-s { position:relative; z-index:1; display:grid; justify-items:center; text-align:center; gap:8px; padding:0 6px;
  animation:jtin .5s var(--spring, ease) both; animation-delay:calc(var(--i) * 70ms + 150ms); }
.jt-dot { width:38px; height:38px; border-radius:50%; display:grid; place-content:center; font-weight:700; font-size:13px;
  background:var(--surface); border:2px solid var(--line-2); color:var(--muted); transition:transform .3s var(--spring, ease); }
.jt-s.complete .jt-dot { background:linear-gradient(145deg, var(--gold-2, var(--gold)), var(--gold)); border-color:var(--gold); color:var(--gold-ink, #3a2600); }
.jt-s.working .jt-dot, .jt-s.submitted .jt-dot { border-color:var(--accent); color:var(--accent-text, var(--accent)); }
.jt-s.waiting_client .jt-dot { border-color:var(--warn); color:var(--warn); background:var(--warn-soft, var(--surface)); }
.jt-s.rejected .jt-dot { border-color:var(--bad); color:var(--bad); }
.jt-s.now .jt-dot { transform:scale(1.14); background:var(--grad-accent, var(--accent)); border-color:transparent; color:var(--on-accent, #fff);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation:jtpulse 2.2s ease-out infinite; }
.jt-s.now.waiting_client .jt-dot { background:var(--warn); }
@keyframes jtpulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow:0 0 0 14px transparent; } }
.jt-l { display:grid; gap:3px; justify-items:center; }
.jt-l b { font-size:12.5px; font-weight:500; line-height:1.3; color:var(--ink); }
.jt-s.complete .jt-l b { color:var(--ink-2); }
.jt-l em { font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:1px 8px; border-radius:99px; background:var(--soft); color:var(--muted); }
.jt-l em.client { background:var(--gold-soft, var(--soft)); color:var(--gold-ink, var(--ink)); }
.jt-l small { font-size:11px; color:var(--muted); }
.jt-s.now .jt-l small { color:var(--accent-text, var(--accent)); font-weight:600; }

@media (max-width: 700px) {
  .jt-rail { grid-auto-flow:row; grid-auto-columns:auto; gap:14px; overflow:visible; }
  .jt-s::before, .jt-s::after { top:38px; left:17px; width:4px; height:calc(100% - 24px); }
  .jt-s.complete::after { background:linear-gradient(180deg, var(--gold), var(--gold-2, var(--gold))); animation-name:jtfillv; transform-origin:center top; }
  @keyframes jtfillv { from { transform:scaleY(0); } }
  .jt-s { grid-template-columns:38px 1fr; justify-items:start; text-align:left; gap:12px; padding:0; }
  .jt-l { justify-items:start; }
  .pj-ring { width:110px; height:110px; }
  .pj-ring b { font-size:28px; }
}
@media (prefers-reduced-motion: reduce) { .jt, .jt-s, .jt-s::after, .pj-ring .rf, .jt-s.now .jt-dot { animation:none; } }
#ucl-wrap input { width:100%; }

/* ── Portal: directors and shareholders, grouped ──── */
.pgrp { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:18px; }
.pgrp section { border:1px solid var(--line); border-radius:14px; padding:12px 14px 6px; background:var(--soft); }
.pgrp h4 { margin:0 0 8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; }
.pgrp h4 span { font-size:11px; letter-spacing:0; padding:0 7px; border-radius:99px; background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.pgrp ul { list-style:none; margin:0; padding:0; }
.pgrp li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.pgrp li:first-child { border-top:0; }
.pgrp li i { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-content:center; font-style:normal; font-size:11px; font-weight:700;
  background:var(--grad-mark, var(--accent)); color:var(--on-accent, #fff); }
.pgrp li span { display:grid; min-width:0; flex:1; }
.pgrp li b { font-weight:500; font-size:13.5px; color:var(--ink); overflow-wrap:anywhere; }
.pgrp li em { font-style:normal; font-size:11px; color:var(--gold-ink, var(--muted)); }
.pgrp li strong { font-size:13px; font-weight:600; color:var(--accent-text, var(--accent)); font-variant-numeric:tabular-nums; }
.pgrp p { margin:4px 0 10px; font-size:13px; }

/* ── Portal: From LAN ─────────────────────────────── */
.fw-sec + .fw-sec { margin-top:20px; }
.fw-sec h3 { margin:0 0 10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.fw-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.fw-card { position:relative; display:grid; grid-template-columns:52px 1fr; gap:12px 14px; padding:14px; border-radius:16px; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-sm, none); animation:jtin .5s var(--ease, ease) both; animation-delay:var(--d, 0ms);
  transition:transform .2s var(--ease, ease), border-color .2s; }
.fw-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--gold) 55%, var(--line)); }
.fw-card.new { border-color:color-mix(in srgb, var(--gold) 70%, var(--line)); background:color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.fw-doc { width:52px; height:64px; border-radius:8px 16px 8px 8px; display:grid; place-content:end center; padding-bottom:8px; position:relative;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--soft)), var(--soft)); border:1px solid var(--line); }
.fw-doc::before { content:""; position:absolute; top:12px; left:10px; right:14px; height:14px;
  background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--muted) 45%, transparent) 0 2px, transparent 2px 6px); }
.fw-doc span { font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:1px 5px; border-radius:4px; background:var(--accent); color:var(--on-accent, #fff); }
.fw-card[data-k="certificate"] .fw-doc span, .fw-card[data-k="registration"] .fw-doc span { background:var(--gold); color:var(--gold-ink, #3a2600); }
.fw-t { display:grid; gap:3px; min-width:0; align-content:start; }
.fw-kind { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.fw-new { font-style:normal; letter-spacing:.04em; font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px; background:var(--gold); color:var(--gold-ink, #3a2600); }
.fw-t b { font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.fw-t p { margin:2px 0 0; font-size:12.5px; color:var(--ink-2, var(--ink)); }
.fw-t small { font-size:11.5px; color:var(--muted); }
.fw-act { grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end; }

/* ── Portal: documents on your file ────────────────── */
table.of tr.of-g td { background:var(--soft); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:8px; padding-bottom:8px; }
table.of tr.of-g span { letter-spacing:0; margin-left:6px; color:var(--ink); }
@media (max-width: 700px) { table.of thead th:nth-child(3), table.of td:nth-child(3) { display:none; } }

/* ── Client file → Work: documents for the client ─── */
.dlv-form { margin:0 18px 16px; padding:14px 16px; border:1px dashed color-mix(in srgb, var(--gold) 60%, var(--line)); border-radius:14px;
  background:color-mix(in srgb, var(--gold) 5%, var(--surface)); display:grid; gap:12px; }
.dlv-file { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dlv-file b { font-weight:600; overflow-wrap:anywhere; }
.dlv-foot { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; }
.dlv-chk { display:inline-flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; }
.dlv-sp { flex:1; }
@media (prefers-reduced-motion: reduce) { .fw-card { animation:none; transition:none; } }