/* Additions on top of the design study (handoff.css): the study toggled views in JavaScript with
   buttons; the app routes between pages with links and posts changes with forms. */

a { color: inherit; }
.nav-item, .history-row, .idea-card, .secondary-light, .primary-light, .button-link { text-decoration: none; }
a.nav-item { color: #94a4a8; }
a.nav-item:hover, a.nav-item.active { color: #f0f4ef; }
a.history-row, a.idea-card { color: inherit; }
a.idea-card { display: block; text-align: left; }
a.secondary-light, a.primary-light, a.button-link { display: inline-flex; align-items: center; gap: 6px; }
form.button_to, .chip-form, .swatch-form, .inline-form, .compose-wrapper, .paper-frame { display: contents; }
.hidden-form { display: none; }
.nav-signout { background: transparent; color: #879e9c; padding: 3px; border: 0; border-radius: 7px; transition: color .2s, background .2s; }
.nav-signout:hover { color: #edf5ef; background: rgba(255,255,255,.07); }
.muted { color: #89998f; }
.fine-print { font-size: 11px; line-height: 1.7; color: #82918a; }
.view-inner .fine-print { color: #9db8b1; text-align: left; }
.empty-note { color: #bed1cc; font-size: 13px; }
.button-link { background: rgba(235,245,240,.09); color: #cfe0d6; border: 1px solid rgba(225,242,235,.16); border-radius: 10px; padding: 8px 13px; font-size: 12px; }
.quiet-link.light { color: #5d7b6f; }
.paper-side .quiet-link, .modal .quiet-link { background: transparent; border: 0; font-size: 11px; cursor: pointer; }

/* Sign in / password pages */
.welcome-app { display: block; }
.welcome-app .workspace { min-height: 100dvh; align-items: center; justify-content: center; display: flex; }
.welcome-card { width: min(420px, 90vw); padding: 36px 34px; border-radius: 18px; background: rgba(12,23,30,.55); backdrop-filter: blur(18px); border: 1px solid rgba(208,231,222,.16); color: #e5ece9; }
.welcome-card .brand { padding: 0; margin-bottom: 26px; }
.welcome-heading { font: 400 34px/1.05 'Newsreader', Georgia, serif; letter-spacing: -.04em; margin: 0 0 22px; color: #f1f2eb; }
.welcome-heading em { color: #bdd4c6; }
.welcome-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.welcome-form input[type=email], .welcome-form input[type=password] { background: rgba(12,23,30,.5); border: 1px solid rgba(208,231,222,.2); border-radius: 11px; padding: 13px 14px; color: #ecf2ee; font-size: 14px; }
.welcome-form input:focus-visible { outline: 2px solid #6bb6a2; outline-offset: 2px; }
.welcome-flash { font-size: 12px; color: #e6bcad; margin: 0 0 14px; }
.welcome-card .quiet-link { color: #9dbaae; font-size: 12px; }

/* Chat */
.pending-dots { display: flex; gap: 5px; padding-left: 30px; }
.pending-dots span { width: 5px; height: 5px; border-radius: 50%; background: #91c3b0; animation: pending 1.2s ease-in-out infinite; }
.pending-dots span:nth-child(2) { animation-delay: .2s; }
.pending-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pending { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.motion-off .pending-dots span { animation: none; opacity: .7; }
.msg.assistant .msg-body { white-space: pre-wrap; }
.compose-tools .tool-text[disabled] { opacity: .45; cursor: not-allowed; }
.morning-card { margin-top: 20px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(203,234,221,.17); background: rgba(176,219,201,.06); max-width: 520px; }
.morning-card p { margin: 6px 0 0; color: #d6e2df; font-size: 13px; line-height: 1.6; }
.smallhead { font: 10px 'DM Mono', monospace; letter-spacing: .14em; color: #9dbaae; margin-top: 8px; }
.morning-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.morning-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; color: #d6e2df; }
.morning-list .quiet-link { color: #9dbaae; font-size: 11px; background: transparent; border: 0; }

/* Draft claims: what is tentative or only inferred must look different from what was said plainly */
.claim-tentative { font-style: italic; }
.claim-inferred { border-left: 2px dotted #b8a77a; padding-left: 8px; }
.claim-badge { display: inline-block; font: 9px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: #e9efe9; color: #5d7b6f; vertical-align: 1px; font-style: normal; }
.claim-badge-inferred { background: #f3ecd6; color: #8a7438; }
.claim-badge-flag { background: #f5e1dc; color: #9a5446; }
.paper-not-captured { font-size: 11px; color: #8b9a93; margin-top: 14px; }
.review-item.left-out { opacity: .55; }
.review-item .review-actions { display: flex; gap: 10px; }
.review-item p + b { display: block; margin-top: 8px; }
.modal-actions form { display: contents; }
.modal { max-height: 88vh; overflow: auto; }

/* Settings: forms from button_to wrap the same buttons the study used */
.settings-row button:not(.color-swatch) { background: rgba(235,245,240,.09); color: #cfe0d6; border: 1px solid rgba(225,242,235,.16); border-radius: 10px; padding: 8px 13px; font-size: 12px; }
.selectlike { background: rgba(235,245,240,.09); color: #cfe0d6; border: 1px solid rgba(225,242,235,.16); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.selectlike option { color: #202c32; }

a.quiet-link { text-decoration: none; }

.evening-input button { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Chat text size: --chat-font is set on <html> by the text-size controller, only once the person picks a size. */
.text-size { display: flex; gap: 6px; }
.text-size .tiny-btn[disabled] { opacity: .4; cursor: not-allowed; }
.text-size-small { font: 500 12px 'DM Sans', sans-serif; }
.text-size-large { font: 500 17px 'DM Sans', sans-serif; }
html[data-chat-size] .chat-wrap .msg-body,
html[data-chat-size] .chat-wrap .chat-compose textarea { font-size: var(--chat-font); }

/* Settings rows sit on light cards, so their controls need dark-on-light colors (the dark-page styles above vanish here). */
.settings-row button:not(.color-swatch), .settings-row .selectlike, .settings-row .button-link { background: #e3e9e1; color: #35574a; border: 1px solid #cdd8cc; }
.settings-row button:not(.color-swatch):hover, .settings-row .button-link:hover { background: #d6e0d4; }
.settings-row .selectlike:focus-visible, .settings-row button:focus-visible, .settings-row .button-link:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.settings-row > .icon { color: #5f7f70; }

/* Evening sky: a full-width layer behind the column. Stars twinkle; clouds drift across the whole screen and pass the moon.
   --moon-top is where the moon sits, so clouds are placed relative to it. Each cloud animates drift (transform),
   bob (translate) and size (scale) independently; --rest is where a cloud sits when motion is off. */
.evening-view { --moon-top: clamp(80px, 15vh, 165px); }
.evening-view .view-inner { padding-top: var(--moon-top); }
@media (max-width: 640px) { .evening-view { --moon-top: 14vh; } }
.evening-view .evening-moon { z-index: 1; }
.evening-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: inline-size; }
.stars { position: absolute; left: 0; top: 0; border-radius: 50%; background: transparent; animation: star-twinkle var(--twinkle, 6s) ease-in-out var(--twinkle-delay, 0s) infinite alternate; }
.stars-small { --twinkle: 5s; width: 1px; height: 1px; box-shadow:
    63.8cqw 7px rgba(226,236,232,.75),
    27.7cqw 49px rgba(226,236,232,.75),
    73.4cqw 262px rgba(226,236,232,.75),
    88.8cqw 15px rgba(226,236,232,.75),
    42.3cqw 7px rgba(226,236,232,.75),
    22.1cqw 167px rgba(226,236,232,.75),
    3.1cqw 42px rgba(226,236,232,.75),
    64.8cqw 187px rgba(226,236,232,.75),
    22.3cqw 211px rgba(226,236,232,.75),
    80.6cqw 6px rgba(226,236,232,.75),
    80.3cqw 276px rgba(226,236,232,.75),
    34.2cqw 30px rgba(226,236,232,.75),
    95.3cqw 90px rgba(226,236,232,.75),
    9.7cqw 17px rgba(226,236,232,.75),
    84.4cqw 220px rgba(226,236,232,.75),
    80.4cqw 295px rgba(226,236,232,.75),
    53.6cqw 465px rgba(226,236,232,.75),
    38.0cqw 191px rgba(226,236,232,.75),
    82.6cqw 228px rgba(226,236,232,.75),
    85.8cqw 205px rgba(226,236,232,.75),
    70.3cqw 9px rgba(226,236,232,.75),
    23.1cqw 72px rgba(226,236,232,.75),
    8.4cqw 52px rgba(226,236,232,.75),
    10.5cqw 67px rgba(226,236,232,.75),
    63.4cqw 101px rgba(226,236,232,.75),
    37.1cqw 45px rgba(226,236,232,.75),
    26.9cqw 438px rgba(226,236,232,.75),
    64.7cqw 223px rgba(226,236,232,.75),
    17.4cqw 295px rgba(226,236,232,.75),
    16.7cqw 107px rgba(226,236,232,.75),
    98.5cqw 241px rgba(226,236,232,.75),
    55.6cqw 267px rgba(226,236,232,.75),
    83.9cqw 325px rgba(226,236,232,.75),
    23.2cqw 7px rgba(226,236,232,.75),
    31.7cqw 64px rgba(226,236,232,.75),
    21.4cqw 442px rgba(226,236,232,.75),
    87.3cqw 81px rgba(226,236,232,.75),
    65.4cqw 114px rgba(226,236,232,.75),
    91.0cqw 144px rgba(226,236,232,.75),
    26.7cqw 57px rgba(226,236,232,.75),
    56.1cqw 62px rgba(226,236,232,.75),
    58.4cqw 409px rgba(226,236,232,.75),
    40.0cqw 48px rgba(226,236,232,.75),
    99.3cqw 169px rgba(226,236,232,.75),
    9.5cqw 9px rgba(226,236,232,.75),
    11.4cqw 233px rgba(226,236,232,.75),
    78.9cqw 126px rgba(226,236,232,.75),
    6.8cqw 108px rgba(226,236,232,.75),
    99.1cqw 179px rgba(226,236,232,.75),
    96.6cqw 383px rgba(226,236,232,.75),
    1.6cqw 290px rgba(226,236,232,.75),
    68.0cqw 183px rgba(226,236,232,.75),
    26.9cqw 241px rgba(226,236,232,.75),
    11.5cqw 132px rgba(226,236,232,.75),
    45.4cqw 451px rgba(226,236,232,.75),
    87.2cqw 62px rgba(226,236,232,.75),
    50.1cqw 36px rgba(226,236,232,.75),
    90.9cqw 390px rgba(226,236,232,.75),
    30.0cqw 240px rgba(226,236,232,.75),
    60.8cqw 29px rgba(226,236,232,.75),
    76.0cqw 184px rgba(226,236,232,.75),
    77.6cqw 179px rgba(226,236,232,.75),
    0.6cqw 85px rgba(226,236,232,.75),
    2.4cqw 432px rgba(226,236,232,.75),
    87.5cqw 363px rgba(226,236,232,.75),
    30.9cqw 11px rgba(226,236,232,.75),
    87.4cqw 445px rgba(226,236,232,.75),
    9.0cqw 157px rgba(226,236,232,.75),
    7.4cqw 315px rgba(226,236,232,.75),
    76.3cqw 23px rgba(226,236,232,.75); }
.stars-medium { --twinkle: 7s; --twinkle-delay: -3s; width: 2px; height: 2px; box-shadow:
    47.6cqw 190px rgba(236,242,236,.8),
    26.7cqw 391px rgba(236,242,236,.8),
    42.4cqw 46px rgba(236,242,236,.8),
    53.9cqw 296px rgba(236,242,236,.8),
    20.4cqw 80px rgba(236,242,236,.8),
    99.0cqw 246px rgba(236,242,236,.8),
    43.9cqw 173px rgba(236,242,236,.8),
    12.5cqw 50px rgba(236,242,236,.8),
    34.0cqw 211px rgba(236,242,236,.8),
    23.3cqw 48px rgba(236,242,236,.8),
    7.5cqw 235px rgba(236,242,236,.8),
    23.2cqw 415px rgba(236,242,236,.8),
    85.6cqw 12px rgba(236,242,236,.8),
    24.1cqw 258px rgba(236,242,236,.8),
    21.7cqw 24px rgba(236,242,236,.8),
    93.1cqw 201px rgba(236,242,236,.8),
    47.3cqw 331px rgba(236,242,236,.8),
    80.4cqw 39px rgba(236,242,236,.8),
    10.1cqw 130px rgba(236,242,236,.8),
    42.4cqw 147px rgba(236,242,236,.8),
    72.7cqw 260px rgba(236,242,236,.8),
    97.9cqw 17px rgba(236,242,236,.8),
    40.4cqw 91px rgba(236,242,236,.8),
    85.8cqw 57px rgba(236,242,236,.8); }
.stars-bright { --twinkle: 4s; --twinkle-delay: -1.5s; width: 2px; height: 2px; filter: drop-shadow(0 0 3px rgba(240,246,238,.9)); box-shadow:
    19.3cqw 139px rgba(248,250,242,.95),
    42.3cqw 68px rgba(248,250,242,.95),
    25.2cqw 428px rgba(248,250,242,.95),
    44.4cqw 384px rgba(248,250,242,.95),
    55.0cqw 10px rgba(248,250,242,.95),
    99.4cqw 366px rgba(248,250,242,.95),
    96.4cqw 430px rgba(248,250,242,.95),
    84.5cqw 33px rgba(248,250,242,.95); }
.cloud { position: absolute; left: 50%; width: 120px; height: 26px; margin-left: -60px; border-radius: 100px; background: rgba(228, 238, 234, var(--cloud-opacity, .16)); filter: blur(5px); opacity: 0; transform: translateX(var(--rest, 0)); scale: var(--size, 1); animation: cloud-drift var(--drift, 120s) linear var(--delay, 0s) infinite, cloud-bob var(--bob, 9s) ease-in-out var(--delay, 0s) infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 52px; height: 40px; left: 18px; top: -17px; }
.cloud::after { width: 66px; height: 46px; left: 52px; top: -23px; }
.cloud-front { --size: 1.1; --drift: 130s; --delay: -50s; --bob: 8s; --rest: -17cqw; top: calc(var(--moon-top) + 46px); z-index: 2; }
.cloud-behind { --size: .8; --cloud-opacity: .1; --drift: 190s; --delay: -120s; --bob: 11s; --rest: 22cqw; top: calc(var(--moon-top) + 2px); }
.cloud-high { --size: 1.2; --cloud-opacity: .08; --drift: 230s; --delay: -40s; --bob: 12s; --rest: -34cqw; top: calc(var(--moon-top) - 62px); }
.cloud-mid { --size: .9; --cloud-opacity: .12; --drift: 160s; --delay: -140s; --bob: 10s; --rest: 36cqw; top: calc(var(--moon-top) + 24px); z-index: 2; }
.cloud-low { --size: 1.4; --cloud-opacity: .09; --drift: 250s; --delay: -15s; --bob: 13s; --rest: 14cqw; top: calc(var(--moon-top) + 96px); z-index: 2; }
@keyframes cloud-drift { 0% { transform: translateX(-56cqw); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(56cqw); opacity: 0; } }
@keyframes cloud-bob { from { translate: 0 -4px; } to { translate: 0 5px; } }
@keyframes star-twinkle { from { opacity: .25; } to { opacity: 1; } }
.motion-off .cloud { animation: none; opacity: 1; }
.motion-off .stars { animation: none; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; opacity: 1; } .stars { animation: none; opacity: .7; } }

/* Profile: forms on light cards */
.nav-foot-actions { display: flex; align-items: center; gap: 4px; }
a.nav-signout { display: grid; place-items: center; }
.profile-card { background: #f7f6f0; border-radius: 10px; padding: 22px 23px; color: #394f45; }
.profile-card h2 { font: 500 13px 'DM Sans', sans-serif; margin: 0; }
.profile-card p { font-size: 11px; color: #819087; margin: 6px 0 0; line-height: 1.6; }
.profile-form { display: grid; gap: 8px; margin-top: 18px; max-width: 420px; }
.profile-form label { font: 11px 'DM Sans', sans-serif; color: #5d7168; margin-top: 6px; }
.profile-form input[type=email], .profile-form input[type=password] { background: #fff; border: 1px solid #cdd8cc; border-radius: 9px; padding: 11px 12px; color: #24322f; font-size: 13px; }
.profile-form input:focus-visible { outline: 2px solid #72a99c; outline-offset: 1px; }
.profile-form .primary-light { justify-self: start; margin-top: 10px; border: 0; cursor: pointer; }

/* The composer's scrollbar: a thin, quiet thumb in the same tone as the message list's, so it reads as part of the box. */
.chat-compose textarea { scrollbar-width: thin; scrollbar-color: rgba(157, 203, 187, .38) transparent; padding-right: 6px; }
.chat-compose textarea:hover, .chat-compose textarea:focus { scrollbar-color: rgba(157, 203, 187, .6) transparent; }

/* While a draft is being prepared, the orb beside "Drafting…" pulses so you can see it working.
   !important beats the dot's inline resting color. */
.status-dot.working { background: #36b588 !important; animation: draft-glow 1.4s ease-in-out infinite; }
@keyframes draft-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 5px 1px rgba(54, 181, 136, .55); }
  50% { transform: scale(1.5); box-shadow: 0 0 18px 7px rgba(54, 181, 136, .95); }
}
.motion-off .status-dot.working { animation: none; box-shadow: 0 0 14px 5px rgba(54, 181, 136, .85); }
@media (prefers-reduced-motion: reduce) { .status-dot.working { animation: none; box-shadow: 0 0 14px 5px rgba(54, 181, 136, .85); } }

/* An approved handoff swaps the orb for a check mark that pops in once. */
.approved-mark { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #36b588; color: #fff; box-shadow: 0 0 0 3px rgba(54, 181, 136, .18), 0 0 10px rgba(54, 181, 136, .45); animation: approved-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.approved-mark .icon { width: 10px; height: 10px; stroke-width: 3.2; }
@keyframes approved-pop { from { transform: scale(.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.motion-off .approved-mark { animation: none; }
@media (prefers-reduced-motion: reduce) { .approved-mark { animation: none; } }

/* Writing room: the sheet fills the screen, so the Markdown source takes all the height left under the title.
   The rich editor keeps its own bottom room so the page still scrolls past the last line. */
.writing-sheet { flex: 1 0 auto; display: flex; flex-direction: column; }
.writing-editor { padding-bottom: 56px; }
.markdown-editor { flex: 1 1 auto; min-height: 320px; resize: none; }
.markdown-editor { scrollbar-width: thin; scrollbar-color: #b7c3b9 transparent; }

/* Ideas waiting to be kept or dismissed, above the kept ones. */
.pending-ideas { margin-top: 34px; display: flex; flex-direction: column; gap: 10px; }
.pending-ideas .labelcaps { color: #a5c6b9; margin: 0; }
.pending-ideas .fine-print { margin: 0 0 4px; }
.pending-idea { background: #f7f6f0; border: 1px solid #e7e8df; border-radius: 12px; padding: 18px 20px; color: #35413d; }
.pending-excerpt { font: italic 15px/1.5 'Newsreader', Georgia, serif; color: #667874; margin: 0 0 10px; }
.pending-idea h3 { font: 500 17px/1.3 'Newsreader', Georgia, serif; margin: 0 0 4px; color: #263a39; }
.pending-description { font: 12px/1.6 'DM Sans', sans-serif; color: #6d7b78; margin: 0; }
.pending-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.pending-actions form { margin: 0; }
.pending-actions button { cursor: pointer; border: 0; }
.pending-actions .secondary-light { border: 1px solid #d7ddd3; padding: 10px 12px; }
.pending-from { margin-left: auto; font: 10px 'DM Mono', monospace; color: #89948f; }

/* Writing room hint: a bar stuck to the bottom edge with a solid backing, so text scrolls under it instead of showing through.
   It sits after the sheet in the page flow, so at the end of the page it comes below the last line. */
.writing-bottom { position: sticky; bottom: 0; flex: none; width: 100%; height: 46px; line-height: 52px; text-align: center; z-index: 2;
  background: linear-gradient(to top, #f4f2ec 78%, rgba(244, 242, 236, 0)); pointer-events: none; }
.writing-sheet { padding-bottom: 28px; }

/* A boy sitting on the moon, fishing for a letter of the heading. The SVG covers the column; the controller
   places the figure and threads the line. The letter is tilted and lifted as if it were being reeled in. */
.evening-view .view-inner { overflow: visible; }
.fisher { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.fisher-body { fill: #07161c; }
.fisher-limb, .fisher-rod { fill: none; stroke: #07161c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4.6; }
.fisher-rod { stroke-width: 1.6; }
.fisher-line, .fisher-hook { fill: none; stroke: rgba(226, 236, 232, .6); stroke-width: 1; stroke-linecap: round; }
.hooked-letter { display: inline-block; transform-origin: 20% 90%; transform: translateY(-17px) rotate(18deg); }

/* The moon is a fat crescent so the boy has a hollow to sit in. A round disc is cut by a circle placed up and to
   the right (--cut-x/--cut-y/--cut-r); --seat-x/--seat-y is where the boy sits, as fractions of the moon's box. The
   glow is a drop-shadow on the box because a mask would clip a box-shadow. */
.evening-view .evening-moon { --cut-x: 68%; --cut-y: 38%; --cut-r: 43px; --seat-x: .75; --seat-y: .85;
  background: none; box-shadow: none; filter: drop-shadow(0 0 16px rgba(215, 219, 198, .34)) drop-shadow(0 0 46px rgba(215, 219, 198, .16)); }
.evening-view .evening-moon::after { display: none; }
.evening-view .evening-moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 34%, #f6ead2, #d3cdb4 62%, #aebdb0);
  mask-image: radial-gradient(circle at var(--cut-x) var(--cut-y), transparent calc(var(--cut-r) - 1px), #000 calc(var(--cut-r) + 1px)); }

/* Stars with their own timing. Each one flickers between --low and full brightness at its own pace and phase;
   the bright ones also carry a thin cross of light. */
.star { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #eef3ee;
  box-shadow: 0 0 calc(var(--size) * 2.2) rgba(226, 236, 232, .7); animation: star-flicker var(--time) ease-in-out var(--delay) infinite; }
.star.bright::before, .star.bright::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 243, 238, .85), transparent); width: calc(var(--size) * 6); height: 1px; }
.star.bright::after { width: 1px; height: calc(var(--size) * 6); background: linear-gradient(180deg, transparent, rgba(238, 243, 238, .85), transparent); }
@keyframes star-flicker { 0%, 100% { opacity: var(--low); scale: .65; } 40% { opacity: 1; scale: 1.2; } 55% { opacity: .75; scale: 1; } 70% { opacity: .95; scale: 1.1; } }
.motion-off .star { animation: none; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: .75; } }

/* The lifted letter hangs from the hook and swings a few degrees. It turns about the hook point itself (the same
   spot fisher_controller.js threads the line to: 66% across, 9% down), so the line never leaves the letter. */
.hooked-sway { display: inline-block; transform-origin: 66% 9%; animation: letter-sway 4.6s ease-in-out infinite alternate; }
@keyframes letter-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
.motion-off .hooked-sway { animation: none; }
@media (prefers-reduced-motion: reduce) { .hooked-sway { animation: none; } }
/* A narrow screen may wrap the heading, but never between the lifted "h" and the rest of its word. */
.evening-view .page-heading em { white-space: nowrap; }
@media (max-width: 640px) { .evening-view .page-heading { font-size: min(43px, 10.4vw); } }
/* On a wide screen the draft is a column; closing it gives the page back its width and shows the book button to reopen it. */
@media (min-width: 991px) {
  .app.session-layout.paper-hidden { grid-template-columns: 228px minmax(0, 1fr); }
  .app.paper-hidden .paper-side { display: none; }
  .app.paper-hidden .right-toggle { display: grid; }
}

/* Scrollbars: thin and muted, in the tone of whatever they sit on. The page scrolls over the dark gradient, so its thumb is pale sage on no track;
   a box on a cream card (a list, a text area) gets a soft dark green one, so neither looks like a bright browser bar stuck on. */
.view { scrollbar-width: thin; scrollbar-color: rgba(157, 186, 174, .32) transparent; }
.view:hover { scrollbar-color: rgba(157, 186, 174, .5) transparent; }
.ui-page .sky-check-list, .ui-page .obs-manifest, .ui-page .sky-form textarea { scrollbar-width: thin; scrollbar-color: rgba(53, 87, 74, .32) transparent; }
.ui-page .sky-check-list:hover, .ui-page .obs-manifest:hover, .ui-page .sky-form textarea:hover { scrollbar-color: rgba(53, 87, 74, .5) transparent; }
@supports not (scrollbar-color: auto) {
  .view::-webkit-scrollbar { width: 10px; }
  .view::-webkit-scrollbar-track { background: transparent; }
  .view::-webkit-scrollbar-thumb { background: rgba(157, 186, 174, .32); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  .view::-webkit-scrollbar-thumb:hover { background: rgba(157, 186, 174, .5); background-clip: content-box; }
}

/* Save, cancel and approve in the writing room: always on the page, and big enough to hit on a phone (the top bar hides its secondary buttons there). */
.writing-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 20px; }
.writing-actions form { display: contents; }
.writing-actions .secondary-light, .writing-actions .primary-light { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; text-decoration: none; cursor: pointer; font: 500 13px 'DM Sans', sans-serif; }
.writing-actions .primary-light { background: #253e3c; color: #eaf2eb; border: 1px solid #253e3c; }
.writing-actions .primary-light:hover { background: #365852; }
.writing-actions .secondary-light { background: transparent; color: #35574a; border: 1px solid #cdd8cc; }
.writing-actions .secondary-light:hover { background: #edf0ea; }

/* The pager under a long list (ideas, past handoffs, the admin tabs) */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 26px 0 8px; font: 12px 'DM Sans', sans-serif; color: #9dbaae; }
.pager-count { margin: 0; font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.pager-links { display: flex; align-items: center; gap: 10px; }
.pager-now { font-size: 12px; color: #c9d9d3; }
.pager-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(225, 242, 235, .22); color: #e3ede8; text-decoration: none; font-weight: 500; }
.pager-link:hover { background: rgba(235, 245, 240, .1); }
.pager-link:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.pager-link.off { opacity: .35; border-style: dashed; }

/* Tooltips: the bubble for any title in the app. It takes the colours of the chosen theme (--nav, --teal), so it matches drift, ember, grove and paper alike. */
.tooltip { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 10px; background: var(--nav, #151f26); color: #eef4f0; border: 1px solid color-mix(in srgb, var(--teal, #96c5b7) 40%, transparent); box-shadow: 0 12px 32px rgba(3, 10, 14, .5); font: 500 12px/1.45 'DM Sans', sans-serif; letter-spacing: .01em; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
.tooltip[data-side=bottom] { transform: translateY(-3px); }
.tooltip[data-open] { opacity: 1; transform: none; }
.tooltip::after { content: ''; position: absolute; left: var(--arrow-x, 50%); width: 9px; height: 9px; margin-left: -5px; background: var(--nav, #151f26); transform: rotate(45deg); }
.tooltip[data-side=top]::after { bottom: -5px; border-right: 1px solid color-mix(in srgb, var(--teal, #96c5b7) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--teal, #96c5b7) 40%, transparent); }
.tooltip[data-side=bottom]::after { top: -5px; border-left: 1px solid color-mix(in srgb, var(--teal, #96c5b7) 40%, transparent); border-top: 1px solid color-mix(in srgb, var(--teal, #96c5b7) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } }

/* The profile's time zone card sits on cream, so its dropdown and buttons wear the cream card's colours */
.profile-form select { background: #fff; color: #202c32; color-scheme: light; border: 1px solid #cdd8cc; border-radius: 10px; padding: 11px 12px; min-height: 44px; font: 13px 'DM Sans', sans-serif; width: 100%; box-sizing: border-box; }
.profile-form select:focus-visible { outline: 2px solid #72a99c; outline-offset: 1px; }
.profile-form .secondary-light { justify-self: start; }
.profile-form .fine-print { min-height: 1.4em; margin: 2px 0 0; }

/* Keep the Ideas type hierarchy while stepping up its reading size. */
html[data-ideas-size] #view-ideas { --idea-text-increase: calc(var(--ideas-font) - 13px); }
html[data-ideas-size] #view-ideas .idea-card p,
html[data-ideas-size] #view-ideas .pending-description { font-size: calc(12px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .pending-excerpt { font-size: calc(15px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .pending-idea h3 { font-size: calc(17px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .idea-card h3 { font-size: calc(25px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .detail-desc { font-size: calc(18px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .detail-source p { font-size: calc(16px + var(--idea-text-increase)); }
html[data-ideas-size] #view-ideas .fine-print { font-size: calc(11px + var(--idea-text-increase)); }

/* Saved ideas open beside the collection, without moving its scroll position. */
.idea-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(580px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid #e7e8df;
  background: #f9f8f3;
  box-shadow: -20px 0 70px #07151a40;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
}
.idea-drawer::backdrop {
  background: #081b2366;
  opacity: 0;
  transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
}
.idea-drawer[open] { transform: translateX(0); }
.idea-drawer[open]::backdrop { opacity: 1; }
@starting-style {
  .idea-drawer[open] { transform: translateX(100%); }
  .idea-drawer[open]::backdrop { opacity: 0; }
}
.idea-drawer .idea-detail {
  display: block;
  position: relative;
  inset: auto;
  height: 100%;
  padding: 32px clamp(24px, 5vw, 44px) 48px;
  overflow-y: auto;
}
.idea-drawer .detail-back { margin-bottom: 32px; }
.idea-drawer .idea-detail h2 { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .idea-drawer, .idea-drawer::backdrop { transition: none; }
}

.pending-idea-preview { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.pending-idea-preview:focus-visible { outline: 2px solid #64877c; outline-offset: 6px; }
.pending-review { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: #53665c; }
.pending-idea-preview:hover .pending-review { text-decoration: underline; }

/* Pocket provenance is printed softly into the paper, behind the idea. */
.pending-idea, .idea-card, .idea-drawer .idea-detail { position: relative; isolation: isolate; }
.idea-source-stamp {
  position: absolute;
  z-index: -1;
  top: 24px;
  right: 24px;
  width: 158px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px dashed currentColor;
  outline: 1px solid currentColor;
  outline-offset: 5px;
  border-radius: 5px;
  color: var(--ambient-2);
  opacity: .19;
  font: 12px/1.5 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
}
.idea-source-stamp .icon { width: 32px; height: 32px; }
.idea-drawer .idea-source-stamp { top: 100px; right: 35px; width: 186px; height: 126px; }

/* Quieter atmospheres share the same readable paper surfaces. */
.app.theme-dusk {
  --ambient-1: #282635;
  --ambient-2: #38354d;
  --ambient-3: #514c65;
  --ambient-accent: #b6adcf;
  --teal: #c9c0df;
  --nav: #24222e;
}
.app.theme-tide {
  --ambient-1: #21303c;
  --ambient-2: #2e4657;
  --ambient-3: #4b6573;
  --ambient-accent: #a3c1cf;
  --teal: #bdd8df;
  --nav: #1d2933;
}
.app.theme-sage {
  --ambient-1: #2b322d;
  --ambient-2: #3d4a3e;
  --ambient-3: #5c6958;
  --ambient-accent: #bec9ad;
  --teal: #d0d9bd;
  --nav: #242c26;
}
.app.theme-sand {
  --ambient-1: #342c28;
  --ambient-2: #4b3f35;
  --ambient-3: #6a5949;
  --ambient-accent: #cfbba2;
  --teal: #e0cdb2;
  --nav: #2c2622;
}

.settings-row.atmosphere-settings { flex-direction: column; align-items: stretch; gap: 22px; }
.atmosphere-settings .setting-theme { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 10px; }
.theme-choice { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.theme-choice .swatch-form { margin: 0; }
.settings-row .color-swatch { display: block; width: 40px; height: 40px; border-radius: 50%; }
.settings-row .color-swatch.active { outline-color: var(--ambient-2); }
.settings-row .color-swatch:focus-visible { outline: 3px solid var(--ambient-2); outline-offset: 4px; }
.theme-choice-name { color: #596a60; font-size: 11px; }
.theme-choice:has(.active) .theme-choice-name { color: #2c4136; font-weight: 600; }
@media (max-width: 700px) {
  .atmosphere-settings .setting-theme { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}