/* ValueFy - the public app store. Phone first (one column), a tablet gets two, a computer gets the "open it on your
   phone" card. Reads the portal's tokens (core-static/portal.css), so light and dark follow the device. */
:root{ --vf-a:#4f46e5; --vf-b:#9333ea; --vf-btn-a:#4f46e5; --vf-btn-b:#7e22ce; --vf-max:1080px; --vf-gut:16px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --vf-a:#818cf8; --vf-b:#c084fc; } }
:root[data-theme="dark"]{ --vf-a:#818cf8; --vf-b:#c084fc; }

body.vf{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden; }
.vf a{ color:inherit; }
.vf .grow{ flex:1; }

/* top bar */
.vf-top{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:10px var(--vf-gut);
  padding-top:max(10px, env(safe-area-inset-top)); background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.vf-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.vf-mark{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg, var(--vf-btn-a), var(--vf-btn-b)); box-shadow:0 6px 16px color-mix(in srgb, var(--vf-a) 35%, transparent); }
.vf-mark svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.vf-name{ display:flex; flex-direction:column; line-height:1.1; }
.vf-name b{ font-size:19px; letter-spacing:-.01em; }
.vf-name small{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.vf-admin{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; text-decoration:none; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel); white-space:nowrap; }
@media (max-width:520px){ .vf-admin span{ display:none; } .vf-admin{ padding:10px; } }
.vf-name small{ white-space:nowrap; }

.vf-main{ max-width:var(--vf-max); margin:0 auto; padding:14px var(--vf-gut) 28px; box-sizing:border-box; }
.vf-main h2{ font-size:18px; margin:26px 0 4px; display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
.vf-lede{ color:var(--muted); margin:0 0 12px; font-size:14.5px; }

/* search: big, thumb-friendly, stays in reach */
.vf-search{ position:sticky; top:calc(57px + env(safe-area-inset-top)); z-index:4; padding:6px 0 8px; background:linear-gradient(var(--bg) 80%, transparent); }
.vf-q{ display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; border-radius:16px; background:var(--panel);
  border:1.5px solid var(--line-2); box-shadow:var(--shadow-1); color:var(--muted); }
.vf-q:focus-within{ border-color:var(--vf-a); box-shadow:var(--ring); }
.vf-q input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:17px; height:100%; }
.vf-none{ display:flex; gap:8px; align-items:center; color:var(--muted); padding:24px 4px; }

/* app cards */
.vf-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:640px){ .vf-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .vf-grid{ grid-template-columns:1fr 1fr 1fr; } }
.vf-card{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon txt" "act act"; gap:12px 14px;
  padding:16px; border-radius:20px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-1);
  transition:transform var(--ease), box-shadow var(--ease); }
.vf-card:hover{ box-shadow:var(--shadow-2); }
.vf-card:active{ transform:scale(.99); }
.vf-card .vf-icon{ grid-area:icon; }
.vf-card-txt{ grid-area:txt; min-width:0; }
.vf-card-txt h3{ margin:0; font-size:17px; }
.vf-card-act{ grid-area:act; display:flex; justify-content:flex-end; position:relative; z-index:1; }
.vf-card-link{ position:absolute; inset:0; border-radius:inherit; z-index:0; }
.vf-card-link:focus-visible{ outline:3px solid var(--vf-a); outline-offset:2px; }
.vf-cat{ margin:1px 0 0; font-size:12.5px; color:var(--muted); }
.vf-line{ margin:6px 0 0; font-size:14.5px; color:var(--ink-2); }
.vf-card.soon{ background:var(--panel-2); border-style:dashed; }
.vf-card.soon .vf-icon{ filter:saturate(.55); opacity:.85; }

.vf-icon{ display:grid; place-items:center; flex:none; color:#fff; border-radius:16px; width:56px; height:56px;
  background:linear-gradient(135deg, var(--c, var(--vf-a)), color-mix(in srgb, var(--c, var(--vf-a)) 55%, #1e1b4b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px color-mix(in srgb, var(--c, var(--vf-a)) 30%, transparent); }
.vf-icon.lg{ width:84px; height:84px; border-radius:24px; }
.vf-icon.sm{ width:40px; height:40px; border-radius:12px; }
.vf-icon svg{ stroke:#fff; }

/* install */
.vf-install{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px;
  background:linear-gradient(135deg, var(--vf-btn-a), var(--vf-btn-b)); color:#fff !important; font-weight:650; text-decoration:none;
  box-shadow:0 6px 16px color-mix(in srgb, var(--vf-a) 35%, transparent); }
.vf-install:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.vf-install.big{ width:100%; min-height:60px; border-radius:18px; font-size:18px; }
.vf-install.big span{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.vf-install small{ font-weight:500; font-size:12.5px; opacity:.9; }
.vf-soon{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--warn); background:var(--warn-soft); }

/* product page */
.vf-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:14.5px; padding:6px 0; }
.vf-hero{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; margin-top:8px; padding:18px; border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--vf-a) 12%, var(--panel)), var(--panel)); border:1px solid var(--line); }
.vf-hero h1{ margin:0; font-size:26px; letter-spacing:-.02em; line-height:1.15; }
.vf-tag{ margin:6px 0 0; color:var(--ink-2); }
.vf-hero-act{ grid-column:1 / -1; }
@media (min-width:760px){ .vf-hero{ grid-template-columns:auto 1fr minmax(240px, 300px); padding:24px; } .vf-hero-act{ grid-column:auto; } }

.vf-feat ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
@media (min-width:760px){ .vf-feat ul{ grid-template-columns:1fr 1fr; } }
.vf-feat li{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--panel); border:1px solid var(--line); }
.vf-feat li svg{ flex:none; color:var(--ok); margin-top:3px; }

/* the rich editor's output, made to read well on a phone or a tablet */
.vf-article{ padding:16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); font-size:16.5px; line-height:1.65;
  overflow-wrap:anywhere; }
.vf-article > :first-child{ margin-top:0; } .vf-article > :last-child{ margin-bottom:0; }
.vf-article img, .vf-article video, .vf-article iframe{ max-width:100%; height:auto; border-radius:12px; }
.vf-article table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.vf-article td, .vf-article th{ border:1px solid var(--line); padding:6px 10px; }
.vf-article h1{ font-size:22px; } .vf-article h2{ font-size:19px; margin:20px 0 6px; } .vf-article h3{ font-size:17px; }
.vf-article blockquote{ margin:12px 0; padding:8px 14px; border-left:4px solid var(--vf-a); background:var(--brand-soft); border-radius:0 10px 10px 0; }
.vf-article pre{ overflow-x:auto; padding:12px; border-radius:10px; background:var(--bg-2); }
@media (min-width:760px){ .vf-article{ padding:24px 28px; } }

/* how to install */
.vf-steps{ margin-top:22px; padding:16px; border-radius:20px; background:var(--panel); border:1px solid var(--line); }
.vf-steps h2{ margin-top:0; }
.vf-steps ol{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
@media (min-width:760px){ .vf-steps ol{ grid-template-columns:1fr 1fr; } }
.vf-steps li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); }
.vf-steps li b{ display:block; color:var(--ink); font-size:15px; }
.vf-steps .n{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px;
  color:#fff; background:linear-gradient(135deg, var(--vf-btn-a), var(--vf-btn-b)); }
.vf-safe{ display:flex; gap:6px; align-items:center; margin:14px 0 0; font-size:13px; color:var(--ok); }

.vf-hist ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.vf-hist li{ padding:10px 14px; border-radius:14px; background:var(--panel); border:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px 12px; }
.vf-hist li span{ color:var(--muted); font-size:13.5px; } .vf-hist li p{ flex-basis:100%; margin:2px 0 0; font-size:14px; color:var(--ink-2); }

/* iPhone and computer */
.vf-away{ display:grid; gap:20px; justify-items:center; text-align:center; padding:18px 0 6px; }
.vf-away h1{ margin:10px 0 6px; font-size:26px; letter-spacing:-.02em; line-height:1.2; }
.vf-away p{ color:var(--ink-2); margin:0 auto; max-width:46ch; }
.vf-away h2{ justify-content:center; font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.vf-pill{ display:inline-flex; gap:6px; align-items:center; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px;
  color:var(--vf-a); background:color-mix(in srgb, var(--vf-a) 12%, var(--panel)); }
.vf-phone{ width:150px; height:auto; filter:drop-shadow(0 18px 30px color-mix(in srgb, var(--vf-a) 28%, transparent)); }
.vf-phone .ph-body{ fill:var(--ink); } .vf-phone .ph-screen{ fill:var(--panel); } .vf-phone .ph-notch{ fill:var(--ink); }
.vf-phone .ph-search{ fill:var(--bg-2); } .vf-phone .ph-line{ fill:var(--line-2); } .vf-phone .ph-line.soft{ fill:var(--line); }
.vf-phone .ph-a{ stop-color:var(--vf-a); } .vf-phone .ph-b{ stop-color:var(--vf-b); }
.vf-mini{ list-style:none; margin:4px auto 0; padding:0; display:grid; gap:8px; max-width:440px; text-align:left; }
.vf-mini li{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--line); }
.vf-mini span{ display:flex; flex-direction:column; min-width:0; } .vf-mini small{ color:var(--muted); font-size:12.5px; }
.vf-addr{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin:18px 0 4px; }
.vf-addr code{ font-size:22px; font-weight:700; padding:10px 16px; border-radius:14px; background:var(--panel); border:1.5px dashed var(--vf-a); color:var(--ink); }
.vf-peek{ display:inline-flex; gap:6px; align-items:center; margin-top:16px; font-size:14px; color:var(--muted); }
@media (min-width:900px){
  .vf-away.desk{ grid-template-columns:auto minmax(0, 560px); justify-content:center; text-align:left; gap:56px; padding-top:48px; }
  .vf-away.desk .vf-phone{ width:220px; }
  .vf-away.desk p, .vf-away.desk .vf-mini{ margin-left:0; } .vf-away.desk h2{ justify-content:flex-start; } .vf-away.desk .vf-addr{ justify-content:flex-start; }
}

.vf-foot{ display:flex; gap:6px; align-items:center; justify-content:center; padding:18px var(--vf-gut) max(22px, env(safe-area-inset-bottom));
  color:var(--muted); font-size:12.5px; }
@media (prefers-reduced-motion: reduce){ .vf-card{ transition:none; } }

/* the admin screen (page-vfadmin.js) loads this sheet too: its colour picker */
input[type=color].vf-swatch{ height:42px; min-height:42px; padding:3px; width:100%; cursor:pointer; }