/*
 * Entry stylesheet. tokens.css and components.css are imported from app.js before this file (direction F, P058).
 * Only small app-level additions live here, built from the same tokens.
 */

/* Elements hidden with the HTML attribute stay hidden even when a component sets display. */
[hidden] {
  display: none !important;
}

/* Language menu (_lang_switch.html.twig, P034): a disclosure button with the current language and a list of every
   interface language in its own words; the list opens below the button in headers and above it in the footer, in one
   column on phones and two from 480 px. */
.lang-menu {
  position: relative;
}

.lang-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-touch);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.lang-menu__toggle::-webkit-details-marker {
  display: none;
}

.lang-menu__toggle:hover {
  background: var(--color-surface-hover);
}

/* Below 480 px the button is the globe alone (44 px); the language name stays for screen readers. */
.lang-menu__toggle {
  min-inline-size: var(--size-touch);
  justify-content: center;
}

.lang-menu__current {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lang-menu__chevron {
  transition: transform var(--duration-fast);
}

.lang-menu__details[open] .lang-menu__chevron {
  transform: rotate(180deg);
}

.lang-menu__list {
  position: absolute;
  z-index: var(--z-dialog);
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-0-5);
  inline-size: max-content;
  min-inline-size: 13rem;
  max-inline-size: calc(100vw - 2 * var(--gutter));
  max-block-size: min(70vh, 30rem);
  --color-text: var(--color-ink);
  --color-focus: var(--color-accent);
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  list-style: none;
}

.lang-menu--footer .lang-menu__list {
  inset-block: auto calc(100% + var(--space-1));
  inset-inline: 0 auto;
}

.lang-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu__link:hover {
  background: var(--color-surface-muted);
}

.lang-menu__link[aria-current="page"] {
  background: var(--color-accent-tint);
  font-weight: var(--font-weight-extrabold);
}

@media (min-width: 480px) {
  .lang-menu__current {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }

  .lang-menu__list {
    grid-template-columns: repeat(2, minmax(11rem, 1fr));
  }
}

.group-row--you {
  background: var(--color-accent-soft);
}

/* Long compound words in the large landing titles (DE "Ernährungstagebuch", P034): German is hyphenated, and no word in
   any language may push the page sideways; languages that fit keep their line breaks. */
.landing-cta__title {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Languages with long compound words (DE, NL, SV, DA, NB, FI, HU) hyphenate the big titles. */
:is(.hero__title, .lp-h2, .landing-cta__title):is(:lang(de), :lang(nl), :lang(sv), :lang(da), :lang(nb), :lang(fi), :lang(hu)) {
  hyphens: auto;
}

/* Long legal texts (no typography rules in the handoff yet, OPEN_QUESTIONS D.25). */
.legal h2 {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
}

.legal ul,
.legal ol {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1-5);
}

/* Connectivity banner from base.html.twig (no design component). */
.offline-banner {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning-bg);
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-align: center;
}

/* In the public header the language menu sits on the right, next to the account links. */
.landing-header__inner > .lang-menu {
  margin-inline-start: auto;
}

.landing-header__inner > .lang-menu + .landing-header__nav {
  margin-inline-start: 0;
}

/* Day view in place (app/day.html.twig): the wrapper of the sheets that the Turbo Stream answers swap adds no box. */
.day-dialogs {
  display: contents;
}

/* "Pick a day" (design summary-month.html, state 4): <turbo-frame> is inline by default; in the sheet and on its
   no-JS page it stacks the period arrows and the calendar like the other sheet content (gap of .sheet[open]). */
.day-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

/* Landing after the market audit (P039, docs/design/reviews/2026-10-31_landing-audit.md §3). Design tokens only. */
.landing-cta__micro {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.landing-cta__micro {
  color: inherit;
  opacity: 0.85;
}

/* Short facts in a row that wraps into a column (hero, "Who sees what"). */
.info-list--inline {
  flex-flow: row wrap;
  gap: var(--space-2) var(--space-5);
}

.info-list--inline .info-list__item {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}


/* Public connection guide /connect (P039). */
.connect-guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.connect-guide__assistant {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.connect-guide__title {
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-extrabold);
}

/* The server address first on every page that connects an assistant (connect/_address.html.twig). */
.connect-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Amount + unit (.field-row, 1 : 2, handoff components.html "Więcej szczegółów"): an item kept "per portion" adds a 4th
   unit (g · ml · pcs · portion). Four segments do not fit in two thirds of a phone column (at 390 px "porzione" or
   "Portion" overflow their 49 px, at 320 px every label does), so below the tablet width the unit gets its own row with
   4 px at the sides of a label; in a column narrower than 360 px (phones of 320 px) the four segments form two rows of
   two, because even a full row leaves 60 px per segment and the selected Italian "porzione" needs 61 px. */
@container app (max-width: 767px) {
  .field-row:has(.choice-seg__option:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .choice-seg:has(.choice-seg__option:nth-child(4)) .choice-seg__label {
    padding-inline: var(--space-1);
  }
}

@container app (max-width: 359px) {
  .choice-seg:has(.choice-seg__option:nth-child(4)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Multi-line field (_form.html.twig textarea: "Assumptions" in Energy needs). The handoff only has the one-line .input
   (padding 0 at the top and bottom, the height comes from min-block-size), so in a <textarea> the text touched the
   frame. Same frame and font, the room of a one-line field above and below the text, resized only downwards. */
textarea.input {
  display: block;
  padding-block: var(--space-3);
  resize: vertical;
}

/* Long call-to-action labels in some languages wrap instead of pushing the page sideways at 320 px (P039). */
.landing-cta__button {
  max-inline-size: 100%;
  white-space: normal;
  text-wrap: balance;
}

/* Meals prepared for later (P045): visibly apart from what was eaten, on a plain background. */
.planned-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.planned-meal {
  padding: var(--space-3) var(--space-3-5) var(--space-3-5);
  border: var(--border-width-thin) var(--border-style-unconfirmed) var(--color-border-control);
  border-radius: var(--radius-note);
}

.planned-meal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}

.planned-meal__head strong {
  font-size: var(--font-size-food-kcal);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.planned-meal__label {
  min-inline-size: 0;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-extrabold);
  overflow-wrap: anywhere;
}

.planned-meal__items {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-meal-summary);
}

.planned-estimate {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.planned-meal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Friends group (P043): one label block per person under a rule, stats in three columns that also hold long labels at 320 px. */
.group-week__range {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
}

.group-week__note {
  margin-block-start: var(--space-3);
}

.group-board {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-row {
  padding-block: var(--space-2-5) var(--space-5);
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.group-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

.group-row__place {
  flex: none;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
}

.group-row__name {
  min-inline-size: 0;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-extrabold);
  overflow-wrap: anywhere;
}

.group-row__you {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.group-row__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* Numbers stay on one line when a long label wraps to two. */
.group-row__stats > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.group-row__stats dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.group-row__stats dd {
  margin: 0;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
}

.group-row__today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--font-size-small);
}

.group-row__shared {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.group-row__remove {
  margin-inline-start: auto;
}

.group-sharing__hidden {
  margin-block: var(--space-3);
}

.group-invite,
.group-sharing {
  margin-block: var(--space-5);
}

.group-invite__new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* The group row on the Today screen sits in a list like every other row (a one-item .settings-list). */
.today__groups {
  margin-block-start: var(--space-4);
}

/* Friends group board: heading, text and the link box of the invitation are spaced like the sharing card; the sharing
   choices share one frame, "Leave" is a quiet warning. */
.group-invite {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.group-sharing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.group-sharing-card .form {
  align-items: flex-start;
}

.group-share-list {
  align-self: stretch;
}

.group-share-list .field {
  margin: 0;
}

.settings-list--warning {
  padding-inline: var(--space-3-5);
  border-block-start: 0;
  border-radius: var(--radius-note);
  background: var(--color-warning-bg);
}

.settings-list--warning > li {
  border-block-end: 0;
}

/* Saved foods: the row adds the food to a day, "Edit" is the one other action (delete is on the edit page). */
.food-row {
  display: flex;
  align-items: stretch;
}

.food-row__main {
  flex: 1;
  inline-size: auto;
  min-inline-size: 0;
}

.food-row__edit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1-5);
  padding-inline: var(--space-3);
  border-inline-start: var(--border-width-hairline) solid var(--color-border-subtle);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.food-row__edit:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.group-leave {
  margin-block-start: var(--space-5);
}

/* "No searching" comparison on the landing (P041): the steps of a database counter next to one message. */
/* The headline is two sentences (P041): the promise in full size, how it works on its own line below it. */
/* Landing demo (P041): message, thinking, saved, diary. The default state is the finished picture, so without JS or with
   reduced motion nothing is missing; opacity and transform only, one play under 5 s (landing_demo_controller.js). */