/* wecom-calendar-cli — CLI reference page styles. Same "terminal-craft" design
   tokens as the landing page (docs/index.html), including its WeCom-blue
   palette, extracted here because the generated cli/index.html links this
   stylesheet rather than inlining it. Keep the two token blocks in sync. */
:root {
  --bg:          #070b16;
  --bg-soft:     #0c1223;
  --panel:       #101830;
  --card:        #121a34;
  --border:      #243056;
  --border-soft: #1a2340;
  --text:        #e9edfa;
  --muted:       #8d99bf;
  --faint:       #58648c;
  --accent:      #1464f0;
  --accent-2:    #6a5cf5;
  --accent-text: #5f9bff;
  --accent-soft: rgba(20, 100, 240, 0.15);
  --radius:      12px;
  --radius-lg:   18px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1080px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
}
.lead { color: var(--muted); font-size: 1.02rem; max-width: 68ch; margin: 6px 0; }

/* top navigation */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 11, 22, 0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-family: var(--mono); font-weight: 600; color: var(--text); }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 0.92rem; }
.nav-links a:hover, .nav-links a.is-cli { color: var(--accent-text); text-decoration: none; }

/* two-column layout: sticky sidebar + content */
/* Archival notice. Deliberately desaturated rather than an amber alert bar:
   "archived" is a past-tense state, not a hazard, so the strip sits in the
   page's own neutrals and the single saturated element is the forward link to
   the project that replaces this one. The consequences for existing users fold
   into a <details> so the notice stays one line at rest. */
.deprecated { background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); }
.deprecated-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
  display: flex; gap: 14px; align-items: flex-start;
}
.deprecated-tag {
  flex: none; margin-top: 1px;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px;
}
.deprecated-body { flex: 1 1 auto; min-width: 0; }
.deprecated p { color: var(--muted); font-size: 0.95rem; max-width: 78ch; margin: 0; }
.deprecated strong { color: var(--text); font-weight: 600; }
.deprecated-go { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.deprecated-go::after { content: " \2192"; }
.deprecated details { margin-top: 9px; }
.deprecated summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 0.76rem; color: var(--faint);
  list-style: none;
}
.deprecated summary::-webkit-details-marker { display: none; }
.deprecated summary::before {
  content: "+"; display: inline-block; width: 1ch; text-align: center;
  font-weight: 600; color: var(--border);
}
.deprecated details[open] summary::before { content: "\2212"; }
.deprecated summary:hover, .deprecated details[open] summary { color: var(--muted); }
.deprecated summary:hover::before { color: var(--accent-text); }
.deprecated details p { margin-top: 9px; font-size: 0.9rem; }
@media (max-width: 560px) {
  .deprecated-inner { flex-direction: column; gap: 10px; padding: 14px 24px; }
  .deprecated-tag { align-self: flex-start; margin-top: 0; }
}

.layout {
  max-width: var(--wrap); margin: 0 auto; padding: 32px 24px 64px;
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
}
.side { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; }
.side-group { margin-bottom: 18px; }
.side-title {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.side a { display: block; color: var(--muted); font-size: 0.9rem; padding: 3px 0; }
.side a:hover { color: var(--accent-text); text-decoration: none; }
.cli-main { min-width: 0; }
.cli-main h1 { font-size: 1.9rem; margin: 6px 0 4px; }

/* command sections */
.cmd {
  border-top: 1px solid var(--border-soft);
  padding: 28px 0;
}
.cmd h2 {
  font-size: 1.2rem; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.cmd h3 { font-size: 0.86rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 18px 0 8px; }
.group-tag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 9px;
}
.short { color: var(--muted); margin: 4px 0; }
.long { color: var(--text); margin: 10px 0; white-space: pre-line; }

pre {
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px; margin: 10px 0;
  overflow-x: auto; font-size: 0.88rem; line-height: 1.55; color: var(--text);
}
pre .c { color: var(--faint); }
p code, td code, li code {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 1px 6px; font-size: 0.86em; color: var(--accent-2);
}

/* flag tables */
table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.9rem; }
th, td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
th { color: var(--faint); font-family: var(--mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
td { color: var(--muted); }

/* footer */
.footer { border-top: 1px solid var(--border-soft); padding: 28px 0; color: var(--faint); font-size: 0.86rem; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.brand-foot { font-family: var(--mono); color: var(--muted); }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
}