/* Signed-in host workspace typography (owner decision 2026-10-20).
   Page titles and section headings use Nunito Sans 800 at one shared size
   per level. Lilita One is reserved for live, projector, player,
   celebration and the How the Game works key-asset sections, always 400. */
:root {
  --host-page-title-size: clamp(1.75rem, 2.2vw, 2rem);
  --host-section-title-size: clamp(1.125rem, 1.3vw, 1.25rem);
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui h1,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui h2,
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-signin h2 {
  font-family: var(--font-body);
  font-weight: 800;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-page-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--host-page-title-size);
  line-height: 1.15;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .host-section-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--host-section-title-size);
  line-height: 1.3;
}

/* The How the Game works component is the ONE key-asset heading that
   remains Lilita One, and it must stay at the loaded 400 weight. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui .host-how-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  margin: 0 0 22px;
  font-synthesis: none;
}

/* =====================================================================
   Shared host UI roles (owner decision 2026-10-23)

   One form-label role, one help-text role, one empty-state title and
   description role, one character-counter colour and one setup-hint
   style. These rules load after every activity stylesheet and use the
   full host-shell scope so per-activity compaction cannot drift again.
   Values that have no design token are recorded in
   design/ACTIVITY-UI-STANDARD.md section 18.
   ===================================================================== */
:root {
  --host-form-label-size: 1rem;
  --host-form-label-weight: 800;
  --host-form-label-line: 1.3;
  --host-help-size: clamp(14px, 1vw, 19px);
  --host-help-weight: 600;
  --host-help-line: 1.4;
  --host-muted: rgba(32, 36, 44, 0.62);
  --host-empty-title-size: 1.05rem;
  --host-empty-desc-size: var(--host-help-size);
  --host-counter-color: var(--host-muted);
  --host-hint-gap: 56px;
}

html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(
  .db-field > span:not(.sr-only),
  .pd-label,
  .gtp-label,
  .qs-field-label,
  .rs-field-label,
  .pd-settings-row label
) {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: var(--host-form-label-size);
  font-weight: var(--host-form-label-weight);
  line-height: var(--host-form-label-line);
  letter-spacing: 0;
  text-transform: none;
  color: #20242C;
}

html body.host :is(
  .pd-help,
  .gtp-hint,
  .qs-hint,
  .rs-card-hint,
  .db-photo-title-help,
  .pd-title-edit-help,
  .db-plan-note,
  .host-field-hint,
  .pm-interval-note,
  .pd-toolbar-note
) {
  font-family: var(--font-body);
  font-size: var(--host-help-size);
  font-weight: var(--host-help-weight);
  line-height: var(--host-help-line);
  color: var(--host-muted);
}

/* One character-counter colour. The over-limit state remains danger. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(
  .gtp-count:not(.gtp-count-over),
  .qs-count:not(.qs-count-over),
  #db-photo-title-count
) {
  color: var(--host-counter-color);
}

/* Setup hints: one colour, one 56px visible gap from the How card. The
   How assets contribute their own bottom margin; zero it here so the
   gap comes from the hint rule at every width. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(
  .quiz-how,
  .gtp-how,
  .reflex-how
) {
  margin-bottom: 0;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(
  .qz-setup-hint,
  .gtp-setup-hint,
  .rs-hint,
  .pd-setup-hint
) {
  color: var(--host-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}
/* Parent gaps: Quiz 12px, Reflex 9.6px, Photo 17.6px. GTP is a block. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .qz-setup-hint { margin-top: calc(var(--host-hint-gap) - 12px); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .rs-hint { margin-top: calc(var(--host-hint-gap) - 9.6px); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-setup-hint { margin-top: calc(var(--host-hint-gap) - 17.6px); }
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .gtp-setup-hint { margin-top: var(--host-hint-gap); }

/* One empty-state title and description role. */
html body.host :is(.empty-state-title, .pd-empty strong, .mod-empty strong) {
  display: block;
  font-family: var(--font-body);
  font-size: var(--host-empty-title-size);
  font-weight: 800;
  line-height: 1.25;
  color: #20242C;
}
html body.host :is(.empty-state-desc, .pd-empty span, .mod-empty span) {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--host-empty-desc-size);
  font-weight: var(--host-help-weight);
  line-height: var(--host-help-line);
  color: var(--host-muted);
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-empty {
  font-family: var(--font-body);
  font-size: var(--host-empty-desc-size);
  font-weight: var(--host-help-weight);
  line-height: var(--host-help-line);
  color: var(--host-muted);
}

/* Host card and row metadata sit on the same 14px floor as help text. */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(.db-card-meta, .db-row-sub) {
  font-size: 14px;
}

/* Save and Exit share the approved button-label size. */
html body.host.db-shell:has(.db-basics-card):not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(#db-save, #db-exit) {
  font-size: 1.05rem;
}

/* Photo Dedication lockup and How-panel radius (owner decision U-05). */
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-how-panel {
  border-radius: 24px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-setup-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin: 6px 0 22px;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-setup-icon {
  width: clamp(44px, 4vw, 64px);
  height: clamp(44px, 4vw, 64px);
  object-fit: contain;
  display: block;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-setup-title {
  display: inline-block;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--host-section-title-size);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: normal;
  color: #20242C;
}
html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .pd-setup-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--host-muted);
}
html body.host.db-shell:has(.pd-setup-head):not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-sub {
  display: none;
}

/* Phone host card actions and three-dot controls are real 44px targets.
   Desktop keeps the existing 40px treatment. */
@media (max-width: 640px) {
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) :is(.db-card-actions .btn, .db-row-actions .btn) {
    min-height: 44px;
  }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  html body.host.db-shell:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-more-menu button {
    min-height: 44px;
  }
}