/* App layout on top of the design system (tokens.css + bundle.css, copied unchanged from design/).
   The artboards are fixed 390×844 and 2560×1440 frames; this file makes the same components fluid,
   adds safe areas for the iPhone, and styles the few app-only pieces. Every colour comes from a token. */

html, body { margin: 0; background: var(--bg); }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100%; }
[hidden] { display: none !important; }
.cb-app a, .cb-app button, .cb-app label { -webkit-tap-highlight-color: transparent; }
.cb-app button { font: inherit; }
.text-display { overflow-wrap: anywhere; }

/* ---------- phone frame ---------- */
.screen {
  max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) max(var(--space-5), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + var(--space-6)) max(var(--space-5), env(safe-area-inset-left, 0px));
}
.screen > * { flex-shrink: 0; }
.screen--dock { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }
.headblock { display: flex; flex-direction: column; margin-top: -6px; }
.banners { display: flex; flex-direction: column; gap: var(--space-2); }
.banners:empty { display: none; }
.cb-banner .cb-btn { flex: none; align-self: center; }
.lib-body { display: flex; flex-direction: column; gap: var(--space-4); }
.lib-body > .cb-list { margin-top: calc(var(--space-1) * -1); }
.sk-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 40px; column-gap: 12px; row-gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cb-row__title { overflow-wrap: anywhere; }
.cb-row__title:focus-visible { outline: none; }
.cb-row:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.cb-row__vndb:focus-visible { outline: 2px solid var(--focus); }
.cb-disclosure:disabled { cursor: default; opacity: .8; }
.cb-disclosure--filled.is-open { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cb-iconbtn:disabled { opacity: .4; cursor: default; }
.cb-btn--grow { min-width: 0; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label.cb-btn { cursor: pointer; }
label.cb-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* routes */
.rgroup { display: flex; flex-direction: column; }
.rlist { display: flex; flex-direction: column; }
.cb-route__label { margin-left: var(--space-2); font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink-muted); overflow-wrap: anywhere; }
.cb-route__start { overflow-wrap: anywhere; }
.notes-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.notes-list li { overflow-wrap: anywhere; }
.notes-list--warn li { color: var(--warning); }

/* route player */
.small-quiet { align-self: flex-start; min-height: 36px; padding: 0; font-size: 13px; }
.route-name { margin: 4px 0 0; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.done-wrap { display: flex; flex-direction: column; gap: 6px; }
.goalbox { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface); overflow-wrap: anywhere; }
.cb-choice--open { cursor: default; }
.cb-choice__text, .cb-step__text, .cb-choice__alt-text, .cb-cleared__end, .cb-stepcard__title { white-space: pre-line; overflow-wrap: anywhere; }
.cb-choice__note { overflow-wrap: anywhere; }
.cb-stepcard__text { overflow-wrap: anywhere; }
.kbd-hint { margin-top: calc(var(--space-2) * -1); }
.kbd-hint .cb-kbd { min-width: 0; height: 22px; padding: 0 6px; font-size: 12px; }
@media (pointer: coarse) { .kbd-hint { display: none; } }
.cb-dock {
  position: fixed; z-index: 10; display: block;
  padding: var(--space-3) max(var(--space-5), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + var(--space-3)) max(var(--space-5), env(safe-area-inset-left, 0px));
}
.dock-in { max-width: 520px; margin: 0 auto; display: flex; gap: var(--space-3); }
.setgroup { display: flex; flex-direction: column; }

/* ---------- PC ---------- */
.is-pc .cb-pc { min-height: 100vh; }
.pc-narrow { max-width: 720px; }
.is-pc .screen { padding: 0; min-height: 0; max-width: none; margin: 0; }
.is-pc .screen--dock { padding-bottom: 0; }
.is-pc .cb-dock { position: sticky; bottom: 0; margin-top: var(--space-6); padding: var(--space-3) 0 var(--space-4); }
.is-pc .dock-in { max-width: none; margin: 0; }
.stack-8, .stack-10, .stack-12, .stack-16, .stack-24 { display: flex; flex-direction: column; }
.stack-8 { gap: 8px; } .stack-10 { gap: 10px; } .stack-12 { gap: 12px; } .stack-16 { gap: 16px; } .stack-24 { gap: 24px; }
.tbl-link { color: var(--ink); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cb-app .tbl-link:hover { color: var(--accent); }
.cb-table td .cb-row__count { justify-content: flex-end; }
.cb-pcnav a { cursor: pointer; }
.cb-paste { position: relative; }
.paste-catcher { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: transparent; caret-color: transparent; opacity: 0; resize: none; cursor: text; }
.link-label { color: var(--accent); text-decoration: underline; cursor: pointer; }
.cb-dropzone.is-over { border-color: var(--focus); background: var(--accent-tint); }
.fmt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.howto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; max-width: none; align-items: start; }
.howto-grid section { scroll-margin-top: 24px; }
@media (max-width: 1400px) { .howto-grid, .fmt-grid { grid-template-columns: minmax(0, 1fr); } }
.cb-result__actions .cb-field__help { flex-basis: 100%; }
.cb-issues li { flex-wrap: wrap; }

/* touch screens keep :hover after a tap; don't let a tapped button stay in its hover colour */
@media (hover: none) {
  .cb-btn--primary:hover { background: var(--accent); }
  .cb-btn--tonal:hover { background: var(--surface); }
  .cb-pcnav a:hover { background: transparent; color: var(--ink-muted); }
  .cb-app :where(a:hover) { color: var(--accent); }
}

/* ---------- unlock and new-key screens ---------- */
.screen.unlock { justify-content: center; }
.is-pc .screen.unlock { min-height: 100vh; padding: var(--space-12) var(--space-6); }
.unlock-card { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.unlock-mark { color: var(--accent); background: var(--accent-tint); }
.keybox { font-size: 17px; line-height: 28px; white-space: normal; word-break: normal; overflow-wrap: normal; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }