/* v7 · the order card after paying (states 3–7) and its conversation: js/order-card.js, js/thread.js (agent C2).
   Route A on the existing tokens (styles.css :root): one flat colour per moment, the photo as a sticker, one black
   pill, the rest one tap away. Uber's one trip card; iMessage's thread with the composer always on screen. */

/* ---------- the card ---------- */
.oc { --oc-tint: var(--yellow); position: relative; margin: 6px 0 0; padding: 20px 18px 18px; border-radius: 30px; color: var(--ink);
  background: radial-gradient(rgba(0, 0, 0, .055) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--oc-tint);
  box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, .07), 0 4px 0 rgba(14, 14, 14, .10); --ink-2: rgba(14, 14, 14, .74); }
/* Inside C1's full-bleed page (one page per painting, swiped sideways) the page IS the card: no panel of our own. */
.page .oc { padding: 4px 2px 0; border-radius: 0; background: none; box-shadow: none; }
.page .oc-host { flex: none; }
.oc[data-tint='orange'] { --oc-tint: var(--orange); } .oc[data-tint='lilac'] { --oc-tint: var(--lilac); }
.oc[data-tint='pink'] { --oc-tint: var(--pink); } .oc[data-tint='sky'] { --oc-tint: var(--sky); } .oc[data-tint='yellow'] { --oc-tint: var(--yellow); }
.oc-of { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.oc-eyebrow { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.oc-title { margin: 0; font-size: 30px; line-height: 1.02; font-weight: 800; letter-spacing: -.032em; text-wrap: balance; }
.oc-step { margin: 4px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink-2); } /* v9: its own line, Step 2 of 5: painting */
.oc-art { position: relative; display: block; width: 196px; height: 236px; margin: 16px auto 14px; padding: 0; border: 8px solid #fff; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--drop); transform: rotate(-3deg); }
.oc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-art .tag { left: 8px; top: 8px; white-space: normal; max-width: calc(100% - 16px); line-height: 1.2; }
button.oc-art { cursor: pointer; transition: transform var(--snap-ms) var(--snap); }
button.oc-art:active { transform: rotate(-3deg) scale(.97); }
/* v9 (Q1) photo later: an empty frame to tap, never a demo photo */
.oc-art-empty { background: #F4F2EE; border-style: solid; }
.oc-art-empty-in { position: absolute; inset: 10px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 2px dashed rgba(14, 14, 14, .35); border-radius: 14px; color: var(--ink); font-size: 14.5px; text-align: center; padding: 8px; }
.oc-art-empty-in svg { width: 28px; height: 28px; }
.oc-art.home { width: 214px; height: 258px; }
.oc-cover { position: relative; display: block; width: 100%; height: 280px; margin: 16px 0 2px; border-radius: 24px; overflow: hidden; background: var(--yellow); box-shadow: var(--lift); cursor: pointer; }
.oc-cover img { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(24px) saturate(1.2); opacity: .9; }
.oc-cover-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #fff; text-align: center; }
.oc-cover-in b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.oc-cover-btn { width: auto; min-height: 56px; padding: 0 34px; pointer-events: none; }
.oc-line { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
.oc-check { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15.5px; font-weight: 800; }
.oc-check .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #13A06A; color: #fff; stroke-width: 3; }
.oc-check.in-sheet { margin: 2px 0 8px; }
.oc-primary { margin-top: 16px; }
.oc-ask.paid { display: grid; gap: 12px; padding: 14px 14px 12px 16px; }
.oc-ask-head { display: flex; gap: 10px; align-items: center; }
.oc-ask-head b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.oc-ask-btns { display: flex; align-items: center; gap: 14px; }
.oc-ask-yes { width: auto; min-height: 46px; padding: 0 26px; font-size: 16px; }
.oc-ask-btns .link-btn { margin: 0; min-height: 44px; }
.oc-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; }
.oc-links .link-btn { margin: 0; }
/* the free-cancellation link: quiet, one line, under everything else on the card */
.oc-cancel { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration-thickness: 1px; }
/* js/one-ask.js: a sheet or alert that opened by itself while the notification ask is up waits, hidden */
.oc-held { display: none !important; }
.oc-ask, .oc-wall { display: flex; gap: 12px; align-items: center; width: 100%; margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .86); color: var(--ink); text-align: left; }
.oc-ask .ic, .oc-wall .ic { flex: none; }
.oc-ask-main, .oc-wall > span { display: grid; gap: 2px; min-width: 0; }
.oc-ask-main b, .oc-wall b { font-size: 16px; font-weight: 800; }
.oc-ask-main span, .oc-wall small { font-size: 14px; color: var(--card-2); font-weight: 500; }
.oc-wall { cursor: pointer; }
.oc-wall:active { transform: scale(.98); }
.oc-flash { position: absolute; inset: 0; z-index: 120; background: #fff; pointer-events: none; animation: ocFlash .5s ease-out forwards; }
@keyframes ocFlash { from { opacity: .95; } to { opacity: 0; } }

/* ---------- the conversation, inline under the card ---------- */
/* display: contents lets the composer stick to the bottom of the screen while its card is on screen. */
.oc-thread { display: contents; }
.oc-th-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 16px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; box-shadow: var(--lift); }
.oc-th-row > .ic:last-child { width: 16px; height: 16px; color: var(--card-3); }
.oc-th-row-main { flex: 1; min-width: 0; display: grid; }
.oc-th-row-main b { font-size: 16px; font-weight: 800; }
.oc-th-row-main span { font-size: 14px; color: var(--card-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--cobalt); }
.oc-th-head { display: flex; align-items: center; gap: 8px; margin: 22px 2px 2px; }
.oc-th-title { flex: 1; min-width: 0; display: grid; }
.oc-th-title b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.oc-th-title small { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.oc-th-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .82); color: var(--ink); }
.oc-th-btn .ic { width: 18px; height: 18px; }
.oc-th-btn .more { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; margin-left: 1.5px; }
.oc-th-note { margin: 2px 2px 10px; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--ink-2); }
.oc-th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.oc-sep { justify-self: center; margin: 10px 0 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 800; color: var(--ink-2); }
.oc-msg { max-width: 84%; padding: 9px 14px 10px; border-radius: 20px; font-size: 15.5px; line-height: 1.38; font-weight: 500; }
.oc-msg.run { margin-top: 6px; }
.oc-msg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.oc-msg small { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 800; color: var(--card-2); }
.oc-msg.me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.oc-msg.me small { color: rgba(255, 255, 255, .72); text-align: right; }
.oc-msg.them { justify-self: start; background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: var(--lift); }
.oc-msg.desk small { color: #8A5A00; }
.oc-orig { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 800; color: #3A3A3A; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; text-align: left; }
.oc-failed { display: block; margin-top: 3px; font-size: 12px; opacity: .75; }
.oc-msg.typing .dots { display: flex; gap: 5px; padding: 6px 2px 3px; }
.oc-msg.typing .dots i { width: 8px; height: 8px; border-radius: 50%; background: #8A8A8E; animation: typing 1s ease-in-out infinite; }
.oc-msg.typing .dots i:nth-child(2) { animation-delay: .15s; } .oc-msg.typing .dots i:nth-child(3) { animation-delay: .3s; }
/* Sticky inside the scroller's padding box: a page (C1, no bottom padding) sits it 24px up and leaves room under it;
   a classic .screen (bottom padding var(--bottom) + 40px) needs that padding undone. */
.oc-composer { position: sticky; bottom: calc(var(--bottom, 34px) - 10px); z-index: 6; margin: 14px 0 calc(var(--bottom, 34px) + 10px); }
.screen:not(.cards-screen) .oc-composer { bottom: calc(-1 * var(--bottom, 34px) - 16px); margin-bottom: 0; }
/* a soft scrim of the screen's own colour under the composer, so what scrolls beneath it fades instead of colliding */
.oc-composer::before { content: ''; position: absolute; z-index: -1; left: -20px; right: -20px; top: -22px; bottom: -40px; background: linear-gradient(to bottom, transparent, var(--tint, var(--yellow)) 40%); pointer-events: none; }
.oc-field { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1.5px rgba(14, 14, 14, .55), 0 10px 26px rgba(14, 14, 14, .18); } /* v9 Q1: the outline ≥ 3:1 on white (a field looks like a field) */
.oc-input { flex: 1; min-width: 0; min-height: 44px; max-height: 132px; padding: 10px 0; border: 0; background: none; resize: none; font: inherit; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.oc-input:focus { outline: none; }
.oc-input::placeholder { color: #6A665F; opacity: 1; }
.oc-field:focus-within { box-shadow: 0 0 0 2.5px var(--ink), 0 10px 26px rgba(14, 14, 14, .18); }
.oc-send { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.oc-send:active { transform: scale(.94); }
.oc-to { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 8px 6px; padding: 5px 6px 5px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; }
.oc-to-x { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; }
.oc-to-x .ic { width: 16px; height: 16px; }
/* in a sheet (no card on screen) */
.sheet .oc-th-head { margin-top: 0; }
.sheet .oc-th-btn { background: #F1EFEC; }
.sheet .oc-sep { background: #F4F3F1; }
.sheet .oc-msg.them { background: #F1EFEC; box-shadow: none; }
.sheet .oc-composer { bottom: 0; margin-bottom: 0; padding-bottom: 4px; }
.sheet .oc-composer::before { background: linear-gradient(to bottom, transparent, #fff 40%); }
@media (prefers-reduced-motion: reduce) { .oc-msg.typing .dots i, .oc-flash { animation: none; } }

/* ---------- the reveal: tap a spot, say what ---------- */
.oc-reveal-title { margin: 0 0 10px; }
.oc-viewer { position: relative; width: min(100%, 300px); aspect-ratio: 4 / 4.8; margin: 4px auto 0; border: 8px solid #fff; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--drop); cursor: crosshair; touch-action: manipulation; }
.oc-viewer img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; pointer-events: none; }
.oc-viewer .tag { left: 8px; top: 8px; }
.oc-pin-hint { margin: 12px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.oc-pin-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.oc-pin-notes li { display: flex; align-items: center; gap: 8px; }
.oc-pin-notes .field { flex: 1; min-width: 0; margin: 0; min-height: 50px; padding: 12px 14px; background: #fff; box-shadow: none; }
.oc-pin-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.oc-pin-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
.oc-pin-x .ic { width: 18px; height: 18px; }

/* ---------- v8 (agent W2): address, hand-painted, the center's note, making-of, reminder, complaint, written yes ---------- */
/* State 4: one line, the brush. State 3: the price e-mail, only when recorded. */
.oc-made, .oc-emailed { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
.oc-made .ic { width: 20px; height: 20px; }
.oc-emailed { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.oc-emailed .ic { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: rgba(14, 14, 14, .1); stroke-width: 3; }
/* "Ships to Portland · change": quiet, one line, a 44 px target */
.oc-shipto { display: block; min-height: 44px; margin: 8px auto 0; padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.oc-shipto b { font-weight: 800; color: var(--ink); }
.oc-shipto u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.oc-shipto + .oc-cancel { margin-top: 0; }
/* "Remind me next year": a quiet row with the system's switch */
.oc-remind { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; margin-top: 8px; padding: 0 2px; font-size: 15.5px; font-weight: 700; color: var(--ink); text-align: left; }
.oc-switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 16px; background: rgba(14, 14, 14, .16); transition: background var(--snap-ms) var(--snap); }
.oc-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .22); transition: transform var(--snap-ms) var(--snap); }
.oc-remind[aria-checked='true'] .oc-switch { background: var(--ink); }
.oc-remind[aria-checked='true'] .oc-switch::after { transform: translateX(20px); }
/* the address sheet */
.oc-addr .field-wrap { margin-top: 12px; }
.oc-addr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oc-addr-hint:empty { display: none; }
.oc-addr-hint { margin: 10px 0 0; color: #B3261E; font-weight: 700; }
/* the making-of: two frames, photo → painting */
.oc-mo-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 18px 0 14px; }
.oc-mo-f { margin: 0; display: grid; gap: 8px; justify-items: center; }
.oc-mo-f img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 7px solid #fff; border-radius: 16px; background: #fff; box-shadow: var(--drop); }
.oc-mo-f.a img { transform: rotate(-3deg); }
.oc-mo-f.b img { transform: rotate(2.5deg); }
.oc-mo-f figcaption { font-size: 13.5px; font-weight: 800; color: var(--card-2); }
.oc-mo-arrow { font-size: 24px; font-weight: 800; color: var(--card-2); padding-bottom: 26px; }
.oc-mo-by { margin: 0; }
/* the complaint, told */
.oc-told { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 6px; }
.oc-told-ic { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: #13A06A; color: #fff; }
.oc-told-ic .ic { width: 30px; height: 30px; stroke-width: 3; }
.oc-told .sheet-title { text-wrap: balance; }
/* the written yes: one confirm under the customer's bubble; then a quiet "Approved" */
.oc-approve-ask { justify-self: end; display: grid; gap: 8px; width: min(84%, 300px); margin-top: 4px; padding: 12px 14px 10px; border-radius: 20px; border-top-right-radius: 6px; background: #fff; color: var(--ink); box-shadow: var(--lift); }
.oc-approve-ask p { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.oc-approve-btns { display: flex; align-items: center; gap: 12px; }
.oc-approve-btns .btn { width: auto; min-height: 44px; padding: 0 22px; font-size: 16px; }
.oc-approve-btns .link-btn { margin: 0; font-size: 15px; }
.oc-approve-done { justify-self: end; display: flex; align-items: center; gap: 5px; margin: 2px 4px 0; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.oc-approve-done .ic { width: 15px; height: 15px; stroke-width: 3; }
.sheet .oc-approve-ask { background: #F1EFEC; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .oc-switch, .oc-switch::after { transition: none; } }
/* State 7: the painting is the "How it was made" button; a small frosted pill says so */
button.oc-art.home { cursor: pointer; }
.oc-art-cta { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgba(14, 14, 14, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }