/* Home and the Today page: layout and the page's own pieces. Color and type come only from the
   kit's tokens (kit/tokens.css); tests/kit-lint.test.mjs fails on a raw color or font-size here.
   Every slot has the height of its longest content, so filling it moves nothing. */
.home-page,
.today-page {
  min-height: 60svh;
}
.home-main {
  max-width: var(--k-page-max);
  margin: 0 auto;
  padding: var(--k-space-6) var(--k-space-6) 56px;
}
.home-slot,
[data-slot] {
  display: block;
}
.home-grid {
  display: grid;
  gap: var(--k-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'hero hero hero hero hero hero hero hero times times times times'
    'hero hero hero hero hero hero hero hero cont cont cont cont'
    'dav dav dav dav shab shab shab shab count count count count'
    'books books books books books books books books books books books books'
    'short short short short short short short short short short short short';
}
.home-hero {
  grid-area: hero;
  padding: 26px 28px 22px;
}
.home-times-card {
  grid-area: times;
}
.home-cont {
  grid-area: cont;
}
.home-dav-card {
  grid-area: dav;
}
.home-shab {
  grid-area: shab;
}
.home-count {
  grid-area: count;
}
.home-books {
  grid-area: books;
}
.home-short {
  grid-area: short;
}

.k-np {
  transition: none;
}
.has-location .k-np {
  visibility: hidden;
}
html:not(.js) .home-hero [data-slot='hero-date'],
html:not(.js) .home-hero [data-slot='hero-what'],
html:not(.js) .home-prompt,
html:not(.js) .home-empty .k-btn,
html:not(.js) .home-hero [data-slot='hero-focal'] {
  display: none;
}

/* ---- Hero ---- */
.home-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--k-space-6);
  align-items: start;
}
.home-hebrew-date {
  display: block;
  text-align: left;
  height: 1.5em;
  font-size: var(--k-fs-display);
  line-height: var(--k-lh-prayer);
}
.home-english {
  min-height: calc(var(--k-fs-lg) * var(--k-lh-body));
  margin: var(--k-space-1) 0 0;
  font-size: var(--k-fs-lg);
  font-weight: var(--k-fw-semibold);
  line-height: var(--k-lh-body);
}
.home-hebrew-en {
  min-height: calc(var(--k-fs-sm) * var(--k-lh-body));
  margin: 0;
}
.home-where {
  min-height: calc(var(--k-fs-body) * 1.5);
  margin: var(--k-space-2) 0 0;
  font-size: var(--k-fs-body);
  line-height: 1.5;
  color: var(--k-on-primary-quiet);
}
.home-where span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.home-where .k-ic {
  width: 16px;
  height: 16px;
}
.home-what {
  min-height: calc(2 * var(--k-fs-body) * 1.5);
  max-width: 46ch;
  margin: 10px 0 0;
  font-size: var(--k-fs-body);
  line-height: 1.5;
  color: var(--k-on-primary-soft);
}
.home-focal {
  position: relative;
  height: 164px;
  padding: var(--k-space-4) 18px;
  border: var(--k-border-width) solid var(--k-on-primary-edge);
  border-radius: var(--k-radius-in);
  background: var(--k-on-primary-fill);
  overflow: hidden;
}
.home-flabel {
  display: block;
  font-size: var(--k-fs-sm);
  font-weight: var(--k-fw-semibold);
  line-height: var(--k-lh-snug);
  color: var(--k-lit);
}
.home-big {
  display: flex;
  align-items: flex-end;
  height: var(--k-fs-numeral);
  margin: 6px 0 0;
  font-size: var(--k-fs-numeral);
  font-weight: var(--k-fw-bold);
  line-height: var(--k-lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.home-big small {
  margin-left: var(--k-space-1);
  font-size: var(--k-fs-xl);
  font-weight: var(--k-fw-medium);
  letter-spacing: 0;
}
.home-big--words {
  font-size: var(--k-fs-6xl);
  letter-spacing: -0.01em;
}
.home-focal .k-i {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
}
.home-line {
  display: block;
  min-height: calc(2 * var(--k-fs-body) * var(--k-lh-body));
  margin-top: 6px;
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-body);
  color: var(--k-on-primary-soft);
}
.home-line b {
  font-weight: var(--k-fw-semibold);
  color: var(--k-on-primary);
}
[data-slot='hero-graphic'] {
  position: relative;
  margin-top: var(--k-space-3);
}
.home-ghost {
  position: relative;
}
.home-prompt {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: end center;
  justify-items: center;
  gap: 10px;
  padding-bottom: 6px;
  text-align: center;
}
.home-prompt p {
  margin: 0;
  max-width: 34ch;
  font-size: var(--k-fs-body);
  color: var(--k-on-primary-soft);
}
.home-prompt-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.home-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  min-height: var(--k-touch);
  margin-top: var(--k-space-3);
}
.home-hero-foot [data-slot] {
  flex: 1;
  text-align: right;
  font-size: var(--k-fs-sm);
  color: var(--k-on-primary-label);
}
.home-phone,
.k-hd .k-aside.home-phone {
  display: none;
}

/* ---- Times, Continue ---- */
.home-times-card [data-slot='times'] {
  flex: none;
  height: calc(4 * 40px);
}
.home-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-top: 6px;
}
.home-empty p {
  margin: 0;
}
.home-cont-row {
  display: flex;
  flex: none;
  height: 96px;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--k-space-4);
}
.home-cont-row > div {
  flex: 1;
  min-width: 0;
}
.home-cont-name {
  height: calc(var(--k-fs-2xl) * var(--k-lh-snug));
  margin: 0;
  font-size: var(--k-fs-2xl);
  font-weight: var(--k-fw-semibold);
  line-height: var(--k-lh-snug);
}
.home-cont-where {
  height: calc(var(--k-fs-row) * var(--k-lh-body));
  margin: 4px 0 0;
  font-size: var(--k-fs-row);
}
.home-cont-name,
.home-cont-where {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.home-cont-note {
  margin-top: 2px;
}
.home-cont-he {
  display: block;
  flex: none;
  width: 6em;
  height: 1.5em;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--k-font-prayer);
  font-size: var(--k-fs-5xl);
  line-height: var(--k-lh-prayer);
}
.home-cont .k-btn {
  min-width: 168px;
  justify-content: flex-start;
  align-self: flex-start;
  margin-top: var(--k-space-4);
}

/* ---- In davening today ---- */
.home-dav-card [data-slot='dav'] {
  flex: 1;
  height: calc(3 * 78px + 2 * 10px);
  flex: none;
}
.home-dav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-dav li {
  display: flex;
  flex: 1;
}
.home-dav .k-row {
  height: 78px;
  align-items: flex-start;
  padding-top: 12px;
  overflow: hidden;
}
.home-dav .k-row b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-dav .k-row .k-info {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-dav .k-go {
  margin-top: 10px;
}
.k-row--services {
  cursor: default;
}
.k-row--services:hover {
  outline: 0;
}
.k-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--k-space-3);
}
.k-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-touch);
  color: var(--k-link);
  font-size: var(--k-fs-body);
  font-weight: var(--k-fw-semibold);
}

/* ---- Shabbat, next holiday ---- */
.home-shab .k-aside--text {
  margin-block: 0;
  min-height: 28px;
  color: var(--k-on-primary-label);
  font-weight: var(--k-fw-regular);
}
.home-parsha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--k-touch);
  margin-bottom: var(--k-space-2);
}
.home-parsha .k-he {
  height: 1.5em;
  font-size: var(--k-fs-4xl);
  line-height: var(--k-lh-prayer);
}
.home-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  min-height: var(--k-touch);
  color: var(--k-on-primary);
  font-size: var(--k-fs-sm);
  font-weight: var(--k-fw-semibold);
}
.home-inline .k-ic {
  width: 16px;
  height: 16px;
}
.home-shab-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  border-top: var(--k-border-width) solid var(--k-on-primary-hair);
}
.home-shab-times > div {
  padding-top: 10px;
  min-height: 92px;
}
.home-shab-times > div + div {
  margin-left: var(--k-space-4);
  padding-left: var(--k-space-4);
  border-left: var(--k-border-width) solid var(--k-on-primary-hair);
}
.home-big--sm {
  height: auto;
  min-height: calc(var(--k-fs-3xl) * 1.15);
  margin-top: 2px;
  align-items: center;
  gap: var(--k-space-1);
  font-size: var(--k-fs-3xl);
  line-height: 1.15;
}
.home-big--sm.home-big--words {
  font-size: var(--k-fs-md);
  font-weight: var(--k-fw-semibold);
  line-height: var(--k-lh-body);
}
.home-big--sm .k-i {
  margin: -12px -4px;
}
.home-shab [data-slot='shab'],
.home-count [data-slot='count'] {
  min-height: 272px;
}
.home-count [data-slot='count'] {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.home-count .home-desk .k-he {
  display: block;
  height: 1.5em;
  font-size: var(--k-fs-6xl);
  line-height: var(--k-lh-prayer);
}
.home-count-name {
  color: inherit;
  text-decoration: none;
}
a.home-count-name {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-touch);
}
.home-when {
  min-height: calc(2 * var(--k-fs-sm) * var(--k-lh-body));
  margin: var(--k-space-2) 0 0;
}
.k-aside--he .k-he {
  font-size: var(--k-fs-xl);
  line-height: var(--k-lh-snug);
}

/* ---- Books ---- */
.home-shelf {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-shelf .siddur-cover {
  max-width: none;
  width: 100%;
}
.k-cover--more {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--k-space-2);
  border: 1.5px dashed var(--k-link);
  background: var(--k-surface-alt);
  box-shadow: none;
  color: var(--k-link);
  font-size: var(--k-fs-body);
  font-weight: var(--k-fw-semibold);
  line-height: var(--k-lh-body);
  text-align: center;
}
.k-cover--more .k-ic {
  width: 26px;
  height: 26px;
}
.home-customize {
  min-height: var(--k-touch);
  margin-top: var(--k-space-2);
  padding: 0;
  color: var(--k-link);
}

/* ---- Short prayers ---- */
.home-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--k-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Today page ---- */
.today-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--k-space-6) var(--k-space-5) 56px;
}
.today-head h1 {
  margin: 0 0 var(--k-space-2);
  font-size: var(--k-fs-md);
  font-weight: var(--k-fw-medium);
}
.today-head .home-hebrew-date {
  color: var(--k-text);
}
.today-head .home-where {
  color: var(--k-text-quiet);
}
.today-what {
  height: calc(3 * var(--k-fs-body) * 1.5);
  overflow: hidden;
  line-height: 1.5;
  margin: var(--k-space-2) 0 0;
  color: var(--k-text-quiet);
}
.today-nojs {
  display: none;
}
html:not(.js) .today-nojs {
  display: block;
}
html:not(.js) .today-times {
  display: none;
}
.home-label {
  margin: 0 0 var(--k-space-3);
  font-size: var(--k-fs-md);
  font-weight: var(--k-fw-semibold);
}
.today-week {
  margin-top: var(--k-space-8);
}
.today-days {
  margin: 0;
  padding: 0;
  list-style: none;
}
.today-day {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--k-space-4);
  align-items: center;
  min-height: 76px;
  padding: var(--k-space-3) 0;
  border-top: var(--k-border-width) solid var(--k-border);
}
.today-day.is-today b {
  color: var(--k-link);
}
.today-day-times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2) var(--k-space-6);
}
.today-day-times > span {
  min-width: 0;
}
.today-day-times time {
  display: block;
  font-weight: var(--k-fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- Tablet ---- */
@media (min-width: 701px) and (max-width: 1100px) {
  .home-grid {
    grid-template-areas:
      'hero hero hero hero hero hero hero hero hero hero hero hero'
      'times times times times cont cont cont cont count count count count'
      'dav dav dav dav dav dav shab shab shab shab shab shab'
      'books books books books books books books books books books books books'
      'short short short short short short short short short short short short';
  }
  .home-shelf {
    gap: var(--k-space-3);
  }
  .home-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-hero-top {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
}

/* ---- Phone: two columns, ordered by what a reader opens the app to do ---- */
@media (max-width: 700px) {
  .home-main {
    padding: 10px 10px 24px;
  }
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'hero hero' 'cont cont' 'times times' 'books books' 'dav dav' 'shab count' 'short short';
  }
  .home-hero {
    padding: 18px 16px 16px;
  }
  .home-hero-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--k-space-3);
  }
  .home-hebrew-date {
    font-size: var(--k-fs-5xl);
  }
  .home-hebrew-en {
    min-height: calc(2 * var(--k-fs-sm) * var(--k-lh-body));
  }
  .home-what,
  .home-hero-foot,
  .home-desk {
    display: none;
  }
  .home-phone,
  .k-hd .k-aside.home-phone {
    display: inline-flex;
  }
  .k-hd .k-aside.home-desk {
    display: none;
  }
  .home-where {
    margin-top: 2px;
  }
  .home-focal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: 84px;
    padding: var(--k-space-3) 14px;
  }
  .home-focal > .home-flabel {
    grid-column: 1;
    align-self: end;
  }
  .home-focal > .home-big {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    margin: 0;
    height: 48px;
    font-size: var(--k-fs-numeral-sm);
  }
  .home-focal > .home-big--words {
    font-size: var(--k-fs-2xl);
    text-align: right;
  }
  .home-focal > .home-line {
    grid-column: 1;
    height: calc(2 * var(--k-fs-sm) * var(--k-lh-body));
    min-height: 0;
    margin-top: 2px;
    align-self: start;
    font-size: var(--k-fs-sm);
    line-height: var(--k-lh-body);
  }
  .home-focal .k-i {
    top: 0;
    right: 0;
  }
  .k-dg--wide {
    display: none;
  }
  .k-dg--narrow {
    display: block;
  }
  [data-slot='hero-graphic'] {
    margin-top: 10px;
  }
  .k-card--art .k-hd .k-aside {
    margin-block: 0;
    min-height: 28px;
    color: var(--k-on-primary);
  }
  .home-cont {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding-block: 14px;
  }
  .home-cont .k-hd,
  .home-cont-note {
    display: none;
  }
  .home-cont-row {
    flex: 1;
    min-width: 0;
    height: auto;
  }
  .home-cont {
    height: 84px;
  }
  .home-cont-row > div {
    min-width: 0;
  }
  .home-cont-name {
    font-size: var(--k-fs-xl);
  }
  .home-cont .k-btn {
    margin-top: 0;
    flex: none;
  }
  .home-times-card [data-slot='times'] {
    height: 70px;
  }
  .k-times {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--k-space-2);
    height: auto;
  }
  .k-time {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    min-height: 0;
    padding: var(--k-space-2) 0 0;
    font-size: var(--k-fs-xs);
    line-height: var(--k-lh-snug);
    color: var(--k-text-quiet);
  }
  .k-time-at {
    gap: 0;
  }
  .k-time time {
    font-size: var(--k-fs-body);
    color: var(--k-text);
    white-space: nowrap;
  }
  .k-time .k-i {
    width: 32px;
    margin: -8px -4px -8px 0;
  }
  .home-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding-top: 0;
  }
  .home-shelf {
    display: flex;
    gap: var(--k-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--k-pad);
    margin: 0 calc(var(--k-pad) * -1);
    padding: 0 var(--k-pad) 4px;
    scrollbar-width: none;
  }
  .home-shelf li {
    flex: 0 0 116px;
    scroll-snap-align: start;
  }
  .k-cap .k-info {
    display: none;
  }
  .k-cap {
    padding-top: 6px;
    font-size: var(--k-fs-sm);
  }
  .home-dav-card [data-slot='dav'] {
    height: calc(3 * 74px + 2 * 8px);
  }
  .home-dav .k-row {
    height: 74px;
    padding-top: 8px;
  }
  .home-dav {
    gap: var(--k-space-2);
  }
  .k-row {
    padding: 6px var(--k-space-3);
  }
  .k-badge {
    width: 34px;
    height: 34px;
  }
  .home-shab,
  .home-count {
    padding: 14px var(--k-space-3);
  }
  .home-shab [data-slot='shab'],
  .home-count [data-slot='count'] {
    min-height: 284px;
  }
  .home-shab .k-hd,
  .home-count .k-hd {
    gap: 6px;
    margin-bottom: var(--k-space-2);
  }
  .home-shab .k-hd h2,
  .home-count .k-hd h2 {
    font-size: var(--k-fs-body);
    white-space: nowrap;
  }
  .home-shab .k-hd > .k-ic,
  .home-count .k-hd > .k-ic {
    width: 18px;
    height: 18px;
  }
  .k-week {
    gap: 1px;
    margin-bottom: 10px;
  }
  .k-week li {
    min-height: 46px;
    padding: var(--k-space-1) 0;
    font-size: var(--k-fs-2xs);
  }
  .k-week b {
    margin-top: 0;
    font-size: var(--k-fs-xs);
  }
  .k-week .k-d3 {
    display: none;
  }
  .k-week .k-d1 {
    display: block;
  }
  .k-week .k-ic {
    width: 12px;
    height: 12px;
    margin-top: 1px;
  }
  .home-shab-times {
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .home-shab-times > div {
    min-height: 62px;
    padding-top: 6px;
    border-top: var(--k-border-width) solid var(--k-on-primary-hair);
  }
  .home-shab-times > div + div {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .home-big--sm {
    font-size: var(--k-fs-2xl);
  }
  .k-count {
    font-size: var(--k-fs-numeral-md);
  }
  .home-count [data-slot='count'] .k-count {
    margin-top: auto;
  }
  .k-count small {
    font-size: var(--k-fs-sm);
  }
  .home-chips {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 calc(var(--k-pad) * -1);
    padding: 0 var(--k-pad) 4px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--k-pad);
  }
  .home-chips li {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
  .k-chip {
    min-height: 72px;
    padding: var(--k-space-2) 14px;
  }
  .home-short {
    padding-bottom: 14px;
  }
  .today-day {
    grid-template-columns: 1fr;
    gap: var(--k-space-2);
    min-height: 132px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .k-cover {
    transition: none;
  }
}

/* A reader who has chosen a cover does not see the default one drawn first: its place is held until the
   app has drawn the reader's own. */
html.has-profile:not([data-app='ready']) .shelf-book[data-book='siddur'] .siddur-cover {
  visibility: hidden;
}

/* Tonight (Friday, or the eve of Yom Tov): the Shabbat card is outlined in the accent. */
.home-shab:has(.home-shab-tonight) {
  outline: 2px solid var(--k-lit);
  outline-offset: -2px;
}