/* =========================================================
   TREEHOUSE UNIFIED UI CONTRACT

   Final geometry layer for the member app and Admin Console.
   Existing application behavior remains authoritative. This
   file standardizes spacing, density, shape, type, controls,
   scroll ownership, and responsive surface containment.
   ========================================================= */

:root {
  /* Text inks are distinct from decorative gold/green fills. These remain
     readable on paper, beige data cards, and the light green selected state. */
  --color-text-muted: #625b50;
  --color-text-subtle: #6d6254;
  --color-accent-strong: #80551e;
  --ui-ink-accent: #80551e;
  --ui-ink-on-gold: #10251c;
  --wa-form-control-placeholder-color: var(--color-text-muted);
  --ui-control-height: 2.75rem;
  --ui-control-height-compact: 2.75rem;
  --ui-control-padding-inline: 0.9rem;
  --ui-radius-control: 0.75rem;
  --ui-radius-card: 1rem;
  --ui-radius-shell: 1.25rem;
  --ui-gap-xs: 0.375rem;
  --ui-gap-sm: 0.625rem;
  --ui-gap-md: 0.875rem;
  --ui-gap-lg: 1.125rem;
  --ui-card-padding: clamp(0.875rem, 1.6vw, 1.125rem);
  --ui-panel-padding: clamp(1rem, 2vw, 1.35rem);
  --ui-border: 1px solid var(--color-border);
  --ui-shadow-card: 0 0.35rem 1.1rem rgba(23, 56, 45, 0.045);
  --ui-shadow-shell: 0 1.1rem 3.5rem rgba(23, 56, 45, 0.15);
  --ui-app-header-height: 4.75rem;
  --ui-search-sticky-top: var(--ui-app-header-height);
  --ui-sticky-surface: rgba(255, 250, 240, 0.985);
  --ui-hit-target-min: 2.75rem;
  --ui-component-min: 15rem;
  --ui-card-preferred: 30rem;
  --ui-content-readable: 68rem;
  --ui-copy-measure: 72ch;
  --ui-data-item-min: 7.5rem;
  --ui-data-item-preferred: 10rem;
  --ui-data-item-max: 18rem;
  --ui-data-label-min: 5.5rem;
  --ui-heading-copy-min: 13rem;
  --ui-pill-height: 1.75rem;
  --ui-pill-padding-inline: 0.625rem;
  --ui-pill-gap: 0.3rem;
  --ui-overlay-inset: 1rem;
  --ui-overlay-max-height: calc(100dvh - (2 * var(--ui-overlay-inset)));

  /* Existing layout variables now resolve to the same system. */
  --control-height: var(--ui-control-height);
  --control-height-lg: 3rem;
  --panel-padding: var(--ui-panel-padding);
  --radius-md: var(--ui-radius-control);
  --radius-lg: var(--ui-radius-card);
  --radius-xl: var(--ui-radius-shell);
}

/* Light surfaces share the same text hierarchy. Keep Premium's cream/gold
   inks on its dark surfaces; never reuse those inks on a light card. */
:is(input, textarea)::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.account-profile-section-heading small,
.cigar-detail > .eyebrow,
.community-workspace .eyebrow,
.recommendation-panel > .eyebrow {
  color: var(--ui-ink-accent);
}

.collection-tool-primary {
  color: var(--ui-ink-on-gold);
}

body.admin-page {
  --color-text-muted: #625b50;
  --color-text-subtle: #6d6254;
  --color-accent-strong: var(--ui-ink-accent);
}

.admin-main :is(.admin-eyebrow, .admin-section-label) {
  color: var(--ui-ink-accent);
}

.admin-page input::placeholder {
  color: var(--color-text-muted);
}

#manageCigarOverlay {
  --dossier-muted: var(--color-text-muted);
  --dossier-dim: var(--color-text-subtle);
  --dossier-gold-bright: var(--ui-ink-accent);
  --dossier-green: var(--quiet-forest);
}

#manageCigarOverlay :is(
  .form-field label, fieldset legend, .dossier-state-value,
  .storage-location-environment-value, .storage-summary-value
) {
  color: var(--dossier-text);
}

#manageCigarOverlay .manage-dossier-copy .eyebrow,
#manageCigarOverlay .eyebrow {
  color: var(--ui-ink-accent);
}

#manageCigarOverlay :is(
  .storage-reading-status.is-good, .aging-plan-card > .manage-overview-primary,
  .aging-progress-complete .aging-progress-header strong, .manage-photo-primary-badge
) {
  color: var(--quiet-forest-deep);
}

#manageCigarOverlay .storage-reading-status.needs-attention {
  color: var(--color-danger);
}

/* Every flexible child must be allowed to shrink before its parent overflows. */
:where(main, section, article, header, footer, nav, form, fieldset, div, ul, li) {
  min-width: 0;
}

:where(p, h1, h2, h3, h4, h5, h6, label, span, strong) {
  overflow-wrap: break-word;
}

/* Product headings never break inside a word. Their owning component must
   change composition before the readable minimum is violated. */
:where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"]
) {
  min-inline-size: var(--ui-hit-target-min);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-control);
}

:where(
  .primary-action,
  .secondary-action,
  .admin-primary-action,
  .admin-secondary-action,
  .collection-tool,
  .collection-view-control
) {
  min-height: var(--ui-control-height);
  padding-inline: var(--ui-control-padding-inline);
  border-radius: var(--ui-radius-control);
  font-size: 0.9375rem;
  line-height: 1.15;
}

:where(
  .primary-action,
  .secondary-action,
  .admin-primary-action,
  .admin-secondary-action,
  .collection-tool,
  .collection-view-control,
  wa-button
):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

:where(.primary-action, .admin-primary-action) {
  box-shadow: 0 0.25rem 0.65rem rgba(100, 70, 30, 0.1);
}

:where(.icon-button, .cigar-detail-close, .community-workspace-close) {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* Every overlay close action uses one Quiet Treehouse control. Individual
   screens continue to own placement; this shared component owns color,
   geometry, interaction, and contrast. */
:where(
  .cigar-detail-close,
  .collection-workspace-close,
  .community-workspace-close,
  .icon-button[aria-label^="Close"]
) {
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--quiet-forest) 32%, transparent) !important;
  border-radius: 50% !important;
  background: var(--quiet-forest-soft) !important;
  color: var(--quiet-forest-deep) !important;
  box-shadow: 0 0.2rem 0.55rem rgba(23, 56, 45, 0.08);
  line-height: 1;
}

:where(
  .cigar-detail-close,
  .collection-workspace-close,
  .community-workspace-close,
  .icon-button[aria-label^="Close"]
):is(:hover, :focus-visible) {
  border-color: var(--quiet-forest) !important;
  background: var(--quiet-forest) !important;
  color: var(--color-surface) !important;
  outline: 2px solid color-mix(in srgb, var(--quiet-forest) 24%, transparent);
  outline-offset: 2px;
}

:where(.eyebrow, .admin-eyebrow, .admin-section-label, .collection-history-eyebrow) {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
}

:where(.form-help, .manage-overview-meta, .admin-status, .auth-field-help) {
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Shared overlay shells ---------------------------------- */
@media (min-width: 1101px) {
  .cigar-detail-overlay:not(.camera-capture-overlay) {
    padding: var(--ui-overlay-inset);
  }

  .cigar-detail-overlay:not(.camera-capture-overlay) > :is(
    .cigar-detail,
    .own-cigar-form,
    .account-profile,
    .community-workspace,
    .hunting-list,
    .recommendation-panel,
    .help-guide,
    .manage-cigar
  ) {
    min-height: 0;
    max-height: var(--ui-overlay-max-height);
  }
}

:where(
  .cigar-detail,
  .own-cigar-form,
  .account-profile,
  .community-workspace,
  .hunting-list,
  .help-guide,
  .recommendation-panel
) {
  border-radius: var(--ui-radius-shell);
  box-shadow: var(--ui-shadow-shell);
}

:where(
  .account-profile,
  .community-workspace,
  .hunting-list,
  .help-guide,
  .recommendation-panel
) :where(section, article, form) {
  min-width: 0;
}

/* Main collection ---------------------------------------- */
.collection-content {
  gap: var(--ui-gap-md);
  padding: var(--ui-card-padding);
  border-radius: var(--ui-radius-card);
}

.collection-snapshot-item {
  min-height: 4.25rem;
  padding: var(--ui-card-padding);
}

.collection-destination-control {
  min-height: 4.25rem;
  padding: var(--ui-card-padding);
  border-radius: var(--ui-radius-card);
}

/* Cigar Dossier shell ------------------------------------ */
#manageCigarOverlay {
  --dossier-radius: var(--ui-radius-card);
  --dossier-radius-sm: var(--ui-radius-control);
  --dossier-gap-mobile: var(--ui-gap-sm);
  --dossier-gap-tablet: var(--ui-gap-md);
  --dossier-gap-desktop: var(--ui-gap-md);
}

#manageCigarOverlay .manage-cigar {
  width: min(96vw, 72rem);
  height: min(50rem, calc(100dvh - 2rem));
  border-radius: var(--ui-radius-shell);
  box-shadow: var(--ui-shadow-shell);
}

#manageCigarOverlay .manage-dossier-header {
  gap: var(--ui-gap-md);
  padding: 0.875rem 3.75rem 0.875rem 1rem;
}

#manageCigarOverlay .manage-dossier-identity {
  gap: 0.75rem;
}

#manageCigarOverlay .manage-dossier-photo {
  flex-basis: 4rem;
  width: 4rem;
  height: 4rem;
  border-radius: 0.875rem;
  font-size: 1.5rem;
}

#manageCigarOverlay .manage-dossier-copy h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
}

#manageCigarOverlay .manage-dossier-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-gap-xs);
}

#manageCigarOverlay .manage-dossier-quick-item {
  display: grid;
  grid-template-rows: minmax(1.25rem, auto) minmax(2rem, auto);
  place-items: center;
  min-width: 4.75rem;
  min-height: 4.25rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--ui-radius-control);
  text-align: center;
}

#manageCigarOverlay .manage-dossier-quick-item strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

#manageCigarOverlay .manage-dossier-quick-item span {
  align-self: start;
  font-size: 0.63rem;
  line-height: 1.15;
}

