/* Touch layout for phone and tablet.
   Press feedback and page motion use transform and opacity only.
   Loaded after app.css, hz.css and glass.css. */

:root {
  --page-margin: 16px;
  --page-gutter: 16px;
  --press: 0.96;
  --press-ms: 80ms;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --page-margin: 24px; }
}

@media (min-width: 1024px) {
  :root { --page-margin: 32px; --page-gutter: 24px; }
}

html,
body {
  min-height: 100dvh;
}

body {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

main {
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

#app h2,
#app > .herow h2,
html[data-device="tablet"] #app h2 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 8px 0 16px;
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}

#app h3,
.card h3 {
  font-size: 20px;
  line-height: 1.3;
}

.note,
.card p,
.warn,
.sub-t,
.pill,
.meta,
th,
.tabs a,
.tabs .tab-more {
  font-size: 12px;
}

.note,
.card p,
.warn {
  max-width: 42em;
  font-size: 14px;
  line-height: 1.5;
}

.btn {
  min-height: 44px;
  font-size: 16px;
}

.icon-btn,
.tabs a,
.tabs .tab-more,
.seg span,
.seg.mini button,
.chip,
.qchip,
.nchip,
.more-list button {
  min-height: 44px;
  min-width: 44px;
}

.tabs {
  gap: 4px;
}

.seg,
.more-list,
.row,
.cats,
.keypad {
  gap: 8px;
}

input,
textarea,
select {
  font-size: 16px;
}

.logo-img {
  aspect-ratio: 1;
}

.chart-box {
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 220px;
  max-height: 420px;
}

.grid {
  gap: var(--page-gutter);
}

@media (max-width: 767.98px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  html[data-device="tablet"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-device="tablet"] main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  html[data-device="tablet"] main {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Opaque enough that type stays readable when the page behind the glass is busy. */
.top,
.tabs,
dialog,
.toast,
.undo,
.install-pill {
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, white 64%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 78%, transparent),
    0 12px 32px color-mix(in srgb, var(--ink) 12%, transparent);
}

:root[data-theme="dark"] {
  --bg: #121212;
  --bg2: #1a1a1a;
  --card: #1e1e1e;
  --hdr: rgba(18, 18, 18, 0.82);
  --ink: #f4f1ec;
  --mut: #c9c2b8;
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(30, 30, 30, 0.9);
  --glass-b: rgba(255, 255, 255, 0.2);
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --bg2: #1a1a1a;
    --card: #1e1e1e;
    --hdr: rgba(18, 18, 18, 0.82);
    --ink: #f4f1ec;
    --mut: #c9c2b8;
    --line: rgba(255, 255, 255, 0.14);
    --glass: rgba(30, 30, 30, 0.9);
    --glass-b: rgba(255, 255, 255, 0.2);
    --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
}

/* Instant press. The scale is on the compositor; color filters are not animated. */
.btn:active,
.icon-btn:active,
.fab:active,
.key:active,
.cat:active,
.tabs a:active,
.tabs .tab-more:active,
.seg span:active,
.seg.mini button:active,
.chip:active,
.qchip:active,
.nchip:active,
.more-list button:active,
.entry button:active,
.pressed,
.tabs a.pressed,
.key.pressed,
.rwrap.pressed {
  transform: scale(var(--press)) !important;
  filter: none !important;
  transition: transform var(--press-ms) linear !important;
}

button,
.btn,
.icon-btn,
.tabs a,
.cat,
.key,
.fab,
.seg span {
  touch-action: manipulation;
}

html[data-hz="high"] .btn,
html[data-hz="high"] .icon-btn,
html[data-hz="high"] .fab,
html[data-hz="high"] .key,
html[data-hz="high"] .cat,
html[data-hz="high"] .tabs a,
html[data-hz="high"] .card,
html[data-hz="high"] .kpi,
html[data-hz="high"] #app > * {
  transition-property: transform, opacity;
}

@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn:hover:not([disabled]),
  .icon-btn:hover,
  .tabs a:hover {
    filter: none;
  }
}

.scroll,
.qcats,
.nchips,
[data-testid="ed-chips"] {
  overscroll-behavior-x: contain;
  scroll-padding-inline: 20px;
}

/* Tablet: keep the rail, drop the links into the thumb band. */
html[data-device="tablet"] .tabs > a:first-of-type {
  margin-top: auto;
}

html[data-device="tablet"] .tabs > a:last-of-type {
  margin-bottom: auto;
}

html[data-device="tablet"] .tabs a,
html[data-device="tablet"] .tabs .tab-more {
  min-height: 44px;
}

@media (min-width: 1024px) {
  html[data-device="tablet"] body[data-ready="overview"] #app,
  html[data-device="tablet"] body[data-ready="analysis"] #app,
  html[data-device="tablet"] body[data-ready="month"] #app,
  html[data-device="tablet"] body[data-ready="invest"] #app,
  html[data-device="tablet"] body[data-ready="goals"] #app {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  html[data-device="tablet"] #app > :where(h2, .herow, .monthbar, .grid, .note, .row, .warn, .banner, p) {
    grid-column: 1 / -1;
  }

  html[data-device="tablet"] body[data-ready="record"] #app {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    column-gap: 24px;
    align-items: start;
  }

  html[data-device="tablet"] body[data-ready="record"] #app > .qe {
    grid-column: 1;
    grid-row: 5 / span 2;
  }

  html[data-device="tablet"] body[data-ready="record"] #app > .row {
    grid-column: 2;
    grid-row: 5;
  }

  html[data-device="tablet"] body[data-ready="record"] #app > [data-testid="rlist"] {
    grid-column: 2;
    grid-row: 6;
  }

  html[data-device="tablet"] body[data-ready="data"] main {
    max-width: 760px;
  }
}

.sk {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.sk i,
.chart-box.sk::before {
  content: "";
  display: block;
  height: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mut) 28%, transparent);
  overflow: hidden;
  position: relative;
}

.sk i::after,
.chart-box.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, white 55%, transparent), transparent);
  transform: translateX(-100%);
  animation: sk-slide 1.1s ease-in-out infinite;
}

.chart-box.sk::before,
.chart-box.sk::after {
  height: 100%;
  border-radius: inherit;
}

@keyframes sk-slide {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .sk i::after,
  .chart-box.sk::after {
    animation: none;
  }

  .btn:active,
  .pressed,
  .tabs a.pressed,
  .key.pressed {
    transform: none !important;
    transition: none !important;
  }
}