/*
  OpenedMic v1.1 beta legal and public-utility presentation layer.
  This file is loaded only by the public legal and utility documents. It changes
  presentation and layout without adding content, network dependencies, or
  runtime behavior.
*/

:root {
  --lu-page: #f1f3f1;
  --lu-surface: #fbfcfa;
  --lu-surface-quiet: #e6eae6;
  --lu-ink: #111713;
  --lu-muted: #111713;
  --lu-line: #c5cec6;
  --lu-line-strong: #8f9e92;
  --lu-accent: #b4231e;
  --lu-accent-dark: #8f1d18;
  --lu-accent-soft: #f5d7d3;
  --lu-positive: #136b43;
  --lu-warning: #8a5612;
  --lu-focus: #0b6540;
  --lu-shell: 1240px;
  --lu-reading: 780px;
  --lu-gutter: clamp(18px, 5vw, 72px);
  --lu-shadow: 0 20px 52px rgb(25 36 29 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lu-page: #121814;
    --lu-surface: #18211b;
    --lu-surface-quiet: #202b23;
    --lu-ink: #f1f5ef;
    --lu-muted: #f1f5ef;
    --lu-line: #3b4b40;
    --lu-line-strong: #728177;
    --lu-accent: #f1665a;
    --lu-accent-dark: #ff8176;
    --lu-accent-soft: #4c2622;
    --lu-positive: #71d5a2;
    --lu-warning: #f0b96f;
    --lu-focus: #7cdfad;
    --lu-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  }
}

html {
  background: var(--lu-page);
  scroll-behavior: smooth;
}

body {
  --bg: var(--lu-page);
  --bg2: var(--lu-surface);
  --card: var(--lu-surface);
  --card2: var(--lu-surface-quiet);
  --border: var(--lu-line);
  --border2: var(--lu-line-strong);
  --text: var(--lu-ink);
  --dim: var(--lu-muted);
  --dim2: var(--lu-muted);
  --red: var(--lu-accent);
  --red-cta: var(--lu-accent);
  --white: var(--lu-surface);
  min-height: 100dvh;
  overflow-x: clip !important;
  background: var(--lu-page) !important;
  color: var(--lu-ink) !important;
  font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: -0.01em;
}

html[lang="he"] body,
html[lang="ar"] body {
  letter-spacing: 0;
}

html[lang="he"] body {
  line-height: 1.82;
}

html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Rubik", sans-serif !important;
  font-size: 18px;
  line-height: 1.9;
}

body::selection {
  background: var(--lu-accent-soft);
  color: var(--lu-ink);
}

.om-skip-link,
.skip-link {
  background: var(--lu-ink) !important;
  color: var(--lu-surface) !important;
  /*
    The base layer's fixed -40px offset is shorter than the localized legal
    control in some font metrics. Translate by the rendered control height so
    its unfocused painted box is always fully above the viewport.
  */
  top: 0;
  transform: translateY(calc(-100% - 1px));
}

.om-skip-link:focus,
.om-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  transform: translateY(0);
}

body > nav {
  position: sticky !important;
  inset-block-start: 0;
  z-index: 200;
  min-height: 68px;
  height: auto !important;
  padding: 12px max(var(--lu-gutter), calc((100vw - var(--lu-shell)) / 2)) !important;
  background: rgb(241 243 241 / 0.94) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lu-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (prefers-color-scheme: dark) {
  body > nav {
    background: rgb(18 24 20 / 0.94) !important;
  }
}

.nav-logo,
.foot-logo,
.brand {
  color: var(--lu-ink) !important;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.nav-logo .ed,
.foot-logo .ed {
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

.nav-logo .mic,
.foot-logo .mic,
.brand span {
  color: var(--lu-accent) !important;
}

.nav-back {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px !important;
  color: var(--lu-ink) !important;
  background: transparent !important;
  border: 1px solid var(--lu-line-strong) !important;
  border-radius: 999px !important;
  font: 700 0.82rem/1 "Rubik", system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-back:hover {
  color: #fff !important;
  background: var(--lu-accent) !important;
  border-color: var(--lu-accent) !important;
  transform: translateY(-1px);
}

main[role="main"],
.page-wrap {
  width: min(calc(100% - (2 * var(--lu-gutter))), var(--lu-reading)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 84px) 0 clamp(72px, 9vw, 128px) !important;
}

.page-wrap {
  flex: 1;
}

main[role="main"] > h1,
.page-title {
  max-width: 18ch;
  margin: 0 0 14px !important;
  color: var(--lu-ink) !important;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 4.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  overflow-wrap: anywhere;
}

html[lang="he"] main[role="main"] > h1,
html[lang="he"] .page-title,
html[lang="ar"] main[role="main"] > h1,
html[lang="ar"] .page-title {
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

.page-date,
.page-sub {
  margin: 0 0 clamp(28px, 4vw, 44px) !important;
  color: var(--lu-muted) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

.page-sub {
  max-width: 62ch;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: 1.04rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

main[role="main"] h2 {
  margin: clamp(46px, 7vw, 72px) 0 18px !important;
  padding: 0 0 12px !important;
  color: var(--lu-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lu-line) !important;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: clamp(1.4rem, 2.7vw, 2.15rem) !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
}

html[lang="he"] main[role="main"] h2,
html[lang="ar"] main[role="main"] h2 {
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
}

main[role="main"] p,
main[role="main"] li {
  color: var(--lu-muted) !important;
  font-size: 1rem !important;
  line-height: 1.78 !important;
}

html[lang="he"] main[role="main"] p,
html[lang="he"] main[role="main"] li,
html[lang="ar"] main[role="main"] p,
html[lang="ar"] main[role="main"] li {
  line-height: 1.9 !important;
}

main[role="main"] ul,
main[role="main"] ol {
  margin: 0 0 22px !important;
  padding-inline-start: 1.3rem !important;
}

html[dir="rtl"] main[role="main"] ul,
html[dir="rtl"] main[role="main"] ol {
  padding-inline-start: 0 !important;
  padding-inline-end: 1.3rem !important;
}

main[role="main"] li {
  margin-bottom: 10px !important;
}

main[role="main"] strong {
  color: var(--lu-ink) !important;
  font-weight: 720 !important;
}

main[role="main"] a,
footer a {
  color: var(--lu-ink) !important;
  text-decoration-color: var(--lu-accent) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
}

main[role="main"] a:hover,
footer a:hover {
  color: var(--lu-accent-dark) !important;
}

main[role="main"] code {
  color: var(--lu-ink) !important;
  background: var(--lu-surface-quiet) !important;
  border: 1px solid var(--lu-line) !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  font-size: 0.84em !important;
  overflow-wrap: anywhere;
}

.scope-banner,
.intro {
  margin: clamp(28px, 4vw, 42px) 0 !important;
  padding: clamp(20px, 3vw, 30px) !important;
  color: var(--lu-muted) !important;
  background: var(--lu-surface) !important;
  border: 1px solid var(--lu-line-strong) !important;
  border-inline-start: 4px solid var(--lu-accent) !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: var(--lu-shadow) !important;
}

html[dir="rtl"] .scope-banner,
html[dir="rtl"] .intro {
  border-inline-start: 1px solid var(--lu-line-strong) !important;
  border-inline-end: 4px solid var(--lu-accent) !important;
  border-radius: 14px 0 0 14px !important;
}

.scope-banner strong,
.intro strong {
  color: var(--lu-ink) !important;
}

.lang-block {
  margin: 22px 0 !important;
  padding: clamp(22px, 4vw, 36px) !important;
  background: var(--lu-surface) !important;
  border: 1px solid var(--lu-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.lang-block h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px !important;
  padding: 0 0 12px !important;
  color: var(--lu-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lu-line) !important;
  font-size: clamp(1.22rem, 2vw, 1.55rem) !important;
}

.lang-block h2 .lang-tag {
  margin: 0 !important;
  color: var(--lu-muted) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.66em !important;
  letter-spacing: 0.02em !important;
}

.lang-block p {
  color: var(--lu-muted) !important;
  font-size: 1rem !important;
  line-height: 1.78 !important;
}

.form-group {
  margin-bottom: 24px !important;
}

label {
  margin-bottom: 8px !important;
  color: var(--lu-ink) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

input[type="text"],
input[type="email"],
select,
textarea {
  min-height: 48px;
  color: var(--lu-ink) !important;
  background: var(--lu-surface) !important;
  border: 1px solid var(--lu-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

textarea {
  min-height: 156px;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--lu-focus) !important;
  outline: 3px solid rgb(11 101 64 / 0.22) !important;
  outline-offset: 1px !important;
}

::placeholder {
  color: var(--lu-ink) !important;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  ::placeholder {
    color: var(--lu-ink) !important;
  }
}

.submit-btn,
button,
a.action {
  min-height: 46px;
  color: #fff !important;
  background: var(--lu-accent) !important;
  border: 1px solid var(--lu-accent) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.submit-btn:hover,
button:hover,
a.action:hover {
  color: #fff !important;
  background: var(--lu-accent-dark) !important;
  border-color: var(--lu-accent-dark) !important;
  filter: none !important;
  transform: translateY(-1px);
}

.submit-btn:active,
button:active,
a.action:active {
  transform: translateY(0) scale(0.98);
}

.success-msg,
.error-msg,
.status {
  color: var(--lu-ink) !important;
  background: var(--lu-surface) !important;
  border: 1px solid var(--lu-line-strong) !important;
  border-inline-start: 4px solid var(--lu-positive) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: none !important;
}

.error-msg {
  border-inline-start-color: var(--lu-accent) !important;
}

html[dir="rtl"] .success-msg,
html[dir="rtl"] .error-msg,
html[dir="rtl"] .status {
  border-inline-start: 1px solid var(--lu-line-strong) !important;
  border-inline-end: 4px solid var(--lu-positive) !important;
  border-radius: 12px 0 0 12px !important;
}

html[dir="rtl"] .error-msg {
  border-inline-end-color: var(--lu-accent) !important;
}

footer {
  width: 100%;
  min-height: 88px;
  padding: 24px max(var(--lu-gutter), calc((100vw - var(--lu-shell)) / 2)) !important;
  color: var(--lu-muted) !important;
  background: var(--lu-surface-quiet) !important;
  border: 0 !important;
  border-top: 1px solid var(--lu-line) !important;
}

.foot-links {
  gap: 16px !important;
}

.foot-links a {
  color: var(--lu-muted) !important;
  font-size: 0.84rem !important;
  text-decoration: none !important;
}

.foot-links a:hover {
  color: var(--lu-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--lu-accent) !important;
}

.foot-copy {
  color: var(--lu-muted) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.7rem !important;
}

/* Offline utility page keeps its operational controls but receives the same layer. */
body > main#main-content:not([role]) {
  width: min(calc(100% - (2 * var(--lu-gutter))), 640px) !important;
  margin: auto !important;
  padding: clamp(28px, 6vw, 52px) !important;
  background: var(--lu-surface) !important;
  border: 1px solid var(--lu-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--lu-shadow) !important;
}

body > main#main-content:not([role]) h1 {
  margin: 0 0 16px !important;
  color: var(--lu-ink) !important;
  font-family: "Rubik", system-ui, sans-serif !important;
  font-size: clamp(2rem, 8vw, 3.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
}

body > main#main-content:not([role]) p {
  color: var(--lu-muted) !important;
}

body > main#main-content:not([role]) a.action {
  color: var(--lu-ink) !important;
  background: transparent !important;
  border-color: var(--lu-line-strong) !important;
}

body > main#main-content:not([role]) a.action:hover {
  color: #fff !important;
  background: var(--lu-accent) !important;
  border-color: var(--lu-accent) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--lu-focus) !important;
  outline-offset: 4px !important;
}

@media (max-width: 620px) {
  body > nav {
    height: auto !important;
    min-height: 64px;
    padding: 10px var(--lu-gutter) !important;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center !important;
  }

  body > nav .nav-right {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center !important;
    gap: 8px !important;
  }

  .nav-logo,
  .foot-logo,
  .brand {
    font-size: 0.92rem !important;
  }

  .nav-back {
    min-height: 40px;
    padding-inline: 11px !important;
    font-size: 0.76rem !important;
  }

  main[role="main"],
  .page-wrap {
    width: min(calc(100% - (2 * var(--lu-gutter))), var(--lu-reading)) !important;
    padding-top: 36px !important;
  }

  main[role="main"] > h1,
  .page-title {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }

  main[role="main"] h2 {
    margin-top: 46px !important;
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
  }

  footer {
    padding: 28px var(--lu-gutter) !important;
  }

  .foot-links {
    justify-content: center;
  }

  body > main#main-content:not([role]) {
    padding: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}