#manageCigarOverlay .manage-tabs {
  min-height: 3.5rem;
}

#manageCigarOverlay .manage-tab {
  min-height: 3.25rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.75rem;
}

#manageCigarOverlay .manage-content {
  padding: var(--ui-panel-padding);
  scrollbar-gutter: auto;
}

#manageCigarOverlay :is(
  .manage-overview-card,
  .manage-summary-card,
  .manage-panel,
  .dossier-current-state,
  .dossier-action,
  .manage-cigar-details-card,
  .inventory-quantity-card,
  .inventory-history-card,
  .storage-latest-card,
  .storage-preferences-card,
  .storage-location-card,
  .aging-plan-card,
  .notes-latest-card,
  .notes-history-card,
  .manage-photo,
  .manage-photo-primary-section,
  .manage-photo-gallery-item,
  .storage-area-snapshot,
  .storage-area-list-section,
  .storage-area-card,
  .storage-area-current-panel,
  .storage-area-environment-panel,
  .storage-area-target-panel,
  .storage-area-detail-contents,
  .storage-area-detail-activity,
  .storage-area-create-section
) {
  border: var(--ui-border);
  border-color: var(--dossier-border);
  border-radius: var(--ui-radius-card);
  background: rgba(255, 253, 247, 0.84);
  box-shadow: var(--ui-shadow-card);
}

#manageCigarOverlay :is(
  .manage-overview-card,
  .manage-summary-card,
  .manage-panel,
  .dossier-current-state,
  .dossier-action,
  .manage-cigar-details-card,
  .inventory-quantity-card,
  .inventory-history-card,
  .storage-latest-card,
  .storage-preferences-card,
  .storage-location-card,
  .aging-plan-card,
  .notes-latest-card,
  .notes-history-card,
  .manage-photo,
  .storage-area-snapshot,
  .storage-area-list-section,
  .storage-area-card,
  .storage-area-current-panel,
  .storage-area-environment-panel,
  .storage-area-target-panel,
  .storage-area-detail-contents,
  .storage-area-detail-activity,
  .storage-area-create-section
) {
  padding: var(--ui-card-padding);
}

#manageCigarOverlay :is(
  .manage-photo,
  .manage-notes,
  .notes-dashboard,
  .inventory-dashboard,
  .aging-dashboard,
  .storage-dashboard,
  .storage-area-manager,
  .storage-area-detail,
  .storage-area-detail-workspace,
  .storage-area-list-section,
  .storage-area-snapshot
) {
  gap: var(--ui-gap-md);
}

#manageCigarOverlay :where(h3, h4, h5, p) {
  margin-block-start: 0;
}

#manageCigarOverlay .manage-photo > h3 {
  margin: 0;
  font-size: 1.45rem;
}

#manageCigarOverlay .manage-photo > h4 {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
}

#manageCigarOverlay .manage-photo-primary-section {
  gap: var(--ui-gap-sm);
  padding: 0.75rem;
}

#manageCigarOverlay .manage-photo-primary-section > .manage-photo-primary {
  height: clamp(12rem, 34vh, 22rem);
  border-radius: 0.75rem;
}

#manageCigarOverlay .manage-photo-gallery {
  gap: var(--ui-gap-sm);
}

#manageCigarOverlay .manage-photo-actions-bar,
#manageCigarOverlay :is(.notes-form-actions, .storage-location-actions, .storage-area-card-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-gap-sm);
}

#manageCigarOverlay .manage-photo-actions-bar {
  padding-top: 0.125rem;
}

#manageCigarOverlay .manage-photo-actions-bar > :is(button, .primary-action, .secondary-action) {
  flex: 0 1 auto;
  width: auto !important;
}

#manageCigarOverlay .manage-photo-primary-badge {
  border-color: rgba(36, 78, 62, 0.35);
  background: #dfe9de;
  color: #244e3e;
}

#manageCigarOverlay .manage-overview-meta:empty {
  display: none;
}

#manageCigarOverlay .storage-area-snapshot-stats,
#manageCigarOverlay .storage-area-detail-summary,
#manageCigarOverlay .storage-area-detail-values,
#manageCigarOverlay .storage-area-target-values {
  gap: var(--ui-gap-sm);
}

#manageCigarOverlay .storage-area-snapshot-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#manageCigarOverlay .storage-area-snapshot-stat {
  min-width: 0;
  display: grid;
  place-content: center;
  gap: 0.2rem;
  text-align: center;
  white-space: normal;
}

#manageCigarOverlay .storage-area-snapshot-stat > :is(strong, span) {
  min-width: 0;
  white-space: normal;
}

#manageCigarOverlay .storage-area-card {
  gap: 0.625rem;
  padding: 0.875rem;
}

#manageCigarOverlay .storage-area-card :where(h3, p) {
  margin-block: 0;
}

#manageCigarOverlay .storage-area-card-summary,
#manageCigarOverlay .storage-area-card-layout {
  gap: 0.625rem;
}

#manageCigarOverlay .storage-area-card-environment {
  gap: 0.5rem;
}

#manageCigarOverlay .storage-area-environment-group {
  padding: 0.625rem;
  border: 1px solid var(--dossier-border-soft);
  border-radius: var(--ui-radius-control);
  background: rgba(243, 236, 223, 0.55);
}

#manageCigarOverlay .storage-area-card-actions > * {
  min-height: var(--ui-control-height-compact);
}

#manageCigarOverlay :is(
  .storage-area-snapshot-stat,
  .storage-area-detail-summary-item,
  .storage-area-detail-value,
  .storage-area-target-group,
  .storage-stat-card,
  .storage-current-value
) {
  min-height: 3.25rem;
  padding: 0.75rem;
  border-radius: var(--ui-radius-control);
}

#manageCigarOverlay :is(input, select, textarea) {
  min-height: var(--ui-control-height);
  padding: 0.65rem 0.75rem;
  border-radius: var(--ui-radius-control);
}

#manageCigarOverlay textarea {
  min-height: 7rem;
}

/* Account, community, and focused workspaces ------------- */
:where(.account-profile, .community-workspace, .hunting-list, .recommendation-panel, .help-guide) {
  padding: var(--ui-panel-padding);
}

/* Community already owns an internal header and body. Padding the outer shell
   creates a second frame that steals the laptop viewport from its real scroll
   panel. */
.community-workspace {
  padding: 0;
}

/* Simple dialogs own their vertical scroll. Workspaces with persistent
   headers (Community and Dossier) keep their established internal owner. */
:where(.account-profile, .hunting-list, .recommendation-panel, .help-guide) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

@media (min-width: 1101px) and (max-height: 850px) {
  :root {
    --ui-overlay-inset: 0.75rem;
  }
}

:where(.account-profile, .community-workspace, .hunting-list, .recommendation-panel, .help-guide)
  :where(.account-profile-section, .community-panel, .trade-panel, .recommendation-result, article) {
  border-radius: var(--ui-radius-card);
}

.community-tabs,
.panel-tabs {
  gap: var(--ui-gap-xs);
}

.community-tab,
.panel-tab {
  min-height: var(--ui-control-height-compact);
  padding: 0.5rem 0.75rem;
  border-radius: var(--ui-radius-control);
}

/* Member surfaces use compact rows and calm accents. Density comes from
   removing spare framing, never shrinking the touch target or adding a
   second scroll owner. The existing Premium summary colors retain priority. */
.account-profile-header {
  gap: var(--ui-gap-md);
  padding-bottom: 0.8rem;
  border-bottom-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.account-profile-region-heading {
  gap: var(--ui-gap-sm);
  margin-block: 1rem 0.6rem;
}

.account-profile-region-heading h3 {
  font-size: 1.2rem;
}

.account-profile-form {
  gap: var(--ui-gap-sm);
  padding: var(--ui-card-padding);
  background: color-mix(in srgb, var(--color-surface-soft) 38%, var(--color-surface));
}

.account-profile-form textarea {
  min-height: 6rem;
  height: 6rem;
}

.account-profile-form .form-field {
  margin-bottom: 0;
}

.account-profile-form .cigar-detail-actions,
#ownCigarForm > .cigar-detail-actions {
  flex-direction: row;
  gap: 0.5rem;
}

:is(.account-profile-form, #ownCigarForm) > .cigar-detail-actions > button {
  flex: 0 1 auto;
  width: auto;
  min-height: var(--ui-control-height);
  padding-block: 0.55rem;
}

.account-profile > :is(.account-profile-header, .account-profile-region-heading) .eyebrow {
  color: var(--quiet-forest);
}

.account-profile-visibility {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-control);
  cursor: pointer;
}

:is(.account-profile-visibility, .member-discovery-exact) input {
  accent-color: var(--quiet-forest-deep);
}

.account-profile-settings-grid,
.account-profile-sections {
  gap: 0.5rem;
}

.account-profile-section > summary {
  min-height: 3.5rem;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
}

.account-profile-section-heading {
  gap: 0.2rem;
}

.account-profile-section-heading small {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}

.account-profile-section-heading > span {
  font-size: 1.05rem;
  line-height: 1.2;
}

.account-profile-section-body {
  gap: var(--ui-gap-sm);
  padding: 0 0.8rem 0.8rem;
}

