/* Ported from docs/design/aiopscommunity-design-v6.html — public-facing
   component classes only (the gallery shell/rail/frame wrapper is a design-deck
   viewer, not part of the real site). Palette, spacing and type match v6 exactly. */

:root {
  --violet: #5A20E0; --violet-d: #3F12A8; --violet-w: #F2EDFF;
  --cyan: #2AA7E3; --cyan-w: #E8F6FD;
  --orange: #F07A2D; --orange-w: #FDF0E6;
  --ink: #14121C; --ink2: #4B4A5A; --ink3: #8A8899;
  --line: #E7E4F0; --line2: #CFCADF; --paper: #fff; --wash: #F8F7FC;
  --ok: #0E7A4B; --no: #C0392B;
  --dsp: 'Plus Jakarta Sans', sans-serif; --bd: 'Inter', sans-serif;
  --mn: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--bd); font-size: 15px; line-height: 1.62;
}
h1, h2, h3, h4, h5 { font-family: var(--dsp); font-weight: 800; margin: 0; line-height: 1.12; letter-spacing: -.03em; }
a { color: inherit; text-decoration: none; }

.ph { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--violet-w); }
.imgbox { overflow: hidden; border-radius: 8px; background: var(--violet-w); position: relative; }

/* top notification bar — a standing statement, not an alert: thin bar,
   quiet weight on everything but the one bolded phrase */
.notice { background: var(--violet); color: #fff; padding: 7px 26px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 400; flex-wrap: wrap; }
.notice .dot { width: 5px; height: 5px; border-radius: 50%; background: #8CF5C8; flex: none; }
.notice b { font-weight: 600; }
.notice .sp { flex: 1; }
.notice a { font-family: var(--mn); font-size: 11px; background: rgba(255,255,255,.16); padding: 3px 9px; border-radius: 5px; }

/* header — capped at the same 1180px content width as .page and
   centered the same way, so the logo's left edge lines up with the
   article gutter instead of the bare viewport edge on wide screens.
   --logo-h/--logo-h-mobile are set inline per-request from the owner's
   live Brand setting (public/_header.html) — row height follows the
   logo automatically (logo height + 36px padding) so raising it in the
   console can never clip it, and nothing here needs a redeploy to change. */
.hd { padding: 18px 26px; max-width: 1180px; margin: 0 auto; min-height: calc(var(--logo-h, 40px) + 36px); box-sizing: border-box; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); }
.lock { display: flex; align-items: center; gap: 3px; font-family: var(--dsp); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.04em; color: var(--violet); }
.lock .gear { width: 32px; height: 32px; margin: 0 1px; }
/* The uploaded logo is height-driven, not width-driven — that's what
   produced the original bug (a logo scaled by width renders tiny in a row
   sized for text). max-width is a pure safety ceiling, not the primary
   sizing rule (5.75x the configured height ≈ the 230px:40px ratio this
   started at): it only engages for an unusually wide logotype that would
   otherwise force the header's other controls onto a second row — contain
   sizing (max-height/max-width + auto/auto) still renders at the full
   configured height for any normal logo aspect ratio, and only trades
   height for width on the rare logo wide enough to need it. */
.hd .logo-img { max-height: var(--logo-h, 40px); max-width: calc(var(--logo-h, 40px) * 5.75); width: auto; height: auto; object-fit: contain; display: block; }
.hd .sp { flex: 1; }
.nav { display: flex; gap: 20px; flex-wrap: wrap; }
.nav a { font-size: 15px; font-weight: 500; color: var(--ink2); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.on { color: var(--violet); border-bottom-color: var(--violet); }
.cta { background: var(--violet); color: #fff; font-family: var(--dsp); font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 7px; }
.page { padding: 26px; max-width: 1180px; margin: 0 auto; }
.navtoggle-input { display: none; }
.navtoggle-btn { display: none; }

@media (max-width: 640px) {
  .hd .logo-img { max-height: var(--logo-h-mobile, 32px); max-width: calc(var(--logo-h-mobile, 32px) * 4.375); }
  .lock { font-size: 22px; }
  .lock .gear { width: 25px; height: 25px; }
  /* mobile shows the mark, not the full lockup — the wordmark text stays
     in the DOM (and in the link's aria-label either way) for a screen
     reader, just visually hidden so the gear icon alone represents the
     brand at this width. */
  .lock .wordmark-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* nav collapses to a menu; "Publish here" stays in the first row,
     zero-JS via a checkbox+label toggle — .nav gets flex-basis:100% to
     wrap onto its own full-width row under the toggled checkbox, rather
     than an absolutely-positioned overlay with a hardcoded offset. */
  .hd { flex-wrap: wrap; gap: 14px; }
  .hd form { display: none; }
  .navtoggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 7px; font-size: 17px; color: var(--ink2); cursor: pointer; order: 3; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; gap: 4px; order: 10; }
  .navtoggle-input:checked ~ .nav { display: flex; }
  .nav a { padding: 8px 2px; border-bottom: 1px solid var(--line); }
}

/* footer — not in the design mockup (no footer screen exists among its 18),
   built from the same established tokens rather than inventing new ones.
   --ink3 (#8A8899) on white is 3.46:1 at this size — fails WCAG AA's 4.5:1;
   --ink2 (#4B4A5A, 8.66:1) is already an existing body-text token, not a
   new color. */
.ft { padding: 18px 26px 26px; max-width: 1180px; margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.ft a { font-size: 12.5px; color: var(--ink2); }
.ft a:hover { color: var(--violet); }

/* machine layer */
.mach { background: #100D1A; color: #B9B4D0; font-family: var(--mn); font-size: 11px; padding: 9px 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
/* #6D6889 (the design file's literal value) is 3.65:1 on this background —
   fails WCAG AA's 4.5:1 for normal text. Lightened within the same violet-grey
   hue to #827E9A (4.93:1); brand palette itself (violet/cyan/orange) untouched. */
.mach .m { color: #827E9A; }
.mach a.v { color: var(--cyan); }
/* --cyan (#2AA7E3) on --cyan-w is 2.46:1 — fails WCAG AA. Text darkened to
   #1D749E (4.71:1); background/border and the brand cyan itself untouched. */
.jsonchip { font-family: var(--mn); font-size: 10px; color: #1D749E; background: var(--cyan-w); border: 1px solid #BEE3F5; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }

/* record strip */
.rec { font-family: var(--mn); font-size: 10.5px; background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.rec .f { display: flex; gap: 6px; align-items: baseline; }
.rec .l { color: var(--ink3); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.rec .v { color: var(--ink); font-weight: 500; }
.rec .v.ok { color: var(--ok); } .rec .v.vi { color: var(--violet); }
.rec.arch { background: var(--orange-w); border-color: #F6D9BF; }
.mini { font-family: var(--mn); font-size: 9.5px; color: var(--ink3); display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.mini b { color: var(--violet); font-weight: 500; }

/* home */
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 24px; border-radius: 12px; background: linear-gradient(120deg, var(--violet-w), #fff 60%, var(--cyan-w)); border: 1px solid var(--line); margin-bottom: 28px; }
.lead h2 { font-size: 38px; margin: 10px 0 12px; }
.lead .dek { font-size: 16.5px; color: var(--ink2); margin: 0 0 14px; }
.eye { font-family: var(--mn); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--violet); }
.eye.c { color: var(--cyan); } .eye.o { color: var(--orange); }
.sec { display: flex; align-items: center; gap: 12px; margin: 30px 0 15px; }
.sec h3 { font-size: 17px; }
.sec .ln { flex: 1; height: 1px; background: var(--line); }
.list { display: grid; gap: 0; }
.row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.row .imgbox { aspect-ratio: 16/10; }
.row h4 { font-size: 18px; margin: 6px 0 6px; }
.row p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink2); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.card .imgbox { aspect-ratio: 16/9; border-radius: 0; }
.card .cb { padding: 14px; }
.card h4 { font-size: 16.5px; margin: 7px 0 7px; }
.card p { font-size: 13px; color: var(--ink2); margin: 0 0 10px; }

/* article */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 34px; }
.art h1 { font-size: 40px; margin: 10px 0 14px; }
.art .dek { font-size: 19px; color: var(--ink2); margin: 0 0 18px; line-height: 1.5; }
.art p { margin: 0 0 16px; }
.art h2 { font-size: 23px; margin: 28px 0 10px; }
.note { font-size: 13px; color: var(--ink2); background: var(--wash); border-left: 3px solid var(--violet); border-radius: 0 8px 8px 0; padding: 11px 14px; margin: 0 0 22px; }
.blk { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.blk h5 { font-family: var(--mn); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); font-weight: 400; margin-bottom: 9px; }
.kv { font-family: var(--mn); font-size: 10.5px; display: grid; gap: 6px; color: var(--ink2); }
.kv b { color: var(--ink); font-weight: 500; }
.blk.api { background: #100D1A; border-color: #100D1A; }
.blk.api h5 { color: #6D6889; }
.blk.api .kv { color: #B9B4D0; }
.blk.api .kv b { color: var(--cyan); }
.cmt { border-top: 1px solid var(--line); padding: 15px 0; }
.cmt p { margin: 8px 0 0; font-size: 14.5px; }

/* generic */
.tag { font-family: var(--mn); font-size: 9.5px; padding: 2px 7px; border-radius: 5px; }
.tag.ok { background: #E3F3EB; color: var(--ok); } .tag.no { background: #FBE9E7; color: var(--no); }
.tag.am { background: var(--orange-w); color: #B4551A; } .tag.mu { background: #EEECF5; color: var(--ink3); }
.tag.vi { background: var(--violet-w); color: var(--violet); }

.empty { border: 1px dashed var(--line2); border-radius: 12px; padding: 34px; text-align: center; background: var(--wash); }
.empty h4 { font-size: 19px; margin-bottom: 8px; }
.empty p { font-size: 14px; color: var(--ink2); max-width: 48ch; margin: 0 auto 16px; }

/* contributors table */
table.pub { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.pub th { font-family: var(--mn); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); text-align: left; font-weight: 400; padding: 0 10px 9px; border-bottom: 1px solid var(--line2); }
table.pub td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.pub td .s { font-size: 11px; color: var(--ink3); display: block; margin-top: 3px; font-family: var(--mn); }
table.pub .an { font-family: var(--dsp); font-weight: 800; font-size: 15px; color: var(--violet); }

/* search */
.chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.srchform { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
.srchform input, .srchform select { font-family: var(--bd); font-size: 13.5px; border: 1px solid var(--line2); border-radius: 7px; padding: 8px 11px; }
.srchform button { font-family: var(--dsp); font-weight: 700; font-size: 12.5px; background: var(--violet); color: #fff; border: 0; padding: 9px 15px; border-radius: 7px; cursor: pointer; }

@media (max-width: 980px) {
  .lead, .art, .g3, .row { grid-template-columns: 1fr; }
}