/* An app's page (src/cinematic/app-story.ts): the app at work in the room, on top of project.css.
   Everything under .fc is the app's own look, taken from its current code (lib/theme/app_theme.dart: AppColors,
   lib/theme/design_system.dart: AppText and the radii; the widgets for sizes): warm paper, ink, one burgundy,
   Playfair Display for names and Inter for the rest. Sizes inside the phone are the app's own points: the screen
   is drawn at 375 × 667 and scaled as a whole (--k), so nothing is restyled to fit. */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/fonts/playfair-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/fonts/playfair-latin-ext.woff2') format('woff2'); unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

.fc {
  --fc-paper:#faf8f5; --fc-paper-dark:#f4f3ee; --fc-card:#fff; --fc-ink:#2d2c28; --fc-ink-light:#6b6a65; --fc-ink-faded:#736e66; --fc-muted:#e5e2dc;
  --fc-accent:#8b1a1a; --fc-accent-light:#f5e6e6; --fc-star:#bc8a5f; --fc-success:#386641; --fc-amber:#ee9b00; --fc-cream:#faf8f5; --fc-border:#37352f1a;
  --fc-display:'Playfair Display',Georgia,serif; --fc-text:Inter,system-ui,sans-serif;
  color:var(--fc-ink); font:400 15px/1.5 var(--fc-text); -webkit-font-smoothing:antialiased;
}
.fc :is(h3,h4,p) { margin:0; }
.fc .mi { flex:none; width:1em; height:1em; }
.fc button { font:inherit; color:inherit; cursor:pointer; }
.fc button:disabled { cursor:default; }
.fc :focus-visible { outline:2px solid var(--fc-accent); outline-offset:2px; border-radius:12px; }

