/* Julium compact look (Nov 2026): cleaner, less white space. Loaded after style.css on the Mac app,
   the website and the TV. Same teal/orange Instrument colours; only size, spacing and layout change. */

/* Type and controls: one step smaller, tighter lines. */
h1 { font-size: 32px; letter-spacing: -1px; margin-bottom: 8px; }
h2 { font-size: 24px; letter-spacing: -.5px; margin-bottom: 8px; }
h3 { font-size: 18px; margin-bottom: 6px; }
p { line-height: 1.5; margin-bottom: 12px; }
button { min-height: 40px; padding: 8px 16px; }
.eyebrow { margin-bottom: 6px; font-size: 10.5px; }

/* Header: one slim bar. */
.top { padding: 8px 24px; min-height: 56px; }
.top .brand img, .top .logo, .top img { max-height: 36px; }
.main { padding: 20px 24px 24px; max-width: 1320px; }

/* Home: greeting, tabs and count on two tight lines. */
.welcome-heading { margin-bottom: 12px; align-items: center; }
.welcome-heading .eyebrow { display: none; }
.welcome-heading h1 { font-size: 30px; margin: 0; }
.tabs { margin-bottom: 16px; padding-bottom: 8px; gap: 4px; }
.tabs button { min-height: 36px; padding: 6px 14px; }
.footer { display: none; }

/* Tile grid: more per row, no tall empty picture band. */
.child-tile-grid { gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }
.child-tile-grid > [data-layout-id="widget:joke"] { grid-column: 1 / -1; }
.tile { min-height: 0; flex-direction: row; align-items: stretch; }
.tile-visual { height: auto; width: 88px; flex: 0 0 88px; border-bottom: 0; border-right: 1px solid var(--line); flex-direction: column; gap: 6px; padding: 10px 0; }
.tile-visual .icon { width: 36px; height: 36px; }
.tile-index { position: static !important; font-size: 11px; }
.tile-tag { position: static !important; font-size: 9.5px; letter-spacing: 1px; }
.tile-content { padding: 12px 16px !important; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tile-content .eyebrow { display: none; }
.tile h3 { font-size: 17px; margin-bottom: 4px; }
.tile p { font-size: 14px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-bottom { margin-top: auto; font-size: 13px; }

/* Joke: one compact band across the top instead of a tall card. */
.animal-welcome { grid-template-columns: 150px minmax(0, 1fr); margin-bottom: 0; }
.animal-stage { padding: 12px !important; gap: 2px; }
.animal-stage > .eyebrow { display: none; }
.big-buddy { height: 88px; }
.big-buddy img, .big-buddy .buddy-portrait { max-height: 84px; }
.joke-bubble { padding: 14px 20px !important; }
.joke-bubble > .eyebrow { margin-bottom: 4px; }
.joke-bubble h2 { font-size: 22px; margin-bottom: 4px; }
.joke-bubble .punchline { font-size: 18px; margin-bottom: 6px; }
.joke-aside { display: none; }
.joke-actions { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.joke-actions button { min-height: 36px; padding: 6px 14px; }
.crew-strip { padding: 6px 16px; }
.crew-strip .buddy-mini { min-height: 0; padding: 2px; }
.joke-mini { padding: 10px 16px; min-height: 0; margin-bottom: 0; }

/* Lesson: wider reading column, less air between parts. */
.lesson { padding: 16px 24px 32px !important; max-width: 1100px; }
.lesson > button.quiet { padding-left: 0; min-height: 32px; }
.lesson-header { margin: 8px 0 16px !important; padding-bottom: 16px !important; }
.lesson-header h1 { font-size: 34px; }
.lesson-intro { font-size: 17px !important; margin-bottom: 12px; max-width: 760px; }
.difficulty { gap: 8px; }
.difficulty button { min-height: 36px; padding: 6px 14px; }
.lesson-body { gap: 24px !important; grid-template-columns: minmax(0, 1fr) 300px !important; }
.explanation { font-size: 17px !important; line-height: 1.6 !important; white-space: pre-line; }
.activity { padding: 16px !important; }
.deeper-section, .quiz { margin-top: 20px !important; padding-top: 16px !important; }
.answers { gap: 8px !important; }
.answers button { min-height: 44px; text-align: left; }

/* Panels everywhere (including parent screens on the Mac). */
.panel { padding: 16px !important; }
.spaced { margin-top: 12px !important; }

@media (max-width: 760px) {
  .top { padding: 8px 16px; }
  .main, .lesson { padding: 12px 16px 24px !important; }
  .welcome-heading h1 { font-size: 24px; }
  .animal-welcome { grid-template-columns: 96px minmax(0, 1fr); }
  .big-buddy { height: 64px; }
  .lesson-body { grid-template-columns: 1fr !important; }
  .lesson-header h1 { font-size: 26px; }
}

/* Older rules set fixed heights on the joke card and tiles; let content decide. */
.tile, .child-tile-grid .tile { min-height: 0 !important; }
.animal-welcome, .child-tile-grid .animal-welcome { min-height: 0 !important; }
.animal-stage { min-height: 0 !important; }
.crew-strip { padding: 6px 16px !important; }
.crew-strip .buddy-mini, .crew-peek .buddy-mini { width: 40px; height: 40px; }
.tile-visual { justify-content: center !important; }
.movable-tile { display: flex; } .movable-tile > .tile { flex: 1; height: 100%; }
/* Joke takes two columns; tiles fill the space beside it. Tiles in a row share one height. */
.child-tile-grid { grid-auto-flow: row dense; align-items: stretch !important; }
.child-tile-grid > [data-layout-id="widget:joke"] { grid-column: span 2 !important; }
@media (max-width: 640px) { .child-tile-grid > [data-layout-id="widget:joke"] { grid-column: 1 / -1 !important; } }
/* Rows don't stretch to the tallest box (the family messages box on the Mac is tall); tiles keep a steady height. */
.child-tile-grid { align-items: start !important; }
.movable-tile > .tile { min-height: 136px !important; }
.widget-tile .joke-mini { height: auto; }
/* Mac: the family messages box runs down the side so tiles fill the rows beside it. */
.child-tile-grid > [data-layout-id="widget:messages"] { grid-row: span 3; }