/* Styles for the halftone homepage, extracted from toolbox/static/style.css. */

* { box-sizing: border-box; }

/* ---- Themes ------------------------------------------------------------
   Light is the paper and halftone; dark is the plum night sky from the
   "Quiet constellations" artboard. The page starts in the visitor's system
   theme; the switch (theme.js) sets data-theme on <html> to override it for
   the visit. Every colour below comes from these tokens. */

.halftone-app {
  /* Lisa's paper grain, averaged — it stands in while the tile loads and
     shows through nothing, so the page never flashes a flat white. */
  --ht-ground: #f3dbd4;
  --ht-ink:    #221d1b;
  --ht-text:   #221d1b;               /* paragraphs */
  --ht-sign:   #9e3f44;               /* her name, focus rings, the copied check */
  --ht-line:          rgba(34, 29, 27, 0.5);
  --ht-line-strong:   rgba(34, 29, 27, 0.72);
  --ht-btn-bg:        rgba(255, 246, 240, 0.7);
  --ht-btn-bg-hover:  rgba(255, 250, 247, 0.95);
  --ht-soon-ink:      rgba(34, 29, 27, 0.66);
  --ht-soon-line:     rgba(34, 29, 27, 0.16);
  --ht-soon-bg:       rgba(255, 246, 240, 0.4);
  --ht-copied-line:   rgba(158, 63, 68, 0.55);
  --ht-knob:          #fffaf6;
  --ht-knob-ink:      #9e3f44;
  --ht-scrim:         rgba(34, 29, 27, 0.35);
  /* The sky's colours as "r, g, b" for stars.js; only shown in dark mode. */
  --ht-star:      242, 182, 207;
  --ht-star-line: 242, 182, 207;
}

/* Dark: the same token list twice, once for the system setting and once for
   the switch. Keep the two blocks identical. */
:root[data-theme="dark"] .halftone-app {
  --ht-ground: #2a1530;
  --ht-ink:    #fff6fa;
  --ht-text:   #e6d7ea;
  --ht-sign:   #f2b6cf;
  --ht-line:          rgba(255, 246, 250, 0.4);
  --ht-line-strong:   rgba(255, 246, 250, 0.62);
  --ht-btn-bg:        rgba(42, 21, 48, 0.6);
  --ht-btn-bg-hover:  rgba(255, 246, 250, 0.1);
  --ht-soon-ink:      rgba(255, 246, 250, 0.6);
  --ht-soon-line:     rgba(255, 246, 250, 0.14);
  --ht-soon-bg:       rgba(42, 21, 48, 0.4);
  --ht-copied-line:   rgba(242, 182, 207, 0.6);
  --ht-knob:          #f2b6cf;
  --ht-knob-ink:      #2a1530;
  --ht-scrim:         rgba(14, 6, 18, 0.6);
  --ht-star:      242, 182, 207;
  --ht-star-line: 242, 182, 207;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .halftone-app {
    --ht-ground: #2a1530;
    --ht-ink:    #fff6fa;
    --ht-text:   #e6d7ea;
    --ht-sign:   #f2b6cf;
    --ht-line:          rgba(255, 246, 250, 0.4);
    --ht-line-strong:   rgba(255, 246, 250, 0.62);
    --ht-btn-bg:        rgba(42, 21, 48, 0.6);
    --ht-btn-bg-hover:  rgba(255, 246, 250, 0.1);
    --ht-soon-ink:      rgba(255, 246, 250, 0.6);
    --ht-soon-line:     rgba(255, 246, 250, 0.14);
    --ht-soon-bg:       rgba(42, 21, 48, 0.4);
    --ht-copied-line:   rgba(242, 182, 207, 0.6);
    --ht-knob:          #f2b6cf;
    --ht-knob-ink:      #2a1530;
    --ht-scrim:         rgba(14, 6, 18, 0.6);
    --ht-star:      242, 182, 207;
    --ht-star-line: 242, 182, 207;
  }
}

/* What changes besides colour: dark drops the paper grain, the pool of warm
   light and the halftone, and shows the sky instead. */
:root[data-theme="dark"] .halftone-app { background-image: none; }
:root[data-theme="dark"] .halftone-app::before,
:root[data-theme="dark"] .halftone-app #field { display: none; }
:root[data-theme="dark"] .halftone-app #stars { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .halftone-app { background-image: none; }
  :root:not([data-theme="light"]) .halftone-app::before,
  :root:not([data-theme="light"]) .halftone-app #field { display: none; }
  :root:not([data-theme="light"]) .halftone-app #stars { display: block; }
}

/* ---- Page --------------------------------------------------------------- */

