/* A welcoming illustrated directory rather than a uniform app grid. */
html body .home-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f2e5cc;
  background-image:
    radial-gradient(ellipse 76% 460px at 50% 180px, rgba(255,251,239,.96), transparent 100%),
    radial-gradient(circle at 12% 25%, rgba(160,119,74,.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 79% 67%, rgba(160,119,74,.09) 0 1px, transparent 1.7px),
    linear-gradient(180deg, #f8efdc, #f0dfc2);
  background-size: auto, 23px 27px, 31px 37px, auto;
}
.home-shell::before,
.home-shell::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 230px;
  height: 230px;
  background: url('../assets/fox-cottage-cutout-v2.webp') center / contain no-repeat;
  opacity: .075;
}
.home-shell::before { left: -115px; top: 490px; transform: rotate(-18deg); }
.home-shell::after { right: -110px; bottom: 300px; background-image: url('../icons/nav/chat-cutout-v2.webp'); transform: rotate(15deg); }
.home-directory-head {
  width: min(100% - 36px, 1100px);
  margin: 4px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 46px);
  text-align: center;
  color: var(--color-renaissance-gold);
}
.home-directory-head::before,
.home-directory-head::after { content: ''; width: min(11vw, 90px); height: 1px; background: var(--border-strong); }
.home-directory-head > span { font-size: 14px; }
.home-directory-head p { color: var(--color-terracotta-dark); font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.home-directory-head h2 { margin-top: 2px; font: 500 clamp(1.5rem, 3vw, 2rem)/1.2 var(--font-display); color: var(--text-primary); }
html body .home-grid {
  max-width: 1100px;
  gap: clamp(12px, 1.8vw, 20px);
  grid-auto-rows: minmax(150px, auto);
  padding-bottom: clamp(28px, 4vw, 56px);
}
html body .home-tile {
  background: color-mix(in srgb, var(--surface-0) 90%, #e6d9bc);
  border: 1px solid #d8c6a8;
  border-radius: 24px;
  box-shadow: 0 8px 22px rgba(105,73,42,.08), inset 0 0 0 5px rgba(255,255,255,.38);
}
html body .home-tile::before {
  content: '❧';
  position: absolute;
  top: 10px;
  left: 15px;
  color: var(--tile-accent);
  opacity: .22;
  font: 18px/1 var(--font-display);
  pointer-events: none;
}
html body .home-tile:nth-child(4n + 2) { background: color-mix(in srgb, var(--surface-0) 88%, #e9eddc); }
html body .home-tile:nth-child(4n + 3) { background: color-mix(in srgb, var(--surface-0) 88%, #f4e2db); }
html body .home-tile:nth-child(4n + 4) { background: color-mix(in srgb, var(--surface-0) 90%, #e6e8e6); }
html body .home-tile:hover,
html body .home-tile:focus-visible { box-shadow: 0 13px 26px rgba(105,73,42,.16), inset 0 0 0 5px rgba(255,255,255,.42); }
html body .home-tile::after { bottom: 13px; width: 24px; opacity: .38; }
html body .home-tile-icon { height: 72px; }
html body .home-tile-icon img { width: 74px; height: 74px; }
html body .home-tile-chat {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: stretch;
  gap: 0 15px;
  min-height: 150px;
  padding: 20px clamp(20px, 4vw, 35px);
  text-align: left;
  background: linear-gradient(120deg, #f4dccb, #fff7e9);
  border-color: #d9b9a0;
}
html body .home-tile-chat .home-tile-icon { grid-row: 1 / 3; height: 100px; margin: 0; }
html body .home-tile-chat .home-tile-icon img { width: 96px; height: 96px; }
html body .home-tile-chat .home-tile-label { align-self: end; font-size: clamp(1.65rem, 3vw, 2rem); }
html body .home-tile-chat .home-tile-desc { align-self: start; margin-top: 5px; font-size: .85rem; }
html body .home-tile-chat::after { left: 135px; right: auto; bottom: 20px; }
html body .home-tile-calendar .home-tile-label { font-family: var(--font-display); }

[data-theme="dark"] body .home-shell {
  background-color: #25211d;
  background-image:
    radial-gradient(ellipse 74% 510px at 50% 215px, rgba(128,84,49,.29), transparent 100%),
    radial-gradient(circle at 12% 25%, rgba(220,171,96,.13) 0 1px, transparent 1.7px),
    radial-gradient(circle at 79% 67%, rgba(220,171,96,.09) 0 1px, transparent 1.7px),
    linear-gradient(180deg, #33291f, #23201d);
}
[data-theme="dark"] body .home-shell::before,
[data-theme="dark"] body .home-shell::after { opacity: .085; filter: brightness(1.2) sepia(.5); }
[data-theme="dark"] body .home-directory-head p { color: #dea676; }
[data-theme="dark"] body .home-tile,
[data-theme="dark"] body .home-tile:nth-child(n) {
  background: #39332b;
  border-color: #655241;
  box-shadow: 0 9px 24px rgba(0,0,0,.24), inset 0 0 0 5px rgba(255,241,209,.025);
}
[data-theme="dark"] body .home-tile.home-tile-chat {
  background: linear-gradient(120deg, #593b32, #44372d);
  border-color: #8b6345;
}
[data-theme="dark"] body .home-tile:hover { border-color: #b38a5b; }

@media (min-width: 768px) {
  html body .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body .home-tile-chat { grid-column: span 2; }
}
@media (max-width: 480px) {
  .home-directory-head { margin-top: 0; gap: 10px; }
  .home-directory-head::before,
  .home-directory-head::after { width: 17px; }
  .home-directory-head > span { font-size: 10px; }
  html body .home-tile { min-height: 140px; }
  html body .home-tile-chat { min-height: 132px; grid-template-columns: 80px 1fr; padding: 16px 20px; }
  html body .home-tile-chat .home-tile-icon { height: 80px; }
  html body .home-tile-chat .home-tile-icon img { width: 80px; height: 80px; }
  html body .home-tile-chat::after { left: 115px; }
}