/* Tools, planning and admin surfaces. Tokens in tokens.css, base vocabulary in app.css. */

/* ── Shared ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
       stroke-linejoin: round; flex: none; }
.row-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row-tools form { display: inline-flex; }
.tool-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
            padding: 0.75rem 1rem; }
.tool-bar-label { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-secondary); }
.hint-sm { font-size: var(--fs-xs); color: var(--text-tertiary); }
.section-title { font-size: var(--fs-lg); margin-bottom: 0.75rem; }
.stack > * + * { margin-top: 1rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-narrow { max-width: 640px; }
.inline-form { display: inline; }
.grow { flex: 1; min-width: 0; }
.is-hidden { display: none; }
.num { font-variant-numeric: tabular-nums; }
.check-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: var(--fs-sm);
             margin: 0; min-height: 32px; cursor: pointer; }
.check-row input { width: 1.15rem; height: 1.15rem; flex: none; }
.check-set { border: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.check-set legend { font-weight: 600; font-size: var(--fs-xs); margin-bottom: 0.3rem; padding: 0; }
@media (pointer: coarse) { .check-row { min-height: 44px; } .check-row input { width: 1.4rem; height: 1.4rem; } }
.form-error { color: var(--error); font-size: var(--fs-sm); font-weight: 500; margin-top: 0.4rem; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 29, 0.55); z-index: 200; display: flex;
                  align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: 100%; max-width: 420px; margin: 0; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal-card h3 { font-size: var(--fs-lg); margin-bottom: 0.5rem; }
.modal-note { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.modal-actions .btn { flex: 1; }

/* ── Meal plan ── */
.mp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.mp-day { padding: 0.6rem; margin: 0; display: flex; flex-direction: column; min-width: 0; }
.mp-day.is-today { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent), var(--shadow-sm); }
.mp-day-head { display: flex; align-items: baseline; gap: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.mp-dow { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 600; }
.mp-date { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.is-today .mp-date { color: var(--accent); }
.mp-day-body { flex: 1; }
.mp-slot { margin-top: 0.5rem; min-height: 0; border-radius: var(--radius); transition: background-color var(--duration-fast); }
.mp-slot.is-over { background: var(--accent-subtle); }
.mp-meal-label { font-size: var(--fs-2xs); color: var(--text-tertiary); font-weight: 600; }
.mp-item { display: flex; align-items: flex-start; gap: 0.15rem; padding: 0.2rem 0.25rem; border-radius: var(--radius);
           cursor: grab; margin: 2px 0; font-size: var(--fs-xs); }
.mp-item:active { cursor: grabbing; }
.mp-item:hover { background: var(--border-light); }
.mp-title { flex: 1; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.3; padding: 0.25rem 0;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mp-title:hover { color: var(--accent); }
.mp-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius);
          min-height: 28px; min-width: 28px; display: inline-flex; align-items: center; justify-content: center;
          font-size: var(--fs-2xs); font-weight: 600; padding: 0 0.3rem; }
.mp-btn:hover { background: var(--border); color: var(--text-primary); }
.mp-remove:hover { color: var(--error); background: var(--error-bg); }
.mp-add { width: 100%; margin-top: 0.6rem; min-height: 32px; background: none; border: 1px dashed var(--border);
          border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); font-size: var(--fs-xs);
          font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
.mp-add:hover { border-color: var(--accent); color: var(--accent); }
@media (pointer: coarse) {
    .mp-btn { min-height: 44px; min-width: 44px; font-size: var(--fs-xs); }
    .mp-add { min-height: 44px; }
    .mp-item { cursor: default; }
}
@media (max-width: 1000px) { .mp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (max-width: 699px) {
    .mp-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .mp-day { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.75rem; }
    .mp-day-head { flex-direction: column; align-items: flex-start; gap: 0; border-bottom: none; padding: 0;
                   border-right: 1px solid var(--rule); grid-row: 1 / span 2; }
    .mp-dow { font-size: var(--fs-sm); }
    .mp-date { font-size: var(--fs-display); }
    .mp-slot { margin-top: 0.25rem; }
    .mp-slot.is-empty { display: none; }
    .mp-title { font-size: var(--fs-sm); -webkit-line-clamp: unset; display: block; }
    .mp-item { font-size: var(--fs-sm); }
    .mp-add { width: auto; justify-self: start; padding: 0 0.9rem; margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-slot { transition: none; } }
.row-center { justify-content: center; }

/* ── Shopping ── */
.add-item-form { display: flex; gap: 0.5rem; }
.add-item-form input { flex: 1; min-width: 0; }
.aisle-name { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); margin: 1.5rem 0 0.5rem; }
.aisle-count { font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.checked-off { margin-top: 2rem; padding-top: 0.5rem; border-top: 3px double var(--rule); }
.shop-list { list-style: none; padding: 0; margin: 0; }
.shop-row { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem 0 0.25rem; border-bottom: 1px solid var(--rule); min-height: 52px; }
.shop-row:last-child { border-bottom: none; }
.shop-row form { display: flex; flex: none; }
.shop-check, .shop-remove { background: none; border: none; cursor: pointer; min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--text-tertiary); }
.shop-remove:hover { color: var(--error); background: var(--error-bg); }
.shop-box { width: 24px; height: 24px; border: 2px solid var(--text-tertiary); border-radius: var(--radius); display: inline-flex;
        align-items: center; justify-content: center; background: var(--surface); transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.shop-check:hover .shop-box { border-color: var(--accent); }
.shop-box.is-checked { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.shop-check:focus-visible, .shop-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.shop-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.6rem; padding: 0.4rem 0.25rem;
        font-size: var(--fs-base); font-weight: 500; overflow-wrap: anywhere; }
.shop-name .badge { font-weight: 500; }
.shop-find { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); color: var(--text-tertiary); }
.shop-find:hover { background: var(--accent-subtle); color: var(--accent); }
@media (pointer: coarse) { .shop-find { width: 44px; height: 44px; } }
.is-done { background: var(--bg); }
.is-done .shop-name { text-decoration: line-through; color: var(--text-tertiary); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .shop-box { transition: none; } }

/* ── Calculators and extras ── */
.tool-card { display: block; color: inherit; }
.tool-card:hover { color: inherit; }
.tool-tile { aspect-ratio: auto; height: 110px; }
.tool-tile::before { font-size: var(--fs-display); font-style: normal; }
.page-intro { font-size: var(--fs-sm); margin: -0.5rem 0 1.25rem; }
.frame-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.frame-head h2 { font-size: var(--fs-lg); }
.frame-card { padding: 0; overflow: hidden; }
.tool-frame { width: 100%; height: 80vh; border: none; display: block; background: var(--surface); }
.share-panel { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.share-panel .section-title { font-size: var(--fs-base); }
.share-input { flex: 1; min-width: 200px; width: auto; font-size: var(--fs-sm); background: var(--bg); }
.share-panel .hint-sm { margin-top: 0.5rem; }

/* ── Unit converter ── */
.center-col { margin-left: auto; margin-right: auto; }
.conv-title { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); margin-bottom: 0.75rem; }
.conv-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; align-items: end; }
.conv-row .form-group label { margin-top: 0; }
.conv-result { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--accent);
               padding: 0.9rem 0 0; margin-top: 0.9rem; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .conv-row { grid-template-columns: 1fr 1fr; } .conv-amount { grid-column: 1 / -1; } }

/* ── Recipe form ── */
.form-wide { max-width: 720px; }
.img-preview { padding: 0; overflow: hidden; }
.img-preview img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.img-preview[hidden] { display: none; }
.opt { font-weight: 400; color: var(--text-tertiary); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .form-grid-3 { grid-template-columns: 1fr; gap: 0; } }
.field-label { display: block; font-weight: 600; margin-bottom: 0.3rem; margin-top: 1rem; font-size: var(--fs-xs); }
.form-group:first-child .field-label { margin-top: 0; }
.form-actions-end { justify-content: flex-end; margin-bottom: 2rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.cat-chip { position: relative; display: inline-flex; align-items: center; margin: 0; cursor: pointer; padding: 0.3rem 0.85rem;
        min-height: 32px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--border);
        color: var(--text-secondary); background: var(--surface); transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.cat-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip:has(input:checked) { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.cat-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .cat-chip { min-height: 44px; padding: 0.4rem 1rem; } }
.import-lead { font-size: var(--fs-sm); margin-bottom: 1.25rem; }

/* ── Collections ── */
.status-ok { color: var(--success); font-weight: 600; }
.recipe-meta .tag { font-size: var(--fs-2xs); }
.cover-current { margin-bottom: 0.5rem; }
.cover-current img { max-height: 120px; border-radius: var(--radius); display: block; }
.coll-desc { font-size: var(--fs-sm); margin-top: 0.25rem; }
.coll-hint { margin-bottom: 0.75rem; }
.tool-bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.tool-bar-inner .grow { min-width: 200px; }
.tool-bar-inner input { font-size: var(--fs-sm); margin-top: 0.25rem; }
.add-item-form-end { align-items: flex-end; }
.add-item-form-end .form-group { margin: 0; }
.add-item-form-end label { margin-top: 0; }
.coll-item { position: relative; }
.coll-item.is-dragging { opacity: 0.4; }
.coll-item.is-target { outline: 2px solid var(--accent); }
.coll-tools { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.25rem; }
.coll-tools form { display: flex; }
.coll-btn { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
        background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.coll-btn:hover { border-color: var(--accent); color: var(--accent); }
.coll-remove { color: var(--error); border-color: var(--error-border); }
.coll-remove:hover { background: var(--error-bg); color: var(--error); border-color: var(--error); }
@media (pointer: coarse) { .coll-btn { min-width: 44px; min-height: 44px; } }

/* ── Admin ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-grid .card { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card-title { font-size: var(--fs-md); }
.card-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-link .hint-sm { margin-top: 0.2rem; }
.table-wrap { overflow-x: auto; }
.table th[scope="row"] { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--text-primary); border-bottom: 1px solid var(--border-light); }
.table tr:last-child th[scope="row"] { border-bottom: none; }
.cell-primary { font-weight: 600; padding: 0.6rem 0.5rem; }
.cell-primary a { color: var(--text-primary); display: inline-block; padding: 0.4rem 0; }
.cell-primary a:hover { color: var(--accent); text-decoration: underline; }
.cell-muted { color: var(--text-secondary); }
.table td .row-tools { flex-wrap: nowrap; }
.cat-add { margin-bottom: 1rem; }
.cat-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--accent-subtle); padding: 0 0.25rem 0 0.75rem; border-radius: var(--radius-pill); min-height: 32px; }
.cat-pill form { display: flex; }
.cat-pill-name { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.cat-pill-count { font-size: var(--fs-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cat-pill-x { background: none; border: none; color: var(--text-secondary); cursor: pointer; min-width: 32px; min-height: 32px; display: inline-flex;
        align-items: center; justify-content: center; border-radius: var(--radius-pill); }
.cat-pill-x:hover { color: var(--error); background: var(--error-bg); }
@media (pointer: coarse) { .cat-pill, .cat-pill-x { min-height: 44px; } .cat-pill-x { min-width: 44px; } }
.backup-lead { margin-bottom: 1rem; }
.backup-links { margin-bottom: 1rem; }
.backup-form input[type="file"] { flex: 1; min-width: 200px; width: auto; }
.form-actions-rule { padding-top: 1rem; border-top: 1px solid var(--rule); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } }
.icon-input { font-size: var(--fs-lg); text-align: center; }
.logo-current { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.logo-current img { max-height: 40px; border-radius: var(--radius); }

/* ── Auth: an index card on the desk ── */
.auth-wrapper { margin-top: 3rem; }
.auth-card { padding: 1.75rem 1.75rem 1.5rem; box-shadow: var(--shadow); }
.auth-card h2 { font-family: var(--font-display); margin-bottom: 0.25rem; padding-bottom: 0.6rem;
                border-bottom: 1px solid var(--rule); text-align: center; }
.auth-card .auth-subtitle { margin-top: 0.75rem; }
.btn-block { width: 100%; margin-top: 1.5rem; }
.card-title-gap { margin-bottom: 0.75rem; }
@media (max-width: 480px) { .auth-wrapper { margin-top: 1.5rem; } }

/* Share link row + settings groups */
.share-row { display: flex; gap: 0.5rem; align-items: center; }
.share-row input { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.modal-actions form { display: flex; }
.modal-actions form .btn { width: 100%; }
.settings-group { border: none; border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1rem; }
.settings-group legend { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; padding: 0 0.5rem 0 0; }

/* Meal plan, desktop: title gets the full width, actions tuck underneath; empty slots collapse until you drag */
.mp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 0.1rem; }
.mp-item .mp-title { grid-column: 1 / -1; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.mp-item .mp-move { grid-column: 2; }
.mp-item form { grid-column: 3; }
.mp-item > :not(.mp-title) { justify-self: end; }
.mp-slot.is-empty { margin-top: 0; }
.mp-grid.is-dragging .mp-slot.is-empty { min-height: 34px; margin-top: 0.5rem; border: 1px dashed var(--border); }
.mp-grid.is-dragging .mp-slot.is-empty::before { content: attr(data-meal); font-size: var(--fs-2xs); color: var(--text-tertiary); padding: 0.4rem; display: block; text-transform: capitalize; }
@media (max-width: 700px) {
    .mp-item .mp-title { grid-column: 1; }
    .mp-item .mp-move { grid-column: 2; }
    .mp-item form { grid-column: 3; }
}

/* Admin summary tiles stay three across on phones instead of leaving one orphaned */
@media (max-width: 560px) {
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .stat-grid .stat { padding: 0.75rem 0.25rem; }
    .stat-grid .stat-value { font-size: 1.75rem; }
    .stat-grid .stat-label { letter-spacing: 0.02em; }
}