/* PaperHouse (PPH.KZ) — общий стиль сервиса.
   Layout: a bright print shop — white pages, one saturated blue for action, yellow only for small accents
   (the fold of the logo, step numbers, underlines, card corners), light-blue blocks for grouping. */
@import url("/fonts/fonts.css");

:root{
  --blue:#0646F5; --blue-dark:#0436C2; --yellow:#FFDD00; --navy:#10162B; --sky:#F1F6FF;
  --paper:#F6F8FD; --surface:#FFFFFF; --ink:#10162B; --muted:#5A6378; --line:#E2E8F3; --desk:#EAF0FB;
  --accent:#0646F5; --accent-soft:#E7EEFF; --on-accent:#FFFFFF;
  --bar:#FFFFFF; --bar-ink:#10162B; --bar-muted:#5A6378;
  --brass:#FFDD00; --brass-light:#FFDD00;
  --c-vinetki:#0646F5; --c-photobook:#0646F5; --c-calendar:#0646F5; --c-tshirt:#0646F5;
  --ok:#14864F; --warn:#B4651E; --bad:#D0263F;
  --radius:16px; --shadow:0 10px 30px rgba(16,22,43,.08);
  --f-display:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Onest", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
/* the brand is light; keep editors light even when the system is dark (overrides their older inline palettes) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#F6F8FD; --surface:#FFFFFF; --ink:#10162B; --muted:#5A6378; --line:#E2E8F3; --desk:#EAF0FB;
  --accent:#0646F5; --accent-soft:#E7EEFF; --on-accent:#FFFFFF; --ok:#14864F; --warn:#B4651E; --bad:#D0263F; color-scheme:light }}
:root[data-theme="dark"]{
  --paper:#F6F8FD; --surface:#FFFFFF; --ink:#10162B; --muted:#5A6378; --line:#E2E8F3; --desk:#EAF0FB;
  --accent:#0646F5; --accent-soft:#E7EEFF; --on-accent:#FFFFFF; color-scheme:light }

body{background:var(--paper);color:var(--ink);font-family:var(--f-body)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}

/* logo lockup: mark + PaperHouse + PPH.KZ */
.logo{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;line-height:1}
.logo img{height:30px;width:auto;display:block;flex:none}
.logo .wm{display:grid;gap:3px}
.logo b{font:800 21px/1 var(--f-display);letter-spacing:-.03em;color:var(--blue)}
.logo small{font:700 9.5px/1 var(--f-display);letter-spacing:.38em;color:var(--navy);padding-left:1px}
.logo:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}

/* app bar, shared by the dashboard and every editor */
.appbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);color:var(--bar-ink);border-bottom:1px solid var(--line)}
.appbar .in{max-width:1280px;margin:0 auto;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.appbar .crumb{color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:6px}
.appbar .crumb:hover{color:var(--blue)}
.appbar .ptitle{min-width:0;flex:1 1 220px;max-width:420px;background:transparent;border:1px solid transparent;color:var(--ink);font:700 15px/1.2 var(--f-body);padding:7px 9px;border-radius:9px}
.appbar .ptitle:hover{border-color:var(--line)} .appbar .ptitle:focus{outline:none;border-color:var(--blue);background:var(--sky)}
.appbar .sp{flex:1}
.appbar .status{font-size:12px;color:var(--muted);font-family:var(--f-mono);white-space:nowrap}
.appbar .status.dirty{color:#B4651E} .appbar .status.err{color:var(--bad)}
.appbar .who{font-size:13px;color:var(--muted);font-weight:600}
.abtn{appearance:none;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:700 13px/1 var(--f-body);padding:10px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.abtn:hover{border-color:var(--blue);color:var(--blue)}
.abtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.abtn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.abtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.prodtag{font:700 10.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;color:var(--navy);background:var(--yellow)}

/* editor pages: their own top bar becomes a step bar under the app bar */
body.editor > header{position:sticky;top:57px;z-index:20}
body.editor > header .brand{display:none}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:50;box-shadow:0 8px 24px rgba(16,22,43,.25)}

/* editors: unify controls with the brand */
body.editor h1{font-size:clamp(26px,3vw,36px);line-height:1.1}
body.editor h3{font-size:18px}
body.editor .panel{border-radius:var(--radius);border-color:var(--line);box-shadow:0 1px 0 rgba(16,22,43,.02)}
body.editor .btn{border-radius:999px;font-weight:700}
body.editor .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
body.editor .btn.primary:hover{background:var(--blue-dark)}
body.editor nav.steps button[aria-current="step"]{background:var(--sky);color:var(--ink)}
body.editor nav.steps button[aria-current="step"] i{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
body.editor .seg input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
body.editor .tgl input:checked{background:var(--blue)}
body.editor .eyebrow,body.editor .kicker{color:var(--blue)}
body.editor .banner{background:var(--sky);border:1px solid #D6E3FF}
body.editor .desk{background:var(--desk)}
a.btn{text-decoration:none}
@media (max-width:700px){.appbar{position:static} body.editor > header{top:0} .appbar .status{order:9;flex-basis:100%} .logo small{display:none}}

/* editor kit: retouch panel, ranges, font sample */
.rtprev{display:grid;gap:6px;justify-items:start}
.rtprev canvas{border-radius:10px;display:block;max-width:100%;height:auto}
.rtcap{display:flex;justify-content:space-between;width:100%;max-width:520px;font:600 11px/1 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.rtsl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 18px}
.rtsl.off{opacity:.55}
.rtl{display:flex;justify-content:space-between;gap:8px}
.rtl b{font:600 12px/1 var(--f-mono);color:var(--blue)}
input[type=range]{width:100%;accent-color:var(--blue)}
.rangebar{display:flex;align-items:center;gap:10px}
.rangebar input{flex:1;min-width:0}
.btn.sm[aria-pressed="true"]{background:var(--sky);border-color:var(--blue);color:var(--blue)}
.fsample{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--line)}
.mm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}
.mm span.x{padding-bottom:12px;color:var(--muted);font-weight:700}
body.editor .kidsbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
body.editor .btn.sm{padding:7px 11px;font-size:12px}