/* The menu itself teaches the flow: one compact route and guidance at the action. */
.md-shell { --md-content-gutter: 22px; }
.md-shell .md-menu-header, .md-shell .md-canvas, .md-shell .md-workspace-nav-row { padding-inline: var(--md-content-gutter); }
.md-journey { display: flex; align-items: center; gap: 20px; list-style: none; padding: 0; margin: 0; color: #58645d; font-size: .8125rem; line-height: 1.4; }
.md-journey li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.md-journey li[aria-current="step"] { color: #244c34; font-weight: 700; }
.md-journey-number { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #9ba69e; border-radius: 50%; font-variant-numeric: tabular-nums; }
.md-journey-number svg { width: 15px; height: 15px; }
.md-journey [aria-current="step"] .md-journey-number { background: #2d5c40; border-color: #2d5c40; color: #fff; }
.md-journey-row { padding: 20px var(--md-content-gutter) 0; }
.md-shell .md-name-entry { margin: 0; padding-block: 32px 40px; text-align: left; }
.md-name-entry .md-journey { margin-bottom: 28px; }
.md-shell .md-name-entry h2 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.02em; }
.md-name-entry > p { max-width: 52ch; line-height: 1.6; margin: 0; }
.md-name-entry form { max-width: 560px; margin-top: 24px; }
.md-name-entry button { margin: 0; }
.md-name-entry label { display: block; margin-bottom: 7px; font-size: .875rem; font-weight: 650; }
.md-name-entry input { width: 100%; min-height: 48px; font: inherit; border: 1px solid #8b968e; border-radius: 6px; padding: 11px 12px; color: #17211c; background: #fff; caret-color: #2d5c40; }
.md-name-entry input[aria-invalid="true"] { border-color: #a64030; }
.md-name-entry #md-name-error { margin: 8px 0 0; color: #8b3024; font-size: .875rem; }
.md-name-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.md-name-links:not(:empty) { margin-top: 16px; }
.md-name-entry .md-workflow-help { margin-top: 22px; padding-top: 18px; border-top: 1px solid #c8cec7; font-size: .875rem; }
.md-shell .md-first-food { padding: 8px 0 24px; max-width: 52ch; }
.md-first-food p { margin: 0; line-height: 1.6; max-width: 52ch; }
.md-food-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.md-shell .md-editor-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.md-shell .md-editor-toolbar > .md-contents { grid-column: 1 / -1; justify-self: start; }
.md-shell .md-editor-toolbar h3 { min-width: 0; margin: 0; font-size: 1.125rem; line-height: 1.4; }
.md-shell .md-menu-options { flex: 0 0 auto; }
.md-shell .md-menu-options > [data-md-dropdown] { min-height: 44px; }
.md-food-count { color: #58645d; font-weight: 400; font-variant-numeric: tabular-nums; }
.md-food-tip { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; margin-top: 16px; }
.md-food-tip p { max-width: 52ch; margin: 0; color: #445248; font-size: .875rem; line-height: 1.6; }
.md-food-next { display: flex; align-items: stretch; gap: 12px; margin-top: 24px; }
.md-shell .md-food-next .md-stage-nav { align-items: stretch; }
.md-shell .md-menu-header .md-menu-header-actions > .md-save-empty { width: auto; flex: 0 0 auto; background: transparent; border-color: transparent; color: #345c42; text-decoration: underline; text-underline-offset: 3px; padding-inline: 0; }
.md-shell .md-text-action { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 2px; color: #2d5c40; text-decoration: underline; text-underline-offset: 3px; background: transparent; border-color: transparent; }
.md-shell .md-text-action:hover, .md-shell .md-save-empty:hover { color: #172f20; background: #e9eee7; }
.md-shell .md-library-editor-actions > .md-food-save-help { grid-column: 1 / -1; flex-basis: 100%; margin: 0; max-width: 65ch; color: #445248; font-size: .8125rem; line-height: 1.5; }
.md-name-entry input:focus-visible, .md-text-action:focus-visible, .md-save-empty:focus-visible { outline: 2px solid #a64030; outline-offset: 3px; }
@media (max-width: 800px) {
  .md-shell { --md-content-gutter: 20px; }
}
@media (max-width: 600px) {
  .md-journey { gap: 14px; font-size: .75rem; }
  .md-journey li { gap: 5px; }
  .md-journey-number { flex-basis: 22px; width: 22px; height: 22px; }
  .md-journey-row { padding-top: 16px; }
  .md-shell .md-name-entry { padding-top: 24px; }
  .md-name-entry .md-journey { margin-bottom: 26px; }
  .md-name-actions .primary { flex: 1 1 auto; }
  .md-food-next > .md-button, .md-food-next > .md-stage-nav { flex: 1 1 0; min-width: 0; }
  .md-food-next .md-button { min-height: 46px; white-space: normal; }
  .md-food-next .md-stage-nav > .md-button { width: 100%; }
}
@media (max-width: 380px) {
  .md-journey { gap: 8px; }
  .md-shell { --md-content-gutter: 15px; }
  .md-journey-number { flex-basis: 20px; width: 20px; height: 20px; }
}
@media print { .md-journey, .md-food-tip, .md-workflow-help { display: none !important; } }

/* First use is a focused task; the full workspace appears with real content. */
@media screen {
  .md-shell { background: var(--md-paper); }
  .md-shell .md-workspace { min-height: 0; }
  .md-shell.md-focused-setup { background: #fffefa; border-color: #dce1d9; }
  .md-focused-setup .md-workspace { min-height: 0; background: transparent; }
  .md-shell .md-name-entry { padding: 48px 40px 28px; }
  .md-setup-content { max-width: 880px; margin-inline: auto; }
  .md-name-entry .md-journey { margin-bottom: 40px; }
  .md-setup-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .md-setup-form { min-width: 0; }
  .md-shell .md-name-entry h2 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; letter-spacing: -.025em; }
  .md-setup-intro { color: #526154; font-size: 16px; line-height: 1.65; max-width: 38ch; }
  .md-name-entry form { margin-top: 30px; }
  .md-shell .md-name-entry label { margin-bottom: 10px; font-size: 14px; }
  .md-shell .md-name-entry input { font-size: 16px; min-height: 52px; border-color: #a5b3a5; border-radius: 8px; padding-inline: 14px; }
  .md-name-entry input::placeholder { color: #647065; }
  .md-shell .md-name-entry #md-name-help { color: #526154; font-size: 14px; line-height: 1.55; margin-top: 10px; }
  .md-name-actions { margin-top: 24px; gap: 16px; }
  .md-focused-setup .md-button.primary { min-height: 48px; padding: 12px 20px; font-size: 15px; border-radius: 8px; }
  .md-name-actions .primary { gap: 20px; }
  .md-menu-example { margin: 0; padding: 0; min-width: 0; }
  .md-example-paper { background: #f4f6f0; border-radius: 12px; padding: 28px; }
  .md-example-paper > strong { display: block; color: #284d38; font-size: 25px; line-height: 1.3; }
  .md-example-subtitle { display: block; margin-top: 5px; font-size: 13px; color: #526154; }
  .md-example-paper > div { font-size: 14px; font-weight: 600; padding: 18px 0; border-bottom: 1px solid #d5ddd1; }
  .md-example-paper > div:first-of-type { margin-top: 14px; border-top: 1px solid #aebdaa; }
  .md-shell .md-example-paper > p { font-size: 13px; color: #526154; line-height: 1.6; margin-top: 20px; }
  .md-shell .md-example-caption { margin-top: 12px; color: #58645d; font-size: 12px; line-height: 1.5; text-align: center; }
  .md-setup-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-top: 36px; padding-top: 16px; border-top: 1px solid #e1e5dd; }
  .md-name-entry .md-name-links { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; }
  .md-name-entry .md-workflow-help { margin: 0; padding: 0; border: 0; font-size: 13px; color: #526154; }
  .md-setup-footer .md-text-action { font-size: 13px; }
  .md-focused-setup .md-menu-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; background: transparent; border-bottom: 1px solid #e1e5dd; padding-block: 20px; }
  .md-focused-setup .md-menu-header .md-menu-heading { flex: 1 1 0; }
  .md-focused-setup .md-menu-header > .md-menu-header-actions { width: auto; margin-left: 0; flex: 0 0 auto; }
  .md-focused-setup .md-journey-row { padding-top: 24px; }
  .md-focused-setup .md-canvas:not(.md-name-entry):not(.md-empty) { padding-block: 28px 40px; }
  .md-shell .md-first-food { max-width: 480px; margin-inline: auto; padding: 12px 0 8px; text-align: center; }
  .md-empty-food-icon { color: #53725a; margin-bottom: 12px; }
  .md-shell .md-first-food h3 { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 12px; }
  .md-shell .md-first-food > p { font-size: 16px; line-height: 1.6; color: #445248; overflow-wrap: anywhere; }
  .md-shell .md-first-food .md-first-food-example { font-size: 14px; color: #58645d; margin-top: 8px; }
  .md-first-food .md-food-actions { justify-content: center; margin-top: 24px; }
  .md-shell .md-first-food .md-first-food-next { max-width: 34ch; margin: 18px auto 0; font-size: 13px; color: #58645d; }
  .md-first-food > .md-text-action { margin-top: 4px; font-size: 12px; }
  .md-focused-setup .md-menu-header .md-menu-options { position: relative; }
  .md-focused-setup .md-menu-options > div { min-width: 180px; }
  .md-focused-setup .md-menu-options button { min-height: 44px; }
  .md-setup-content ::selection, .md-first-food ::selection { background: #d7e5d3; color: #20352c; }
}
@media screen and (max-width: 800px) {
  .md-shell .md-name-entry { padding: 32px 24px 20px; }
  .md-setup-grid { gap: 32px; }
  .md-example-paper { padding: 22px; }
  .md-setup-footer { display: block; margin-top: 28px; }
  .md-shell .md-name-entry h2 { font-size: 28px; }
}
@media screen and (max-width: 600px) {
  .md-shell .md-name-entry { padding: 28px 20px 16px; }
  .md-setup-grid { display: block; }
  .md-menu-example { display: none; }
  .md-name-entry .md-journey { margin-bottom: 28px; }
  .md-shell .md-name-entry h2, .md-shell .md-first-food h3 { font-size: 24px; }
  .md-name-entry form { margin-top: 24px; }
  .md-name-actions .primary { width: 100%; flex-basis: 100%; justify-content: space-between; }
  .md-name-actions { gap: 4px; margin-top: 20px; }
  .md-setup-footer { margin-top: 24px; padding-top: 12px; }
  .md-focused-setup .md-menu-header { padding-block: 16px; gap: 8px; }
  .md-focused-setup .md-menu-header .md-document-name { font-size: 22px; }
  .md-focused-setup .md-journey-row { padding-top: 18px; }
  .md-focused-setup .md-canvas:not(.md-name-entry):not(.md-empty) { padding-block: 22px 28px; }
  .md-shell .md-first-food { padding-top: 4px; }
  .md-first-food .md-food-actions > .primary { width: 100%; }
  .md-empty-food-icon { display: none; }
}
@media screen and (max-width: 380px) {
  .md-shell .md-name-entry { padding-inline: 15px; }
}

@media screen {
  .md-shell .md-switch-dialog { padding: 20px; }
  .md-shell .md-switch-dialog > header { align-items: center; gap: 12px; margin-bottom: 16px; }
  .md-shell .md-switch-dialog > header h2 { margin: 0; font-size: 20px; line-height: 1.3; }
  .md-shell .md-switch-dialog > header > button { width: 44px; height: 44px; padding: 8px; align-self: center; }
  .md-shell .md-switch-dialog label { font-size: 14px; }
  .md-shell .md-switch-dialog input { min-height: 44px; font-size: 16px; }
  .md-shell .md-switch-dialog .md-switch-empty { font-size: 14px; line-height: 1.6; margin: 0; color: #445248; }
  .md-shell .md-switch-dialog > footer { justify-content: flex-start; gap: 8px; margin-top: 20px; }
  .md-shell .md-switch-dialog > footer .md-button { min-height: 44px; padding: 8px 12px; font-size: 13px; line-height: 1.3; }
  .md-shell .md-switch-dialog [data-md-action="refresh"] { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
}

@media screen {
  .md-shell .md-menu-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
  .md-shell .md-menu-header > .md-menu-heading { display: contents; }
  .md-shell .md-menu-header .md-document-name { grid-column: 1; grid-row: 1; min-width: 0; }
  .md-shell .md-menu-header .md-menu-heading > p { grid-column: 1 / -1; }
  .md-shell .md-menu-header > .md-menu-header-actions { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
  .md-shell .md-menu-header .md-stage-nav > [data-md-action="document"] { min-height: 44px; white-space: nowrap; }
}

@media screen {
  .md-shell:has(.md-menu-options[open]) { overflow: visible; }
  .md-shell .md-menu-header:has(.md-menu-options) > .md-menu-header-actions { display: contents; }
  .md-shell .md-menu-header .md-menu-options { grid-column: 2; grid-row: 1; margin: 0; }
  .md-shell .md-menu-header [data-menu-header-save] { grid-column: 1 / -1; justify-self: start; width: auto; }
  .md-shell .md-menu-options > div { overflow-y: auto; overscroll-behavior: contain; flex-wrap: nowrap; max-height: min(360px, calc(100dvh - 32px)); }
  .md-shell .md-menu-options > div > button { flex-shrink: 0; min-height: 44px; }
}

/* Keep the workspace title row steady when switching between menus and foods. */
@media screen {
  .md-shell .md-menu-header { padding-top: 20px; }
  .md-shell .md-canvas.md-items-library { padding-top: 20px; }
  .md-shell .md-menu-header .md-document-name,
  .md-shell .md-items-library .md-library-heading h2 { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: 24px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
  .md-shell .md-menu-header .md-document-name > button { font: inherit; letter-spacing: inherit; }
  .md-shell .md-items-library .md-library-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  .md-shell .md-items-library .md-library-heading > div:first-child { display: contents; }
  .md-shell .md-items-library .md-library-heading h2 { grid-column: 1; grid-row: 1; }
  .md-shell .md-items-library .md-library-heading p { grid-column: 1 / -1; margin: 0; font-size: .8125rem; }
  .md-shell .md-items-library .md-library-heading > button { grid-column: 2; grid-row: 1; width: auto; min-height: 44px; padding: 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; background: transparent; border-color: transparent; color: #345c42; }
  .md-shell .md-items-library .md-library-heading > button:hover { background: #f1f5ee; }
}
@media screen and (max-width: 800px) {
  .md-shell .md-menu-header,
  .md-shell .md-canvas.md-items-library { padding-top: 16px; }
}

@media screen {
  .md-shell .md-items-library .md-library-item-actions > button[data-mi-action="edit"] { padding: 8px; min-height: 44px; font-size: 13px; background: transparent; border-color: transparent; box-shadow: none; color: #345c42; }
  .md-shell .md-items-library .md-library-toolbar > [data-mi-refresh] { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; background: transparent; border-color: transparent; box-shadow: none; color: #526154; }
  .md-shell .md-items-library .md-library-item-actions > button[data-mi-action="edit"]:hover,
  .md-shell .md-items-library .md-library-toolbar > [data-mi-refresh]:hover { background: #f1f5ee; }
}

@media screen {
  .md-shell .md-items-library .md-library-item:has(.md-picker-details[open]) .md-library-row-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .md-shell .md-items-library .md-library-item-meta { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: #526154; overflow-wrap: anywhere; }
  .md-shell .md-items-library .md-picker-details > p { margin: 4px 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .md-shell .md-items-library .md-picker-details > summary { min-height: 44px; align-content: center; }
}

@media screen {
  .md-shell .md-items-library .md-picker-details > summary { display: flex; align-items: center; gap: 6px; }
  .md-shell .md-items-library .md-item-details-chevron { flex: 0 0 16px; }
  .md-shell .md-items-library .md-picker-details[open] .md-item-details-chevron { transform: rotate(180deg); }
  .md-shell .md-items-library .md-item-details-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* A short food list should make a short picker, with one clear footer boundary. */
@media screen {
  .md-shell .md-dialog.md-item-picker { height: auto; padding: 20px; gap: 16px; }
  .md-shell .md-item-picker > header { align-items: center; gap: 12px; }
  .md-shell .md-item-picker > header h2 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
  .md-shell .md-item-picker > header > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: transparent; border-color: transparent; color: #526154; }
  .md-shell .md-item-picker > header > button:hover { background: #f1f5ee; }
  .md-shell .md-item-picker .md-picker-controls { gap: 12px; }
  .md-shell .md-item-picker .md-picker-controls > label { margin: 0; font-size: 13px; }
  .md-shell .md-item-picker .md-picker-controls > p { font-size: 13px; color: #526154; }
  .md-shell .md-item-picker .md-picker-status:empty { display: none; }
  .md-shell .md-item-picker .md-picker-results { min-height: 0; margin-top: 12px; }
  .md-shell .md-item-picker .md-library-item { padding: 12px 0; gap: 4px 12px; }
  .md-shell .md-item-picker .md-library-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .md-shell .md-item-picker .md-library-item-copy > h3 { font-size: 15px; }
  .md-shell .md-item-picker .md-library-item-copy > p { margin-bottom: 4px; }
  .md-shell .md-item-picker .md-library-item-actions { gap: 8px; }
  .md-shell .md-item-picker [data-mi-action="edit"] { background: transparent; border-color: transparent; color: #345c42; }
  .md-shell .md-item-picker > footer { margin: 0; padding-top: 12px; gap: 8px; justify-content: space-between; }
  .md-shell .md-item-picker > footer [data-mi-action="close"] { background: transparent; border-color: transparent; color: #526154; }
}

/* Share one compact row for item details and actions, including on phones. */
@media screen {
  .md-shell .md-item-picker .md-library-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  .md-shell .md-item-picker .md-library-item-copy { display: contents; }
  .md-shell .md-item-picker .md-library-item-copy > h3,
  .md-shell .md-item-picker .md-library-item-copy > p { grid-column: 1 / -1; }
  .md-shell .md-item-picker .md-picker-details { grid-column: 1; grid-row: 4; margin: 0; }
  .md-shell .md-item-picker .md-picker-details > summary { padding: 12px 0; }
  .md-shell .md-item-picker .md-library-item-actions { grid-column: 2; grid-row: 4; align-self: start; margin: 0; gap: 4px; flex-wrap: nowrap; }
  .md-shell .md-item-picker .md-library-item-actions > button { padding: 8px 10px; min-height: 44px; }
}

@media screen {
  .md-shell .md-menu-header [data-menu-discard] { grid-column: 1 / -1; justify-self: start; width: auto; background: transparent; border-color: transparent; color: #526154; font-size: 13px; }
  .md-shell .md-searchbar .md-close-find { flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border-color: transparent; font-size: 22px; }
}

@media screen {
  .md-shell .md-menu-draft-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
  .md-shell .md-menu-draft-actions:not(:has(button:not([hidden]))) { display: none; }
}

/* All floating editor actions share readable rows and a scrollable viewport. */
@media screen {
  .md-shell .md-section-menu > div { display: flex; flex-direction: column; gap: 2px; }
  .md-shell :is(.md-section-menu, .md-row-options, .md-menu-options, .md-contents) > [popover] { color: var(--md-ink); box-sizing: border-box; }
  .md-shell :is(.md-section-menu, .md-row-options, .md-menu-options, .md-contents) > [popover] > button { flex: 0 0 auto; width: 100%; min-height: 44px; padding: 10px 12px; font-size: 13px; text-align: left; justify-content: flex-start; }
}

/* Keep section and search filtering visible, with a direct route back. */
.md-active-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; font-size: 14px; }
.md-active-filter > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  /* Read the proof before confirming its declarations; match DOM/tab order. */
  .md-shell .md-proof-layout { flex-direction: column; }
}
.md-shell .md-dialog.md-deleted-dialog { height: auto; max-height: calc(100dvh - 40px); }
.md-shell .md-deleted-dialog > header { align-items: center; gap: 12px; }
.md-shell .md-deleted-dialog > header h2 { font-size: 22px; line-height: 1.25; }
.md-shell .md-deleted-dialog > header > .md-button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: transparent; border-color: transparent; }
.md-shell .md-deleted-dialog .md-deleted-menu:last-child { border-bottom: 0; }