/* The Products and Observatory pages. They share some building blocks (cards, forms, tags, lists) with the Sky pages, which keep their
   deep-space look on purpose. Inside .ui-page those same blocks wear Handoff's look: cream cards on the night-teal gradient, like the
   past-handoffs list, billing and the admin. Nothing here reaches outside .ui-page, so the Sky map and constellations are untouched. */

.ui-page { --ui-card: #f8f7f1; --ui-ink: #202c32; --ui-soft: #5f6f6c; --ui-line: #e3e6df; --ui-green: #35574a; --ui-sage: #cfe3d6; }

/* Text that sits straight on the gradient */
.ui-page .view-inner > p, .ui-page .view-inner > ul:not(.sky-links) { color: #b8cbc6; font-size: 14px; line-height: 1.7; }
.ui-page .view-inner > p a:not(.primary-light):not(.secondary-light), .ui-page .view-inner > .sky-row a:not(.primary-light):not(.secondary-light) { color: var(--ui-sage); }
.ui-page h3 { font: 400 22px/1.2 'Newsreader', Georgia, serif; letter-spacing: -.02em; text-transform: none; color: var(--ui-sage); margin: 36px 0 12px; }
.ui-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cards */
.ui-page .sky-card { background: var(--ui-card); color: var(--ui-ink); border: 0; border-radius: 14px; padding: 18px 22px; text-align: left; text-decoration: none; display: block; margin: 12px 0; }
.ui-page .sky-card p, .ui-page .sky-card li, .ui-page .sky-card small { color: var(--ui-soft); }
.ui-page .sky-card strong { color: var(--ui-ink); font-weight: 500; }
.ui-page .sky-card a { color: var(--ui-green); }
.ui-page .sky-card legend { font: 500 13px 'DM Sans', sans-serif; color: var(--ui-green); padding: 0 6px; }
.ui-page .sky-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.ui-page .sky-grid .sky-card { margin: 0; line-height: 1.6; transition: transform .15s; }
.ui-page .sky-grid a.sky-card:hover { transform: translateY(-2px); }
.ui-page .sky-grid a.sky-card:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.ui-page .obs-h { font: 400 20px/1.2 'Newsreader', Georgia, serif; letter-spacing: -.02em; text-transform: none; color: var(--ui-ink); margin: 0 0 8px; }
.ui-page .obs-tray { border: 1px dashed #bcc9bd; background: rgba(248, 247, 241, .94); }
.ui-page .obs-proposal { border-top: 1px dashed #cdd8cc; }

/* Tags */
.ui-page .sky-tag, .ui-page .sky-edge-state { display: inline-block; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid #cdd8cc; background: #dbe8dc; color: #3b6153; }
.ui-page .sky-tag.proposed, .ui-page .sky-tag.pending { border-style: dashed; background: transparent; }

/* Forms: a cream panel when it stands alone, no extra box when it is already inside a card */
.ui-page .sky-form { display: grid; gap: 8px; margin: 22px 0 0; background: var(--ui-card); color: var(--ui-ink); border-radius: 14px; padding: 20px 22px; }
.ui-page .sky-card .sky-form { background: transparent; padding: 0; margin-top: 12px; }
.ui-page .sky-form label { font: 500 12px 'DM Sans', sans-serif; color: var(--ui-green); }
.ui-page .sky-form input[type=text], .ui-page .sky-form input[type=date], .ui-page .sky-form textarea, .ui-page .sky-form select {
  background: #fff; color: var(--ui-ink); color-scheme: light; border: 1px solid #cdd8cc; border-radius: 10px; padding: 10px 12px; min-height: 44px; font: 14px 'DM Sans', sans-serif; width: 100%; box-sizing: border-box; }
.ui-page .sky-form textarea { min-height: 96px; }
.ui-page .sky-form input:focus-visible, .ui-page .sky-form select:focus-visible, .ui-page .sky-form textarea:focus-visible { outline: 2px solid #72a99c; outline-offset: 1px; }
.ui-page .sky-check, .ui-page .sky-form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 14px 'DM Sans', sans-serif; color: var(--ui-ink); }
.ui-page .sky-form p[role=alert] { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fbe4df; color: #7a2e22; }
.ui-page .sky-check-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.ui-page .sky-check-list label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 4px 10px; border-radius: 10px; font: 14px 'DM Sans', sans-serif; color: var(--ui-ink); }
.ui-page .sky-check-list label:hover { background: #eef1ea; }
.ui-page fieldset.sky-card { border: 0; }

/* Buttons: sage on the gradient, dark green inside a card */
.ui-page .primary-light, .ui-page .secondary-light { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; font: 500 13px 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; width: auto; }
.ui-page .primary-light { background: var(--ui-sage); color: #1c3a35; border: 1px solid var(--ui-sage); }
.ui-page .primary-light:hover { background: #e0eee5; }
.ui-page .secondary-light { background: transparent; color: var(--ui-sage); border: 1px solid rgba(207, 227, 214, .4); }
.ui-page .secondary-light:hover { background: rgba(207, 227, 214, .1); }
.ui-page .sky-card .primary-light, .ui-page .sky-form .primary-light { background: #253e3c; color: #eaf2eb; border-color: #253e3c; }
.ui-page .sky-card .primary-light:hover, .ui-page .sky-form .primary-light:hover { background: #365852; }
.ui-page .sky-card .secondary-light, .ui-page .sky-form .secondary-light { background: #e3e9e1; color: var(--ui-green); border-color: #cdd8cc; }
.ui-page .sky-card .secondary-light:hover, .ui-page .sky-form .secondary-light:hover { background: #d6e0d4; }
.ui-page .primary-light:focus-visible, .ui-page .secondary-light:focus-visible, .ui-page .quiet-link:focus-visible { outline: 2px solid #72a99c; outline-offset: 2px; }
.ui-page .sky-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.ui-page .sky-card .sky-row { margin-top: 12px; }
.ui-page form.inline, .ui-page .sky-row form { display: contents; }
.ui-page .quiet-link { color: var(--ui-green); background: none; border: 0; text-decoration: underline; font: 12px 'DM Sans', sans-serif; min-height: 44px; padding: 0 8px; cursor: pointer; }

/* Lists on a cream sheet */
.ui-page .sky-history, .ui-page .sky-links { list-style: none; margin: 0; padding: 0; background: var(--ui-card); color: var(--ui-ink); border-radius: 14px; font-size: 14px; }
.ui-page .sky-history li, .ui-page .sky-links li { padding: 14px 20px; border-bottom: 1px solid var(--ui-line); line-height: 1.6; }
.ui-page .sky-history li:last-child, .ui-page .sky-links li:last-child { border-bottom: 0; }
.ui-page .sky-history time { font: 11px 'DM Mono', monospace; color: var(--ui-soft); }
.ui-page .sky-links a { color: var(--ui-green); }
.ui-page .sky-links li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-page .sky-links form { display: contents; }

/* Observatory conversation */
.ui-page .obs-messages { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.ui-page .obs-message { border: 0; border-radius: 14px; padding: 14px 18px; max-width: 92%; background: var(--ui-card); color: var(--ui-ink); }
.ui-page .obs-message.assistant { background: var(--ui-card); color: var(--ui-ink); }
.ui-page .obs-message.user { background: var(--ui-sage); color: #1c3a35; justify-self: end; }
.ui-page .obs-message p { margin: 6px 0 0; color: inherit; white-space: pre-wrap; line-height: 1.6; }
.ui-page .obs-role { font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-soft); }
.ui-page .obs-message.user .obs-role { color: #3b6153; }
.ui-page .obs-sources { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.ui-page .obs-sources li { color: var(--ui-ink); }
.ui-page .obs-manifest { white-space: pre-wrap; font: 12px/1.5 'DM Mono', monospace; background: #eef1ea; color: #2c4440; border-radius: 10px; padding: 12px; max-height: 320px; overflow: auto; }
.ui-page .obs-flags { border: 1px dashed #c9a24d; background: #fbf1d9; color: #6b4f12; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.ui-page .obs-flags li, .ui-page .obs-flags strong { color: inherit; }
.ui-page .obs-compose { margin-top: 18px; }
.ui-page .sky-why { font-size: 13px; color: var(--ui-soft); }
.ui-page details { margin-top: 12px; color: var(--ui-soft); }
.ui-page summary { cursor: pointer; font: 500 13px 'DM Sans', sans-serif; color: var(--ui-green); min-height: 44px; display: flex; align-items: center; }

/* Product lighting words, readable on cream */
.ui-page .concept-lit { color: #a8741a; font-weight: 500; }
.ui-page .concept-dawn { color: #5b6fa0; font-weight: 500; }
.ui-page .concept-ember { color: #a8603a; font-weight: 500; }

@media (max-width: 640px) { .ui-page .sky-card, .ui-page .sky-form { padding: 16px; } .ui-page .obs-message { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ui-page .sky-grid .sky-card { transition: none; } }