/* Spinstack site chrome: the nav and footer from the homepage, for every other page.
   Stamped in by non web data/tools/sync_chrome.py. Everything is scoped under .ss-chrome so it cannot
   collide with each page's own (Tailwind) styles, and it follows the page's data-theme attribute.
   Values mirror non web data/tools/home_v4.css; change both together. */

.ss-chrome {
  --ember: #f97316; --red: #ef4444; --vinyl: #0a0908; --stone: #fafaf9;
  --c-bg: var(--stone); --c-bg-2: #f5f5f4; --c-bg-3: #e7e5e4;
  --c-text: #1c1917; --c-text-2: #44403c; --c-text-3: #57534e; --c-rule: #d6d3d1;
  --c-btn-bg: linear-gradient(135deg, #c94a0c, #dc2626); --c-btn-text: #ffffff;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.5; letter-spacing: -0.022em; color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .ss-chrome {
  --c-bg: var(--vinyl); --c-bg-2: #141210; --c-bg-3: #1c1917;
  --c-text: var(--stone); --c-text-2: #d6d3d1; --c-text-3: #a8a29e; --c-rule: #292524;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ss-chrome {
    --c-bg: var(--vinyl); --c-bg-2: #141210; --c-bg-3: #1c1917;
    --c-text: var(--stone); --c-text-2: #d6d3d1; --c-text-3: #a8a29e; --c-rule: #292524;
  }
}
.ss-chrome *, .ss-chrome *::before, .ss-chrome *::after { box-sizing: border-box; }
.ss-chrome a { color: inherit; text-underline-offset: 3px; }
.ss-chrome :focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.ss-chrome .wrap { width: min(1200px, 100% - 2 * var(--s2)); margin-inline: auto; }
@media (min-width: 768px) { .ss-chrome .wrap { width: min(1200px, 100% - 2 * var(--s4)); } }
.ss-chrome .small { font-size: 13px; color: var(--c-text-3); letter-spacing: -0.01em; }
.ss-chrome p { margin: 0; }

/* Nav: fixed, 64px, so page bodies built for the old fixed nav keep their spacing */
.ss-chrome.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--c-bg); }
.ss-chrome .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; }
.ss-chrome .brand { display: flex; align-items: center; gap: var(--s1); font-weight: 600; font-size: 21px; text-decoration: none; color: var(--c-text); }
.ss-chrome .brand img { width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: var(--vinyl); box-shadow: 0 0 0 1px var(--c-rule); }
.ss-chrome .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); }
.ss-chrome .nav ul a { text-decoration: none; color: var(--c-text-2); font-size: 15px; }
.ss-chrome .nav ul a:hover { color: var(--c-text); }
@media (max-width: 860px) { .ss-chrome .nav ul { display: none; } }
.ss-chrome .btn {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 var(--s2);
  border-radius: 10px; background: var(--c-btn-bg); color: var(--c-btn-text);
  font-size: 15px; font-weight: 600; text-decoration: none; transition: filter .15s;
}
.ss-chrome .btn:hover { filter: brightness(1.07); }

/* Footer: live status strip, grouped links, then the bar with language and appearance */
footer.ss-chrome { padding-block: var(--s5) var(--s4); background: var(--c-bg-2); border-top: 1px solid var(--c-rule); font-size: 15px; color: var(--c-text-2); }
.ss-chrome .status-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: 14px var(--s3);
  border-radius: 14px; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-rule); text-decoration: none; color: var(--c-text-2);
}
.ss-chrome .status-strip:hover { box-shadow: 0 0 0 1px var(--c-text-3); }
.ss-chrome .st-main { display: inline-flex; align-items: center; font-weight: 600; color: var(--c-text); }
.ss-chrome #homeStatusDot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.ss-chrome .st-svcs { display: inline-flex; flex-wrap: wrap; gap: 4px var(--s3); font-size: 13px; color: var(--c-text-3); }
.ss-chrome .st-svc i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 6px; vertical-align: 1px; }
.ss-chrome .st-link { margin-left: auto; font-size: 13px; color: var(--c-text-2); }
.ss-chrome .foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin: var(--s5) 0 var(--s4); }
.ss-chrome .foot-brand .brand { font-size: 17px; margin-bottom: var(--s2); }
.ss-chrome .foot-brand p { margin: 0 0 var(--s1); }
.ss-chrome .foot-social { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.ss-chrome .foot-social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text-2); }
.ss-chrome .foot-col h3 { margin: 0 0 var(--s1); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--c-text); letter-spacing: -0.01em; }
.ss-chrome .foot-col a { display: block; padding: 5px 0; color: var(--c-text-2); text-decoration: none; font-size: 15px; }
.ss-chrome .foot-col a:hover, .ss-chrome .foot-social a:hover { color: var(--c-text); text-decoration: underline; }
.ss-chrome .foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--c-rule); }
.ss-chrome .foot-tools { display: flex; align-items: center; gap: var(--s1); }
.ss-chrome .theme { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-rule); border-radius: 10px; background: var(--c-bg); color: var(--c-text-2); cursor: pointer; }
.ss-chrome .theme:hover { background: var(--c-bg-3); }
.ss-chrome .legal { margin-top: var(--s3); max-width: 760px; }

/* Language switcher (each page keeps its own targets) */
.ss-chrome .lang-dd { position: relative; display: inline-block; border: 0; }
.ss-chrome .lang-dd summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s2); font-size: 15px; color: var(--c-text-2); border: 1px solid var(--c-rule); border-radius: 10px; background: var(--c-bg); cursor: pointer; }
.ss-chrome .lang-dd summary::-webkit-details-marker { display: none; }
.ss-chrome .lang-dd summary::after { content: none; }
.ss-chrome .lang-dd[open] .lang-chev { transform: rotate(180deg); }
.ss-chrome .lang-menu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 210px; background: var(--c-bg); border: 1px solid var(--c-rule); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 10px 34px rgba(0,0,0,.18); z-index: 60; }
.ss-chrome .lang-menu a, .ss-chrome .lang-menu span.li { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 11px; border-radius: 8px; font-size: 15px; color: var(--c-text-2); text-decoration: none; white-space: nowrap; }
.ss-chrome .lang-menu a:hover { background: var(--c-bg-3); color: var(--c-text); }
.ss-chrome .lang-menu .cur { color: var(--c-text); font-weight: 600; }
.ss-chrome .lang-menu .cur .tick { margin-left: auto; color: var(--ember); }

@media (max-width: 1023px) {
  .ss-chrome .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ss-chrome .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ss-chrome .foot-grid { grid-template-columns: 1fr 1fr; }
  .ss-chrome .st-link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ss-chrome .btn { transition: none; } }

/* Touch: every footer link is a full 44pt target (Apple HIG), with room between neighbours */
@media (max-width: 767px), (pointer: coarse) {
  .ss-chrome .foot-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .ss-chrome .foot-col h3 { margin-bottom: 4px; }
  .ss-chrome .foot-grid { row-gap: var(--s5); }
}