/* Daily Life Doc, round 12 (fixer JF6; WALK-1 #7): Size "Large" of a block on Today (`.hb-size-large`, js/home/
   home-blocks.js). Large is the whole block one step up, for every block type: the type scale's tokens are moved one
   step inside the block (so every word that reads a token grows: the head, the rows, Yes / No, the Counter's number,
   a Rating's numbers, a Note, a Message, the Steps), and the controls and the room around them grow with them (the
   Done button, +1, the Rating's buttons and faces, the Progress path, the Days done squares, the Jar, the Character,
   the row's circle). Still one type scale: each token takes the next token's size, and the largest number of the
   Counter takes one display size above --t-xxl. The care team's pink marks inside a block keep the normal sizes. */

.hb-size-large { --t-2xs: 12.5px; --t-xs: 13.5px; --t-sm: 14px; --t-s: 16px; --t-m: 18px; --t-l: 22px; --t-xl: 30px; --t-xxl: 40px; }
.hb-size-large :is(.he-pend, .he-tag, .he-lookp) { --t-2xs: 11.5px; --t-xs: 12.5px; --t-sm: 13.5px; --t-s: 14px; --t-m: 16px; --t-l: 18px; --t-xl: 22px; --t-xxl: 30px; }

/* More room: the card's padding and the space under the head. */
.hb-size-large.hb-style-card, .hb-size-large.hb-style-highlight { padding: 20px 20px 22px; }
.hb-size-large.hb-style-plain { padding: 6px 6px; }
.hb-size-large .hb-h { margin-bottom: 12px; }

/* Rows (Actions, Measures, Next, a row, Photo, Recording): taller rows and a larger circle. */
.hb-size-large .tp-row { min-height: 56px; }
.hb-size-large .tp-o { width: 28px; height: 28px; margin-top: 2px; }
.hb-size-large .ln-t { line-height: 1.4; }

/* Done: a taller button. */
.hb-size-large .hb-big { min-height: 72px; border-radius: 20px; }
.hb-size-large .hb-big i { width: 28px; height: 28px; }

/* Counter: the number and +1 taller. */
.hb-size-large .hb-count { gap: 16px; }
.hb-size-large .hb-num { min-height: 80px; padding: 0 18px; border-radius: 20px; }
.hb-size-large .hb-plus { width: 88px; height: 80px; border-radius: 20px; }
.hb-size-large .hb-num b { min-width: 1em; }

/* Rating: taller numbers; a Mood's faces larger. */
.hb-size-large .hb-scale { gap: 10px; }
.hb-size-large .hb-scale button { min-height: 60px; border-radius: 16px; }
.hb-size-large .mood-b { min-height: 104px; }
.hb-size-large .mood-b .mood { width: 46px; height: 46px; }

/* Note: a taller field. */
.hb-size-large .hb-note { min-height: 80px; padding: 16px 18px; border-radius: 16px; }

/* Progress: a thicker path. Days done: two rows of seven, so each square is twice as large. */
.hb-size-large .hb-pg { gap: 6px; margin: 10px 0 12px; }
.hb-size-large .hb-pg-s { height: 14px; border-radius: 7px; }
.hb-size-large .hb-dds { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hb-size-large .hb-dd { border-radius: 8px; }

/* Character, Jar, Drawing: drawn larger. */
.hb-size-large .hb-char .char[data-where="middle"] .char-bd { width: 200px; height: 200px; border-radius: 34px; }
.hb-size-large .hj-svg { width: 180px; }
.hb-size-large .hd-pic { max-width: 400px; }

/* Text, Steps and a document's blocks on Today (css/doc.css sets 15 px there, not a token): one step up. */
.hb-size-large .dk-text p, .hb-size-large .dk-steps, .hb-size-large .dkn-read, .hb-size-large .dkq-q { font-size: var(--t-m); }
.hb-size-large .dk-steps { gap: 10px; padding-left: 26px; }

/* Timer and Breathing: the drawing and its buttons larger. Exercise: its buttons taller. */
.hb-size-large .dkr-face { width: 196px; height: 196px; margin-bottom: 10px; }
.hb-size-large .dkr-btns .btn, .hb-size-large .dx-bar .btn { min-height: 52px; min-width: 132px; }

/* A document's link and a Message: a taller row, a larger icon. */
.hb-size-large .hb-docl { min-height: 60px; }
.hb-size-large .hb-docl > i:first-child { width: 26px; height: 26px; }

@media (max-width: 350px) {
  .hb-size-large.hb-style-card, .hb-size-large.hb-style-highlight { padding: 18px 16px 20px; }
  .hb-size-large .hb-char .char[data-where="middle"] .char-bd { width: 168px; height: 168px; }
  .hb-size-large .hb-plus { width: 76px; }
}