/* Verstak look for the stock MAS 1.28 pages (sign-in, consent, device code,
   device consent, granted / denied, errors). Loaded after the stock MAS CSS by
   the overridden base.html; markup, forms and behaviour stay stock.

   1. The stock Compound design tokens (MAS's own theming layer, @layer
      cpd-semantic) are re-pointed at the Verstak Warehouse palette: these
      unlayered declarations win over the layer without touching any rule.
   2. A few rules scoped under body.vs-mas give the same shapes as the Verstak
      "Подключение устройства" page (body.mp-ui.vs-link in
      marketplace-warehouse.css): 2px ink rules, square corners, Oswald
      uppercase headings / buttons, acid-lime primary, Inter for text,
      white card on #ebebe8. Values are copied from that file. */

@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/verstak/fonts/oswald/oswald-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("/verstak/fonts/oswald/oswald-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/verstak/fonts/oswald/oswald-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("/verstak/fonts/oswald/oswald-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"VerstakLogo";font-display:swap;src:url("/verstak/fonts/Script%20Smooth.ttf") format("truetype")}

/* --- 1. Tokens (Verstak Warehouse values) --------------------------------- */
:root{
    --vs-bg:#ebebe8; --vs-surface:#ffffff; --vs-surface-2:#f4f4f1; --vs-ink:#111111; --vs-on-ink:#ffffff;
    --vs-muted:#5b5b57; --vs-hair:#d2d2cd; --vs-lime:#d6ff2e; --vs-lime-hover:#c4f000; --vs-on-lime:#111111;
    --vs-red:#d42a1c; --vs-red-soft:#ffe7e3; --vs-green:#1f7a3a; --vs-green-soft:#e6f4ea;
    --vs-font-display:"Oswald","Arial Narrow","Roboto Condensed",sans-serif;

    --cpd-color-bg-canvas-default:var(--vs-surface);
    --cpd-color-bg-canvas-disabled:var(--vs-surface-2);
    --cpd-color-bg-subtle-primary:var(--vs-hair);
    --cpd-color-bg-subtle-secondary:var(--vs-surface-2);
    --cpd-color-bg-action-primary-rest:var(--vs-lime);
    --cpd-color-bg-action-primary-hovered:var(--vs-ink);
    --cpd-color-bg-action-primary-pressed:var(--vs-ink);
    --cpd-color-bg-action-primary-disabled:var(--vs-hair);
    --cpd-color-text-on-solid-primary:var(--vs-on-lime);
    --cpd-color-icon-on-solid-primary:var(--vs-on-lime);
    --cpd-color-text-primary:var(--vs-ink);
    --cpd-color-text-secondary:var(--vs-muted);
    --cpd-color-text-link-external:var(--vs-ink);
    --cpd-color-icon-primary:var(--vs-ink);
    --cpd-color-icon-secondary:var(--vs-ink);
    --cpd-color-border-interactive-primary:var(--vs-ink);
    --cpd-color-border-interactive-secondary:var(--vs-ink);
    --cpd-color-border-interactive-hovered:var(--vs-ink);
    --cpd-color-border-focused:var(--vs-lime);
    --cpd-color-bg-critical-subtle:var(--vs-red-soft);
    --cpd-color-border-critical-subtle:var(--vs-red);
    --cpd-color-text-critical-primary:var(--vs-red);
    --cpd-color-icon-critical-primary:var(--vs-red);
    --cpd-color-bg-success-subtle:var(--vs-green-soft);
    --cpd-color-icon-success-primary:var(--vs-green);
    --cpd-color-gray-400:var(--vs-ink);
    --cpd-radius-pill-effect:0px;
}
@media (prefers-color-scheme: dark){
    :root{
        --vs-bg:#0d0d0d; --vs-surface:#161616; --vs-surface-2:#1f1f1f; --vs-ink:#edede8; --vs-on-ink:#111111;
        --vs-muted:#a3a39d; --vs-hair:#343432; --vs-lime:#d6ff2e; --vs-lime-hover:#e4ff6a; --vs-on-lime:#111111;
        --vs-red:#ff6a5c; --vs-red-soft:#3a1512; --vs-green:#6fd08c; --vs-green-soft:#12301b;
    }
}

/* --- 2. Shapes ---------------------------------------------------------------- */
html,body.vs-mas{background:var(--vs-bg);color:var(--vs-ink)}
body.vs-mas{margin:0}

/* Top bar, same as the Verstak pages: white bar, 2px ink rule, script wordmark. */
body.vs-mas .vs-mas-topbar{display:flex;align-items:center;min-height:64px;padding:0 24px;background:var(--vs-surface);border-bottom:2px solid var(--vs-ink);box-sizing:border-box}
body.vs-mas .vs-mas-logo{font-family:"VerstakLogo",cursive;font-size:40px;line-height:1;padding:.32em 0 .08em;color:var(--vs-ink);font-synthesis:none}

/* The stock layout column becomes the Verstak card. */
body.vs-mas .layout-container{min-height:0;margin:28px auto 56px;padding:22px 22px 24px;gap:24px;
    background:var(--vs-surface);border:2px solid var(--vs-ink);border-radius:0;max-width:min(calc(var(--target-width) + 48px),calc(100% - 32px))}
body.vs-mas .page-heading{margin-block-start:0}
body.vs-mas .page-heading .icon{border-radius:0;border:2px solid var(--vs-ink);background:var(--vs-surface)}
body.vs-mas .page-heading .icon.invalid{background:var(--vs-red-soft);border-color:var(--vs-red)}
body.vs-mas .page-heading .icon.success{background:var(--vs-lime)}
body.vs-mas .page-heading .icon.success svg{color:var(--vs-on-lime)}
body.vs-mas .page-heading .header .title{font-family:var(--vs-font-display);font-size:26px;line-height:1.15;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--vs-ink)}
body.vs-mas .page-heading .header .text{font-size:14px;line-height:1.55;color:var(--vs-muted)}

/* Buttons: 2px ink frame, square, Oswald uppercase; primary = lime, hover = ink. */
body.vs-mas .cpd-button{min-height:50px;border-radius:0;font-family:var(--vs-font-display);font-size:17px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
body.vs-mas .cpd-button[data-kind=primary]{border:2px solid var(--vs-ink);background:var(--vs-lime);color:var(--vs-on-lime)}
body.vs-mas .cpd-button[data-kind=secondary]{border:2px solid var(--vs-ink);background:var(--vs-surface);color:var(--vs-ink)}
body.vs-mas .cpd-button[data-kind=tertiary]{border:2px solid transparent;background:transparent;color:var(--vs-muted);text-decoration:none}
@media (hover){
    body.vs-mas .cpd-button[data-kind=primary]:hover{background:var(--vs-ink);color:var(--vs-lime);border-color:var(--vs-ink)}
    body.vs-mas .cpd-button[data-kind=primary]:hover>svg{color:var(--vs-lime)}
    body.vs-mas .cpd-button[data-kind=secondary]:hover{background:var(--vs-ink);color:var(--vs-on-ink);border-color:var(--vs-ink)}
    body.vs-mas .cpd-button[data-kind=tertiary]:hover{border-color:var(--vs-ink);color:var(--vs-ink);background:transparent}
}
body.vs-mas .cpd-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--vs-lime)}
body.vs-mas .cpd-button[data-kind=primary][disabled]{border-color:var(--vs-hair);opacity:.45}
body.vs-mas .cpd-link{color:var(--vs-ink)}

/* Fields: 48px, 2px ink frame, square; the 6-cell device code in Oswald. */
body.vs-mas .cpd-form-label{font-family:var(--vs-font-display);font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--vs-ink)}
body.vs-mas .cpd-text-control{min-height:48px;border:2px solid var(--vs-ink);border-radius:0;background:var(--vs-surface);color:var(--vs-ink)}
body.vs-mas .cpd-text-control:focus{outline:none;box-shadow:0 0 0 3px var(--vs-lime)}
body.vs-mas .cpd-mfa-digit{border:2px solid var(--vs-ink);border-radius:0;font-family:var(--vs-font-display)}
body.vs-mas .cpd-mfa-control{font-family:var(--vs-font-display)}
body.vs-mas .cpd-checkbox-ui{border-radius:0;border:2px solid var(--vs-ink)}
body.vs-mas .cpd-checkbox-input:checked+.cpd-checkbox-ui{background:var(--vs-ink);border-color:var(--vs-ink)}
body.vs-mas .cpd-checkbox-input:checked+.cpd-checkbox-ui svg{color:var(--vs-lime)}
body.vs-mas .cpd-form-inline-field-body .cpd-form-label{font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}

/* Cards / notices on the consent pages: square, 2px rules. */
body.vs-mas .session-card,
body.vs-mas .consent-scope-list,
body.vs-mas section.rounded-xl{border:2px solid var(--vs-ink);border-radius:0;box-shadow:none;background:var(--vs-surface)}
body.vs-mas .session-card .device-type-icon,
body.vs-mas .consent-client-icon{border-radius:0;border:2px solid var(--vs-ink);background:var(--vs-surface)}
body.vs-mas .avatar-placeholder{border-radius:0;border:2px solid var(--vs-ink);background:var(--vs-lime);color:var(--vs-on-lime);font-family:var(--vs-font-display)}
body.vs-mas .cpd-alert{border:2px solid var(--vs-red);border-radius:0;background:var(--vs-red-soft)}
body.vs-mas .cpd-alert-title{color:var(--vs-red)}

body.vs-mas .legal-footer:empty{display:none}
@media (max-width:600px){
    body.vs-mas .vs-mas-topbar{padding:0 16px}
    body.vs-mas .layout-container{margin:16px auto 32px;padding:18px 16px 20px}
    body.vs-mas .page-heading .header .title{font-size:22px}
}