/* Its icon on the wall, beside its name: hung to the left, so the name stays where every project's is. */
.wall h1:has(.wall-icon) { position:relative; display:inline-block; }
.wall-icon { position:absolute; right:100%; top:.1em; width:.84em; height:.84em; margin-right:.26em; border-radius:23%; box-shadow:0 .14em .34em -.12em #0a1e1e; }

/* What it makes of the room: its own pills (SurfacePill) beside the things they are about, with the drawings its
   scorecard uses; the one about people is the badge its cards carry. They are placed by parts of the room
   picture, so they stay with the things at any window size, and never reach his bubbles. */
.signals { position:fixed; z-index:1; left:0; top:0; width:0; height:0; margin:0; padding:0; list-style:none; pointer-events:none; }
.signals li { position:absolute; left:calc(var(--room-w) * var(--x)); top:calc(var(--room-h) * var(--y)); display:flex; align-items:center; gap:7px; min-height:40px; padding:7px 15px 7px 10px; border:1px solid #2d2c281a; border-radius:20px; background:#fffffff2; font:600 13px/1.2 var(--fc-text); white-space:nowrap; box-shadow:0 2px 8px #2d2c280f,0 14px 26px -16px #0a1e1e; animation:signal-in .7s cubic-bezier(.16,1,.3,1) both,signal-float 7s ease-in-out infinite; animation-delay:calc(.9s + var(--i) * .55s),calc(var(--i) * -1.7s); }
.signals li[data-end] { left:auto; right:calc(var(--room-w) * var(--x) * -1); }
.signals img { width:24px; height:24px; }
.signals span { color:var(--fc-success); }
.signals li[data-icon='person'] { min-height:0; padding:6px 11px; border:0; border-radius:10px; background:var(--fc-success); color:var(--fc-cream); font-weight:700; font-size:12px; }
@keyframes signal-in { from { opacity:0; transform:translateY(8px) scale(.94); } }
@keyframes signal-float { 50% { translate:0 -4px; } }

/* A message of the app's (its scorecard, its invitation) is the thing itself, not a picture of it. */
.thread > .post:has(> .app-card) { width:auto; max-width:min(88%,420px); }
.thread > .post:has(> .fc-drop) { width:auto; max-width:min(88%,340px); }
.thread > .post:has(> .app-demo) { width:auto; max-width:88%; }
.app-card { min-width:0; }

/* The Cafe Scorecard (cafe_detail_sheet.dart). */
.fc-karne { padding:16px; border:1px solid #ffffff40; border-radius:24px; background:var(--fc-paper); box-shadow:0 2px 12px #0000000a; }
.fc-karne header { display:flex; align-items:center; gap:12px; }
.fc-knob { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:16px; background:#2d2c280f; font-size:21px; }
.fc-karne h4 { font:700 22px/1.15 var(--fc-display); white-space:nowrap; }
.fc-karne header small { display:block; margin-top:3px; color:var(--fc-ink-faded); font-size:12px; line-height:1.3; }
.fc-conf { align-self:flex-start; margin-left:auto; padding:5px 10px; border-radius:999px; background:#2d2c280f; color:var(--fc-ink-faded); font:700 11px/1.3 var(--fc-text); white-space:nowrap; }
.fc-overall { display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px; border-radius:20px; background:#2d2c2809; }
.fc-dial { position:relative; flex:none; display:grid; place-content:center; justify-items:center; width:70px; height:70px; }
.fc-dial svg { position:absolute; inset:0; fill:none; stroke-width:6; stroke-linecap:round; }
.fc-dial circle { stroke:#2d2c2814; }
.fc-dial circle + circle { stroke:var(--fc-accent); }
.fc-dial[data-colour='success'] circle + circle { stroke:var(--fc-success); }
.fc-dial[data-colour='amber'] circle + circle { stroke:var(--fc-amber); }
.fc-dial b { font:700 20px/1.1 var(--fc-text); }
.fc-dial i { color:var(--fc-accent); font:700 10.5px/1.2 var(--fc-text); }
.fc-overall p b { display:block; font:600 16px/1.4 var(--fc-text); }
.fc-overall p small { color:var(--fc-ink-faded); font-size:12px; line-height:1.3; }
.fc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.fc-tile { min-width:0; min-height:112px; padding:12px; border:1px solid #2d2c280f; border-radius:18px; background:var(--fc-card); }
.fc-tile img { width:32px; height:32px; }
.fc-value { margin-top:5px!important; line-height:1.2; }
.fc-value b { font:700 20px/1.2 var(--fc-text); }
.fc-value span { color:var(--fc-ink-faded); font:700 12px/1.3 var(--fc-text); }
/* Five dots; the lit ones are hollow here, as the app draws a score that is an estimate (solid is for what reviews bear out). */
.fc-dots { display:flex; gap:4px; margin:6px 0 5px; }
.fc-dots i { width:7px; height:7px; border:1.3px solid #2d2c282e; border-radius:50%; }
.fc-dots .on { border-color:#bc8a5fbf; }
.fc-none { margin:9px 0 7px!important; font:700 13px/1.3 var(--fc-text); }
.fc-far { margin:7px 0 5px!important; font:700 19px/1.2 var(--fc-text); overflow-wrap:anywhere; }
.fc-tile small { color:var(--fc-ink-faded); font:700 12px/1.3 var(--fc-text); }
.fc-work { display:grid; grid-template-columns:1fr 1fr; gap:12px 8px; margin-top:8px; padding:12px; border-radius:20px; background:#2d2c2809; }
.fc-work div { display:flex; align-items:center; gap:8px; min-width:0; }
.fc-work img { width:28px; height:28px; }
/* The drawings are burgundy; a signal that is supported wears the app's green. */
.fc-work [data-is='yes'] img { filter:hue-rotate(118deg) saturate(.7) brightness(1.25); }
.fc-work small { display:block; color:var(--fc-ink-faded); font:700 11px/1.3 var(--fc-text); }
.fc-work b { font:700 13px/1.3 var(--fc-text); }
.fc-unknown { grid-column:1 / -1; display:flex; align-items:flex-start; gap:8px; color:var(--fc-ink-faded); font-size:12px; line-height:1.4; }
.fc-unknown .mi { margin-top:1px; font-size:15px; }
.fc-cap { margin:12px 0 8px!important; color:var(--fc-ink-faded); font:700 12px/1.3 var(--fc-text); }
.fc-prefs { padding:14px 16px; border:1px solid var(--fc-border); border-radius:16px; background:var(--fc-card); }
.fc-stamp { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:1.3px solid var(--fc-star); border-radius:8px; color:#8a5a2e; font:600 13px/1.2 var(--fc-text); }
.fc-stamp .mi { font-size:14px; }
.fc-stamp[data-is='no'] { border-color:#8b1a1a8c; color:var(--fc-accent); text-decoration:line-through; }
.fc-stamp[data-is='cond'] { border-color:#2d2c282e; color:var(--fc-ink-light); }

/* The phone: the app's screen at its own size (375 × 667), scaled whole. */
.app-demo { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:20px; }
.app-phone { --k:.8; width:calc(375px * var(--k) + 18px); margin:6px 0 4px 6px; padding:9px; border-radius:calc(46px * var(--k) + 9px); background:#1b1917; box-shadow:0 22px 36px -22px #0a1e1e; }
.app-glass { position:relative; width:calc(375px * var(--k)); height:calc(667px * var(--k)); border-radius:calc(46px * var(--k)); overflow:hidden; background:var(--fc-paper); }
.fc-ui { position:relative; display:flex; flex-direction:column; width:375px; height:667px; transform:scale(var(--k)); transform-origin:0 0; background:var(--fc-paper); overflow:hidden; }
/* One kind of session at a time: its name on the chip, its stamp on a scorecard. */
.fc-ui[data-mode='build'] [data-for]:not([data-for='build']),.fc-ui[data-mode='coffee'] [data-for]:not([data-for='coffee']),.fc-ui[data-mode='meet'] [data-for]:not([data-for='meet']),.fc-ui[data-mode='reset'] [data-for]:not([data-for='reset']) { display:none; }

/* Discovery (swipe_screen.dart, app_shell.dart): the header, the row of pills, the deck, the two decisions, the tabs. */
.fc-head { flex:none; display:flex; align-items:center; gap:8px; height:62px; margin-top:12px; padding:8px 24px 0; }
.fc-head > div { flex:1; min-width:0; }
.fc-where { display:flex; align-items:center; gap:4px; color:var(--fc-accent); font:600 12px/1.3 var(--fc-text); }
.fc-where .mi { font-size:13px; }
.fc-where .mi:last-child { font-size:16px; margin-left:-2px; }
.fc-head h3 { margin-top:2px; font:600 23px/1.1 var(--fc-display); }
.fc-bell { display:grid; font-size:23px; }
.fc-avatar { display:grid; place-items:center; width:42px; height:42px; border:1.5px solid #8b1a1a47; border-radius:50%; background:var(--fc-accent-light); color:var(--fc-accent); font:700 15px/1 var(--fc-text); }
.fc-pills { flex:none; display:flex; align-items:center; gap:8px; padding:6px 18px; }
.fc-pill { flex:none; display:inline-flex; align-items:center; gap:7px; min-height:40px; white-space:nowrap; padding:8px 14px; border:1px solid #2d2c281a; border-radius:20px; background:#ffffffdb; font:500 14px/1.2 var(--fc-text); box-shadow:0 2px 8px #2d2c280a; }
button.fc-pill .mi { color:var(--fc-ink-faded); font-size:12px; }
.fc-pill[data-tone='accent'] { border-color:#8b1a1a29; background:#8b1a1a17; color:var(--fc-accent); font-size:16px; }
.fc-pill[data-tone='quiet'] { background:#ffffff8f; color:var(--fc-ink-light); font-size:16px; box-shadow:none; }
.fc-left { margin-left:auto; border-color:#3866412e; background:#3866411a; color:var(--fc-ink-light); font-weight:600; font-size:13px; }
.fc-left .mi { color:var(--fc-success); font-size:14px; }
.fc-left b { font-weight:600; }
.fc-deck { position:relative; flex:1; min-height:0; margin:2px 18px 0; }
.fc-card { position:absolute; inset:0; border-radius:32px; overflow:hidden; background:var(--fc-ink); box-shadow:0 4px 16px #00000010; touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab; transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s; }
.fc-card:nth-last-child(n+2) { transform:translateY(22px) scale(.95); }
.fc-card[data-held] { transition:none; cursor:grabbing; }
.fc-card > img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.fc-card::after { content:''; position:absolute; inset:0; background:linear-gradient(#0003,#0000 30%,#0000 60%,#0000007a); pointer-events:none; }
.fc-rates,.fc-flags,.fc-glass { position:absolute; z-index:1; pointer-events:none; }
.fc-rates { inset:16px 16px auto; display:flex; justify-content:space-between; gap:8px; }
/* A note, not a rating from reviews: the app's own badge for a score that is not yet borne out. */
.fc-rate,.fc-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; background:#8b1a1a9e; color:var(--fc-cream); font:400 12px/1.3 var(--fc-text); }
.fc-rate .mi,.fc-chip .mi { font-size:13px; }
.fc-rate .mi:last-child,.fc-chip .mi:last-child { font-size:12px; opacity:.76; }
.fc-flags { left:16px; top:50px; display:grid; justify-items:start; gap:6px; }
.fc-flags span { padding:5px 10px; border-radius:10px; color:var(--fc-cream); font:700 12px/1.3 var(--fc-text); }
.fc-flags [data-tone='success'] { background:#386641c7; }
.fc-flags [data-tone='ink'] { background:#2d2c28a8; }
.fc-glass { inset:auto 12px 12px; padding:14px 18px; border:1px solid #ffffff1f; border-radius:22px; background:#2d2c2857; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.fc-glass h4 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--fc-cream); font:700 28px/1.2 var(--fc-display); }
.fc-glass p { display:flex; flex-wrap:wrap; gap:0 12px; margin-top:8px; color:#faf8f5db; font-size:12px; line-height:1.3; }
.fc-glass i { color:#8fa892; font-style:normal; }
.fc-more { position:absolute; inset:0; z-index:2; border:0; border-radius:32px; background:none; cursor:inherit; }
.fc .fc-more:focus-visible { outline-offset:-4px; border-radius:32px; }
.fc-actions { flex:none; display:flex; justify-content:center; gap:76px; padding:16px 0 4px; }
.fc-actions button { display:grid; place-items:center; width:56px; height:56px; border:1px solid #2d2c281a; border-radius:50%; background:#ffffffd1; color:var(--fc-ink-light); font-size:30px; box-shadow:0 9px 18px #00000014; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.fc-actions [data-keep] { border-color:#8b1a1a2e; background:#8b1a1a14; color:var(--fc-accent); }
.fc-actions button:not(:disabled):hover { transform:scale(1.07); }
.fc-tabs { flex:none; position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); height:72px; margin:8px 32px 10px; padding:5px; border:1px solid #2d2c2821; border-radius:36px; background:#ffffff6b; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.fc-tabs span { display:grid; place-content:center; justify-items:center; gap:3px; border-radius:31px; color:var(--fc-ink-faded); font-size:22px; transition:color .25s; }
.fc-tabs b { font:700 10px/1.2 var(--fc-text); }
.fc-tabs .on { background:#2d2c280f; }
.fc-tabs .on b { color:var(--fc-ink); }
.fc-tabs :is(.on,.cue) .mi { color:var(--fc-accent); }
.fc-tabs .cue b { color:var(--fc-accent); }

/* After the third card: "Your Journal is ready" (guest_cafe_preview.dart). */
.fc-ui[data-view='ready'] :is(.fc-pills,.fc-deck,.fc-actions) { display:none; }
.fc-ready { flex:1; min-height:0; display:grid; align-content:start; padding:8px 24px 0; animation:fc-rise .5s cubic-bezier(.16,1,.3,1); }
.fc-ready h4 { font:700 28px/1.2 var(--fc-display); }
.fc-ready > p { margin:6px 0 14px; color:var(--fc-ink-faded); }
.fc-rows { display:grid; gap:8px; }
.fc-rows button { display:flex; align-items:center; gap:12px; width:100%; height:58px; padding:0 10px 0 0; border:1px solid var(--fc-border); border-radius:16px; background:var(--fc-card); overflow:hidden; text-align:left; }
.fc-rows img { flex:none; width:58px; height:58px; max-width:none; object-fit:cover; }
.fc-rows span { flex:1; min-width:0; }
.fc-rows b { display:block; font:600 16px/1.35 var(--fc-text); }
.fc-rows small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--fc-ink-faded); font-size:12px; line-height:1.3; }
.fc-rows .mi { color:var(--fc-ink-faded); font-size:20px; }
.fc-invite { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 8px; margin-top:12px; padding:18px 16px 14px 20px; border:1px solid var(--fc-border); border-radius:22px; background:linear-gradient(140deg,#f7ecea,#f1ece4); color:inherit; text-decoration:none; }
.fc-invite p { font:700 23px/1.22 var(--fc-display); }
.fc-invite b { color:var(--fc-accent); }
.fc-invite img { width:64px; height:auto; opacity:.85; }
.fc-invite span { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fc-invite small { color:var(--fc-ink-faded); font-size:12px; }
.fc-invite i { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--fc-accent); color:var(--fc-cream); font-size:22px; }
.fc-again { justify-self:center; margin-top:6px; padding:8px 12px; border:0; background:none; color:var(--fc-ink-faded); font:500 13px/1.3 var(--fc-text); }
@keyframes fc-rise { from { opacity:0; transform:translateY(12px); } }

/* A café's sheet, with its scorecard: over the deck, as the app raises it. */
.fc-scrim { position:absolute; inset:0; z-index:5; border:0; background:#2d2c2866; animation:fc-fade .3s ease; }
.fc-sheet { position:absolute; inset:46px 0 0; z-index:6; padding:0 18px 28px; border-radius:28px 28px 0 0; background:#eceae6; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; animation:fc-sheet .5s cubic-bezier(.16,1,.3,1); }
.fc-sheet::-webkit-scrollbar { display:none; }
.fc-grab { position:sticky; top:0; z-index:1; display:block; width:100%; height:26px; border:0; background:linear-gradient(#eceae6 70%,#eceae600); }
/* Its focus shows on the handle itself, not as a frame across the sheet. */
.fc .fc-grab:focus-visible { outline:0; }
.fc-grab:focus-visible::before { box-shadow:0 0 0 2px var(--fc-paper),0 0 0 4px var(--fc-accent); }
.fc-grab::before { content:''; display:block; width:40px; height:4px; margin:0 auto; border-radius:2px; background:#2d2c2833; }
.fc-name { margin:4px 0 10px!important; font:700 28px/1.2 var(--fc-display); }
.fc-chip { background:#ffffffb8; color:var(--fc-ink); font-weight:500; }
.fc-kind { margin-top:12px!important; padding-bottom:12px; border-bottom:1.5px dashed #2d2c2829; color:var(--fc-ink-light); font-size:13px; }
.fc-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 14px!important; color:var(--fc-ink-light); }
.fc-line b { display:inline-flex; align-items:center; gap:2px; color:var(--fc-ink); font:600 14px/1.3 var(--fc-text); }
.fc-line .mi { font-size:18px; }
@keyframes fc-fade { from { opacity:0; } }
@keyframes fc-sheet { from { transform:translateY(60%); opacity:.4; } }

/* The app's first question (mood_questions_screen.dart): touching an answer chooses it and moves on. */
.fc-modes { position:absolute; inset:0; z-index:7; padding-top:12px; background:var(--fc-paper); animation:fc-rise .4s cubic-bezier(.16,1,.3,1); }
.fc-strip { display:flex; align-items:center; gap:2px; padding:8px 16px 0 8px; color:var(--fc-ink-faded); font:600 11px/1.3 var(--fc-text); letter-spacing:.2px; }
.fc-strip button { display:grid; place-items:center; width:40px; height:40px; border:0; background:none; color:var(--fc-ink); font-size:20px; }
.fc-progress { display:flex; align-items:center; gap:6px; padding:16px 32px; }
.fc-progress i { flex:1; height:3px; border-radius:2px; background:#e5e2dc4d; }
.fc-progress .on { height:4px; background:var(--fc-accent); box-shadow:0 1px 6px #8b1a1a40; }
.fc-art { display:block; width:auto; height:112px; margin:0 auto; }
.fc-modes h4 { margin:18px 28px 0!important; text-align:center; font:700 26px/1.12 var(--fc-display); }
.fc-options { display:grid; gap:12px; padding:24px 28px 0; }
.fc-options button { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:1.5px solid #2d2c2814; border-radius:12px; background:var(--fc-card); box-shadow:0 2px 8px #2d2c2808; text-align:left; transition:background-color .2s,border-color .2s,box-shadow .2s; }
.fc-options i { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#2d2c280d; color:#2d2c28b3; font-size:22px; }
.fc-options span { flex:1; min-width:0; }
.fc-options b { display:block; font:600 15px/1.3 var(--fc-text); }
.fc-options small { display:block; margin-top:1px; color:var(--fc-ink-faded); font-size:13px; line-height:1.3; }
.fc-options em { visibility:hidden; display:grid; color:var(--fc-accent); font-size:20px; }
.fc-options [aria-pressed='true'] { border-color:#8b1a1a66; background:#8b1a1a14; box-shadow:0 4px 14px #8b1a1a1a; }
.fc-options [aria-pressed='true'] i { background:#8b1a1a24; }
.fc-options [aria-pressed='true'] em { visibility:visible; }

/* Beside the phone: the lines of the app's own first-open tour; the one that fits what the visitor is doing is lit. */
.app-steps { display:grid; gap:9px; margin:0 6px 22px 0; padding:0; list-style:none; color:var(--ink-soft); font-size:15px; line-height:1.35; }
.app-steps li { padding-left:13px; border-left:2px solid #8a5a2233; opacity:.7; transition:border-color .3s,opacity .3s,color .3s; }
.app-steps[data-at='0'] li:nth-child(1),.app-steps[data-at='1'] li:nth-child(2),.app-steps[data-at='2'] li:nth-child(3),.app-steps[data-at='3'] li:nth-child(4) { border-color:#8a5a22; color:var(--ink); opacity:1; }

/* His invitation: the app's Cafe Drop card (cafe_drop_invite_card.dart). Two coasters, the time, the place, and
   the answers as plain words; the visitor's coaster is a dashed ring until they say yes. */
.fc-drop { min-width:240px; padding:10px 6px 0 10px; border:1px solid var(--fc-border); border-radius:18px; background:var(--fc-card); }
.fc-drop-top { display:flex; align-items:center; gap:10px; padding-right:4px; }
.fc-coasters { flex:none; display:flex; }
.fc-coasters i { display:grid; place-items:center; width:40px; height:40px; border:1.5px solid #2d2c2833; border-radius:50%; background:var(--fc-card); overflow:hidden; }
.fc-coasters img { width:100%; height:100%; max-width:none; object-fit:cover; }
.fc-coasters i + i { margin-left:-14px; border-style:dashed; border-color:#2d2c2873; background:var(--fc-paper); color:#0000; font-size:22px; }
.fc-coasters .in { border-style:solid; border-color:#2d2c2833; background:var(--fc-accent-light); color:var(--fc-accent); animation:fc-coaster .62s cubic-bezier(.3,1.5,.5,1); }
@keyframes fc-coaster { from { transform:translateY(-16px) scale(.8); opacity:0; } }
.fc-drop-top b { display:block; font:600 16px/1.4 var(--fc-text); }
.fc-drop-top small { display:block; color:var(--fc-ink-faded); font-size:12px; line-height:1.3; }
.fc-drop-times { display:flex; flex-wrap:wrap; gap:6px; padding:12px 4px 2px 0; }
.fc-drop-times button { padding:7px 12px; border:1.3px solid #2d2c282e; border-radius:999px; background:none; font:500 13px/1.2 var(--fc-text); transition:border-color .2s,color .2s,background-color .2s; }
.fc-drop-times [aria-pressed='true'] { border-color:var(--fc-accent); background:#8b1a1a0f; color:var(--fc-accent); }
.fc-drop-acts { display:flex; justify-content:flex-end; margin-top:2px!important; }
.fc-drop-acts[data-when='countering'] { justify-content:space-between; margin-left:-6px!important; }
.fc-drop-acts :is(a,button) { padding:10px 12px; border:0; background:none; color:var(--fc-ink-faded); font:600 13px/1.3 var(--fc-text); text-decoration:none; }
.fc-drop-acts a { color:var(--fc-accent); }
.fc-drop-acts button:disabled { display:none; }

/* Phones, and screens too upright for him and the bubbles side by side: the labels stand in a row under the name. */
@media (max-width:699px), (max-aspect-ratio:5/4) {
  .signals { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:auto; height:auto; padding:14px 5vw 0; }
  .signals li,.signals li[data-end] { position:static; min-height:34px; padding:5px 12px 5px 8px; font-size:12px; animation:none; }
  .signals img { width:20px; height:20px; }
  .app-demo { grid-template-columns:minmax(0,1fr); justify-items:center; gap:10px; }
  .app-phone { margin:4px 0 2px; }
  /* One line at a time, over the phone: the one about what the visitor is doing. */
  .app-steps { order:-1; width:100%; margin:6px 0 0; text-align:center; }
  .app-steps li { display:none; padding:0; border:0; }
  .app-steps[data-at='0'] li:nth-child(1),.app-steps[data-at='1'] li:nth-child(2),.app-steps[data-at='2'] li:nth-child(3),.app-steps[data-at='3'] li:nth-child(4) { display:block; }
  .thread > .post:has(> .app-card),.thread > .post:has(> .fc-drop) { max-width:94%; }
  .thread > .post:has(> .app-demo) { width:94%; max-width:none; }
}
/* A phone on its side: no room for labels beside him. */
@media (min-width:700px) and (min-aspect-ratio:5/4) and (max-height:560px) { .signals { display:none; } }
@media (prefers-reduced-motion:reduce) { .signals li { animation:none; } }