/* The account pages (Task 0.9c): design/source/v1-static-screens/login.html's styles with their values
   unchanged, scoped to .page-login (on <html>), loaded after kit.css (byte-identical, D85d).
   - The rules login.html shares with kit.css word for word are not repeated (*, [hidden], body, button,
     input/select, svg, .ico, .num, .ltr, :focus-visible, .ltr-in, .btn .ico, .btn-primary:hover).
   - The kit rules whose selector login.html reuses with other values are overridden here, and the kit
     values login.html does not have are reset (.ig .add, .btn:disabled, .bar, .grid, .fi, .mh, .toast).
   - Logical properties only (CLAUDE.md §5). The select chevron's position has no logical form: it is
     the one physical exception, noted on its lines. The LTR layout mirrors the RTL one ([dir=ltr]).
   - No new token: --primary-700 of login.html (#0f4aa6) is not a kit token, so its one use is the same
     literal login.html itself uses for .art's background (reported under "New tokens or components"). */

html.page-login,.page-login body{height:100%}

.page-login .page{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
/* form side */
.page-login .side{display:flex;flex-direction:column;padding-block:28px 22px;padding-inline:40px;background:var(--surface);min-height:100%}
.page-login .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.page-login .brand{display:flex;align-items:center;gap:10px}
.page-login .brand svg{width:40px;height:40px;color:var(--primary)}
.page-login .brand b{display:block;font-size:17px;line-height:1.25}
.page-login .brand small{font-size:12px;color:var(--muted)}
.page-login .lang{display:flex;align-items:center;gap:8px;height:36px;padding-block:0;padding-inline:12px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;color:var(--text-2);direction:ltr;text-decoration:none}
.page-login .lang:hover{background:var(--soft)}
.page-login .lang .ico{width:17px;height:17px}
.page-login .center{flex:1;display:flex;align-items:center;justify-content:center;padding-block:28px;padding-inline:0}
.page-login .box{width:min(420px,100%);display:flex;flex-direction:column;gap:18px;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.page-login .box h1{margin:0;font-size:26px;line-height:1.35;text-wrap:balance}
.page-login .box .lead{margin-block:4px 0;margin-inline:0;color:var(--muted);font-size:14px}
.page-login .box form{display:flex;flex-direction:column;gap:18px}
.page-login .box #lf,.page-login .box #ff{gap:16px} /* login.html's two forms (inline style); elsewhere the parts are .box children (18px) */
.page-login .field{display:flex;flex-direction:column;gap:6px}
.page-login .field > label,.page-login .field .lblrow{font-size:14px;font-weight:600}
.page-login .lblrow{display:flex;justify-content:space-between;align-items:center}
.page-login .link{color:var(--primary);font-weight:600;font-size:13.5px;text-decoration:none}
.page-login .link:hover{text-decoration:underline}
.page-login .ig{display:flex;align-items:stretch;height:48px;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.page-login .ig:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-100)}
.page-login .ig.err{border-color:var(--red);box-shadow:0 0 0 4px var(--red-100)}
.page-login .ig .add{flex:none;width:46px;min-width:0;display:grid;place-items:center;padding-block:0;padding-inline:0;background:none;border-inline-end:0;color:var(--muted)}
.page-login .ig .add .ico{width:19px;height:19px}
.page-login .ig input,.page-login .ig select{flex:1;min-width:0;border:0;outline:none;background:transparent;padding-block:0;padding-inline:4px;font-size:15px}
.page-login .ig select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:left 14px center} /* physical: the chevron sits at the inline end; background-position has no logical keyword */
.page-login[dir=ltr] .ig select{background-position:right 14px center} /* physical: the LTR inline end */
.page-login .ig .eye{width:46px;display:grid;place-items:center;color:var(--muted)}
.page-login .ig .eye:hover{color:var(--primary)}
.page-login[dir=ltr] .ltr-in{text-align:start}
.page-login .ferr{font-size:12.5px;color:var(--red);font-weight:600;display:flex;align-items:center;gap:6px}
.page-login .ferr .ico{width:15px;height:15px}
.page-login .caps{font-size:12.5px;color:#b45309;font-weight:600;display:flex;align-items:center;gap:6px}
.page-login .caps .ico{width:15px;height:15px}
.page-login .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.page-login .chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);cursor:pointer}
.page-login .chk input{width:17px;height:17px;accent-color:var(--primary)}
.page-login .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding-block:0;padding-inline:22px;border-radius:10px;font-weight:700;font-size:15.5px;transition:background .15s,transform .1s;white-space:nowrap;text-decoration:none}
.page-login .btn:active{transform:scale(.99)}
.page-login .btn:disabled{opacity:1}
.page-login .btn-primary{background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(22,104,227,.28);width:100%}
.page-login .btn-primary:disabled{background:#9dbcf0;box-shadow:none;cursor:not-allowed}
.page-login .btn-out{border:1px solid #cfd6e0;background:#fff;width:100%}
.page-login .btn-out:hover{background:var(--soft);border-color:#cfd6e0}
/* Task 1.22d: a link drawn as an outline button (the over-limit page) keeps the button text colour, not the link colour. */
.page-login a.btn-out{color:inherit}
.page-login .spin{width:19px;height:19px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-login .alert{display:flex;gap:10px;align-items:flex-start;padding-block:11px;padding-inline:13px;border-radius:10px;font-size:13.5px;line-height:1.6}
.page-login .alert .ico{width:18px;height:18px;margin-block-start:2px}
.page-login .alert.err{background:var(--red-50);color:#b91c1c}
.page-login .alert.warn{background:var(--orange-50);color:#9a4a0b}
.page-login .alert.info{background:var(--primary-50);color:#0f4aa6}
.page-login .alert.ok{background:var(--green-50);color:#15803d}
.page-login .alert b{font-weight:700}
.page-login .demo{border:1px dashed #c7d2e2;border-radius:12px;padding-block:12px;padding-inline:14px;background:var(--soft)}
.page-login .demo .dh{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);margin-block-end:8px;gap:8px}
.page-login .demo .dh b{color:var(--text-2);font-size:13px}
.page-login .demo .dh .demo-pw{color:var(--primary)}
.page-login .demo .accs{display:flex;gap:6px;flex-wrap:wrap}
.page-login .acc{display:flex;align-items:center;gap:8px;padding-block:6px;padding-inline:10px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;color:var(--text-2)}
.page-login .acc:hover{border-color:#b9cff5;background:var(--primary-50);color:var(--primary)}
.page-login .acc .av{width:24px;height:24px;border-radius:50%;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;font-size:10.5px;font-weight:700;direction:ltr}
.page-login .acc small{font-weight:500;color:var(--muted)}
.page-login .back{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-2);font-size:13.5px;align-self:flex-start;text-decoration:none}
.page-login .back.mid{align-self:center}
.page-login .back:hover{color:var(--primary)}
.page-login .back .ico{width:17px;height:17px}
.page-login .who{display:flex;align-items:center;gap:12px;padding-block:10px;padding-inline:12px;border:1px solid var(--line);border-radius:12px}
.page-login .who .av{width:40px;height:40px;border-radius:50%;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;font-weight:700;direction:ltr;flex:none}
.page-login .who b{display:block;font-size:14px}
.page-login .who small{color:var(--muted);font-size:12.5px}
.page-login .who small.ltr{display:inline-block}
.page-login .who .chg{margin-inline-start:auto}
.page-login .otp{display:flex;gap:10px;justify-content:space-between;direction:ltr}
.page-login .otp input{width:100%;min-width:0;height:58px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-size:24px;font-weight:700;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff}
.page-login .otp input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-100)}
.page-login .otp.err input{border-color:var(--red)}
.page-login .otp.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.page-login .hint{font-size:12.5px;color:var(--muted)}
.page-login p.hint{margin:0}
.page-login .meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-block-start:2px}
.page-login .meter i{height:5px;border-radius:3px;background:#e5e9f0;transition:background .2s}
.page-login .meter[data-level="1"] i:nth-child(-n+1){background:var(--red)}
.page-login .meter[data-level="2"] i:nth-child(-n+2){background:var(--amber)}
.page-login .meter[data-level="3"] i:nth-child(-n+3){background:var(--green-500)}
.page-login .meter[data-level="4"] i{background:var(--green)}
.page-login .rules{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:12.5px;color:var(--muted)}
.page-login .rules span{display:flex;align-items:center;gap:6px}
.page-login .rules .ico{width:14px;height:14px;stroke-width:2.4}
.page-login .rules .ok{color:var(--green)}
.page-login .rules .i-ok,.page-login .rules .ok .i-no{display:none}
.page-login .rules .ok .i-ok{display:block}
.page-login .big-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center}
.page-login .big-ic .ico{width:32px;height:32px}
.page-login .big-ic.primary{background:var(--primary-50);color:var(--primary)}
.page-login .big-ic.orange{background:var(--orange-50);color:var(--orange)}
.page-login .big-ic.green{background:var(--green-50);color:var(--green)}
.page-login .lead b{color:var(--text)}
.page-login .progress-row{margin-block-end:6px}
.page-login .bar{display:block;height:6px;border-radius:3px;background:#e8eef7;overflow:hidden}
.page-login .bar i{display:block;height:100%;background:var(--primary);width:0;transition:width 1.8s ease}
.page-login .bar i.full{width:100%}
.page-login .ico-forward{transform:scaleX(-1)}
.page-login[dir=ltr] .ico-forward{transform:none}
.page-login[dir=ltr] .ico-flip{transform:scaleX(-1)}
.page-login .foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);border-block-start:1px solid var(--line-2);padding-block-start:14px}
.page-login .foot span{display:flex;align-items:center;gap:6px}
.page-login .foot .ico{width:14px;height:14px}

/* the enrolment and the recovery codes (no prototype, D94: composed from the login card's parts) */
.page-login .qr{align-self:center;width:180px;height:180px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.page-login .qr svg{width:100%;height:100%}
.page-login .manual-key{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:10px;padding-inline:12px;border:1px dashed #c7d2e2;border-radius:10px;background:var(--soft);font-weight:700;font-size:13.5px;letter-spacing:.03em;direction:ltr}
.page-login .manual-key span{min-width:0;overflow-wrap:anywhere}
.page-login .manual-key .link{flex:none;white-space:nowrap;letter-spacing:normal}
.page-login .codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin:0;list-style:none}
.page-login .codes li{padding-block:8px;padding-inline:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--soft);font-weight:700;text-align:center;direction:ltr}
.page-login .acts{display:flex;gap:10px}
.page-login .acts .btn{flex:1}

/* brand side */
.page-login .art{position:relative;overflow:hidden;background:#0f4aa6;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding-block:44px;padding-inline:48px}
.page-login .art::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 420px at 85% 10%,rgba(255,255,255,.14),transparent 60%),
  radial-gradient(600px 400px at 10% 100%,rgba(22,104,227,.9),transparent 70%);pointer-events:none}
.page-login[dir=ltr] .art::before{background:
  radial-gradient(700px 420px at 15% 10%,rgba(255,255,255,.14),transparent 60%),
  radial-gradient(600px 400px at 90% 100%,rgba(22,104,227,.9),transparent 70%)}
.page-login .art .grid{display:block;position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 30%,transparent 90%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 90%)}
.page-login .art > *{position:relative}
.page-login .art h2{margin:0;font-size:32px;line-height:1.35;max-inline-size:520px;text-wrap:balance}
.page-login .art p{margin-block:10px 0;margin-inline:0;max-inline-size:470px;font-size:15px;color:rgba(255,255,255,.82);line-height:1.8}
.page-login .mock{align-self:center;width:min(520px,100%);background:#fff;color:var(--text);border-radius:16px;box-shadow:0 30px 60px rgba(4,20,60,.45);padding:16px;display:flex;flex-direction:column;gap:12px;transform:rotate(-1.5deg)}
.page-login[dir=ltr] .mock{transform:rotate(1.5deg)}
.page-login .mock .mh{display:flex;justify-content:space-between;align-items:center;padding-block:0;padding-inline:0;border-block-end:0}
.page-login .mock .mh b{font-size:14px}
.page-login .mock .mh span{font-size:11px;color:var(--muted)}
.page-login .mk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.page-login .mk div{border:1px solid var(--line-2);border-radius:10px;padding-block:8px;padding-inline:10px;background:var(--soft)}
.page-login .mk small{display:block;font-size:10.5px;color:var(--muted)}
.page-login .mk b{font-size:15px;direction:ltr;display:block;text-align:end}
.page-login[dir=ltr] .mk b{text-align:start}
.page-login .mk em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--green)}
.page-login .mock svg{width:100%;height:auto}
.page-login .feats{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;max-inline-size:560px}
.page-login .feat{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.9)}
.page-login .feat .fi{width:34px;height:34px;border-radius:9px;border:0;padding-block:0;padding-inline:0;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.page-login .feat .fi .ico{width:17px;height:17px}
.page-login .feat b{display:block;color:#fff;font-size:14px}
.page-login .toast{position:fixed;inset-block-end:calc(20px + env(safe-area-inset-bottom,0px));inset-inline:0;margin-inline:auto;inline-size:max-content;max-inline-size:calc(100% - 32px);transform:none;background:#0f172a;color:#fff;padding-block:10px;padding-inline:16px;border-radius:10px;font-size:13.5px;z-index:90;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;align-items:center;gap:10px;animation:toast-in .2s}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
.page-login .toast .ico{width:16px;height:16px;color:#4ade80}

@media (max-width:1000px){
  .page-login .page{grid-template-columns:1fr}
  .page-login .art{display:none}
  .page-login .side{padding-block:22px 18px;padding-inline:24px}
}
@media (max-width:480px){
  .page-login .side{padding-block:18px 14px;padding-inline:16px}
  .page-login .box h1{font-size:22px}
  .page-login .otp{gap:6px}
  .page-login .otp input{height:50px;font-size:20px}
  .page-login .rules{grid-template-columns:1fr}
  .page-login .codes{grid-template-columns:1fr}
}
@media print{
  .page-login .art,.page-login .top,.page-login .foot,.page-login .no-print{display:none}
}