/* Andon presentation — the user guide booklet's look on reveal.js slides (1280×720). */

@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --bg: #FCFCFB; --surface: #FFFFFF; --ink: #1A1C1E; --body: #3E4247; --muted: #5E6369; --faint: #8A9097;
    --rule: #E3E4E2; --rule-strong: #C9CCCF;
    --green: #22A06B; --orange: #E8862A; --red: #D9453C;
    --sans: 'Manrope', system-ui, 'Segoe UI', sans-serif;
    --mono: 'DM Mono', ui-monospace, Consolas, monospace;
}

html, body, .reveal-viewport { background: var(--bg); }
.reveal { font-family: var(--sans); font-size: 26px; color: var(--ink); }
.reveal .slides { text-align: left; }
.reveal .slides > section { box-sizing: border-box; height: 720px; padding: 52px 76px 40px; }
.reveal .slides .sl { height: 100%; display: flex; flex-direction: column; }
.reveal .slides .sl > .body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.reveal h1, .reveal h2, .reveal h3 { font-family: var(--sans); color: var(--ink); text-transform: none; text-shadow: none; margin: 0; }
.reveal h1 { font-weight: 200; font-size: 168px; line-height: .9; letter-spacing: -0.045em; }
.reveal h2 { font-weight: 200; font-size: 58px; line-height: 1.02; letter-spacing: -0.03em; }
.reveal h3 { font-weight: 300; font-size: 26px; letter-spacing: -0.01em; }
.reveal p, .reveal li { font-size: 21px; line-height: 1.6; color: var(--body); margin: 0; }
.reveal strong { font-weight: 600; color: var(--ink); }
.reveal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.reveal code, .reveal pre { font-family: var(--mono); }
.reveal .lead { font-weight: 300; font-size: 28px; line-height: 1.4; color: var(--ink); }
.reveal .muted { color: var(--muted); }

/* Running heads, as in the booklet */
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.foot { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.side { max-width: 400px; font-weight: 300; font-size: 21px !important; line-height: 1.5 !important; text-align: right; color: var(--ink) !important; }

/* Columns split by thin rules */
.cols { display: grid; gap: 0; }
.cols > * { padding: 0 32px; border-left: 1px solid var(--rule); min-width: 0; }
.cols > *:first-child { padding-left: 0; border-left: 0; }
.cols > *:last-child { padding-right: 0; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c55 { grid-template-columns: 3fr 2fr; }

/* Status dots */
.dot { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; }
.dot.white  { background: #FFF; border: 1.5px solid var(--faint); box-sizing: border-box; }
.dot.green  { background: var(--green); }
.dot.orange { background: var(--orange); }
.dot.red    { background: var(--red); }
.dot.halo.white  { box-shadow: 0 0 0 8px rgba(138,144,151,.10); }
.dot.halo.green  { box-shadow: 0 0 0 8px rgba(34,160,107,.12), 0 0 0 18px rgba(34,160,107,.05); }
.dot.halo.orange { box-shadow: 0 0 0 8px rgba(232,134,42,.12), 0 0 0 18px rgba(232,134,42,.05); }
.dot.halo.red    { box-shadow: 0 0 0 8px rgba(217,69,60,.12), 0 0 0 18px rgba(217,69,60,.05); }
.dot.lg { width: 18px; height: 18px; }
.c-green { color: var(--green); } .c-orange { color: var(--orange); } .c-red { color: var(--red); } .c-dim { color: var(--faint); }

/* States */
.state { display: flex; flex-direction: column; gap: 16px; }
.state .dot { margin: 10px 0 0 10px; }
.state-name { font-weight: 200; font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; }
.state-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.state p { font-size: 18px; line-height: 1.55; }

/* Quotes and code */
.pull { font-weight: 300; font-size: 30px !important; line-height: 1.35 !important; color: var(--ink) !important; padding-left: 22px; border-left: 1px solid var(--rule-strong); }
.reveal pre { margin: 0; width: 100%; box-shadow: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 20px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.reveal pre code { max-height: none; padding: 0; background: none; color: var(--body); font-size: inherit; line-height: inherit; }
.kanji { font-size: 128px; font-weight: 300; line-height: 1; color: var(--red); opacity: .55; }

/* Task rows */
.rows { border-top: 1px solid var(--rule); }
.row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.row-t { display: flex; align-items: center; gap: 14px; font-size: 21px; color: var(--ink); }
.row-n { margin: 6px 0 0 26px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.row.child { padding-left: 32px; }

/* Lists of features */
.flist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.flist > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.flist b { display: block; font-weight: 300; font-size: 22px; }
.flist span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Kanban */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lane { border: 1px solid var(--rule); border-radius: 8px; padding: 12px; background: var(--surface); min-height: 150px; }
.lane-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.card { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.4; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.card .dot { width: 8px; height: 8px; }
.card small { display: block; margin-top: 4px; font-size: 12px; color: var(--orange); }
.empty { font-size: 13px; color: var(--faint); text-align: center; padding-top: 18px; }
.dod { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--surface); font-size: 16px; }
.dod-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.dod-row:last-of-type { border-bottom: 0; }
.dod-row span:last-child { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--mono); font-size: 13px; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 12px; color: var(--muted); background: var(--surface); }
.tag.hl { border-color: var(--rule-strong); color: var(--ink); }

/* Flow line */
.flow { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em; color: var(--faint); }

/* Links at the end */
.links { display: flex; gap: 16px; margin-top: 32px; }
.links a { border: 1px solid var(--rule-strong); border-radius: 8px; padding: 16px 22px; font-family: var(--mono); font-size: 15px; line-height: 1.6; }
.links a span { display: block; color: var(--faint); }

/* The four-states diagram from the booklet cover */
.diagram { position: relative; width: 460px; height: 440px; flex-shrink: 0; }
.diagram > * { position: absolute; }
.diagram .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.diagram b { display: block; font-weight: 300; font-size: 23px; line-height: 1.1; }
.diagram i { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.diagram .pt { border-radius: 50%; }

/* Language switch and reveal chrome */
.lang { position: fixed; top: 16px; right: 20px; z-index: 30; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 16px; padding: 6px 14px; background: rgba(252,252,251,.9); }
.lang:hover { color: var(--ink); border-color: var(--rule-strong); }
.reveal .progress { height: 2px; color: var(--ink); background: var(--rule); }
.reveal .slide-number { font-family: var(--mono); font-size: 12px; color: var(--faint); background: transparent; right: 24px; bottom: 16px; }
.reveal .fragment { opacity: .12; }
.reveal .fragment.visible { opacity: 1; }
.reveal .controls { color: var(--ink); }