/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the screens of the meals share (kit.js): the few tokens the canvas has and the design system
 * does not, the small pieces every screen is made of, the pages opened over a tab, the sheets and the
 * dock, and the wide page. Written with the tokens of design-system.css and never with values of
 * its own, except the ones in the first block, which are the canvas's own. The stylesheets of the
 * groups of screens (plan.css, recipes.css, house.css, session.css, portions.css) come after this one
 * and only add to it. The tests read all of them together: a rule written twice anywhere, a token
 * used and not defined, a design system token written again, all fail.
 */

:root {
  /* the page of the sub-pages: over the tab bar (--z-tabs), under the sheets (--z-sheet) */
  --z-page: 15;

  /* the three columns of the wide page */
  --sidebar-width: 256px;
  --dock-width: 360px;

  /* the canvas's own colours, the ones the design system has no name for: the warning is the system's
     amber; the freezer is a blue (the canvas's --cold), and so are the two people besides you that
     the avatars tell apart */
  --warn: var(--amber-600);
  --warn-soft: var(--highlight-soft);
  --cold: #1D4ED8;
  --cold-soft: #EFF6FF;
  --avatar-1: #BE185D;
  --avatar-2: #0F766E;
}

[data-theme="dark"] {
  --warn: var(--highlight);
  --cold: #7DA2FF;
  --cold-soft: rgba(125, 162, 255, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --warn: var(--highlight);
    --cold: #7DA2FF;
    --cold-soft: rgba(125, 162, 255, 0.14);
  }
}

/* ------------------------------------------------------------------------ small pieces */

.kit-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: var(--border-hairline) solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  line-height: 1;
}

.kit-pill--accent { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent); }
.kit-pill--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.kit-pill--cold { background: var(--cold-soft); border-color: var(--cold); color: var(--cold); }
.kit-pill--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }

/* a button that reads as a line of text: a link, with the height of a finger */
.kit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kit-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.kit-note { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.kit-note--warn { color: var(--warn); }
.kit-note--cold { color: var(--cold); }

/* an estimate, with how much of the recipe it covers, and the names of what is left out one tap away */
.kit-nutri { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.kit-nutri__value { font-variant-numeric: tabular-nums; }
.kit-nutri__cover { font-size: var(--fs-caption); color: var(--text-muted); }
.kit-nutri__cover.kit-link { font-size: var(--fs-caption); color: var(--text-muted); text-decoration: underline; }
.kit-nutri__names { flex-basis: 100%; font-size: var(--fs-caption); color: var(--text-muted); }

/* the state of a place that has nothing, or could not be read */
.kit-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}

.kit-state--error { border-color: var(--danger); }
.kit-state__title { margin: 0; font-size: var(--fs-h4); }
.kit-state__text { margin: 0; color: var(--text-muted); }
.kit-state--error .kit-state__text { color: var(--danger); }

/* the − N + of an amount */
.kit-stepper { display: inline-flex; align-items: center; gap: var(--space-1); }
.kit-stepper__value { min-width: 28px; text-align: center; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.kit-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kit-stepper__button:disabled { opacity: 0.45; cursor: default; }
.kit-stepper__button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* the close button of a sheet and of the dock's panel */
.kit-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.kit-x:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* one of the people of a home: a round letter. Yours is the accent, the others have a colour each. A
   button where it can be pressed, with the round letter in a 44px target */
.kit-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kit-avatar:disabled { cursor: default; }
.kit-avatar:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }

.kit-avatar__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-semibold);
}

.kit-avatar--1 .kit-avatar__letter { background: var(--avatar-1); color: var(--text-inverse); }
.kit-avatar--2 .kit-avatar__letter { background: var(--avatar-2); color: var(--text-inverse); }
.kit-avatar[aria-pressed="false"] .kit-avatar__letter { opacity: 0.35; }

/* a choice among a few, as a card: the pressed one has the accent. The recipes to put in a plan, the
   dishes of a meal and the days to cook on are this */
.kit-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kit-choice:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kit-choice[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.kit-choice:disabled { cursor: default; opacity: 0.6; }

.kit-choice__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kit-choice__name { font-weight: var(--fw-medium); }
.kit-choice__meta { font-size: var(--fs-caption); color: var(--text-muted); }

.kit-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.kit-pills .kit-choice {
  width: auto;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------------------ sub-pages */

/* a page opened over a tab: on a phone it covers the screen, with no tab bar; the arrow is 44 pixels */
#subpages { display: block; }

.subpage {
  position: fixed;
  inset: 0;
  z-index: var(--z-page);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}

.subpage__bar, .subpage__body, .subpage__foot {
  width: 100%;
  max-width: var(--column-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.subpage__bar { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); }
.subpage__head { display: flex; flex-direction: column; gap: var(--space-1); }

.subpage__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--space-3));
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.subpage__back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.subpage__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

/* the button that sends the page: in sight at the bottom, with the page scrolling under it */
.subpage__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: var(--border-hairline) solid var(--border);
}

.subpage__foot:empty { display: none; }

/* ----------------------------------------------------------------------- sheets and the dock */

.kit-sheet__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.kit-sheet__body { display: flex; flex-direction: column; gap: var(--space-3); }

/* the buttons of a sheet, in sight at its bottom whatever its length: the card's own padding is
   taken back, so that the foot sits on the edge of the sheet and not above it */
.kit-sheet__foot {
  position: sticky;
  bottom: calc(-1 * (var(--space-6) + env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: calc(-1 * (var(--space-6) + env(safe-area-inset-bottom)));
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--border-hairline) solid var(--border);
}

.kit-sheet__foot:empty { display: none; }

.dock { display: none; }
.dock__base, .dock__over { display: flex; flex-direction: column; gap: var(--space-4); }

.dock-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-dock__head { align-items: flex-start; }

/* the logo and the name, which only the sidebar of the wide page has */
.kit-brand { display: none; }

/* -------------------------------------------------------------------------- the wide page */

/* From this width the page is three columns, the way Hello Pantry's is: the sidebar with the tabs
   (the same buttons as the bar), the main column, and the dock. kit.js reads the same number
   (WIDE_MIN). Below it, the one column of a phone, which is what the Mini App is mostly seen in. */
@media (min-width: 1180px) {
  #app {
    max-width: none;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
    align-items: start;
  }

  #app.is-admin { display: block; max-width: var(--container-narrow); }
  #app.is-admin .dock { display: none; }

  .tabs {
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    right: auto;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-1);
    width: auto;
    max-width: none;
    height: 100vh;
    margin: 0;
    padding: var(--space-4) var(--space-4);
    border-top: 0;
    border-right: var(--border-hairline) solid var(--border);
  }

  .tab {
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: 0 var(--space-3);
    font-size: var(--fs-body-sm);
  }

  .tab[aria-current="page"] { flex: none; }

  .tab:not([aria-current="page"]) .tab__label {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
  }

  .kit-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-4);
    font-weight: var(--fw-semibold);
  }

  .kit-brand__logo {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--text-on-accent);
  }

  .screens, #subpages {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: var(--space-6);
  }

  .screens { padding-bottom: var(--space-6); }
  #app.has-pages .screens { display: none; }
  #subpages { padding: 0; }

  .subpage { position: static; overflow: visible; background: transparent; }
  .subpage__bar, .subpage__body, .subpage__foot { max-width: none; padding-inline: var(--space-6); }
  .subpage__foot { background: transparent; }

  .dock {
    display: flex;
    flex-direction: column;
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 0;
    width: var(--dock-width);
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-6);
    background: var(--surface);
    border-left: var(--border-hairline) solid var(--border);
  }

  /* the panel of a choice in the dock is a card on the dock, not a sheet: no handle, no dimming, and
     its buttons under it and not stuck to an edge */
  .dock-panel { padding: 0; }

  .dock-panel .kit-sheet__foot {
    position: static;
    margin: 0;
    padding: var(--space-3) 0 0;
  }
}