/* ==========================================================================
   Maica — teal, mobile first.

   Plain CSS, no framework. The palette is defined once, here at the top;
   nothing below states a colour literally.

   Layout: a phone gets a compact app bar and a bottom tab bar. The sidebar
   only appears from 861px up, where there is room for it. Every rule below
   is written for the phone first; the one media query at the end adds the
   wider layout.
   ========================================================================== */

:root {
  /* Teal core */
  --teal:        #0f7a72;
  --teal-soft:   #2a9d94;
  --teal-dark:   #0a544f;
  --teal-deep:   #07403c;
  --mist:        #d8eeeb;
  --mist-deep:   #b7ded9;

  /* Neutrals */
  --ink:         #12302e;
  --muted:       #6d827f;
  --paper:       #f4f7f6;
  --white:       #ffffff;
  --line:        #dbe5e3;

  /* Accents, so teal has something warm to sit against */
  --coral:       #ef856f;
  --sand:        #f4d58c;
  --lilac:       #d8d3ef;

  --shadow:      0 14px 40px rgba(15, 60, 55, .07);
  --shadow-soft: 0 6px 18px rgba(15, 60, 55, .05);

  /* Square by design. Kept as tokens so the whole app is one edit away from
     rounded again; only avatars and the progress ring stay circular, because
     they are circles rather than boxes with softened corners. */
  --radius:      0px;
  --radius-sm:   0px;

  --font:        'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Set once so the app bar, tab bar and sheets all agree. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h:    58px;
}

* { box-sizing: border-box; }

/* Any `display` rule of ours would otherwise beat the browser's own style for
   [hidden], leaving elements we marked hidden on screen. Settle it once. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  /* No rubber-band overscroll behind the fixed bars. */
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal-soft); outline-offset: 2px;
}
a { color: var(--teal); }
/* Headings are the same family, set tight and heavy — the sharpness comes
   from the tracking and weight rather than from a second display face. */
h1, h2, h3 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.03em;
}

/* Every tappable thing clears the 44px the platforms ask for. */
.tab, .icon-action, .tick, .ghost-button, .primary-button,
.install-button, .account-row.stacked { flex-wrap: wrap; }

.password-form {
  padding: 4px 18px 18px;
  border-bottom: 1px solid var(--line);
}
.password-form .primary-button { width: 100%; }

.field-hint {
  margin: -6px 0 14px;
  font-size: 11px; color: var(--muted); line-height: 1.5;
}

.modal-actions { display: flex; gap: 10px; }
.modal-actions .primary-button { flex: 1; }
.danger-button {
  flex: none;
  border: 1px solid #e6c3ba; background: none; color: #b8503c;
  padding: 13px 18px; font-size: 14px; font-weight: 700;
}
.danger-button:hover { background: #fdf2ef; }

.signout-button { min-height: 44px; }

.icon { width: 23px; height: 23px; display: block; }

/* --- Launch screen ------------------------------------------------------- */

/* Hidden by default: a browser tab has its own loading indicator. The media
   query below turns it on for the installed app, so it is painted on the
   first frame rather than after the scripts have run. */
.splash { display: none; }

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .splash {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    background: var(--teal-deep);
    transition: opacity .35s ease;
  }
  .splash.splash--gone { opacity: 0; pointer-events: none; }
}

.splash-inner { display: grid; justify-items: center; gap: 20px; }
.splash-mark {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--coral);
  animation: splash-pulse 1.6s ease-in-out infinite;
}
.splash-word {
  font-weight: 600; font-size: 26px; letter-spacing: -.04em; color: #e9f6f4;
}

@keyframes splash-pulse {
  50% { transform: scale(1.06); }
}

/* --- Shell -------------------------------------------------------------- */

.app-shell { display: block; min-height: 100vh; }
.sidebar { display: none; }   /* wide screens only; see the media query */

.main-content { width: 100%; }

/* --- App bar (top, mobile) ---------------------------------------------- */

.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 11px;
  /* The status bar is translucent in the installed app, so the bar has to
     pad itself out from under it. */
  padding: calc(var(--safe-top) + 8px) 8px 8px 18px;
  background: var(--teal-deep); color: #eaf6f4;
}
.appbar-title {
  flex: 1; min-width: 0;
  font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: #fff;
}
.appbar-mark {
  flex: none; width: 28px; height: 28px;
  background: var(--coral); border-radius: 50%;
}
.appbar-title { flex: 1; min-width: 0; }
.appbar-title strong {
  display: block; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar-title small { display: block; font-size: 10.5px; color: #93bab5; margin-top: 2px; }
.appbar-actions { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }

/* The room, and the way into its settings. */
.room-button {
  display: flex; align-items: center; gap: 4px;
  max-width: 44vw; min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: none; color: #eaf6f4;
  font-size: 12.5px; font-weight: 600;
}
.room-button .icon { width: 16px; height: 16px; flex: none; }
.room-button:active { background: rgba(255, 255, 255, .12); }
.room-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.icon-action {
  position: relative;
  border: 0; background: none; color: inherit;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.icon-action:active { background: rgba(255, 255, 255, .12); }

.badge {
  position: absolute; top: 5px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--coral); color: #4a1d12;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

.avatar {
  border: 0; width: 34px; height: 34px;
  font-weight: 700; font-size: 14px;
  display: grid; place-items: center; flex: none;
  text-decoration: none;
}
.avatar.big { width: 52px; height: 52px; font-size: 20px; }

/* Used by the sidebar, the Overwatch console, the login screen and the
   offline page, so it lives here rather than inside any one of them.

   The mark is the coral circle on its own — the only round thing in an
   otherwise square design, which is what makes it read as a mark. */
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 23px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
}
.brand-mark {
  flex: none;   /* never let a narrow rail squash the circle into an oval */
  background: var(--coral);
  width: 26px; height: 26px; border-radius: 50%;
}
.avatar-teal  { background: var(--mist);  color: var(--teal-dark); }
.avatar-coral { background: var(--coral); color: var(--teal-deep); }
.avatar-lilac { background: var(--lilac); color: #4f466d; }
.avatar-sand  { background: var(--sand);  color: #7a5a1c; }

/* --- Tab bar (bottom, mobile) ------------------------------------------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: 0; background: none; text-decoration: none;
  padding: 7px 1px;
  color: var(--muted);
  font-size: 9.5px; font-weight: 600; letter-spacing: .1px;
  -webkit-tap-highlight-color: transparent;
}
.tab .icon { width: 22px; height: 22px; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.active { color: var(--teal); }
.tab:active { background: var(--mist); }
/* Announced but not built: visible, and visibly not ready. */
.tab.soon { opacity: .45; }

/* Adding is an action, not a place, so it floats above the bar rather than
   taking a slot in it. */
.fab {
  position: fixed; z-index: 35;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 0; background: var(--coral); color: var(--teal-deep);
  box-shadow: 0 8px 22px rgba(15, 60, 55, .28);
}
.fab .icon { width: 26px; height: 26px; stroke-width: 2; }
.fab:active { transform: scale(.94); }

/* --- A switch ------------------------------------------------------------
   Used where something can genuinely be turned back off, which a button
   labelled "Turn on" cannot say.
   ---------------------------------------------------------------------- */

.switch {
  flex: none; position: relative;
  width: 50px; height: 30px; min-height: 30px;
  border: 1px solid var(--line); background: var(--paper);
  transition: background .18s, border-color .18s;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; background: var(--muted);
  transition: transform .18s, background .18s;
}
.switch[aria-checked="true"] { background: var(--mist); border-color: var(--teal); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: var(--teal); }
.switch:disabled { opacity: .45; cursor: default; }

/* --- Views -------------------------------------------------------------- */

.view {
  padding: 22px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
  max-width: 1260px; margin: 0 auto;
}

.page-heading { margin-bottom: 22px; }
.eyebrow, .card-kicker {
  margin: 0 0 8px; color: var(--teal);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700;
}
.page-heading h1 {
  font-size: 34px; line-height: 1.05; letter-spacing: -1.2px; margin: 0 0 10px;
}
.lede { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }

.board-intro { margin: 0 0 16px; }
.desktop-only { display: none; }

.primary-button {
  border: 0; border-radius: var(--radius-sm);
  background: var(--teal); color: #fff;
  padding: 13px 18px; font-size: 14px; font-weight: 700;
}
.primary-button:hover { background: var(--teal-dark); }
/* These are sometimes links rather than buttons; without this they arrive
   underlined and coloured like body links. */
a.primary-button, a.ghost-button {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.primary-button:active { transform: scale(.985); }
.ghost-button {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  color: var(--teal-dark); padding: 11px 15px; font-size: 13px; font-weight: 700;
  flex: none;
}
.ghost-button:hover { border-color: var(--teal-soft); }
.ghost-button:disabled { opacity: .5; cursor: default; }
.plain-button { border: 0; background: none; color: var(--teal); font-size: 13px; font-weight: 700; }

/* --- Clocks ------------------------------------------------------------- */

.clock-strip {
  display: flex; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px;
}
.clock { flex: 1 1 120px; }
.clock .who { display: flex; align-items: center; gap: 7px; }
.clock .who span { color: var(--muted); font-size: 11px; }
.clock .dot {
  width: 21px; height: 21px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none;
}
.clock strong {
  display: block; font-weight: 600; font-size: 24px; letter-spacing: -.035em; margin: 5px 0 2px;
}
.clock small { display: block; color: var(--muted); font-size: 10.5px; }
.clock [data-clock-diff] { color: var(--teal); font-weight: 600; }

/* --- Overview ----------------------------------------------------------- */

/* The room's name, and the way into its settings. */
.room-title {
  display: flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 0; margin: 0 0 10px;
  color: inherit; text-align: left;
}
.room-title h1 { margin: 0; }
.room-title .icon { width: 22px; height: 22px; flex: none; color: var(--muted); }
.room-title:active { opacity: .6; }

.today-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 18px; text-decoration: none; color: inherit;
}
.today-card .today-text { flex: 1; min-width: 0; }
.today-card .card-kicker { margin: 0 0 4px; }
.today-card h2 { font-size: 19px; margin: 0; line-height: 1.2; }
.today-card p:last-child { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); }
.today-card > .icon { flex: none; color: var(--teal); }
.today-card:active { background: var(--paper); }

/* --- Coming soon --------------------------------------------------------- */

.soon-page { text-align: center; padding: 40px 10px; }
.soon-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 22px;
  background: var(--mist); color: var(--teal);
}
.soon-icon .icon { width: 30px; height: 30px; }
.soon-page h1 { font-size: 32px; margin: 0 0 10px; }
.soon-page .lede { max-width: 320px; margin: 0 auto 26px; }

/* --- Panels (the account page) ------------------------------------------ */

.panel {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); margin-bottom: 18px;
}
.panel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.panel-row:last-child { border-bottom: 0; }
.panel-row > span:first-child { flex: 1; min-width: 0; }
.panel-row strong { display: block; font-size: 14px; }
.panel-row small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.panel .password-form { border-bottom: 0; }

/* --- Board -------------------------------------------------------------- */

.board-summary {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 18px; margin-bottom: 14px;
}
.progress-ring {
  height: 66px; width: 66px; border-radius: 50%;
  display: grid; place-items: center; position: relative; flex: none;
  background: conic-gradient(var(--teal) calc(var(--progress, 0) * 1%), var(--mist-deep) 0);
}
.progress-ring::after {
  content: ''; position: absolute; inset: 6px;
  background: var(--white); border-radius: 50%;
}
.progress-ring span { z-index: 1; font-size: 17px; font-weight: 700; }
.progress-ring small { font-size: 10px; color: var(--muted); font-weight: 400; }

/* Given a basis, the text keeps its width and the streak badge wraps to its
   own line instead of squeezing the heading into a column. */
.board-summary { flex-wrap: wrap; }
.board-summary-text { flex: 1 1 150px; min-width: 0; }
.board-summary h2 { font-size: 19px; margin: 0; line-height: 1.2; }
.board-summary p { font-size: 11.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.45; }
.streak-badge {
  background: var(--mist); color: var(--teal-dark);
  padding: 7px 12px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  align-self: flex-start;
}

.routine-board {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.board-header {
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.board-header .muted { color: var(--muted); font-weight: 400; }

.board-item {
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
}
.board-item:last-child { border-bottom: 0; }
 /* The body is a button now: tapping a routine opens its editor. */
.board-item .body {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  text-align: left; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.board-item .body:active { opacity: .6; }
.board-item strong, .board-item small { display: block; }
.board-item strong { font-size: 14.5px; line-height: 1.3; }
.board-item small { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.board-item.done strong { text-decoration: line-through; color: #94a5a1; }
.board-item.next { background: #f2faf8; }
.board-item.overdue { background: #fff6f2; }

.board-state { display: none; }   /* the row's look already says this */
.board-item.overdue .board-state { color: #c26a52; }

.tick {
  flex: none; width: 30px; height: 30px; min-height: 30px;
  border: 1.5px solid var(--mist-deep); background: var(--white);
  display: grid; place-items: center;
  color: transparent; font-size: 15px;
  transition: background .18s, border-color .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tick:active { transform: scale(.9); }
.tick.checked { background: var(--teal); border-color: var(--teal); color: #fff; }
.tick.busy { opacity: .5; pointer-events: none; }

.item-streak {
  flex: none; font-size: 10.5px; color: var(--teal);
  background: var(--mist); padding: 5px 9px; font-weight: 700;
}
.remove-routine {
  flex: none; border: 0; background: none; color: #b9c6c3;
  font-size: 20px; line-height: 1; width: 34px; height: 34px;
}
.remove-routine:active { background: var(--paper); color: var(--coral); }

.board-empty { padding: 44px 20px; text-align: center; }
.board-empty h2 { font-size: 22px; margin: 0 0 8px; }
.board-empty p { color: var(--muted); font-size: 12.5px; margin: 0 0 20px; line-height: 1.5; }

.all-done-note {
  margin-top: 14px; background: var(--mist); border-radius: var(--radius);
  padding: 15px 18px; font-size: 12.5px; color: var(--teal-dark); line-height: 1.5;
}

/* --- When you can talk --------------------------------------------------
   The one thing a shared calendar across time zones is actually for.
   ---------------------------------------------------------------------- */

.talk-card {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px; margin-bottom: 14px;
}
.talk-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.talk-head .card-kicker { margin: 0; flex: 1; }
.talk-note { font-size: 10px; color: var(--muted); }

.talk-slot {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.talk-slot:last-child { border-bottom: 0; padding-bottom: 0; }
.talk-length {
  flex: none; min-width: 52px;
  background: var(--mist); color: var(--teal-dark);
  padding: 6px 8px; font-size: 12px; font-weight: 700; text-align: center;
}
.talk-times { flex: 1; min-width: 0; display: grid; gap: 3px; }
.talk-person { font-size: 12.5px; color: var(--muted); }
.talk-person b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.talk-empty { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }

.talk-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 11px;
  border: 1px solid var(--line); background: none;
  color: var(--teal); font-size: 12.5px; font-weight: 700;
}
.talk-more .icon { width: 17px; height: 17px; }
.talk-more:active { background: var(--paper); }

.sheet-intro {
  margin: 0; padding: 14px 18px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.talk-day { padding: 4px 18px 10px; border-bottom: 1px solid var(--line); }
.talk-day:last-child { border-bottom: 0; }
.talk-day-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 0 4px;
}
.talk-day-head strong { font-size: 13.5px; }
.talk-day-head span { font-size: 11px; color: var(--muted); flex: 1; }
.talk-day-head em {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--teal);
}
.talk-day .talk-slot { padding: 9px 0; }

/* --- Scrim and sheets --------------------------------------------------- */

.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(7, 48, 45, .45);
  opacity: 0; transition: opacity .25s ease;
}
.scrim.open { opacity: 1; }

/* On a phone a sheet rises from the bottom; from 861px up the notification
   sheet becomes a right-hand drawer instead (see the media query). */
.sheet {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0;
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--white);
  box-shadow: 0 -16px 50px rgba(15, 60, 55, .18);
  padding-bottom: var(--safe-bottom);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.sheet.open { transform: translateY(0); }

.sheet-grip {
  width: 40px; height: 4px;
  background: var(--line); margin: 9px auto 0; flex: none;
}
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 12px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.sheet-head h2 { font-size: 20px; margin: 0; flex: 1; }
.sheet-head .icon-action { color: var(--muted); }
.sheet-head .icon-action:active { background: var(--paper); }

/* --- Notifications ----------------------------------------------------- */

.notif-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.notif-item { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.notif-item.unread { background: #f2faf8; border-left: 3px solid var(--teal); padding-left: 15px; }
.notif-item strong { display: block; font-size: 13.5px; }
.notif-item p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.notif-item time {
  display: block; margin-top: 6px; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.notif-empty { padding: 40px 22px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

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

.sheet-body { overflow-y: auto; padding: 4px 0 18px; }
.sheet-label {
  margin: 18px 18px 6px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted);
}

.inline-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.inline-form .field { flex: 1; margin: 0; }

.code-chip {
  flex: none;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line);
  padding: 7px 10px; color: var(--teal-dark);
}

.room-member {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.room-member > span:nth-child(2) { flex: 1; min-width: 0; }
.room-member strong { display: block; font-size: 13.5px; }
.room-member small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.room-member-time { flex: none; font-size: 15px; font-weight: 600; }

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

.account-identity {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-bottom: 1px solid var(--line);
}
.account-identity strong { display: block; font-size: 16px; }
.account-identity small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.account-rows { overflow-y: auto; }
.account-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.account-row > span:first-child { flex: 1; min-width: 0; }
.account-row strong { display: block; font-size: 13.5px; }
.account-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.live-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mist-deep);
}
.live-dot[data-state="live"] { background: #6fd3a8; animation: pulse 2s infinite; }
.live-dot[data-state="offline"] { background: var(--coral); }

.account-row.stacked { flex-wrap: wrap; }

.password-form {
  padding: 4px 18px 18px;
  border-bottom: 1px solid var(--line);
}
.password-form .primary-button { width: 100%; }

.field-hint {
  margin: -6px 0 14px;
  font-size: 11px; color: var(--muted); line-height: 1.5;
}

.modal-actions { display: flex; gap: 10px; }
.modal-actions .primary-button { flex: 1; }
.danger-button {
  flex: none;
  border: 1px solid #e6c3ba; background: none; color: #b8503c;
  padding: 13px 18px; font-size: 14px; font-weight: 700;
}
.danger-button:hover { background: #fdf2ef; }

.signout-button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 18px; padding: 13px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  color: var(--teal-dark); text-decoration: none;
  font-size: 14px; font-weight: 700;
}
.signout-button:active { background: var(--paper); }

@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(111, 211, 168, .25); } }

/* Live indicator in the desktop sidebar. */
.connection-status {
  display: flex; align-items: center; gap: 8px;
  color: #93b5b0; font-size: 10.5px; padding: 0 13px;
}
.connection-status i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-soft);
}
.connection-status.live i { background: #6fd3a8; animation: pulse 2s infinite; }
.connection-status.offline i { background: var(--coral); animation: none; }

/* --- Modal -------------------------------------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 48, 45, .5);
  display: flex; align-items: flex-end;
}
.modal {
  position: relative; background: var(--white);
  padding: 24px 18px calc(22px + var(--safe-bottom));
  width: 100%; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .22);
}
.modal h2 { font-size: 24px; margin: 0 0 20px; }
.modal-close {
  position: absolute; right: 12px; top: 12px;
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--muted); width: 40px; height: 40px;
}

.field { display: block; margin-bottom: 14px; }
.field span {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px; background: #fbfdfc; color: var(--ink);
  /* 16px or iOS Safari zooms the page when the field takes focus. */
  font: 16px var(--font);
}
.field textarea { height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { color: #b8503c; font-size: 12.5px; margin: 0 0 14px; line-height: 1.5; }
#routineForm .primary-button { width: 100%; }

/* --- Toast -------------------------------------------------------------- */

.toast {
  position: fixed; z-index: 70;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  background: var(--teal-deep); color: #fff;
  padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(7, 48, 45, .3);
  opacity: 0; transform: translateY(10px); transition: .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* --- Login -------------------------------------------------------------
   Sized to the viewport and deliberately not scrollable: the whole screen is
   one form, and a page that drifts under the thumb while you are typing into
   it feels broken. If a keyboard squeezes the viewport far enough that the
   form no longer fits, the form area scrolls inside itself rather than the
   page scrolling as a whole.
   --------------------------------------------------------------------- */

.auth {
  height: 100vh;
  height: 100dvh;         /* shrinks with the mobile browser's own chrome */
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--teal-deep);
  color: #dceeeb;
  padding: var(--safe-top) 0 var(--safe-bottom);
}

.auth-main {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  /* `safe` keeps centring from pushing the top of the form out of reach when
     a keyboard shrinks the viewport below the height of the form. */
  justify-content: safe center;
  padding: 24px 22px;
  width: 100%; max-width: 420px; margin: 0 auto;
  text-align: center;
}

/* The mark stands in for a wordmark here; there is no top bar to put one in. */
.auth-mark {
  width: 52px; height: 52px;
  margin: 0 auto 22px;
}

.auth-eyebrow {
  margin: 0 0 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--teal-soft);
}
.auth-main h1 {
  margin: 0 0 8px;
  font-size: 36px; line-height: 1; letter-spacing: -.04em;
  font-weight: 700; color: #fff;
}
.auth-sub { margin: 0 0 26px; font-size: 14px; color: #9dc0ba; }

.auth-error {
  margin: 0 0 18px; padding: 12px 14px; text-align: left;
  background: rgba(239, 133, 111, .14);
  border-left: 3px solid var(--coral);
  color: #f6c7ba; font-size: 13px; line-height: 1.5;
}

.auth-field { display: block; margin-bottom: 14px; text-align: left; }
.auth-field > span:first-child {
  display: block; margin-bottom: 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; color: #7fa9a3;
}
.auth-field input {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  /* 16px or iOS Safari zooms the page when the field takes focus. */
  font: 16px var(--font);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--teal-soft);
  background: rgba(255, 255, 255, .1);
}

/* Password, with the reveal sitting inside the field's own box. */
.auth-password { position: relative; display: block; }
.auth-password input { padding-right: 52px; }
.reveal {
  position: absolute; top: 0; right: 0;
  width: 50px; height: 100%;
  display: grid; place-items: center;
  border: 0; background: none; color: #7fa9a3;
}
.reveal .icon { width: 20px; height: 20px; }
.reveal span { display: grid; place-items: center; }
.reveal:hover, .reveal[aria-pressed="true"] { color: #dceeeb; }

.auth-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 6px; padding: 16px;
  border: 0; background: var(--coral); color: var(--teal-deep);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.auth-submit:hover { background: #f39b87; }
.auth-submit:active { transform: scale(.99); }
.auth-submit .icon { width: 19px; height: 19px; }

.auth-foot {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; color: #7fa9a3; line-height: 1.5;
}
.auth-hint { margin: 0; flex: 1; }
.auth-hint b { color: #cfe6e3; font-weight: 600; }

/* The install check-list, shown when a browser will not offer an install and
   it is not obvious why. */
.diagnosis { display: block; margin-bottom: 6px; }
.diagnosis span { display: block; font-size: 11px; line-height: 1.7; }
.diagnosis .ok { color: #7fc3a2; }
.diagnosis .bad { color: var(--coral); font-weight: 600; }

/* The install control. Always present while it is worth offering, changing
   state rather than vanishing — a button that comes and goes reads as broken.
   Once Maica is installed there is nothing left to offer, so the whole row
   goes. */
.install-icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: none; color: #dceeeb;
}
.install-icon .icon { width: 20px; height: 20px; }
.install-icon[data-state="ready"] {
  background: var(--coral); border-color: var(--coral); color: var(--teal-deep);
}
.install-icon[data-state="unavailable"] { opacity: .45; }
.install-icon:active { transform: scale(.96); }

.is-standalone #installRow { display: none; }

/* Overwatch is the same screen in a colder key. */
.auth.overwatch { background: #061e1d; }
.auth.overwatch .brand-mark { background: var(--teal-soft); }
.auth.overwatch .auth-submit { background: var(--teal-soft); color: #04201e; }
.auth.overwatch .auth-submit:hover { background: #35b2a8; }
.auth-foot a { color: var(--teal-soft); }

@media (min-width: 861px) {
  .auth-main { padding: 34px; }
  .auth-main h1 { font-size: 44px; }
  .auth-foot { padding: 14px 34px; }
}

/* Short screens — a landscape phone, or a keyboard taking half the height. */
@media (max-height: 640px) {
  .auth-mark { width: 40px; height: 40px; margin-bottom: 14px; }
  .auth-main h1 { font-size: 27px; }
  .auth-sub { margin-bottom: 18px; font-size: 13px; }
  .auth-eyebrow { margin-bottom: 7px; }
  .auth-field { margin-bottom: 11px; }
  .auth-field input { padding: 12px; }
  .auth-submit { padding: 14px; }
}

/* --- Offline page ------------------------------------------------------- */

.offline-page {
  min-height: 100vh; display: grid; place-items: center;
  padding: 30px 20px; text-align: center;
}
.offline-page h1 { font-size: 30px; margin: 0 0 10px; }
.offline-page p { color: var(--muted); font-size: 13.5px; max-width: 330px; margin: 0 auto 22px; line-height: 1.6; }

/* ==========================================================================
   Wide screens: bring back the sidebar, retire the tab bar.
   ========================================================================== */

@media (min-width: 861px) {
  body { font-size: 14px; }

  .app-shell { display: flex; }
  .tabbar { display: none; }
  .fab { right: 34px; bottom: 34px; }

  /* The app bar stays, but the sidebar already names the space, so only the
     actions remain — and they are the only way to reach notifications and
     the account sheet once the tab bar is gone. */
  .appbar {
    position: static;
    height: 74px; padding: 0 44px;
    background: var(--white); color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .appbar-mark, .appbar-title { display: none; }
  .appbar-actions { margin-left: auto; gap: 10px; }
  .appbar .icon-action { color: var(--teal-dark); }
  .appbar .room-button {
    color: var(--teal-dark); border-color: var(--line); max-width: 260px;
  }
  .appbar .room-button:active, .appbar .room-button:hover { background: var(--paper); }
  .appbar .icon-action:active, .appbar .icon-action:hover { background: var(--paper); }

  .sidebar {
    display: flex; flex-direction: column;
    width: 250px; flex: none;
    background: var(--teal-deep); color: #eef7f5;
    padding: 30px 18px 24px;
  }
  .sidebar .brand { padding: 0 12px 34px; color: inherit; font-size: 24px; }
  .space-switcher {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 11px 9px;
    color: inherit; background: none;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
  }
  .space-switcher strong, .space-switcher small { display: block; }
  .space-switcher strong { font-size: 12.5px; }
  .space-switcher small { font-size: 10px; color: #9cc4bf; margin-top: 3px; }
  .space-switcher .who { flex: 1; min-width: 0; }
  .space-switcher .icon { width: 16px; height: 16px; flex: none; }
  .space-switcher:hover { border-color: var(--teal-soft); }

  .main-nav { display: grid; gap: 5px; }
  .nav-item {
    border: 0; background: none; color: #9dc0ba;
    border-radius: var(--radius-sm); text-align: left;
    padding: 11px 13px; font-size: 13px;
    display: flex; align-items: center; gap: 13px;
    text-decoration: none;
  }
  .nav-item .glyph { display: block; flex: none; }
  .nav-item:hover, .nav-item.active { background: var(--teal-dark); color: #fff; }

  .sidebar-footer { margin-top: auto; display: grid; gap: 14px; }

  .sidebar-you {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 9px; border: 1px solid rgba(255, 255, 255, .14);
    background: none; color: inherit;
  }
  .sidebar-you .who { flex: 1; min-width: 0; }
  .sidebar-you strong { display: block; font-size: 12.5px; }
  .sidebar-you small { display: block; font-size: 10px; color: #9cc4bf; margin-top: 2px; }
  .sidebar-you:hover { border-color: var(--teal-soft); }

  .main-content { width: calc(100% - 250px); max-width: 1450px; }
  .view { padding: 44px 44px 70px; }

  .page-heading {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 30px; margin-bottom: 26px;
  }
  .page-heading h1 { font-size: clamp(38px, 4vw, 52px); letter-spacing: -1.5px; }
  .lede { font-size: 14px; }

  .clock-strip {
    border-top: 0; border-left: 1px solid var(--line);
    padding: 0 0 0 24px; margin-top: 0; flex-wrap: nowrap;
  }
  .clock { flex: none; min-width: 118px; }

  .board-intro {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; margin-bottom: 18px;
  }
  .board-intro .lede { max-width: 420px; }
  .desktop-only { display: inline-flex; }

  .board-summary { padding: 22px 25px; gap: 22px; flex-wrap: nowrap; }
  .board-summary h2 { font-size: 22px; }
  .progress-ring { height: 76px; width: 76px; }
  .progress-ring span { font-size: 19px; }
  .streak-badge { margin-left: auto; align-self: center; }

  .board-item { min-height: 86px; padding: 18px 25px; }
  .board-header { padding: 16px 25px; }
  .board-state {
    display: block; flex: none;
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1.2px;
  }
  .board-item.next .board-state { color: var(--teal); }

  /* Notifications become a right-hand drawer; the account sheet has no
     desktop home of its own, so it stays a sheet, centred. */
  .notif-panel {
    top: 0; bottom: 0; left: auto; right: 0;
    width: 370px; max-height: none;
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 50px rgba(15, 60, 55, .14);
    padding-bottom: 0;
    transform: translateX(100%);
  }
  .notif-panel.open { transform: translateX(0); }
  .notif-panel .sheet-grip { display: none; }
  .notif-panel .sheet-head { padding-top: 20px; padding-bottom: 16px; }

  .account-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: 420px; max-width: calc(100% - 40px);
    transform: translate(-50%, -44%);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .account-sheet.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .account-sheet .sheet-grip { display: none; }
  .account-sheet .sheet-head { padding-top: 20px; }

  .modal-backdrop { align-items: center; justify-content: center; padding: 20px; }
  .modal {
    max-width: 460px;
    padding: 30px 28px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  }
  .modal h2 { font-size: 28px; }
  #routineForm .primary-button { width: auto; }

  .toast {
    left: auto; right: 24px; bottom: 24px;
    max-width: 330px;
  }

  .auth-card { padding: 38px 34px; }
  .auth-card h1 { font-size: 30px; }
}

/* Honour the visitor's motion preference. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}