/* The That Key demo in "How That Key works". The phone screen uses the app's
   own tokens (ink #232B20, green #3F5D3A, Literata and Atkinson Hyperlegible,
   64pt radius-14 buttons); the column beside it is the site's frame. Built by
   /assets/thatkey-demo.js. */

.tkd {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  border-radius: 14px;
  background: #E5F1E4;
  background: oklch(0.95 0.02 145);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-stretch: 100%;
  --tk-scale: 1;
}
.tkd button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- phone */

.tk-phone-box { flex: none; width: calc(316px * var(--tk-scale)); height: calc(636px * var(--tk-scale)); }
.tk-phone {
  position: relative; width: 316px; height: 636px; box-sizing: border-box; overflow: hidden;
  border: 8px solid var(--ink); border-radius: 46px; background: #FAF5EA;
  transform: scale(var(--tk-scale)); transform-origin: 0 0;
  user-select: none; -webkit-user-select: none;
}
/* Built at the app's natural size so its type sizes stay true, then scaled to the 300px screen. */
.tk-app {
  position: absolute; left: 0; top: 0; width: 372px; height: 768px;
  transform: scale(.8065); transform-origin: 0 0;
  color: #232B20; font-family: 'Atkinson Hyperlegible', sans-serif;
}
.tk-app svg { display: block; width: 100%; height: auto; }

