/* Shared theme selector and responsive layout. Color tokens live in studio.css. */

html[data-ui-theme="paper"] { color-scheme: light; }

/* Structural rules used by the shared home-page markup. They stay available
   when paper.css is disabled for the original green appearance. */
.paper-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.home-fw-tools { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.home-fw-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--paper); }
.home-fw-search input { min-width: 0; width: 165px; padding: 9px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.home-fw-search svg { width: 16px; height: 16px; }
.home-fw-more { display: inline-flex; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; font-weight: 700; }
.home-fw-more[hidden] { display: none; }
.home-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-bottom .phone-flash-home { display: block; margin: 0; padding: 26px; }
.paper-support { position: relative; padding: 26px; }
.paper-support h2 { margin: 0 0 8px; }
.paper-support p { margin: 0 0 22px; color: var(--muted); }
.paper-support-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.paper-support-links a { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.paper-support-links svg { width: 19px; height: 19px; }
.paper-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; text-align: left; }
.paper-footer-row nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot .paper-footer-row a { margin: 0; }

/* The selector is shared by all three appearances. */
/* Fill the space beside the sidebar, including when the sidebar is collapsed.
   Auto width accounts for the sidebar margin and the existing page padding. */
@media (min-width: 961px) {
  html body .wrap { max-width: none; width: auto; }
}

.theme-picker { position: relative; }
.theme-picker > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line2); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; user-select: none; }
.theme-picker > summary::-webkit-details-marker { display: none; }
.theme-picker > summary::after { content: "⌄"; margin-left: 1px; color: var(--muted); font-size: 13px; transition: transform .16s ease; }
.theme-picker[open] > summary::after { transform: rotate(180deg); }
.theme-picker-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-menu { position: absolute; z-index: 100; top: calc(100% + 9px); right: 0; width: 278px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: 0 18px 48px #0003; }
.theme-menu-title { display: block; padding: 5px 7px 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.theme-choice { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.theme-choice:hover { background: var(--surface); }
.theme-choice[aria-pressed="true"] { border-color: var(--line2); background: var(--surface); }
.theme-choice strong,.theme-choice small { display: block; }
.theme-choice strong { font-size: 13px; line-height: 1.35; }
.theme-choice small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.theme-check { opacity: 0; color: var(--brand2); font-size: 16px; font-weight: 900; }
.theme-choice[aria-pressed="true"] .theme-check { opacity: 1; }
.theme-swatch { position: relative; display: block; width: 42px; height: 32px; overflow: hidden; border: 1px solid #0002; border-radius: 8px; }
.theme-swatch::before,.theme-swatch::after { content: ""; position: absolute; }
.theme-swatch.green { background: #fff; }
.theme-swatch.green::before { inset: 0 26px 0 0; background: #1b4332; }
.theme-swatch.green::after { left: 20px; right: 4px; top: 7px; height: 6px; border-radius: 4px; background: #b7e34b; box-shadow: 0 10px 0 #e8ede4; }
.theme-swatch.paper { background: #fffefa; }
.theme-swatch.paper::before { inset: 0; opacity: .55; background: repeating-linear-gradient(transparent 0 7px,#bfd0da 7px 8px); }
.theme-swatch.paper::after { left: 5px; right: 5px; top: 6px; height: 7px; background: #252522; box-shadow: 0 12px 0 #dedcd4; }
.theme-swatch.dark { background: #081610; }
.theme-swatch.dark::before { left: 4px; right: 4px; top: 5px; height: 21px; border: 1px solid #355144; border-radius: 7px; background: #14251d; }
.theme-swatch.dark::after { left: 9px; top: 10px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #b7eb40; }

@media(max-width:640px) {
  .home-fw-tools,.home-fw-search { width: 100%; }
  .home-fw-search input { width: 100%; min-height: 40px; font-size: 16px; }
  .home-fw-heading { display: none; }
  .home-bottom { grid-template-columns: 1fr; }
  .paper-footer-row { align-items: flex-start; flex-direction: column; }
  .theme-picker > summary { width: 38px; height: 38px; justify-content: center; padding: 0; border-radius: 50%; }
  .theme-picker > summary span { display: none; }
  .theme-picker > summary::after { display: none; }
  /* Anchor to the positioned topbar. Its backdrop-filter contains fixed
     descendants, so a viewport-style bottom offset places this menu offscreen. */
  .theme-picker { position: static; }
  html .topbar:has(.theme-picker[open]) { z-index: 46; }
  .theme-menu { position: absolute; top: calc(100% + 8px); right: 12px; bottom: auto; left: 12px; width: auto; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; }

}

@media(prefers-reduced-motion:reduce) {
  .theme-picker > summary::after { transition: none; }
}