/* offtheclocklabs.com. The colours and type are Downtrend's (DownTrend/lib/app/theme.dart); the
   layout is direction B of 2026-10-10: a quiet masthead, a reading column, and on a wide screen
   the contents of a long page as a rail beside it. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --ground: #F4F5F7;
  --sheet: #FFFFFF;
  --ink: #111317;
  --muted: #585C66;
  --accent: #1D56DA;
  --on-accent: #FFFFFF;
  --rule: #DFE1E6;
  --code: #E4E7EC;
  --icon: #1D56DA;
  --on-icon: #FFFFFF;
  --measure: 40rem;
  --wide: 62rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000;
    --sheet: #1C1D21;
    --ink: #F3F4F6;
    --muted: #A3A6AE;
    --accent: #6E9BFF;
    --on-accent: #00184A;
    --rule: #2C2E34;
    --code: #26282E;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "IBM Plex Sans", system-ui, sans-serif;
}
body > main { flex: 1 0 auto; width: 100%; }
/* The screens' row runs to the window's edges, which 100vw puts under a desktop scrollbar. */
body { overflow-x: clip; }
.nb { white-space: nowrap; }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.25rem; }
p, ul, ol { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin: 0.25rem 0; }
li::marker { color: var(--muted); }
strong { font-weight: 600; }
code { font: 0.85em/1 ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;
  background: var(--code); padding: 0.15em 0.35em; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--rule); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--sheet); padding: 0.5rem 0.75rem; z-index: 2; }

/* The masthead: the publisher's wordmark, and where you are under it. */
.masthead { padding: 0.6rem max(1.25rem, calc((100% - var(--measure)) / 2));
  border-bottom: 1px solid var(--rule); background: var(--sheet); }
.policy .masthead, .policy .foot { padding-inline: max(1.25rem, calc((100% - var(--wide)) / 2)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.crumbs a { color: var(--ink); text-decoration: none; display: inline-block; padding-block: 0.5rem; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--muted); }
.word { font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; }
.word span { font-weight: 400; color: var(--muted); }

main.doc { max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 3rem 1.25rem 2.5rem; }
.lede { font-size: 1.1875rem; color: var(--muted); max-width: 34rem; }
.meta { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.75rem; }

/* An app as a row: its tile, its name and its line. The tile is the app's launcher icon, the same
   in either scheme. */
.tile { width: 4.5rem; height: 4.5rem; flex: none; }
.tile .bg { fill: var(--icon); }
.tile .fg { color: var(--on-icon); }
.app { display: flex; gap: 1.25rem; align-items: center; margin: 1rem 0; }
.app > div { flex: 1; min-width: 0; }
.app h3 a { color: inherit; text-decoration: none; }
.app h3 a:hover { text-decoration: underline; }
.app p { margin: 0; color: var(--muted); text-wrap: balance; }
.app .platform { font-size: 0.9375rem; margin-top: 0.25rem; }
.hero .tile { width: 6rem; height: 6rem; }
.hero h1 { margin: 0 0 0.25rem; }
.hero p { font-size: 1.125rem; }

/* Four screens: a row that scrolls sideways on a phone, edge to edge, and all four across on a
   wide screen, wider than the text so the screens can be read. */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; margin: 2rem calc(50% - 50vw);
  padding: 0 calc(50vw - 50%) 0.5rem; scroll-padding-inline: calc(50vw - 50%); }
.shots img { width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--rule); scroll-snap-align: start; }
@media (min-width: 40rem) { .shots { grid-auto-columns: 30%; } }
@media (min-width: 66rem) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible;
    margin-inline: calc((var(--measure) - var(--wide)) / 2); padding-inline: 0; gap: 1.25rem; }
}

/* A long page: on a wide screen its contents become a rail beside the text, the sections strung
   on a line, the first and last dot filled. */
.policy main.doc { max-width: calc(var(--wide) + 2.5rem); display: grid;
  grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
@media (min-width: 62rem) {
  .policy main.doc { grid-template-columns: 13rem minmax(0, var(--measure)); column-gap: 4rem;
    justify-content: start; }
  .policy main.doc > * { grid-column: 2; }
  .policy main.doc > .toc { grid-column: 1; grid-row: 1 / span 80; align-self: start;
    position: sticky; top: 2rem; margin: 0.4rem 0 0; }
}
h2.summary { margin-top: 2rem; }
h2.summary + ul { font-size: 1.1875rem; line-height: 1.5; padding-left: 1.4rem; }
h2.summary + ul:has(> li:only-child) { list-style: none; padding-left: 0; }
.toc { margin: 1.5rem 0 0.5rem; }
.toc summary { cursor: pointer; font-size: 0.875rem; color: var(--muted); font-weight: 500;
  list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; margin: 0.75rem 0 0; position: relative; }
.toc ol::before { content: ""; position: absolute; left: 5px; top: 0.85em; bottom: 0.85em;
  width: 2px; background: color-mix(in srgb, var(--accent) 35%, var(--ground));
  border-radius: 1px; }
.toc li { position: relative; padding-left: 1.6rem; margin: 0 0 0.55rem; }
.toc li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 12px;
  height: 12px; border-radius: 50%; background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--accent); }
.toc li:first-child::before, .toc li:last-child::before { background: var(--accent); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.foot { padding: 1.5rem max(1.25rem, calc((100% - var(--measure)) / 2)) 3rem;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9375rem; }
.foot p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

/* On paper: the text alone, black on white, each link's address after it. */
@media print {
  :root { --ground: #FFFFFF; --sheet: #FFFFFF; --ink: #000000; --muted: #333333; --rule: #BBBBBB; }
  body { font-size: 11pt; }
  .skip, .toc, .shots { display: none; }
  .masthead { border: 0; padding: 0 0 1rem; }
  main.doc, .policy main.doc { display: block; max-width: none; padding: 0; }
  a { color: inherit; }
  main a[href^="/"]::after, main a[href^="http"]::after { content: " (offtheclocklabs.com" attr(href) ")"; font-size: 0.85em; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; }
  h2 { break-after: avoid; }
}