/* WAZIR dashboard. Apple HIG canon on the web: semantic system colours, one WAZIR tint,
   San Francisco with Dynamic Type, iOS/macOS components. Logical properties only (Arabic RTL). */

/* ---- tokens ---------------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --bg: #fff;
  --bg-grouped: #f2f2f7;
  --bg-cell: #fff;
  --bg-elevated: #f2f2f7;
  --bg-bar: rgb(249 249 249 / .8);
  --label: #000;
  --label-2: rgb(60 60 67 / .6);
  --label-3: rgb(60 60 67 / .3);
  --separator: rgb(60 60 67 / .29);
  --fill: rgb(120 120 128 / .2);
  --fill-press: rgb(120 120 128 / .16);
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --gray: #8e8e93;
  --tint: #0e7c74;
  --tint-fill: #0e7c74;
  --on-tint: #fff;
  --segment-on: #fff;
  --scrim: rgb(0 0 0 / .32);

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  /* Critically damped spring (Apple default, no overshoot), 350 ms. */
  --spring: linear(0, .157, .438, .647, .784, .87, .922, .953, .972, .983, .99, .994, .997, 1);
  --bar-h: 2.75rem;          /* navigation bar row, 44 pt */
  --tab-h: 3.0625rem;        /* tab bar, 49 pt */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 1rem;
  --radius-group: .75rem;
  --icon-cut: #f9f9f9;                         /* opaque bar colour: the cut-out in filled tab icons */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bg-grouped: #000;
    --bg-cell: #1c1c1e;
    --bg-elevated: #2c2c2e;
    --bg-bar: rgb(22 22 23 / .8);
    --label: #fff;
    --label-2: rgb(235 235 245 / .6);
    --label-3: rgb(235 235 245 / .3);
    --separator: rgb(84 84 88 / .6);
    --fill: rgb(120 120 128 / .36);
    --fill-press: rgb(120 120 128 / .28);
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --tint: #3dd6c4;
    --segment-on: #636366;
    --scrim: rgb(0 0 0 / .5);
    --icon-cut: #161617;
  }
}

@media (prefers-contrast: more) {
  :root { --separator: var(--label-2); --label-2: var(--label); }
}

/* ---- base ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 106.25%;                          /* 17 px body, iOS default */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* iPhone and Mac Safari: follow the reader's Dynamic Type size. */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.294;                          /* 22/17 */
  color: var(--label);
  background: var(--bg-grouped);
  caret-color: var(--tint);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.page-chat { background: var(--bg); }
::selection { background: color-mix(in srgb, var(--tint) 30%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 60%, transparent); outline-offset: 2px; border-radius: .5rem; }
* { scrollbar-color: var(--label-3) transparent; scrollbar-width: thin; }
h1, h2, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--tint); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; }
button, a, [role="button"], summary, label {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.tabular { font-variant-numeric: tabular-nums; }
/* Text people write keeps its own reading order (English inside Arabic screens and the reverse)
   while still aligning to the screen's side, as iOS does. */
.cell-title, .cell-subtitle, .bubble, .prose, .sidebar-chat, .detail-list dd { unicode-bidi: plaintext; }
.one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.i {
  width: 1.375rem; height: 1.375rem;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
[dir="rtl"] .chevron { transform: scaleX(-1); }

/* ---- app shell ----------------------------------------------------------------------------- */
.app { min-height: 100dvh; }
.column { min-width: 0; padding-bottom: calc(var(--tab-h) + var(--safe-bottom)); }

.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: var(--safe-top);
  transition: background-color .2s, box-shadow .2s;
}
.navbar[data-scrolled], .page-chat .navbar {
  background: var(--bg-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 .5px 0 var(--separator);       /* hairline only once content is under the bar */
}
.navbar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--bar-h);
  padding-inline: .25rem;
}
.navbar-side { display: flex; align-items: center; min-width: 0; }
.navbar-trailing { justify-content: flex-end; }
.nav-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--tint);
  border-radius: 50%;
  transition: opacity .2s;
}
.nav-btn:active { opacity: .35; transition: none; }

