/* ───────────────────────────────────────────────────────────── App shell and home page. Every colour here comes from tokens.css. No literals. ───────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; /* The app fills the viewport and scrolls inside itself, so the rail and the reading column scroll independently and sticky elements can pin. 100% of is the floor; dvh refines it where the browser reports a smaller visible area, and neither can leave a gap at the bottom. */ height: 100%; min-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--pg-bg); color: var(--pg-ink); font-family: var(--ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── admin strip ────────────────────────────────────────────── Hidden by default. Shown only when the document carries .is-admin, which today is set by a placeholder toggle and will later be set by real authentication. The public never sees it. ─────────────────────────────────────────────────────────── */ .admin-strip { display: none; } .is-admin .admin-strip { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; background: var(--on); color: var(--chrome); padding: 0.4rem 1.1rem; font-size: 0.8rem; line-height: 1.4; border-bottom: 1px solid var(--on); } .admin-strip__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-3); white-space: nowrap; } .admin-strip__links { display: flex; gap: 0.35rem; flex-wrap: wrap; } .admin-strip a { padding: 0.2rem 0.6rem; border-radius: 100px; color: var(--chrome-3); white-space: nowrap; } .admin-strip a:hover { background: rgba(255, 255, 255, 0.1); color: var(--chrome); } .admin-strip a[aria-current="page"] { background: var(--chrome); color: var(--on); font-weight: 700; } .admin-strip a[data-external]::after { content: "↗"; margin-left: 0.3rem; opacity: 0.6; font-size: 0.9em; } .admin-strip__end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .admin-strip__note { color: var(--on-3); } .admin-strip__out { border: 1px solid var(--on-3); padding: 0.16rem 0.6rem; border-radius: 100px; color: var(--chrome-3); } .admin-strip__out:hover { background: rgba(255, 255, 255, 0.1); } /* ── app frame ───────────────────────────────────────────── */ .app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--chrome); } .bar { display: flex; align-items: center; gap: 1.2rem; padding: 0.95rem 1.5rem; border-bottom: 1px solid var(--chrome-3); background: var(--chrome); position: sticky; top: 0; z-index: 20; flex: 0 0 auto; } .mark { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.045em; color: var(--on); } .mark i { font-style: normal; color: var(--g); } .searchwrap { flex: 1 1 auto; display: flex; justify-content: center; min-width: 12rem; } .search { display: flex; align-items: center; gap: 0.6rem; width: min(42rem, 100%); background: var(--page); border: 1.5px solid var(--chrome-3); border-radius: 9px; padding: 0.7rem 0.8rem 0.7rem 1rem; color: var(--on-2); font-size: 1.08rem; text-align: left; font-family: inherit; cursor: text; } .search:hover { border-color: var(--on-3); } .search__icon { font-size: 1.15rem; color: var(--on-3); } .search__key { font-family: var(--mono); font-size: 0.78rem; border: 1px solid var(--chrome-3); border-radius: 6px; padding: 0.12rem 0.4rem; color: var(--on-3); } .search__hint { flex: 1; color: var(--on-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barend { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; } a.pill { display: inline-flex; align-items: center; text-decoration: none; line-height: normal; } .pill { font-size: 0.98rem; border: 1px solid var(--chrome-3); border-radius: 100px; padding: 0.38rem 0.85rem; color: var(--on-2); background: var(--page); font-family: inherit; cursor: pointer; white-space: nowrap; } .pill:hover { border-color: var(--on-3); color: var(--on); } .pill--support { font-weight: 700; } .cols { flex: 1; min-height: 0; display: grid; --pane-w: 22rem; grid-template-columns: 13rem minmax(0, 1fr) 0 var(--pane-w); } .cols--two { grid-template-columns: 13rem minmax(0, 1fr); } /* Closed: the pane and its handle take no room at all. */ .cols--no-pane { grid-template-columns: 13rem minmax(0, 1fr); } .cols--no-pane .pane, .cols--no-pane .pane__resize { display: none; } /* ── book rail ───────────────────────────────────────────── */ .rail { border-right: 1px solid var(--chrome-3); padding: 0.9rem 0 2rem; overflow-y: auto; background: var(--chrome); } .rail__head { font-size: 0.66rem; font-family: var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-3); padding: 0.9rem 1.1rem 0.35rem; } .rail__head:first-child { padding-top: 0.2rem; } .rail__book { display: block; padding: 0.24rem 1.1rem; font-size: 0.88rem; color: var(--on-2); } .rail__book:hover { background: var(--chrome-2); color: var(--on); } .rail__more { display: flex; gap: 0.6rem; padding: 0.24rem 1.1rem; font-size: 0.84rem; color: var(--on-3); } .rail__group { padding: 1rem 1.1rem 0.3rem; font-size: 0.78rem; color: var(--on-3); border-top: 1px solid var(--chrome-3); margin-top: 0.7rem; } /* ── page ────────────────────────────────────────────────── */ .page { background: var(--page); overflow-y: auto; min-height: 0; } .start { padding: 6.5rem 1.6rem 4rem; max-width: 48rem; margin-inline: auto; } .start h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: var(--ink); margin: 0 0 0.5rem; } .lead { font-size: 1rem; color: var(--ink-2); line-height: 1.6; max-width: var(--measure); margin: 0 0 1.5rem; } /* the one field */ .field { display: flex; align-items: center; gap: 0.75rem; background: var(--page); border: 1.5px solid var(--ink); border-radius: 13px; padding: 0.75rem 0.8rem 0.75rem 1rem; max-width: 38rem; } .field__cue { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--ink-3); white-space: nowrap; } .field__input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font-family: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } .field__input::placeholder { color: var(--ink-3); font-weight: 400; letter-spacing: -0.01em; } .field__input:focus { outline: none; } .field__go { font-size: 0.86rem; font-weight: 700; color: var(--page); background: var(--ink); border: 0; border-radius: 100px; padding: 0.42rem 0.9rem; font-family: inherit; white-space: nowrap; cursor: pointer; } /* examples */ .eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin: 2.1rem 0 0.7rem; } .egs { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; max-width: 44rem; } .eg { border: 1px solid var(--hair); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--page); text-align: left; font-family: inherit; cursor: pointer; } .eg:hover { background: var(--page-2); border-color: var(--ink-3); } .eg b { display: block; font-size: 0.78rem; color: var(--ink-3); font-weight: 700; } .eg span { display: block; font-size: 0.94rem; color: var(--ink); line-height: 1.4; } /* past studies */ .studies { max-width: 44rem; } .study { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid var(--hair); font-size: 0.92rem; color: var(--ink-3); } .study:hover { background: var(--page-2); } .study__title { color: var(--ink); font-weight: 700; } .study__meta { font-variant-numeric: tabular-nums; white-space: nowrap; } .studies__empty { border-top: 1px solid var(--hair); padding-top: 0.8rem; font-size: 0.9rem; color: var(--ink-3); max-width: var(--measure); } /* ── narrow ──────────────────────────────────────────────── */ /* Tablet and small laptop: keep both columns, give the rail less room. */ @media (max-width: 76rem) { .cols, .cols--no-pane { grid-template-columns: 12rem minmax(0, 1fr); } } @media (max-width: 64rem) { .cols, .cols--no-pane { grid-template-columns: 10rem minmax(0, 1fr); } .rail__book, .rail__head, .rail__more, .rail__group { padding-left: 0.8rem; padding-right: 0.8rem; } .start { padding: 3rem 1.4rem 3.5rem 2rem; } .search__key { display: none; } } /* The search keeps its width; the optional pills give way first. */ @media (max-width: 68rem) { .barend .pill--hide-narrow { display: none; } } @media (max-width: 52rem) { .search { font-size: 0.95rem; padding: 0.55rem 0.6rem 0.55rem 0.8rem; } .mark { font-size: 1.15rem; } } /* Phone: one column. The rail is replaced, not removed — see .pick. */ @media (max-width: 44rem) { .cols, .cols--no-pane { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } .bar { padding: 0.5rem 1rem; gap: 0.6rem; } .start { padding: 2rem 1.1rem 3rem; } .start h1 { font-size: 1.7rem; } .egs { grid-template-columns: minmax(0, 1fr); } }