/* Liturgia site dark theme - matches the app's dark aesthetic */
:root{
  --bg:#23272a;
  --panel:#2a2a2a;
  --muted:#999;
  --text:#eee;
  --accent:#0078d4;
  --card:#1f2426;

  /* Scrollbar theme tokens */
  --scrollbar-track: var(--panel);
  --scrollbar-thumb: rgba(255,255,255,0.06);
  --scrollbar-thumb-hover: rgba(255,255,255,0.12);
  --scrollbar-width: 12px;
}
body.dark{background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;margin:0}

/* Prevent layout shift when pages differ in content height by always reserving vertical scrollbar space */
html { height: 100%; }
body { min-height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

/* Scrollbar styling (Firefox + WebKit) */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* WebKit based browsers */
::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* Download grid buttons */
.download-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.download-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 18px;min-width:160px;min-height:280px;height:auto !important;line-height:normal !important;text-align:center;background:transparent;border:1px solid rgba(255,255,255,0.04);border-radius:10px;color:var(--text);text-decoration:none;box-sizing:border-box;overflow:visible}
.download-btn .download-icon{flex:0 0 auto}
.download-btn .download-label{flex:0 0 auto}
.download-btn:hover{border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.01)}
/* SVGs inside .download-icon should be sized to match image logos */
.download-icon svg{width:64px;height:64px;color:#ffffff;display:block}
/* Unified logo handling: applies to <img> and inline <svg> */
.download-logo{width:64px;height:64px;display:block;color:#ffffff;filter:none;opacity:1;object-fit:contain;margin-top:6px}
.download-btn:hover .download-logo{filter:none;opacity:1}

/* Ensure label text isn't clipped and has room */
.download-label{line-height:1.2;padding:6px 2px;margin-bottom:6px}
.download-label{display:block;font-weight:600;font-size:14px;margin-top:4px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.download-btn:focus{outline:3px solid rgba(0,120,212,0.14);outline-offset:2px}
/* Prevent mobile browsers (iOS) from auto-resizing text and zooming on form focus */
html,body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
/* Use border-box globally to make sizing predictable */
*,*::before,*::after{box-sizing:border-box;}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{border-bottom:1px solid rgba(255,255,255,0.04);background:transparent}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
/* Ensure brand stays left-aligned and doesn't shift if nav contents grow */
.site-header .container .brand{margin-right:auto;order:0}
.brand{display:flex;align-items:center;gap:10px}
.brand .product{font-weight:700;font-size:20px}
.brand .product .product-sub{font-weight:400;opacity:0.7;font-size:0.85em}
.brand-logo{width:40px;height:40px;border-radius:6px;object-fit:cover;display:inline-block}
/* Consistent nav layout across pages */
.nav{display:flex;align-items:center;gap:18px}
.nav a,.nav .nav-current{color:var(--muted);text-decoration:none;display:inline-block}
.nav a:hover{color:var(--text)}
.nav .nav-current{cursor:default;opacity:0.95}
.hero{padding:80px 0;text-align:center}
.hero .definition{margin:16px auto 24px;max-width:700px;color:var(--muted);font-size:15px;line-height:1.6}
.hero .definition p{margin:8px 0}
.hero .definition strong{color:var(--text);font-weight:600}
.hero .definition .pronunciation{font-style:italic;color:var(--muted);font-size:14px}
.hero .definition .part-of-speech{color:var(--muted);font-size:14px}
.hero .lede{color:var(--muted);max-width:700px;margin:12px auto 20px;line-height:1.6}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);text-decoration:none;min-height:40px;box-sizing:border-box;height:40px;line-height:20px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px rgba(0,120,212,0.12)}
.btn + .btn{margin-left:10px}
.features{padding:40px 0}

/* Reduce the gap between hero and features on the Pricing page while keeping hero placement */
.pricing-page .features{padding-top:0; margin-top:-24px}
.pricing-page .features h2{margin-top:0}
/* Also tighten the bottom of the hero on Pricing so the Plans section moves up */
.pricing-page .hero{padding-bottom:4px}
.pricing-page .hero .lede{margin-bottom:8px}
/* Ensure Subscribe/Manage Account button doesn't move up — push it down a bit */
.pricing-page .hero .actions{margin-top:18px}
/* Responsive adjustments: reduce the offsets on small screens */
@media (max-width:600px){
  .pricing-page .features{margin-top:-12px}
  .pricing-page .hero .actions{margin-top:12px}
}
.features h2{margin-bottom:12px}
.features ul{list-style:disc;margin-left:20px;color:var(--muted)}

/* Feature showcase grid */
.feature-showcase{padding:48px 0 56px}
.feature-showcase h2{margin-bottom:6px;text-align:center}
.section-lede{color:var(--muted);text-align:center;margin:0 auto 32px;max-width:600px;line-height:1.6;font-size:15px}
.feature-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.feature-grid{grid-template-columns:1fr 1fr 1fr}}
.feature-card{background:var(--card);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:6px}
.feature-card--highlight{border-color:rgba(0,120,212,0.35);background:linear-gradient(145deg,rgba(0,120,212,0.1) 0%,var(--card) 60%)}
.feature-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.feature-card h3{margin:0;font-size:15px;font-weight:700;color:var(--text);line-height:1.3}
.feature-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
@media(min-width:560px){.feature-card--highlight{grid-column:span 2}}
@media(min-width:900px){.feature-card--highlight{grid-column:span 1}}