.community-tab.is-active {
  background: var(--quiet-forest-soft);
  color: var(--quiet-forest-deep);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.member-profile-avatar {
  border-color: color-mix(in srgb, var(--quiet-forest) 28%, transparent);
  background: var(--quiet-forest-soft);
  color: var(--quiet-forest-deep);
}

:is(.own-cigar-form, .hunting-list) > .eyebrow {
  padding-inline-start: 0.6rem;
  border-inline-start: 3px solid var(--color-accent);
  color: var(--quiet-forest);
}

.own-cigar-form > .own-cigar-intro {
  margin-block: 0 0.8rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* A single reading flow on phone/tablet/laptop; the wider desktop may keep
   its two-column summary. Form fields can still share a useful row. */
@media (max-width: 1199px) {
  .account-profile-settings-grid,
  .account-profile-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-section-heading {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
  }

  .account-profile-section-heading small {
    flex: 0 0 6.5rem;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  :is(.account-profile-form, #ownCigarForm) > .cigar-detail-actions > button {
    flex: 1 1 auto;
  }

  .account-profile-header {
    padding-bottom: 0.65rem;
  }

  .account-profile-identity {
    margin-top: 0.4rem;
    padding-block: 0;
  }

  .account-profile-intro,
  .account-profile-region-heading > p {
    font-size: 0.8rem;
  }

  .account-profile-region-heading {
    margin-top: 0.8rem;
  }

  .account-profile-section-heading {
    flex-direction: column;
    gap: 0.1rem;
  }

  .account-profile-section-heading small {
    flex-basis: auto;
  }

  .account-profile-section > summary > strong {
    max-width: 38%;
    font-size: 0.72rem;
  }
}

/* Search surfaces ----------------------------------------
   Each search stays attached to the top of its real scroll owner. The
   opaque surface prevents rows and cards from showing through while the
   user scrolls, regardless of viewport size or orientation. */
.cigar-search-section {
  position: sticky;
  top: var(--ui-search-sticky-top);
  z-index: 40;
  isolation: isolate;
  padding-block: 0.5rem;
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}

.cigar-search-section .cigar-search-panel {
  background: var(--ui-sticky-surface);
}

#moderatorCatalogSearch,
.community-directory-search,
body.admin-page .admin-results-pane > .admin-search {
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  background: var(--ui-sticky-surface);
  box-shadow: 0 1px 0 var(--color-border);
}

#moderatorCatalogSearch {
  margin-inline: calc(-1 * var(--ui-panel-padding));
  padding: 0.5rem var(--ui-panel-padding);
}

.moderator-studio-header > div { min-width: 0; }

.moderator-studio-body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: var(--ui-gap-md) var(--ui-panel-padding) var(--ui-panel-padding);
}

.moderator-studio-toolbar {
  position: sticky;
  top: calc(-1 * var(--ui-gap-md));
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(15rem, 1fr);
  align-items: end;
  gap: var(--ui-gap-md);
  margin: calc(-1 * var(--ui-gap-md)) calc(-1 * var(--ui-panel-padding)) 0;
  padding: var(--ui-gap-md) var(--ui-panel-padding);
  border-bottom: var(--ui-border);
  background: var(--ui-sticky-surface);
}

#moderatorCatalogSearch {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.moderator-search-label {
  display: block;
  margin-bottom: var(--ui-gap-xs);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.moderator-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-gap-xs);
}

.moderator-scope-note {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-gap-xs);
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.moderator-scope-note [data-icon] { flex: 0 0 auto; color: var(--color-accent); }

.moderator-catalog-section { min-width: 0; padding-top: var(--ui-gap-md); }

.moderator-catalog-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-gap-sm);
  margin-bottom: var(--ui-gap-sm);
}

.moderator-catalog-heading { margin: 0; }
.moderator-catalog-summary .form-help { margin: 0; text-align: right; }

.moderator-catalog-results {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--ui-gap-sm);
}

.moderator-catalog-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  grid-template-areas: "image identity" "actions actions";
  gap: var(--ui-gap-sm);
  padding: var(--ui-card-padding);
  border: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--color-surface);
}

.moderator-catalog-image {
  grid-area: image;
  width: 4.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--ui-radius-control);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.moderator-catalog-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.moderator-catalog-identity { grid-area: identity; min-width: 0; }
.moderator-catalog-identity h3 { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.moderator-catalog-identity p { margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.4; overflow-wrap: anywhere; }
.moderator-catalog-provenance { color: var(--color-accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.moderator-catalog-actions { grid-area: actions; display: flex; justify-content: flex-end; padding-top: var(--ui-gap-xs); border-top: var(--ui-border); }
.moderator-catalog-actions button { min-height: var(--ui-hit-target-min); }

/* Public profile facts use the same compact semantic marks as the rest of the
   Quiet system. The server returns labels and counts only; private Collection
   records never enter this surface. */
.member-profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-xs);
}

/* Sharing is a compact, explicit opt-in list, not a settings dashboard. */
.profile-sharing-options {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: var(--ui-gap-sm);
  border: var(--ui-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--ui-radius-control);
  background: var(--color-surface);
  display: grid;
  gap: var(--ui-gap-xs);
}
.profile-sharing-options legend { padding: 0 0.35rem; font-weight: 750; font-size: 0.88rem; }
.profile-sharing-options > p { margin: 0 0 0.35rem; }
.profile-sharing-options label { display: flex; align-items: center; gap: 0.65rem; min-height: max(44px, var(--ui-hit-target-min)); padding: 0.35rem; cursor: pointer; border-radius: var(--ui-radius-control); }
.profile-sharing-options label:has(input:checked) { background: var(--color-surface-soft); }
.profile-sharing-options input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; accent-color: var(--quiet-forest-deep); }
.profile-sharing-options span { min-width: 0; display: grid; gap: 0.12rem; overflow-wrap: anywhere; }
.profile-sharing-options strong { font-size: 0.84rem; }
.profile-sharing-options small { color: var(--color-text-muted); font-size: 0.76rem; line-height: 1.35; }
.member-shared-activity { min-width: 0; border-top: var(--ui-border); }
.member-shared-activity summary { min-height: max(44px, var(--ui-hit-target-min)); display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 750; }
.member-shared-activity summary::before { content: "+"; color: var(--color-accent); }
.member-shared-activity details[open] > summary::before { content: "−"; }
.member-shared-activity ul { margin: 0 0 0.5rem; padding-inline-start: 1rem; }
.member-shared-activity li { padding: 0.2rem 0; font-size: 0.76rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.member-shared-empty { font-size: 0.75rem; color: var(--color-text-muted); }

.member-fact-mark {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.48rem;
  border: var(--ui-border);
  border-radius: var(--ui-radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.member-fact-mark svg { flex: 0 0 auto; }
.member-fact-mark.is-moderator { border-color: color-mix(in srgb, var(--quiet-forest) 42%, transparent); background: var(--quiet-forest-soft); color: var(--quiet-forest-deep); }
.member-fact-mark.is-signature { border-color: color-mix(in srgb, var(--quiet-gold, #bc8b42) 38%, transparent); background: color-mix(in srgb, var(--quiet-gold, #bc8b42) 11%, var(--color-surface)); color: var(--quiet-forest-deep); }

@media (max-width: 46rem) {
  .moderator-studio-toolbar { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .moderator-catalog-summary { align-items: flex-start; flex-direction: column; }
  .moderator-catalog-summary .form-help { text-align: left; }
}

@media (max-width: 26.25rem) {
  .moderator-search-controls { grid-template-columns: minmax(0, 1fr); }
  .moderator-search-controls button { width: 100%; }
}

.community-directory-search {
  margin-inline: -0.125rem;
  padding: 0.25rem 0.125rem 0.625rem;
}

body.admin-page .admin-results-pane > .admin-search {
  margin: calc(-1 * var(--ui-card-padding)) calc(-1 * var(--ui-card-padding)) 0;
  padding: var(--ui-card-padding);
}

/* Admin --------------------------------------------------- */
body.admin-page .admin-main {
  padding-block: 1.25rem 2rem;
}

body.admin-page .admin-main > .admin-results-actions {
  gap: var(--ui-gap-xs);
  margin-bottom: 1rem;
  padding: 0.375rem;
  border-radius: var(--ui-radius-card);
}

body.admin-page :is(
  .admin-results-pane,
  .admin-inspector,
  .admin-account-pane,
  .admin-account-summary article,
  .admin-search-demand
) {
  border: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: rgba(255, 250, 240, 0.92);
  box-shadow: var(--ui-shadow-card);
}

body.admin-page :is(
  .admin-inspector,
  .admin-account-pane,
  .admin-search-demand
) {
  padding: var(--ui-panel-padding);
}

body.admin-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: var(--ui-control-height);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--ui-radius-control);
  background: rgba(255, 253, 247, 0.94);
  color: var(--color-text);
}

.admin-search-demand {
  display: grid;
  gap: var(--ui-gap-md);
}

.admin-search-demand[hidden] {
  display: none;
}

.admin-search-demand .admin-results-heading,
.admin-search-demand-controls,
.admin-search-demand-pagination,
.admin-search-demand-item {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-sm);
}

.admin-search-demand .admin-results-heading,
.admin-search-demand-item {
  justify-content: space-between;
}

.admin-search-demand .admin-results-heading :where(h2, p),
.admin-search-demand-item :where(h3, p) {
  margin-block: 0;
}

.admin-search-demand-controls wa-input {
  flex: 1 1 20rem;
}

.admin-search-demand-list {
  display: grid;
  gap: var(--ui-gap-sm);
}

.admin-search-demand-item {
  padding: var(--ui-card-padding);
  border: var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: rgba(243, 236, 223, 0.58);
}

.admin-search-demand-item h3 {
  font-size: 1rem;
}

.admin-search-demand-item p {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.admin-search-demand-item > strong {
  flex: 0 0 auto;
  color: var(--quiet-forest, #244e3e);
}

.admin-search-demand-pagination {
  justify-content: flex-end;
}

/* Responsive contracts ----------------------------------- */
@media (max-width: 700px) {
  :root {
    --ui-panel-padding: 0.875rem;
    --ui-card-padding: 0.8rem;
    --ui-app-header-height: 4rem;
  }

  #manageCigarOverlay.cigar-detail-overlay {
    padding: 0;
  }

  #manageCigarOverlay .manage-cigar {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #manageCigarOverlay .manage-dossier-header {
    padding: max(0.7rem, env(safe-area-inset-top)) 3.5rem 0.7rem 0.75rem;
  }

  #manageCigarOverlay .manage-dossier-photo {
    flex-basis: 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
  }

  #manageCigarOverlay .manage-dossier-quick {
    flex: 1 1 100%;
    width: 100%;
  }

  #manageCigarOverlay .manage-dossier-quick-item {
    flex: 1 1 0;
    min-width: 0;
  }

  #manageCigarOverlay .manage-content {
    padding: 0.75rem 0.75rem max(5.5rem, calc(1rem + env(safe-area-inset-bottom)));
  }

  #manageCigarOverlay .manage-photo-actions-bar > :is(button, .primary-action, .secondary-action) {
    flex: 1 1 9rem;
  }

  .admin-search-demand .admin-results-heading,
  .admin-search-demand-controls,
  .admin-search-demand-item {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-search-demand-controls wa-input,
  .admin-search-demand-controls wa-button,
  .admin-search-demand .admin-results-heading wa-button {
    width: 100%;
  }

  .admin-search-demand-item > strong {
    align-self: flex-start;
  }
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 560px) {
  :root {
    --ui-panel-padding: 0.75rem;
    --ui-card-padding: 0.75rem;
    --ui-search-sticky-top: 0px;
  }

  #manageCigarOverlay.cigar-detail-overlay {
    padding: 0;
  }

  #manageCigarOverlay .manage-cigar {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #manageCigarOverlay .manage-dossier-header {
    padding-block: 0.55rem;
  }

  #manageCigarOverlay .manage-dossier-photo {
    flex-basis: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  #manageCigarOverlay .manage-tabs {
    min-height: 3rem;
  }

  #manageCigarOverlay .manage-tab {
    min-height: 2.75rem;
  }

  #manageCigarOverlay .manage-content {
    padding: 0.625rem 0.75rem max(1rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  wa-button,
  wa-input,
  :where(button, input, select, textarea) {
    transition: none !important;
  }
}

