/* Living Window home (site/index.html with <html data-page="home">, unless <html data-design="classic">): five leaded panes as an arch over the painting.
   The panes are the .lw-pane component of living.css (opaque leaded art with a scrim under the label, no glass on glass); this file
   only places them. Desktop: an arch of tall panes (the middle one tallest) above a slim dock with the search and the tool icons.
   Phone and portrait: the painting first with the bottom row of the navigation; the pane stack, search and tools scroll in under it.
   data-design="classic" (the stored choice or the site switch in header.js) brings the old landing back (its CSS stays in index.html). */
html:not([data-design="classic"])[data-page="home"] .fold-toggle,
html:not([data-design="classic"])[data-page="home"] .menu-crest { display: none; }
/* The arch (desktop) and the stack (phone) are the navigation here: the navigation row of the other pages stays away at every width */
html:not([data-design="classic"])[data-page="home"] .lw-nav { display: none !important; }

/* The arch: light through glass. Night glows with the moon, day with the sun; the colours are the scene's own tokens. */
.lw-arch { --lw-glow: color-mix(in srgb, var(--water, #6be6d2) 46%, transparent); position: fixed; z-index: 20; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: var(--space-3, 12px); }
html[data-time="day"] .lw-arch { --lw-glow: color-mix(in srgb, var(--light, #ffe7a3) 70%, transparent); }
.lw-arch .lw-pane { flex-direction: column; justify-content: flex-end; text-align: center; padding: var(--space-3, 12px) var(--space-2, 8px) var(--space-4, 16px); font: 600 var(--text-16, 16px)/1.1 var(--font-ui, var(--font-body)); transition: box-shadow var(--spring-time-smooth, 300ms) var(--spring-smooth, ease); box-shadow: inset 0 0 0 1.5px rgb(14 8 26 / .72), inset 0 0 0 2.5px rgb(255 255 255 / .18), 0 0 30px var(--lw-glow), 0 6px 18px rgb(0 0 0 / .32); }
.lw-arch .lw-pane::before { background: linear-gradient(180deg, rgb(12 8 28 / .08) 20%, rgb(12 8 28 / .8) 100%); }
.lw-arch .lw-pane-art { filter: saturate(1.2) brightness(.95); }
.lw-arch .lw-pane:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1.5px rgb(14 8 26 / .72), inset 0 0 0 2.5px rgb(255 255 255 / .3), 0 0 46px var(--lw-glow), 0 8px 22px rgb(0 0 0 / .36); }
.lw-arch .lw-pane:focus-visible { box-shadow: var(--focus-ring), 0 0 46px var(--lw-glow); }
.lw-arch .lw-pane-icon { display: none; }
.lw-arch .lw-pane-icon svg { width: 36px; height: 36px; }
.lw-arch .lw-pane-name { white-space: normal; overflow-wrap: anywhere; }

/* Desktop and landscape: arch above the slim dock */
@media (min-width: 861px) and (min-aspect-ratio: 5/4) {
  .lw-arch { --arch-h: clamp(110px, 22vh, 220px); --arch-w: clamp(120px, 11.5vw, 156px); left: 50%; bottom: calc(var(--dock-h, 98px) + 8px + var(--safe-bottom, 0px)); transform: translateX(-50%); }
  .lw-arch .lw-pane { width: var(--arch-w); height: calc(var(--arch-h) * .68); border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 16px 16px; }
  .lw-arch .lw-pane:is(:nth-child(2), :nth-child(4)) { height: calc(var(--arch-h) * .84); }
  .lw-arch .lw-pane:nth-child(3) { height: var(--arch-h); }
  /* The dock: search and tool icons in one row, the legal links under it. About a tenth of the screen. */
  html:not([data-design="classic"])[data-page="home"] .landing-menu { bottom: calc(12px + var(--safe-bottom, 0px)); width: min(1180px, calc(100vw - 48px)); }
  html:not([data-design="classic"])[data-page="home"] .menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px 6px; border-radius: var(--radius-card); --glass-radius: var(--radius-card); }
  html:not([data-design="classic"])[data-page="home"] .menu::after { background: none; }
  html:not([data-design="classic"])[data-page="home"] .menu-search { flex: 1 1 260px; min-width: 0; width: auto; height: 44px; margin: 0; }
  /* .shelves is a size container (it counts as zero wide when sized by its content), so the tool row gets an explicit basis */
  html:not([data-design="classic"])[data-page="home"] #landing-tools { flex: 0 1 820px; min-width: 0; }
  html:not([data-design="classic"])[data-page="home"] #landing-results { flex: 1 0 100%; order: 3; max-height: 40vh; overflow-y: auto; margin: 0; }
  html:not([data-design="classic"])[data-page="home"] .landing-menu.folded .tool { width: 48px; height: 48px; }
  html:not([data-design="classic"])[data-page="home"] .menu-foot { flex: 1 0 100%; order: 4; padding: 0 4px; }
}

/* Phone, tablet portrait, small windows: the painting first, the stack scrolls in under it */
@media (max-width: 860px), (max-aspect-ratio: 5/4) {
  html:not([data-design="classic"])[data-page="home"] body { padding-bottom: calc(24px + var(--safe-bottom, 0px)); }
  /* L3: the painting fills the top 60%, a swipeable carousel of the five panes sits in the thumb zone under it; search and tools scroll in below */
  .lw-arch { --card-w: calc((100vw - 40px) / 2 - 20px); position: relative; z-index: 11; display: flex; gap: var(--space-3, 12px); margin: 60svh 0 0; padding: 4px 14px 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lw-arch::-webkit-scrollbar { display: none; }
  .lw-arch .lw-pane { flex: 0 0 var(--card-w); width: var(--card-w); aspect-ratio: 3 / 4; min-height: 0; scroll-snap-align: start; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-2, 8px) var(--space-4, 16px); border-radius: calc(var(--card-w) / 2) calc(var(--card-w) / 2) 16px 16px; text-align: center; font-size: var(--text-16, 16px); }
  .lw-arch .lw-pane::before { background: linear-gradient(180deg, rgb(12 8 28 / .06) 38%, rgb(12 8 28 / .82) 100%); }
  .lw-arch .lw-pane-icon { margin-bottom: auto; }
  .lw-arch .lw-pane.is-lit { box-shadow: inset 0 0 0 1.5px rgb(14 8 26 / .72), inset 0 0 0 2.5px rgb(255 255 255 / .3), 0 0 38px var(--lw-glow), 0 8px 22px rgb(0 0 0 / .36); }
  html:not([data-design="classic"])[data-page="home"] .landing-menu { position: relative; z-index: 11; bottom: auto; left: auto; right: auto; max-height: none; margin: var(--space-4, 16px) 14px 0; display: block; }
  html:not([data-design="classic"])[data-page="home"] .landing-menu .menu { min-height: 0; padding: 16px 12px calc(12px + var(--safe-bottom, 0px)); border-radius: var(--radius-card); --glass-radius: var(--radius-card); }
  html:not([data-design="classic"])[data-page="home"] .landing-menu .menu::after { background: none; }
  html:not([data-design="classic"])[data-page="home"] .landing-menu .menu-search { width: 100%; }
  html:not([data-design="classic"])[data-page="home"] .landing-menu #landing-tools { margin-top: var(--space-3, 12px); }
  html:not([data-design="classic"])[data-page="home"] .landing-menu.folded .shelves:not([hidden]), html:not([data-design="classic"])[data-page="home"] .landing-menu.folded #visitor-actions:not([hidden]) { overflow: visible; padding: 0; mask-image: none; -webkit-mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .lw-arch .lw-pane { transition: none; } }

/* Day: the dock glass over the light floor is bright, so the search text and icon turn dark (4.5:1) */
html:not([data-design="classic"])[data-page="home"][data-time="day"] .menu-search { color: rgb(28 20 38 / .86); }
html:not([data-design="classic"])[data-page="home"][data-time="day"] .menu-search > svg { color: rgb(28 20 38 / .9); }
html:not([data-design="classic"])[data-page="home"][data-time="day"] .menu-search input { color: rgb(28 20 38); }
html:not([data-design="classic"])[data-page="home"][data-time="day"] .menu-search input::placeholder { color: rgb(28 20 38 / .78); }
html:not([data-design="classic"])[data-page="home"][data-time="day"] .menu-search kbd { color: rgb(28 20 38 / .8); }

/* Sign-in, sign-up and demo keep their words on the home (the folded icon row would leave unlabelled icons) */
html:not([data-design="classic"])[data-page="home"] .landing-menu.folded #visitor-actions .tool { width: auto; height: 48px; padding: 0 18px 0 6px; gap: 10px; border-radius: 999px; display: inline-flex; flex-direction: row; align-items: center; text-align: left; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
html:not([data-design="classic"])[data-page="home"] .landing-menu.folded #visitor-actions .tool-icon { width: 36px; height: 36px; }
html:not([data-design="classic"])[data-page="home"] .landing-menu.folded #visitor-actions .tool-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; font: 600 var(--text-16, 16px)/1 var(--font-ui, var(--font-body)); color: var(--ui-text); }
html:not([data-design="classic"])[data-page="home"][data-time="day"] .landing-menu.folded #visitor-actions .tool-text { color: rgb(28 20 38); }
html:not([data-design="classic"])[data-page="home"]:not([data-time="day"]) .landing-menu.folded #visitor-actions .tool { background: rgb(12 8 28 / .8); }
html:not([data-design="classic"])[data-page="home"]:not([data-time="day"]) .landing-menu.folded #visitor-actions .tool-text { color: #fff; }
html:not([data-design="classic"])[data-page="home"] .landing-menu.folded #visitor-actions .tool-text strong { font: 600 var(--text-16, 16px)/1 var(--font-ui, var(--font-body)); letter-spacing: 0; text-transform: none; color: inherit; text-shadow: none; }

/* A shelf whose tools are all hidden (a non-admin sees neither the Scriptorium nor the Study once their other tools are panes) draws no caption over nothing */
html:not([data-design="classic"]) .landing-menu .shelf:not(:has(> .tools > li:not([hidden]))) { display: none; }

/* Page-design slice 7: the simple home (html[data-simple], not classic). Panes and the search only: no tool shelves, no sign-up tiles,
   no fold crest, no More drawer (home.js removes them from the page; the rules here hide them before it runs). Signed out, one line
   under the search (demo and Create account); then one footer line (legal links, What is new, How it connects, socials). */
.home-visitor, .home-foot { display: none; }
html[data-simple]:not([data-design="classic"])[data-page="home"] :is(#landing-tools, .menu-foot, .menu-crest, .fold-toggle) { display: none !important; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 12px; padding: 4px 4px 0; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-visitor:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; margin: 8px 0 0; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-visitor form { display: contents; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 999px; background: none; box-shadow: none; cursor: pointer;
  font: 600 var(--text-16, 16px)/1.2 var(--font-ui, var(--font-body)); letter-spacing: 0; text-transform: none; color: var(--ui-text); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .45); text-underline-offset: 3px; white-space: normal; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-link:hover { text-decoration-color: currentColor; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-dot { color: var(--ui-text-soft); }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-links { margin: 0; text-align: center; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-links a { white-space: nowrap; }
/* When the line wraps, the rows are 30px apart and each link's touch layer is 43px tall: it never reaches under the next row's links */
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-links { line-height: 30px; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-links a::after { inset: -13px -3px; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-foot .socials { margin: 0; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .home-foot .social { width: 44px; height: 44px; }
html[data-simple]:not([data-design="classic"])[data-page="home"][data-time="day"] :is(.home-link, .home-links, .home-links a, .home-dot) { color: rgb(28 20 38); text-decoration-color: rgb(28 20 38 / .45); }
html[data-simple]:not([data-design="classic"])[data-page="home"][data-time="day"] .home-foot .social { color: rgb(28 20 38); }
/* Desktop: a slim centred card with the search, the line and the footer (no tool row beside the search any more) */
@media (min-width: 861px) and (min-aspect-ratio: 5/4) {
  html[data-simple]:not([data-design="classic"])[data-page="home"] .landing-menu { width: min(720px, calc(100vw - 48px)); }
  html[data-simple]:not([data-design="classic"])[data-page="home"] .menu { display: block; padding: 12px 16px 8px; }
  html[data-simple]:not([data-design="classic"])[data-page="home"] .menu-search { width: 100%; }
  html[data-simple]:not([data-design="classic"])[data-page="home"] #landing-results { margin: 6px 0 0; }
}
/* Phones on their side: the four panes fit in one row under the painting instead of two giant cards */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1000px) {
  html[data-simple]:not([data-design="classic"])[data-page="home"] .lw-arch { --card-w: 132px; margin-top: 44svh; justify-content: center; }
  html[data-simple]:not([data-design="classic"])[data-page="home"] .landing-menu { max-width: 640px; margin-inline: auto; }
}
/* At night the glass over the lit floor is pale: the line and the footer sit on a dark veil so white text keeps 4.5:1 (no glass on glass) */
html[data-simple]:not([data-design="classic"])[data-page="home"]:not([data-time="day"]) :is(.home-visitor:not([hidden]), .home-links) { width: fit-content; max-width: 100%; margin-inline: auto; padding: 0 12px; border-radius: 22px; background: rgb(12 8 28 / .72); }
html[data-simple]:not([data-design="classic"])[data-page="home"]:not([data-time="day"]) .home-links { padding: 6px 14px; }
html[data-simple]:not([data-design="classic"])[data-page="home"]:not([data-time="day"]) :is(.home-link, .home-links a) { color: #fff; }
html[data-simple]:not([data-design="classic"])[data-page="home"] .landing-menu .menu-search { height: 46px; }