/* Wave 2: the phone shell, the Today view, one button per row.

   Loads after hub.css (Propshaft includes the folder alphabetically), so a
   rule here wins over the same selector there. Tokens come from hub.css
   :root; nothing is redefined. Three parts:

   1. Shell. Under 840px the sidebar is replaced by a compact top bar and a
      bottom tab bar, as iOS would build it. Above 840px the sidebar stays,
      minus the full-width Sign out.
   2. Today view and rows. The date, the number that matters, the list; a
      row is one sentence and one button, late rows get a red rule.
   3. Sign in as a front door, the first-day card, popovers. */

/* 1. Shell */

.top-bar,
.tab-bar {
  display: none;
}

/* Sign out, once a month, is a quiet line under the user card rather than
   the largest control in the sidebar. */
.sidebar-signout-form {
  margin: 0;
  padding: 0 12px;
}

.sidebar-signout {
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  cursor: pointer;
}

.sidebar-signout:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* The question mark sits at the end of the title row, next to the thing it
   explains. A small controller moves it there after the title renders; the
   topbar is the fallback position when a page has no title. */
.hub-main {
  position: relative;
}

.hub-topbar {
  position: absolute;
  top: 32px;
  right: 38px;
  margin: 0;
  min-height: 0;
  z-index: var(--z-menu);
}

.hub-topbar[hidden] {
  display: none;
}

.hub-main h1:has(+ .page-help) {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.page-help {
  display: inline-block;
  vertical-align: middle;
}

/* In a title row with actions on the right, the help stays by the title. */
.page-head-row > .page-help {
  margin-right: auto;
}

.page-help summary {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* Popovers arrive with a short rise and a blur clearing, and lift with the
   menu shadow. The two kinds share one entrance. */
@keyframes popover-in {
  from { opacity: 0; transform: translateY(4px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

.more-menu-body,
.page-help-body {
  animation: popover-in var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-menu);
  transform-origin: top right;
}

.more-menu-backdrop {
  display: none;
}

/* The dots on a laptop: a 32px round target with a readable glyph, instead
   of three 11px dots in the corner of the row. */
.more-menu summary.btn-quiet {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

/* Rows in the account and More sheets: 52px each, the thumb's size. */
.sheet-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.sheet-form {
  margin: 0;
}

.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: none;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.sheet-list > :first-child .sheet-row,
.sheet-list > .sheet-row:first-child {
  border-top: 0;
}

.sheet-row::after {
  content: "›";
  font-size: 18px;
  color: var(--ink-mute);
}

.sheet-row.is-active {
  font-weight: 700;
}

.sheet-row:active {
  background: var(--surface-soft);
}

.sheet-row-quiet {
  color: var(--ink-soft);
}

.sheet-row-quiet::after {
  content: none;
}

@media (max-width: 840px) {
  .hub-sidebar {
    display: none;
  }

  .hub-shell {
    padding-top: calc(52px + var(--safe-t));
  }

  /* The bar: wordmark, where you are, who you are. Frosted, because it
     carries no data and the list scrolls under it. */
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: calc(52px + var(--safe-t));
    padding: var(--safe-t) 12px 0;
    box-sizing: border-box;
    background: rgba(244, 242, 237, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line-soft);
  }

  .top-bar-brand {
    display: inline-flex;
    align-items: center;
    height: 44px;
  }

  .top-bar-brand .hub-logo svg {
    height: 18px;
  }

  .top-bar-title {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-bar-avatar {
    justify-self: end;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: "Quicksand", sans-serif;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .top-bar-avatar:active {
    transform: scale(.94);
  }

  /* Four tabs under the thumb. */
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(50px + var(--safe-b));
    padding-bottom: var(--safe-b);
    box-sizing: border-box;
    background: rgba(244, 242, 237, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line-soft);
    transition: transform var(--dur-base) var(--ease-out);
  }

  /* While the keyboard is up the bar would ride on top of it. */
  .hub-shell.keyboard-up .tab-bar {
    transform: translateY(110%);
  }

  .tab-more {
    display: contents;
  }

  .tab-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .tab-link.is-active {
    color: var(--forest);
    font-weight: 700;
  }

  .tab-icon {
    display: block;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .tab-link:active .tab-icon {
    transform: scale(.92);
  }

  .tab-link .hub-nav-badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }

  /* Room for the bar under the last row. */
  .hub-main {
    padding: 20px 16px calc(50px + var(--safe-b) + 28px);
  }

  .hub-topbar {
    top: 18px;
    right: 16px;
  }

  /* The help body anchors full width under the top bar, not over the title. */
  .page-help-body {
    position: fixed;
    left: 16px;
    right: 16px;
    top: calc(52px + var(--safe-t) + 8px);
    width: auto;
    z-index: calc(var(--z-nav) + 1);
  }
}

/* 2. Today view and rows */

.today-head {
  margin-bottom: 20px;
}

.today-date {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.today-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

/* The display face is drawn for digits; the words stay in the body face. */
.today-number {
  font-family: "Indarung", "Quicksand", sans-serif;
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

.today-head .today-line {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
}

/* Grouped by verb once the list is long: a sticky label per batch. */
.needs-group + .needs-group {
  margin-top: 10px;
}

.needs-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 8px 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-solid);
}

.needs-group-count {
  margin-left: 4px;
  font-weight: 600;
  color: var(--ink-mute);
}

.needs-group .needs-list .needs-row:first-child {
  border-top: 1px solid var(--line-soft);
}

/* A late row says so once: a red rule and a red name. Nothing else on the
   page is red, so the morning where everything is late still reads. */
.needs-row.is-late {
  box-shadow: inset 3px 0 0 var(--bad);
  padding-left: 12px;
}

.needs-row.is-late .needs-who a,
.needs-row.is-late .needs-who strong {
  color: var(--bad);
}

.needs-age-cell {
  text-align: right;
}

/* A button that pushes a page says so with a chevron; a sheet does not. */
.btn-push .btn-chevron {
  margin-left: -2px;
  font-size: 15px;
  line-height: 1;
}

/* Rows leave before the stream swaps them and the replacement arrives with
   its blur clearing; swap_controller adds the classes. */
.needs-row {
  transition: opacity 180ms var(--ease-in), transform 180ms var(--ease-in);
}

.needs-row.is-leaving {
  opacity: 0;
}

.needs-row.is-leaving-left {
  transform: translateX(-8px);
}

.needs-row.is-leaving-right {
  transform: translateX(8px);
}

.needs-row.is-arriving {
  animation: fade-rise 240ms var(--ease-out);
}

/* Empty folds collapse into one quiet line. */
.quiet-strip {
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* The server fold is a warning, so amber. Red only when something is broken
   for the team: uploads refused, or a backup that used to land has stopped. */
.ops-warning {
  border-left-color: var(--warn);
}

.ops-warning.is-bad {
  border-left-color: var(--bad);
}

@media (max-width: 840px) {
  .needs-group-label {
    top: calc(52px + var(--safe-t));
  }
}

@media (max-width: 760px) {
  /* Name and age on one line, the sentence under it, the button full width
     under the thumb with the dots beside it. */
  .needs-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "who age"
      "what what"
      "actions actions";
    gap: 4px 12px;
    padding: 14px 0;
  }

  .needs-who {
    grid-area: who;
    min-width: 0;
  }

  .needs-what {
    grid-area: what;
  }

  .needs-age-cell {
    grid-area: age;
  }

  .needs-row .actions-row {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
  }

  .needs-row .actions-row > * {
    min-width: 0;
  }

  .needs-row .actions-row > .btn,
  .needs-row .actions-row > span > .btn,
  .needs-row .actions-row > form > .btn {
    width: 100%;
    min-height: var(--tap);
  }

  .needs-row .actions-row > span,
  .needs-row .actions-row > form {
    display: block;
  }

  .needs-row .actions-row .btn-primary,
  .needs-row .actions-row .btn-secondary {
    flex: none;
  }

  /* The dots are a real 44px round button, not a typo in the corner. */
  .needs-row .more-menu summary.btn-quiet {
    width: var(--tap);
    height: var(--tap);
    min-height: var(--tap);
    padding: 0;
    border-radius: 50%;
    background: rgba(12, 65, 41, .06);
    font-size: 16px;
    color: var(--ink);
  }

  /* The row menu is a bottom sheet on a phone, with a dimmed backdrop that
     the popover controller treats as outside. */
  .more-menu[open] .more-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) + 1);
    background: rgba(12, 65, 41, .35);
    animation: backdrop-in var(--dur-base) var(--ease-out);
  }

  @keyframes backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .more-menu-body {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-nav) + 2);
    min-width: 0;
    padding: 10px 16px calc(12px + var(--safe-b));
    border-radius: 22px 22px 0 0;
    background: var(--surface-sheet);
    box-shadow: var(--shadow-sheet);
    animation: sheet-up 320ms var(--ease-sheet);
    transform-origin: bottom center;
  }

  .more-menu-body::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 0 auto 8px;
    border-radius: 3px;
    background: var(--line-strong);
  }

  .more-menu-item {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 8px;
    border-radius: 0;
    border-top: 1px solid var(--line-soft);
    font-size: 15px;
  }

  .more-menu-body > :first-of-type .more-menu-item,
  .more-menu-body > .more-menu-item:first-of-type {
    border-top: 0;
  }

  .flash-stack {
    bottom: calc(50px + var(--safe-b) + 12px);
  }
}

/* 3. Front door, first day */

.auth-column {
  max-width: 420px;
}

.auth-card .auth-brand {
  justify-content: center;
  margin-bottom: 18px;
}

.auth-card h1 {
  text-align: center;
  margin-bottom: 4px;
}

.auth-card .page-sub {
  text-align: center;
}

.auth-card .input {
  min-height: 48px;
  box-sizing: border-box;
}

.auth-actions .btn {
  width: 100%;
  min-height: 48px;
}

.auth-aside {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.auth-aside a {
  color: var(--ink-soft);
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.peek-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  cursor: pointer;
}

.peek-toggle:hover {
  color: var(--ink);
  text-decoration: underline;
}

.field-hint.is-ok {
  color: var(--ok-ink);
}

.field-hint.is-ok::before {
  content: "✓ ";
}

@media (max-width: 840px) {
  .hub-auth {
    align-items: flex-start;
    padding-top: 10vh;
  }
}

/* One quiet card on the first day, so day one looks like every other day. */
.first-day-cards {
  grid-template-columns: 1fr;
}

.first-day-card {
  padding: 16px 18px;
  background: var(--surface-soft);
  color: var(--ink);
  gap: 12px;
}

.first-day-lines {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
}

.first-day-lines li::marker {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .more-menu-body,
  .page-help-body,
  .more-menu-backdrop,
  .needs-row.is-arriving {
    animation: none;
  }

  .needs-row,
  .tab-bar {
    transition: none;
  }
}