/* The signature: Dynamic Island style status capsule. */
.capsule {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 1.875rem;
  padding-inline: .75rem;
  border-radius: 999px;
  background: var(--fill);
  font-size: .882rem;                          /* 15 pt */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .2s var(--ease-out);
}
.capsule:active { transform: scale(.96); transition: none; }
.capsule-dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
[data-paused="1"] .capsule-dot { background: var(--orange); }
.capsule-count { color: var(--label-2); font-weight: 500; }
.capsule-count::before { content: "\00B7"; margin-inline-end: .4rem; }
.capsule[data-working] .capsule-dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.paused-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .375rem var(--gutter);
  font-size: .765rem;                          /* 13 pt */
  color: var(--label);
  background: color-mix(in srgb, var(--orange) 18%, var(--bg-bar));
}
.paused-line .btn-plain { font-weight: 600; min-height: 2rem; }

.large-title {
  font-size: 2rem;                             /* 34 pt */
  line-height: 1.206;
  font-weight: 700;
  letter-spacing: .01em;                       /* SF large title is tracked slightly open */
  padding: .25rem var(--gutter) .5rem;
}

.main { padding-inline: var(--gutter); padding-bottom: 2rem; }
.main .large-title { padding-inline: 0; }

/* Tab bar (iPhone) */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--tab-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -.5px 0 var(--separator);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  color: var(--gray);
  font-size: .588rem;                          /* 10 pt */
  font-weight: 500;
}
.tab[aria-current] { color: var(--tint); }
.tab-icon { position: relative; display: grid; }
.tab .i { width: 1.6rem; height: 1.6rem; }
.tab .badge { position: absolute; top: -.2rem; inset-inline-start: 1.05rem; }

.badge {
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: .3rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .706rem;                          /* 12 pt */
  font-weight: 600;
  line-height: 1.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Sidebar (Mac, iPad landscape) */
.sidebar { display: none; }

@media (min-width: 900px) {
  :root { --gutter: 1.25rem; }
  .app { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); }
  .tabbar { display: none; }
  .column { padding-bottom: 0; }
  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    padding: calc(var(--safe-top) + 1rem) .75rem 1.5rem;
    background: var(--bg-elevated);
    box-shadow: .5px 0 0 var(--separator);
  }
  [dir="rtl"] .sidebar { box-shadow: -.5px 0 0 var(--separator); }
  .sidebar-brand { font-size: 1.294rem; font-weight: 700; padding: 0 .5rem .75rem; }
  .sidebar-heading { font-size: .765rem; font-weight: 600; color: var(--label-2); padding: 1.25rem .5rem .375rem; }
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    padding: .3rem .5rem;
    border-radius: .5rem;
    color: var(--label);
    font-size: .882rem;
  }
  .sidebar-sub { padding-inline-start: 1.9rem; }
  .sidebar-subitem { color: var(--label-2); }
  .sidebar-subitem[aria-current] { color: var(--label); }
  .sidebar-item .i { width: 1.15rem; height: 1.15rem; color: var(--tint); }
  .sidebar-item .badge { margin-inline-start: auto; }
  .sidebar-item[aria-current] { background: var(--fill); font-weight: 600; }
  .sidebar-chat { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); }
  .sidebar-chat[aria-current] { color: var(--label); }
  .only-phone { display: none !important; }
  .main { max-width: 45rem; margin-inline: auto; }
  .main-chat { max-width: 47rem; }
}
@media (max-width: 899.98px) { .only-wide { display: none !important; } }
@media (hover: hover) and (pointer: fine) {
  .sidebar-item:hover:not([aria-current]) { background: var(--fill-press); }
  .cell:is(a, button):hover { background: var(--fill-press); }
  .nav-btn:hover { background: var(--fill-press); }
}

.nav-back {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  min-height: 2.75rem;
  padding-inline: .25rem .5rem;
  color: var(--tint);
}
.nav-back:active { opacity: .35; }
.back-chevron { width: 1.3rem; height: 1.3rem; transform: scaleX(-1); }
[dir="rtl"] .back-chevron { transform: none; }
.status-invited, .cell-value.status-invited { color: var(--orange); }
.status-locked, .cell-value.status-locked { color: var(--red); }
.status-removed, .cell-value.status-removed { color: var(--label-3); }
@media (max-width: 899.98px) { .nav-back span { display: none; } }   /* iOS drops the back label when space is tight */
.setup-link {
  padding: .75rem var(--gutter);
  border-radius: var(--radius-group);
  background: var(--bg-elevated);
  font: .765rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

/* ---- inset grouped lists ----------------------------------------------------------------------- */
.group-block { margin-block: 1.5rem; }
.group-block:first-child { margin-top: .5rem; }
.group-header {
  font-size: .765rem;
  font-weight: 400;
  color: var(--label-2);
  padding: 0 var(--gutter) .375rem;
  margin-top: 1.5rem;
}
.group-block .group-header { margin-top: 0; }
.group-footer {
  font-size: .765rem;
  line-height: 1.385;
  color: var(--label-2);
  padding: .375rem var(--gutter) 0;
}
.group {
  background: var(--bg-cell);
  border-radius: var(--radius-group);
  overflow: hidden;
}
.card { background: var(--bg-cell); border-radius: var(--radius-group); padding: .875rem var(--gutter, 1rem); }
.group + .group { margin-top: 1.25rem; }
.group > * { position: relative; }
.group > :not([hidden]) ~ :not([hidden])::before {   /* hairline above every visible row but the first */
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter) 0;
  height: .5px;
  background: var(--separator);
  pointer-events: none;
}
.group > :not([hidden]) ~ :not([hidden]):has(.cell-icon, .cell-symbol)::before { inset-inline-start: 3.65rem; }  /* starts at the text */

.cell {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .6875rem var(--gutter);
  color: var(--label);
  transition: background-color .2s;
}
.cell:is(a, button):active { background: var(--fill-press); transition: none; }
.cell-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .125rem; }
.cell-title { font-size: 1rem; overflow-wrap: anywhere; }
.cell-subtitle { font-size: .882rem; line-height: 1.333; color: var(--label-2); }
.cell-value { color: var(--label-2); white-space: nowrap; }
.cell .chevron { width: .9rem; height: .9rem; color: var(--label-3); margin-inline-start: -.25rem; }
.cell-icon {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: .45rem;
  color: #fff;
  flex: none;
}
.cell-icon .i { width: 1.15rem; height: 1.15rem; }
.icon-green { background: var(--green); }
.icon-red { background: var(--red); }
.icon-orange { background: var(--orange); }
.icon-gray { background: var(--gray); }
.icon-tint { background: var(--tint-fill); }
.cell-symbol { display: grid; place-items: center; width: 1.75rem; flex: none; }
.tone-green { color: var(--green); }
.tone-orange { color: var(--orange); }
.tone-red { color: var(--red); }
.cell-action { color: var(--tint); justify-content: flex-start; }
.cell-destructive { color: var(--red); }
.check-mark { color: var(--tint); width: 1.2rem; height: 1.2rem; }
.cell-wrap { display: flex; }
.cell-wrap .cell { flex: 1; min-width: 0; }
.cell-delete { display: grid; place-items: center; width: 3rem; color: var(--red); }

/* Native iOS switch where Safari draws it (<input switch>); a faithful copy elsewhere. */
.switch { accent-color: var(--green); flex: none; margin: 0; }
@supports not selector(::thumb) {
  .switch {
    appearance: none;
    position: relative;
    width: 3.1875rem; height: 1.9375rem;       /* 51 x 31 pt */
    border-radius: 999px;
    background: var(--fill);
    cursor: pointer;
    transition: background-color .2s var(--ease-out);
  }
  .switch::before {
    content: "";
    position: absolute;
    top: .125rem;
    inset-inline-start: .125rem;
    width: 1.6875rem; height: 1.6875rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16);
    transition: transform .3s var(--spring);
  }
  .switch:checked { background: var(--green); }
  .switch:checked::before { transform: translateX(1.25rem); }
  [dir="rtl"] .switch:checked::before { transform: translateX(-1.25rem); }
  .switch:disabled { opacity: .5; }
}

/* ---- buttons --------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;                        /* 50 pt */
  padding-inline: 1.25rem;
  border-radius: .75rem;
  font-weight: 600;
  text-align: center;
  transition: opacity .2s;
}
.btn:active { opacity: .7; transition: none; }
.btn:disabled { opacity: .4; }
.btn-filled { background: var(--tint-fill); color: var(--on-tint); }
.btn-gray { background: var(--fill); color: var(--tint); }
.btn-wide { width: 100%; }
.btn-plain {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--tint);
  transition: opacity .2s;
}
.btn-plain:active { opacity: .35; transition: none; }
.btn-strong { font-weight: 600; }

