/* Hosted beta pages: the Publishing studio look (light/dark tokens, serif headings), no external assets. */
:root {
  color-scheme: light dark;
  --hp-bg: light-dark(#f5f6f0, #191f1b);
  --hp-panel: light-dark(#fff, #242d26);
  --hp-soft: light-dark(#edf1e8, #303c31);
  --hp-text: light-dark(#29382c, #ecf1e9);
  --hp-muted: light-dark(#61705f, #b0beac);
  --hp-line: light-dark(#dce3d8, #40503e);
  --hp-accent: light-dark(#3d6146, #b3d4a5);
  --hp-on-accent: light-dark(#fff, #20351f);
  --hp-good: light-dark(#326044, #b3d4a5);
  --hp-warn: light-dark(#795b2e, #e4c58e);
  --hp-danger: light-dark(#a03535, #ffbaba);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body.hp {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--hp-bg); color: var(--hp-text);
  font: 15px/1.55 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
.hp :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; }
.hp-skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: var(--hp-panel); color: var(--hp-text); }
.hp-skip:focus { top: 12px; }

.hp-header { width: 100%; max-width: 1040px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hp-brand { display: flex; align-items: center; gap: 12px; color: var(--hp-text); text-decoration: none; }
.hp-brand svg { flex: none; color: var(--hp-accent); }
.hp-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.hp-brand-text strong { font-size: 1rem; font-weight: 650; }
.hp-brand-text small { color: var(--hp-muted); font-size: .75rem; }
.hp-lang { display: flex; gap: 6px; }
.hp-lang-button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--hp-line); border-radius: 999px; background: transparent; color: var(--hp-muted); font: inherit; font-size: .8rem; cursor: pointer; }
.hp-lang-button[aria-pressed=true] { background: var(--hp-soft); color: var(--hp-text); font-weight: 600; }

.hp-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 12px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hp-main:focus { outline: none; }
.hp-nav { width: 100%; max-width: 720px; display: flex; flex-wrap: wrap; gap: 6px; }
.hp-nav a { padding: 8px 14px; border-radius: 9px; color: var(--hp-muted); text-decoration: none; }
.hp-nav a[aria-current=page] { background: var(--hp-soft); color: var(--hp-text); font-weight: 600; }
.hp-card { width: 100%; max-width: 440px; padding: 28px; border: 1px solid var(--hp-line); border-radius: 16px; background: var(--hp-panel); overflow-wrap: anywhere; }
.hp-card.hp-wide { max-width: 720px; }
.hp-danger-zone { border-color: color-mix(in srgb, var(--hp-danger) 45%, var(--hp-line)); }
.hp h1 { margin: 0 0 8px; font: 400 clamp(1.6rem, 4vw, 2.1rem)/1.2 Georgia, serif; letter-spacing: -.02em; }
.hp h2 { margin: 0 0 8px; font: 400 1.3rem/1.3 Georgia, serif; }
.hp p { margin: 0 0 12px; }
.hp a { color: var(--hp-accent); }
.hp-lead, .hp-meta { color: var(--hp-muted); }

.hp-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.hp-field { display: flex; flex-direction: column; gap: 6px; }
.hp-field label { font-size: .85rem; font-weight: 600; }
.hp-field :is(input, select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hp-line); border-radius: 9px; background: var(--hp-panel); color: var(--hp-text); font: inherit; font-size: 1rem; }
.hp-field textarea { resize: vertical; line-height: 1.45; }
.hp-field input[type=file] { padding: 8px; }
.hp-field :is(input, select, textarea):focus-visible { border-color: var(--hp-accent); }
.hp [aria-invalid=true] { border-color: var(--hp-danger); outline-color: var(--hp-danger); }
.hp .hp-hint { margin: 0; color: var(--hp-muted); font-size: .8rem; }
.hp-check { display: flex; align-items: flex-start; gap: 10px; }
.hp-check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--hp-accent); }
.hp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--hp-line); border-radius: 9px; background: var(--hp-soft); color: var(--hp-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.hp-button:hover { border-color: var(--hp-accent); }
.hp-button:disabled { opacity: .6; cursor: wait; }
.hp a.hp-primary, .hp-primary { background: var(--hp-accent); border-color: var(--hp-accent); color: var(--hp-on-accent); }
.hp-danger { background: transparent; border-color: var(--hp-danger); color: var(--hp-danger); }
.hp-danger:hover { border-color: var(--hp-danger); background: color-mix(in srgb, var(--hp-danger) 10%, transparent); }
.hp-inline-form { margin: 8px 0 12px; }
.hp .hp-links { margin: 14px 0 0; color: var(--hp-muted); font-size: .9rem; }

.hp .hp-status { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--hp-accent); border-radius: 6px; background: var(--hp-soft); white-space: pre-wrap; }
.hp-status:focus { outline: none; }
.hp .hp-status-error { border-left-color: var(--hp-danger); color: var(--hp-danger); background: color-mix(in srgb, var(--hp-danger) 10%, var(--hp-panel)); }
.hp .hp-status-ok { border-left-color: var(--hp-good); color: var(--hp-good); }
.hp-done, .hp-panel { margin-top: 8px; padding: 16px 18px; border-radius: 12px; background: var(--hp-soft); }
.hp-done:focus { outline: none; }
.hp-done > :last-child, .hp-panel > :last-child { margin-bottom: 0; }
.hp-panel-ready { border-left: 3px solid var(--hp-good); }
.hp-panel-attention { border-left: 3px solid var(--hp-warn); }
.hp-panel + .hp-panel, .hp-section { margin-top: 18px; }
.hp-report { margin: 0; padding-left: 20px; }
.hp-report li + li { margin-top: 4px; }
.hp-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hp-connection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--hp-line); border-radius: 12px; }
.hp-connection-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-connection-text strong { font-weight: 600; }
.hp-connection-text span { color: var(--hp-muted); font-size: .85rem; }
.hp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0 0; }
.hp-facts dt { color: var(--hp-muted); }
.hp-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Product pages: create post, posts, messages, dashboard. */
.hp h3 { margin: 14px 0 6px; font-size: .9rem; font-weight: 650; }
.hp h2.hp-subtitle { margin: 14px 0 6px; font-size: 1.05rem; }
.hp-fieldset { min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--hp-line); display: flex; flex-direction: column; gap: 12px; }
.hp-fieldset legend { padding: 0 0 6px; font: 400 1.15rem/1.3 Georgia, serif; }
.hp-counter { text-align: right; font-variant-numeric: tabular-nums; }
.hp .hp-counter-over { color: var(--hp-danger); }
.hp-upload { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--hp-soft); }
.hp-upload label { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.hp-upload progress { width: 100%; height: 12px; accent-color: var(--hp-accent); }
.hp-upload .hp-button { align-self: flex-start; }
.hp-preview { display: flex; flex-direction: column; gap: 8px; }
.hp-preview video { display: block; width: 100%; max-height: 440px; border-radius: 12px; background: #000; }
.hp-preview .hp-facts { margin-top: 4px; }
.hp .hp-preview p { margin: 4px 0 0; }
.hp-eligibility, .hp-choices, .hp-targets, .hp-actions, .hp-attempts ul, .hp-messages { list-style: none; margin: 0; padding: 0; }
.hp-eligibility { display: flex; flex-direction: column; gap: 4px; }
.hp-eligibility li { display: flex; gap: 8px; }
.hp-eligibility li::before { flex: none; width: 1.1em; font-weight: 700; }
.hp-eligibility li[data-tone=good]::before { content: '\2713'; content: '\2713' / ''; color: var(--hp-good); }
.hp-eligibility li[data-tone=danger]::before { content: '\2715'; content: '\2715' / ''; color: var(--hp-danger); }
.hp-choices { display: flex; flex-direction: column; gap: 8px; }
.hp-choice { padding: 10px 12px; border: 1px solid var(--hp-line); border-radius: 10px; cursor: pointer; }
.hp-choice:has(input:checked) { border-color: var(--hp-accent); background: var(--hp-soft); }
.hp-choice:has(input:disabled) { cursor: not-allowed; opacity: .72; }
.hp-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-choice-text span { color: var(--hp-muted); font-size: .85rem; }
.hp .hp-reason { color: var(--hp-warn); }

.hp-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hp .hp-heading-row h1 { margin: 0; }
.hp-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.hp-grow { flex: 1 1 240px; }
.hp-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--hp-soft); }
.hp-tab { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--hp-muted); font: inherit; font-weight: 600; cursor: pointer; }
.hp-tab[aria-selected=true] { background: var(--hp-panel); color: var(--hp-text); box-shadow: 0 1px 2px color-mix(in srgb, var(--hp-text) 18%, transparent); }
.hp-tabpanel { border-radius: 6px; }
.hp .hp-tabpanel > .hp-hint { margin-top: 10px; }
.hp-post { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--hp-line); border-radius: 12px; }
.hp .hp-post p { margin: 0; }
.hp-post-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hp-post-media { font-weight: 600; overflow-wrap: anywhere; }
.hp .hp-post .hp-post-actions { margin-top: 4px; }
.hp-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--hp-soft); color: var(--hp-muted); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.hp-badge[data-tone=good] { color: var(--hp-good); background: color-mix(in srgb, var(--hp-good) 14%, var(--hp-panel)); }
.hp-badge[data-tone=warn] { color: var(--hp-warn); background: color-mix(in srgb, var(--hp-warn) 16%, var(--hp-panel)); }
.hp-badge[data-tone=danger] { color: var(--hp-danger); background: color-mix(in srgb, var(--hp-danger) 12%, var(--hp-panel)); }
.hp-badge[data-tone=info] { color: var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 12%, var(--hp-panel)); }
.hp-targets { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hp-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 9px; background: var(--hp-soft); }
.hp-target-name { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.hp-target-name span { color: var(--hp-muted); font-size: .82rem; }
.hp-target-link { font-size: .9rem; }
.hp-target-error { flex-basis: 100%; color: var(--hp-danger); font-size: .85rem; }
.hp .hp-note { padding: 10px 12px; border-left: 3px solid var(--hp-warn); border-radius: 6px; background: color-mix(in srgb, var(--hp-warn) 10%, var(--hp-panel)); font-size: .9rem; }

.hp-inbox { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.hp-conversations .hp-list { gap: 8px; }
.hp-conversation { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--hp-line); border-radius: 10px; background: var(--hp-panel); color: var(--hp-text); font: inherit; text-align: start; cursor: pointer; }
.hp-conversation:hover { border-color: var(--hp-accent); }
.hp-conversation[aria-current=true] { border-color: var(--hp-accent); background: var(--hp-soft); }
.hp-conversation-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.hp-conversation-head strong { font-weight: 600; overflow-wrap: anywhere; }
.hp-conversation-excerpt { color: var(--hp-muted); font-size: .88rem; overflow-wrap: anywhere; }
.hp-conversation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hp .hp-conversation-meta .hp-hint { font-size: .8rem; }
.hp-thread { min-width: 0; padding: 14px 16px; border: 1px solid var(--hp-line); border-radius: 12px; }
.hp-thread:focus { outline: none; }
.hp-messages { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.hp-message { max-width: 88%; padding: 8px 12px; border-radius: 12px; background: var(--hp-soft); }
.hp-message-out { align-self: flex-end; background: color-mix(in srgb, var(--hp-accent) 16%, var(--hp-panel)); }
.hp .hp-message .hp-hint { font-size: .75rem; }
.hp .hp-message-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-attempts ul { display: flex; flex-direction: column; gap: 4px; }
.hp-attempts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.hp-attempts .hp-badge { white-space: normal; }

.hp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.hp-tile { padding: 14px 16px; border-radius: 12px; background: var(--hp-soft); }
.hp-tile dt { color: var(--hp-muted); font-size: .85rem; }
.hp-tile dd { margin: 4px 0 0; font: 400 1.6rem/1.2 Georgia, serif; font-variant-numeric: tabular-nums; }
.hp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hp a.hp-action { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--hp-line); border-radius: 12px; color: var(--hp-text); text-decoration: none; }
.hp a.hp-action:hover { border-color: var(--hp-accent); }
.hp-action strong { font-size: 1.05rem; font-weight: 650; }
.hp-action span { color: var(--hp-muted); font-size: .88rem; }
.hp a.hp-action-primary { border-color: var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 10%, var(--hp-panel)); }

.hp-footer { width: 100%; max-width: 1040px; margin: 0 auto; padding: 16px 24px 28px; color: var(--hp-muted); font-size: .78rem; text-align: center; }
.hp-footer p { margin: 0 0 6px; }
.hp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.hp-footer-links a { color: inherit; }

@media (max-width: 720px) {
  .hp-inbox { grid-template-columns: 1fr; }
  .hp-message { max-width: 100%; }
}
@media (max-width: 560px) {
  .hp-header { padding: 14px 16px; }
  .hp-main { padding: 8px 16px 24px; gap: 14px; }
  .hp-card { padding: 20px 16px; border-radius: 14px; }
  .hp-form .hp-button, .hp-done .hp-button { width: 100%; }
  .hp-connection .hp-button, .hp-post-actions .hp-button, .hp-upload .hp-button { width: 100%; }
  .hp-toolbar > .hp-button, .hp-tabs { width: 100%; }
  .hp-tab { flex: 1; }
  .hp-facts { grid-template-columns: 1fr; gap: 2px; }
  .hp-facts dd + dt { margin-top: 8px; }
  .hp-footer { padding: 14px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}