.tk-status {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 5; box-sizing: border-box;
  display: flex; justify-content: space-between; align-items: center; padding: 0 28px;
  font-size: 14px; font-weight: 700;
}
.tk-battery { width: 24px; height: 11px; border: 1.5px solid #232B20; border-radius: 3px; }

.tk-screen { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.tk-screen.on { opacity: 1; }
.tk-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }

.tk-mark { display: block; }
.tk-h28 { font-family: 'Literata', serif; font-weight: 700; font-size: 28px; }
.tk-h22 { position: absolute; left: 20px; right: 20px; font-family: 'Literata', serif; font-weight: 600; font-size: 22px; }
.tk-body { font-size: 17px; line-height: 1.5; color: #5F594B; }
.tk-abs { position: absolute; left: 20px; right: 20px; }
.tk-large-title { position: absolute; left: 20px; top: 84px; font-family: 'Literata', serif; font-weight: 700; font-size: 34px; }

.tk-btn {
  position: absolute; left: 20px; right: 20px; height: 64px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: #3F5D3A; color: #F5F0E1; font-weight: 700; font-size: 18px;
  transition: opacity .2s;
}
.tk-btn-outline { border: 1.5px solid #3F5D3A; background: #fff; color: #3F5D3A; }

.tk-nav {
  position: absolute; left: 0; right: 0; top: 44px; height: 44px; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 20px; font-size: 17px; font-weight: 700; color: #3F5D3A;
}
.tk-nav-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'Literata', serif; font-weight: 600; font-size: 18px; color: #232B20;
}

/* ------------------------------------------------------------- my keys */

.tk-key-list { position: absolute; left: 20px; right: 20px; top: 144px; display: flex; flex-direction: column; gap: 12px; }
.tk-keys { display: flex; flex-direction: column; gap: 12px; }
.tk-key {
  display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 16px; box-sizing: border-box;
  border-radius: 16px; border: 1px solid #E4DCC9; background: #fff;
  transition: background .6s, border-color .6s;
}
.tk-key.fresh { background: #E3EAD9; border-color: #3F5D3A; }
.tk-key-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tk-key-text b { font-size: 17px; }
.tk-key-text span { font-size: 15px; color: #5F594B; }
.tk-chevron { font-size: 20px; color: #5F594B; }
.tk-btn-56 {
  display: flex; align-items: center; justify-content: center; height: 56px; box-sizing: border-box;
  border-radius: 14px; border: 1.5px solid #3F5D3A; background: #fff; color: #3F5D3A; font-weight: 700; font-size: 18px;
}
.tk-free { font-size: 17px; color: #5F594B; text-align: center; }

/* -------------------------------------------------------- viewfinders */

.tk-viewfinder {
  position: absolute; left: 20px; right: 20px; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #1A1E17; transition: background .8s;
}
.tk-brackets {
  position: absolute; inset: 28px; border: 3px solid #D6B26A; border-radius: 12px; transition: opacity .4s;
  clip-path: polygon(0 0,22% 0,22% 3px,3px 3px,3px 22%,0 22%,0 78%,3px 78%,3px calc(100% - 3px),22% calc(100% - 3px),22% 100%,78% 100%,78% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 78%,100% 78%,100% 22%,calc(100% - 3px) 22%,calc(100% - 3px) 3px,78% 3px,78% 0,100% 0,100% 100%,0 100%);
}
/* The app crops the saved photo to the key, so after capture the frame closes
   in on it. It does not cut the background away or straighten the key. */
.tk-photo-key {
  position: absolute; width: 160px; transform: rotate(-18deg) scale(.92);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .6s;
}
.tk-photo-key[data-part="photo-green"] { opacity: 0; }
.tk-viewfinder.cropped { background: #E3EAD9; }
.tk-viewfinder.cropped .tk-brackets { opacity: 0; }
.tk-viewfinder.cropped .tk-photo-key { transform: rotate(-18deg) scale(1.3); }
.tk-viewfinder.cropped [data-part="photo-cream"] { opacity: 0; }
.tk-viewfinder.cropped [data-part="photo-green"] { opacity: 1; }
.tk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .5s; pointer-events: none; }
.tk-flash-fast { transition: opacity .25s; }

/* ------------------------------------------------------------ add a key */

.tk-preview {
  position: absolute; left: 20px; right: 20px; top: 100px; height: 84px; border-radius: 16px;
  background: #E3EAD9; display: flex; align-items: center; justify-content: center;
}
.tk-sub { position: absolute; left: 20px; right: 20px; top: 236px; font-size: 17px; color: #5F594B; }
.tk-chips { position: absolute; left: 20px; right: 20px; top: 270px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-chips[hidden] { display: none; }
.tk-chip {
  height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1.5px solid #3F5D3A; background: #fff; color: #3F5D3A;
  font-size: 16px; font-weight: 700; transition: background .2s, color .2s;
}
.tk-chip.on { background: #3F5D3A; color: #F5F0E1; }
.tk-field {
  position: absolute; left: 20px; right: 20px; top: 432px; height: 52px; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 16px;
  border-radius: 14px; border: 1px solid #E4DCC9; background: #fff; font-size: 17px; color: #5F594B;
}
/* The place step has no suggestions in the app, only the text box. */
.tk-field.tk-field-top { top: 300px; }
.tk-field.typed { color: #232B20; }
[hidden].tk-btn { display: none; }

.tk-check {
  margin-top: 220px; width: 96px; height: 96px; border-radius: 50%; background: #E3EAD9;
  display: flex; align-items: center; justify-content: center;
  color: #3F5D3A; font-size: 48px; font-weight: 700;
  transform: scale(.6); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.tk-check.sprung { transform: scale(1); }

/* ---------------------------------------------------------------- match */

.tk-card {
  position: absolute; left: 20px; right: 20px; top: 144px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 16px; border: 1px solid #E4DCC9; background: #fff;
}
.tk-match-name { font-family: 'Literata', serif; font-weight: 600; font-size: 21px; }
.tk-match-kept { font-size: 17px; color: #5F594B; }
.tk-match-note { font-size: 15px; color: #5F594B; }
.tk-overlay {
  position: relative; height: 120px; border-radius: 12px; background: #FAF5EA; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tk-overlay .tk-mark { position: absolute; }
.tk-scanned { transform: translate(70px, -26px) rotate(-16deg); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.tk-scanned.aligned { transform: translate(3px, 2px) rotate(0deg); }
.tk-legend { display: flex; gap: 16px; font-size: 13px; color: #5F594B; }
.tk-legend span { display: flex; align-items: center; gap: 6px; }
.tk-legend i { width: 10px; height: 10px; }
.tk-caveat { position: absolute; left: 20px; right: 20px; top: 500px; font-size: 16px; line-height: 1.5; color: #5F594B; }

/* ------------------------------------------------------- tabs, shield */

.tk-tabs {
  position: absolute; left: 0; right: 0; top: 690px; height: 78px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 0;
  border-top: 1px solid #E4DCC9; background: #fff;
}
.tk-tabs[hidden] { display: none; }
.tk-tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: #5F594B; }
.tk-tabs span.on { color: #3F5D3A; font-weight: 700; }
.tk-tabs svg { width: 26px; height: 26px; }

.tk-shield {
  position: absolute; inset: 0; z-index: 6; opacity: 0; transition: opacity .35s; pointer-events: none;
  background: #FAF5EA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.tk-shield.on { opacity: 1; }
.tk-shield-name { font-family: 'Literata', serif; font-weight: 600; font-size: 28px; }
.tk-shield-by { font-size: 13px; color: #5F594B; margin-top: 4px; }

.tk-finger {
  position: absolute; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; box-sizing: border-box;
  border-radius: 50%; background: rgba(11, 35, 80, .18); border: 2px solid rgba(11, 35, 80, .55);
  pointer-events: none;
  transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), transform .15s, opacity .3s;
}

/* Reduced motion: crossfades only. The finger jumps, nothing springs or slides. */
.tk-reduce .tk-finger { transition: opacity .3s; }
.tk-reduce .tk-check, .tk-reduce .tk-scanned, .tk-reduce .tk-photo-key { transition: opacity .35s; }

/* ------------------------------------------------------- chapter column */

.tk-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; color: var(--ink); }
.tkd .tk-chapter {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
  padding: 16px 16px 18px; border-top: 1.5px solid var(--ink); text-align: left; cursor: pointer;
}
.tkd .tk-chapter.active { background: var(--paper); border-radius: 0 0 10px 10px; }
.tk-chapter-n { font-size: 13px; letter-spacing: .04em; padding-top: 4px; }
.tk-chapter-title { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 700; font-size: 20px; line-height: 1.25; }
.tk-chapter-text { font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.tk-chapter-text[hidden] { display: none; }
.tk-chapter-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); }

.tk-buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 20px; border-top: 1.5px solid var(--ink); }
/* The site's pill, not That Key's in-app rectangle. */
.tkd .tk-play {
  display: inline-flex; align-items: center; height: 56px; padding: 0 28px; box-sizing: border-box;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 700; font-size: 16px; cursor: pointer;
}
.tk-note { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }