/* Reflow follows available space and the reader's font size, not device models. */
html { font-size: 100%; width: 100%; }
body { width: 100%; max-width: 100%; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
#shell, #auth, .main-wrap, main { width: 100%; max-width: 100%; min-width: 0; }
button, input, select, textarea { font-size: 1rem; line-height: 1.5; }
button, a, input, select, textarea { max-width: 100%; }
button { white-space: normal; min-height: 2.75rem; }
button i, a i { flex-shrink: 0; }
input, select, textarea { min-width: 0; width: 100%; }
img { max-width: 100%; }
#shell { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.sidebar { position: sticky; inset: auto; top: 0; width: auto; height: 100dvh; overflow-y: auto; padding: 2rem 1rem; }
.main-wrap { margin-left: 0; min-width: 0; }
main { padding: 2rem clamp(1rem, 3vw, 3rem) 3rem; }
.topbar { height: auto; min-height: 4.5rem; padding: .75rem clamp(1rem, 3vw, 3rem); flex-wrap: wrap; }
.topbar-right { flex: 1 1 12rem; min-width: 0; max-width: none; font-size: .875rem; }
.topbar>span:first-child { font-size: .75rem; }
.theme-control { margin-left: auto; }
.theme-toggle { min-width: 2.75rem; width: 2.75rem; height: 2.75rem; padding: .5rem; font-size: 1rem; }
.theme-toggle i { width: auto; }
.brand, .brand>span, nav a { min-width: 0; }
.brand { flex-wrap: wrap; }
.brand small[data-account-name] { font-size: .75rem; max-width: none; }
nav a { font-size: .9375rem; min-height: 2.75rem; }
nav a span { min-width: 0; }
.page-heading { flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.page-heading>div { flex: 1 1 20rem; min-width: 0; }
.page-heading>.primary { white-space: normal; font-size: 1rem; padding: .65rem 1rem; max-width: 100%; }
.page-heading h1 { font-size: clamp(2rem, 1.75rem + 1.5vw, 3.25rem); }
.page-heading p.subtitle, p.subtitle, .panel p, .scan-box p { font-size: 1rem; }
.eyebrow, .wine-producer, .wine-art .category, .picker-caption { font-size: .8125rem; }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .875rem; }
.stat { min-width: 0; padding: .75rem; gap: .625rem; }
.stat>div { min-width: 0; }
.stat-icon { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; }
.stat small { font-size: .875rem; }
.toolbar { flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.toolbar .search { flex: 1 1 20rem; min-width: 0; }
.toolbar select { flex: 1 1 12rem; width: auto; max-width: 100%; }
.toolbar button { flex: 0 1 auto; font-size: 1rem; }
.search input { padding-left: 2.75rem; height: 100%; }
.search i { left: 1rem; top: 50%; transform: translateY(-50%); }
.chip, .tag-picker .chip { white-space: normal; min-height: 2.75rem; font-size: .875rem; padding: .5rem .875rem; }
.chips { gap: .5rem; }
.results-heading { flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; }
.wine-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.wine-art { height: 13rem; }
.wine-art .category { max-width: calc(100% - 1.5rem); }
.wine-body { min-width: 0; padding: 1.25rem; }
.wine-body h3 { font-size: 1.5rem; }
.wine-meta, .wine-footer, .tag { font-size: .875rem; }
.wine-footer { flex-wrap: wrap; gap: .625rem; }
.stars { white-space: normal; }
.grid-form, .grid-form.three, #account-user-form .grid-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-form>* { min-width: 0; }
.full { grid-column: 1 / -1; }
label { font-size: .9375rem; }
label small, .help, .notice, .error, .panel p, .auth-card footer { font-size: .875rem; }
.panel, .filters, .scan-box, .tag-picker { min-width: 0; padding: clamp(.75rem, 3vw, 1.5rem); }
.button-row, .row-actions, .detail-actions, .location-toolbar { flex-wrap: wrap; gap: .625rem; }
.row-actions button, .location-toolbar button, .inline-form button, .tag-picker .inline-form button { font-size: .875rem; min-height: 2.75rem; flex: 0 1 auto; }
.bottle-row, .vintage-link, .inline-form { flex-wrap: wrap; min-width: 0; }
.bottle-row>div, .vintage-link>div, .inline-form>* { min-width: 0; }
.bottle-row strong, .review strong, .fact { font-size: 1rem; }
.bottle-row small, .vintage-link p, .review time, .fact small { font-size: .875rem; }
.review time { float: none; display: block; }
.detail-top { display: flex; flex-wrap: wrap; }
.detail-top>.wine-art { flex: 1 1 16rem; min-width: 0; }
.detail-top>div:not(.wine-art) { flex: 3 1 20rem; min-width: 0; }
.detail-top h1 { font-size: 2.25rem; }
.shelf-grid, .location-room .shelf-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.shelf-card { min-width: 0; padding: 1.25rem; }
.shelf-card p { font-size: .9375rem; }
.lookup-item { max-width: 100%; flex-wrap: wrap; font-size: .9375rem; }
.lookup-item>span { min-width: 0; flex: 1 1 8rem; }
.lookup-item button { min-width: 2.75rem; min-height: 2.75rem; }
.inline-form input, .tag-picker .inline-form input { min-width: 0; flex: 1 1 12rem; }
.all-tags { max-height: 15rem; }
.rating-picker label { display: inline-flex; align-items: center; gap: .25rem; }
.rating-picker input { flex-shrink: 0; }
dialog { width: min(46rem, calc(100% - 16px)); max-width: none; max-height: calc(100dvh - 16px); margin: auto; overflow-y: auto; }
.dialog-header { position: static; align-items: flex-start; padding: clamp(8px, 3vw, 24px); gap: .75rem; }
.dialog-header h2 { min-width: 0; font-size: 1.5rem; }
.dialog-header button { flex-shrink: 0; }
.dialog-content { padding: clamp(8px, 3vw, 24px); }
.auth-page { padding: 1rem; }
.auth-card { max-width: 32rem; min-width: 0; padding: clamp(1rem, 4vw, 2.625rem); }
.auth-card h1 { font-size: 2.25rem; }
.auth-card .theme-control { margin-left: 0; }
#toast { width: max-content; max-width: calc(100% - 2rem); bottom: max(1rem, env(safe-area-inset-bottom)); font-size: .9375rem; }
@media (max-width: 64em) {
  #shell { display: block; }
  /* An in-flow menu can grow with large text without covering the page. */
  .sidebar { position: static; inset: auto; width: 100%; height: auto; overflow: visible; padding: .5rem max(.75rem, env(safe-area-inset-left)) .5rem max(.75rem, env(safe-area-inset-right)); border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand, .nav-label, .sidebar-bottom { display: none; }
  nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .375rem; }
  nav a { flex-direction: row; justify-content: center; text-align: center; flex-wrap: wrap; gap: .5rem; padding: .625rem .5rem; font-size: .875rem; }
  nav a i { width: auto; font-size: 1rem; }
  .topbar>span:first-child { display: none; }
  .topbar-right { text-align: left; margin-left: 0; }
  main { padding-top: 1.25rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 40em) {
  .dialog-header { flex-wrap: wrap; }
  .dialog-header h2 { flex: 1 1 100%; order: 1; }
  .dialog-header button { margin-left: auto; order: 0; }
}

/* Photos remain separate from the selected collection image. */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .75rem; margin: 1rem 0; }
.photo-choice, .gallery-open { min-width: 0; border: 1px solid var(--line); border-radius: 1rem; padding: .625rem; display: flex; flex-direction: column; gap: .625rem; }
.photo-choice.is-primary { border: 2px solid var(--accent, #987b42); }
.photo-choice img, .gallery-open img { width: 100%; height: 10rem; object-fit: contain; border-radius: .5rem; }
.photo-choice label { display: flex; gap: .5rem; align-items: center; flex: 1; }
.photo-choice input[type=radio] { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.photo-choice button { width: 100%; }
.photo-full { display: block; width: 100%; max-height: 70dvh; object-fit: contain; }
.photo-upload input { margin-top: .5rem; }