/* viber.css — viber.pics's OWN layer over the Sippis app shell (design A6, 2026-09-24:
 * "the type bump lands in a new viber.css override sheet, not by diverging
 * sippis-shell.css"). sippis-shell.css is the fleet's file and stays byte-identical to
 * /usr/local/share/sippis-app-shell/sippis-shell.css; everything this product wants to be
 * different goes here, loaded AFTER it and after each page's own <style> block (the top-bar
 * include emits the <link>, at the top of <body>, so it always cascades last).
 *
 * Loaded by the SHELL pages only — apex.php, ws.php, app/*, admin/*, settings/*, auth/* —
 * never by the tool pages (/ss, /sf), which have their own theme (admin/css/theme.css) and
 * get only vp-nav.css through the fetched bar. topbar.php marks the fragment so
 * auth/_topbar.php leaves this file out there.
 *
 * Three things live here, in this order:
 *   1. LAYOUT — the page starts under the bar. The shell centres `.hero` vertically with
 *      `margin: auto 0` inside a min-height:100vh flex column, so every short page (the
 *      billing page, the new-workspace form, the console) floated a third of the way down
 *      the viewport with nothing above it (batch 20260927-132224-db78, items 1 and 3:
 *      "there's a huge gap … make it like a normal web page"). The nav that used to sit
 *      under the page title is gone too (it is the bar's, once — see vp-nav.css).
 *   2. TYPE — design §D's scale, which had no home until this file existed.
 *   3. LIGHT MODE — a first pass (item 2: "start designing the light mode pages"). Keyed on
 *      html[data-vp-theme="light"], the EFFECTIVE theme js/vp-theme.js resolves from the
 *      family's localStorage.sippisTheme (dark | light | auto), so every rule is written
 *      once. No JavaScript → no attribute → the shell's dark, exactly as before.
 *
 * Palette, light. Deliberately not a cream page: the product's mark is a teal screen frame
 * with an orange scrawl, so the paper is a cool, faintly teal grey, the ink is a deep
 * teal-black, and the accent stays the brand teal darkened until it reads as text on white.
 *   paper   #eef3f4   (washed from #dceef0 at the top, echoing the dark gradient's shape)
 *   surface #ffffff
 *   ink     #12262d
 *   second  #4b5f67   (6.3:1 on paper, 7.6:1 on white)
 *   link    #087177   (5.0:1 on white)
 *   line    rgba(18, 38, 45, .12)
 * The bar in light mode is the family's teal→orange gradient (vp-nav.css), the same one
 * sippis.com's own light pages carry. */

/* ═══ 1. LAYOUT ══════════════════════════════════════════════════════════════ */
main.hero,
body.profile .hero {
  margin: 0 auto;                 /* the shell's `margin: auto 0` is the vertical centring */
  padding: 1.4rem 1rem 2.2rem;
}
main.hero > h1 { margin: 0.25rem 0 0.2rem; }
main.hero > p.tagline { margin: 0 0 1.25rem; }
body.profile .hero h1 { margin-top: 0.25rem; }
/* the landing page keeps its own hero measure (apex.php sets it); the sections after it are
   untouched. Only the app pages' shared frame changes here. */

/* ═══ 2. TYPE (design §D) ════════════════════════════════════════════════════ */
main.hero > h1 { font-size: 2.2rem; letter-spacing: -0.025em; line-height: 1.1; }
main.hero > p.tagline { font-size: 0.97rem; }
.card h2 { font-size: 1.15rem; }
.pill { font-size: 0.82rem; }
table.bill th, table.ws th, .tbl th { font-size: 0.82rem; }
@media (max-width: 34rem) {
  main.hero > h1 { font-size: 1.6rem; }
}

/* ═══ 3. LIGHT MODE ══════════════════════════════════════════════════════════ */
html[data-vp-theme="light"] {
  color-scheme: light;
  /* the tokens every page's own <style> block already reads */
  --ink: #12262d;
  --sec-text: #4b5f67;
  --card-link: #087177;
  --line: rgba(18, 38, 45, 0.12);
  --field-bg: #ffffff;
  --card: #ffffff;
  --card-hi: #f5f9fa;
  --ok-text: #14532d;
  --warn-text: #9a3412;
  /* and this file's own */
  --vp-paper: #eef3f4;
  --vp-surface: #ffffff;
  --vp-code-bg: rgba(18, 38, 45, 0.07);
  --vp-track: rgba(18, 38, 45, 0.10);
}
html[data-vp-theme="light"] body {
  color: var(--ink);
  background: radial-gradient(ellipse at top, #dceef0 0%, var(--vp-paper) 42%, var(--vp-paper) 100%);
}

/* text the pages paint with the shell's dark literals */
html[data-vp-theme="light"] h1,
html[data-vp-theme="light"] h2,
html[data-vp-theme="light"] h3,
html[data-vp-theme="light"] .card h2,
html[data-vp-theme="light"] .card h3,
html[data-vp-theme="light"] .ws-card h2,
html[data-vp-theme="light"] .ws-new h2,
html[data-vp-theme="light"] .card dd,
html[data-vp-theme="light"] .card ul.bare li,
html[data-vp-theme="light"] .kv,
html[data-vp-theme="light"] .radio b,
html[data-vp-theme="light"] .bal-pill,
html[data-vp-theme="light"] dl.kvs dd,
html[data-vp-theme="light"] .tbl td,
html[data-vp-theme="light"] table.bill td,
html[data-vp-theme="light"] table.ws td,
html[data-vp-theme="light"] .share-primary { color: var(--ink); }
html[data-vp-theme="light"] .tagline,
html[data-vp-theme="light"] .card .muted,
html[data-vp-theme="light"] .muted,
html[data-vp-theme="light"] .card dt,
html[data-vp-theme="light"] .card .empty p,
html[data-vp-theme="light"] footer { color: var(--sec-text); }
html[data-vp-theme="light"] .card a,
html[data-vp-theme="light"] .ws-settings-link a,
html[data-vp-theme="light"] .ws-card .ws-host a,
html[data-vp-theme="light"] main.hero > p a,
html[data-vp-theme="light"] footer a,
html[data-vp-theme="light"] .ws-slug { color: var(--card-link); }
html[data-vp-theme="light"] h1 code { color: var(--card-link); }
html[data-vp-theme="light"] .tagline strong { color: #c2410c; }

/* surfaces */
html[data-vp-theme="light"] .card {
  background: var(--vp-surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(18, 38, 45, 0.05), 0 6px 18px rgba(18, 38, 45, 0.05);
}
html[data-vp-theme="light"] .card.danger { background: #fff7f3; border-color: rgba(194, 65, 12, 0.35); }
html[data-vp-theme="light"] .card code,
html[data-vp-theme="light"] .config-warn code { background: var(--vp-code-bg); color: var(--ink); }
html[data-vp-theme="light"] .storage-bar-track,
html[data-vp-theme="light"] .bar { background: var(--vp-track); }
html[data-vp-theme="light"] .tbl td,
html[data-vp-theme="light"] table.bill td,
html[data-vp-theme="light"] table.ws td { border-bottom-color: rgba(18, 38, 45, 0.08); }
html[data-vp-theme="light"] .tbl th,
html[data-vp-theme="light"] table.bill th,
html[data-vp-theme="light"] table.ws th { border-bottom-color: var(--line); }
html[data-vp-theme="light"] pre.jsonbox { background: #12262d; color: #cfdbde; border-color: transparent; }

/* pills */
html[data-vp-theme="light"] .pill { background: rgba(18, 38, 45, 0.06); color: var(--sec-text); border-color: rgba(18, 38, 45, 0.12); }
html[data-vp-theme="light"] .pill.primary { background: rgba(14, 173, 181, 0.12); color: #076c72; border-color: rgba(14, 173, 181, 0.35); }
html[data-vp-theme="light"] .pill.ok { background: rgba(34, 197, 94, 0.12); color: #166534; border-color: rgba(34, 197, 94, 0.35); }
html[data-vp-theme="light"] .pill.warn { background: rgba(242, 100, 48, 0.12); color: #9a3412; border-color: rgba(242, 100, 48, 0.4); }
html[data-vp-theme="light"] .pill.neutral { background: rgba(18, 38, 45, 0.05); color: var(--sec-text); border-color: var(--line); }
html[data-vp-theme="light"] .pill.muted { background: rgba(18, 38, 45, 0.05); color: var(--sec-text); }

/* the second-layer pill rows (settings sub-nav, the console's state filter) */
html[data-vp-theme="light"] .set-nav a,
html[data-vp-theme="light"] .adm-filters a { color: var(--sec-text); border-color: var(--line); background: rgba(255, 255, 255, 0.6); }
html[data-vp-theme="light"] .set-nav a:hover,
html[data-vp-theme="light"] .adm-filters a:hover { color: var(--ink); border-color: rgba(18, 38, 45, 0.3); }
html[data-vp-theme="light"] .set-nav a.cur,
html[data-vp-theme="light"] .adm-filters a.cur { color: #ffffff; background: var(--card-link); border-color: var(--card-link); }

/* buttons */
html[data-vp-theme="light"] .cta,
html[data-vp-theme="light"] .cta-inline { color: var(--card-link); background: rgba(14, 173, 181, 0.08); border-color: rgba(14, 173, 181, 0.55); }
html[data-vp-theme="light"] .cta:hover,
html[data-vp-theme="light"] .cta-inline:hover { background: rgba(14, 173, 181, 0.16); border-color: #0EADB5; }
html[data-vp-theme="light"] .cta.primary { color: #ffffff; background: #0a8a91; border-color: #0a8a91; }
html[data-vp-theme="light"] .cta.primary:hover { background: #087177; border-color: #087177; }
html[data-vp-theme="light"] .cta.ghost,
html[data-vp-theme="light"] .cta-inline.ghost { color: var(--ink) !important; border-color: rgba(18, 38, 45, 0.28) !important; }
html[data-vp-theme="light"] .cta.ghost:hover,
html[data-vp-theme="light"] .cta-inline.ghost:hover { border-color: rgba(18, 38, 45, 0.55) !important; }
html[data-vp-theme="light"] button.mini,
html[data-vp-theme="light"] .mini,
html[data-vp-theme="light"] button.ghost { color: var(--card-link); border-color: var(--line); background: transparent; }
html[data-vp-theme="light"] button.mini:hover,
html[data-vp-theme="light"] a.mini:hover { border-color: var(--card-link); }
html[data-vp-theme="light"] button.mini.warn,
html[data-vp-theme="light"] button.danger { color: #9a3412; border-color: rgba(194, 65, 12, 0.5); background: rgba(242, 100, 48, 0.08); }
html[data-vp-theme="light"] button.mini.warn:hover,
html[data-vp-theme="light"] button.danger:hover { background: rgba(242, 100, 48, 0.16); border-color: rgba(194, 65, 12, 0.8); }
html[data-vp-theme="light"] .card ul.bare .unshare-btn { color: var(--sec-text); border-color: var(--line); }

/* fields */
html[data-vp-theme="light"] input[type="text"],
html[data-vp-theme="light"] input[type="email"],
html[data-vp-theme="light"] input[type="password"],
html[data-vp-theme="light"] input[type="number"],
html[data-vp-theme="light"] select:not(.lang-select),
html[data-vp-theme="light"] textarea,
html[data-vp-theme="light"] .ws-new input[type="text"],
html[data-vp-theme="light"] .row-form input[type="text"],
html[data-vp-theme="light"] input.days,
html[data-vp-theme="light"] .share-dialog .add-input { color: var(--ink); background: var(--field-bg); border-color: rgba(18, 38, 45, 0.22); }
html[data-vp-theme="light"] input::placeholder,
html[data-vp-theme="light"] textarea::placeholder { color: #7a8b92; }
html[data-vp-theme="light"] input:focus-visible,
html[data-vp-theme="light"] select:focus-visible,
html[data-vp-theme="light"] textarea:focus-visible { outline: 2px solid rgba(14, 173, 181, 0.7); outline-offset: 1px; }

/* flashes */
html[data-vp-theme="light"] .flash-ok { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.45); color: var(--ok-text); }
html[data-vp-theme="light"] .flash-err { background: rgba(242, 100, 48, 0.10); border-color: rgba(242, 100, 48, 0.55); color: var(--warn-text); }
html[data-vp-theme="light"] .flash-err a.buy,
html[data-vp-theme="light"] .flash-err .bal-note { color: #7c2d12; }
html[data-vp-theme="light"] .flash-err .bal-note b { color: #431407; }
html[data-vp-theme="light"] .config-warn { color: #7c2d12; background: rgba(242, 100, 48, 0.06); }
html[data-vp-theme="light"] ul.drift { color: var(--warn-text); }
html[data-vp-theme="light"] .slug-note.no { color: var(--warn-text); }
html[data-vp-theme="light"] .slug-note.yes { color: var(--ok-text); }

/* the landing page (apex.php) */
html[data-vp-theme="light"] .eyebrow { color: #087177; }
html[data-vp-theme="light"] .hero h1 em { background: linear-gradient(100deg, #087177, #0EADB5); -webkit-background-clip: text; background-clip: text; }
html[data-vp-theme="light"] .skip { background: var(--ink); color: #ffffff; }
html[data-vp-theme="light"] .problem .card.now { border-color: rgba(14, 173, 181, 0.45); background: rgba(14, 173, 181, 0.07); }
html[data-vp-theme="light"] ol.steps li,
html[data-vp-theme="light"] .feature,
html[data-vp-theme="light"] .faq details { background: var(--vp-surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(18, 38, 45, 0.05); }
html[data-vp-theme="light"] ol.steps li::before { background: rgba(14, 173, 181, 0.14); border-color: rgba(14, 173, 181, 0.5); color: #076c72; }
html[data-vp-theme="light"] .feature svg { color: #0a8a91; }
html[data-vp-theme="light"] .plan.best { border-color: rgba(242, 100, 48, 0.55); }
html[data-vp-theme="light"] .plan .note { color: #c2410c; }
html[data-vp-theme="light"] ul.included li::before { color: #0a8a91; }
html[data-vp-theme="light"] .faq summary::after { color: #0a8a91; }
html[data-vp-theme="light"] .closing { border-color: rgba(14, 173, 181, 0.45); background: radial-gradient(ellipse at top, rgba(14, 173, 181, 0.14), transparent 70%); }
html[data-vp-theme="light"] .tool-art { background: #143038; }
/* the product mock and the prompt block stay dark on purpose: one is a picture of the
   product's own page, the other is a terminal. Their tokens are pinned so the light
   values above do not leak in through inheritance. */
html[data-vp-theme="light"] .demo,
html[data-vp-theme="light"] pre.prompt {
  --ink: #f4f7f8; --sec-text: #cfdbde; --line: rgba(255, 255, 255, 0.09); --card-hi: rgba(255, 255, 255, 0.07);
}
html[data-vp-theme="light"] .demo { box-shadow: 0 24px 50px rgba(18, 38, 45, 0.28), 0 0 0 1px rgba(14, 173, 181, 0.15); }

/* the info popover, the confirmation panel, the overview tiles, the admin list, the
   landing page's at-a-glance figures (batch 20260928-233309-1616) */
html[data-vp-theme="light"] .vp-help-pop,
html[data-vp-theme="light"] .vp-confirm-pop { background: var(--vp-surface); color: var(--ink); border-color: var(--line); box-shadow: 0 12px 30px rgba(18, 38, 45, 0.18); }
html[data-vp-theme="light"] .vp-help-pop { color: var(--sec-text); }
html[data-vp-theme="light"] .vp-help-pop b,
html[data-vp-theme="light"] .vp-confirm-pop b { color: var(--ink); }
html[data-vp-theme="light"] .vp-confirm-pop { border-color: rgba(194, 65, 12, 0.45); }
html[data-vp-theme="light"] .vp-help > summary { color: var(--card-link); border-color: var(--line); background: rgba(14, 173, 181, 0.08); }
html[data-vp-theme="light"] .vp-help[open] > summary { color: #ffffff; background: var(--card-link); border-color: var(--card-link); }
html[data-vp-theme="light"] .vp-confirm > summary.cta { color: #ffffff; background: #0a8a91; border-color: #0a8a91; }
html[data-vp-theme="light"] .vp-confirm > summary.ghost { color: var(--card-link); border-color: var(--line); background: transparent; }
html[data-vp-theme="light"] .vp-confirm > summary.danger { color: #9a3412; border-color: rgba(194, 65, 12, 0.5); background: rgba(242, 100, 48, 0.08); }
html[data-vp-theme="light"] .stat,
html[data-vp-theme="light"] .ws-stat { background: var(--vp-surface); border-color: var(--line); }
html[data-vp-theme="light"] .stat:hover,
html[data-vp-theme="light"] a.ws-stat:hover { border-color: rgba(18, 38, 45, 0.3); }
html[data-vp-theme="light"] .stat .stat-v,
html[data-vp-theme="light"] .ws-stat .v { color: var(--ink); }
html[data-vp-theme="light"] .stat .stat-k,
html[data-vp-theme="light"] .stat .stat-s,
html[data-vp-theme="light"] .ws-stat .k,
html[data-vp-theme="light"] .ws-stat .s { color: var(--sec-text); }
html[data-vp-theme="light"] ul.admins li { border-top-color: rgba(18, 38, 45, 0.08); }
html[data-vp-theme="light"] .tool-card .go { color: var(--card-link); }
html[data-vp-theme="light"] a.tool-card:hover { border-color: #0EADB5; }
html[data-vp-theme="light"] details.smtp-proj > summary::before { color: var(--sec-text); }

/* the share picker (auth/profile.php) */
html[data-vp-theme="light"] .share-dialog { background: var(--vp-surface); color: var(--ink); border-color: var(--line); }
html[data-vp-theme="light"] .share-dialog h2 { color: var(--ink); }
html[data-vp-theme="light"] .share-dialog .lede,
html[data-vp-theme="light"] .share-dialog .add-label { color: var(--sec-text); }
html[data-vp-theme="light"] .share-row:hover { background: rgba(18, 38, 45, 0.04); }
html[data-vp-theme="light"] .share-list { border-color: var(--line); }