.site-footer{border-top:1px solid rgba(255,255,255,0.04);padding:18px 0;margin-top:40px;color:var(--muted)}
/* Links should be accent colored, but not when they are styled as buttons */
.container a:not(.btn){color:var(--accent)}

/* Ensure primary buttons have readable text */
.btn.primary{ color: var(--text); }

/* Form controls */
.form-row{display:flex;gap:10px;align-items:center}
.form-row .btn{white-space:nowrap}
.input{flex:1;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:var(--panel);color:var(--text);-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,120,212,0.12);border-color:var(--accent)}
/* Ensure inputs and textareas are dark on all browsers */
input[type="text"],input[type="email"],input[type="search"],textarea{background:var(--panel);color:var(--text);border-radius:6px}

/* Token display */
#token-display{display:flex;gap:8px;align-items:center}
#token-field{font-family:monospace;letter-spacing:0.04em;min-width:0;flex:1}
#token-display .btn{padding:8px 10px;min-height:36px}
/* Eye icon styles */
.icon-eye{display:inline-block; width:20px; height:20px; font-size:20px; line-height:20px; text-align:center; color:var(--muted)}
.icon-eye svg{width:20px;height:20px}
.icon-eye-closed{color:var(--muted)}
#token-eye[aria-pressed="true"] .icon-eye{color:var(--text)}

/* Account info grid: compact two-column layout that stacks on small screens */
.acct-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:stretch;text-align:left}
.acct-left{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.acct-email{font-weight:700;font-size:16px}
/* Meta rows styled as subtle cards */
.acct-meta{display:grid;gap:10px;margin-top:10px}
.acct-meta .meta-row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;background:var(--panel);border:1px solid rgba(255,255,255,0.04);box-shadow:0 4px 12px rgba(0,0,0,0.35)}
.meta-label{color:var(--muted);min-width:100px;font-weight:600}
.meta-value{color:var(--text);font-weight:700}
/* Right column should match the card style used for meta rows */
.acct-right{display:flex;flex-direction:column;align-items:flex-end;padding:12px;border-radius:8px;background:var(--panel);border:1px solid rgba(255,255,255,0.04);box-shadow:0 4px 12px rgba(0,0,0,0.35);align-self:stretch;gap:8px}
.acct-badge{margin-left:auto}

@media (max-width:600px){
  .acct-grid{grid-template-columns:1fr;text-align:center;align-items:center}
  .acct-badge{margin:8px 0 0}
  .meta-label{min-width:0}
  /* Stack meta rows on small screens and center labels */
  .acct-meta .meta-row{flex-direction:column;align-items:center;justify-content:center}
  .acct-meta .meta-row .meta-label{display:block;margin-bottom:6px}
  /* On small screens, remove the heavy border and shadow for the right column to reduce visual density */
  .acct-right{border:none;box-shadow:none;padding:8px;background:transparent}
}

