/* Hanken Grotesk, self-hosted: the page's CSP is default-src 'none', so a font from Google's CDN
   is blocked outright. Variable 400-800 in one file; the latin-ext subset only loads if a glyph
   needs it, and anything outside Latin (Devanagari in a reminder body) falls through to system-ui. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/my-zo/assets/hanken-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/my-zo/assets/hanken-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  font:
    15px / 1.5 "Hanken Grotesk",
    system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--ground);
  --ground: #f2f6f2;
  --surface: #ffffff;
  --surface-sunk: #eaf0eb;
  --ink: #10302a;
  --ink-soft: #436055;
  --muted: #65776e;
  --faint: #9aaba0;
  --line: #dfe9e1;
  --line-strong: #c3d5c8;
  --green: #176b4e;
  --green-lift: #1f9268;
  --green-deep: #115438;
  --green-wash: #e4f0e8;
  --on-green: #ffffff;
  --amber: #8a6416;
  --amber-wash: #fdf1dd;
  --danger: #a23737;
  --danger-deep: #812929;
  --danger-wash: #fbe9e7;
  --focus: #80bd94;
  --knob: #ffffff;
  --scrim: #183c3255;
  /* Kept: older rules still reference --border. */
  --border: var(--line);
  --shadow: 0 1px 2px rgba(16, 48, 42, 0.05), 0 8px 24px -12px rgba(16, 48, 42, 0.18);
  --shadow-lift: 0 2px 6px rgba(16, 48, 42, 0.07), 0 18px 40px -18px rgba(16, 48, 42, 0.3);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d1411;
    --surface: #16201c;
    --surface-sunk: #1d2925;
    --ink: #e8f1ea;
    --ink-soft: #b3c6bb;
    --muted: #8ba296;
    --faint: #6b8076;
    --line: #26332d;
    --line-strong: #34453c;
    --green: #34c08a;
    --green-lift: #4ad79f;
    --green-deep: #5fe3ae;
    --green-wash: #18332a;
    --on-green: #07120e;
    --amber: #e2b566;
    --amber-wash: #33280f;
    --danger: #e98b80;
    --danger-deep: #f0a89f;
    --danger-wash: #3a1f1c;
    --focus: #4ad79f;
    --knob: #dceae1;
    --scrim: #00000099;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}
