/* Tap mother's compact ledgers. Existing art windows keep their proportions;
   only layout and type spacing change. The complete forecast stays present. */
#app .game-shell[data-page="tap"] .mother-tap {
  --scene-height: clamp(184px,56.8cqw,230px);
  gap: 6px;
}
/* Scale the complete timber title with this scene, including its end caps.
   A fixed 83px title overlapped the companion silhouettes on narrow screens. */
#app .game-shell[data-page="tap"] .mother-tap-scene .mother-scene-heading {
  top: 1.234568cqw; left: 1.234568cqw;
  padding: .740741cqw 1.234568cqw;
  border-width: 1.481481cqw 1.975309cqw;
}
#app .game-shell[data-page="tap"] .mother-tap-scene .mother-scene-heading h1 {
  font-size: 4.444444cqw; letter-spacing: .246914cqw;
}
#app .game-shell[data-page="tap"] .mother-tap-scene .mother-scene-heading p {
  font-size: 1.975309cqw;
}
#app .game-shell[data-page="tap"] button.mother-tap-button.illustrated-button[data-button-skin="tap"] {
  --tap-skin-height: 52px; height: 52px; min-height: 52px; width: min(66cqw,252px); font-size: 20px;
  padding: 5px calc(52px * 221 / 504) 5px calc(52px * 544 / 504) !important;
}
#app .game-shell[data-page="tap"] button[data-button-skin="tap"] > .illustrated-button-skin { height: 52px; }
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.tap-recipe-ledger) {
  margin-inline: 7px; padding: 10px !important;
}
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.tap-recipe-ledger) > .paper-frame-skin { --paper-frame-scale: .07; }
#app .game-shell[data-page="tap"] .mother-tap-info {
  grid-template-columns: 88px minmax(0,1fr); gap: 4px 7px; align-items: stretch;
}
#app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1 / 3; justify-content: center; gap: 2px; }
#app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 88px; height: 88px; }
#app .game-shell[data-page="tap"] .mother-tap-level { min-height: 20px; padding: 1px 4px; font-size: 11px; line-height: 16px; }
#app .game-shell[data-page="tap"] :is(.mother-tap-metrics,.mother-combo) { padding: 4px 6px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics {
  grid-column: 2; grid-row: 1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px;
}
#app .game-shell[data-page="tap"] .mother-tap-metrics > div { grid-template-columns: auto minmax(0,1fr); gap: 0 3px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { border-top: 0; border-left: 1px solid #ccb180; padding: 0 0 0 4px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span { font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span :is(img,.resource-icon) { width: 15px; height: 17px; flex-basis: 15px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 19px; line-height: 23px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics small { min-width: 0; font-size: 9px; line-height: 12px; }
#app .game-shell[data-page="tap"] .mother-combo { grid-column: 2; grid-row: 2; }
#app .game-shell[data-page="tap"] .mother-combo-heading { gap: 3px; }
#app .game-shell[data-page="tap"] .mother-combo-heading > img { width: 15px; height: 17px; }
#app .game-shell[data-page="tap"] .mother-combo-heading b { font-size: 12px; line-height: 17px; }
#app .game-shell[data-page="tap"] .mother-combo-heading [data-burst] { font-size: 9px; line-height: 13px; padding: 0 2px; }
#app .game-shell[data-page="tap"] .mother-combo-segments { height: 13px; min-height: 13px; margin: 3px 0; gap: 2px; }
#app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 13px; min-height: 13px; }
#app .game-shell[data-page="tap"] .mother-combo p { font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="tap"] .mother-combo p strong { font-size: 11px; }
#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { grid-row: 3; padding-top: 3px; }
#app .game-shell[data-page="tap"] .mother-tap-note p { font-size: 10px; line-height: 14px; gap: 3px; }
#app .game-shell[data-page="tap"] .mother-tap-note p :is(img,.resource-icon) { width: 12px; height: 13px; flex-basis: 12px; }

#app .game-shell[data-page="tap"] .tap-recipe-ledger {
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 6px 8px;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-upgrade { border-top: 0; border-left: 1px solid #c5a264; padding: 0 0 0 8px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger h2 { font-size: 14px; line-height: 19px; margin: 0 0 4px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger h2 > span { white-space: nowrap; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger h3 { font-size: 10px; line-height: 14px; margin: 0 0 2px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-columns { grid-template-columns: minmax(0,1fr); gap: 4px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-columns > div,
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-upgrade > :is(.resource-list,.mother-upgrade-stats) { padding: 3px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-value {
  display: grid; grid-template-columns: 15px minmax(0,1fr); grid-template-rows: 14px 16px; gap: 0 2px;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-value > span { display: contents; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-value b { grid-column: 1 / -1; grid-row: 2; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-icon { grid-column: 1; grid-row: 1; width: 12px; height: 14px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-upgrade-cost { position: relative; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-upgrade-cost > .sufficient { position: absolute; top: 3px; right: 3px; margin: 0; font-size: 9px; line-height: 14px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .resource-value { min-width: 0; gap: 2px; font-size: 10px; line-height: 13px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .resource-value > span { min-width: 0; font-size: 10px; line-height: 13px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .resource-value b { display: block; font-size: 12px; line-height: 16px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .resource-icon { width: 15px; height: 20px; max-height: none; flex: 0 0 15px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: baseline; gap: 0 3px; margin: 0;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > span { grid-column: 1; grid-row: 1; font-size: 10px; line-height: 18px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > b { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 18px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > small { grid-column: 3; grid-row: 1; font-size: 9px; line-height: 18px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row + .stat-row { margin-top: 0; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.sufficient,.deficit,.muted,.mother-payment,.mother-next-shortfall) { font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-payment > span,.mother-next-shortfall > span) { font-size: 10px; line-height: 14px; margin-bottom: 2px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-current-upgrade > .mother-payment,
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-shortfall { margin-top: 4px; padding-top: 4px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-payment > .resource-list { display: flex; flex-wrap: wrap; gap: 1px 5px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-payment .resource-icon { display: none; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-payment .resource-value b { display: inline; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-shortfall .material-term { font-size: 10px; line-height: 14px; margin-right: 3px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger > .tap-workshop-upgrade-action.illustrated-button[data-button-skin="tapUpgrade"] {
  --upgrade-skin-height: 52px; --upgrade-left: calc(52px * 644 / 400); --upgrade-right: calc(52px * 185 / 400);
  grid-column: 1 / -1; justify-self: center; position: relative; isolation: isolate;
  width: min(100%,260px); height: 52px; min-height: 52px; margin: 0;
  padding: 5px var(--upgrade-right) 5px var(--upgrade-left) !important;
  border: 0 !important; border-image: none !important; background: none !important;
  box-shadow: none; color: #fff7d0; text-shadow: 0 2px #31441c; font-size: 18px;
}
#app .game-shell[data-page="tap"] .tap-workshop-upgrade-action[data-button-skin="tapUpgrade"] > .illustrated-button-skin { height: 52px; top: 50%; bottom: auto; transform: translateY(-50%); }
@container (max-width: 350px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 70px minmax(0,1fr); gap: 4px; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 70px; height: 84px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics { padding-inline: 4px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics > div { grid-template-columns: minmax(0,1fr); }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { grid-row: 2; font-size: 18px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics small { grid-row: 3; font-size: 9px; }
  #app .game-shell[data-page="tap"] .mother-combo { padding-inline: 4px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading { flex-wrap: wrap; gap: 0 3px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading [data-burst] { margin-left: auto; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger { gap: 6px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-upgrade { padding-left: 6px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger h2 { font-size: 12px; line-height: 17px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) { grid-template-columns: minmax(0,1fr); gap: 1px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-value { display: flex; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-value > span { display: block; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) .resource-icon { width: 15px; height: 20px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .resource-value b { display: inline; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row { grid-template-columns: minmax(0,1fr) auto; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > span { grid-column: 1; grid-row: 1; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > b { grid-column: 2; grid-row: 1; font-size: 12px; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .stat-row > small { grid-column: 1 / -1; grid-row: 2; line-height: 12px; }
}