/* ===========================================================================
   570 Saapaad

   Designed for two specific readers: a 73-year-old and a 70-year-old, on
   phones, often in bright Indian daylight, reading Romanized Tamil. Every
   choice below follows from that and not from taste.

   WHAT THE CONSTRAINT DICTATES
   - Base type is 19px, not 16. Nothing anywhere goes below 15px.
   - No weight under 500. Thin type disappears at arm's length past 60.
   - Body text is #1C1A17 on #FBF9F3 — about 15:1. Nothing decorative is
     allowed to sit at low contrast "because it is secondary".
   - Every tappable thing is at least 56px tall. Tremor and dry fingertips
     are real and a missed tap on the wrong dose is a wrong record.
   - No hover-only affordances, no swipe-only gestures, no long-press.
   - Colour never carries meaning alone; state is always also a word.

   PALETTE — from what is actually on the plate, not from a design system
     paper     cool near-white with a breath of plum in it
     ink       near-black, faintly aubergine; the only text colour that matters
     brinjal   deep aubergine — structure: selected tabs, headings
     chilli    crimson — the accent. "Now", actions, and the wordmark
     leaf      curry leaf green — done, confirmed, drunk
     mauve     the few things that genuinely are secondary
   Brinjal, chilli and curry leaf are three things in almost every meal this
   app plans, which is a better reason to pick them than "purple looks nice".
   =========================================================================== */

:root {
  --paper:    #FAF7FA;
  --card:     #FFFFFF;
  --ink:      #17111C;
  --mauve:    #635A6B;
  --brinjal:  #452449;
  --brinjal-l:#F1E9F2;
  --chilli:   #BE1236;
  --chilli-l: #FCE8EC;
  --leaf:     #1E6B4C;
  --leaf-l:   #E2F1EA;
  --line:     #E7DEE9;

  --r: 14px;
  --tap: 56px;
  --pad: 16px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* [hidden] is a UA-stylesheet rule, so ANY author rule that sets `display`
   silently defeats it — .gate and .sheet-bg both set display:grid, which is
   how the entry sheet ended up painted over the lock screen. Declaring it
   here, with !important, makes the attribute mean what everyone assumes it
   means and stops the next display rule reintroducing the bug. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--chilli);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------- gate --- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}

.gate-inner { width: 100%; max-width: 340px; text-align: center; }

.mark { margin-bottom: 8px; }

/* The wordmark leans on the numerals, which is the one place a display
   treatment earns its keep: 570 reads instantly at any size or distance. */
.mark-num {
  display: block;
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--chilli);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mark-word {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px;
}

.gate-copy { color: var(--mauve); margin: 20px 0 12px; }

.lock-input {
  width: 100%;
  height: var(--tap);
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
  margin-bottom: 12px;
}

.lock-error {
  margin-top: 14px;
  color: var(--chilli);
  background: var(--chilli-l);
  padding: 12px;
  border-radius: var(--r);
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 18px;
  border: 2px solid var(--brinjal);
  border-radius: var(--r);
  background: var(--brinjal);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.btn-go, .btn-big {
  background: var(--chilli);
  border-color: var(--chilli);
  color: #fff;
}

/* Section eyebrows carry the aubergine; the chilli is reserved for "now"
   and for cautions, so it never has to compete with itself. */
.shop-sec { color: var(--brinjal); }

.btn-big { font-size: 21px; }

.btn-quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 600;
  margin-top: 10px;
}

.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------- head --- */

.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

/* One row carrying who, when, and the way in to settings. The name has to
   stay unmistakable — picking food against the wrong person is the failure
   this whole app has to avoid — so it is set large and in the ink colour
   while everything beside it stays quiet. */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--pad);
  min-height: 60px;
}

.who-pick {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* A real <select>: the phone draws its own picker, which is bigger and
   easier to hit than any menu built here, and it reads correctly to
   VoiceOver without extra work. */
.who-pick select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 6px 42px 6px 0;
  min-height: 48px;
  cursor: pointer;
  max-width: 48vw;
  font-size: clamp(21px, 6.5vw, 27px);
  text-overflow: ellipsis;
}

/* A filled chip rather than a loose glyph. A bare caret next to 27px text
   reads as punctuation and gets ignored; a solid coloured button beside the
   name says "this opens something", which is the whole job. */
.who-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--chilli);
  color: #fff;
  pointer-events: none;
}

.topbar-date {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  color: var(--mauve);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.gear {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--brinjal);
  cursor: pointer;
}

.gear:active { background: var(--brinjal-l); }

.back { margin-bottom: 14px; text-align: left; }

/* Four tabs, always all visible, never clipped and never scrolling.
   `flex: 1 1 auto` with an auto basis is the whole trick: each tab starts at
   its own text width, then shares the leftover space in proportion to that
   width. "Exercise" ends up wider than "Food" without measuring anything in
   JavaScript, and the row always totals exactly the screen width.
   Padding and type size are clamped to the viewport so a 320px phone shrinks
   them rather than pushing the last tab off the edge. */
.views {
  display: flex;
  gap: 4px;
  padding: 0 var(--pad) 10px;
  overflow: hidden;
}

.view-tab {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px clamp(4px, 2.2vw, 16px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--mauve);
  font-weight: 600;
  font-size: clamp(15px, 4.1vw, 19px);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.view-tab.is-active {
  background: var(--chilli-l);
  border-color: var(--chilli);
  color: var(--ink);
  font-weight: 700;
}

/* --------------------------------------------------------------- view --- */

.view { padding: var(--pad); max-width: 620px; margin: 0 auto; }

.daystamp {
  margin: 4px 0 18px;
  font-size: 17px;
  font-weight: 600;
  color: var(--mauve);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.empty {
  padding: 28px 20px;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--r);
  text-align: center;
  color: var(--mauve);
}

/* ---------------------------------------------------------- readings --- */

.vrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }

.vbtn {
  min-height: 64px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}

.vbtn-k { display: block; font-size: 15px; font-weight: 700; color: var(--mauve);
          text-transform: uppercase; letter-spacing: 0.06em; }
.vbtn-v { display: block; font-size: 22px; font-weight: 800;
          font-variant-numeric: tabular-nums; }

/* A flagged reading is the one thing in this app allowed to interrupt. */
.vflag {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r);
  border-left: 5px solid var(--chilli);
  background: var(--chilli-l);
  color: var(--chilli);
  font-weight: 600;
  font-size: 17px;
}
.vflag.watch { border-left-color: var(--brinjal); background: var(--brinjal-l);
               color: var(--brinjal); }

.vitem {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 2px solid var(--line);
  font-weight: 600;
}
.vitem:first-child { border-top: 0; }
.vitem b { font-variant-numeric: tabular-nums; font-size: 19px; }
.vitem small { color: var(--mauve); font-weight: 600; }
.vitem .vwhen { margin-left: auto; color: var(--mauve); font-size: 16px; }

/* --------------------------------------------------- the day, in order --- */
/*
   SIGNATURE. Their whole day already runs on fixed clock moments — coffee at
   7:20, lunch, coffee at 4:30, dinner, water in between. So the screen is
   that: one column, in time order, hour first and large. No cards to compare,
   no navigation, nothing to decide. Read down, find now, do the thing.
*/

.spine { list-style: none; margin: 0; padding: 0; }

.moment {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}

/* The rule joining the day together, drawn behind the time column. */
.moment::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 34px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}
.moment:last-child::before { display: none; }

.moment-time {
  font-size: 25px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--mauve);
  padding-top: 12px;
  text-align: right;
  position: relative;
  z-index: 1;
}

.moment-body {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
}

.moment-kind {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 6px;
}

.moment-what { font-size: 20px; font-weight: 600; }

.moment-qty {
  color: var(--mauve);
  font-weight: 600;
}

.moment-macros {
  margin-top: 6px;
  font-size: 16px;
  color: var(--mauve);
  font-variant-numeric: tabular-nums;
}

/* Water is a small recurring beat between the meals, not an event of the
   same weight. Ten full-size cards buried the six that matter; these are
   half-height, quieter, and still a 48px tap target. */
.moment.is-water { padding-bottom: 8px; }

.moment.is-water .moment-body {
  padding: 8px 12px;
  background: transparent;
  border-style: dashed;
}

.moment.is-water .moment-kind { display: none; }

.moment.is-water .moment-what {
  font-size: 17px;
  font-weight: 600;
  color: var(--mauve);
}

.moment.is-water .moment-time {
  font-size: 19px;
  padding-top: 8px;
  font-weight: 700;
}

.moment.is-water .moment-act {
  margin-top: 8px;
  min-height: 44px;
  font-size: 17px;
}

.moment.is-water.is-done .moment-body {
  background: var(--leaf-l);
  border-style: solid;
}

.moment.is-water.is-done .moment-what { color: var(--ink); }

.moment.is-water .moment-tag {
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 14px;
}

/* A dose that came and went unanswered. Visible, but not shouting. */
.moment.is-missed .moment-time { opacity: .5; }
.moment.is-missed .moment-body { opacity: .7; }

/* Now. The one place colour is loud, because "where am I in the day" is the
   question the screen exists to answer. */
.moment.is-now .moment-body {
  border-color: var(--chilli);
  background: var(--chilli-l);
}
.moment.is-now .moment-time { color: var(--chilli); }

/* Done. Always paired with a word, never colour alone. */
.moment.is-done .moment-body {
  border-color: var(--leaf);
  background: var(--leaf-l);
}

.moment-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: var(--leaf);
  color: #fff;
}

.moment-act {
  margin-top: 12px;
  min-height: 48px;
  width: 100%;
  padding: 10px;
  border: 2px solid var(--brinjal);
  border-radius: 10px;
  background: var(--card);
  font-weight: 700;
  cursor: pointer;
}

/* -------------------------------------------------------------- water --- */

.dial-wrap { text-align: center; margin-bottom: 22px; }

.dial { position: relative; width: 210px; margin: 0 auto 18px; }
.dial svg { width: 100%; transform: rotate(-90deg); }

.dial-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 11;
}

.dial-fill {
  fill: none;
  stroke: var(--chilli);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset .4s ease;
}

.dial-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.dial-mid b {
  display: block;
  font-size: 52px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dial-mid span { color: var(--mauve); font-weight: 600; }

.doses { list-style: none; margin: 0 0 22px; padding: 0; }

.dose {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  margin-bottom: 8px;
}

.dose-at {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 68px;
}

.dose-oz { flex: 1; color: var(--mauve); font-weight: 600; }

.dose-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 2px solid var(--leaf);
  background: var(--leaf);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.dose-btn.undo {
  background: var(--card);
  color: var(--chilli);
  border-color: var(--chilli);
}

.dose.done { border-color: var(--leaf); background: var(--leaf-l); }
.dose.missed { opacity: .72; }

/* -------------------------------------------------------------- panel --- */

.panel {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad);
  margin-bottom: 16px;
}

.panel-h { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.panel-note { margin: 0 0 14px; color: var(--mauve); font-size: 17px; }

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.field-col { display: block; }

.field label { flex: 1; font-weight: 600; }
.field-col label { display: block; margin-bottom: 6px; }

.field input, .field select, .field textarea, .sheet textarea {
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.field input[type="number"] { width: 108px; }
.field input[type="time"], .field select { width: 150px; }

.field-col textarea, .sheet textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
}

.unit { color: var(--mauve); font-weight: 600; margin-left: 6px; }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  font-weight: 600;
}

.check input { width: 26px; height: 26px; accent-color: var(--chilli); }

.saved {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--leaf-l);
  color: var(--leaf);
  border-radius: 10px;
  font-weight: 600;
}

.radios label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-weight: 600;
}

.radios input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--chilli); }
.radios small { display: block; color: var(--mauve); font-weight: 500; font-size: 16px; }

.dev {
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

.dev-name { font-weight: 700; }
.dev-sub { color: var(--mauve); font-size: 16px; margin: 2px 0 8px; }
.dev-row { display: flex; gap: 16px; flex-wrap: wrap; }
.dev-row label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dev-row input { width: 24px; height: 24px; accent-color: var(--chilli); }

/* ----------------------------------------------------------- shopping --- */

.shop {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 0 var(--pad);
  margin-bottom: 14px;
}

.shop[open] { padding-bottom: var(--pad); }

.shop-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.shop-h::-webkit-details-marker { display: none; }

.shop-count { color: var(--mauve); font-weight: 600; font-size: 17px; }

.shop-sec {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chilli);
  margin: 14px 0 6px;
}

/* A row is a label wrapping its checkbox, so the whole line is the tap
   target — she is doing this one-handed in a shop. */
.shop-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 8px 0;
  border-top: 2px solid var(--line);
  font-weight: 600;
  cursor: pointer;
}

.shop-item input { width: 26px; height: 26px; margin-top: 3px; accent-color: var(--leaf); }
.shop-item.got { opacity: .5; text-decoration: line-through; }
.shop-qty { color: var(--mauve); font-weight: 600; }
.shop-note { display: block; color: var(--chilli); font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------------ weekbar --- */

.sum {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--pad);
  margin-bottom: 14px;
  font-weight: 600;
}

.sum b { font-variant-numeric: tabular-nums; }

.weekbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 700;
}

.step {
  min-width: 52px;
  min-height: 52px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}

.day {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--pad);
  margin-bottom: 12px;
}

.day.today { border-color: var(--chilli); }

.day-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
}

.day-h small { color: var(--mauve); font-weight: 600; font-variant-numeric: tabular-nums; }

.slot { padding: 10px 0; border-top: 2px solid var(--line); }
.slot:first-of-type { border-top: 0; }

.slot-h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve);
}

.slot-what { font-weight: 600; }
.slot-sub { color: var(--mauve); font-size: 16px; }

/* An exercise caution is the one thing on the screen allowed to shout. */
.caution {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--chilli-l);
  border-left: 5px solid var(--chilli);
  border-radius: 8px;
  color: var(--chilli);
  font-weight: 600;
  font-size: 17px;
}

.rest { color: var(--mauve); font-weight: 600; }

/* -------------------------------------------------------------- sheet --- */

.sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(23, 17, 28, .58);
  display: grid;
  align-items: end;
  z-index: 60;
}

.sheet {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.sheet-h { margin: 0 0 12px; font-size: 22px; }
.sheet-row { display: grid; gap: 8px; margin-top: 14px; }

/* One logged item: dish on its own line, amount below it. Stacked rather
   than three across, because three controls side by side on a phone gives
   each about 90px and none of them are comfortably tappable. */
.erow {
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--paper);
}

.erow-item {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 8px;
}

.erow-amt { display: flex; gap: 8px; align-items: center; }

.erow-amt select {
  min-height: 50px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.erow-qty { width: 96px; }

.erow-est {
  margin-top: 6px;
  color: var(--mauve);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.erow-unit { flex: 1; min-width: 0; }

.erow-del {
  min-width: 50px;
  min-height: 50px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--chilli);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.working {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--brinjal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 70;
}

.working span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -1px;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  body { font-size: 20px; }
}


/* ------------------------------------------------------------- credit --- */

.credit {
  text-align: center;
  color: var(--mauve);
  font-size: 15px;
  font-weight: 600;
  padding: 26px 0 calc(20px + env(safe-area-inset-bottom));
  letter-spacing: 0.04em;
}

.credit b { color: var(--chilli); font-weight: 700; }