/* The Docs tab (/docs, /docs/<id>), the sign in page (/signin), the sign in box they share with the
   Officers tab, and the "who can read it" badge used on the Docs tab and in the officer hub. Loaded on
   every page of the site (index.html). Colors come from the tokens in app.css, so light and dark both
   work. Class names start with sd- (site docs) so they never meet the hub's own doc-* styles. */

/* ---------- who can read it: Everyone, Members, Officers only (/js/visibility.js) ---------- */

.vis-badge {
  --c: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px 1px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
  color: var(--c);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.vis-badge.is-members { --c: var(--accent); }
.vis-badge.is-everyone { --c: var(--free); }
.vis-badge.is-officers { --c: var(--muted); }
.vis-badge .vis-icon { flex: none; }
/* Light mode: a little of the text color keeps 12px text at 4.5:1 on the tinted pill. */
@media (prefers-color-scheme: light) {
  .vis-badge { color: color-mix(in srgb, var(--c) 82%, var(--text)); }
}

/* ---------- the sign in box (/js/signin-box.js), here and on the Officers tab ---------- */

.code-form label { margin-bottom: 8px; }
input[type="text"].code-input {
  min-height: 56px; margin-bottom: 10px;
  font: 700 22px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em; text-align: center; text-transform: uppercase;
}
.code-form .form-error { margin: 0 0 10px; }
.code-ready { margin: 0 0 10px; color: var(--ok); font-weight: 600; }
/* Messages that screen readers announce stay in the page while empty (display: none would take them
   out, and a region that reappears with its text is often not read). Empty, they take no room. */
.code-form .form-error:empty, .code-ready:empty { display: block; margin: 0; }

/* ---------- /signin ---------- */

.signin-page { max-width: 520px; margin: 28px auto 0; }
.signin-head { margin-bottom: 18px; }
.signin-head h1 { margin-bottom: 6px; }
.signin-head h1:focus { outline: none; }
.signin-head .lede { margin: 0; font-size: 16px; }
.signin-card { padding: 24px; }
.signin-now:empty { display: none; }
.signin-already { margin: 0 0 16px; border-left-color: var(--accent); }
.signin-foot { margin: 14px 0 0; }
.signin-kinds { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signin-kind {
  display: grid; align-content: start; gap: 2px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.signin-kind-title { margin: 0; font-weight: 750; }
.signin-kind-body { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.signin-kind-link { font-size: 14px; font-weight: 650; justify-self: start; min-height: 24px; }

/* ---------- /docs ---------- */

.sd { margin-top: 12px; }
.sd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 18px 0 18px; }
.sd-head-text { min-width: 0; max-width: 680px; }
.sd-head h1 { margin-bottom: 6px; }
.sd-head h1:focus, .sd-doc-title:focus, .sd-missing h1:focus { outline: none; }
.sd-head .lede { margin: 0; }
.sd-extras:empty { display: none; }
.sd-extras { flex: none; max-width: 100%; }

.sd-hub-link { gap: 8px; }
.sd-guest {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  font-size: 14px; font-weight: 600;
}
.sd-guest svg { flex: none; color: var(--accent); }
.sd-guest a { font-weight: 700; }

.sd-status { margin: 0 0 14px; color: var(--ok); font-weight: 650; }
.sd-status:empty { display: block; margin: 0; }

.sd-news-box:empty { display: none; }
.sd-news {
  margin: 0 0 22px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.sd-news-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.sd-news-title svg { color: var(--accent); }
.sd-news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sd-news-item { padding: 10px 0; border-top: 1px solid var(--line); }
.sd-news-item:first-child { border-top: 0; padding-top: 0; }
.sd-news-text { margin: 0 0 4px; white-space: pre-line; overflow-wrap: anywhere; }
.sd-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 13px; }
.sd-more { margin-top: 10px; }

.sd-search { position: relative; margin: 0 0 10px; max-width: 520px; }
.sd-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
input[type="search"].sd-search-input {
  width: 100%; min-height: 46px; padding: 0 12px 0 40px;
  border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}
input[type="search"].sd-search-input:focus { border-color: var(--accent); }
.sd-summary { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.sd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sd-grid > li { display: flex; min-width: 0; }
.sd-card {
  position: relative; flex: 1; min-width: 0;
  display: grid; align-content: start; gap: 6px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.sd-card:hover, .sd-card:focus-within { border-color: var(--accent); }
.sd-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sd-card-title { margin: 2px 0 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.sd-card-title a { color: var(--text); text-decoration: none; }
/* The whole card is the link's target area; the title stays the one link a screen reader hears. */
.sd-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sd-card-title a:focus-visible { outline: none; }
.sd-card:has(.sd-card-title a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-card-preview { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sd-card-preview.is-empty { font-style: italic; }
.sd-card-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.sd-none { color: var(--muted); padding: 8px 0; }

.sd-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.sd-kind.kind-notes { color: var(--accent); }
.sd-kind.kind-plan { color: var(--free); }
.sd-kind.kind-guide { color: var(--warn); }
.sd-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }

.sd-empty {
  text-align: center; padding: 40px 22px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.sd-empty-title { font-weight: 750; font-size: 17px; margin: 0 0 6px; }
.sd-empty p { color: var(--muted); max-width: 480px; margin-left: auto; margin-right: auto; }
.sd-empty .sd-empty-title { color: var(--text); }
.sd-error { max-width: 620px; border-left: 4px solid var(--danger); }

/* ---------- /docs/<id> ---------- */

.sd-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 650; text-decoration: none;
}
.sd-back:hover { text-decoration: underline; }
.sd-article {
  max-width: 760px; margin: 6px 0 0;
  padding: 26px 30px 30px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sd-doc-head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.sd-doc-title { margin: 10px 0 6px; font-size: clamp(26px, 4.4vw, 34px); overflow-wrap: anywhere; }
.sd-doc-meta { margin: 0; color: var(--muted); font-size: 14px; }
.sd-doc-actions { margin: 14px 0 0; }

.sd-text { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.sd-text p { margin: 0 0 14px; }
.sd-text .sd-h { font-size: 19px; margin: 26px 0 8px; letter-spacing: -0.01em; }
.sd-text .sd-h:first-child { margin-top: 0; }
.sd-list { margin: 0 0 14px; padding-left: 24px; }
.sd-list li + li { margin-top: 4px; }
.sd-checks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.sd-checks label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; cursor: default; }
.sd-checks input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 4px 0 0;
  accent-color: var(--accent); opacity: 1;
}
.sd-checks .is-done span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.sd-doc-foot { max-width: 760px; margin-top: 16px; }

.sd-missing { max-width: 620px; margin-top: 6px; }
.sd-missing h1 { font-size: 26px; }
.sd-missing .sd-guest { margin: 0 0 14px; }
.sd-missing-actions { margin: 16px 0 0; }

/* ---------- phones ---------- */

@media (max-width: 759px) {
  .signin-page { margin-top: 12px; }
  .signin-card { padding: 18px; }
  .signin-kinds { grid-template-columns: 1fr; }
  .sd-head { margin-top: 12px; align-items: stretch; }
  .sd-extras { flex: 1 1 100%; }
  .sd-grid { grid-template-columns: 1fr; }
  .sd-article { padding: 18px 16px 20px; border-radius: 12px; }
  .sd-text { font-size: 16px; }
  .sd-news { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-card { transition: none; }
}