/* Files for a session (attach.js; Chris, 21 Oct): the paperclip in the box, the files waiting to go above
   it, and the files sent under his words in the thread. */
.work-bubble.has-clip { padding-left: 4px; }
.attach-clip {
  flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.attach-clip svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.attach-clip:hover, .attach-clip:focus-visible { color: var(--gold); }
.attach-clip:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.work-bubble.dropping { border-color: var(--gold); }
.attach-tray { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; pointer-events: auto; }
.attach-tray[hidden] { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 4px 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 12.5px; color: var(--text);
}
.attach-chip.going { border-color: rgba(229, 175, 79, 0.5); }
.attach-chip.failed { border-color: var(--stop); }
.attach-chip.failed .attach-meta { color: var(--stop); }
.attach-chip.has-thumb { flex-wrap: wrap; justify-content: flex-end; border-radius: 12px; padding: 4px; max-width: 160px; }
.attach-thumb { order: -1; flex: 0 0 100%; width: 100%; max-height: 120px; object-fit: contain; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.attach-chip.has-thumb .attach-name { max-width: 90px; }
.attach-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-meta { flex: none; color: var(--faint); font-size: 12px; }
.attach-remove {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.attach-remove:hover, .attach-remove:focus-visible { color: var(--text); background: var(--line); }
.attach-full { width: 100%; text-align: right; font-size: 12.5px; color: var(--warn); }
.attach-full[hidden] { display: none; }
.attach-sent { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.attach-chip.sent { padding: 2px 10px; font-size: 12px; color: var(--muted); }
.work-request .attach-sent { justify-content: flex-start; }

/* A work's own name above its request (Chris, 21 Oct): a quiet button, a box and Save while it is changed. */
.work-name-row { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.work-name-row input { flex: 1; min-width: 0; }
.work-name-row .work-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* The list of a crew member's works: the project as a tag, an archived one dimmed, and the long-press menu (Chris, 21 Oct). */
.work-strip-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.work-strip-item.archived { opacity: .6; }
/* The lane is the home of a leaving card's ghost (work.js moveLane); the pinned lane is sticky, which holds it just the same. */
.work-strip { position: relative; }
.work-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--gold-soft); font-size: 11px; line-height: 16px; }
.work-menu { position: absolute; z-index: 30; width: 232px; padding: 6px; display: grid; gap: 4px; border-radius: 12px; background: var(--panel, #1b1a22); border: 1px solid var(--line, rgba(255, 255, 255, .15)); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.work-menu-item { text-align: left; padding: 10px 12px; border-radius: 8px; background: transparent; border: 0; color: inherit; font: inherit; }
.work-menu-item:hover, .work-menu-item:focus-visible { background: var(--gold-soft); }
.work-menu-item.danger { color: #e0675b; }
.work-menu-edit { display: flex; gap: 8px; }
.work-menu-edit input { flex: 1; min-width: 0; }
.work-pane { position: relative; }

/* The lane of works brought down from the top edge (Chris, 21 Oct): the same cards, pinned over the thread while it is scrolled. */
.work-edge { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 20px; touch-action: none; pointer-events: none; }
.work-edge.on { pointer-events: auto; }
.work-strip.pinned { position: sticky; top: 0; z-index: 3; margin: 0 -16px; padding: 10px 16px 8px; background: transparent; touch-action: pan-x; }
/* Nothing behind the cards (Chris, 25 Oct): the thread shows between and around them; each card keeps its own face. */
.work-strip.pinned .work-strip-item { background: var(--panel); }
/* No fade of its own while it drops or lifts: the "calm" fade-in (fill.css) ran on after the drop's animation and the lane flickered (Chris, 25 Oct). */
.work-strip.dropping, .work-strip.lifting { transition: none; }
.work-strip.dropping { animation: work-strip-drop .24s ease-out; }
.work-strip.lifting { animation: work-strip-lift .2s ease-in forwards; pointer-events: none; }
@keyframes work-strip-lift { to { transform: translateY(-110%); opacity: .3; } }
@keyframes work-strip-drop { from { transform: translateY(-110%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .work-strip.dropping, .work-strip.lifting { animation: none; } }

/* Dictation: a microphone beside the paperclip, red and pulsing while it listens (Chris, 21 Oct). */
.voice-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted, #888); cursor: pointer; }
.voice-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.voice-btn:hover, .voice-btn:focus-visible { color: var(--gold); }
.voice-btn.on { color: #fff; background: #d9453d; animation: voice-pulse 1.4s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 69, 61, .5); } 50% { box-shadow: 0 0 0 8px rgba(217, 69, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .voice-btn.on { animation: none; } }

/* Claude's mark beside a session's lines: the burst of rounded rays in Claude's orange, moving only as the session does (Chris, 21 Oct). */
.chat-face .o-claude.mark use { fill: #d97757; }
.chat-face .o-claude.mark .o-ray-s { transform-box: view-box; transform-origin: 12px 12px; }
/* Each ray's pattern, length of breath and start. They are set here and not by the script, since the site's policy refuses an inline style (style-src 'self'). */
#claude-spark-defs { position: absolute; }
.o-claude.mark .o-ray:nth-child(2) .o-ray-s { --kf: claude-ray-a; --dur: 5.75s; --dly: -1s; }
.o-claude.mark .o-ray:nth-child(3) .o-ray-s { --kf: claude-ray-b; --dur: 4.25s; --dly: -2.75s; }
.o-claude.mark .o-ray:nth-child(4) .o-ray-s { --kf: claude-ray-c; --dur: 7.75s; --dly: -5.5s; }
.o-claude.mark .o-ray:nth-child(5) .o-ray-s { --kf: claude-ray-b; --dur: 3.25s; --dly: -2s; }
.o-claude.mark .o-ray:nth-child(6) .o-ray-s { --kf: claude-ray-a; --dur: 7.25s; --dly: -3.5s; }
.o-claude.mark .o-ray:nth-child(7) .o-ray-s { --kf: claude-ray-c; --dur: 5s; --dly: -1.5s; }
.o-claude.mark .o-ray:nth-child(8) .o-ray-s { --kf: claude-ray-c; --dur: 2.75s; --dly: -0.25s; }
.o-claude.mark .o-ray:nth-child(9) .o-ray-s { --kf: claude-ray-a; --dur: 9.25s; --dly: -7.25s; }
.o-claude.mark .o-ray:nth-child(10) .o-ray-s { --kf: claude-ray-b; --dur: 6.5s; --dly: -2.25s; }
.o-claude.mark .o-ray:nth-child(11) .o-ray-s { --kf: claude-ray-a; --dur: 4.75s; --dly: -4.25s; }
.o-claude.mark .o-ray:nth-child(12) .o-ray-s { --kf: claude-ray-c; --dur: 8.25s; --dly: -2.5s; }
.o-claude.mark .o-ray:nth-child(13) .o-ray-s { --kf: claude-ray-b; --dur: 3.75s; --dly: -1.75s; }
/* The spark is not a portrait: its tips are never cut by the face's round window (Chris, 26 Oct). */
.chat-face:has(.o-claude.mark), .chat-face:has(.o-claude.mark) svg { overflow: visible; border-radius: 0; }
.chat-line:not(.latest) .chat-face .o-claude.mark { opacity: .75; }
.work-thread[data-claude='idle'] .chat-face .o-claude.mark { filter: grayscale(.55); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  /* While Claude works the whole mark turns slowly and each ray lengthens and shortens in its own uneven way, as the real spark does
     (Chris, 26 Oct: it was only spinning, then too regular: "more erratic ... and spin too"). */
  .work-thread[data-claude='working'] .chat-line.latest .chat-face .o-claude.mark { transform-box: fill-box; transform-origin: 50% 50%; animation: claude-turn 16s linear infinite; }
  .work-thread[data-claude='working'] .chat-line.latest .chat-face .o-claude.mark .o-ray-s { animation: var(--kf) var(--dur) cubic-bezier(.45, .05, .35, 1) var(--dly) infinite; }
  .work-thread[data-claude='waits'] .chat-line.latest .chat-face .o-claude.mark { transform-box: fill-box; transform-origin: 50% 50%; animation: claude-wait 2.2s ease-in-out infinite; }
}
@keyframes claude-turn { to { transform: rotate(360deg); } }
/* Each ray eases out and in (the curve on the rule above is applied between every pair of points) and leans a few degrees as it goes, so it moves like a living thing. */
@keyframes claude-ray-a { 0%, 100% { transform: scale(0.82) rotate(-1deg); } 18% { transform: scale(1.05) rotate(1.25deg); } 31% { transform: scale(0.9) rotate(0.5deg); } 52% { transform: scale(1.02) rotate(-1.5deg); } 67% { transform: scale(0.78) rotate(-0.5deg); } 84% { transform: scale(0.98) rotate(1.5deg); } }
@keyframes claude-ray-b { 0%, 100% { transform: scale(0.96) rotate(1deg); } 14% { transform: scale(0.79) rotate(-1deg); } 38% { transform: scale(1.06) rotate(-1.5deg); } 55% { transform: scale(0.86) rotate(0.75deg); } 73% { transform: scale(1) rotate(1.5deg); } 90% { transform: scale(0.83) rotate(0deg); } }
@keyframes claude-ray-c { 0%, 100% { transform: scale(0.85) rotate(0.5deg); } 25% { transform: scale(1.03) rotate(-1.25deg); } 41% { transform: scale(0.8) rotate(-0.5deg); } 60% { transform: scale(0.95) rotate(1.25deg); } 78% { transform: scale(1.05) rotate(-1.5deg); } }
@keyframes claude-wait { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }

/* What his sessions propose to one another: a card to approve with a tap (Chris, 21 Oct). */
.work-proposals { display: grid; gap: 10px; margin: 10px 0 0; }
.work-proposal { padding: 12px 14px; border: 1px solid var(--gold); border-radius: 14px; background: var(--gold-soft); }
.work-proposal h4 { margin: 2px 0 6px; font-size: 15px; }
.work-proposal p { margin: 0; }
.work-proposal-kind { font-size: 12px; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.work-proposal-text { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.work-proposal-acts { display: flex; gap: 8px; margin-top: 10px; }
/* The same proposals as lines over the box (work.js proposalLine), so one deep in a session still sees them. */
.work-scroll:not(.welcoming) .work-proposals { display: none; }
.work-prop-full { flex: 1 0 100%; max-height: 40vh; overflow-y: auto; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.work-prop-dock { display: grid; gap: 6px; margin: 0 0 6px; }
/* Many suggestions never cover the chat (Chris, 31 Oct): the stack is at most a third of the screen and scrolls by itself, and its scroll stays in it. */
.work-prop-dock { max-height: 32vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.work-prop-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft); }
.work-prop-what { flex: 1 1 12em; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.work-prop-line .msg:empty { display: none; }

/* A fresher look for proposals (Chris, 26 Oct): glass over the matrix, a gold edge, the title first, quiet pills. */
.work-proposal, .work-prop-line, .work-going { position: relative; background: linear-gradient(135deg, rgba(40, 30, 12, .78), rgba(14, 12, 10, .82)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(214, 170, 80, .28); box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 220, 140, .12); }
.work-proposal { border-radius: 18px; padding: 14px 16px 14px 20px; overflow: hidden; }
.work-proposal::before, .work-prop-line::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(var(--gold), rgba(214, 170, 80, .15)); }
.work-proposal h4 { font-size: 17px; letter-spacing: -.01em; }
.work-proposal-text { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.work-proposal-acts { flex-wrap: wrap; }
.work-prop-line { border-radius: 16px; padding: 8px 12px 8px 16px; }
.work-proposal button, .work-prop-line button, .work-going button { padding: 5px 14px; }
/* What he started and the desk follows: one quiet group instead of a card each. */
.work-going { border-radius: 18px; padding: 10px 14px; display: grid; gap: 2px; }
.work-going-head { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.work-going-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(214, 170, 80, .14); }
.work-going-row:first-of-type { border-top: 0; }
.work-going-what { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.work-going-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-going-why { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-going-acts { display: flex; gap: 6px; flex: 0 0 auto; }

/* His office on the Desk, as the 3D world draws it (hero.js): the picture fills the box, trimmed at its sides, never stretched. */
.o-hero-3d { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 14px; background: #0b1118; }
.o-hero-3d.off { display: grid; place-items: center; padding: 0 24px; text-align: center; color: #9fb0c7; font-size: 14px; }
.office-hero[role="button"] { cursor: pointer; border-radius: 14px; }
.office-hero.waits { box-shadow: 0 0 0 2px var(--warn); }

.work-strip.folded, .work-strip.away { display: none; }

/* The red microphone that floats over the desk while it is dictating and its box is out of sight (Chris, 21 Oct). */
.voice-float { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #d9453d; color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); animation: voice-pulse 1.4s ease-in-out infinite; }
.voice-float svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-float[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .voice-float { animation: none; } }
/* What is being dictated, over the desk while its own box is out of sight (voice.js): see-through, never takes a tap. */
.voice-caption { position: fixed; z-index: 89; left: 50%; transform: translateX(-50%); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px); width: min(640px, calc(100vw - 32px)); height: 42px; display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(20, 17, 15, .38); color: rgba(255, 255, 255, .92); font: 500 16px/1.2 system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.voice-caption-grip { flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7) 1.5px, transparent 2px) 0 0 / 7px 7px; opacity: .8; cursor: grab; touch-action: none; }
.voice-caption-line { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-shadow: inherit; outline: none; text-overflow: clip; }
.voice-caption[hidden] { display: none; }
/* Starting up (amber) until the browser hears; and the caption's line never takes the page's gold focus ring, its pill shows it instead (Chris, 25 Oct). */
.voice-btn.on.warm { background: #c9902f; animation: none; }
.voice-caption-line:focus, .voice-caption-line:focus-visible { outline: none; }
.voice-caption:focus-within { border-color: rgba(255, 255, 255, .55); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px + var(--kb, 0px)); }
.attach-chip.sent.has-thumb { max-width: 120px; }
.attach-chip.sent .attach-thumb { max-height: 90px; }
.attach-chip.sent .attach-name { max-width: 110px; font-size: 11px; }

/* The files waiting to go are a lane over the box (Chris, 26 Oct: they piled up and took the whole window): one row that slides sideways,
   a picture as a clean square with its x inside it, top right, and nothing else; any other file a small tile with its name. */
.attach-tray { overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.attach-tray::-webkit-scrollbar { display: none; }
.attach-tray .attach-chip {
  position: relative; flex: none; display: block; width: 84px; height: 64px; max-width: none; padding: 6px 8px; box-sizing: border-box;
  border-radius: 12px; overflow: hidden; background: var(--panel-2);
}
.attach-tray .attach-chip.has-thumb { width: 64px; padding: 0; background: transparent; }
.attach-tray .attach-thumb { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; background: rgba(0, 0, 0, 0.25); }
.attach-tray .attach-chip.has-thumb .attach-name, .attach-tray .attach-chip.has-thumb .attach-meta { display: none; }
.attach-tray .attach-name { display: block; max-width: none; font-size: 11.5px; line-height: 1.25; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.attach-tray .attach-meta { display: block; margin-top: 2px; font-size: 10.5px; }
.attach-tray .attach-remove {
  position: absolute; top: 3px; right: 3px; z-index: 1; width: 22px; height: 22px; min-height: 22px; font-size: 15px;
  background: rgba(0, 0, 0, 0.58); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.attach-tray .attach-remove:hover, .attach-tray .attach-remove:focus-visible { background: rgba(0, 0, 0, 0.8); color: #fff; }
.attach-tray .attach-chip.going.has-thumb .attach-thumb { opacity: 0.55; }
.attach-tray .attach-chip.failed { border-color: var(--stop); box-shadow: inset 0 0 0 2px var(--stop); }
.attach-tray .attach-full { flex: none; align-self: center; width: auto; white-space: nowrap; }

/* A picture opens large over everything. */
.attach-chip.openable { cursor: zoom-in; }
.attach-lightbox { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.92); -webkit-tap-highlight-color: transparent; cursor: zoom-out; }
.attach-lightbox img { display: block; width: 100%; height: 100%; object-fit: contain; }
.attach-lightbox { overflow: auto; touch-action: pan-x pan-y; }
.attach-lightbox img { cursor: zoom-in; }
.attach-lightbox.full img { width: auto; height: auto; max-width: none; max-height: none; cursor: zoom-out; }
.attach-lightbox-x { position: fixed; z-index: 2; top: max(56px, calc(env(safe-area-inset-top) + 16px)); right: 14px; display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.attach-lightbox-x svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* The New screen, one thing at a time (Chris, 27 Oct): the proposal is the one large card, what is in progress is a quiet strip under it,
   and the line over the box is not drawn while the card is on the screen (it showed the same proposal twice). Dark by default, light under the light scheme. */
.work-dock.is-welcoming .work-prop-dock { display: none; }
.work-scroll.welcoming { padding-bottom: 200px; }
.work-scroll.welcoming .work-going { order: 2; background: rgba(22, 18, 12, .94); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(229, 175, 79, .28); box-shadow: none; padding: 6px 14px; }
.work-scroll.welcoming .work-going-head { color: var(--gold); margin: 4px 0; }
.work-scroll.welcoming .work-going-row { padding: 6px 0; border-color: rgba(255, 255, 255, .08); }
.work-scroll.welcoming .work-going-why { display: none; }
.work-scroll.welcoming .work-going-title { color: #efe3c6; font-size: 14px; }
.work-scroll.welcoming .work-proposal { background: linear-gradient(160deg, #2c2211, #14100a); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(229, 175, 79, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 225, 150, .16); padding: 30px 30px 24px; border-radius: 26px; }
.work-scroll.welcoming .work-proposal::before { display: none; }
.work-scroll.welcoming .work-proposal-kind { color: var(--gold); }
.work-scroll.welcoming .work-proposal h4 { font-size: 30px; line-height: 1.1; color: #fff3d4; margin: 8px 0 12px; }
.work-scroll.welcoming .work-proposal-text { color: #d8cdb4; font-size: 16px; line-height: 1.55; -webkit-mask-image: none; mask-image: none; max-height: none; }
/* The buttons are the app's own clay pots (style.css), only larger on the big card. */
.work-scroll.welcoming .work-proposal button { min-height: 48px; padding: 10px 22px; font-size: 15.5px; }
.work-scroll.welcoming .work-proposal-acts { gap: 12px; margin-top: 20px; }
.work-next-card { margin: 10px auto 0; display: flex; }
@media (prefers-color-scheme: light) {
  .work-scroll.welcoming .work-going { background: rgba(255, 250, 240, .92); border-color: rgba(176, 128, 40, .3); }
  .work-scroll.welcoming .work-going-row { border-color: rgba(90, 60, 10, .12); }
  .work-scroll.welcoming .work-going-title { color: #3b2e18; }
  .work-scroll.welcoming .work-proposal { background: linear-gradient(160deg, #fffaf0, #f3e5c2); border-color: rgba(176, 128, 40, .6); box-shadow: 0 24px 60px rgba(90, 60, 10, .25); }
  .work-scroll.welcoming .work-proposal h4 { color: #2a2114; }
  .work-scroll.welcoming .work-proposal-text { color: #4d4129; }
}