/* Main Collection screen ---------------------------------
   The page is the sole vertical scroll owner. The compact treatment keeps
   collection identity, totals, tools, rows, and navigation readable without
   stacking dashboard-sized cards inside the phone viewport. */
.collection {
  gap: 0.7rem;
  padding-block: 0.7rem 1.25rem;
}

.collection-header {
  padding: 0.25rem 0.2rem 0.15rem;
  border: 0;
}

.collection-heading {
  align-items: center;
  gap: 0.75rem;
}

.collection-heading-copy {
  gap: 0.65rem;
}

.collection-heading h1 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}

.collection-tagline {
  font-size: 0.875rem;
}

.humidor-status {
  flex: 0 0 auto;
  max-width: none;
  padding: 0.3rem 0.6rem;
  border: var(--ui-border);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.72);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
}

.collection-snapshot-list {
  border-radius: 0.8rem;
  box-shadow: none;
}

.collection-snapshot-item {
  min-height: 3.2rem;
  max-width: none;
  padding: 0.5rem 0.75rem;
}

.collection-snapshot-value {
  font-size: 1.2rem;
}

.collection-snapshot-label {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  line-height: 1.15;
}

.collection-content {
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: 0.9rem;
  box-shadow: none;
}

.collection-view-control,
.collection-tool {
  min-height: 2.35rem;
  padding-inline: 0.65rem;
  font-size: 0.8rem;
}

.collection .collection-results {
  max-height: none;
  overflow: visible;
}

.collection-results.is-compact {
  gap: 0.3rem;
  padding: 0.3rem;
  border-color: rgba(54, 66, 56, 0.1);
  border-radius: 0.8rem;
  background: rgba(218, 207, 187, 0.3);
}

.collection-results.is-compact .collection-row {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 1fr) auto minmax(6rem, 0.45fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.7rem;
  box-shadow: none;
}

.collection-row.is-newly-added {
  position: relative;
  z-index: 1;
  border-color: color-mix(in srgb, var(--color-accent) 72%, var(--color-border));
  animation: collection-entry-reveal 2.8s ease-out both;
}

@keyframes collection-entry-reveal {
  0%,
  42% {
    box-shadow:
      0 0 0 0.25rem color-mix(in srgb, var(--color-accent) 28%, transparent),
      0 0.8rem 2rem rgba(18, 52, 39, 0.18);
    background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-raised));
  }

  100% {
    box-shadow: none;
  }
}

/* Add My Own stays fast by default; the complete dossier fields are optional. */
#ownCigarForm {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#ownCigarForm > .form-field,
#ownCigarForm .own-cigar-quick-fields > .form-field,
#ownCigarForm .own-cigar-more-fields > .form-field,
#ownCigarForm .own-cigar-more-fields > .form-row .form-field {
  margin-bottom: 0;
}

.own-cigar-quick-fields {
  display: grid;
  grid-template-columns: minmax(7rem, 0.45fr) minmax(12rem, 1fr);
  gap: 0.75rem;
}

.own-cigar-more {
  overflow: clip;
  border: 1px solid var(--color-border);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--color-surface-soft) 75%, transparent);
}

.own-cigar-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.own-cigar-more > summary::-webkit-details-marker {
  display: none;
}

.own-cigar-more > summary::after {
  content: "+";
  order: 3;
  font-size: 1.25rem;
  line-height: 1;
}

.own-cigar-more[open] > summary::after {
  content: "−";
}

.own-cigar-more > summary span {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.own-cigar-more-fields {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.9rem;
}

@media (max-width: 34rem) {
  .own-cigar-quick-fields {
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-row.is-newly-added {
    animation: none;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent) 24%, transparent);
  }
}

.collection-results.is-compact .collection-row-media {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(174, 125, 49, 0.2);
  background: linear-gradient(145deg, #f1e7d5, #e5d6bd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 0.2rem 0.5rem rgba(29, 54, 43, 0.1);
}

.collection-results.is-compact .collection-row-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
  background: transparent;
  line-height: 1;
}

.collection-results.is-compact .collection-row-identity,
.collection-results.is-compact .collection-row-status,
.collection-results.is-compact .collection-row-storage-desktop {
  min-width: 0;
}

.collection-results.is-compact .collection-row-brand {
  font-size: 0.62rem;
  line-height: 1.15;
  letter-spacing: 0.055em;
}

.collection-results.is-compact .collection-row-name {
  margin-top: 0.08rem;
  font-size: 1rem;
  line-height: 1.15;
}

.collection-results.is-compact .collection-row-status {
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.collection-results.is-compact .collection-row-status > span {
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(36, 78, 62, 0.07);
}

.collection-results.is-compact .collection-row-storage-desktop {
  font-size: 0.75rem;
}

.collection-results.is-compact .collection-row-manage {
  min-width: 2rem;
  min-height: 2.5rem;
  padding: 0.25rem;
}

.cigar-search-section {
  padding-block: 0.35rem;
}

.cigar-search-section .cigar-search-panel {
  gap: 0.45rem;
  padding: 0.55rem;
  border-radius: 0.9rem;
}

.cigar-search-section .catalog-search-field input,
.cigar-search-section .catalog-search-action button {
  min-height: 2.75rem;
  height: 2.75rem;
}

.cigar-search-section .catalog-search-field input {
  padding: 0.65rem 0.8rem;
}

#cigarSearchStatus:empty,
#cigarSearchStatus:empty + .cigar-results-shell:has(#cigarSearchResults:empty) {
  display: none;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  :root {
    --ui-dock-height: calc(4rem + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: var(--ui-dock-height);
  }
  body {
    padding-bottom: calc(4.65rem + env(safe-area-inset-bottom));
  }

  .collection {
    gap: 0.55rem;
    padding-block: 0.5rem 0.9rem;
  }

  .collection-heading,
  .collection-heading-copy {
    align-items: flex-start;
  }

  .collection-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .collection-heading-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.15rem;
  }

  .collection-heading h1 {
    font-size: 1.25rem;
    line-height: 1.1;
  }

  .collection-tagline {
    align-self: center;
    overflow: visible;
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .humidor-status {
    max-width: 9.5rem;
    margin: 0 !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.66rem;
    text-align: left;
  }

  .collection-snapshot-item {
    min-height: 2.75rem;
    padding: 0.35rem 0.3rem;
  }

  .collection-snapshot-value {
    font-size: 1.05rem;
  }

  .collection-snapshot-label {
    font-size: 0.6rem;
  }

  .collection-content {
    gap: 0.4rem;
    padding: 0.35rem;
  }

  .collection-view-control,
  .collection-tool {
    min-height: 2.75rem;
    padding-inline: 0.35rem;
    font-size: 0.72rem;
  }

  .collection-results.is-compact .collection-row {
    grid-template-columns: 2.7rem minmax(0, 1fr) auto 2.75rem;
    gap: 0.5rem;
    min-height: 3.4rem;
    padding: 0.3rem 0.4rem;
  }

  .collection-results.is-compact .collection-row-media {
    width: 2.7rem;
    min-width: 2.7rem;
    height: 2.7rem;
  }

  .collection-results.is-compact .collection-row-identity {
    width: auto;
  }

  .collection-results.is-compact .collection-row-status {
    width: auto;
    font-size: 0.65rem;
  }

  .collection-results.is-compact .collection-row-storage-desktop {
    display: none;
  }

  .collection-results.is-compact .collection-row-manage {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }

  .collection-results.is-compact .collection-row-manage-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .quiet-dock {
    right: 0;
    bottom: 0;
    left: 0;
    min-height: var(--ui-dock-height);
    gap: 0;
    padding: 0.25rem max(0.5rem, env(safe-area-inset-right)) max(0.25rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 0;
    z-index: 2100;
  }

  .cigar-detail-overlay:not(.camera-capture-overlay) {
    bottom: var(--ui-dock-height);
    height: auto;
    max-height: calc(100dvh - var(--ui-dock-height));
    padding-bottom: 0;
  }

  #manageCigarOverlay.cigar-detail-overlay {
    padding: 0;
  }

  .cigar-detail-overlay:not(.camera-capture-overlay) > :is(
    .cigar-detail,
    .own-cigar-form,
    .account-profile,
    .community-workspace,
    .hunting-list,
    .recommendation-panel,
    .help-guide,
    .manage-cigar
  ) {
    height: 100%;
    max-height: 100%;
  }

  :is(
    #collectionRecommendationOverlay,
    #huntingListOverlay,
    #accountProfileOverlay,
    #communityOverlay,
    #moderatorStudioOverlay,
    #helpGuideOverlay,
    #cigarDetailOverlay,
    #ownCigarOverlay,
    #manageCigarOverlay
  ) > :is(
    .cigar-detail,
    .own-cigar-form,
    .account-profile,
    .community-workspace,
    .hunting-list,
    .recommendation-panel,
    .help-guide,
    .manage-cigar
  ) {
    height: 100%;
    max-height: 100%;
  }

  .collection-workspace {
    bottom: var(--ui-dock-height);
    height: auto;
    max-height: calc(100dvh - var(--ui-dock-height));
  }

  .quiet-dock-action {
    min-height: 3rem;
    gap: 0.1rem;
    padding: 0.25rem 0.1rem;
    border-radius: 0.75rem;
    font-size: 0.58rem;
  }

  .quiet-dock-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .quiet-dock-create {
    width: 3rem;
    min-height: 3rem;
    margin-top: -0.7rem;
  }
}

/* =========================================================
   RESPONSIVE DATA + SEMANTIC MARK CONTRACT

   Data groups size from their own inline space, not the viewport. A tile has
   a 7.5rem readable minimum, prefers 10rem, and never stretches beyond the
   owning layout's 18rem measure. When those limits cannot coexist, the group
   changes column count; labels and headings never fracture inside words.

   Semantic marks share one 28px compact geometry. The six product meanings
   are neutral, Premium, Moderator, Community, warning/restricted, and private.
   ========================================================= */

:where(.ui-data-grid, .collection-snapshot-list, .account-community-stats, .account-profile-stats) {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-data-item-min)), 1fr));
  gap: var(--ui-gap-sm);
  width: 100%;
}

:where(.ui-data-item, .collection-snapshot-item, .account-community-stats > div, .account-profile-stats > div) {
  min-width: 0;
  width: 100%;
  max-width: var(--ui-data-item-max);
  justify-self: stretch;
}

:where(.ui-data-item, .collection-snapshot-item, .account-community-stats > div, .account-profile-stats > div)
  > :where(strong, span) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(
  .ui-pill,
  .collection-destination-badge,
  .member-profile-badge,
  .member-fact-mark,
  .admin-result-status,
  .admin-inspector-badges > span,
  .collection-row-status > span,
  .humidor-status,
  .storage-area-status,
  .storage-reading-status,
  .manage-photo-primary-badge
) {
  min-width: 0;
  min-height: var(--ui-pill-height);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-pill-gap);
  padding: 0.2rem var(--ui-pill-padding-inline);
  border: var(--ui-border);
  border-radius: var(--ui-radius-pill, 999px);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.035em;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(.ui-pill, .member-fact-mark) > :where(span, strong) {
  overflow-wrap: normal;
  word-break: normal;
}

.ui-pill.is-premium,
.collection-destination-badge {
  border-color: color-mix(in srgb, var(--quiet-gold, #bc8b42) 48%, transparent);
  background: color-mix(in srgb, var(--quiet-gold, #bc8b42) 12%, var(--color-surface));
  color: var(--quiet-forest-deep);
}

.ui-pill.is-moderator {
  border-color: color-mix(in srgb, var(--quiet-forest) 42%, transparent);
  background: var(--quiet-forest-soft);
  color: var(--quiet-forest-deep);
}

.ui-pill:is(.is-community, .is-healthy, .is-good, .is-accepted),
.storage-area-status.is-healthy,
.storage-reading-status.is-good {
  border-color: color-mix(in srgb, var(--quiet-forest) 34%, transparent);
  background: color-mix(in srgb, var(--quiet-forest-soft) 82%, var(--color-surface));
  color: var(--quiet-forest-deep);
}

.ui-pill:is(.is-warning, .is-restricted, .is-attention, .needs-attention, .is-declined),
.storage-area-status.is-attention,
.storage-reading-status.needs-attention {
  border-color: color-mix(in srgb, var(--quiet-gold, #bc8b42) 52%, transparent);
  background: color-mix(in srgb, var(--quiet-gold, #bc8b42) 14%, var(--color-surface));
  color: var(--quiet-forest-deep);
}

.ui-pill.is-private {
  border-color: color-mix(in srgb, var(--color-text-muted) 34%, transparent);
  background: color-mix(in srgb, var(--color-text-muted) 9%, var(--color-surface));
  color: var(--color-text-muted);
}

@media (max-width: 370px) {
  .collection-tagline {
    display: none;
  }

  .humidor-status {
    max-width: 8.4rem;
  }
}

/* Dossier and Aging refinement ---------------------------
   Preserve the established lifecycle and content while using the same
   compact hierarchy, adjacent facts, and single-inset cards as Collection. */
#manageCigarOverlay .manage-dossier-header {
  gap: 0.75rem;
  padding: 0.75rem 3.35rem 0.75rem 0.875rem;
}

#manageCigarOverlay .manage-dossier-identity {
  flex: 1 1 22rem;
  gap: 0.65rem;
}

#manageCigarOverlay .manage-dossier-photo {
  flex-basis: 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  font-size: 1.35rem;
}

#manageCigarOverlay .manage-dossier-copy .eyebrow {
  margin-bottom: 0.15rem;
}

#manageCigarOverlay .manage-dossier-series,
#manageCigarOverlay .manage-dossier-meta {
  margin-top: 0.15rem;
}

#manageCigarOverlay .manage-dossier-quick {
  flex: 0 1 18.5rem;
  width: min(100%, 18.5rem);
  gap: 0.35rem;
}

#manageCigarOverlay .manage-dossier-quick-item {
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.7rem;
}

#manageCigarOverlay .manage-dossier-quick-item strong {
  font-size: 1rem;
}

#manageCigarOverlay .manage-dossier-quick-item span {
  min-height: 0;
  font-size: 0.58rem;
}

#manageCigarOverlay .manage-tabs {
  min-height: 3rem;
  padding-inline: 0.5rem;
}

#manageCigarOverlay .manage-tab {
  min-height: 2.875rem;
  gap: 0.2rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
}

#manageCigarOverlay .manage-tab .action-icon {
  width: 0.95rem;
  height: 0.95rem;
}

#manageCigarOverlay .manage-content {
  padding: 0.8rem;
}

#manageCigarOverlay .manage-aging {
  gap: 0.65rem;
}

#manageCigarOverlay .aging-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.85fr);
  grid-template-areas:
    "title status"
    "progress details"
    "actions actions";
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
}

#manageCigarOverlay .aging-plan-card > h3 {
  grid-area: title;
  font-size: 1.3rem;
}

#manageCigarOverlay .aging-plan-card > .manage-overview-primary {
  grid-area: status;
  justify-self: end;
  margin: 0;
  padding: 0.3rem 0.55rem;
}

#manageCigarOverlay .aging-plan-card > .manage-overview-meta {
  grid-column: 1 / -1;
  margin: 0;
}

#manageCigarOverlay .aging-progress {
  grid-area: progress;
  padding: 0.8rem;
  border-radius: 0.75rem;
}

#manageCigarOverlay .aging-progress-header strong {
  font-size: 2rem;
}

#manageCigarOverlay .aging-progress-track {
  height: 0.55rem;
  margin: 0.65rem 0 0.45rem;
}

#manageCigarOverlay .aging-summary-details {
  grid-area: details;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: 0.75rem;
}

#manageCigarOverlay .aging-summary-row {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem;
  border: 1px solid var(--dossier-border-soft);
  border-radius: 0.6rem;
  background: rgba(243, 236, 223, 0.48);
}

#manageCigarOverlay .aging-summary-value {
  text-align: left;
}

#manageCigarOverlay .aging-tracking-description {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
}

#manageCigarOverlay .aging-plan-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

#manageCigarOverlay .aging-plan-actions > * {
  width: auto;
  min-height: var(--ui-control-height-compact);
}

/* Manage Storage Areas refinement ------------------------ */
#manageCigarOverlay .storage-area-manager,
#manageCigarOverlay .storage-area-detail,
#manageCigarOverlay .storage-area-detail-workspace,
#manageCigarOverlay .storage-area-list-section,
#manageCigarOverlay .storage-area-snapshot {
  gap: 0.65rem;
}

#manageCigarOverlay :is(
  .storage-area-manager-header,
  .storage-area-list-header,
  .storage-area-detail-header,
  .storage-area-section-header,
  .storage-area-snapshot-heading
) {
  align-items: flex-start;
  gap: 0.65rem;
}

#manageCigarOverlay :is(
  .storage-area-manager-header,
  .storage-area-list-header,
  .storage-area-detail-header,
  .storage-area-section-header
) > :is(.primary-action, .secondary-action) {
  flex: 0 0 auto;
  min-height: var(--ui-control-height-compact);
}

#manageCigarOverlay .storage-area-snapshot,
#manageCigarOverlay .storage-area-list-section,
#manageCigarOverlay .storage-area-detail-contents,
#manageCigarOverlay .storage-area-detail-activity {
  padding: 0.75rem;
}

#manageCigarOverlay .storage-area-snapshot-stats,
#manageCigarOverlay .storage-area-detail-summary {
  gap: 0.4rem;
}

#manageCigarOverlay .storage-area-snapshot-stat,
#manageCigarOverlay .storage-area-detail-summary-item {
  min-height: 3rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.65rem;
}

#manageCigarOverlay .storage-area-snapshot-stat {
  grid-template-columns: auto auto;
  place-content: center;
  align-items: baseline;
  gap: 0.3rem;
}

#manageCigarOverlay .storage-area-snapshot-value,
#manageCigarOverlay .storage-area-detail-summary-item > strong {
  font-size: 1rem;
}

#manageCigarOverlay .storage-area-snapshot-label,
#manageCigarOverlay .storage-area-detail-summary-item > span {
  font-size: 0.68rem;
}

#manageCigarOverlay .storage-area-grid {
  gap: 0.65rem;
}

#manageCigarOverlay .storage-area-card {
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 0.8rem;
}

#manageCigarOverlay .storage-area-card-layout,
#manageCigarOverlay .storage-area-card-summary {
  gap: 0.45rem;
}

#manageCigarOverlay .storage-area-card-status-row {
  justify-content: flex-end;
}

#manageCigarOverlay .storage-area-status {
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
}

#manageCigarOverlay .storage-area-card-environment {
  gap: 0.4rem;
}

#manageCigarOverlay .storage-area-environment-group {
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.65rem;
}

#manageCigarOverlay .storage-area-environment-label {
  font-size: 0.62rem;
}

#manageCigarOverlay .storage-area-card-actions {
  justify-content: flex-end;
  gap: 0.4rem;
}

#manageCigarOverlay .storage-area-card-actions > * {
  flex: 0 1 auto;
  width: auto;
  padding-inline: 0.75rem;
}

#manageCigarOverlay .storage-area-environment-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

#manageCigarOverlay .storage-area-current-panel,
#manageCigarOverlay .storage-area-environment-panel,
#manageCigarOverlay .storage-area-target-panel {
  width: 100%;
  min-width: 0;
  max-width: none;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 0.8rem;
}

#manageCigarOverlay .storage-area-environment-panel-header {
  gap: 0.5rem;
}

#manageCigarOverlay .storage-area-detail-values,
#manageCigarOverlay .storage-area-target-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

#manageCigarOverlay .storage-area-detail-value,
#manageCigarOverlay .storage-area-target-group,
#manageCigarOverlay .storage-current-value,
#manageCigarOverlay .storage-stat-card {
  min-height: 3rem;
  padding: 0.55rem;
  border-radius: 0.65rem;
}

#manageCigarOverlay .storage-area-cigar-row {
  min-height: 2.6rem;
  padding: 0.45rem 0.15rem;
}

@media (max-width: 700px) {
  #manageCigarOverlay .manage-dossier-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.65rem 3rem 0.55rem 0.7rem;
  }

  #manageCigarOverlay .manage-dossier-identity {
    gap: 0.55rem;
  }

  #manageCigarOverlay .manage-dossier-photo {
    flex-basis: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.65rem;
  }

  #manageCigarOverlay .manage-dossier-copy h2 {
    font-size: 1.15rem;
  }

  #manageCigarOverlay .manage-dossier-quick {
    width: 100%;
    gap: 0.3rem;
  }

  #manageCigarOverlay .manage-dossier-quick-item {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    min-height: 2.4rem;
    padding: 0.3rem;
  }

  #manageCigarOverlay .manage-dossier-quick-item span {
    align-self: center;
    margin: 0;
  }

  #manageCigarOverlay .manage-tabs {
    min-height: 2.75rem;
    padding-inline: 0.3rem;
  }

  #manageCigarOverlay .manage-tab {
    min-height: 2.65rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.64rem;
  }

  #manageCigarOverlay .manage-content {
    padding: 0.65rem 0.65rem max(1rem, env(safe-area-inset-bottom));
  }

  #manageCigarOverlay .aging-plan-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title status"
      "progress progress"
      "details details"
      "actions actions";
    padding: 0.7rem;
  }

  #manageCigarOverlay .aging-plan-card > h3 {
    font-size: 1.1rem;
  }

  #manageCigarOverlay .aging-summary-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.45rem;
  }

  #manageCigarOverlay .aging-plan-actions,
  #manageCigarOverlay .aging-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #manageCigarOverlay .aging-plan-actions > *,
  #manageCigarOverlay .aging-form-actions > * {
    width: 100%;
  }

  #manageCigarOverlay :is(
    .storage-area-manager-header,
    .storage-area-list-header,
    .storage-area-detail-header,
    .storage-area-section-header,
    .storage-area-snapshot-heading
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  #manageCigarOverlay .storage-area-snapshot-heading > .manage-overview-meta {
    text-align: right;
  }

  #manageCigarOverlay .storage-area-snapshot,
  #manageCigarOverlay .storage-area-list-section,
  #manageCigarOverlay .storage-area-detail-contents,
  #manageCigarOverlay .storage-area-detail-activity {
    padding: 0.65rem;
  }

  #manageCigarOverlay .storage-area-detail-contents,
  #manageCigarOverlay .storage-area-detail-activity {
    padding: 0.75rem;
  }

  #manageCigarOverlay .storage-area-snapshot-stat {
    min-height: 2.7rem;
    padding: 0.35rem 0.25rem;
  }

  #manageCigarOverlay .storage-area-card {
    padding: 0.65rem;
  }

  #manageCigarOverlay .storage-area-card-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: stretch;
  }

  #manageCigarOverlay .storage-area-card-environment {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #manageCigarOverlay .storage-area-card-actions > * {
    flex: 1 1 auto;
  }

  #manageCigarOverlay .storage-area-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-area-detail-summary-item {
    justify-content: center;
    text-align: center;
  }

  #manageCigarOverlay .storage-area-detail-contents,
  #manageCigarOverlay .storage-area-environment-comparison {
    flex-direction: initial;
  }

  #manageCigarOverlay .storage-area-environment-comparison,
  #manageCigarOverlay .storage-area-target-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-area-detail-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-area-current-panel,
  #manageCigarOverlay .storage-area-target-panel {
    padding: 0.6rem;
  }

  #manageCigarOverlay .storage-area-environment-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #manageCigarOverlay .storage-area-environment-panel-header .secondary-action {
    width: 100%;
    min-height: var(--ui-control-height-compact);
  }
}

@media (max-width: 390px) {
  #manageCigarOverlay .manage-dossier-quick-item {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  #manageCigarOverlay .storage-area-card-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(7.5rem, 0.9fr);
  }

  #manageCigarOverlay .storage-area-card-environment {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 350px) {
  #manageCigarOverlay .storage-area-card-layout {
    grid-template-columns: 1fr;
  }

  #manageCigarOverlay .storage-area-card-environment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-area-environment-comparison,
  #manageCigarOverlay .storage-area-target-values {
    grid-template-columns: 1fr;
  }
}

/* Desktop Collection composition -------------------------
   A fine-pointer laptop can have a narrower CSS viewport while developer
   tools or a side panel is open. Keep Collection destinations in their
   established right rail instead of treating that viewport as a tablet. */
@media (min-width: 1101px), (min-width: 960px) and (pointer: fine) {
  .collection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26%);
    grid-template-areas: "heading heading" "snapshot ." "humidor destinations";
    align-items: start;
    column-gap: 1rem;
  }

  .collection-header {
    grid-area: heading;
  }

  .collection:has(.collection-destination-bar button:not([hidden])) {
    grid-template-areas: "heading heading" "return return" "snapshot ." "humidor destinations";
  }

  .collection-destination-bar {
    grid-area: return;
  }

  .collection-destination-bar:not(:has(button:not([hidden]))) {
    display: none;
  }

  .collection-snapshot {
    grid-area: snapshot;
  }

  .collection-content {
    grid-area: humidor;
    min-width: 0;
  }

  .collection-destinations {
    grid-area: destinations;
    min-width: 0;
    align-self: start;
  }

  .collection-destination-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .collection-destination-item {
    width: 100%;
    min-width: 0;
  }

  .collection-destination-control {
    min-height: 4.1rem;
    padding: 0.65rem 0.75rem;
  }
}

/* Storage surface family correction ----------------------
   Manager, detail, forms, readings, contents, activity, and destructive
   actions share one compact hierarchy. */
#manageCigarOverlay :is(.storage-area-manager, .storage-area-detail) {
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  gap: 0.65rem;
  border: 1px solid var(--dossier-border-soft);
  border-radius: 1rem;
  background: rgba(255, 253, 247, 0.72);
  overflow: clip;
}

#manageCigarOverlay :is(
  .storage-area-manager-header,
  .storage-area-detail-header
) {
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--dossier-border-soft);
  border-radius: 0.8rem;
  background: var(--dossier-raised);
}

#manageCigarOverlay .manage-dossier-quick-item {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  min-height: 2.7rem;
  padding: 0.3rem 0.4rem;
  gap: 0.12rem;
}

#manageCigarOverlay .manage-dossier-quick-item span {
  margin-top: 0;
}

#manageCigarOverlay .manage-dossier-quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

#manageCigarOverlay .manage-dossier-quick-item {
  width: 100%;
  min-width: 0;
}

/* Property/value rhythm is structural, not text-dependent. Every compact
   Dossier fact keeps a visible gap when it wraps or changes orientation. */
#manageCigarOverlay :is(
  .manage-dossier-quick-item,
  .storage-area-snapshot-stat,
  .storage-area-detail-summary-item,
  .storage-area-card-contents,
  .storage-area-environment-values,
  .storage-area-detail-value,
  .storage-area-target-group,
  .storage-current-value,
  .storage-stat-card
) {
  column-gap: 0.35rem;
  row-gap: 0.18rem;
}

#manageCigarOverlay .manage-photo-primary {
  width: min(100%, 36rem);
  height: clamp(10rem, 28vh, 18rem);
  align-self: flex-start;
}

#manageCigarOverlay .manage-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 15rem));
  align-items: start;
}

#manageCigarOverlay .manage-photo-gallery-item {
  width: 100%;
  min-width: 0;
  max-width: 15rem;
}

#manageCigarOverlay :is(
  .storage-area-manager-heading,
  .storage-area-detail-heading,
  .storage-area-list-header > div,
  .storage-area-section-header > div,
  .storage-area-snapshot-heading
) :is(h3, h4, p) {
  margin-block: 0;
}

#manageCigarOverlay :is(
  .storage-area-manager-heading,
  .storage-area-detail-heading,
  .storage-area-list-header > div,
  .storage-area-section-header > div
) {
  display: grid;
  gap: 0.25rem;
}

#manageCigarOverlay :is(
  .storage-area-manager-header,
  .storage-area-detail-header,
  .storage-area-list-header,
  .storage-area-section-header
) > :is(.primary-action, .secondary-action),
#manageCigarOverlay .storage-area-environment-panel-header .secondary-action {
  width: auto;
  min-height: 2.5rem;
  padding: 0.38rem 0.65rem;
  font-size: 0.76rem;
}

#manageCigarOverlay .storage-area-manager-heading h3,
#manageCigarOverlay .storage-area-detail-heading h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}

#manageCigarOverlay .storage-area-list-header h4,
#manageCigarOverlay .storage-area-snapshot-heading h4,
#manageCigarOverlay .storage-area-section-header h3,
#manageCigarOverlay .storage-area-detail-contents h3,
#manageCigarOverlay .storage-area-detail-activity h3 {
  font-size: 1rem;
}

#manageCigarOverlay .storage-area-snapshot-heading {
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: 0.25rem;
}

#manageCigarOverlay .storage-area-snapshot-heading > .manage-overview-meta {
  text-align: left;
}

#manageCigarOverlay .storage-area-list-section {
  gap: 0.7rem;
}

#manageCigarOverlay .storage-area-create-section,
#manageCigarOverlay .storage-area-delete-section,
#manageCigarOverlay .storage-area-snapshot,
#manageCigarOverlay .storage-area-list-section,
#manageCigarOverlay .storage-area-environment-section,
#manageCigarOverlay .storage-area-detail-contents,
#manageCigarOverlay .storage-area-detail-activity {
  padding: 0.65rem;
  border: 1px solid var(--dossier-border-soft);
  border-radius: 0.8rem;
  background: var(--dossier-surface);
}

#manageCigarOverlay .storage-area-create-section {
  gap: 0.6rem;
}

#manageCigarOverlay .storage-area-create-section :is(h4, p) {
  margin-block: 0;
}

#manageCigarOverlay .storage-area-form,
#manageCigarOverlay .storage-area-preferences-form,
#manageCigarOverlay .storage-area-reading-form {
  gap: 0.45rem;
}

#manageCigarOverlay .storage-area-reading-form {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

#manageCigarOverlay .storage-area-reading-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

#manageCigarOverlay .storage-area-reading-form :is(input, textarea) {
  min-height: 2.25rem;
  padding: 0.4rem 0.5rem;
}

#manageCigarOverlay .storage-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0.65rem;
  border-radius: 0.7rem;
}

#manageCigarOverlay .storage-fieldset :is(.form-row, .form-field) {
  gap: 0.45rem;
}

#manageCigarOverlay .storage-form-actions {
  gap: 0.5rem;
  margin-top: 0.1rem;
}

#manageCigarOverlay .storage-form-actions > * {
  width: auto;
  min-height: 2.5rem;
  padding: 0.38rem 0.65rem;
}

#manageCigarOverlay .storage-area-detail-summary {
  width: 100%;
  max-width: none;
  gap: 0.4rem;
}

#manageCigarOverlay .storage-area-environment-section,
#manageCigarOverlay .storage-area-environment-comparison {
  gap: 0.65rem;
}

#manageCigarOverlay .storage-area-current-panel,
#manageCigarOverlay .storage-area-target-panel {
  min-height: 0;
}

#manageCigarOverlay .storage-area-environment-panel-header {
  min-height: 0;
  align-items: center;
}

#manageCigarOverlay .storage-area-environment-panel-header h4 {
  margin: 0;
  font-size: 0.92rem;
}

#manageCigarOverlay .storage-area-card-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(14rem, 1.2fr);
  align-items: stretch;
  gap: 0.6rem;
}

#manageCigarOverlay .storage-area-card-environment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#manageCigarOverlay :is(
  .storage-area-current-panel,
  .storage-area-target-panel
) {
  min-width: 0;
  max-width: none;
  padding: 0.65rem;
}

#manageCigarOverlay .storage-area-detail-contents,
#manageCigarOverlay .storage-area-detail-activity {
  gap: 0.5rem;
}

#manageCigarOverlay .storage-area-detail-contents > :is(h3, p),
#manageCigarOverlay .storage-area-detail-activity > :is(h3, p) {
  margin-block: 0;
}

#manageCigarOverlay .storage-area-cigar-list,
#manageCigarOverlay .storage-area-activity-history {
  padding-inline: 0.35rem;
  max-height: min(13rem, 34vh);
}

#manageCigarOverlay .storage-area-cigar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.6rem;
  padding: 0.55rem 0.25rem;
  column-gap: 0.75rem;
  border-bottom: 1px solid var(--dossier-border-soft);
}

#manageCigarOverlay .storage-area-cigar-row:last-child {
  border-bottom: 0;
}

#manageCigarOverlay .storage-area-cigar-identity {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

#manageCigarOverlay .storage-area-cigar-identity strong {
  overflow: hidden;
  color: var(--dossier-text);
  font-size: 0.9rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#manageCigarOverlay .storage-area-cigar-identity span {
  overflow: hidden;
  color: var(--dossier-muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#manageCigarOverlay .storage-area-cigar-quantity {
  min-width: 2.75rem;
  color: var(--dossier-gold-bright);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

#manageCigarOverlay .storage-area-delete-section {
  display: flex;
  justify-content: flex-start;
}

#manageCigarOverlay .storage-area-delete-section button {
  width: auto;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
}

@media (min-width: 701px) {
  #manageCigarOverlay .storage-area-snapshot {
    display: grid;
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
  }

  #manageCigarOverlay .storage-area-form,
  #manageCigarOverlay .storage-area-preferences-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-area-form > .form-row,
  #manageCigarOverlay .storage-area-preferences-form > .storage-fieldset:first-child,
  #manageCigarOverlay .storage-form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  #manageCigarOverlay .manage-dossier-quick {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    gap: 0.35rem;
  }

  #manageCigarOverlay .manage-dossier-quick-item {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    align-content: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.25rem 0.35rem;
    gap: 0.25rem;
  }

  #manageCigarOverlay .manage-dossier-quick-item span {
    align-self: center;
  }

  #manageCigarOverlay .storage-area-manager-header,
  #manageCigarOverlay .storage-area-detail-header,
  #manageCigarOverlay .storage-area-list-header,
  #manageCigarOverlay .storage-area-section-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #manageCigarOverlay :is(
    .storage-area-manager-header,
    .storage-area-detail-header,
    .storage-area-list-header,
    .storage-area-section-header
  ) > :is(.primary-action, .secondary-action) {
    align-self: start;
  }

  #manageCigarOverlay .storage-area-section-header > :is(.primary-action, .secondary-action) {
    max-width: 9.5rem;
    white-space: normal;
  }

  #manageCigarOverlay .storage-area-form,
  #manageCigarOverlay .storage-area-preferences-form {
    padding: 0.65rem;
  }

  #manageCigarOverlay :is(.storage-area-manager, .storage-area-detail) {
    padding: 0.55rem;
    border-radius: 0.85rem;
  }

  #manageCigarOverlay .storage-area-card-layout {
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.75fr);
  }

  #manageCigarOverlay .storage-area-card-environment {
    grid-template-columns: 1fr;
  }

  #manageCigarOverlay .storage-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .storage-form-actions > * {
    width: 100%;
  }
}

@media (max-width: 390px) {
  #manageCigarOverlay .manage-dossier-quick-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.18rem;
  }

  #manageCigarOverlay .storage-area-manager-header,
  #manageCigarOverlay .storage-area-detail-header {
    grid-template-columns: minmax(0, 1fr);
  }

  #manageCigarOverlay :is(.storage-area-manager-header, .storage-area-detail-header)
    > :is(.primary-action, .secondary-action) {
    justify-self: start;
  }

}

@media (max-width: 600px) {
  #manageCigarOverlay .storage-area-environment-comparison {
    grid-template-columns: 1fr;
  }

  #manageCigarOverlay .storage-area-detail-values,
  #manageCigarOverlay .storage-area-target-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay :is(
    .storage-area-detail-value,
    .storage-area-target-group
  ) {
    min-width: 0;
  }

  #manageCigarOverlay .storage-area-detail-value > span,
  #manageCigarOverlay .storage-area-environment-label {
    overflow-wrap: normal;
    word-break: normal;
  }

  #manageCigarOverlay .manage-photo-primary {
    width: 100%;
    height: clamp(9rem, 24vh, 14rem);
  }

  #manageCigarOverlay .manage-photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #manageCigarOverlay .manage-photo-gallery-item {
    max-width: none;
  }
}

/* =========================================================
   RESPONSIVE COMPONENT CONTRACTS

   Storage responds to the Dossier's available width rather
   than the outer browser width. This covers split-screen,
   DevTools, and every transitional width between devices.
   ========================================================= */

#manageCigarOverlay .manage-content > * {
  width: min(100%, var(--ui-content-readable));
  margin-inline: auto;
}

#manageCigarOverlay :is(.manage-overview-meta, .form-help) {
  max-width: var(--ui-copy-measure);
}

#manageCigarOverlay .storage-area-grid {
  container-name: storage-grid;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-card-preferred)), 1fr));
  align-items: stretch;
}

#manageCigarOverlay .storage-area-card {
  container-name: storage-card;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  max-width: none;
}

#manageCigarOverlay .storage-area-card-layout {
  grid-template-columns: minmax(0, 1fr);
}

#manageCigarOverlay .storage-area-card-environment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#manageCigarOverlay :is(.storage-area-card-summary, .storage-area-card-primary-row, .storage-area-card-environment, .storage-area-environment-group, .storage-area-environment-values) {
  min-width: 0;
}

#manageCigarOverlay :is(.storage-area-card-identity, .storage-area-card-contents, .storage-area-environment-group) :is(h3, h4, p, span, strong) {
  max-width: 100%;
}

@container storage-card (min-width: 31rem) {
  #manageCigarOverlay .storage-area-card-layout {
    grid-template-columns: minmax(10rem, 0.8fr) minmax(14rem, 1.2fr);
  }
}

@container storage-card (max-width: 22rem) {
  #manageCigarOverlay .storage-area-card-primary-row,
  #manageCigarOverlay .storage-area-card-environment {
    grid-template-columns: minmax(0, 1fr);
  }

  #manageCigarOverlay .storage-area-card-actions > button {
    width: 100%;
  }
}

#manageCigarOverlay .storage-area-environment-comparison {
  container-name: storage-comparison;
  container-type: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container storage-comparison (max-width: 36rem) {
  #manageCigarOverlay .storage-area-current-panel,
  #manageCigarOverlay .storage-area-target-panel {
    grid-column: 1 / -1;
  }
}

@container storage-comparison (max-width: 23rem) {
  #manageCigarOverlay .storage-area-detail-values,
  #manageCigarOverlay .storage-area-target-values {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Full Collection is an intentional destination; the home Humidor remains a preview. */
.collection-destination-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.collection-search {
  order: 0;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-gap-sm);
  width: 100%;
}

.collection-search input {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-control-height);
}

.collection-pagination {
  order: 5;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap-sm);
  width: 100%;
  padding-top: var(--ui-gap-xs);
}

.collection-pagination p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.collection-pagination-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-gap-sm);
}

@media (max-width: 420px) {
  .collection-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-search button,
  .collection-pagination button,
  .collection-destination-bar button {
    width: 100%;
  }
}

/* Search controls ---------------------------------------------------------
   One compact, quiet search language across primary app surfaces. */
:where(input[type="search"]) {
  min-height: var(--ui-control-height-compact);
  padding: 0.48rem 0.72rem;
  border-radius: 0.68rem;
  font-size: 0.9rem;
}

.catalog-search,
.collection-search,
.member-discovery-search,
#moderatorCatalogSearch {
  width: min(100%, 46rem);
  align-self: flex-start;
  gap: 0.4rem;
}

.cigar-search-section .catalog-search-field input,
.cigar-search-section .catalog-search-action button,
.collection-search :is(input, button),
.member-discovery-search :is(input, button),
#moderatorCatalogSearch :is(input, button) {
  min-height: var(--ui-control-height-compact);
  height: var(--ui-control-height-compact);
}

.cigar-search-section .catalog-search-field input,
.collection-search input,
.member-discovery-search input,
#moderatorCatalogSearch input {
  padding: 0.48rem 0.72rem;
  border-color: color-mix(in srgb, var(--color-border-strong) 72%, transparent);
  border-radius: 0.68rem;
  background: var(--color-surface);
  box-shadow: inset 0 1px 2px rgba(28, 23, 16, 0.04);
}

.cigar-search-section .catalog-search-action button {
  width: var(--ui-control-height-compact);
}

.collection-search button,
.member-discovery-search button,
#moderatorCatalogSearch button {
  width: auto;
  padding-inline: 0.75rem;
  border-radius: 0.68rem;
  font-size: 0.78rem;
}

.hunting-quick-form {
  display: grid;
  gap: var(--ui-gap-sm);
  margin-top: var(--ui-gap-md);
  padding: var(--ui-card-padding);
  border: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--color-surface-soft);
}

.hunting-quick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-gap-sm);
}

.hunting-quick-row input {
  min-height: var(--ui-control-height);
}

.hunting-quick-details summary {
  min-height: var(--ui-hit-target-min);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: 700;
}

.hunting-quick-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--ui-gap-sm);
  padding-top: var(--ui-gap-sm);
}

.hunting-quick-fields label {
  display: grid;
  gap: var(--ui-gap-xs);
}

.hunting-quick-notes {
  grid-column: 1 / -1;
}

.hunting-list-item-meta {
  margin-top: var(--ui-gap-xs) !important;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 30rem) {
  .hunting-quick-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hunting-quick-row button {
    width: 100%;
  }
}

.manage-catalog-override-help {
  margin: 0;
  padding: var(--ui-gap-sm);
  border-radius: var(--ui-radius-control);
  background: var(--color-surface-soft);
}

.manage-catalog-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap-xs);
  margin-top: var(--ui-gap-xs);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.manage-catalog-reset {
  min-height: var(--ui-hit-target-min);
  padding-inline: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
}

/* Dossier Photos ----------------------------------------------------------
   Treat the primary image as the object, not as content floating in a wide
   colored stage. Intrinsic proportions stay intact within readable bounds. */
#manageCigarOverlay .manage-photo-primary-section {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#manageCigarOverlay .manage-photo-primary-section > .manage-photo-primary {
  width: auto;
  max-width: min(100%, 30rem);
  height: auto;
  max-height: clamp(15rem, 48dvh, 27rem);
  align-self: flex-start;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: 0.8rem;
  background: transparent;
  box-shadow: 0 0.8rem 2rem rgba(28, 23, 16, 0.14);
}

/* Dossier Notes -----------------------------------------------------------
   History stays easy to scan; destructive controls appear only when a note
   is deliberately selected by pointer or keyboard. */
#manageCigarOverlay .notes-history-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 0.15rem 0.15rem;
  border-top: 0;
}

#manageCigarOverlay .note-history-item {
  position: relative;
  padding: 0.75rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#manageCigarOverlay .note-history-item:hover,
#manageCigarOverlay .note-history-item:focus-visible {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  outline: none;
}

#manageCigarOverlay .note-history-item.is-actions-open {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  box-shadow: 0 0.45rem 1.2rem rgba(28, 23, 16, 0.09);
}

#manageCigarOverlay .note-history-actions {
  min-height: 2.5rem;
  align-items: center;
  margin-top: 0.6rem;
}

#manageCigarOverlay .note-history-actions[hidden] {
  display: none;
}

#manageCigarOverlay .note-history-action {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 50%;
}

#manageCigarOverlay .note-history-action .ui-icon {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  #manageCigarOverlay .manage-photo-primary-section > .manage-photo-primary {
    width: auto;
    max-width: 100%;
    max-height: min(40dvh, 20rem);
  }
}

/* Final responsive composition authority. Keep this after legacy viewport
   refinements so a narrow component always wins over a wide device. */
#manageCigarOverlay .storage-area-manager {
  container-name: storage-manager;
  container-type: inline-size;
}

#manageCigarOverlay .storage-area-snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

#manageCigarOverlay .storage-area-snapshot-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.25rem;
}

#manageCigarOverlay .storage-area-snapshot-heading > .manage-overview-meta {
  max-width: var(--ui-copy-measure);
  text-align: left;
}

#manageCigarOverlay .storage-area-snapshot-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-data-item-min)), 1fr));
}

#manageCigarOverlay .storage-area-snapshot-stat {
  grid-template-columns: auto minmax(var(--ui-data-label-min), auto);
  align-content: center;
  justify-content: center;
  white-space: normal;
}

#manageCigarOverlay .storage-area-snapshot-stat > :where(strong, span) {
  overflow-wrap: normal;
  word-break: normal;
}

#manageCigarOverlay :is(.storage-area-detail-contents, .storage-area-detail-activity) {
  padding: 0.75rem;
}

@container storage-manager (min-width: 48rem) {
  #manageCigarOverlay .storage-area-snapshot {
    grid-template-columns: minmax(var(--ui-heading-copy-min), 0.7fr) minmax(24rem, 1.3fr);
    align-items: center;
  }
}

@container storage-manager (max-width: 35rem) {
  #manageCigarOverlay :is(
    .storage-area-manager-header,
    .storage-area-detail-header,
    .storage-area-list-header,
    .storage-area-section-header
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  #manageCigarOverlay :is(
    .storage-area-manager-header,
    .storage-area-detail-header,
    .storage-area-list-header,
    .storage-area-section-header
  ) > :is(.primary-action, .secondary-action) {
    width: 100%;
  }
}

@container storage-manager (max-width: 25rem) {
  #manageCigarOverlay .storage-area-snapshot-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  #manageCigarOverlay .storage-area-snapshot-stat {
    max-width: none;
  }
}

/* Premium analytics uses a compact, accessible flow chart only where time
   changes the answer. Acquired and smoked share one scale per chart. */
.analytics-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-sm);
  margin: 0 0 var(--ui-gap-sm) !important;
  font-size: 0.72rem;
}

.analytics-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-gap-xs);
}

.analytics-trend-legend span::before {
  width: 0.75rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--quiet-forest);
  content: "";
}

.analytics-trend-legend .is-smoked::before { background: var(--quiet-gold, #bc8b42); }

.analytics-trend-chart { display: grid; gap: 0.5rem; }

.analytics-trend-row {
  display: grid;
  grid-template-columns: minmax(4.75rem, auto) minmax(7rem, 1fr) minmax(4.25rem, auto);
  align-items: center;
  gap: var(--ui-gap-sm);
  min-width: 0;
  font-size: 0.75rem;
}

.analytics-trend-row > strong,
.analytics-trend-net { font-variant-numeric: tabular-nums; }
.analytics-trend-net { color: var(--color-text-muted); text-align: right; }
.analytics-trend-bars { display: grid; gap: 0.2rem; min-width: 0; }
.analytics-trend-bars span {
  width: max(2px, var(--analytics-value));
  height: 0.4rem;
  border-radius: 999px;
  background: var(--quiet-forest);
}
.analytics-trend-bars .is-smoked { background: var(--quiet-gold, #bc8b42); }

.analytics-connection-list {
  display: grid;
  align-content: start;
  gap: var(--ui-gap-sm);
  min-width: 0;
  min-height: 0;
  max-height: min(24rem, 55vh);
  max-height: min(24rem, 55dvh);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  touch-action: pan-y pinch-zoom;
  scrollbar-gutter: stable;
  padding-inline: 0.2rem;
}

.analytics-connection-list:focus-visible {
  outline: 2px solid var(--quiet-gold, #bc8b42);
  outline-offset: 2px;
}

.analytics-connection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-gap-sm);
  min-width: 0;
  padding: 0.65rem 0;
  border-bottom: var(--ui-border);
}

.analytics-connection-row:last-child { border-bottom: 0; }
.analytics-connection-row > div { min-width: 0; }
.analytics-connection-row strong { display: block; overflow-wrap: anywhere; }
.analytics-connection-date {
  display: block;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.analytics-connection-row p {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.analytics-connection-row .analytics-connection-thought {
  color: var(--color-text);
  font-style: italic;
}
.analytics-connection-thumbnail {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--ui-radius-sm);
  object-fit: cover;
}
.analytics-disclosure {
  max-width: var(--ui-copy-measure);
  margin: var(--ui-gap-sm) 0 0 !important;
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

@media (max-width: 30rem) {
  .analytics-trend-row { grid-template-columns: minmax(4.5rem, auto) minmax(5rem, 1fr); }
  .analytics-trend-net { grid-column: 2; text-align: left; }
}
@media (hover: hover) and (pointer: fine) {
  :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href], summary, wa-button:not([disabled])) {
    cursor: pointer;
  }
}

/* Shared active/archive reason editor: one contained disclosure, no new modal. */
.inventory-reason-correction { grid-column: 1 / -1; min-width: 0; font: 400 0.8rem/1.45 var(--font-body); }
.inventory-reason-correction > summary { min-height: 44px; display: flex; align-items: center; color: var(--color-text); cursor: pointer; }
.inventory-reason-correction form { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.inventory-reason-correction label { display: flex; flex-direction: column; gap: 0.25rem; }
.inventory-reason-correction :is(select, textarea) { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; color: var(--color-text); background: var(--color-surface); font: inherit; }
.inventory-reason-correction form > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inventory-reason-correction button { min-height: 44px; }
.inventory-reason-correction .form-help { margin: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }