/* ==========================================================================
   qx.css
   CURRENT STATUS, round three.

   Round one was four drawings of a list. Round two kept the list's shape and
   changed what it said. Both were rejected, and the note this time was that
   the PANELS are the problem, not the interaction: the flip into detail is
   right, what sits on the card is not.

   So round three changes the visual language rather than the layout. None of
   these four is a list of five things with a value beside each. Each treats
   the card as ONE OBJECT:

     ORBIT   a ring with the five on it, the way the hero already draws a day
     MOSAIC  a solid tile grid that fills the card, read as a poster
     COLUMN  one vertical bar that fills as the day is logged
     KEYPAD  the panel stops reporting and becomes the control that logs

   The flip is unchanged. The card keeps its column and turns over in place.
   ========================================================================== */

.qx-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: min-height .5s var(--spring); }
/* the overview grows into the card rather than sitting at the top of it */
.qx-card > .qx-face.overview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qx-face { transition: opacity .34s var(--ease), transform .5s var(--spring); }
.qx-face.detail { position: absolute; inset: 24px; opacity: 0; transform: translateY(16px);
  pointer-events: none; }
.qx-card.flipped .qx-face.overview { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.qx-card.flipped .qx-face.detail { opacity: 1; transform: none; pointer-events: auto; }

.qx-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qx-kick { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); }
.qx-count { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.qx-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between;
  gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); }
.qx-foot-n { white-space: nowrap; }

/* =======================================================================
   A. ORBIT. One object. The ring is the day and the five sit on it, filled
   when logged. It borrows the shape the hero already uses, so the left
   column and the hero speak the same language for the first time.
   ======================================================================= */
.qx-orbit { position: relative; width: 100%; aspect-ratio: 1; max-width: 260px;
  margin: 18px auto 0; }
.qx-orbit svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qx-orbit .mid { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 22%; }
.qx-orbit .mid b { font-family: var(--display); font-size: 34px; font-weight: 700;
  letter-spacing: -.045em; color: var(--ink); line-height: 1; }
.qx-orbit .mid span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 5px; line-height: 1.2; }
.qx-node { position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; cursor: pointer; padding: 0; display: flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--hair-2); background: var(--raise);
  color: var(--ink-3); transition: transform .24s var(--bounce), background .2s var(--ease); }
.qx-node svg { display: block; }
.qx-node.on { border-color: transparent; color: #fff; }
.qx-node:hover { transform: scale(1.12); }

/* =======================================================================
   B. MOSAIC. A solid tile grid that fills the card. No rows, no dots, no
   labels hanging off values: a logged signal is a block of its own colour
   carrying its figure, an unlogged one is an outline waiting to be filled.
   ======================================================================= */
.qx-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; flex: 1; }
.qx-tile { position: relative; border-radius: var(--r-md); padding: 12px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; text-align: left;
  border: 1px solid transparent; overflow: hidden; min-height: 84px;
  transition: transform .22s var(--bounce); }
.qx-tile:hover { transform: translateY(-3px); }
.qx-tile.wide { grid-column: 1 / -1; min-height: 72px; }
.qx-tile.off { background: var(--raise); border-color: var(--hair); border-style: dashed; }
.qx-tile .n { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .85; }
.qx-tile .v { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  margin-top: 3px; line-height: 1.15; }
.qx-tile.on { color: #fff; }
.qx-tile.off .n, .qx-tile.off .v { color: var(--ink-3); }
.qx-tile.off .v { font-size: 13px; font-weight: 600; }

/* =======================================================================
   C. COLUMN, enhanced.

   ONE GRID BINDS THE BAR TO THE LABELS. The segment and its row are two cells
   of the SAME grid row, so they cannot drift apart no matter what either
   contains. Aligning two separately sized stacks by eye is the kind of thing
   that looks right until a label wraps.

   ALL FIVE KEEP THEIR ICON. An unlogged signal is a grey segment with its own
   icon rather than empty space, so the column always reads as five things and
   the bar shows how much of the day is filled in.

   COMPLETED STACK AT THE BOTTOM, and the labels are ordered to match. Those
   two requirements are in tension: a fixed label order and a stack that grows
   from the bottom cannot both hold. The list follows the stack, so what you
   read down the right is exactly what you see down the left, with the
   outstanding ones above the line and the done ones below it.
   ======================================================================= */
/* THE BAR TAKES THE SLACK. Five rows of 1fr inside a grid that flexes means
   the column grows with the card instead of leaving 220px empty beneath it,
   and the segments stay equal to each other however tall it gets. */
.qc { display: grid; grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: repeat(5, minmax(46px, 1fr));
  column-gap: 15px; margin-top: 16px; flex: 1 1 auto; min-height: 0;
  align-content: stretch; }
.qc-sum, .qx-card .qx-foot { flex-shrink: 0; }

/* the frame sits over the whole bar so the column reads as one object while
   its segments stay grid items of the same grid as the labels */
.qc-frame { grid-area: 1 / 1 / -1 / 2; border: 1px solid var(--hair);
  border-radius: 16px; pointer-events: none; z-index: 2; }

.qc-seg { grid-column: 1; position: relative; display: flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0; border: 0;
  background: var(--raise); color: var(--ink-3);
  transition: background .55s var(--spring), color .3s var(--ease); }
/* the rounding follows the GRID ROW, not the source order, because the
   segments are placed explicitly and :first-of-type would round whichever
   happened to be written first */
.qc-seg[style*="grid-row:1"] { border-radius: 16px 16px 0 0; }
.qc-seg[style*="grid-row:5"] { border-radius: 0 0 16px 16px; }
.qc-seg svg { display: block; position: relative; z-index: 1; }
.qc-seg.on { color: #fff; }
/* the hairline between stacked segments, drawn on the segment above so the
   bottom of the bar stays clean */
.qc-seg:not([style*="grid-row:1"])::before { content: ''; position: absolute;
  left: 8px; right: 8px; top: 0; height: 1px; background: rgba(255, 255, 255, .16); }
.qc-seg:hover { filter: brightness(1.12); }

.qc-row { grid-column: 2; display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: transparent; border: 0; padding: 0 2px; cursor: pointer;
  color: var(--ink); border-bottom: 1px solid transparent; }
.qc-row .n { font-size: 13.5px; font-weight: 600; }
.qc-row .v { margin-left: auto; font-size: 12px; color: var(--ink-3); text-align: right;
  white-space: nowrap; }
.qc-row.off .n { color: var(--ink-3); font-weight: 500; }
.qc-row:hover .n { color: var(--ink); }
/* the line the stack has reached, drawn once, between outstanding and done */
.qc-row.first-done { border-top: 1px dashed var(--hair-2); }

.qc-sum { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.qc-sum b { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink);
  /* A count is one word even though it is spelt with three. It broke as
     "5 of" / "5" the moment the status panel narrowed, which happens now that
     tablet keeps the panel beside the progress card rather than under it. */
  white-space: nowrap; }
.qc-sum span { font-size: 11.5px; color: var(--ink-3); }

/* =======================================================================
   D. KEYPAD. The panel stops reporting and becomes the control. Five large
   targets that log, sized for a thumb, with state carried by fill rather
   than by a word. On a card whose default state is five blanks, the honest
   answer may be to stop describing the blanks and offer to fill them.
   ======================================================================= */
.qx-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; flex: 1; }
.qx-key { border-radius: var(--r-lg); padding: 14px 12px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 9px; min-height: 82px;
  background: var(--raise); border: 1px solid var(--hair); color: var(--ink);
  transition: background .2s var(--ease), transform .22s var(--bounce), border-color .2s var(--ease); }
.qx-key:hover { background: var(--raise-2); transform: translateY(-3px); }
.qx-key.wide { grid-column: 1 / -1; min-height: 64px; flex-direction: row; align-items: center; }
.qx-key .o { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.qx-key .o svg { display: block; }
.qx-key .n { font-size: 12.5px; font-weight: 600; }
.qx-key .v { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.qx-key.done { border-color: transparent; }
.qx-key.done .n { color: #fff; }
.qx-key.done .v { color: rgba(255,255,255,.72); }
.qx-key .tick { margin-left: auto; color: #fff; opacity: .9; }
.qx-key .tick svg { display: block; }

/* =======================================================================
   the detail face, shared, unchanged in behaviour from the round Andy liked
   ======================================================================= */
.qx-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: var(--raise-2); color: var(--ink); border: 1px solid var(--hair); }
.qx-back:hover { background: var(--hair); }
.qx-d-hd { display: flex; align-items: center; gap: 13px; margin: 16px 0 14px; }
.qx-d-ic { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.qx-d-ic svg { display: block; }
.qx-d-h { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); line-height: 1.15; }
.qx-note { padding: 12px 14px; border-radius: var(--r-md); background: var(--raise);
  border: 1px solid var(--hair); margin-bottom: 8px; }
.qx-note b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.qx-note span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2); }
.qx-strip { display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 3px;
  margin-top: 12px; }
.qx-strip i { display: block; height: 24px; border-radius: 5px; background: var(--raise-2); }
.qx-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }