.article-suggestions {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.article-suggestions[hidden] { display: none; }
.article-suggestions button {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  text-align: left;
  overflow-wrap: anywhere;
  background: var(--surface);
  color: var(--text);
}
.article-suggestions button[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-text);
}
.shopping-input input, .task-input input { min-width: 0; }
.subtasks { grid-column: 1 / -1; min-width: 0; padding: 0 4px 4px 38px; }
.subtasks summary { cursor: pointer; color: var(--muted); padding: 10px 0; }
.subtask-list { list-style: none; margin: 0; padding: 0; }
.subtask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.subtask-label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.subtask-label .check { flex: 0 0 24px; margin: 0; }
.subtask-label span { overflow-wrap: anywhere; min-width: 0; }
.subtask-row.done .subtask-label span { text-decoration: line-through; color: var(--muted); }
.subtask-entry { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; margin-top: 8px; }
.subtask-title-input { min-width: 0; }
.tabs { grid-template-columns: 1fr .85fr 1.3fr 1fr; gap: 3px; padding: 4px; margin-bottom: 12px; }
.tab { min-width: 0; min-height: 44px; padding: 6px 3px; font-size: 13px; white-space: nowrap; }
.tab[data-tab="personal"] { background: #eee7ff; color: #69409c; }
.tab[data-tab="personal"].active { background: var(--accent); color: var(--accent-text); }
.header-actions { display: flex; flex-direction: column; gap: 3px; flex: 0 0 112px; }
#profileSelect { min-height: 44px; padding: 8px; font-size: 16px; }
.header-actions #logoutButton { min-height: 32px; padding: 0 8px; font-size: 12px; background: transparent; color: var(--muted); }
.topbar { gap: 10px; margin-bottom: 10px; }
.topbar h1 { font-size: 23px; }
#statusText { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.personal-task-input { grid-template-columns: minmax(0, 1fr) 48px; }
@media (prefers-color-scheme: dark) {
  .tab[data-tab="personal"] { background: #30213f; color: #dbc3ff; }
  .tab[data-tab="personal"].active { background: var(--accent); color: var(--accent-text); }
}
@media (max-width: 540px) {
  /* Give the typed article/ingredient a full row on phones. */
  .shopping-input, .ingredient-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; }
  [data-article-input] { grid-column: 1 / -1; }
  input, select, textarea { font-size: 16px; }
  .subtasks { padding-left: 8px; }
}