/* Rasoi. Same build as the CrossFit companion: one confident accent, a display
   face for headings, filled primary buttons, cards with real weight. The accent
   is turmeric running into chili, because that is the colour of the food.
   Logical properties throughout so the Urdu right-to-left view needs no
   separate stylesheet. */

:root {
  --paper: #faf6ef;
  --raised: #ffffff;
  --ink: #1f1812;
  --ink-soft: #6a5b4c;
  --line: #ebe2d4;
  --haldi: #c8821e;
  --haldi-soft: #fbf0dd;
  --accent: #b9560f;
  --accent-ink: #9a430a;
  --accent-soft: #fff1e4;
  --coriander: #2f6b3d;
  --coriander-soft: #e9f4ec;
  --clay: #a8432a;
  --clay-soft: #fbe8e2;
  --shadow: 0 1px 2px rgba(31, 24, 18, 0.04), 0 8px 24px rgba(31, 24, 18, 0.06);

  --gutter: 18px;
  --radius: 16px;
  --tap: 52px;

  --font-latin: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-urdu: "Noto Nastaliq Urdu", var(--font-latin);
  --font: var(--font-latin);
}

:root[lang="ur"] {
  --font: var(--font-urdu);
  --font-head: var(--font-urdu);
  line-height: 2.1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1612;
    --raised: #26201a;
    --ink: #f4ede3;
    --ink-soft: #b9aa99;
    --line: #3b3128;
    --haldi: #e3a74a;
    --haldi-soft: #3a2c17;
    --accent: #e0832f;
    --accent-ink: #f0a35c;
    --accent-soft: #3a2616;
    --coriander: #82c393;
    --coriander-soft: #1f3324;
    --clay: #e4876b;
    --clay-soft: #3e241d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --paper: #1b1612;
  --raised: #26201a;
  --ink: #f4ede3;
  --ink-soft: #b9aa99;
  --line: #3b3128;
  --haldi: #e3a74a;
  --haldi-soft: #3a2c17;
  --accent: #e0832f;
  --accent-ink: #f0a35c;
  --accent-soft: #3a2616;
  --coriander: #82c393;
  --coriander-soft: #1f3324;
  --clay: #e4876b;
  --clay-soft: #3e241d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }

/* A class that sets display, such as .pill, would otherwise beat the hidden
   attribute and leave an empty coloured sliver on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-inline: var(--gutter);
  padding-block: 20px 48px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main { max-inline-size: 44rem; margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin-block: 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--accent-ink); font-weight: 600; }

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-block-end: 16px;
  box-shadow: var(--shadow);
}

button, .button {
  font: inherit;
  font-weight: 600;
  min-block-size: var(--tap);
  padding-inline: 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

button:hover { border-color: var(--accent); }
button:active { transform: translateY(1px); }

/* The main action on any form is filled, so there is never a question of which
   button moves things forward. */
button[type="submit"], button.primary {
  inline-size: 100%;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
button[type="submit"]:hover, button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--haldi);
  outline-offset: 2px;
}

/* The clock button is the one thing she touches every visit, so it is the
   largest target on the screen and readable at arm's length. */
.clock {
  inline-size: 100%;
  min-block-size: 160px;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  background: linear-gradient(150deg, #3b8a4e, #2a5e36);
  color: #fff;
  box-shadow: 0 14px 36px rgba(47, 107, 61, 0.28);
}

.clock[data-state="running"] {
  background: linear-gradient(150deg, #d8672e, #a8432a);
  box-shadow: 0 14px 36px rgba(168, 67, 42, 0.3);
}

input, select, textarea {
  font: inherit;
  min-block-size: var(--tap);
  inline-size: 100%;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  color: var(--ink);
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-block: 12px;
  border-block-end: 1px solid var(--line);
}

.row:last-child { border-block-end: none; }

/* A label and its figure: the figure is what the eye is looking for. */
.row > strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

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

.muted { color: var(--ink-soft); }

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.pill[data-tone="risk"] { background: var(--clay-soft); color: var(--clay); }
.pill[data-tone="good"] { background: var(--coriander-soft); color: var(--coriander); }

.langbar { display: flex; gap: 6px; justify-content: flex-end; margin-block-end: 14px; }
.langbar button { min-block-size: 38px; padding-inline: 14px; font-size: 0.9rem; border-radius: 999px; }
.langbar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* One row of tabs that scrolls sideways, rather than four rows of wrapped
   buttons pushing the screen's content below the fold. */
nav.tabs {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter);
  margin-block-end: 18px;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
  flex: 0 0 auto;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  min-block-size: 40px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
nav.tabs a:hover { background: var(--accent-soft); color: var(--accent-ink); }
nav.tabs a[aria-current="page"] { background: var(--accent); color: #fff; }

/* Sign-in. The whole screen is the warm colour and the form sits on it as one
   panel, the way the CrossFit gate does it. */
body:has(#login:not([hidden])) {
  background: linear-gradient(160deg, #d8822a 0%, #b9560f 55%, #8f3a1f 100%);
  min-block-size: 100dvh;
}
body:has(#login:not([hidden])) main { padding-block-start: 6vh; }
body:has(#login:not([hidden])) .langbar button {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
body:has(#login:not([hidden])) .langbar button[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: #9a430a;
}

#login {
  max-inline-size: 24rem;
  margin-inline: auto;
  padding: 30px 26px 26px;
  border: none;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(60, 20, 0, 0.35);
}
/* The karahi from the landing page, as the seal on the sign-in panel. */
#login::before {
  content: "";
  display: block;
  inline-size: 64px;
  block-size: 64px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: var(--accent-soft) center / 44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 92'%3E%3Cg fill='none' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M45 34c-6-6 6-9 0-17M60 30c-7-7 7-11 0-21M75 34c-6-6 6-9 0-17' stroke='%23c8821e'/%3E%3Cpath d='M22 46h76M24 46c2 26 18 36 36 36s34-10 36-36' stroke='%232f6b3d'/%3E%3Ccircle cx='14' cy='46' r='7' stroke='%23a8432a'/%3E%3Ccircle cx='106' cy='46' r='7' stroke='%23a8432a'/%3E%3C/g%3E%3C/svg%3E");
}
#login h1 { font-size: 2rem; margin-block-end: 0.15em; }
#login form { display: flex; flex-direction: column; gap: 12px; margin-block-start: 18px; text-align: start; }
#login input { text-align: center; font-size: 1.2rem; letter-spacing: 0.12em; }
#login label { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-block: 18px 6px;
}
:root[lang="ur"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

/* Kitchen notes. Her tips read as quotations, because they are hers. */
.tips { display: flex; flex-direction: column; gap: 10px; margin-block: 14px 18px; }
.tip {
  margin: 0;
  padding: 12px 16px;
  background: var(--haldi-soft);
  border-inline-start: 4px solid var(--haldi);
  border-radius: 10px;
}
.tip p { margin: 0 0 4px; }
.tip footer { font-size: 0.85rem; }
:root[lang="ur"] .tip[lang="en"] { font-family: var(--font-latin); }
.tip[lang="ur"] { font-family: var(--font-urdu); line-height: 2.1; }

button.quiet {
  min-block-size: 36px;
  padding-inline: 12px;
  margin-block-start: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: transparent;
}

.card > textarea, .card > label { margin-block-start: 10px; }
.card > textarea { min-block-size: 96px; padding-block: 10px; display: block; }
.card > button.primary { margin-block-start: 12px; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-block: 9px;
  padding-inline-start: 34px;
  border-block-end: 1px solid var(--line);
}
.checklist li:last-child { border-block-end: none; }
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 13px;
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid var(--coriander);
  border-radius: 5px;
}

/* Tap, don't type. Chips and steppers come from src/lib/enhance.js. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px; }
.chip {
  min-block-size: 44px;
  padding-inline: 16px;
  border-radius: 999px;
  font-size: 0.95rem;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.stepper { display: flex; align-items: stretch; gap: 8px; flex: 1 1 12rem; max-inline-size: 16rem; }
.stepper input {
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  min-inline-size: 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .step {
  flex: 0 0 52px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 14px;
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}

/* The native control behind a row of chips. It stays in the page as the value
   the screen reads, but is not shown or reachable twice. */
.enhanced-away {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-block-size: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The photo picker reads as one of this app's buttons, not the browser's. */
input[type="file"] { padding: 8px; font-size: 0.9rem; color: var(--ink-soft); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-inline-end: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  cursor: pointer;
}