/* SumiCAD website — shared page chrome: the header's Subscribe + Sign in and the sitemap footer
   (partials/*.html, written into every page by scripts/website-chrome.mjs, which also links this file).
   Self-contained: the footer carries its own tokens, so it looks the same on pages that do not load site.css
   (app-cloud.html, the dark desktop mockup). */
/* bilingual spans also hide by the page language, so pages that switch only html[lang] (index, cloud…) show one language */
html[lang="en"] [data-l="ja"], html[lang="ja"] [data-l="en"] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-skip { position: absolute; left: -9999px; top: 8px; z-index: 40; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r); font: 700 14px var(--display); }
.sr-skip:focus { left: 12px; }
/* header: Subscribe (quiet link) + Sign in (outlined button), before the language switch */
.hact { display: flex; align-items: center; gap: 14px; flex: none; }
.nav + .hact, .nav ~ .hact { margin-left: 0; }
.hsub { font: 700 14px var(--display); text-decoration: none; border-bottom: 2px solid var(--chromate); padding: 4px 0 2px; white-space: nowrap; }
.hsub:hover { border-bottom-color: var(--ink); }
.hsign { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--ink); color: var(--paper); font: 700 13px var(--display); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.hsign:hover { background: var(--cyan); border-color: var(--cyan); }
.hsign svg { width: 16px; height: 16px; }
html[lang="ja"] .hsub, html[lang="ja"] .hsign { font-family: var(--jp); }
/* footer: sitemap columns on ink, the language switch, the copyright */
.sfoot { --ink: #15181a; --paper: #ffffff; --zinc: #8e979c; --chromate: #d6b740; --cyan: #0a72a6; --r: 2px; --gut: clamp(16px, 4vw, 48px);
  --display: "Archivo", "Zen Kaku Gothic New", system-ui, sans-serif; --jp: "Zen Kaku Gothic New", "Archivo", system-ui, sans-serif; --mono: "Azeret Mono", ui-monospace, "Cascadia Mono", monospace;
  font: 400 15px/1.55 var(--display); box-sizing: border-box; position: relative; z-index: 1; }
.sfoot *, .sfoot *::before, .sfoot *::after { box-sizing: border-box; }
.sfoot h2, .sfoot h3, .sfoot p { margin: 0; }
.sfoot img { display: block; }
.sfoot .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sfoot .brand img { width: 34px; height: 34px; }
.sfoot .brand b { font: 800 21px/1 var(--display); font-variation-settings: "wdth" 112; letter-spacing: -.01em; }
.sfoot .brand span { font: 700 19px/1 var(--jp); }
.sfoot .lang { display: flex; border: 1.5px solid #8e979c; border-radius: var(--r); overflow: hidden; }
.sfoot .lang button, .sfoot .lang a { border: 0; background: none; padding: 5px 10px; font: 600 13px var(--display); cursor: pointer; text-decoration: none; white-space: nowrap; }
.sfoot { background: var(--ink); color: #e8eaeb; padding: 48px calc(var(--gut) + var(--tabs, 0px)) 28px var(--gut); }
.sfoot a { color: inherit; text-decoration: none; }
.sfoot a:hover { text-decoration: underline; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr); gap: 40px; }
.sf-brand { display: grid; gap: 14px; align-content: start; }
.sf-brand .brand b, .sf-brand .brand span { color: #fff; }
.sf-brand p { font-size: 14px; color: #b9bfc2; max-width: 40ch; }
.sf-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-cta a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1.5px solid #fff; border-radius: var(--r); font: 700 13px var(--display); }
.sf-cta a:hover { text-decoration: none; background: #fff; color: var(--ink); }
.sf-cta .sf-dl { background: var(--chromate); border-color: var(--chromate); color: var(--ink); }
.sf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sf-h { margin: 0 0 10px; font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--zinc); }
.sfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.sf-bot { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 36px; padding-top: 16px; border-top: 1px solid #3a3f42; }
.sfoot .lang button, .sfoot .lang a { color: #e8eaeb; }
.sfoot .lang button[aria-pressed="true"], .sfoot .lang a[aria-current="true"] { background: #fff; color: var(--ink); }
.sfoot .lang a:not([aria-current]):hover { background: #2a2f32; text-decoration: none; }
.sf-note { font-size: 12px; color: #8e979c; flex: 1 1 280px; }
.sf-copy { font: 500 12px var(--mono); color: #b9bfc2; }
html[lang="ja"] .sfoot, html[lang="ja"] .sf-h, html[lang="ja"] .sf-cta a { font-family: var(--jp); }
html[lang="ja"] .sf-h { letter-spacing: .04em; }
/* legal / company pages: placeholders to fill in are impossible to miss */
mark.todo { background: var(--chromate-2); color: var(--ng); font-weight: 700; padding: 0 3px; border-radius: var(--r); }
.prose .draft { padding: 10px 14px; border: 2px dashed var(--ng); border-radius: var(--r); font-size: 14px; background: #fff7f6; }
.prose th[scope="row"] { width: 28%; border-top: 1px solid var(--zinc-2); font-weight: 700; padding-right: 14px; }
.prose table tr:first-child th, .prose table tr:first-child td { border-top: 2px solid var(--ink); }
@media (max-width: 1180px) { .hsub { display: none; } }
@media (max-width: 900px) {
  .hact { margin-left: auto; }
  .mlearn ~ .hact { margin-left: 0; }   /* index / download: the Guide button already pushes the group right */
  .hsign { height: 32px; padding: 0 9px; }
  .sf-top { grid-template-columns: 1fr; gap: 28px; }
  .sf-cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .sfoot { padding-top: 36px; }
  .prose th[scope="row"] { width: 34%; }
}
/* phones: Sign in keeps its word (no icon-only button); the logo mark alone is the home link, the OFUSE tip lives
   in the footer ("Support the project") */
@media (max-width: 520px) {
  .top .tip { display: none; }
  .top .brand b, .top .brand span { display: none; }
  .top-in { gap: 10px; }
  .hsign { padding: 0 8px; gap: 4px; }
  .hsign svg { width: 14px; height: 14px; }
  .top .lang button, .top .lang a { padding-left: 7px; padding-right: 7px; }
}