/* The Corner — light theme tokens, the theme switcher, and the shared chrome (nav, menus,
   buttons, footer, binary landscapes) in light. Loaded last in <head> on every page
   (tools/theme_chrome.py). With no saved choice pages follow the system; everything light sits under
   html[data-theme="light"]. Page-specific light rules live at the end of each page family's
   own stylesheet (data.css, guide.css, blog.css, leadgen.css …). */

/* ---------- tokens ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #ffffff; --bg-3: #f3f3f1;
  --line: rgba(17,17,17,.09); --line-2: rgba(17,17,17,.16);
  --fg: #111111; --fg-2: #505050; --fg-3: #6b6b6b;
  --amber: #a1520f; --green: #1a7f43; --violet: #5b46d6;
  --sky-1: #dde2e9; --sky-2: #e7eaee; --sky-3: #f0f1f2;
  /* light ink washes: the dark theme's rgba(255,255,255,a) surfaces become rgba(17,17,17,a) */
  --ink-02: rgba(17,17,17,.02); --ink-04: rgba(17,17,17,.04); --ink-06: rgba(17,17,17,.06); --ink-08: rgba(17,17,17,.08);
  /* the older Tailwind theme's tokens (chrome.css), as "r g b" */
  --c-g1000: 17 17 17; --c-g900: 80 80 80; --c-g700: 107 107 107;
  --c-bg100: 255 255 255; --c-bg200: 255 255 255;
  --c-line: 226 226 223; --c-soft: 238 238 235;
  --c-blue: 161 82 15; --c-green: 26 127 67;
  --c-solid-bg: 17 17 17; --c-solid-fg: 255 255 255;
  --c-accent-bg: 248 234 218; --c-accent-fg: 138 72 14;
  --t0: #1a7f43; --t1: #a1520f; --t2: #6b7280; --tu: #e4e4e1;
}
/* page tints set their colours on <body>, so their light values sit there too */
html[data-theme="light"] body { --amber: #a1520f; --sky-1: #dde2e9; --sky-2: #e7eaee; --sky-3: #f0f1f2; }
html[data-theme="light"] body.tint-golden { --amber: #8f5a0b; --sky-1: #ebe3d8; --sky-2: #efeae2; --sky-3: #f3f1ed; }
html[data-theme="light"] body.tint-twilight { --amber: #a3433f; --sky-1: #dcdfeb; --sky-2: #e6e8f0; --sky-3: #f0f0f3; }
html[data-theme="light"] body.tint-rose { --amber: #a3474c; --sky-1: #ecdfe2; --sky-2: #f0e7e9; --sky-3: #f4f1f1; }
html[data-theme="light"] ::selection, html[data-theme="light"] body ::selection { background: #d9d4f7; color: #111; }
html[data-theme="light"] :focus-visible { outline-color: #5b46d6; }

/* ---------- theme switcher: nav icon button + dropdown ---------- */
.tsw { position: relative; display: inline-flex; margin-left: 4px; }
.tsw-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg-2); cursor: pointer; transition: color .2s, background-color .2s; }
.tsw-btn:hover, .tsw-btn[aria-expanded="true"] { color: var(--fg); background: rgba(255,255,255,.06); }
.tsw-btn .ti { display: none; }
html[data-theme-pref="light"] .tsw-btn .ti-light,
html[data-theme-pref="dark"] .tsw-btn .ti-dark,
html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .tsw-btn .ti-system { display: block; }
.tsw-menu { position: absolute; top: calc(100% + 10px); right: -4px; z-index: 60; min-width: 156px; padding: 6px; border-radius: 12px; background: rgba(24,24,26,.96); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tsw-menu[hidden] { display: none; }
.tsw-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.tsw-menu button + button { margin-top: 2px; }
.tsw-menu button:hover, .tsw-menu button:focus-visible { color: var(--fg); background: rgba(255,255,255,.05); outline: none; }
.tsw-menu button[aria-checked="true"] { color: var(--fg); background: rgba(255,255,255,.08); }
.tsw-menu button[aria-checked="true"]::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: currentColor; }
.tsw-menu .ti { flex: none; }
@media (max-width: 860px) { .nav .tsw { display: none; } }

/* phone menu: segmented Light / Dark / System row (the dashboard's .theme-sw look) */
.mm-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 6px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.mm-theme .theme-sw { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: rgba(255,255,255,.03); }
.mm-theme .theme-sw button { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fg-2); cursor: pointer; transition: background-color .15s, color .15s; }
.mm-theme .theme-sw button:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.mm-theme .theme-sw button[aria-pressed="true"] { color: var(--fg); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- shared chrome in light ---------- */
html[data-theme="light"] .tsw-btn:hover, html[data-theme="light"] .tsw-btn[aria-expanded="true"] { background: rgba(17,17,17,.06); }
html[data-theme="light"] .tsw-menu { background: rgba(255,255,255,.98); box-shadow: 0 24px 60px rgba(17,17,17,.12); }
html[data-theme="light"] .tsw-menu button:hover, html[data-theme="light"] .tsw-menu button:focus-visible { background: rgba(17,17,17,.045); }
html[data-theme="light"] .tsw-menu button[aria-checked="true"] { background: rgba(17,17,17,.07); }
html[data-theme="light"] .mm-theme .theme-sw { background: #fff; }
html[data-theme="light"] .mm-theme .theme-sw button:hover { background: rgba(17,17,17,.045); }
html[data-theme="light"] .mm-theme .theme-sw button[aria-pressed="true"] { background: rgba(17,17,17,.07); }

html[data-theme="light"] .nav[data-scrolled="true"] .nav-in { background: rgba(255,255,255,.78); }
html[data-theme="light"] .nav-links [aria-current="page"] { background: rgba(17,17,17,.06); }
html[data-theme="light"] .dd-menu { background: rgba(255,255,255,.98); box-shadow: 0 24px 60px rgba(17,17,17,.12); }
html[data-theme="light"] .dd-menu a:hover { background: rgba(17,17,17,.045); }
html[data-theme="light"] .dd-menu span.d { color: var(--fg-2); }
html[data-theme="light"] .mobile-menu.open { background: rgba(255,255,255,.98); box-shadow: 0 24px 60px rgba(17,17,17,.12); }

/* the white primary button turns ink-black (as on the dashboard) */
html[data-theme="light"] .btn-light { background: #111; color: #fff; box-shadow: none; }
html[data-theme="light"] .btn-light:hover { background: #2b2b2b; }
html[data-theme="light"] .btn-light .chip, html[data-theme="light"] .nav .btn .chip, html[data-theme="light"] .nav .btn:hover .chip { background: #fff; color: #4b4fd6; }
html[data-theme="light"] .btn-ghost { background: rgba(255,255,255,.6); }
html[data-theme="light"] .btn-ghost .chip { background: rgba(17,17,17,.07); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(255,255,255,.9); }
html[data-theme="light"] .badge { background: rgba(17,17,17,.03); }
html[data-theme="light"] .badge.live { border-color: rgba(26,127,67,.3); background: rgba(26,127,67,.07); }
html[data-theme="light"] .badge.soon { border-color: rgba(161,82,15,.3); background: rgba(161,82,15,.06); }
html[data-theme="light"] .pill { background: rgba(255,255,255,.6); }
html[data-theme="light"] a.pill:hover { border-color: rgba(17,17,17,.3); }

/* binary 0/1 landscapes: binary-image.js prints dark ink digits on the light theme (each keeps its photo's
   hue, so warm stays warm), so the canvases need no light rules: same opacity, fades and filters as dark */

/* ---------- inline SVG diagrams: the dark palette's hex attributes, remapped ---------- */
html[data-theme="light"] svg [fill="#ededed"] { fill: #111; }
html[data-theme="light"] svg [fill="#a3a3a3"] { fill: #505050; }
html[data-theme="light"] svg [fill="#6e6e6e"] { fill: #6b6b6b; }
html[data-theme="light"] svg [fill="#1c1c1e"] { fill: #ffffff; }
html[data-theme="light"] svg [fill="#121212"] { fill: #ffffff; }
html[data-theme="light"] svg [fill="#8b7cf6"] { fill: #5b46d6; }
html[data-theme="light"] svg [fill="#7bd88f"] { fill: #1a7f43; }
html[data-theme="light"] svg [fill="#e7a46b"] { fill: #a1520f; }
html[data-theme="light"] svg [stroke="#ededed"] { stroke: #111; }
html[data-theme="light"] svg [stroke="#a3a3a3"] { stroke: #6b6b6b; }
html[data-theme="light"] svg [stroke="#8b7cf6"] { stroke: #5b46d6; }
html[data-theme="light"] svg [stroke="#7bd88f"] { stroke: #1a7f43; }
html[data-theme="light"] svg [stroke="#e7a46b"] { stroke: #a1520f; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.22)"] { stroke: rgba(17,17,17,.28); }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.14)"] { stroke: rgba(17,17,17,.18); }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.08)"] { stroke: rgba(17,17,17,.1); }

/* ---------- email capture before micro1 (capture.js injects its own dark styles) ----------
   The gold-on-black "go" button keeps its look in both themes (its digit animation is drawn for a dark ground). */
html[data-theme="light"] .tcl { border-color: rgba(17,17,17,.1); background: radial-gradient(120% 60% at 50% 0%, rgba(91,70,214,.08), transparent 62%), linear-gradient(180deg, #ffffff, #f7f7f5); color: #111; box-shadow: 0 30px 80px rgba(17,17,17,.18); }
html[data-theme="light"] .tcl::before { opacity: .12; mix-blend-mode: multiply; }
html[data-theme="light"] .tcl::backdrop { background: rgba(40,40,46,.35); }
html[data-theme="light"] .tcl-x { color: #6b6b6b; }
html[data-theme="light"] .tcl-x:hover { background: rgba(17,17,17,.06); color: #111; }
html[data-theme="light"] .tcl-x:focus-visible, html[data-theme="light"] .tcl-skip:focus-visible, html[data-theme="light"] .tcl-go:focus-visible { outline-color: #5b46d6; }
html[data-theme="light"] .tcl-eye, html[data-theme="light"] .tcl-rev figcaption, html[data-theme="light"] .tcl-foot { color: #6b6b6b; }
html[data-theme="light"] .tcl-serif, html[data-theme="light"] .tcl-body, html[data-theme="light"] .tcl label, html[data-theme="light"] .tcl-skip { color: #505050; }
html[data-theme="light"] .tcl-skip:hover, html[data-theme="light"] .tcl-rate b { color: #111; }
html[data-theme="light"] .tcl input[type=email] { border-color: rgba(17,17,17,.16); background: #fff; color: #111; }
html[data-theme="light"] .tcl input[type=email]:focus { border-color: rgba(17,17,17,.4); }
html[data-theme="light"] .tcl input[aria-invalid=true] { border-color: #b42318; }
html[data-theme="light"] .tcl-err { color: #b42318; }
html[data-theme="light"] .tcl-ok { color: #1a7f43; }
html[data-theme="light"] .tcl-go.off { background: #e9e9e6; color: #6b6b6b; }
html[data-theme="light"] .tcl-go.off .chip { background: #dcdcd8; color: #6b6b6b; }
html[data-theme="light"] .tcl-foot a, html[data-theme="light"] .tcl-rate { color: #505050; }
html[data-theme="light"] .tcl-stars { color: rgba(17,17,17,.14); }
html[data-theme="light"] .tcl-rev blockquote { color: #2b2b2b; }
html[data-theme="light"] .tcl-dots button { background: rgba(17,17,17,.2); }
html[data-theme="light"] .tcl-dots button[aria-current=true] { background: #111; }
html[data-theme="light"] .tcl-foot { border-top-color: rgba(17,17,17,.08); }
html[data-theme="light"] .tcl-grip { background: rgba(17,17,17,.18); }

/* ---------- phone menu bottom sheet (mobile-sheet.js injects its own dark styles) ---------- */
html[data-theme="light"] .ms-scrim { background: rgba(40,40,46,.3); }
html[data-theme="light"] .ms-panel { background: radial-gradient(120% 60% at 50% 0%, rgba(91,70,214,.07), transparent 62%), linear-gradient(180deg, #ffffff, #f7f7f5); box-shadow: 0 -30px 80px rgba(17,17,17,.16); }
html[data-theme="light"] .ms-panel::before { opacity: .12; mix-blend-mode: multiply; }
html[data-theme="light"] .ms-grab { background: rgba(17,17,17,.18); }
html[data-theme="light"] .ms-x { background: rgba(17,17,17,.03); }
html[data-theme="light"] .ms-link:active, html[data-theme="light"] .ms-link:hover { background: rgba(17,17,17,.045); }
html[data-theme="light"] .ms-link[aria-current=page] { background: rgba(17,17,17,.06); }
html[data-theme="light"] .ms-link[aria-current=page] b::after { background: #5b46d6; }
html[data-theme="light"] .ms-x:focus-visible, html[data-theme="light"] .ms-link:focus-visible { box-shadow: 0 0 0 3px rgba(91,70,214,.35); }
/* the theme row sits above the sheet's main button */
.ms .mm-theme { padding: 0 4px 2px; border-top: 0; }
/* the dashboard's sign-in art: dashboard.css inverts it for light; the digits are already ink now */
html[data-theme="light"] .auth-right canvas[data-binary-src] { filter: none; opacity: .75; }

/* copy laid over a landscape: a soft paper halo keeps it crisp over the darker light-mode digits */
html[data-theme="light"] .cta-band .fine, html[data-theme="light"] .scape .fine {
  text-shadow: 0 0 2px var(--bg), 0 0 5px var(--bg), 0 0 9px var(--bg), 0 0 14px var(--bg), 0 0 22px var(--bg), 0 0 34px var(--bg);
}

/* ---------- nav lines up with the page's text column (both themes) ----------
   At the top of the page the logo's left edge and the button's right edge sit on the same lines as
   the content below. --nav-w / --nav-pad match the page's .wrap (blog.css and dashboard.css set their
   own). Once scrolled, the nav goes back to its compact floating pill unchanged. */
:root { --nav-w: 1180px; --nav-pad: 24px; }
.nav { transition: padding .5s var(--ease); }
.nav-in { transition: max-width .5s var(--ease), padding .5s var(--ease), background-color .4s, border-color .4s, backdrop-filter .4s; }
.nav .brand { transition: margin .5s var(--ease); }
.nav:not([data-scrolled="true"]) { padding-left: var(--nav-pad); padding-right: var(--nav-pad); }
.nav:not([data-scrolled="true"]) .nav-in { max-width: calc(var(--nav-w) - 2 * var(--nav-pad)); padding-left: 0; padding-right: 0; }
/* the brand link keeps 4px of padding for its hover area; pull it back so the mark itself sits on the line */
.nav:not([data-scrolled="true"]) .brand { margin-left: -5px; }


/* ---------- hero grain (both themes) ----------
   A gritty film grain over the coloured top of each hero (.hero on the home and data pages, .bhero on
   guides and blog). Overlay blending lightens and darkens the sky without changing its hue, so the grain
   takes each page's own colour. Strongest at the top, gone by the landscape. */
.hero::before, .bhero::before {
  opacity: .85; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 72%);
}
/* on a pale sky overlay barely shows, so light mode darkens the grain in instead */
html[data-theme="light"] .hero::before, html[data-theme="light"] .bhero::before { mix-blend-mode: multiply; opacity: .16; }

/* ---------- secondary buttons: frosted glass (both themes) ----------
   Mostly opaque, with a heavy blur so the binary fields behind read as a soft haze, never as digits. */
.btn-ghost {
  background: rgba(30,30,33,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.btn-ghost:hover { background: rgba(40,40,44,.88); }
.btn-ghost .chip { background: rgba(255,255,255,.1); }
html[data-theme="light"] .btn-ghost {
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(17,17,17,.1), 0 8px 24px rgba(17,17,17,.08);
}
html[data-theme="light"] .btn-ghost:hover { background: rgba(255,255,255,.94); }
html[data-theme="light"] .btn-ghost .chip { background: rgba(17,17,17,.07); }