/* Segmented control */
.segmented {
  display: flex;
  padding: .125rem;
  margin-block: .25rem 1rem;
  border-radius: .5625rem;
  background: var(--fill);
  border: 0;
}
.segment {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 2rem;
  border-radius: .4375rem;
  font-size: .765rem;
  font-weight: 500;
  color: var(--label);
  text-align: center;
}
.segment[aria-current], .segment:has(input:checked) {
  background: var(--segment-on);
  font-weight: 600;
  box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04);
}
.segment input { position: absolute; opacity: 0; pointer-events: none; }

/* ---- empty states ----------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 18vh 1.5rem 2rem;
  text-align: center;
}
.empty-symbol { width: 3rem; height: 3rem; color: var(--label-3); margin-bottom: .5rem; }
.empty-title { font-size: 1.294rem; line-height: 1.273; font-weight: 700; }   /* Title 2 */
.empty-body { font-size: .882rem; color: var(--label-2); max-width: 22rem; }

/* ---- chat ----------------------------------------------------------------------------------- */
.main-chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - var(--safe-top) - var(--tab-h) - var(--safe-bottom)); padding-bottom: 0; }
.thread { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-block: 1rem; }
.chat-empty { margin: auto 0; padding: 2rem 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.chip {
  padding: .5rem .875rem;
  border-radius: 999px;
  background: var(--fill);
  font-size: .882rem;
  color: var(--label);
  transition: opacity .2s;
}
.chip:active { opacity: .6; transition: none; }
.msg-user { display: flex; justify-content: flex-end; }
.bubble {
  max-width: min(78%, 34rem);
  padding: .5rem .875rem;
  border-radius: 1.25rem;
  background: var(--tint-fill);
  color: var(--on-tint);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
.msg-wazir { line-height: 1.47; }              /* 25/17 */
.msg-status { font-size: .765rem; color: var(--label-2); display: flex; align-items: center; gap: .4rem; }
.msg-status::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--tint); animation: pulse 1.2s ease-in-out infinite; }
.msg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin-top: -.5rem; }
.msg-actions-label { font-size: .765rem; color: var(--label-2); margin-inline-end: .25rem; }
.icon-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-inline-start: -.75rem;
            color: var(--label-3); border-radius: 50%; transition: color .2s; }
.icon-btn + .icon-btn { margin-inline-start: -.5rem; }
.icon-btn .i { width: 1.1rem; height: 1.1rem; }
.icon-btn:active { color: var(--tint); transition: none; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--label-2); } }
.chip-small { padding: .3rem .7rem; font-size: .765rem; }
.chip-tint { background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint); font-weight: 600; }
.welcome-intro { color: var(--label-2); padding-inline: var(--gutter); margin-bottom: 1.75rem; }
.welcome-skip { display: flex; justify-content: center; margin-top: .5rem; }
.time-input { border: 0; background: var(--fill); border-radius: .5rem; padding: .3rem .5rem; font-size: max(1rem, 16px);
              color: var(--label); font-variant-numeric: tabular-nums; }
.msg-error { color: var(--label-2); font-size: .882rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.waiting-card { margin-top: .75rem; }
.waiting-card .cell-value { color: var(--tint); }

.prose { overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.prose > * + * { margin-top: .7em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose ul { list-style: disc; }
.prose li + li { margin-top: .3em; }
.prose a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: from-font; }
.prose strong { font-weight: 600; }
.prose h1, .prose h2, .prose h3 { font-size: 1rem; font-weight: 600; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; padding: .1em .3em; border-radius: .3rem; background: var(--fill); }
.prose pre { padding: .75rem; border-radius: .6rem; background: var(--bg-cell); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose table { border-collapse: collapse; font-size: .882rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .35rem .6rem; border-bottom: .5px solid var(--separator); text-align: start; }

.composer {
  position: sticky;
  bottom: calc(var(--tab-h) + var(--safe-bottom));
  margin-inline: calc(var(--gutter) * -1);
  padding: .5rem var(--gutter) .625rem;
  background: var(--bg-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@media (min-width: 900px) { .composer { bottom: 0; margin-inline: 0; padding-inline: 0; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.composer-field {
  display: flex;
  align-items: flex-end;
  gap: .375rem;
  padding: .25rem;
  padding-inline-start: .875rem;
  border-radius: 1.25rem;
  background: var(--bg-cell);
  box-shadow: inset 0 0 0 .5px var(--separator);
}
.composer textarea {
  flex: 1;
  min-height: 1.75rem;
  max-height: 9.5rem;                          /* about 6 lines */
  padding: .25rem 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: max(1rem, 16px);                  /* never below 16 px: Safari would zoom */
  line-height: 1.294;
}
.composer textarea::placeholder { color: var(--label-3); }
.send {
  display: grid;
  place-items: center;
  width: 1.875rem; height: 1.875rem;
  flex: none;
  border-radius: 50%;
  background: var(--tint-fill);
  color: var(--on-tint);
  transition: opacity .2s, transform .2s var(--ease-out);
}
.send:disabled { opacity: .3; }
.send:active:not(:disabled) { transform: scale(.9); transition: none; }
.send .i { width: 1.1rem; height: 1.1rem; }
.send .stop-icon, .composer[data-busy] .send-icon { display: none; }
.composer[data-busy] .stop-icon { display: block; }

/* ---- confirm --------------------------------------------------------------------------------- */
.requests { display: flex; flex-direction: column; gap: 1rem; }
.request { padding: 1rem var(--gutter); }
.group.request > *::before { display: none; }
.request-title { font-size: 1rem; font-weight: 600; }
.request-meta { margin-top: .5rem; font-size: .765rem; color: var(--label-2); }
.request-fields { margin: .75rem 0 .5rem; display: flex; flex-direction: column; gap: .5rem; }
.request-fields dt { font-size: .765rem; color: var(--label-2); }
.request-fields dd { font-size: .941rem; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext;
                     -webkit-user-select: text; user-select: text; }
.viewer-note { text-align: center; padding-block: 1rem; }
.request-actions { display: flex; gap: .75rem; margin-top: .25rem; }
.request-actions .btn { flex: 1; min-height: 2.75rem; border-radius: .625rem; }
.request-outcome { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.request-decided { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
@starting-style { .request-decided { opacity: 0; transform: scale(.98); } }
.request-decided[data-status="approved"] .i { color: var(--green); }
.request-decided[data-status="rejected"] .i { color: var(--red); }

/* ---- activity -------------------------------------------------------------------------------- */
.main-activity .group-header { margin-top: 1.25rem; }
.main-activity .cell { align-items: flex-start; text-align: start; }
.main-activity .cell-value { font-size: .882rem; padding-top: .1rem; }
.more { display: flex; justify-content: center; padding-top: 1rem; }

/* ---- sheets (iOS sheet; centred on wide screens) -------------------------------------------- */
.sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: 0;
  padding: 0 0 var(--safe-bottom);
  border: 0;
  border-radius: .75rem .75rem 0 0;
  background: var(--bg-grouped);
  color: var(--label);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(0);
  transition: transform .38s var(--ease-sheet), display .38s allow-discrete, overlay .38s allow-discrete;
}
@media (prefers-color-scheme: dark) { .sheet { background: var(--bg-cell); } .sheet .group { background: var(--bg-elevated); } }
.sheet:not([open]) { transform: translateY(100%); }
@starting-style { .sheet[open] { transform: translateY(100%); } }
.sheet::backdrop { background: var(--scrim); transition: opacity .38s, display .38s allow-discrete, overlay .38s allow-discrete; }
.sheet:not([open])::backdrop { opacity: 0; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
.sheet[data-dragging] { transition: none; }
.sheet-grabber { width: 2.25rem; height: .3125rem; margin: .375rem auto 0; border-radius: 999px; background: var(--label-3); }
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 3.5rem;
  padding-inline: var(--gutter);
}
.sheet-head > :last-child { justify-self: end; }
.sheet-title { font-size: 1rem; font-weight: 600; text-align: center; }
.sheet-done { font-weight: 600; }
.sheet-content { padding: 0 var(--gutter) 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sheet-content .group + .group { margin-top: 0; }
@media (min-width: 900px) {
  .sheet {
    inset: 0;
    width: min(33.75rem, calc(100vw - 4rem));
    max-height: 80dvh;
    margin: auto;
    border-radius: .875rem;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .35);
    transform: none;
    opacity: 1;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), display .2s allow-discrete, overlay .2s allow-discrete;
  }
  .sheet:not([open]) { opacity: 0; transform: scale(.97); }
  @starting-style { .sheet[open] { opacity: 0; transform: scale(.97); } }
  .sheet-grabber { display: none; }
}
.status-lead { display: flex; align-items: center; gap: .5rem; font-size: 1.294rem; font-weight: 700; }
.status-lead .capsule-dot { width: .7rem; height: .7rem; }
.status-text { color: var(--label-2); margin-top: -.75rem; }
.detail-lead { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.detail-list .cell { justify-content: space-between; }
.detail-list dt { color: var(--label-2); flex: none; }
.detail-list dd { text-align: end; min-width: 0; overflow-wrap: anywhere; }

/* Form fields inside groups */
.fields .field { display: block; }
.fields input, .fields textarea {
  display: block;
  width: 100%;
  padding: .6875rem var(--gutter);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: max(1rem, 16px);
  -webkit-user-select: text;
  user-select: text;
}
.fields textarea { resize: none; min-height: 5.5rem; field-sizing: content; max-height: 12rem; }
.fields input::placeholder, .fields textarea::placeholder { color: var(--label-3); }
.form-error { color: var(--red); font-size: .882rem; padding-inline: var(--gutter); }

/* ---- banners (iOS notification-style; iOS has no toasts) -------------------------------------- */
.banner-host {
  position: fixed;
  top: calc(var(--safe-top) + .5rem);
  inset-inline: 0;
  z-index: 50;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.banner {
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .75rem 1.125rem;
  border-radius: 999px;
  background: var(--bg-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .18), inset 0 0 0 .5px var(--separator);
  font-size: .882rem;
  font-weight: 600;
  pointer-events: auto;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
@starting-style { .banner { transform: translateY(-140%); opacity: 0; } }
.banner[data-leaving] { transform: translateY(-140%); opacity: 0; transition-duration: .2s; }

/* ---- sign-in -------------------------------------------------------------------------------- */
.auth {
  width: min(24rem, 100%);
  margin-inline: auto;
  padding: calc(var(--safe-top) + 12vh) var(--gutter) calc(var(--safe-bottom) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-auth { background: var(--bg-grouped); }
.auth-brand { font-size: 2rem; font-weight: 700; letter-spacing: .01em; text-align: center; color: var(--tint); }
.auth-title { font-size: 1.294rem; font-weight: 700; text-align: center; }
.auth-body, .auth-note { color: var(--label-2); text-align: center; font-size: .882rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-alt { display: flex; justify-content: center; }
.code-input { text-align: center; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.setup-key {
  text-align: center;
  font: 600 .941rem/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .06em;
  -webkit-user-select: all;
  user-select: all;
}
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; }
.backup-codes .cell { justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; -webkit-user-select: all; user-select: all; }
.group.backup-codes > *::before { display: none; }

/* ---- motion & material preferences ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .sheet, .sheet:not([open]), .banner, .banner[data-leaving] { transform: none !important; }
  .sheet { transition: opacity .2s, display .2s allow-discrete, overlay .2s allow-discrete; }
  .sheet:not([open]) { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --bg-bar: var(--bg-cell); }
  .navbar, .tabbar, .composer, .banner { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Reminders and tasks */
.cell-end { padding-inline: var(--gutter); flex: none; min-width: 2.75rem; justify-content: center; }
.fields .field:has(.field-label) { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-inline-end: var(--gutter); }
.fields .field:has(.field-label) .field-label { padding-inline-start: var(--gutter); color: var(--label-2); flex: none; }
.fields .field:has(.field-label) input { width: auto; flex: 1; min-width: 0; text-align: end; min-height: 2.75rem; }
#plans form .btn { margin-block-end: .5rem; }

/* Clients and deadlines */
.cell-wrap-text { overflow-wrap: anywhere; }
.fields select {
  min-height: 2.75rem; max-width: 60%; border: 0; background: transparent; font-size: max(1rem, 16px);
  text-align: end; text-align-last: end;
}
.stage {
  flex: none; padding: .125rem .6rem; border-radius: 999px; font-size: .765rem; font-weight: 600; white-space: nowrap;
  background: var(--fill); color: var(--label);
}
.stage-overdue { background: var(--red); color: #fff; }
.stage-2 { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--label); }
.stage-7 { background: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--label); }
.stage-14 { background: var(--fill); color: var(--label); }

/* Spacing between an empty-state note, the form under it, and its button (Reminders, Tasks) */
.group-block > .group-footer + form { margin-top: 1rem; }
.group-block form > .group-footer + .btn { margin-top: 1rem; }
/* A status badge drops under the text on narrow phones instead of squeezing the title into a column */
.cell:has(> .stage) { flex-wrap: wrap; row-gap: .25rem; }
.cell:has(> .stage) > .cell-text { flex: 1 1 11rem; }