/* =========================================================
   TREEHOUSE — APPLICATION UI
   Complete application presentation rewrite — September 15, 2026

   Visual authority:
   - accepted Mobile Treehouse surfaces
   - treehouse_tablet_ui_suite.html
   - treehouse_desktop_ui_suite.html

   Functional authority:
   - existing production HTML / JavaScript / lifecycle behavior
   - tokens.css for design tokens
   - dossier.css for Cigar Dossier presentation

   Responsive model:
   Mobile -> Tablet -> Desktop/Laptop

   Layout contract:
   - Flexbox is the default relationship primitive.
   - Meaningful containers own direction, wrap, order, and alignment.
   - Direct children grow/shrink from percentage-based proportions.
   - Breakpoints/orientation change parent relationships, not child hacks.
   ========================================================= */

/* =========================================================
   TYPOGRAPHY / DOCUMENT FOUNDATION
   ========================================================= */
:root {
  --font-body:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

/* =========================================================
   QUIET LEDGER — SHARED HISTORICAL / READ-ONLY CONTRACT

   Historical records use one compact reading language: an inset bounded
   surface, aligned facts, disclosure rows, and one responsive progression.
   Feature work should extend these shared selectors instead of introducing
   page-specific geometry for individual archive sections.
   ========================================================= */
.collection-history-detail.archived-dossier {
  width: min(100%, 52rem);
  max-width: 52rem;
  min-height: 0;
  max-height: none;
  margin-inline: auto;
  padding: clamp(0.75rem, 0.55rem + 0.45vw, 1rem);
  gap: 0;
  overflow: visible;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-md) + 0.2rem);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: 0 0.45rem 1.4rem rgba(25, 48, 39, 0.055);
}

.archived-dossier .collection-history-detail-nav {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.archived-dossier .collection-history-detail-nav .secondary-action {
  min-height: 2.55rem;
  padding: 0.48rem 0.75rem;
  border-radius: 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.15;
}

.archived-dossier .collection-history-detail-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  padding: 0.8rem 0.15rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.archived-dossier .collection-history-detail-identity {
  display: block;
  min-width: 0;
}

.archived-dossier .collection-history-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  line-height: 1.2;
}

.archived-dossier .collection-history-detail-name {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.25;
}

.archived-dossier-facts {
  flex: 0 1 auto;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.archive-ledger-overview {
  padding: 0.7rem 0.15rem 0.8rem;
  border-top: 1px solid var(--color-border);
}

.archive-ledger-overview .collection-history-section-title {
  margin: 0 0 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-ledger-overview .collection-history-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.archive-ledger-overview .collection-history-overview-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0 0.75rem;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.archive-ledger-overview .collection-history-overview-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.archive-ledger-overview .collection-history-overview-item:last-child {
  padding-right: 0;
}

.archive-ledger-overview .collection-history-overview-item > span,
.archive-ledger-overview .collection-history-overview-item > strong {
  font-family: inherit;
  overflow-wrap: anywhere;
}

.archive-ledger-overview .collection-history-overview-item > span {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.archive-ledger-overview .collection-history-overview-item > span::after {
  content: "";
}

.archive-ledger-overview .collection-history-overview-item > strong {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.3;
}

.archive-ledger-sections {
  border-top: 1px solid var(--color-border);
}

.archive-ledger-section {
  border-bottom: 1px solid var(--color-border);
}

.archive-ledger-section > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.15rem;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.archive-ledger-section > summary::-webkit-details-marker {
  display: none;
}

.archive-ledger-section > summary::after {
  content: "+";
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
}

.archive-ledger-section[open] > summary::after {
  content: "−";
}

.archive-ledger-section > summary strong {
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.25;
}

.archive-ledger-section > summary span {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.archive-ledger-section-content {
  padding: 0.1rem 0.15rem 0.7rem;
}

.archive-ledger-section-content > .collection-history-section-title {
  display: none;
}

.archive-ledger-section-content .collection-history-empty {
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: left;
}

.archive-ledger-section-content .collection-history-storage-condition,
.archive-ledger-section-content .collection-history-note {
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.archive-ledger-section-content .collection-history-timeline,
.archive-ledger-section-content .collection-history-notes,
.archive-ledger-section-content .collection-history-detail-list {
  max-height: none;
  gap: 0;
  overflow: visible;
}

.archive-ledger-section-content .collection-history-timeline-item {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.55rem 0;
}

.archive-ledger-section-content .collection-history-timeline-marker {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .collection-history-detail.archived-dossier {
    padding: 0.7rem;
    border-radius: var(--radius-md);
  }

  .archived-dossier .collection-history-detail-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archived-dossier .collection-history-detail-nav .secondary-action {
    width: 100%;
  }

  .archived-dossier .collection-history-detail-header {
    align-items: flex-start;
  }

  .archived-dossier-facts {
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .archive-ledger-overview .collection-history-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0;
  }

  .archive-ledger-overview .collection-history-overview-item {
    padding-inline: 0.65rem;
  }

  .archive-ledger-overview .collection-history-overview-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .archive-ledger-overview .collection-history-overview-item:nth-child(even) {
    padding-right: 0;
  }
}

/* V1-01 downgrade resolution stays inside the accepted Account surface. */
.account-downgrade-resolution {
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.account-downgrade-resolution h3 {
  margin-block: var(--space-2);
}

.account-resolution-candidates {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: min(18rem, 35vh);
  margin-block: var(--space-4);
  overflow-y: auto;
}

.account-resolution-candidate {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

* {
  box-sizing: border-box;
}
html {
  color-scheme: dark;
}
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f110d, var(--color-bg));
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-body);
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}

:where(a, button, summary, label, [role="button"], [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1,
h2,
h3,
h4 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 500;
}
p {
  color: var(--color-text-muted);
}
.eyebrow {
  margin: 0 0 var(--space-2);
  color: #9bb48e;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* =========================================================
   SITE-WIDE CONTENT FLOW CONTRACT

   Layout containers own spacing/orientation. Their children
   are allowed to grow and shrink without forcing overflow.
   Text starts at the inline-start edge by default; individual
   components opt into centered/right alignment only when the
   relationship requires it.
   ========================================================= */
body {
  text-align: start;
}

.treehouse-main :where(section, article, header, nav, form, ul, li, div) {
  min-width: 0;
}

.treehouse-main :where(h1, h2, h3, h4, h5, p, label, strong, span) {
  max-width: 100%;
}

.treehouse-main :where(h1, h2, h3, h4, h5, p, label) {
  overflow-wrap: anywhere;
}

.treehouse-main :where(button, input, textarea, select) {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   SHARED ACTIONS / FORMS
   ========================================================= */
.primary-action,
.secondary-action {
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.photo-input-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.photo-input-actions .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 24rem) {
  .photo-input-actions {
    grid-template-columns: 1fr;
  }
}
.primary-action {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #17130e;
  font-weight: 800;
}
.secondary-action {
  border: 1px solid var(--color-border);
  background: #20231c;
  color: var(--color-text);
}
.primary-action:hover,
.primary-action:focus-visible {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
}
.secondary-action:hover,
.secondary-action:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-field label {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  outline: 0;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-surface-raised);
}
.form-field textarea {
  resize: vertical;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.form-row > * {
  flex: 1 1 14rem;
}
.form-help,
.manage-overview-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.storage-form-actions,
.cigar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.storage-form-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.manage-tabs[hidden] {
  display: none;
}

/* =========================================================
   SITE HEADER
   Compact application header. Never allows logo intrinsic size
   to determine header height.
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  background: rgba(15, 17, 13, 0.94);
  backdrop-filter: blur(14px);
}
.site-header .shell {
  width: min(calc(100% - 2rem), 1500px);
  min-height: 4.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: auto;
  height: 3rem;
  max-width: min(18rem, 55vw);
  object-fit: contain;
}
.account-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.account-handle {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.account-action {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

/* =========================================================
   MAIN APPLICATION / SHARED SHELL
   ========================================================= */
.treehouse-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.treehouse-shell {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* =========================================================
   YOUR TREEHOUSE / COLLECTION — SHARED
   ========================================================= */
.collection {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-8);
}
.collection-header {
  display: flex;
  width: 100%;
  padding: 0.8rem 0;
  border-block: 1px solid var(--color-border);
}
.collection-heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}
.collection-heading-copy {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}
.collection-heading .eyebrow,
.collection-heading h1,
.collection-heading p {
  margin: 0;
}
.collection-heading h1 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.collection-tagline {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-base);
  white-space: nowrap;
}
.humidor-status {
  margin-left: auto !important;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: right;
}

@media (max-width: 640px) {
  .collection {
    gap: var(--space-3);
    padding-top: var(--space-3);
  }
  .collection-header {
    padding: 0.65rem 0;
  }
  .collection-heading,
  .collection-heading-copy {
    flex-direction: row;
    align-items: baseline;
  }
  .collection-heading-copy {
    gap: var(--space-2);
  }
  .collection-heading .eyebrow {
    display: none;
  }
  .collection-heading h1 {
    flex: 0 0 auto;
    font-size: 1.35rem;
  }
  .collection-tagline {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
  }
  .humidor-status {
    max-width: 35%;
    overflow: hidden;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Collection snapshot: compact state, not dashboard chrome. */
.collection-snapshot {
  width: 100%;
}
.collection-snapshot-list {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-soft);
}
.collection-snapshot-item {
  flex: 1 1 33.333%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-border);
}
.collection-snapshot-item:last-child {
  border-right: 0;
}
.collection-snapshot-value {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
}
.collection-snapshot-label {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Humidor working surface. */
.collection-content {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}
.collection-content > .collection-view {
  order: 1;
  margin-right: auto;
}
.collection-content > .collection-toolbar {
  order: 2;
  margin-left: auto;
}
.collection-content > .collection-context {
  order: 3;
  flex: 0 0 100%;
}
.collection-content > .collection-results {
  order: 4;
  flex: 0 0 100%;
}

/* Gallery / Compact selector. */
.collection-view,
.collection-toolbar {
  display: flex;
  width: auto;
}
.collection-view-list,
.collection-toolbar-list {
  display: flex;
  align-items: stretch;
  width: auto;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
  list-style: none;
}
.collection-view-item,
.collection-toolbar-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}
.collection-view-control,
.collection-tool {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}
.collection-view-control:hover,
.collection-view-control:focus-visible,
.collection-tool:hover,
.collection-tool:focus-visible {
  background: var(--color-surface-raised);
  color: var(--color-text);
}
.collection-view-control.is-active {
  position: relative;
  color: var(--color-accent);
}
.collection-view-control.is-active::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  bottom: 0;
  left: var(--space-2);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.collection-tool-primary {
  color: var(--color-accent);
  font-weight: 800;
}
.collection-tool-primary:hover,
.collection-tool-primary:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.collection-view-icon,
.collection-tool-icon,
.collection-destination-icon,
.collection-destination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.collection-view-label,
.collection-tool-label {
  white-space: nowrap;
}

.collection-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.collection-filter-status,
.collection-sort-status {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.collection-filter-status:empty,
.collection-sort-status:empty {
  display: none;
}

/* =========================================================
   COLLECTION RESULTS — SHARED
   ========================================================= */
.collection-results {
  width: 100%;
  min-width: 0;
  max-height: none;
  overflow: visible;
}

/* Gallery */
.collection-results:not(.is-compact) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}
.collection-results:not(.is-compact) .collection-row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.collection-results:not(.is-compact) .collection-row-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.collection-results:not(.is-compact) .collection-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-results:not(.is-compact) .collection-row-identity {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-3) 0;
}

.collection-results:not(.is-compact) .collection-row-brand {
  order: 1;
  margin: 0;
  color: #9bb48e;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collection-results:not(.is-compact) .collection-row-name {
  order: 2;
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.15;
}

.collection-results:not(.is-compact) .collection-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.collection-results:not(.is-compact) .collection-row-storage-desktop {
  padding: var(--space-1) var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.collection-results:not(.is-compact) .collection-row-manage {
  margin-top: auto;
  width: 100%;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-accent);
}

/* Compact */
.collection-results.is-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  overscroll-behavior-y: auto;
}
.collection-results.is-compact .collection-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.collection-results.is-compact .collection-row-media {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.collection-results.is-compact .collection-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection-results.is-compact .collection-row-identity {
  flex: 1 1 34%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.collection-results.is-compact .collection-row-brand {
  order: 1;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.collection-results.is-compact .collection-row-name {
  order: 2;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-results.is-compact .collection-row-status {
  flex: 0 1 20%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.collection-results.is-compact .collection-row-storage-desktop {
  flex: 0 1 20%;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-results.is-compact .collection-row-manage {
  flex: 0 0 auto;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}
.collection-results.is-compact .collection-row-manage:hover,
.collection-results.is-compact .collection-row-manage:focus-visible {
  color: var(--color-accent);
}

/* =========================================================
   COLLECTION DESTINATIONS
   ========================================================= */
.collection-destinations {
  width: 100%;
}
.collection-destination-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.collection-destination-item {
  width: 100%;
}
.collection-destination-control {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  color: var(--color-text);
  text-align: left;
}
.collection-destination-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.collection-destination-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.collection-destination-meta {
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.collection-destination-arrow {
  margin-left: auto;
  color: var(--color-accent);
}
.collection-destination-badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Premium is a restrained Private Reserve layer within Treehouse. */
.collection-destination-recommendation .collection-destination-control {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--color-accent) 58%, var(--color-border));
  background:
    radial-gradient(circle at 92% 0%, rgba(198, 154, 91, 0.18), transparent 42%),
    linear-gradient(140deg, #2b2419, #19251c 76%);
}
.collection-destination-recommendation .collection-destination-title::before {
  content: "Private Reserve";
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-accent-strong);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.collection-destination-recommendation .collection-destination-meta {
  color: #d0c0a8;
}

/* Quiet Dock: mobile app navigation over the existing Treehouse domains. */
.quiet-dock {
  display: none;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  .quiet-dock {
    position: fixed;
    right: max(var(--space-2), env(safe-area-inset-right));
    bottom: max(var(--space-2), env(safe-area-inset-bottom));
    left: max(var(--space-2), env(safe-area-inset-left));
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0.1rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 1.15rem;
    background: rgba(21, 19, 15, 0.96);
    box-shadow: 0 0.9rem 2.5rem rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(18px);
  }
  .quiet-dock-action {
    min-width: 0;
    min-height: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.15rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    line-height: 1;
  }
  .quiet-dock-action.is-active {
    background: var(--color-surface-soft);
    color: var(--color-text);
  }
  .quiet-dock-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .quiet-dock-create {
    width: 3.35rem;
    min-height: 3.35rem;
    justify-self: center;
    align-self: start;
    margin-top: -1.05rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #17120b;
    box-shadow: 0 0.55rem 1.25rem rgba(0, 0, 0, 0.35);
  }
  .quiet-dock-create:hover,
  .quiet-dock-create:focus-visible {
    background: var(--color-accent-strong);
    color: #17120b;
  }
}

/* Premium Help Me Pick — local, read-only collection recommendation. */
.recommendation-panel {
  width: min(calc(100vw - 2rem), 44rem);
  max-height: min(52rem, calc(100dvh - 2rem));
  overflow-y: auto;
}
.recommendation-form,
.recommendation-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.recommendation-form {
  margin-top: var(--space-4);
}
.recommendation-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.recommendation-fields label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.recommendation-fields select,
.recommendation-fields input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.recommendation-flavor {
  grid-column: 1 / -1;
}
.recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.recommendation-actions > * {
  flex: 1 1 12rem;
}
.recommendation-result {
  margin-top: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}
.recommendation-result h3,
.recommendation-result p {
  margin: 0;
}
.recommendation-result-meta,
.recommendation-result-reasons {
  color: var(--color-text-muted);
}
.recommendation-result-reasons {
  margin: 0;
  padding-left: 1.2rem;
}
.recommendation-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 700px) {
  .recommendation-fields {
    grid-template-columns: 1fr;
  }
  .recommendation-flavor {
    grid-column: auto;
  }
  .collection-destination-badge {
    display: none;
  }
}

/* =========================================================
   SORT / FILTER WORKSPACES
   ========================================================= */
.collection-workspace {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface-raised);
}
.collection-workspace[hidden] {
  display: none;
}
.collection-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.collection-workspace-heading {
  min-width: 0;
}
.collection-workspace-heading h2,
.collection-workspace-heading p {
  margin: 0;
}
.collection-workspace-heading h2 {
  font-size: 1.8rem;
}
.collection-workspace-close {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1.5rem;
}
.collection-workspace-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 0;
}
.collection-workspace-content button {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  text-align: left;
}
.collection-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.collection-filter-field {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.collection-filter-field label {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.collection-filter-field select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
}

/* =========================================================
   HUMIDOR CATALOG SEARCH — SHARED
   Permanent discovery control at the top of the Humidor.
   Existing HTML / JavaScript owns search behavior.
   ========================================================= */
.catalog-section {
  position: sticky;
  top: 4.5rem;
  z-index: 15;
  width: 100%;
  min-width: 0;
  padding-block: var(--space-2);
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}

.catalog-content {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.catalog-search {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.catalog-search-field {
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-search-field input {
  width: 100%;
  min-height: var(--control-height-lg);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.catalog-search-field input::placeholder {
  color: var(--color-text-subtle);
}

.catalog-search-field input:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.catalog-search-action {
  flex: 0 0 auto;
}

.catalog-search-action button {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  min-height: var(--control-height-lg);
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}

.catalog-search-action button .ui-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  transform: none;
}

.catalog-search-action button::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  background: currentColor;
  mask: no-repeat center / contain;
  -webkit-mask: no-repeat center / contain;
  margin: auto;
}

.catalog-search-action button[aria-label="Search cigars"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.catalog-search-action button[aria-label="Clear search results"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.search-status {
  min-height: 1.35rem;
  font-size: var(--text-sm);
}

.search-status:empty {
  display: none;
}

.cigar-results-shell,
.cigar-results {
  width: 100%;
  min-width: 0;
}

.cigar-results-shell {
  max-height: 60dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

.cigar-results {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  /* Hovered/focused first-row cards rise by 1px; keep that edge inside the
     scrollport so its border and focus treatment are not clipped. */
  padding: 2px;
}

/* =========================================================
   SHARED MODAL / WORKSPACE SYSTEM
   Dossier-specific presentation remains in dossier.css.
   ========================================================= */
.cigar-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: var(--space-5);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.72);
}
.cigar-detail-overlay[hidden] {
  display: none;
}
.camera-capture-overlay {
  z-index: 2000;
}
.cigar-detail {
  position: relative;
  width: min(92%, 62rem);
  max-height: 88dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.cigar-detail-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-text);
  line-height: 1;
}

button svg,
.action-icon svg {
  display: block;
  flex: 0 0 auto;
  margin: auto;
}

img {
  max-width: 100%;
  height: auto;
}

.brand img,
.app-logo img,
.cigar-photo img,
.collection-photo img {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 36rem) {
  .collection-history-detail {
    gap: 0.55rem;
  }

  .collection-history-detail-nav .secondary-action {
    min-height: 2.25rem;
    padding: 0.4rem 0.65rem;
    font-size: var(--text-xs);
  }

  .collection-history-detail-header {
    align-items: flex-start;
    gap: 0.35rem;
  }

  .collection-history-detail-identity {
    flex-basis: 100%;
    gap: 0.15rem;
  }

  .collection-history-detail-name {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .collection-history-detail-dates {
    flex-basis: 100%;
    min-width: 0;
    text-align: left;
    font-size: var(--text-xs);
  }

  .collection-history-tab {
    min-height: 2.15rem;
    padding: 0.3rem 0.55rem;
  }

  .collection-history-overview-item,
  .collection-history-detail-row,
  .collection-history-storage-condition,
  .collection-history-note {
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
  }
}

/* First-run guide ------------------------------------------------------- */
#helpGuideOverlay.cigar-detail-overlay {
  /* Contextual guidance sits above its workspaces and the mobile dock.
     Camera capture retains its separate, higher-priority layer. */
  z-index: 2200;
  bottom: 0;
  height: 100dvh;
  max-height: 100dvh;
}

.help-guide {
  display: flex;
  flex-direction: column;
  width: min(34rem, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  min-height: min(31rem, calc(100dvh - 1rem));
  overflow-y: auto;
}

.help-guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 1rem 0 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-gold) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-gold) 12%, transparent);
  color: var(--color-gold);
}

.help-guide-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.help-guide-copy {
  color: var(--color-text-muted);
  line-height: 1.65;
}

.help-guide-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: auto 0 1.25rem;
  padding-top: 2rem;
}

.help-guide-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-border);
}

.help-guide-dots span.is-active {
  background: var(--color-gold);
  transform: scale(1.25);
}

.help-guide-actions,
.help-guide-actions > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.help-guide-actions {
  justify-content: space-between;
}

.help-guide-actions button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.help-guide .cigar-detail-close {
  width: 2.75rem;
  height: 2.75rem;
}

/* Keep the full Premium recommendation reachable when filters and a result
   exceed the available desktop or landscape height. This intentionally sits
   after the shared modal rule so its internal scroll owner wins. */
.cigar-detail.recommendation-panel {
  width: min(calc(100vw - 2rem), 44rem);
  max-height: calc(100dvh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .recommendation-overlay {
    align-items: stretch;
    padding: 0.5rem;
  }

  .cigar-detail.recommendation-panel {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .recommendation-panel > .eyebrow,
  .recommendation-panel > h2,
  .recommendation-panel > p {
    padding-right: 3rem;
  }

  .recommendation-form {
    margin-top: 0.5rem;
  }

  .recommendation-fields,
  .recommendation-form,
  .recommendation-result {
    gap: 0.65rem;
  }

  .recommendation-result {
    padding: 1rem;
  }
}

@media (max-width: 32.5rem) {
  .help-guide {
    min-height: calc(100dvh - 1rem);
  }

  .help-guide-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .help-guide-actions > div,
  .help-guide-actions button {
    width: 100%;
  }
}
.cigar-detail > .eyebrow,
.cigar-detail > h2,
.cigar-detail > .own-cigar-intro {
  flex: 0 0 auto;
}
.cigar-detail > h2 {
  max-width: calc(100% - 3.25rem);
  margin-bottom: var(--space-3);
}
.own-cigar-form,
#cigarDetailOverlay .cigar-detail {
  width: min(92%, 42rem);
}
#ownCigarForm,
#cigarDetailOverlay .cigar-detail-meta {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#ownCigarForm {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-right: var(--space-2);
  padding-bottom: var(--space-5);
}
.cigar-detail-actions {
  margin-top: var(--space-4);
}

/* =========================================================
   ANONYMOUS WELCOME
   Informational front door only. Account state and authorization remain
   owned by the existing server/session and device-continuity contracts.
   ========================================================= */
.anonymous-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 7vw, 5rem);
}
.anonymous-welcome[hidden] {
  display: none;
}
.anonymous-welcome-copy {
  min-width: 0;
}
.anonymous-welcome h1 {
  max-width: 13ch;
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(2.35rem, 7vw, 5.5rem);
  line-height: 0.98;
}
.anonymous-welcome-lede {
  max-width: 42rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.6;
}
.anonymous-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.anonymous-welcome-actions a {
  min-width: 10rem;
  text-decoration: none;
}
.anonymous-welcome-status {
  min-height: 1.4em;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.anonymous-welcome-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.anonymous-welcome-features li {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--quiet-shadow, 0 1rem 2.5rem rgba(18, 35, 29, 0.08));
}
.anonymous-welcome-features strong,
.anonymous-welcome-features span {
  display: block;
}
.anonymous-welcome-features strong {
  margin-bottom: var(--space-2);
  color: var(--quiet-forest, var(--color-accent));
}
.anonymous-welcome-features span {
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .anonymous-welcome {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px), (max-height: 500px) and (max-width: 950px) {
  .anonymous-welcome {
    padding-block: var(--space-4);
  }
  .anonymous-welcome-features {
    grid-template-columns: 1fr;
  }
  .anonymous-welcome-actions > a {
    width: 100%;
  }
}

.camera-capture-surface {
  width: min(94vw, 44rem);
  max-height: min(92dvh, 48rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}

.camera-capture-surface :where(h2, p) {
  margin: 0;
}

.camera-device-label {
  display: grid;
  gap: var(--space-2);
  font-weight: 700;
}

.camera-device-select {
  width: 100%;
}

.camera-preview {
  width: 100%;
  min-height: 12rem;
  max-height: min(52dvh, 30rem);
  display: block;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #08100d;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  .camera-capture-overlay {
    align-items: stretch;
    padding: 0;
  }

  .camera-capture-surface {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* =========================================================
   STORAGE AREA PRESENTATION
   Owned by dossier.css. app.css intentionally contains no
   Storage Area layout rules so the same DOM has one visual
   authority across manager and detail surfaces.
   ========================================================= */

/* =========================================================
   MOBILE — <= 700px
   Touch-first, vertical, progressive disclosure.
   ========================================================= */
@media (max-width: 700px) {
  .collection-row {
    cursor: pointer;
  }

  .site-header .shell {
    width: calc(100% - 1.5rem);
    min-height: 4rem;
  }
  .brand-logo {
    height: 2.6rem;
    max-width: 10.5rem;
  }
  .account-controls {
    gap: var(--space-2);
  }
  .account-handle {
    display: block;
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-action {
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }

  .treehouse-shell {
    padding-inline: var(--space-3);
  }
  .collection {
    gap: var(--space-3);
    padding-block: var(--space-3) var(--space-5);
  }
  .collection-heading h1 {
    font-size: 1.35rem;
  }
  .collection-tagline,
  .humidor-status {
    font-size: var(--text-sm);
  }

  .collection-snapshot-list {
    border-radius: var(--radius-md);
  }
  .collection-snapshot-item {
    padding: var(--space-3) var(--space-2);
    text-align: center;
    align-items: center;
  }
  .collection-snapshot-value {
    font-size: 1.5rem;
  }
  .collection-snapshot-label {
    font-size: 0.72rem;
  }

  .collection-content {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .collection-content > .collection-view,
  .collection-content > .collection-toolbar,
  .collection-content > .collection-context,
  .collection-content > .collection-results {
    width: 100%;
    margin: 0;
  }
  .collection-content > .collection-view {
    order: 1;
  }
  .collection-content > .collection-toolbar {
    order: 2;
  }
  .collection-content > .collection-context {
    order: 3;
  }
  .collection-content > .collection-results {
    order: 4;
  }
  .collection-view-list,
  .collection-toolbar-list {
    width: 100%;
    gap: 0;
  }
  .collection-view-item {
    flex: 1 1 50%;
  }
  .collection-toolbar-item {
    flex: 1 1 33.333%;
  }
  .collection-view-control,
  .collection-tool {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface-raised);
  }
  .collection-view-item:first-child .collection-view-control,
  .collection-toolbar-item:first-child .collection-tool {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
  .collection-view-item:last-child .collection-view-control,
  .collection-toolbar-item:last-child .collection-tool {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .collection-view-item + .collection-view-item .collection-view-control,
  .collection-toolbar-item + .collection-toolbar-item .collection-tool {
    border-left: 0;
  }
  .collection-tool-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #17130e;
  }
  .collection-view-control.is-active {
    background: var(--color-accent-soft);
  }

  .collection-results {
    max-height: 64dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .collection-results:not(.is-compact) {
    gap: var(--space-3);
  }
  .collection-results:not(.is-compact) .collection-row {
    flex: 1 1 calc(50% - (var(--space-3) / 2));
    max-width: calc(50% - (var(--space-3) / 2));
    min-height: 10rem;
  }
  .collection-results:not(.is-compact) .collection-row-media {
    aspect-ratio: 1 / 1;
  }
  .collection-results:not(.is-compact) .collection-row-identity {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .collection-results:not(.is-compact) .collection-row-name {
    font-size: var(--text-base);
  }
  .collection-results:not(.is-compact) .collection-row-status,
  .collection-results:not(.is-compact) .collection-row-storage-desktop,
  .collection-results:not(.is-compact) .collection-row-manage {
    display: none;
  }

  .collection-results.is-compact .collection-row {
    gap: 3%;
    padding: var(--space-2);
  }
  .collection-results.is-compact .collection-row-media {
    flex-basis: 3.25rem;
    width: 3.25rem;
  }
  .collection-results.is-compact .collection-row-identity {
    flex: 1 1 48%;
  }
  .collection-results.is-compact .collection-row-status {
    flex: 0 1 28%;
    font-size: var(--text-xs);
  }
  .collection-results.is-compact .collection-row-storage-desktop {
    display: none;
  }
  .collection-results.is-compact .collection-row-manage-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .collection-destination-list {
    flex-direction: column;
  }
  .collection-destination-control {
    padding: var(--space-3);
  }

  .collection-workspace {
    position: fixed;
    inset: 0;
    z-index: 100;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }
  .collection-workspace-header {
    flex: 0 0 auto;
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4)
      var(--space-4);
  }
  .collection-workspace-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    padding: var(--space-4) var(--space-4)
      max(var(--space-6), env(safe-area-inset-bottom));
  }

  .catalog-section {
    top: 4rem;
  }
  .catalog-search {
    flex-direction: row;
  }
  .catalog-content {
    padding: var(--space-3);
  }
  .cigar-results-shell {
    max-height: 65dvh;
  }

  .cigar-results {
    flex-direction: column;
  }
  .cigar-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 6.25rem;
  }

  .cigar-detail-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--color-surface);
  }
  .cigar-detail,
  .own-cigar-form,
  #cigarDetailOverlay .cigar-detail {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4)
      max(var(--space-4), env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    border: 0;
    border-radius: 0;
  }
  .cigar-detail-close {
    top: max(var(--space-3), env(safe-area-inset-top));
    right: var(--space-3);
  }
  .cigar-detail-actions {
    flex-direction: column;
  }
  .cigar-detail-actions button {
    width: 100%;
  }
  #ownCigarForm {
    padding-right: 0;
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }

  .collection-history-detail-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .collection-history-detail-identity,
  .collection-history-detail-dates {
    flex: 1 1 100%;
    min-width: 0;
  }

  .collection-history-detail-dates {
    text-align: left;
    white-space: normal;
  }
}

/* =========================================================
   TABLET — 701px to 1100px
   First-class touch layout: two-column collection + side stack.
   ========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
  .collection-row {
    cursor: pointer;
  }

  .site-header .shell {
    width: calc(100% - 3rem);
  }
  .brand-logo {
    height: 3rem;
    max-width: 15rem;
  }
  .treehouse-shell {
    width: 100%;
    padding-inline: var(--space-6);
  }
  .collection {
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
  .collection-heading h1 {
    font-size: 1.75rem;
  }

  .collection-content {
    align-items: center;
  }
  .collection-content > .collection-view {
    margin-right: auto;
  }
  .collection-content > .collection-toolbar {
    margin-left: 0;
  }

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

  .collection-results:not(.is-compact) .collection-row {
    flex: 1 1 calc((100% - var(--space-3)) / 2);
    max-width: calc((100% - var(--space-3)) / 2);
  }

  .collection-results:not(.is-compact) .collection-row-media {
    height: 8.5rem;
    aspect-ratio: auto;
    flex: 0 0 auto;
  }

  .collection-results.is-compact .collection-row {
    min-height: 4.75rem;
  }

  .collection-results.is-compact .collection-row-media {
    flex-basis: 3.75rem;
    width: 3.75rem;
  }

  .collection-destination-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .collection-destination-item {
    flex: 1 1 calc((100% - var(--space-3)) / 2);
    min-width: calc((100% - var(--space-3)) / 2);
  }

  .collection-destination-control {
    height: 100%;
    padding: var(--space-4);
  }

  .collection-workspace {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 30;
    width: min(28rem, 70vw);
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  }

  .cigar-detail {
    width: 94%;
    max-width: 56rem;
    max-height: 90dvh;
  }
  .own-cigar-form {
    width: 88%;
    max-width: 42rem;
  }
}

/* =========================================================
   DESKTOP / LAPTOP — >= 1101px
   Persistent wide-screen collection workspace.
   ========================================================= */
@media (min-width: 1101px) {
  .site-header .shell {
    width: min(calc(100% - 4.25rem), 1500px);
    min-height: 4.5rem;
  }
  .brand-logo {
    height: 3.1rem;
    max-width: 18rem;
  }

  .treehouse-shell {
    width: min(calc(100% - 4.25rem), 1500px);
    padding-inline: 0;
  }
  .collection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    padding-block: var(--space-4) var(--space-7);
  }
  .collection-header {
    flex: 0 0 100%;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
  }
  .collection-heading h1 {
    font-size: 1.85rem;
  }
  .collection-snapshot {
    flex: 0 0 100%;
    min-width: 0;
  }
  .collection-snapshot-list {
    max-width: none;
  }
  .collection-snapshot-item {
    padding: 0.9rem 1.1rem;
  }
  .collection-snapshot-value {
    font-size: 1.65rem;
  }
  .collection-snapshot-label {
    margin-top: 0.2rem;
  }

  .collection-content {
    flex: 1 1 72%;
    min-width: 0;
    align-self: flex-start;
    row-gap: var(--space-3);
    padding: var(--space-3);
  }

  .collection:has(.collection-results.is-history) .collection-content,
  .collection-content.is-history {
    flex-basis: 100%;
  }

  .collection-content > .collection-view {
    margin-right: 0;
  }

  .collection-content > .collection-toolbar {
    margin-left: auto;
  }

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

  .collection-results:not(.is-compact) .collection-row {
    flex: 1 1 calc((100% - (var(--space-3) * 2)) / 3);
    max-width: calc((100% - (var(--space-3) * 2)) / 3);
  }

  .collection-results:not(.is-compact) .collection-row-media {
    height: 9rem;
    aspect-ratio: auto;
    flex: 0 0 auto;
  }

  .collection-results.is-compact .collection-row {
    min-height: 4.75rem;
  }

  .collection-destinations {
    flex: 0 1 26%;
    min-width: 19.375rem;
    align-self: flex-start;
  }

  .collection-destination-list {
    flex-direction: column;
    gap: var(--space-3);
  }

  .collection-destination-control {
    min-height: 5.25rem;
    padding: var(--space-4);
  }

  .collection-workspace {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 30;
    width: min(28rem, 35vw);
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  }
}

/* =========================================================
   TREEHOUSE — COMPLETE STRUCTURAL COVERAGE
   Current production HTML + app.js render contract.
   These rules intentionally style concrete application surfaces that
   otherwise inherit only generic element rules.
   ========================================================= */

[hidden] {
  display: none !important;
}

/* Catalog aliases / generated result cards */
.cigar-search-panel,
.cigar-search {
  width: 100%;
}
.search-status {
  margin: 0;
  color: var(--color-text-muted);
}
.cigar-search-action {
  flex: 0 0 auto;
}
.cigar-card {
  flex: 1 1 15rem;
  min-width: min(100%, 14rem);
  max-width: 22rem;
  min-height: 5.75rem;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.cigar-card > :not(.cigar-card-image) { grid-column: 2; }
.cigar-card > .cigar-card-image { grid-row: 1 / span 5; }
.cigar-card:hover,
.cigar-card:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-surface);
  transform: translateY(-1px);
}
.cigar-card .humidor-card-name {
  margin: 0;
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1.2;
}
.cigar-card .humidor-card-brand {
  margin: 0.35rem 0 0;
  color: #9bb48e;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cigar-card-meta,
.cigar-card-wrapper {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.cigar-card-wrapper {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .cigar-results-shell {
    max-height: min(52dvh, 28rem);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .cigar-results {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-height: min(52dvh, 28rem);
    padding: var(--space-1);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cigar-card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0.7rem 2.25rem 0.7rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .cigar-card:last-child {
    border-bottom: 0;
  }

  .cigar-card::after {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: var(--color-accent);
    content: "›";
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-50%);
  }

  .cigar-card:hover,
  .cigar-card:focus-visible {
    background: linear-gradient(90deg, var(--color-accent-soft), transparent);
    transform: none;
  }

  .cigar-card .humidor-card-name {
    padding-right: var(--space-2);
    font-size: 0.98rem;
    line-height: 1.15;
  }

  .cigar-card .humidor-card-brand {
    margin-top: 0.25rem;
    font-size: 0.65rem;
  }

  .cigar-card-meta,
  .cigar-card-wrapper {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .cigar-card-meta {
    color: var(--color-text-muted);
  }

  .collection-results.is-history { gap: var(--space-2); }
  .collection-results.is-history .collection-history-header { padding-bottom: var(--space-2); }
  .collection-results.is-history .collection-history-row {
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .collection-results.is-history .collection-history-dates {
    margin-top: 4px;
    font-size: var(--text-xs);
  }
  .collection-history-detail { gap: var(--space-3); }
  .collection-history-detail-header { gap: var(--space-2); }
  .collection-history-tabs { gap: 2px; }
  .collection-history-tab {
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  .collection-history-overview-grid,
  .collection-history-timeline,
  .collection-history-notes { gap: var(--space-2); }
  .collection-history-overview-item,
  .collection-history-detail-row,
  .collection-history-storage-condition,
  .collection-history-note { padding: var(--space-2) var(--space-3); }
}

/* Shared detail rows used by catalog detail and read-only surfaces */
.cigar-detail-row,
.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.cigar-detail-row:last-child,
.detail-row:last-child {
  border-bottom: 0;
}
.cigar-detail-label,
.detail-label {
  flex: 0 1 42%;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.cigar-detail-value,
.detail-value {
  flex: 1 1 54%;
  color: var(--color-text);
  text-align: right;
  overflow-wrap: anywhere;
}
#cigarDetailOverlay select.cigar-detail-value {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: left;
}
#cigarDetailOverlay select.cigar-detail-value:focus {
  border-color: var(--color-accent);
}
#addToHumidorButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.detail-list {
  display: flex;
  flex-direction: column;
}

/* Collection generated aliases */
.humidor-grid {
  width: 100%;
  min-width: 0;
}
.collection-row-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 5rem;
  background: var(--color-surface-soft);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 0.12em;
}
.collection-row-quantity {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.collection-row-manage-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.collection-toolbar-add,
.collection-toolbar-sort,
.collection-toolbar-filter,
.collection-destination-storage,
.collection-destination-history {
  min-width: 0;
}
.collection-sort-menu,
.collection-filter-menu {
  min-width: min(22rem, calc(100vw - 2rem));
}

/* Generic application states */
.empty-state {
  width: 100%;
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-surface-soft);
}
.panel-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel-tab {
  min-height: 2.5rem;
}
.panel-content {
  width: 100%;
  min-width: 0;
}
.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.summary-item {
  flex: 1 1 10rem;
  min-width: 0;
}

/* Collection History — standalone archived collection lifecycle */
.collection:has(.collection-results.is-history) .collection-content {
  width: 100%;
}

.collection:has(.collection-results.is-history) {
  padding-bottom: 0.5rem;
}

.collection:has(.collection-results.is-history) .collection-view,
.collection:has(.collection-results.is-history) .collection-toolbar,
.collection:has(.collection-results.is-history) .collection-context,
.collection:has(.collection-results.is-history) .collection-destinations {
  display: none;
}

.collection-results.is-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-height: none;
  overflow: visible;
  max-width: 68rem;
  margin-inline: auto;
}

.collection-results.is-history .collection-history-header {
  width: 100%;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.collection-results.is-history .collection-history-header h2 {
  margin: 0;
}

.collection-history-header-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.collection-history-lifecycle {
  margin: 0;
  color: var(--color-text-muted);
}

.collection-history-dates small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.collection-history-list {
  display: grid;
  gap: var(--space-2);
}

.collection-results.is-history .collection-history-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: 0.65rem 0.75rem;
}

.collection-results.is-history .collection-history-row.is-pending-delete {
  opacity: 0.58;
  filter: grayscale(0.75);
  background: var(--color-surface-soft);
}

.collection-results.is-history .collection-history-row.is-pending-delete .collection-history-row-mark {
  color: var(--color-text-muted);
}

.collection-results.is-history .collection-history-row.is-pending-delete button {
  cursor: not-allowed;
}

.collection-history-row-mark {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 0.55rem;
  background: var(--color-surface-raised);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
}

.collection-results.is-history .collection-history-details {
  flex: 1 1 auto;
  min-width: 0;
}

.collection-results.is-history .collection-history-details h3,
.collection-results.is-history .collection-history-dates {
  margin: 0;
}

.collection-results.is-history .collection-history-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-3);
  margin-top: 0.25rem;
  color: var(--color-text-muted);
}

.collection-history-dates > span {
  display: grid;
  gap: 0.1rem;
}

.collection-history-dates strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 650;
}

.collection-history-lifecycle {
  margin-top: 0.1rem;
  font-size: var(--text-xs);
}
.collection-history-content,
.collection-history-details,
.collection-history-detail,
.collection-history-overview,
.collection-history-timeline,
.collection-history-notes {
  width: 100%;
  min-width: 0;
}
.collection-history-header,
.collection-history-timeline-top,
.collection-history-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.collection-history-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.collection-history-detail-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.collection-history-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.collection-history-detail-identity {
  flex: 1 1 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.collection-history-eyebrow {
  margin: 0;
}
.collection-history-detail-name {
  margin: 0;
}

/* Archived records use the same visual hierarchy and scroll ownership as the live Dossier. */
.collection-history-detail.archived-dossier {
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: 58rem;
  margin-inline: auto;
}
.archived-dossier .collection-history-detail-header {
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.archived-dossier .collection-history-detail-identity {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.archived-dossier-mark {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-surface-raised);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  padding-bottom: 0.1em;
}
.archived-dossier-copy {
  min-width: 0;
}
.archived-dossier .collection-history-detail-dates {
  min-width: 0;
  margin-top: var(--space-1);
  text-align: left;
  white-space: normal;
}
.archived-dossier-facts {
  flex: 0 1 auto;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: right;
}
.archived-dossier .collection-history-tabs {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-border);
}
.archived-dossier .collection-history-tab {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0;
}
.archived-dossier .collection-history-content {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  overflow: visible;
}

@media (max-width: 640px) {
  .collection-results.is-history .collection-history-header {
    align-items: stretch;
  }
  .collection-results.is-history .collection-history-header > .secondary-action {
    width: 100%;
  }
  .collection-results.is-history .collection-history-row {
    display: flex;
  }
  .collection-results.is-history .collection-history-row > .secondary-action {
    min-width: 2.5rem;
    padding-inline: 0.65rem;
  }
  .collection-results.is-history .collection-history-row > .secondary-action span {
    display: none;
  }
  .collection-history-detail.archived-dossier {
    max-height: none;
  }
  .archived-dossier .collection-history-detail-header,
  .archived-dossier .collection-history-detail-header {
    flex-direction: column;
  }
  .archived-dossier-facts {
    width: 100%;
    text-align: left;
  }
}
.collection-history-detail-dates {
  flex: 0 1 30%;
  min-width: 10rem;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.collection-history-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.collection-history-tabs::-webkit-scrollbar {
  display: none;
}
.collection-history-tab {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
}
.collection-history-tab.is-active {
  background: var(--color-surface-raised);
  color: var(--color-accent);
}
.collection-history-tab-section {
  width: 100%;
}
.collection-history-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-border);
}
.collection-history-overview-item {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.collection-history-overview-item > span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.25;
}
.collection-history-overview-item > strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.collection-history-row,
.collection-history-overview-item,
.collection-history-detail-row,
.collection-history-storage-condition,
.collection-history-note {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.collection-history-overview-item {
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-raised);
}
.collection-history-overview .collection-history-section-title {
  margin: 0 0 0.4rem;
}

@media (max-width: 760px) {
  .collection-history-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .collection-history-overview-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* =========================================================
   COLLECTION ARCHIVE — QUIET LEDGER

   Historical reference is intentionally not a dashboard or a
   second active-cigar workspace. It is a compact reading surface.
   ========================================================= */
.collection-results.is-history {
  max-width: 56rem;
}

.collection-history-detail.archived-dossier {
  max-width: 52rem;
  gap: 0;
}

.archived-dossier .collection-history-detail-nav {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border);
}

.archived-dossier .collection-history-detail-header {
  display: flex;
  align-items: baseline;
  padding: 0.75rem 0 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.archived-dossier .collection-history-detail-identity {
  display: block;
}

.archived-dossier .collection-history-eyebrow {
  margin-bottom: 0.15rem;
}

.archived-dossier .collection-history-detail-name {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.25;
}

.archived-dossier-facts {
  white-space: nowrap;
}

.archive-ledger-overview {
  padding: 0.55rem 0 0.7rem;
  border-top: 1px solid var(--color-border);
}

.archive-ledger-overview .collection-history-section-title {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-ledger-overview .collection-history-overview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.archive-ledger-overview .collection-history-overview-item {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.archive-ledger-overview .collection-history-overview-item > span,
.archive-ledger-overview .collection-history-overview-item > strong {
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.archive-ledger-overview .collection-history-overview-item > span::after {
  content: ":";
}

.archive-ledger-overview .collection-history-overview-item > strong {
  font-weight: 700;
}

.archive-ledger-sections {
  border-top: 1px solid var(--color-border);
}

.archive-ledger-section {
  border-bottom: 1px solid var(--color-border);
}

.archive-ledger-section > summary {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.archive-ledger-section > summary::-webkit-details-marker {
  display: none;
}

.archive-ledger-section > summary::after {
  content: "+";
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
}

.archive-ledger-section[open] > summary::after {
  content: "−";
}

.archive-ledger-section > summary strong {
  font-size: var(--text-sm);
  font-weight: 750;
}

.archive-ledger-section > summary span {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.archive-ledger-section-content {
  padding: 0 0 0.75rem;
}

.archive-ledger-section-content .collection-history-section-title {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.archive-ledger-section-content .collection-history-empty {
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.archive-ledger-section-content .collection-history-storage-condition,
.archive-ledger-section-content .collection-history-note {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.archive-ledger-section-content .collection-history-timeline,
.archive-ledger-section-content .collection-history-notes,
.archive-ledger-section-content .collection-history-detail-list {
  max-height: none;
  gap: 0;
  overflow: visible;
}

.archive-ledger-section-content .collection-history-timeline-item {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.5rem 0;
}

.archive-ledger-section-content .collection-history-timeline-marker {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .archived-dossier .collection-history-detail-header {
    align-items: flex-start;
  }

  .archived-dossier-facts {
    white-space: normal;
  }

  .archive-ledger-overview .collection-history-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
  }

  .archive-ledger-overview .collection-history-overview-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
  }
}
.collection-history-detail-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.collection-history-storage-condition-name {
  color: var(--color-text);
  font-weight: 700;
}
.collection-history-storage-condition-values,
.collection-history-timeline-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.collection-history-timeline-note {
  color: var(--color-text-muted);
}
.collection-history-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

/* Shared timeline language */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-3);
}
.timeline-marker {
  flex: 0 0 0.65rem;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.timeline-content {
  flex: 1 1 auto;
  min-width: 0;
}
.timeline-summary {
  color: var(--color-text);
}
.timeline-date,
.timeline-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =========================================================
   COMPLETE RESPONSIVE HANDOFFS
   ========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
  .cigar-card {
    flex: 1 1 calc(50% - var(--space-3));
  }
  .summary-item {
    flex: 1 1 calc(33.333% - var(--space-3));
  }
}

@media (min-width: 1101px) {
  .cigar-card {
    flex: 1 1 calc(25% - var(--space-3));
    max-width: calc(25% - 0.75rem);
  }
  .summary-item {
    flex: 1 1 0;
  }
}
/* =========================================================
   GLOBAL — HIDDEN SCROLLBAR CHROME

   Preserve intentional scrolling while removing visible
   browser scrollbar presentation.
   ========================================================= */

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* Tablet + Desktop */
@media (min-width: 701px) {
  .collection-results {
    width: 100%;
    min-width: 0;

    /* Let the collection breathe, then stop growing. */
    max-height: clamp(38rem, 65dvh, 52rem);

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: auto;

    /* Hand scrolling back to the page at either results boundary. */
    scrollbar-width: none;
  }

  .collection-results::-webkit-scrollbar {
    display: none;
  }
}

/* =========================================================
   TABLET LANDSCAPE — FULL-VIEW INTERACTION SURFACES

   Tablet landscape keeps the accepted full-view presentation.
   Existing Sort / Filter workspaces and shared modal/form overlays
   retain their current lifecycle, DOM, and internal scroll ownership.
   ========================================================= */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: landscape) {
  .collection-workspace {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .collection-workspace-header {
    flex: 0 0 auto;
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4)
      var(--space-3);
  }

  .collection-workspace-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    padding: var(--space-3) var(--space-4)
      max(var(--space-4), env(safe-area-inset-bottom));
  }

  .cigar-detail-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--color-surface);
  }

  .cigar-detail,
  .own-cigar-form,
  #cigarDetailOverlay .cigar-detail {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4)
      max(var(--space-3), env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    border: 0;
    border-radius: 0;
  }

  .cigar-detail-close {
    top: max(var(--space-2), env(safe-area-inset-top));
    right: var(--space-3);
  }

  /* Account is a focused settings dialog on tablet. Operational cigar
     workspaces keep their full-view tablet behavior above. */
  .account-profile-overlay {
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.72);
  }

  .account-profile-overlay .account-profile {
    width: min(calc(100vw - 3rem), 46rem);
    height: auto;
    max-width: 46rem;
    max-height: calc(100dvh - 3rem);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42);
  }
}

/* =========================================================
   PHONE LANDSCAPE — CENTERED INTERACTION SURFACES

   Phone landscape keeps the existing interaction model but presents
   temporary work as a centered surface over the Collection. Headers
   and close controls remain outside the scrolling content region so
   the X is always reachable while the active content can scroll.
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .collection-workspace {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 100;
    width: min(calc(100vw - 24px), 42rem);
    height: auto;
    max-height: calc(100dvh - 20px);
    min-height: 0;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42);
  }

  .collection-workspace-header {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
  }

  .collection-workspace-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .cigar-detail-overlay {
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.72);
  }

  .cigar-detail,
  .own-cigar-form,
  #cigarDetailOverlay .cigar-detail {
    width: min(100%, 42rem);
    max-width: 42rem;
    height: auto;
    max-height: calc(100dvh - 20px);
    min-height: 0;
    padding: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42);
  }

  #ownCigarForm,
  #cigarDetailOverlay .cigar-detail-meta {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .cigar-detail-close {
    top: var(--space-2);
    right: var(--space-2);
  }
}


/* =========================================================
   ACCOUNT PROFILE — IDENTITY FOUNDATION

   Uses the established Treehouse overlay/form language.
   Collection, Storage, and History composition extends this
   same surface below without changing identity ownership.
   ========================================================= */

.account-profile {
  display: flex;
  flex-direction: column;
  width: min(100%, 64rem);
}

.account-profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 4rem var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.account-profile-header h2,
.account-profile-header p,
.account-profile-region-heading h3,
.account-profile-region-heading p {
  margin: 0;
}

.account-profile-intro {
  max-width: 38rem;
  margin-top: var(--space-2) !important;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.account-profile-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  padding-block: var(--space-2);
  text-align: right;
}

.account-profile-identity strong {
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.account-profile-identity span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: capitalize;
}

.account-profile form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.account-profile-region-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-3);
}

.account-profile-region-heading > div {
  flex: 0 1 auto;
}

.account-profile-region-heading h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.15;
}

.account-profile-region-heading > p {
  max-width: 28rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: right;
}

.account-profile-form {
  display: grid !important;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(18rem, 1.2fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.account-profile-form .form-field {
  min-width: 0;
}

.account-profile-form .form-field:nth-child(2) {
  grid-row: span 2;
}

.account-profile-form textarea {
  min-height: 8.2rem;
  resize: vertical;
}

.account-profile-form .account-profile-visibility {
  align-self: stretch;
  margin-top: 0;
  background: var(--color-surface);
}

.account-profile-form .account-profile-status,
.account-profile-form .cigar-detail-actions {
  grid-column: 1 / -1;
}

.account-profile-form .account-profile-status:empty {
  display: none;
}

.account-profile-form .cigar-detail-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.account-profile-status {
  min-height: 1.5em;
  margin-top: var(--space-3);
}
.account-profile-visibility,
.member-discovery-exact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
}
.account-profile-visibility {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}
.account-profile-visibility input,
.member-discovery-exact input {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
}
.account-profile-visibility span {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.account-profile-visibility small {
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.45;
}
.account-community-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}
.account-community-stats > div {
  flex: 1 1 7rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.account-community-stats strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-text);
}
.account-community-stats span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================================
   COMMUNITY / PUBLIC MEMBER DIRECTORY

   Dedicated browse-first workspace launched from Account/Profile.
   Public discovery and friendship remain server-authoritative; this
   surface owns presentation, responsive scroll, and workspace state only.
   The accepted Quiet Dock is intentionally unchanged.
   ========================================================= */
.community-overlay {
  z-index: 130;
  padding: var(--space-4);
}

.cigar-card-image {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.cigar-card-image img,
.cigar-detail-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cigar-detail-hero {
  width: 100%;
  height: clamp(10rem, 32vh, 18rem);
  margin: 0 0 var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

@media (max-width: 700px) {
  .cigar-card-image {
    width: 3.5rem;
    height: 3.5rem;
    flex-basis: 3.5rem;
  }
}

.trade-invitations {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--quiet-border, rgba(45, 75, 59, 0.2));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-surface, #fffaf0) 92%, var(--color-accent, #2d4b3b));
}

.trade-invitations .community-panel-heading,
.trade-invitation-card .member-relationship-actions {
  margin: 0;
}

.trade-invitation-list {
  display: grid;
  gap: 0.75rem;
}

.trade-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trade-heading-actions .secondary-action {
  min-height: 2.5rem;
}

.trade-attention-count {
  min-width: 1.45rem;
  min-height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  vertical-align: middle;
}

.community-tab.has-attention {
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.trade-invitation-group,
.trade-history > div {
  display: grid;
  gap: var(--space-2);
}

.trade-invitation-group-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.trade-invitation-group.is-incoming {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent-soft) 45%, var(--color-surface));
}

.trade-history {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.trade-history > summary {
  cursor: pointer;
  padding: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
}

.trade-history > div {
  padding: 0 var(--space-3) var(--space-3);
}

.friend-connection-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 560px) {
  .trade-invitations > .community-panel-heading,
  .trade-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .trade-heading-actions .secondary-action {
    width: 100%;
  }
}

.trade-invitation-card,
.trade-invitation-form {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--quiet-border, rgba(45, 75, 59, 0.2));
  border-radius: 0.85rem;
  background: var(--color-surface, #fffaf0);
}

.trade-invitation-card :where(h5, p),
.trade-invitation-form :where(label, p) {
  margin: 0;
}

.trade-invitation-form label:not(.trade-safety-acknowledgment) {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.trade-invitation-form :where(select, input, textarea) {
  width: 100%;
}

.trade-safety-acknowledgment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  line-height: 1.4;
}

.trade-safety-acknowledgment input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

.trade-invitation-note {
  padding-left: 0.7rem;
  border-left: 3px solid var(--color-accent, #2d4b3b);
}
body.community-workspace-open {
  overflow: hidden;
}
.community-workspace {
  width: min(calc(100vw - 2rem), 1200px);
  height: min(calc(100dvh - 2rem), 900px);
  max-height: calc(100dvh - 2rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.36);
}

/* Laptop windows need the records, not presentation chrome, to own the space. */
@media (min-width: 1101px) and (max-height: 850px) {
  .community-overlay {
    padding: 0.75rem;
  }

  .community-workspace {
    width: min(calc(100vw - 1.5rem), 1200px);
    height: calc(100dvh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .community-workspace-header {
    align-items: center;
    padding: 0.75rem 1rem;
  }

  .community-workspace-header .eyebrow,
  .community-workspace-header > div > p:last-child {
    display: none;
  }

  .community-workspace-header h2 {
    margin: 0;
    font-size: 2rem;
  }

  .community-workspace-refresh,
  .community-workspace-close {
    min-height: 2.5rem;
    height: 2.5rem;
  }

  .community-main {
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
  }

  .community-directory-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding-bottom: 0.5rem;
  }

  .community-directory-search .member-discovery-search {
    min-width: 0;
  }

  .community-directory-search > .form-help {
    display: none;
  }

  .community-tabs {
    min-height: 2.5rem;
    padding: 0.2rem;
  }

  .community-tab {
    min-height: 2.2rem;
    padding-block: 0.35rem;
  }

  .community-panel-heading {
    margin-bottom: 0.5rem;
  }

  .community-connections-summary {
    flex-basis: 18rem;
    padding: 1rem;
  }
}
.community-workspace-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.community-workspace-header h2,
.community-workspace-header p {
  margin: 0;
}
.community-workspace-header h2 {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
}
.community-workspace-header > div > p:last-child {
  max-width: 46rem;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}
.community-workspace-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.community-workspace-refresh {
  min-height: 2.75rem;
}
.community-workspace-close {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
}
.community-workspace-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.community-main {
  flex: 1 1 70%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  overflow: hidden;
}
.community-directory-search {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  background: var(--color-surface);
}

#moderatorCatalogSearch {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-block: var(--space-2);
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
}
.community-search-label {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.member-discovery-search {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.member-discovery-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}
.member-discovery-search button {
  flex: 0 0 auto;
  min-height: 44px;
}
.community-exact-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.community-exact-toggle.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}
.community-exact-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  font-weight: 800;
}
.community-exact-toggle::before {
  content: "";
  position: static;
  flex: 0 0 0.65rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(85, 119, 95, 0.12);
}
.community-exact-toggle[data-mode="exact"]::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.community-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.community-tabs::-webkit-scrollbar {
  display: none;
}
.community-tab {
  flex: 1 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.community-tab span {
  min-width: 1.35rem;
  min-height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-xs);
}
.community-tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.community-tab-panel {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  padding: var(--space-1) var(--space-1) var(--space-4);
}
.community-tab-panel[hidden] {
  display: none;
}
.community-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.community-panel-heading h3,
.community-panel-heading p {
  margin: 0;
}
.community-panel-heading h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.community-refresh {
  flex: 0 0 auto;
}
.member-discovery-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.community-directory-results {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.community-directory-results > .member-profile-card {
  flex: 1 1 calc(50% - var(--space-2));
  min-width: min(100%, 18rem);
}
.community-connection-results > .member-profile-card {
  width: 100%;
}
.member-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.member-profile-card h4,
.member-profile-card p {
  margin: 0;
}
.member-profile-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.member-profile-avatar {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}
.member-profile-identity h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.member-profile-identity p {
  color: var(--color-text-muted);
}
.member-profile-badge {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}
.member-profile-view {
  align-self: flex-start;
  min-height: 40px;
}
.member-profile-expanded {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.member-profile-expanded[hidden] {
  display: none;
}
.member-relationship-state {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 800;
}
.member-relationship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.member-relationship-actions button {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: var(--ui-control-height-compact, 40px);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}
.member-action-status {
  min-height: 1.25em;
}
.member-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.member-report-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.member-report-form textarea {
  resize: vertical;
}
.member-connections-empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.community-load-more {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
}
.community-load-more[hidden] {
  display: none;
}
.community-privacy-note,
.community-connections-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.community-connections-summary {
  flex: 0 0 min(19rem, 31%);
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.moderator-catalog-heading {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.community-connections-summary > * {
  flex-shrink: 0;
}
.community-connections-heading h3,
.community-connections-heading p {
  margin: 0;
}
.community-connections-heading h3 {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.community-connection-links {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.community-connection-links button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
}
.community-connection-links button:last-child {
  border-bottom: 0;
}
.community-connection-links button:hover,
.community-connection-links button.is-active {
  background: var(--color-surface-raised);
}
.community-connection-links strong {
  min-width: 1.6rem;
  min-height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-xs);
}
.community-connections-summary blockquote {
  margin: auto 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  text-align: center;
}

@media (max-width: 1100px) {
  .community-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--color-surface);
  }
  .community-workspace {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .community-connections-summary {
    display: none;
  }
}

@media (max-width: 700px) {
  .community-workspace-header {
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) var(--space-3);
  }
  .community-workspace-header h2 {
    font-size: 2rem;
  }
  .community-workspace-refresh {
    padding-inline: var(--space-3);
  }
  .community-workspace-header > div > p:last-child {
    font-size: var(--text-sm);
  }
  .community-main {
    padding: var(--space-3) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
  }
  .member-discovery-search {
    flex-wrap: wrap;
  }
  .member-discovery-search input[type="search"] {
    flex: 1 1 100%;
  }
  .member-discovery-search button {
    flex: 1 1 calc(50% - var(--space-2));
  }
  .community-tabs {
    justify-content: flex-start;
  }
  .community-tab {
    flex: 0 0 auto;
  }
  .community-directory-results {
    flex-direction: column;
  }
  .community-directory-results > .member-profile-card {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 1100px) and (orientation: landscape) and (max-height: 560px) {
  .community-workspace-header {
    padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-4) var(--space-2);
  }
  .community-workspace-header h2 {
    font-size: 1.7rem;
  }
  .community-workspace-header > div > p:last-child {
    display: none;
  }
  .community-main {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) max(var(--space-2), env(safe-area-inset-bottom));
  }
  .community-directory-search {
    gap: var(--space-1);
  }
  .community-directory-search > .form-help {
    display: none;
  }
  .community-tabs {
    min-height: 42px;
  }
}

/* =========================================================
   ACCOUNT PROFILE — COLLECTION / STORAGE / HISTORY COMPOSITION

   Accepted Lounge Profile direction. Uses Treehouse's existing
   design tokens; this remains a read-only projection of the
   established Collection / Storage / History domains.
   ========================================================= */

.account-profile {
  overflow-y: auto;
  overflow-x: hidden;
}

/* The profile panel owns vertical scrolling. Its direct sections must retain
   their natural height or a single details row can collapse to its borders
   when the combined profile content exceeds the viewport. */
.account-profile > * {
  flex-shrink: 0;
}

.account-profile-settings-grid,
.account-profile-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}

.account-profile-settings-grid > [hidden] {
  display: none;
}

.account-profile-sections {
  margin-top: 0;
  padding-bottom: var(--space-2);
}

/* Analytics owns an internal card grid. Give that grid the full Profile row
   so desktop cards do not become a two-column layout nested inside one
   half-width Profile column. */
#accountProfileAnalytics {
  grid-column: 1 / -1;
}

#accountProfileAnalyticsBody {
  min-width: 0;
}

.account-profile-treehouse-heading {
  margin-top: var(--space-6);
}

.account-profile-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--color-surface-soft),
    var(--color-surface) 68%
  );
}

.account-profile-section::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-accent);
  content: "";
  opacity: 0.72;
}

.account-profile-section > summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 3px);
  cursor: pointer;
  list-style: none;
}

.account-profile-section > summary::-webkit-details-marker {
  display: none;
}

.account-profile-section > summary::after {
  flex: 0 0 auto;
  color: var(--color-accent);
  content: "⌄";
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
}

.account-profile-section[open] > summary::after {
  content: "⌃";
}

.account-profile-section-heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-profile-section-heading small {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-profile-section-heading > span {
  color: var(--color-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.1;
}

.account-profile-section > summary > strong {
  flex: 0 0 auto;
  color: var(--color-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
}

.account-profile-section-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
}

.account-profile-section[open] .account-profile-section-body {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.account-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}

.account-profile-stats > div {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 7rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.account-profile-stats strong {
  color: var(--color-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
}

.account-profile-stats span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#accountProfileMedia .account-profile-stats {
  flex-wrap: wrap;
}

#accountProfileMedia .account-profile-stats > div {
  flex-basis: min(10rem, calc(50% - var(--space-2)));
}

.account-profile-section-body > .secondary-action {
  align-self: flex-end;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-bottom: 1px solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-profile-section-body > .secondary-action:hover,
.account-profile-section-body > .secondary-action:focus-visible {
  background: transparent;
  color: var(--color-text);
}

.account-profile-history-latest {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.note-history-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.storage-history-row-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
}

.storage-history-row-actions .secondary-action {
  min-height: 2.25rem;
  padding-inline: var(--space-3);
}

.note-history-actions .secondary-action {
  min-height: 2.5rem;
  padding-inline: var(--space-3);
}

.danger-action {
  color: var(--color-danger);
}

@media (max-width: 700px) {
  .account-profile-header {
    display: block;
    padding-right: 3.25rem;
  }

  .account-profile-identity {
    justify-content: flex-start;
    width: fit-content;
    min-width: 0;
    margin-top: var(--space-3);
    text-align: left;
  }

  .account-profile-region-heading {
    display: block;
    margin-top: var(--space-4);
  }

  .account-profile-region-heading > p {
    margin-top: var(--space-1);
    text-align: left;
  }

  .account-profile-form,
  .account-profile-settings-grid,
  .account-profile-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-form {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .account-profile-form .form-field:nth-child(2) {
    grid-row: auto;
  }

  .account-profile-section > summary {
    gap: var(--space-2);
    min-height: 4rem;
    padding: var(--space-3);
  }

  .account-profile-section > summary > strong {
    font-size: var(--text-xs);
  }

  .account-profile-stats {
    gap: var(--space-2);
  }

  .account-profile-stats > div {
    padding: var(--space-2);
  }

  .account-profile-stats strong {
    font-size: var(--text-xl);
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .account-profile-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-form .form-field:nth-child(2) {
    grid-row: auto;
  }
}
.hunting-list {
  width: min(42rem, calc(100% - 2rem));
  max-height: min(48rem, calc(100vh - 2rem));
  overflow: auto;
}

.hunting-list > h2 {
  margin-bottom: var(--space-2);
}

.hunting-list > p {
  margin-bottom: 0;
}

.hunting-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.hunting-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.16));
  border-radius: 0.75rem;
}

.hunting-list-item h3,
.hunting-list-item p {
  margin: 0;
}

.personal-rating-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.personal-rating-button,
.personal-rating-clear {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Sync review stays compact and bounded inside the existing Profile screen. */
.sync-review-list {
  max-block-size: min(24rem, 55dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sync-review-card {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-muted, #746b60);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.sync-review-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  color: inherit;
}
.sync-review-card .cigar-detail-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.manage-photo-gallery-item.is-pending-delete {
  opacity: 0.62;
  pointer-events: none;
}

.manage-photo-gallery-item.is-pending-delete .manage-photo-delete-button {
  color: var(--color-text-muted);
}

.analytics-tabs {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-4);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-2);
  scroll-padding-inline: var(--space-1);
  scrollbar-width: thin;
}

.analytics-tabs button {
  flex: 0 0 auto;
  min-width: 7rem;
  min-height: 2.625rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
}

.analytics-tabs button.is-active {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.analytics-surface {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}

.analytics-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.analytics-card h4 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 500;
}

.analytics-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analytics-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, auto);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
}

.analytics-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.analytics-list span {
  min-width: 0;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.analytics-list strong {
  min-width: 0;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.analytics-empty {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.analytics-card > p:not(.analytics-empty) {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .analytics-surface {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-tabs {
    margin-inline: calc(-1 * var(--space-1));
  }

  .analytics-tabs button {
    min-width: max-content;
  }

  .analytics-card {
    padding: var(--space-3);
  }
}

.personal-rating-button {
  color: var(--color-muted, #8c8175);
  font-size: 1.35rem;
}

.personal-rating-button.is-selected {
  color: #c9943d;
}

.personal-rating-clear {
  margin-left: 0.5rem;
  padding: 0 0.8rem;
}

@media (max-width: 36rem) {
  .hunting-list-item {
    align-items: stretch;
    flex-direction: column;
  }


  .hunting-list {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: var(--space-5);
  }

  .hunting-list-item {
    padding: var(--space-3);
  }

  .hunting-list-item .secondary-action {
    width: 100%;
  }
}