/* The homepage on a phone. index.html loads this only under the phone query (max-width: 600px, or a touch screen under
   500px tall), so the desktop page never sees it. The story stage (page.css) is too small to read there, so it gives way
   to one screen of its own: the headline, and under it the six marks and more of the catalog circling the Onyx app icon
   on a tilted ring. They spiral into it; the icon settles and steps back, and the window, the app's thread and nothing
   else, arrives in its place and plays its asks once. The ask at the end sends the link to a Mac. Driven by
   landing/phone.js; the type, inks and paper are /site.css's. */
html { scroll-padding-top: 72px; }
.track, .bar > .get:not(.get-phone) { display: none; }
.ph[hidden], .get-phone[hidden] { display: block; }

/* The bar: one sticky row, every target 44px. At the top it sits clear on the wallpaper; once the page moves under it,
   it turns to the Warm paper of the windows, as a menu bar over the desktop. */
.bar { position: sticky; top: 0; padding: max(8px, env(safe-area-inset-top)) 12px 8px 16px; border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s; }
.bar[data-stuck] { border-bottom-color: var(--foot-line); background: rgb(246 243 236/.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { font-size: 16px; }
.brand img { width: 30px; height: 30px; }
.bar .get-phone[hidden] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; }

/* The bar's own height: its top padding, a 44px row, 8px under it and its hairline. */
.ph { --ph-g: 20px; --bar: calc(max(8px, env(safe-area-inset-top)) + 53px); }
.bar { z-index: 30; }

/* The first screen, all of it: the headline, then the stage, which the ring and then the window fill. */
.ph-screen { height: calc(100svh - var(--bar)); min-height: 560px; max-height: 900px; display: flex; flex-direction: column;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* A phone on its side is shorter than the ring and window want: they share what there is rather than scroll. */
@media (max-height: 500px) { .ph-screen { min-height: 0; } }
.ph-hero { flex: none; padding: 18px var(--ph-g) 18px; text-align: center; }
.ph-hero h1 { margin: 0 auto; max-width: 12ch; font: 600 clamp(34px, 9.6vw, 42px)/1.02 var(--site); letter-spacing: -.03em; color: var(--site-ink); text-wrap: balance; }
.ph-stage { position: relative; flex: 1; min-height: 0; margin: 0 12px; }

/* The Onyx icon the ring goes round. The art keeps the Mac icon's own margin: its tile is the middle 80.5%. */
.ph-logo { position: absolute; left: 50%; top: 46%; z-index: 10; translate: -50% -50%; }
.ph-logo[hidden] { display: none; }
.ph-logo img { display: block; width: 132px; height: 132px; transform-origin: 50% 50%;
  filter: drop-shadow(0 12px 20px rgb(10 35 100/.4)); animation: arrive .6s var(--ease-arrive) both; }
/* The marks ride canvases over the page while they pour: the far half of the ring behind the icon, the near half over it. */
.ph-cells { position: absolute; left: 0; top: 0; pointer-events: none; }

/* The window: the app's thread at reading size, waiting unseen in the stage until the icon hands over. */
.ph-win { position: absolute; inset: 0; z-index: 12; visibility: hidden; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--theme-background); color: var(--t1); box-shadow: var(--win-shadow); font: 15px/1.5 var(--site); }
.ph-win[data-open] { visibility: visible; }
.ph-top { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--foot-line); }
.ph-lights { display: flex; gap: 6px; margin-right: 4px; }
.ph-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ph-lights i:nth-child(2) { background: #febc2e; } .ph-lights i:nth-child(3) { background: #28c840; }
.ph-face { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.ph-face canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.ph-name { font-weight: 600; letter-spacing: -.01em; }
.ph-says { margin-left: auto; padding-right: 8px; font-size: 12.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Play again, in the bar once the story rests. */
.ph-again { flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin-left: -4px; border: 0; border-radius: 10px; background: none; color: var(--t3);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-sine), visibility 0s .4s; }
.ph-again svg { width: 17px; height: 17px; }
.ph-win[data-ended] .ph-again { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-sine); }
.ph-again:active { background: var(--row-active); }

/* The thread: newest at the bottom, as the app's. */
.ph-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ph-col { position: absolute; inset: auto 0 0; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 18px 16px 16px; }
.ph-col p { margin: 0; }
.ph-you { align-self: flex-end; max-width: 86%; border-radius: 14px; background: var(--row-active); padding: 9px 13px; }
.ph-col > * { animation: arrive .3s var(--ease-arrive) both; }
.ph-col > [hidden] { display: none; }
.ph-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t3); }
.ph-status i { width: 6px; height: 6px; margin: 0 4px; border-radius: 50%; background: var(--theme-foreground); animation: breathe 2.4s var(--ease-sine) infinite; }
/* The sessions a message started, one under another as the app's thread has them; an ask's answers, side by side. */
.ph-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
.ph-chips span { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--s2);
  font-size: 13px; color: var(--t3); white-space: nowrap; animation: arrive .3s var(--ease-arrive) both; }
.ph-chips span:nth-child(2) { animation-delay: .12s; } .ph-chips span:nth-child(3) { animation-delay: .24s; }
.ph-chips img { width: 20px; height: 20px; border-radius: 5px; } .ph-chips b { font-weight: 500; color: var(--t1); }
.ph-asker { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--t3); }
.ph-asker img { width: 20px; height: 20px; border-radius: 3px; }
.ph-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ph-pills span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--s1); font-size: 14px; }
.ph-pills .ph-reply { padding-left: 12px; color: var(--t2); }
.ph-pills svg { width: 16px; height: 16px; }

/* The composer, as the app's: it grows with what is typed, and Send comes in beside the microphone once there are words. */
.ph-composer { flex: none; padding: 0 12px 10px; }
.ph-box { display: flex; align-items: flex-end; min-height: 46px; padding: 6px 6px 6px 14px; border-radius: 16px; border: 1px solid var(--stroke-input);
  background: var(--theme-input); box-shadow: var(--shadow-input); transition: border-color .2s; }
.ph-box[data-on] { border-color: var(--stroke-input-focus); }
.ph-typed { flex: 1; min-width: 0; min-height: 32px; max-height: 66px; overflow: hidden; padding: 5px 0; font-size: 15px; line-height: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.ph-typed > span { white-space: pre-wrap; }
.ph-typed:empty::before { content: 'Message Graves'; color: color-mix(in srgb, var(--ui-base) var(--placeholder-alpha), transparent); }
.ph-mic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--t2); }
.ph-mic svg { width: 18px; height: 18px; }
.ph-send-key { width: 0; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--t1); color: var(--theme-background); opacity: 0; scale: .9;
  transition: opacity .12s, scale .12s, width .24s var(--ease-arrive), margin .24s var(--ease-arrive); }
.ph-send-key svg { width: 16px; height: 16px; stroke-width: 2.25; }
.ph-send-key[data-on] { width: 32px; margin-left: 2px; opacity: 1; scale: 1; }
.ph-plus { display: flex; align-items: center; height: 28px; padding: 2px 10px 0; color: var(--t2); }
.ph-plus svg { width: 18px; height: 18px; }

/* The ask: Graves runs on a Mac, so a phone sends itself the link. */
.ph-coda { padding: 64px var(--ph-g) 64px; text-align: center; }
.ph-coda h2 { margin: 0; font: 400 32px/1.15 var(--site); letter-spacing: -.015em; color: var(--coda-ink); }
.ph-send { max-width: 360px; margin: 28px auto 0; padding: 26px 20px 20px; border-radius: 22px; border: 1px solid var(--site-line); background: var(--site-fill); }
.ph-send img { display: block; width: 72px; height: 72px; margin: 0 auto 12px; }
.ph-send h3 { margin: 0; font: 600 19px/1.3 var(--site); color: var(--site-ink); }
.ph-send p { margin: 6px 0 20px; font: 15px/1.5 var(--site); color: var(--site-dim); text-wrap: pretty; }
.ph-send button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; cursor: pointer;
  font: 500 16px/1 var(--site); color: var(--site-ink); border: 1px solid var(--site-line); background: var(--site-fill); }
.ph-send button + button { margin-top: 10px; }
.ph-send .ph-ink { background: var(--site-ink); border-color: var(--site-ink); color: var(--room); }
.ph-send button svg { width: 18px; height: 18px; }
.ph-send small { display: block; margin-top: 14px; font: 12.5px/1.4 var(--site); color: var(--t3); }
.ph-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 20; translate: -50% 0; padding: 10px 16px; border-radius: 999px;
  background: var(--site-ink); color: var(--room); font: 14px/1.3 var(--site); opacity: 0; transition: opacity .2s; pointer-events: none; }
.ph-toast[data-on] { opacity: 1; }

/* A phone on its side: the same column, centred. */
@media (min-width: 600px) { .ph-screen, .ph-coda { max-width: 560px; margin-inline: auto; } }