/* Cheapa Docs — base + components. Mobile-first. */
@import url('tokens.css');

/* ---------- Dark theme variables (kept here so they load with cache-busted app.css) ---------- */
html[data-theme="dark"] {
  --ink:      #EAECEF;
  --ink-2:    #C2C7CE;
  --paper:    #0E1013;
  --card:     #171A20;
  --line:     #272B33;
  --line-2:   #1E222A;
  --muted:    #9AA1AC;
  --muted-2:  #6B7280;
  --green-100: rgba(18, 224, 138, .14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }

/* ---------- Accent themes (8 colours; Spring Green is the default) ---------- */
html[data-accent="blue"]   { --green:#2E90FA; --green-600:#1570CD; --green-700:#175CD3; --green-100:#EFF8FF; --green-ink:#fff; --green-glow:rgba(46,144,250,.35); }
html[data-accent="purple"] { --green:#7A5AF8; --green-600:#6938EF; --green-700:#5925DC; --green-100:#F4F3FF; --green-ink:#fff; --green-glow:rgba(122,90,248,.35); }
html[data-accent="teal"]   { --green:#15B79E; --green-600:#0E9384; --green-700:#107569; --green-100:#F0FDF9; --green-ink:#fff; --green-glow:rgba(21,183,158,.35); }
html[data-accent="orange"] { --green:#FB6514; --green-600:#EC4A0A; --green-700:#C4320A; --green-100:#FFF6ED; --green-ink:#fff; --green-glow:rgba(251,101,20,.35); }
html[data-accent="pink"]   { --green:#F63D68; --green-600:#E31B54; --green-700:#C01048; --green-100:#FFF1F3; --green-ink:#fff; --green-glow:rgba(246,61,104,.35); }
html[data-accent="red"]    { --green:#F04438; --green-600:#D92D20; --green-700:#B42318; --green-100:#FEF3F2; --green-ink:#fff; --green-glow:rgba(240,68,56,.35); }
html[data-accent="indigo"] { --green:#444CE7; --green-600:#3538CD; --green-700:#2D31A6; --green-100:#EEF4FF; --green-ink:#fff; --green-glow:rgba(68,76,231,.35); }
/* In dark mode, tint backgrounds go neutral so any accent reads well */
html[data-theme="dark"][data-accent] { --green-100: rgba(255,255,255,.10); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
img, svg, iframe, table { max-width: 100%; }
.i-inline { vertical-align: -3px; margin-right: 6px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4 { line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: -0.02em; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--s-2);} .gap-3 { gap: var(--s-3);} .gap-4 { gap: var(--s-4);} .gap-6 { gap: var(--s-6);}
.grid  { display: grid; gap: var(--s-5); }
.muted { color: var(--muted); }
.center { text-align: center; }
.hide-mobile, .btn.hide-mobile { display: none; }

/* ---------- Brand lockup (text, crisp on any bg) ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--fw-bold);
  font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px var(--green-100); flex: none; }
.brand b { font-weight: var(--fw-bold); }
.brand span { font-weight: var(--fw-medium); color: var(--muted); }
.on-dark .brand, .brand.on-dark { color: var(--white); }
.on-dark .brand span { color: rgba(255,255,255,.6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding-inline: 20px; border-radius: var(--r-pill);
  font-weight: var(--fw-semibold); font-size: 15px; cursor: pointer;
  border: 1px solid transparent; transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--green-ink); box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-600); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--black); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--muted-2); }
.btn-block { width: 100%; }
.btn-lg { height: 54px; padding-inline: 28px; font-size: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--s-6);
}
.card-flat { box-shadow: none; }

/* ---------- Public top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .container { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: none; align-items: center; gap: var(--s-6); }
.nav-links a { color: var(--muted); font-weight: var(--fw-medium); font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: var(--s-3); }

/* ---------- Hero ---------- */
.hero { padding: var(--s-8) 0 var(--s-7); }
.hero-panel {
  background: radial-gradient(120% 140% at 50% -10%, #1b1e24 0%, var(--black) 60%);
  color: var(--white); border-radius: var(--r-xl); padding: var(--s-8) var(--s-6);
  text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero-panel::after {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 60%;
  background: radial-gradient(50% 100% at 50% 0%, var(--green-glow), transparent 70%);
  pointer-events: none;
}
.hero-logo { width: 108px; margin: 0 auto var(--s-6); opacity: .98;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.hero h1 { font-size: clamp(28px, 7vw, 46px); color: var(--white); }
.hero h1 .accent { color: var(--green); }
.hero-sub { color: rgba(255,255,255,.72); font-size: clamp(15px, 4vw, 18px); margin-top: var(--s-4); }
.hero-actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-7); align-items: center; }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: var(--fw-medium);
  background: var(--green-100); color: var(--green-700);
}
.chip-line { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.crown { color: var(--warn); }

/* ---------- Feature grid ---------- */
.features { padding: var(--s-8) 0; }
.feature { }
.feature .ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700); margin-bottom: var(--s-4);
}
.feature h3 { font-size: 18px; }
.feature p { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- Section heading ---------- */
.section-head { text-align: center; max-width: 620px; margin: 0 auto var(--s-7); }
.section-head .eyebrow { color: var(--green-700); font-weight: var(--fw-semibold); font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; }
.section-head h2 { font-size: clamp(24px, 6vw, 34px); margin-top: 8px; }
.section-head p { color: var(--muted); margin-top: var(--s-3); }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: rgba(255,255,255,.72); margin-top: var(--s-9); }
.footer .container { padding-block: var(--s-8); }
.footer-logo { width: 92px; margin-bottom: var(--s-5); opacity: .9; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--green); }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.footer h4 { color: var(--white); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer .contact li { list-style: none; margin-bottom: 8px; font-size: 14px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--s-7); padding-top: var(--s-5);
  font-size: 13px; color: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: 8px; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--ink-2); margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--muted-2); margin-top: 6px; }
.input, textarea.input, select.input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--white); font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none;
}
textarea.input { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; }
.input:focus, textarea.input:focus, select.input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-100);
}
.input::placeholder { color: var(--muted-2); }
.form-error { background: #FEF3F2; color: #B42318; border: 1px solid #FDA29B;
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; margin-bottom: var(--s-5); }
.form-ok { background: var(--green-100); color: var(--green-ink); border: 1px solid var(--green);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; margin-bottom: var(--s-5); }

/* ---------- Auth screens ---------- */
.auth-wrap { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: var(--s-7) var(--s-5); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-8) var(--s-7); }
.auth-card h1 { font-size: 26px; }
.auth-sub { color: var(--muted); margin: 6px 0 var(--s-7); font-size: 15px; }
.auth-alt { text-align: center; margin-top: var(--s-6); font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--green-700); font-weight: var(--fw-semibold); }
.welcome-emoji { font-size: 40px; }

/* ---------- Password field: show/hide + strength ---------- */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 48px; width: 44px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted-2); border-radius: var(--r-sm);
}
.pw-toggle:hover { color: var(--ink-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.pw-toggle .i-hide { display: none; }
.pw-toggle[aria-pressed="true"] .i-show { display: none; }
.pw-toggle[aria-pressed="true"] .i-hide { display: block; }

.pw-caps { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px;
  color: #B54708; font-weight: var(--fw-medium); }
.pw-caps .i-inline { color: #DC6803; }

.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 10px; }
.pw-meter span { height: 5px; border-radius: 999px; background: var(--line); transition: background .2s ease; }
.pw-meter span.lvl0 { background: #F04438; }
.pw-meter span.lvl1 { background: #F79009; }
.pw-meter span.lvl2 { background: #FDB022; }
.pw-meter span.lvl3 { background: #7CC334; }
.pw-meter span.lvl4 { background: var(--green); }

.pw-strength { font-size: 12.5px; font-weight: var(--fw-semibold); margin-top: 6px; min-height: 16px; color: var(--muted); }
.pw-strength.lvl0 { color: #B42318; }
.pw-strength.lvl1 { color: #B54708; }
.pw-strength.lvl2 { color: #B54708; }
.pw-strength.lvl3 { color: #4F7A21; }
.pw-strength.lvl4 { color: var(--green-700); }

.pw-reqs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pw-reqs li { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted-2); }
.pw-reqs li .i-inline { color: var(--line-strong, #C7CBD1); flex: none; }
.pw-reqs li.ok { color: var(--green-700); }
.pw-reqs li.ok .i-inline { color: var(--green); }

.pw-match { font-size: 12.5px; font-weight: var(--fw-medium); margin-top: 7px; min-height: 15px; }
.pw-match.ok { color: var(--green-700); }
.pw-match.no { color: #B54708; }

[data-theme="dark"] .pw-meter span { background: #24282F; }
[data-theme="dark"] .pw-reqs li .i-inline { color: #3A3F49; }
[data-theme="dark"] .pw-caps { color: #FDB022; }

/* ---------- Home = create-a-document gallery ---------- */
.create-hero { padding: var(--s-7) 0 var(--s-5); text-align: center; }
.create-hero h1 { font-size: 30px; line-height: 1.1; }
.create-hero p { color: var(--muted); margin-top: 8px; font-size: 15px; max-width: 560px; margin-inline: auto; }
.create-wrap { padding-bottom: var(--s-8); }
.type-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.type-pills::-webkit-scrollbar { display: none; }
.type-pill { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-2); font-size: 14px; font-weight: var(--fw-semibold);
  white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.type-pill:hover { border-color: var(--green); }
.type-pill.active { background: #0B0B0B; border-color: #0B0B0B; color: #fff; }
.create-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: var(--s-6); }
@media (min-width: 720px) {
  .create-hero h1 { font-size: 38px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-theme="dark"] .type-pill { background: var(--card); border-color: var(--line); color: var(--muted); }
[data-theme="dark"] .type-pill.active { background: var(--green); border-color: var(--green); color: var(--green-ink); }

/* ---------- Clickable document-type cards ---------- */
.doc-type-link { transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease; }
.doc-type-link:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.doc-type-link .arrow { color: var(--muted-2); font-size: 18px; transition: transform .15s ease, color .15s ease; }
.doc-type-link:hover .arrow { color: var(--green-700); transform: translateX(3px); }

/* ---------- Public mobile bottom nav ---------- */
.mobilenav { display: none; }
@media (max-width: 719px) {
  .mobilenav {
    display: flex; position: fixed; inset: auto 0 0 0; height: 60px; z-index: 60;
    background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(10px);
    border-top: 1px solid var(--line); justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilenav a { display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10.5px; color: var(--muted-2); font-weight: 500; flex: 1; }
  .mobilenav a:active { color: var(--green-700); }
  body { padding-bottom: 60px; }
}

/* ---------- Reviews ---------- */
.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rv-stars span { color: var(--line); display: inline-flex; }
.rv-stars span.on { color: #F5B301; }
.rv-picker { display: flex; gap: 6px; }
.rv-picker button { background: none; border: 0; cursor: pointer; color: var(--line); padding: 2px; }
.rv-picker button.on { color: #F5B301; }
.rv-list { display: grid; gap: 14px; }
.rv-item { padding: 18px; }
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.rv-top b { font-size: 15px; }
.rv-date { margin-left: auto; color: var(--muted-2); font-size: 12px; }
.rv-msg { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }

/* ---------- Pricing ---------- */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.hot { border-color: var(--green); box-shadow: var(--shadow-green); }
.price-card .price { font-size: 22px; font-weight: 700; margin: 14px 0; color: var(--green-700); }
.price-feats { list-style: none; margin: 0 0 20px; padding: 0; }
.price-feats li { padding: 7px 0; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }

/* ---------- Toggle switch ---------- */
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; }
.switch .slider::before { content: ""; position: absolute; height: 21px; width: 21px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::before { transform: translateX(19px); }

/* ---------- Dark theme overrides (shared) ---------- */
html[data-theme="dark"] { color-scheme: dark; } /* native date pickers, selects, scrollbars go dark */
[data-theme="dark"] .nav { background: rgba(23,26,32,.85); border-color: var(--line); }
[data-theme="dark"] .input, [data-theme="dark"] textarea.input, [data-theme="dark"] select.input {
  background: #101318; color: var(--ink); border-color: #2A2F37; }
[data-theme="dark"] .input:focus, [data-theme="dark"] textarea.input:focus, [data-theme="dark"] select.input:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
[data-theme="dark"] .input::placeholder { color: #4E5560; }
[data-theme="dark"] .field label { color: var(--muted); }
[data-theme="dark"] .field .hint { color: var(--muted-2); }
[data-theme="dark"] .input[readonly] { background: #171A20; color: var(--muted); }
[data-theme="dark"] .form-error { background: rgba(240,68,56,.12); color: #FDA29B; border-color: rgba(240,68,56,.4); }
[data-theme="dark"] .form-ok { background: var(--green-100); color: var(--green); border-color: var(--green); }
[data-theme="dark"] .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .auth-card { background: var(--card); }
[data-theme="dark"] .mobilenav { background: rgba(23,26,32,.96); border-color: var(--line); }
[data-theme="dark"] .chip { color: var(--green); background: var(--green-100); }
[data-theme="dark"] .card { background: var(--card); border-color: var(--line); }

/* ---------- Status page (dev) ---------- */
.status-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pill-ok { color: var(--up); font-weight: 600; }
.pill-bad { color: var(--down); font-weight: 600; }

/* ---------- Responsive: tablet/desktop ---------- */
@media (min-width: 720px) {
  .hide-mobile { display: revert; }
  .btn.hide-mobile { display: inline-flex; }
  .nav-links { display: flex; }
  .hero-actions { flex-direction: row; justify-content: center; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 2fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .hero-panel { padding: var(--s-10) var(--s-8); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}