/* Shared styling for the two documentation pages (manual, quick reference).
   Same type and palette as the timer itself, with the fonts served from this
   app so the pages also read correctly offline. */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/bebas-neue-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/lato-700.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/plex-mono-700.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Lato', system-ui, sans-serif;
  background: #f5f2ec;
  color: #1a1a2e;
  line-height: 1.7;
  padding: 32px 18px;
  -webkit-text-size-adjust: 100%;
}

.logo { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 4px; color: #a09cb0; text-align: center; }
h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 8vw, 52px); letter-spacing: 3px; color: #1a3a5c; text-align: center; line-height: 1; margin-bottom: 6px; }
h2 { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 2px; color: #1a3a5c; margin: 48px 0 16px; border-bottom: 2px solid #ddd8cf; padding-bottom: 6px; }
h3 { font-size: 16px; font-weight: 700; color: #1a3a5c; margin: 28px 0 10px; }
p { margin-bottom: 14px; font-size: 15px; color: #333; }
ul, ol { margin: 0 0 14px 24px; font-size: 15px; color: #333; }
li { margin-bottom: 6px; }
code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; background: #fff; border: 1px solid #ddd8cf; border-radius: 4px; padding: 1px 5px; }
a { color: #1a3a5c; }

/* Back-to-app link, on every documentation page */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #1a3a5c; text-decoration: none;
  border: 1.5px solid #ddd8cf; background: #fff;
  border-radius: 8px; padding: 9px 16px; min-height: 44px;
}
.backlink:hover { border-color: #1a3a5c; }
.backlink-row { display: flex; justify-content: center; margin-bottom: 24px; }

.card { background: #fff; border: 1.5px solid #ddd8cf; border-radius: 12px; padding: 20px 24px; margin: 16px 0; }
.card-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; color: #1a3a5c; margin-bottom: 8px; }
.card p { margin-bottom: 8px; }

.tag { display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px; }
.tag-standalone, .tag-s { background: #e8f0f8; color: #1a3a5c; }
.tag-control, .tag-c { background: #ede9fe; color: #4338ca; }
.tag-display, .tag-d { background: #f0fdf4; color: #15803d; }

.key { display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; background: #fff; border: 1.5px solid #ddd8cf; border-radius: 5px; padding: 2px 8px; color: #1a1a2e; }

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.table-wrap { overflow-x: auto; margin: 14px 0; }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
th { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #6b6880; text-align: left; padding: 8px 12px; border-bottom: 2px solid #ddd8cf; }
td { font-size: 14px; padding: 8px 12px; border-bottom: 1px solid #eee8e0; color: #333; vertical-align: top; }

.tip { background: #fff4e8; border-left: 4px solid #c8670a; padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; font-size: 14px; }
.tip strong { color: #c8670a; }

.steps { counter-reset: step; list-style: none; padding: 0; margin-left: 0; }
.steps li { counter-increment: step; padding: 10px 0 10px 48px; position: relative; font-size: 15px; border-bottom: 1px solid #eee8e0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 8px;
  width: 32px; height: 32px; background: #1a3a5c; color: #fff;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.steps li:last-child { border-bottom: none; }

.toc { background: #fff; border: 1.5px solid #ddd8cf; border-radius: 12px; padding: 20px 28px; margin: 24px 0; }
.toc-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; color: #1a3a5c; margin-bottom: 10px; }
.toc a { display: block; font-size: 14px; color: #1a3a5c; text-decoration: none; padding: 6px 0; }
.toc a:hover { text-decoration: underline; }

.docfooter { text-align: center; margin-top: 56px; padding-top: 20px; border-top: 1px solid #ddd8cf; font-size: 12px; color: #a09cb0; }