.halftone-app {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Vertical scroll stays on: on short phones the copy runs past the screen. The
     canvases are fixed, so the dots and stars don't move with it. */
  overflow-x: hidden;
  background: var(--ht-ground) url('texture.png') repeat 0 0 / 500px 500px;
  color: var(--ht-ink);
  font-family: 'Nunito Sans', 'Inter', sans-serif;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* A pool of warm light sitting still in the middle of the screen, over the
   grain and under the dots. It is a fixed pseudo-element rather than a
   second background layer on the body: the body box grows past the viewport
   when the type is taller than the screen, which would drag the centre of
   the pool down with it. The stops step down instead of running straight to
   nothing, so it falls off like light and not like a cone. */
.halftone-app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 58vmax at 50% 50%,
    rgba(255, 240, 229, 1)    0%,
    rgba(255, 240, 229, 0.78) 30%,
    rgba(255, 240, 229, 0.40) 55%,
    rgba(255, 240, 229, 0.13) 78%,
    rgba(255, 240, 229, 0)   100%);
}

.halftone-app #field,
.halftone-app #stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.halftone-app #stars {
  display: none;
  pointer-events: none;
}

.halftone-app .ht-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 940px;
  margin: 0 auto;
  padding: 48px 40px;
}

.halftone-app .ht-lead,
.halftone-app .ht-body {
  margin: 0 0 0.8em;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.002em;
  color: var(--ht-text);
}

.halftone-app .ht-lead strong { font-weight: 700; }

.halftone-app .ht-sign {
  margin: 0.6em 0 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ht-sign);
}

/* Her title under the signature: body face, small, a touch quieter than the copy. */
.halftone-app .ht-role {
  margin: 0.35em 0 0;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ht-text);
  opacity: 0.8;
}

/* ---- Buttons ------------------------------------------------------------ */

/* Contact buttons (LMAI-2154). Plain outlined buttons in her ink, over a wash
   of the ground so the dots and stars don't run through them; nothing that
   competes with the copy above. */
.halftone-app .ht-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 1.8em 0 0;
}

.halftone-app .ht-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ht-line);
  border-radius: 6px;
  background: var(--ht-btn-bg);
  color: var(--ht-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.halftone-app .ht-btn:hover {
  border-color: var(--ht-line-strong);
  background: var(--ht-btn-bg-hover);
}

.halftone-app .ht-btn:focus-visible,
.halftone-app .ht-theme:focus-visible .ht-theme-track {
  outline: 2px solid var(--ht-sign);
  outline-offset: 2px;
}

/* The email button: copy icon, swapped for a check while COPIED_CLASS is on
   (copy-email.js). That swap, in her signature colour, is the whole confirmation. */
.halftone-app .ht-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.halftone-app .ht-icon-copy { opacity: 0.65; }
.halftone-app .ht-icon-check { display: none; color: var(--ht-sign); }

.halftone-app .ht-btn-email.is-copied { border-color: var(--ht-copied-line); }
.halftone-app .ht-btn-email.is-copied .ht-icon-copy { display: none; }
.halftone-app .ht-btn-email.is-copied .ht-icon-check {
  display: block;
  animation: ht-pop 0.2s ease-out;
}

@keyframes ht-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Case studies: greyed out until the first one exists, and no hover response,
   so it reads as not-yet-there. A click still opens the quokka panel, as a
   small surprise. The :hover rule repeats the resting look on purpose: it
   overrides .ht-btn:hover above. */
.halftone-app .ht-btn-soon {
  color: var(--ht-soon-ink);
  border-color: var(--ht-soon-line);
  background: var(--ht-soon-bg);
  cursor: default;
}

.halftone-app .ht-btn-soon:hover {
  color: var(--ht-soon-ink);
  border-color: var(--ht-soon-line);
  background: var(--ht-soon-bg);
  cursor: default;
}

/* ---- Theme switch ------------------------------------------------------- */

/* A small pill in the top-right corner; the knob carries a sun in light mode
   and slides across with a moon in dark mode. The button itself is a 44px
   target around the pill. */
.halftone-app .ht-theme {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--ht-knob-ink);
  cursor: pointer;
}

/* Shipped hidden; page.js shows it once it works. display:grid above outranks the
   browser's own [hidden] rule. */
.halftone-app .ht-theme[hidden] { display: none; }

.halftone-app .ht-theme-track {
  position: relative;
  display: block;
  width: 50px;
  height: 28px;
  border: 1px solid var(--ht-line);
  border-radius: 999px;
  background: var(--ht-btn-bg);
  transition: border-color 0.15s ease, background-color 0.35s ease;
}

.halftone-app .ht-theme:hover .ht-theme-track { border-color: var(--ht-line-strong); }

.halftone-app .ht-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ht-line);
  border-radius: 50%;
  background: var(--ht-knob);
  box-shadow: 0 1px 2px rgba(34, 29, 27, 0.25);
  transition: transform 0.25s ease, background-color 0.35s ease;
}

.halftone-app .ht-theme[aria-checked="true"] .ht-theme-knob { transform: translateX(22px); }

.halftone-app .ht-theme-icon {
  grid-area: 1 / 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.halftone-app .ht-theme-moon { display: none; fill: currentColor; stroke-width: 1.5; }
.halftone-app .ht-theme[aria-checked="true"] .ht-theme-sun { display: none; }
.halftone-app .ht-theme[aria-checked="true"] .ht-theme-moon { display: block; }

/* ---- Odds and ends ------------------------------------------------------ */

/* Read by screen readers, not shown. */
.halftone-app .ht-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* After a failed copy (FALLBACK_CLASS in copy-email.js) the live region's hint
   shows on its own line under the buttons, until the next click. */
.halftone-app .ht-btn-email.is-fallback ~ #copy-status {
  position: static;
  flex-basis: 100%;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: 13px;
  color: var(--ht-text);
}

/* Impressum and Privacy, tucked into the bottom-right corner of the page. */
.halftone-app .ht-footer {
  position: absolute;
  right: 20px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  gap: 1.2em;
  font-size: 12px;
  opacity: 0.7;
}

.halftone-app .ht-footer a {
  color: var(--ht-ink);
  text-decoration: none;
}

.halftone-app .ht-footer a:hover { text-decoration: underline; }

/* ---- Impressum and Privacy ---------------------------------------------
   The kit puts its legal wording into legal-layout.html at deploy (LMAI-2194):
   the same body, canvases and switch as the home page, so only the reading
   column is new. The theme switch, footer and canvases use the rules above. */

.halftone-app.ht-legal .ht-legal-main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 680px;
  margin: 0 auto;
  padding: 76px 24px 88px;
  font-size: 15px;
  line-height: 160%;
  color: var(--ht-text);
}

.halftone-app .ht-home {
  display: inline-flex;
  gap: 0.4em;
  margin-bottom: 2.2em;
  font-size: 14px;
  color: var(--ht-ink);
  text-decoration: none;
}

.halftone-app .ht-home:hover { text-decoration: underline; }

.halftone-app.ht-legal h1 {
  margin: 0 0 0.9em;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--ht-sign);
}

.halftone-app.ht-legal h2 {
  margin: 2em 0 0.5em;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ht-ink);
}

.halftone-app.ht-legal .ht-legal-main p { margin: 0 0 0.6em; }

.halftone-app.ht-legal .ht-legal-main a:not(.ht-home) {
  color: var(--ht-sign);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.halftone-app .ht-home:focus-visible,
.halftone-app.ht-legal .ht-legal-main a:focus-visible,
.halftone-app .ht-footer a:focus-visible {
  outline: 2px solid var(--ht-sign);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .halftone-app,
  .halftone-app .ht-btn,
  .halftone-app .ht-theme-track,
  .halftone-app .ht-theme-knob { transition: none; }
  .halftone-app .ht-btn-email.is-copied .ht-icon-check { animation: none; }
}

.halftone-app .ht-dialog {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ht-scrim);
}

/* display:flex above outranks the browser's [hidden] rule; keep the panel shut until opened. */
.halftone-app .ht-dialog[hidden] { display: none; }

/* The quokka panel: the page's own type and buttons, everything centred. */
.halftone-app .ht-dialog-box {
  max-width: 360px;
  background: var(--ht-ground);
  color: var(--ht-ink);
  border-radius: 8px;
  padding: 28px 24px;
  box-shadow: 0 12px 32px rgba(34, 29, 27, 0.25);
  text-align: center;
}

/* Same size and spacing as the page's paragraphs. pre-line shows the newline
   between the two sentences: quokka.js resets the caption through textContent
   (so the live region announces it), which would strip a <br>. */
.halftone-app .ht-dialog-box p {
  margin: 0 0 1.2em;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.002em;
  white-space: pre-line;
}

/* Close is a .ht-btn like the page's other buttons; this class is only the hook
   quokka.js uses to find it. */

@media (max-width: 640px) {
  /* Extra room at the bottom for the switch and the footer links. */
  .halftone-app .ht-card { padding: 40px 22px 54px; }

  /* On phones the switch moves to the bottom-left corner, level with
     Impressum and Privacy in the bottom-right, the pill 20px in from the edge. */
  .halftone-app .ht-theme {
    top: auto;
    right: auto;
    bottom: max(0px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
}