/* Tablet layout. shell.js sets data-size="tablet" on <html> when the stacked
   layout (css/mobile.css) is active on a screen at least --bp-tablet-w wide:
   tablets, and laptop windows too small for a readable artboard.

   Header, nav and footer still span the screen; their contents and the body
   sit in a centred column, and grids open up to more columns. */

html[data-size="tablet"] {
  --t-inline: max(var(--t-gutter), calc((100% - var(--t-col)) / 2));
  --m-gutter: var(--t-gutter);
  --m-gap: 22px;
}

/* ---------- Shell ---------- */

html[data-size="tablet"] .page-head {
  min-height: 84px;
  padding: 16px calc(var(--t-inline) + 76px) 16px var(--t-inline);
}

html[data-size="tablet"] .page-title {
  font-size: 26px;
}

html[data-size="tablet"] .page-sub {
  font-size: 18px;
}

html[data-size="tablet"] .badges-btn {
  top: 8px;
  right: max(16px, calc(var(--t-inline) - 8px));
}

html[data-size="tablet"] .badges-btn img {
  width: 54px;
  height: 67px;
}

html[data-size="tablet"] .page-body {
  padding: 28px var(--t-inline) 32px;
}

html[data-size="tablet"] .page-teaser {
  font-size: 19px;
}

html[data-size="tablet"] .page-nav {
  padding: 14px var(--t-inline);
}

html[data-size="tablet"] .page-nav .pill {
  min-height: 48px;
  padding: 8px 22px;
  font-size: 18px;
}

html[data-size="tablet"] .page-foot {
  justify-content: center;
  gap: 72px;
  padding: 10px var(--t-inline) calc(10px + env(safe-area-inset-bottom));
}

html[data-size="tablet"] .page-foot .foot-btn {
  flex: none;
  font-size: 14px;
}

html[data-size="tablet"] .page-foot .foot-disc {
  width: 44px;
  height: 44px;
}

/* ---------- Cover and login ---------- */

html[data-size="tablet"] .cover,
html[data-size="tablet"] .login {
  justify-content: center;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: 48px;
}

html[data-size="tablet"] .cover-title {
  font-size: 40px;
}

html[data-size="tablet"] .cover-art {
  width: 420px;
}

html[data-size="tablet"] .cover-begin {
  width: 260px;
  height: 60px;
  font-size: 24px;
}

html[data-size="tablet"] .cover-privacy {
  max-width: 560px;
}

html[data-size="tablet"] .cover-browsers {
  flex-direction: row;
  justify-content: center;
  gap: 18px;
}

html[data-size="tablet"] .login-card {
  max-width: 560px;
  padding: 36px 40px 38px;
}

html[data-size="tablet"] .login-card h1 {
  font-size: 28px;
}

/* ---------- How to Use ---------- */

html[data-size="tablet"] .htu-row2 {
  flex-direction: row;
  align-items: stretch;
}

html[data-size="tablet"] .htu-row2 > * {
  flex: 1 1 0;
}

html[data-size="tablet"] .htu-card {
  padding: 18px 22px;
  font-size: 16px;
}

/* ---------- Conversation Topics ---------- */

html[data-size="tablet"] .topics-lead {
  font-size: 20px;
}

/* Three per row; the last two of five sit centred under the first three. */
html[data-size="tablet"] .topic-row {
  grid-template-columns: repeat(6, minmax(0, 115px));
  gap: 20px;
}

html[data-size="tablet"] .topic-card:nth-child(4):nth-last-child(2) {
  grid-column: 2 / span 2;
}

html[data-size="tablet"] .topic-card:nth-child(5):last-child {
  grid-column: 4 / span 2;
}

html[data-size="tablet"] .topic-inner {
  padding: 21px 10px;
}

html[data-size="tablet"] .topic-icon {
  width: 104px;
  height: 104px;
}

html[data-size="tablet"] .topic-label {
  font-size: 18px;
}

/* ---------- Overview ---------- */

html[data-size="tablet"] .overview {
  gap: 20px;
}

html[data-size="tablet"] .overview-photo {
  height: 300px;
  border-radius: 14px;
}

html[data-size="tablet"] .info-stack {
  gap: 16px;
}

html[data-size="tablet"] .info-row {
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 16px 22px;
  font-size: 17px;
}

html[data-size="tablet"] .info-row.has-grid {
  padding: 18px 22px;
}

html[data-size="tablet"] .info-row.has-grid.has-icon {
  grid-template-columns: 60px 1fr;
}

html[data-size="tablet"] .info-row.has-grid .info-icon {
  justify-self: start;
}

html[data-size="tablet"] .info-icon {
  width: 60px;
  height: 60px;
}

html[data-size="tablet"] .info-heading {
  font-size: 18px;
}

html[data-size="tablet"] .info-grid.is-2up,
html[data-size="tablet"] .info-grid.is-3up {
  gap: 14px 18px;
}

html[data-size="tablet"] .info-grid.is-3up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-size="tablet"] .info-cell {
  font-size: 15px;
}

/* ---------- Conversation Cards ---------- */

html[data-size="tablet"] .deck-lead {
  font-size: 20px;
}

html[data-size="tablet"] .deck {
  --card-w: 190px;

  max-width: calc(var(--card-w) + (var(--n) - 1) * 96px);
  height: 268px;
  margin-top: 24px;
}

html[data-size="tablet"] .deck-card {
  height: 268px;
  padding: 10px;
}

html[data-size="tablet"] .deck-face {
  gap: 12px;
  padding-top: 26px;
}

html[data-size="tablet"] .deck-face img {
  width: 112px;
  height: 112px;
}

html[data-size="tablet"] .deck-label {
  font-size: 18px;
}

html[data-size="tablet"] .qstack {
  margin-left: 72px;
}

html[data-size="tablet"] .qcard {
  min-height: 240px;
}

html[data-size="tablet"] .qcard-face {
  min-height: 210px;
  padding: 67px 28px;
}

html[data-size="tablet"] .qcard-face > p:not(.qcard-followup),
html[data-size="tablet"] .qcard-followup {
  font-size: 21px;
}

html[data-size="tablet"] .qpanel {
  padding: 20px 24px;
}

html[data-size="tablet"] .qpanel-count,
html[data-size="tablet"] .qpanel-lead {
  font-size: 17px;
}

html[data-size="tablet"] .opt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

html[data-size="tablet"] .opt {
  min-height: 52px;
  font-size: 17px;
}

html[data-size="tablet"] .opt-other {
  grid-column: 1 / -1;
}

/* ---------- Landscape: side-by-side like the artboard ---------- */

@media (orientation: landscape) and (min-width: 860px) {
  html[data-size="tablet"] {
    --t-col: 1080px;
  }

  html[data-size="tablet"] .page-body:has(> .qstack) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }

  html[data-size="tablet"] .page-body:has(> .qstack) .opt-list {
    grid-template-columns: 1fr;
  }

  html[data-size="tablet"] .overview {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: 24px;
  }

  html[data-size="tablet"] .overview-photo {
    height: 100%;
    min-height: 280px;
    max-height: 420px;
  }

  html[data-size="tablet"] .overview > :not(.overview-photo):not(.info-stack) {
    grid-column: 1 / -1;
  }
}

/* Short windows: slimmer header, nav and footer so the body keeps its room. */
@media (max-height: 760px) {
  html[data-size="tablet"] .page-head {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  html[data-size="tablet"] .page-title {
    font-size: 22px;
  }

  html[data-size="tablet"] .page-sub {
    margin-top: 4px;
    font-size: 16px;
  }

  html[data-size="tablet"] .badges-btn img {
    width: 42px;
    height: 52px;
  }

  html[data-size="tablet"] .page-body {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  html[data-size="tablet"] .page-nav {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html[data-size="tablet"] .page-nav .pill {
    min-height: 42px;
    font-size: 17px;
  }

  html[data-size="tablet"] .page-foot {
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  html[data-size="tablet"] .page-foot .foot-btn {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html[data-size="tablet"] .page-foot .foot-disc {
    width: 34px;
    height: 34px;
  }

  html[data-size="tablet"] .qcard-face {
    min-height: 0;
    padding: 59px 22px;
  }

  html[data-size="tablet"] .qcard-face > p:not(.qcard-followup),
  html[data-size="tablet"] .qcard-followup {
    font-size: 19px;
  }

  html[data-size="tablet"] .opt {
    min-height: 44px;
  }
}

/* ---------- Myth vs Fact ---------- */

html[data-size="tablet"] .mintcard-myth {
  padding: 28px 32px 32px;
}

html[data-size="tablet"] .myth-lead {
  font-size: 20px;
}

html[data-size="tablet"] .myth-statement {
  padding: 18px 32px;
  border-radius: 30px;
  font-size: 19px;
}

html[data-size="tablet"] .paddles {
  gap: 48px;
}

html[data-size="tablet"] .paddle-art {
  width: 150px;
}

html[data-size="tablet"] .myth-result h2 {
  font-size: 26px;
}

html[data-size="tablet"] .myth-result p {
  font-size: 18px;
}

/* ---------- Earn A Badge ---------- */

html[data-size="tablet"] .mintcard-earn {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  column-gap: 28px;
  padding: 28px 32px;
}

html[data-size="tablet"] .earn-badge {
  grid-row: span 2;
  width: 120px;
  height: 146.4px;
}

/* Matches .earn-q below. */
html[data-size="tablet"] .earn-main h2 {
  font-size: 19px;
}

html[data-size="tablet"] .earn-q {
  font-size: 19px;
}

html[data-size="tablet"] .earn-choice {
  width: auto;
  min-width: 180px;
}

html[data-size="tablet"] .earn-foot {
  grid-column: 1 / -1;
  font-size: 16px;
}

/* ---------- Resource ---------- */

html[data-size="tablet"] .res-lead {
  font-size: 21px;
}

html[data-size="tablet"] .res-lead2 {
  font-size: 17px;
}

html[data-size="tablet"] .mintcard-res {
  padding: 24px 28px;
}

html[data-size="tablet"] .res-row {
  grid-template-columns: 52px 1fr;
  gap: 18px;
  font-size: 17px;
}

html[data-size="tablet"] .res-row img {
  width: 48px;
  height: 62px;
}

html[data-size="tablet"] .mintcard-finish {
  padding: 22px 26px;
}

html[data-size="tablet"] .finish-top {
  flex-direction: row;
  align-items: center;
}

html[data-size="tablet"] .finish-share {
  width: auto;
  padding: 8px 22px;
  font-size: 17px;
}

html[data-size="tablet"] .finish-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-size="tablet"] .finish-link {
  font-size: 16px;
}

html[data-size="tablet"] .mintcard-welcome {
  padding: 36px 40px;
}

html[data-size="tablet"] .welcome-text {
  font-size: 21px;
}

html[data-size="tablet"] .modal-complete h2 {
  font-size: 26px;
}

html[data-size="tablet"] .modal-complete p {
  font-size: 18px;
}

/* ---------- Warm-ups ---------- */

html[data-size="tablet"] .tree {
  zoom: min(1.3, calc((min(var(--vw, 820), 944) - 164) / 524));
}

html[data-size="tablet"] .tree-instruction,
html[data-size="tablet"] .tree-note {
  font-size: 17px;
}

html[data-size="tablet"] .board-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 14px;
  padding: 0 20px;
}

html[data-size="tablet"] .note-tray {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
}

html[data-size="tablet"] .board-slot,
html[data-size="tablet"] .note {
  height: 108px;
}

html[data-size="tablet"] .scan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

html[data-size="tablet"] .meter-title {
  font-size: 19px;
}

html[data-size="tablet"] .gauge {
  width: 190px;
}

html[data-size="tablet"] .habit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

html[data-size="tablet"] .habit,
html[data-size="tablet"] .habit:nth-child(n) {
  min-height: 80px;
  padding: 8px 12px;
  font-size: 16px;
}

/* ---------- Overlays: side drawer and centred sheets ---------- */

html[data-size="tablet"] .drawer {
  left: auto;
  width: min(460px, 100%);
  box-shadow: var(--shadow-panel);
  padding: 24px 28px calc(24px + env(safe-area-inset-bottom));
}

/* Rises from just above the footer toolbar that opened it. */
html[data-size="tablet"] .popover {
  top: auto;
  bottom: calc(96px + env(safe-area-inset-bottom));
  height: auto;
  max-height: calc(100% - 140px);
  left: 50%;
  right: auto;
  width: min(620px, calc(100% - 64px));
  transform: none;
  translate: -50% 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 24px 28px;
}

html[data-size="tablet"] .top-panel,
html[data-size="tablet"] .panel-remind {
  left: 50%;
  right: auto;
  top: 24px;
  width: min(620px, calc(100% - 64px));
  transform: none;
  translate: -50% 0;
}

@media (max-height: 760px) {
  html[data-size="tablet"] .popover {
    bottom: calc(64px + env(safe-area-inset-bottom));
    max-height: calc(100% - 96px);
  }
}