/* ==========================================================================
   hh.css
   THE HOME HERO as a deck, not a welcome banner.

   The dock on the right currently holds two fixed cards and stops. This makes
   the top slot a CAROUSEL, keeps the rings permanently under it, and gives
   every card the same behaviour the rings already have: clicking one takes the
   hero over with that card's detail.

   WHY A CAROUSEL AND NOT MORE CARDS. The hero is 580px and already carries a
   greeting, a lede and a streak. Four more cards stacked would be a dashboard
   with a photograph behind it. One slot that rotates holds the same content at
   the same size, and the dots make the length honest up front.
   ========================================================================== */

/* min-width:0 so the dock can be narrower than its widest slide's content,
   which a grid or flex item will not do on its own */
.hh-dock { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }

/* ---- the rotating slot ------------------------------------------------
   A TRACK, NOT ABSOLUTE SLIDES. Absolute slides need the carousel to carry a
   fixed height, and one of these slides is the REAL appointment card, which
   is a different height with an appointment than without one. A flex track
   takes the height of its tallest slide on its own and needs no measuring. */
.hh-car { overflow: hidden; border-radius: var(--r-lg); }
.hh-track { display: flex; align-items: stretch;
  transition: transform .5s var(--spring); }
.hh-slide { flex: 0 0 100%; min-width: 0; }
.hh-card { width: 100%; height: 100%; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--hero-glass); border: 1px solid var(--hero-hair);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  color: #fff; }
.hh-card:hover { border-color: rgba(255, 255, 255, .34); }
.hh-card .k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62); display: flex;
  align-items: center; gap: 8px; }
.hh-card .k i { width: 20px; height: 20px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.hh-card .k i svg { display: block; }
.hh-card h3 { font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; color: #fff; margin: 9px 0 0; line-height: 1.2; }
.hh-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .78); }
.hh-card .go { margin-top: auto; padding-top: 12px; display: flex; align-items: center;
  gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--secondary-soft); }
.hh-card .go svg { display: block; }

/* dots double as the control: the length of the deck is stated up front so it
   never feels like an unbounded stack */
.hh-dots { display: flex; gap: 6px; justify-content: center; }
.hh-dots button { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(255, 255, 255, .32); cursor: pointer;
  transition: width .22s var(--ease), background .22s var(--ease); }
.hh-dots button[aria-selected="true"] { width: 20px; border-radius: 4px;
  background: var(--secondary-soft); }

/* ---- the rings card sits under it, always ---- */
.hh-rings { padding: 14px 18px; border-radius: var(--r-lg); background: var(--hero-glass);
  border: 1px solid var(--hero-hair); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur); display: flex; align-items: center; gap: 16px;
  cursor: pointer; color: #fff; text-align: left; width: 100%; }
.hh-rings:hover { border-color: rgba(255, 255, 255, .34); }
.hh-rings .w { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
.hh-rings .w svg { position: absolute; inset: 0; transform: rotate(-90deg); }

.hh-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; min-width: 0; }
.hh-leg span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  color: rgba(255, 255, 255, .84); }
.hh-leg i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---- the takeover: THE SAME SHAPE AS THE PANEL ON HOME ----------------
   Same insets, same rings-width visual column, same rows, same actions line at
   the foot. Before this each card laid itself out its own way, which was five
   layouts to keep right and none of them matching the one the person had
   already learned from the rings. */
.hh-cap .hc-in { max-width: 1120px; --rings-col: 196px; }
.hh-cap .hc-sub { padding-left: var(--rings-col); max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13.5px; margin: 1px 0 15px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16); }
@media (max-width: 900px) { .hh-cap .hc-sub { white-space: normal; } }
.hh-cap .hc-grid { align-items: start; gap: 28px; }

/* the visual column, at the width the rings occupy so the type below the
   heading starts in the same place on every card */
.hh-art { width: 168px; height: 168px; flex-shrink: 0; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; }
.hh-art svg { display: block; }

/* the evening, drawn small */
.hh-art-hz { position: relative; background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14); color: #fff; }
.hh-hz-l { position: absolute; left: 18px; right: 18px; top: 50%; height: 2px;
  background: rgba(255, 255, 255, .2); border-radius: 2px; }
.hh-hz-now { position: absolute; top: calc(50% - 13px); width: 2px; height: 26px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 255, 255, .85);
  margin-left: 18px; }
.hh-hz-m { position: absolute; top: calc(50% - 5px); width: 10px; height: 10px;
  border-radius: 50%; margin-left: 14px; }
.hh-hz-ax { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex;
  justify-content: space-between; font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.hh-rows { display: grid; gap: 9px; min-width: 0; }
.hh-row { padding: 12px 15px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.hh-row b { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.hh-row span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .76); }