* {
  box-sizing: border-box;
}
/* Feel like an app inside WhatsApp's browser: no double-tap zoom, no font inflation on rotation. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
header,
main,
nav {
  max-width: 760px;
  margin: auto;
}
header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  padding: 18px 24px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
header.scrolled {
  border-bottom-color: var(--line);
}
.logo {
  position: relative;
  display: block;
  width: 74px;
  height: 40px;
  overflow: hidden;
}
.logo img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.profile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
}
.profile-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
main {
  padding: 8px 24px calc(104px + env(safe-area-inset-bottom, 0px));
}
/* A screen arrives; it does not blink into place. */
main > div > section:not([hidden]),
main > section:not([hidden]) {
  animation: screen-in 0.36s var(--ease) both;
}
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
h1 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 10px 0 6px;
  text-wrap: balance;
}
h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 26px 0 10px;
}
p {
  margin: 8px 0;
}
.muted,
small {
  color: var(--muted);
}
small {
  display: block;
  font-size: 13px;
}
.card {
  background: var(--surface);
  border-radius: 20px;
  padding: 18px;
  margin: 10px 0;
  box-shadow: var(--shadow);
}
/* A row is the unit of My Zo: a fixed leading element, a body that reflows, an optional mark. */
.row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border-radius: 16px;
  padding: 14px 15px;
  margin: 9px 0;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s var(--ease),
    opacity 0.3s var(--ease);
}
.row.tappable {
  cursor: pointer;
}
.row.tappable:active {
  transform: scale(0.985);
}
.row > .body {
  flex: 1;
  min-width: 0;
}
.row .name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.row .meta {
  margin-top: 1px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.row .chev {
  flex: none;
  color: var(--faint);
  font-size: 19px;
  line-height: 1;
  transition: transform 0.22s var(--ease);
}
.row .calendar-icon {
  vertical-align: -2px;
  opacity: 0.75;
}
/* Done, ended, skipped: still legible, plainly behind you. */
.settled {
  opacity: 0.6;
}
/* Zepto predates the row and lays its own out; leave it as it was. */
#zepto .row {
  justify-content: space-between;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
}
.task {
  display: flex;
  align-items: start;
  gap: 13px;
}
.check {
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  height: 25px;
  width: 25px;
  margin-top: 4px;
  padding: 0;
  background: var(--surface);
  color: var(--on-green);
}
.check {
  display: grid;
  place-items: center;
}
.check svg {
  width: 13px;
  height: 13px;
  stroke: currentcolor;
}
.check.done {
  background: var(--green);
  border-color: var(--green);
}
.check:disabled {
  opacity: 1;
  cursor: default;
}
button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--green);
  transition:
    transform 0.16s var(--ease),
    background 0.16s var(--ease);
}
button:active {
  transform: scale(0.96);
}
button:hover {
  background: var(--green-wash);
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.primary {
  background: var(--green);
  color: var(--on-green);
  border-color: transparent;
  box-shadow: 0 4px 14px -5px color-mix(in srgb, var(--green) 65%, transparent);
}
.primary:hover {
  background: var(--green-deep);
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.badge {
  font-size: 12px;
  color: var(--green);
  background: var(--green-wash);
  padding: 3px 8px;
  border-radius: 7px;
}
.tentative {
  background: var(--amber-wash);
  color: var(--amber);
}
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.7) blur(18px);
  -webkit-backdrop-filter: saturate(1.7) blur(18px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  gap: 4px;
}
nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 4px 4px;
  min-height: 44px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 12px;
}
nav button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
nav button[aria-current="page"] svg {
  transform: translateY(-1px) scale(1.06);
}
nav button[aria-current="page"] {
  background: transparent;
  color: var(--green);
}
/* Something already sent is still unticked: the bell's green seal on the clock, with no number. */
nav button {
  position: relative;
}
.nav-dot {
  position: absolute;
  top: 7px;
  left: calc(50% + 3px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--surface);
}
section[hidden] {
  display: none;
}
.notice {
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  padding: 9px 20px;
  text-align: center;
  background: var(--green-wash);
}
label {
  display: block;
  margin: 16px 0 5px;
  font-size: 14px;
}
input,
select,
textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}
dialog {
  border: 1px solid var(--border);
  border-radius: 18px;
  width: min(92vw, 440px);
  padding: 24px;
  color: inherit;
}
dialog::backdrop {
  background: var(--scrim);
}
#status {
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--on-green);
  padding: 10px 16px;
  border-radius: 10px;
  max-width: 90vw;
  font-size: 14px;
}
#status:empty {
  display: none;
}
@media (max-width: 420px) {
  main {
    padding: 8px 18px 100px;
  }
  header {
    padding: 22px 18px 10px;
  }
  h1 {
    font-size: 30px;
  }
  nav button {
    font-size: 13px;
    padding: 9px 10px;
  }
}

/* Component rules further down set `display` and share this selector's specificity, so without
   the override a hidden element stays on screen — which is how an unconnected Zepto was rendering
   in the connections list. Hiding is not a style choice; it is the element not being there. */
[hidden] {
  display: none !important;
}
.danger {
  color: var(--danger);
}
.error {
  color: var(--danger);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.empty {
  padding: 22px 0;
  color: var(--muted);
}
fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 16px 0;
  padding: 12px;
}
legend {
  font-size: 13px;
  color: var(--muted);
}
.days {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.days label {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* The login screen is the first thing anyone sees, and for a moment it is the whole product.
   It centres on one instruction, and the approval code is the only loud thing on it. */
.login {
  max-width: 430px;
  margin: 0 auto;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.login h1 {
  font-size: 28px;
  margin: 0 0 4px;
}
.login .muted {
  font-size: 15.5px;
  margin: 0 auto;
  max-width: 30ch;
}
.login .primary {
  align-self: center;
  min-width: 190px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
}
/* The code exists to be compared against WhatsApp, so it is set to be read a digit at a time. */
.code:not(:empty) {
  display: block;
  margin: 22px auto 0;
  padding: 18px 20px;
  max-width: max-content;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 10px;
  text-indent: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.login .error:not(:empty) {
  margin-top: 18px;
  font-size: 14.5px;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
dialog {
  max-height: 90dvh;
  overflow: auto;
}
#status {
  z-index: 10;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
#error {
  color: var(--danger);
}
a {
  color: var(--green);
}

.reminder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.reminder-heading strong {
  overflow-wrap: anywhere;
}
.icon-button {
  flex: none;
  font-size: 22px;
  min-width: 44px;
  min-height: 44px;
  padding: 3px 8px;
  background: transparent;
  border-color: transparent;
}
.reminder-time {
  margin: 5px 0;
  font-weight: 600;
  color: var(--ink-soft);
}
.reminder-actions .primary {
  min-width: 100px;
}
.quiet {
  background: transparent;
  border-color: transparent;
}
.snooze-options {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.snooze-options button {
  min-height: 48px;
  text-align: left;
}

.reminder-heading {
  justify-content: flex-start;
  gap: 6px;
}
.reminder-heading strong {
  flex: 0 1 auto;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
  padding: 8px;
  color: var(--muted);
}
.icon-button svg {
  width: 18px;
  height: 18px;
}
.event-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calendar-icon {
  flex: none;
  object-fit: contain;
}
.event-ended {
  opacity: 0.52;
  background: var(--surface-sunk);
}
.event-state {
  margin-top: 8px;
}
.memory-content {
  margin-top: 0;
  font-size: 17px;
  line-height: 1.5;
}
.destructive {
  background: var(--danger);
  color: var(--on-green);
  border-color: var(--danger);
}
.destructive:hover {
  background: var(--danger-deep);
}
summary {
  cursor: pointer;
  font-weight: 600;
  padding: 14px 0;
}
.reminder-history {
  margin-top: 28px;
}
.card p,
.card strong {
  overflow-wrap: anywhere;
}
.profile-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profile-link-card p {
  margin-bottom: 0;
}
.profile-link-card button {
  flex: none;
}

nav {
  padding-inline: 6px;
}
#lists-title {
  overflow-wrap: anywhere;
}
.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  width: 100%;
}
.list-inline input {
  flex: 1 1 150px;
  min-width: 0;
}
.list-inline button {
  min-height: 44px;
}
/* A list is an object you open, so it gets an object's surface rather than a divider. It predates
   the component layer and used to be a bare block with a green title, which read as a link in a
   document instead of a card in an app. */
.list-preview {
  display: block;
  text-align: left;
  width: 100%;
  padding: 16px 17px;
  margin: 10px 0;
  color: inherit;
  background-color: var(--surface);
  background-image: var(--sheen);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.18s var(--ease);
}
.list-preview:active {
  transform: scale(0.985);
}
.list-preview strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.list-preview small {
  margin-top: 4px;
}
.list-options {
  margin-bottom: 12px;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.checklist-item {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.checklist-line {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
}
.checklist-line label {
  flex: 1;
  display: flex;
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  margin: 0;
  font-size: 16px;
  cursor: pointer;
}
.checklist-line input[type="checkbox"] {
  flex: none;
  margin: 3px 0 0;
}
.checklist-line span {
  overflow-wrap: anywhere;
}
.checked-item span {
  text-decoration: line-through;
  color: var(--muted);
}
.checklist-line .icon-button {
  margin-top: 2px;
}
.checklist-line .list-inline {
  margin: 4px 0;
}
.checklist-line .actions {
  margin: 0 0 8px;
}
@media (max-width: 360px) {
  nav {
    gap: 0;
  }
  nav button {
    padding-inline: 5px;
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .profile-link-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

#document-content h1 {
  overflow-wrap: anywhere;
  margin-top: 22px;
}
.document-language {
  color: var(--muted);
  margin: 12px 0 24px;
}
.document-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.document-tabs button {
  border: 0;
  background: transparent;
  min-height: 44px;
}
.document-tabs button[aria-selected="true"] {
  background: var(--green-wash);
  color: var(--green);
  font-weight: 650;
}
.document-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 24px;
}
.document-tools a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.translation-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(20px, 5vw, 42px);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.translation-paper p {
  margin: 0 0 1.25em;
  white-space: pre-wrap;
}
.translation-paper h2 {
  font-size: 21px;
  line-height: 1.4;
  margin: 1.8em 0 0.65em;
  scroll-margin-top: 24px;
}
.translation-paper h2:first-child {
  margin-top: 0;
}
.translation-paper ul,
.translation-paper ol {
  padding-inline-start: 24px;
  margin: 0 0 1.5em;
}
.translation-paper li {
  margin-block: 8px;
}
.translation-paper blockquote {
  margin: 1.5em 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.document-table {
  max-width: 100%;
  overflow-x: auto;
  margin: 22px 0;
}
.document-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.55;
}
.document-table th,
.document-table td {
  text-align: start;
  vertical-align: top;
  padding: 12px;
  border: 1px solid var(--border);
  min-width: 110px;
}
.document-table th {
  background: var(--surface-sunk);
  font-weight: 650;
}
.document-note {
  background: var(--green-wash);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
  color: var(--ink-soft);
}
.source-note {
  font-size: 14px;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.document-contents {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.document-contents button {
  display: block;
  text-align: start;
  min-height: 44px;
}
.document-delete {
  margin-top: 24px;
}
.document-table:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 420px) {
  .translation-paper {
    padding: 22px 18px;
    font-size: 16px;
  }
}

/* Zepto's own page. Rows carry the meaning; nothing here explains itself in a paragraph. */
#zepto h2 {
  margin: 26px 0 2px;
}
.status-line {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
}
.status-line::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--faint);
}
.status-line.on::before {
  background: var(--green-lift);
}
#zepto-preferences .row,
#zepto-orders .order {
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
#zepto .tight {
  margin: 2px 0 0;
  font-size: 14px;
}
#zepto-preferences .row button {
  flex: none;
  padding: 4px 10px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#zepto #zepto-disconnect {
  margin-top: 32px;
  padding-left: 0;
  color: var(--danger);
}

/* An order's state is the one thing worth seeing before reading anything. */
#zepto-orders .tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
#zepto-orders .tag.good {
  background: var(--green-wash);
  color: var(--green-lift);
}
#zepto-orders .tag.bad {
  background: var(--danger-wash);
  color: var(--danger);
}
#zepto-orders .tag.live {
  background: var(--amber-wash);
  color: var(--amber);
}

/* Swiggy's own page. One connection, three capabilities, so the page is a list of what the
   connection does followed by a block per capability — today only tables have anything to show. */
#swiggy .brand-head {
  margin: 0 0 6px;
}
#swiggy .brand-head img {
  display: block;
  width: auto;
  height: 28px;
}
#swiggy h2 {
  margin: 26px 0 2px;
}
/* One line each: a state dot, the name Swiggy itself uses, and whether it works yet. This is a
   footer telling you what the connection covers, not the subject of the page. */
.capability {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.capability .name {
  flex: 1;
  font-weight: 600;
}
.capability .state {
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.capability.live .state {
  color: var(--green);
}
.capability .dot {
  margin-right: 0;
}

/* A booking wraps badly as two columns: the restaurant and the date each want the whole width on a
   phone. The day becomes a fixed tile so only the name and the details reflow. */
.booking {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.booking .date {
  flex: none;
  width: 54px;
  padding: 6px 0;
  text-align: center;
  border-radius: 12px;
  background: var(--surface-sunk);
}
.booking .dow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.booking .dom {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.booking .what {
  min-width: 0;
}
.booking .name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.booking .meta {
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.footnote {
  margin: 18px 0 0;
  color: var(--faint);
  font-size: 13px;
}
.powered {
  margin: 22px 0 0;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* Profile: grouped rows, but without the boxes. Labels group; hairlines separate; values sit
   inline on the right. The rest of My Zo is a quiet reading surface and this now matches it. */
.group-label {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 28px 0 2px;
}
.group-note {
  color: var(--faint);
  font-size: 13px;
  margin: 6px 0 0;
}
.settings {
  margin: 0;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.setting > label:first-child,
.setting > span:first-child,
.setting > .brand {
  flex: 1;
  margin: 0;
}
.setting input[type="text"],
.setting input:not([type]),
.setting select {
  flex: 1.2;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
  color: var(--green);
  font: inherit;
}
.setting:last-child {
  border-bottom: 0;
}
.setting.link {
  cursor: pointer;
}
.setting.link:active {
  background: var(--surface-sunk);
}
.setting .brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.setting .state {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.setting .chev {
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--faint);
}
.dot.on {
  background: var(--green);
}
.dot.warn {
  background: var(--amber);
}
/* A checkbox that reads as a switch, so a row of settings looks like settings. */
input.switch {
  appearance: none;
  flex: none;
  width: 42px;
  height: 25px;
  margin: 0;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.15s ease;
}
input.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: left 0.18s var(--ease);
}
input.switch:checked {
  background: var(--green);
}
input.switch:checked::after {
  left: 20px;
}
/* An address is longer than any other Profile value; it truncates rather than push the chevron off. */
#traffic-card .setting .state {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.place-results button {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
}
.place-results small {
  color: var(--muted);
}
#profile form .primary {
  margin-top: 22px;
}
#profile .actions {
  margin-top: 30px;
}

/* A screen that is still loading shows the shape of what is coming, not the word "Loading".
   Perceived speed is most of what separates an app from a page on a slow connection. */
.sk {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--surface-sunk) 25%,
    color-mix(in srgb, var(--surface-sunk) 55%, var(--surface)) 50%,
    var(--surface-sunk) 75%
  );
  background-size: 220% 100%;
  animation: sk-sweep 1.25s linear infinite;
}
.sk-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border-radius: 16px;
  padding: 14px 15px;
  margin: 9px 0;
  box-shadow: var(--shadow);
}
.sk-row .sk-body {
  flex: 1;
  min-width: 0;
}
.sk-tile {
  flex: none;
  width: 52px;
  height: 46px;
  border-radius: 13px;
}
.sk-dot {
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.sk-body .sk-line {
  height: 11px;
  width: 62%;
}
.sk-body .sk-line + .sk-line {
  height: 9px;
  width: 40%;
  margin-top: 8px;
  opacity: 0.7;
}
@keyframes sk-sweep {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Up next: the answer to the question most people open My Zo to ask, given the top of the screen. */
.next {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: linear-gradient(
    160deg,
    var(--surface),
    color-mix(in srgb, var(--green-wash) 55%, var(--surface))
  );
  box-shadow: var(--shadow-lift);
}
.next .when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
}
.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-lift);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}
.next .title {
  margin: 9px 0 3px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.next .meta {
  color: var(--ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.next .foot {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.next .foot button {
  border-radius: 999px;
}

/* A reminder is a row; its other controls open under it rather than living on screen. */
.reminder {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin: 9px 0;
  overflow: hidden;
}
.reminder .row {
  background: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}
.reminder-more {
  display: none;
  padding: 0 15px 12px;
}
.reminder-more .actions {
  margin-top: 0;
}
.reminder.open .reminder-more {
  display: block;
}
.reminder.open .chev {
  transform: rotate(90deg);
}

/* The date tile, shared by the week list and the Swiggy page. */
.date {
  flex: none;
  width: 54px;
  padding: 6px 0;
  text-align: center;
  border-radius: 13px;
  background: var(--surface-sunk);
}
.dow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.dom {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Components
   
   The page had tokens and typography from the approved design but none of its
   component vocabulary, which is why it read as text on a background rather than
   as a built thing. These are the pieces that vocabulary needs. Everything here
   is plain CSS on purpose: the page runs in WhatsApp's WebView on mid-range
   Android over mobile data, where arriving instantly is most of what premium
   feels like, and its CSP admits no third-party code anyway.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* A hairline lighter than the surface it edges. In dark it is the single most
     load-bearing detail: without a lit top edge, a raised surface reads as a
     flat patch of slightly different paint. */
  --edge: rgba(16, 48, 42, 0.07);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge: rgba(255, 255, 255, 0.08);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  }
}

/* A group is several rows that belong together, in one surface with hairlines
   between them — settings, connections, anything with a label and a value. It
   replaces a stack of separate cards, which spends a shadow on every line and
   makes a short list look like a long one. */
.group {
  background-color: var(--surface);
  background-image: var(--sheen);
  border: 1px solid var(--edge);
  border-radius: 18px;
  margin: 10px 0 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.group > * {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  margin: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.group > :first-child {
  border-top: 0;
}
.group > button,
.group > a,
.group > .tappable {
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.group > button:active,
.group > a:active,
.group > .tappable:active {
  background-color: var(--surface-sunk);
}
/* The label takes the room it needs; the value sits against the right edge. */
.group .name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.group .val {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.group .val.on {
  color: var(--green);
  font-weight: 600;
}
.group .chev {
  flex: none;
  color: var(--faint);
  font-size: 19px;
  line-height: 1;
}
/* A row whose title and blurb stack in a body: the body takes the width, so every chevron sits
   against the right edge instead of trailing its own text. */
.group > * > .body {
  flex: 1;
  min-width: 0;
}

/* The micro-label above a group. Uppercase and tracked so it reads as a divider
   rather than as a heading competing with the page title. */
.group-label {
  margin: 24px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* How far through a list you are, in the only form that survives a glance. */
.meter {
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--green-lift));
  transform-origin: left;
  animation: meter-fill 0.7s var(--ease) both;
}
@keyframes meter-fill {
  from {
    transform: scaleX(0);
  }
}

/* A count or state, small and self-contained. */
.chip {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.chip.quiet {
  background: var(--surface-sunk);
  color: var(--muted);
}

/* A heading with a count against the right margin: "Later today … 3 left". */
.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.head-row h2 {
  margin-bottom: 0;
}
.head-row .count {
  color: var(--faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Raised surfaces get the same lit edge as a group, so a card and a row read as
   the same material rather than two different ones. */
.card,
.row {
  background-image: var(--sheen);
  border: 1px solid var(--edge);
}

/* The one card on the page that is allowed to glow: what happens next. */
.card.next {
  position: relative;
  background-color: var(--green-wash);
  border-color: color-mix(in srgb, var(--green) 26%, transparent);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.card.next::after {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--green) 22%, transparent),
    transparent 70%
  );
  pointer-events: none;
}
.card.next > * {
  position: relative;
}

/* Rows arrive in sequence rather than all at once — enough to feel deliberate,
   not enough to wait for. --i is set by the renderer; anything past the eighth
   row is below the fold and starts with the eighth. */
.stagger > * {
  animation: rise 0.42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Every animation here is decoration over a page that is already correct. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* A feature row opens to show the sentence you would actually send. Quoting it in the accent
   makes it read as speech rather than as documentation. */
.say {
  margin-top: 8px;
  color: var(--green);
  font-size: 13.5px;
  font-style: italic;
  animation: rise 0.28s var(--ease) both;
}
.footnote {
  margin: 10px 2px 0;
  color: var(--faint);
  font-size: 12.5px;
}
/* Settings groups predate the component layer and are the same object; give them the same skin. */
.settings {
  background-image: var(--sheen);
  border: 1px solid var(--edge);
}

/* A list card carries its own progress, so the meter spans the card rather than sitting inline. */
.list-preview .meter {
  width: 100%;
}

/* Up one level. Sits above the screen's own title rather than in the header, because the header is
   sticky and shared, and a back control that outlives the screen it belongs to is a trap of its
   own. Hidden at a tab, where there is nowhere up to go. */
.back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 2px;
  padding: 8px 14px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s var(--ease),
    background-color 0.18s var(--ease);
}
.back:active {
  transform: scale(0.97);
  background: var(--surface-sunk);
}
/* iOS zooms into any field whose text is under 16px, which breaks the app feel; one pixel more
   stops it. Last and important because many rules reset fields with the `font` shorthand. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: max(16px, 1em) !important;
}

/* Earlier today: what already went out. A note, not a task, so no tick and no card. */
.earlier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.earlier-row .name {
  color: var(--muted);
}
.earlier-row .body {
  min-width: 0;
}
.earlier-row .meta {
  color: var(--muted);
  font-size: 13px;
}
.earlier-row button {
  flex: none;
  font-size: 13px;
}

/* Later today: the time stands where a tick would, because nothing here can be done yet. */
.reminder.later .time {
  flex: none;
  min-width: 46px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

/* Settled reminders fold away beneath Pending, closed until asked for. */
.completed > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}
.completed > summary::-webkit-details-marker {
  display: none;
}
.completed > summary > span:first-child::after {
  content: '›';
  display: inline-block;
  margin-left: 8px;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}
.completed[open] > summary > span:first-child::after {
  transform: rotate(90deg);
}
.completed > summary .count {
  color: var(--faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}