/* mealplan — layout on top of Broadsheet (broadsheet/styles.css).
   Every value here is one of Broadsheet's own tokens; this file adds no
   new colors/spacing/radius of its own, only page-level structure that
   styles.css deliberately leaves to the consuming app (see its readme:
   layout is not part of the design system). */

body {
  font-size: 15px;
}

.container {
  max-width: 460px;
  margin: 0 auto;
  padding: 4px 12px var(--space-8);
}

/* --- phone / tablet split (S-15/S-16/S-17) ---
   Both layouts render in the same response; the media query is the only
   thing deciding which one shows — no viewport detection, no JS, no
   duplicate requests. Breakpoint matches the mockups' 1180px tablet
   canvas (with margin for browser chrome). */
.tablet-only { display: none; }
@media (min-width: 1024px) {
  .container { max-width: 1040px; }
  .phone-only { display: none; }
  .tablet-only { display: block; }
}

.tablet-panes { display: flex; gap: 0; min-height: 0; }
.tablet-pane-main { flex: 1; min-width: 0; }
.tablet-pane-side {
  flex: none;
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
}
.tablet-pane-fixed {
  flex: none;
  border-right: 1px solid var(--color-divider);
  padding-right: var(--space-4);
  margin-right: var(--space-4);
}

.messages {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field + .field {
  margin-top: var(--space-1);
}

form + h2, form + h3 {
  margin-top: var(--space-6);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recipe-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.recipe-grid img {
  border-radius: var(--radius-md);
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--space-1);
}

.inline-form {
  display: inline;
}

.back-link {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 13px;
}

/* ==========================================================================
   Mockup-fidelity layer (M6b) — patterns lifted from docs/claude-design-v1's
   mockup deck that recur across nearly every screen: masthead/nav, footer
   bar, section-rule, bleed callouts, segmented steppers, glyph strips,
   photo placeholders, grocery marks. Every color/spacing value here is a
   Broadsheet token (var(--color-*), var(--space-*)); this only names and
   composes them into the shapes the mockups use but styles.css itself
   deliberately doesn't (styles.css's own readme: layout is left to the app).
   ========================================================================== */

/* --- masthead / nav row (the mockups' stand-in for a tab bar) --- */
.mast {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 12px 4px;
}
.mast-brand {
  font: 600 15px/1 var(--font-heading);
}
.mast-meta {
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.mast-meta.accent { color: var(--color-accent); font-weight: 600; }
.mast-meta.accent2 { color: var(--color-accent-2-700); font-weight: 600; }
.mast-right { margin-left: auto; }

.rule2 { height: 2px; background: var(--color-text); margin: 0 12px; }
.rule2.accent2 { background: var(--color-accent-2); }
.rule1 { height: 1px; background: var(--color-divider); margin: 0 12px 8px; }

.navrow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 12px 3px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.navrow a, .navrow span.navlink {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  text-decoration: none;
}
.navrow a.on, .navrow span.navlink.on {
  color: var(--color-accent);
  font-weight: 600;
}
.navrow-toggle { margin-left: auto; display: flex; gap: 6px; align-items: baseline; }

.view-toggle { display: flex; cursor: pointer; }
.view-toggle span {
  padding: 3px 7px;
  font: 600 9.5px/1.3 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.view-toggle span.on { background: var(--color-text); color: var(--color-bg); }

.view-toggle-plain {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.view-toggle-plain span { cursor: pointer; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.view-toggle-plain span.on { color: var(--color-accent); font-weight: 600; }
.view-toggle-plain .sep { color: color-mix(in srgb, var(--color-text) 25%, transparent); }

/* --- section-rule: label + hairline + optional trailing meta --- */
.kick {
  font: 600 9.5px/1 var(--font-heading);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hair { height: 1px; flex: 1; background: var(--color-text); opacity: .45; }
.section-rule {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: var(--space-3) 0 4px;
}
.section-rule-meta {
  font-size: 9px;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

/* --- footer bar: status text + primary action, thick top rule --- */
.footer-bar {
  padding: var(--space-2) 0 0;
  margin-top: var(--space-4);
  border-top: 2px solid var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-bar-info { flex: 1; min-width: 0; }
.footer-bar-title { font: 600 12px/1.2 var(--font-heading); }
.footer-bar-meta {
  font-size: 9.5px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}

/* --- full-bleed tinted callout (consequence blocks, undo rows, amendments) --- */
.bleed {
  margin: 0 calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3) 10px;
}
.bleed-accent { background: var(--color-accent-100); }
.bleed-accent2 { background: var(--color-accent-2-100); }
.bleed-surface { background: var(--color-surface); }
.bleed-row { margin: 0 -6px; padding-left: 6px; padding-right: 6px; }

/* --- segmented control, strong fill (kind buttons, steppers, horizon/lookback) ---
   Layered on Broadsheet's own .seg/.seg-opt (styles.css) rather than a parallel
   component — this modifier only swaps the checked-fill color to accent-600,
   matching the mockups' slightly stronger accent for these "pick one value"
   controls (plain --color-accent stays reserved for links/primary actions). */
.seg-strong .seg-opt:has(input:checked) { background: var(--color-accent-600); }
.seg-fullwidth .seg { display: flex; width: 100%; }
.seg-fullwidth .seg-opt { flex: 1; justify-content: center; text-align: center; }

/* --- segmented cards: two-line title+description options (type decision, exception kind) --- */
.seg-cards { display: flex; }
.seg-cards.seg-cards-grid { display: grid; }
label.seg-card {
  flex: 1;
  display: block;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
  cursor: pointer;
}
label.seg-card + label.seg-card { border-left: 0; }
label.seg-card input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
label.seg-card:has(input:checked) { background: var(--color-accent-600); color: var(--color-bg); }
.seg-card-title { font: 600 13px/1.15 var(--font-heading); }
.seg-card-desc { font-size: 9px; line-height: 1.3; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
label.seg-card:has(input:checked) .seg-card-desc { color: var(--color-bg); opacity: .82; }

/* --- consequence table (day / slot / becomes / role) --- */
.ctable-head, .ctable-row {
  display: grid;
  grid-template-columns: 52px 46px 1fr auto;
  gap: 7px;
  align-items: baseline;
}
.ctable-head {
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-text);
}
.ctable-row { padding: 4px 0; border-bottom: 1px solid var(--color-divider); }
.ctable-day { font: 600 11px/1.2 var(--font-heading); }
.ctable-slot {
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.ctable-becomes { font: 600 12.5px/1.2 var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctable-blank { font: italic 12px/1.2 var(--font-heading); color: var(--color-accent-2-700); }
.ctable-role {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.ctable-role.accent2 { color: var(--color-accent-2-700); font-weight: 600; }

/* --- glyph strip: 14-mark week representation (home strip + week browser) --- */
.glyph-strip { display: flex; gap: 1.5px; align-items: flex-end; }
.glyph { width: 8px; height: 12px; flex: none; }
.glyph-filled { background: var(--color-text); }
.glyph-half { height: 6px; align-self: flex-end; }
.glyph-blank { border: 1px dashed color-mix(in srgb, var(--color-text) 25%, transparent); }
.glyph-out {
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  background: repeating-linear-gradient(45deg, transparent, transparent 2px,
    color-mix(in srgb, var(--color-text) 30%, transparent) 2px,
    color-mix(in srgb, var(--color-text) 30%, transparent) 3px);
}
.glyph-amended.glyph-filled, .glyph-amended.glyph-half { background: var(--color-accent-2); }
.glyph-amended.glyph-out {
  border-color: var(--color-accent-2);
  background: repeating-linear-gradient(45deg, transparent, transparent 2px,
    var(--color-accent-2) 2px, var(--color-accent-2) 3px);
}
.glyph-spacer { width: 5px; flex: none; }

/* --- blank grid/eating-plan cell (dashed, centered "+") --- */
.blankcell {
  border: 1px dashed color-mix(in srgb, var(--color-text) 16%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text) 28%, transparent);
  font-size: 20px;
}

/* --- photo placeholder textures --- */
.photo-ph {
  background: #cfcbc9;
  background-image: radial-gradient(circle, rgba(0,0,0,.3) 30%, transparent 32%);
  background-size: 3px 3px;
}
.photo-missing {
  background: var(--color-surface);
  border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
  font-size: 9px;
  text-align: center;
}

/* --- batch/reuse annotations (magenta channel — never combined with cyan) --- */
.reuse-note { font-size: 9.5px; line-height: 1.25; color: var(--color-accent-2-700); }
.role-badge {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
  font-weight: 600;
}

/* --- grocery checkbox mark + struck/faded checked state --- */
.gmark {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  border: 1px solid color-mix(in srgb, var(--color-text) 32%, transparent);
  cursor: pointer;
  background: transparent;
  padding: 0;
}
.gmark.checked {
  display: grid;
  place-items: center;
  background: var(--color-accent-600);
  color: var(--color-bg);
  font-size: 11px;
  border-color: var(--color-accent-600);
}
.gitem-name.checked { text-decoration: line-through; color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.gitem-sub { font-size: 9.5px; line-height: 1.25; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.gitem-sub.checked { color: color-mix(in srgb, var(--color-text) 32%, transparent); }

/* --- selected-row / selected-cell outline --- */
.row-selected { outline: 1.5px solid var(--color-accent); outline-offset: -1.5px; }

/* --- member avatar / headcount badge (22px) --- */
.avatar {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  font: 600 10px var(--font-heading);
}
.avatar-admin { background: var(--color-text); color: var(--color-bg); }
.avatar-member { background: color-mix(in srgb, var(--color-text) 18%, transparent); }
.avatar-headcount {
  font-size: 9px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
}

/* --- progress rule (grocery list, generator readouts) --- */
.progress-track { height: 3px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.progress-fill { height: 3px; background: var(--color-accent); }

/* --- two-column section grid (grocery list aisles) --- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }