/* =========================================================================
   tears.css — the Tear Shed Calendar.

   AN APP SCREEN, NOT A MARKETING PAGE. The rest of the site is read top
   to bottom; this is used. So the counter is the whole first screen, the
   one button you need is under your thumb, and everything else sits
   below the fold where it cannot compete.

   It still borrows the site's tokens rather than inventing a palette:
   the same blush, the same Shrikhand, the same button. It should feel
   like something Hoe to CEO made, not a tool bolted onto the domain.
   ========================================================================= */

/* -------------------------------------------------------------------------
   the header
   ------------------------------------------------------------------------- */

.tears-head {
  background: var(--blush);
  padding-top: clamp(34px, 30px + 0.5vw, 46px);
  padding-bottom: clamp(34px, 30px + 0.5vw, 46px);
  text-align: center;
}

.tears-head h1 {
  font-size: var(--display-md);
  line-height: var(--lh-md);
}

.tears-head .u-body {
  margin-top: 12px;
  margin-inline: auto;
  max-width: 48ch;
}

.tears__eyebrow {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   the counter — the reason the page exists

   The number is set in the display face at the largest size on the site,
   because at a glance it is the only thing anyone came here for. It is
   tabular so the layout does not jump between 9 and 10.
   ------------------------------------------------------------------------- */

.tears__counter {
  text-align: center;
  padding-bottom: 28px;
}

.tears__count {
  font-family: var(--display);
  font-size: clamp(78px, 16px + 9vw, 180px);
  line-height: 1;
  letter-spacing: var(--track);
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}

.tears__count-label {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 10px;
}

.tears__count-sub {
  font-size: var(--read);
  line-height: var(--read-lh);
  color: var(--taupe);
  margin-top: 12px;
}

/* -------------------------------------------------------------------------
   actions
   ------------------------------------------------------------------------- */

.tears__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-bottom: 8px;
}

.tears__note {
  margin: 18px auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: var(--read);
  line-height: var(--read-lh);
  color: var(--taupe);
}

/* -------------------------------------------------------------------------
   reasons
   ------------------------------------------------------------------------- */

.tears__tagbox {
  margin: 24px auto 0;
  max-width: 44rem;
  padding: 20px;
  background: var(--blush);
  border-radius: 18px;
  text-align: center;
}

.tears__tagbox h2 {
  font-family: var(--ui);
  font-size: var(--read);
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 4px;
}

.tears__tagbox p {
  font-size: var(--meta);
  color: var(--taupe);
  margin-bottom: 14px;
}

.tears__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.tears__chip {
  font-family: var(--ui);
  font-size: var(--meta);
  padding: 8px 14px;
  border: 1px solid var(--rose);
  border-radius: 300px;
  background: transparent;
  color: var(--brown);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.tears__chip:hover { background: rgba(255, 255, 255, 0.5); }

.tears__chip.is-on {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--white);
}

/* -------------------------------------------------------------------------
   the calendar
   ------------------------------------------------------------------------- */

.tears__cal {
  margin: 40px auto 0;
  max-width: 30rem;
}

.tears__calhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tears__calhead h2 {
  font-family: var(--ui);
  font-size: var(--read);
  font-weight: 600;
  color: var(--brown);
}

.tears__nav {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--brown);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.tears__nav:hover { background: var(--blush); }

.tears__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.tears__dow {
  text-align: center;
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-bottom: 4px;
}

.tears__pad { aspect-ratio: 1; }

/* A square per day, large enough to hit with a thumb. 2.75rem is the
   44px minimum tap target, and the grid will not go below it. */
.tears__day {
  aspect-ratio: 1;
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  font-family: var(--ui);
  font-size: var(--meta);
  color: var(--brown);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.tears__day:hover:not(:disabled) { background: var(--blush); }

.tears__day.is-today {
  border-color: var(--rose);
  font-weight: 600;
}

.tears__day.is-cried {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--white);
}

.tears__day.is-cried:hover { background: var(--rose-dark); }

.tears__day.is-future {
  opacity: 0.3;
  cursor: default;
}

/* -------------------------------------------------------------------------
   stats
   ------------------------------------------------------------------------- */

.tears__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 40px auto 0;
  max-width: 30rem;
}

@media (min-width: 720px) {
  .tears__stats { grid-template-columns: repeat(4, 1fr); max-width: 46rem; }
}

.tears__stat {
  text-align: center;
  padding: 16px 10px;
  background: var(--blush);
  border-radius: 14px;
}

.tears__stat-n {
  display: block;
  font-family: var(--display);
  font-size: var(--display-xxs);
  line-height: 1.2;
  letter-spacing: var(--track);
  color: var(--brown);
}

.tears__stat-l {
  display: block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* -------------------------------------------------------------------------
   tools
   ------------------------------------------------------------------------- */

.tears__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 40px auto 0;
  max-width: 40rem;
}

.tears__tools .btn { font-size: var(--meta); padding: 10px 18px; }

.tears__fineprint {
  margin: 28px auto 0;
  max-width: 50ch;
  text-align: center;
  font-size: var(--meta);
  line-height: 1.6;
  color: var(--taupe);
}

/* -------------------------------------------------------------------------
   install

   One card, two different jobs: a button on Android where the browser
   will actually open an install dialog, and numbered steps on an iPhone
   where it will not. The steps are not a consolation prize -- Apple
   exposes no install API, so instructions are the only honest thing to
   put here, and dressing them up as a button would just produce a
   button that does nothing.
   ------------------------------------------------------------------------- */

.tears__install {
  margin: 32px auto 0;
  max-width: 34rem;
  padding: 22px 24px;
  background: var(--blush);
  border-radius: 18px;
  text-align: center;
}

.tears__install-copy {
  font-size: var(--read);
  line-height: var(--read-lh);
  color: var(--brown);
  margin-bottom: 16px;
}

.tears__steps {
  text-align: left;
  margin: 0 auto;
  padding-left: 1.3em;
  max-width: 26rem;
  font-size: var(--read);
  line-height: 1.6;
  color: var(--brown);
}

.tears__steps li + li { margin-top: 8px; }

/* the share glyph, inline with the sentence that names it */
.tears__ios-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.25em;
  color: var(--taupe);
}

.tears__ios-icon svg { width: 100%; height: 100%; }

.tears__dismiss {
  margin-top: 16px;
  border: 0;
  background: transparent;
  font-family: var(--ui);
  font-size: var(--meta);
  color: var(--taupe);
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   moving to another browser
   ------------------------------------------------------------------------- */

.tears__move {
  margin: 28px auto 0;
  max-width: 34rem;
  padding: 22px 24px;
  background: var(--blush);
  border-radius: 18px;
  text-align: center;
}

.tears__move h2 {
  font-family: var(--ui);
  font-size: var(--read);
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 6px;
}

.tears__move p {
  font-size: var(--meta);
  line-height: 1.6;
  color: var(--taupe);
  margin-bottom: 14px;
}

/* A textarea rather than a styled div so the link can be selected and
   copied by hand when the clipboard API is refused, which is the usual
   state of affairs inside an in-app browser. */
.tears__link {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rose);
  border-radius: 12px;
  background: var(--white);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--brown);
  resize: none;
  word-break: break-all;
}

.tears__move-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.tears__move-actions .btn { font-size: var(--meta); padding: 10px 18px; }