/* Admin console styles */
.muted{color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:flex-start}
.admin-card{background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:16px;color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,0.28)}
.admin-card h3{margin-top:0;margin-bottom:8px}
.admin-actions .btn{margin-top:6px}
.admin-table table,.admin-table-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td,.admin-table-table th,.admin-table-table td{border-bottom:1px solid rgba(255,255,255,0.06);padding:8px 6px;text-align:left;color:var(--text)}
.admin-table th,.admin-table-table th{color:var(--muted);font-weight:600}
.admin-msg{color:var(--muted);margin-top:6px}
.admin-msg.error{color:#f66}
.admin-table button.btn{padding:6px 10px;min-height:32px}
.admin-notice{border:1px dashed rgba(255,255,255,0.16);margin-bottom:16px}
.admin-notice.ok{border-color:rgba(0,180,120,0.4)}
.admin-notice.error{border-color:rgba(255,102,102,0.5)}
.admin-user-list{display:flex;flex-direction:column;gap:10px}
.user-card{border:1px solid rgba(255,255,255,0.06);background:var(--panel);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px}
.user-main{display:flex;flex-direction:column;gap:4px}
.user-email{font-weight:700;color:var(--text);word-break:break-word}
.user-plan{color:var(--muted)}
.user-meta{color:var(--muted);font-size:13px}
.user-actions{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:700px){
  .admin-grid{grid-template-columns:1fr}
}

/* Plan card styling - similar feel to pricing cards */

/* Founder badge */
.founder-badge{display:none}

/* Header style when founder */
.acct-header .founder-subtext{display:none;margin-top:6px;color:var(--muted);font-size:13px}

/* subtle gold fade at top of the account card when founder */
#account{position:relative}
/* stronger, visible gold accent for founders (supports dark mode) */
#account.founder-active::before{content:'';position:absolute;left:0;right:0;top:0;height:100px;border-top-left-radius:10px;border-top-right-radius:10px;pointer-events:none;z-index:2;background:linear-gradient(180deg, rgba(255,215,0,0.22) 0%, rgba(255,215,0,0.12) 30%, rgba(255,215,0,0.06) 60%, transparent 100%)}
/* ensure the account card content sits above the accent so text remains readable */
#account.founder-active > .card { position: relative; z-index: 3 }

.plan-card{background:transparent;border-radius:8px;padding:14px;border:none;min-width:220px;max-width:320px;display:flex;flex-direction:column;min-height:260px;height:100%}
.plan-body{flex:1}
.plan-footer{margin-top:auto}
.plan-footer{margin-top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.plan-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-name{font-weight:800;font-size:16px}
.plan-price{color:var(--muted);font-weight:700}
.plan-features{list-style:none;padding:10px 0 0;margin:0;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.plan-features li{padding-left:16px;position:relative}
.plan-features li:before{content:'\2713';position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.plan-actions .btn{min-width:120px;width:auto}
.plan-actions{width:100%}
.plan-actions .btn{width:100%}
.plan-actions, .plan-support { flex-shrink: 0; }

/* Make generic .card match plan-card visuals for consistency */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:10px;padding:12px;border:1px solid rgba(255,255,255,0.04)}

@media (max-width:600px){
  .plan-card{max-width:100%;margin:8px auto 0;min-height:auto;padding:10px}
  .plan-actions{justify-content:center}
}

/* Flash message */
.flash{display:block;background:var(--accent);color:var(--text);padding:10px 14px;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,0.35);opacity:0;transform:translateY(-6px);transition:opacity .35s ease, transform .35s ease;margin-bottom:12px}
.flash.show{opacity:1;transform:translateY(0)}
.flash.success{background:var(--accent);}


/* Responsive */
@media (max-width:600px){
  .hero{padding:36px 12px}
  .hero h1{font-size:24px;margin-bottom:6px}
  .hero .definition{font-size:14px;margin:12px auto 16px;padding:0 8px}
  .hero .definition .pronunciation{font-size:13px}
  .hero .definition .part-of-speech{font-size:13px}
  .hero .lede{font-size:15px;max-width:100%;margin:10px auto;padding:0 8px;line-height:1.5}

  /* Actions: keep them side-by-side when space allows, but avoid overflow */
  .actions{display:flex;flex-direction:row;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
  .actions .btn{flex:1 1 140px;min-width:120px;max-width:320px;padding:8px 12px;height:40px;min-height:36px;font-size:14px;line-height:20px}
  .actions .btn + .btn{margin-left:0}

  /* Form rows (account page) should wrap and stack on very small screens */
  .form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
  .form-row .input{flex:1 1 180px;min-width:120px;height:40px;padding:8px 10px}
  .form-row .btn{flex:0 0 auto;padding:8px 10px;height:40px;min-height:36px}

  .brand .product{font-size:18px}
  /* extra-small screens: stack vertically */
  @media (max-width:420px){
    .actions{flex-direction:column;align-items:stretch}
    .actions .btn{width:100%;max-width:320px}
    .form-row{flex-direction:column;align-items:stretch}
    .form-row .input{width:100%}
    .form-row .btn{width:100%}
  }
  /* Nav collapse (popover style for narrow screens) */
  .nav-toggle{display:inline-flex;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:6px 10px;border-radius:6px;font-size:18px;cursor:pointer}
  /* popover: hidden by default on small screens; becomes an elevated panel when opened */
  .nav{position:absolute;display:none;flex-direction:column;gap:6px;min-width:200px;right:12px;top:64px;background:linear-gradient(180deg,var(--panel),rgba(42,42,42,0.96));padding:10px;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.6);z-index:12000;border:1px solid rgba(255,255,255,0.04)}
  .nav.open{display:flex;animation:navPop .14s ease-out}
  .nav a,.nav .nav-current{display:block;padding:8px 12px;border-radius:6px;color:var(--text);text-decoration:none}
  .nav a:hover{background:rgba(255,255,255,0.02)}
  .site-header .container{flex-wrap:nowrap}
  .site-header .container .brand{flex:0 1 auto}
  @keyframes navPop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
  /* make sure nav is visible inline on larger screens */
  @media (min-width:601px){.nav{position:static;display:flex;flex-direction:row;gap:18px;padding:0;background:transparent;border:none;box-shadow:none;min-width:0;right:auto;top:auto}}

  /* Small-screen overrides (force consistent sizing and wrapping) */
  @media (max-width:600px){
    /* ensure iOS doesn't zoom on inputs: keep font-size >= 16px for inputs/buttons */
    .btn{height:40px;min-height:36px;padding:8px 12px;font-size:16px;line-height:18px}
    .input{height:40px;padding:8px 10px;font-size:16px}
    .actions{flex-wrap:wrap;justify-content:center}
    .actions .btn{flex:1 1 140px;min-width:120px;max-width:320px}
    .form-row{flex-wrap:wrap;justify-content:center}
    .form-row .input{flex:1 1 160px;min-width:120px}
    .form-row .btn{height:40px;padding:8px 10px}
    /* center wrapped controls */
    .form-row, .actions { justify-content:center }
  }


}

/* ── Apps page ────────────────────────────────────────── */
.apps-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:860px;margin:0 auto}
@media(min-width:620px){.apps-grid{grid-template-columns:1fr 1fr}}
.app-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.app-card-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(0,120,212,.12);color:var(--accent);flex-shrink:0;align-self:center}
.app-card-icon--ledger{background:rgba(120,200,80,.12);color:#78c850}
.app-card-logo{width:44px;height:44px;border-radius:8px;object-fit:cover}
.app-card-name{font-size:20px;font-weight:700;margin:0;color:var(--text)}
.app-card-name .product-sub-inline{font-weight:400;opacity:.7;font-size:.82em}
.app-card-desc{color:var(--muted);font-size:14px;line-height:1.6;margin:0;flex:1}
.app-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
/* ── Ledger page ──────────────────────────────────────── */
.ledger-download{padding:60px 0;text-align:center}
.ledger-download h2{font-size:26px;margin:0 0 8px}
.ledger-download .section-lede{margin-bottom:28px}
@media(max-width:600px){.ledger-download{padding:40px 0 80px}.download-btn{min-height:160px;min-width:120px;padding:20px 12px}.download-grid{justify-content:center}}