/* Oxalosuccinate community surfaces: isolated from the atlas and shared shell. */

.community-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(700px 360px at 78% 12%, rgba(115, 230, 174, .07), transparent 72%),
    linear-gradient(135deg, rgba(255, 23, 69, .035), transparent 42%);
}
.community-hero::after {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: clamp(1.4rem, 4vw, 3rem);
  width: clamp(90px, 12vw, 180px);
  aspect-ratio: 1;
  content: "";
  opacity: .18;
  pointer-events: none;
  background:
    linear-gradient(var(--bio), var(--bio)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--bio), var(--bio)) 0 50% / 100% 1px no-repeat;
  border: 1px solid var(--bio);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(115, 230, 174, .14);
}
.community-hero-copy { position: relative; z-index: 1; }
.community-hero h1 { max-width: 1040px; }
.community-hero-copy > p { max-width: 820px; margin: 0; color: #bfc2ca; font-size: clamp(1.03rem, 1.7vw, 1.28rem); }
.community-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.community-hero-register {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: rgba(4, 4, 7, .8);
  backdrop-filter: blur(18px);
}
.community-hero-register span { display: grid; min-height: 92px; align-content: end; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.community-hero-register span:nth-child(2n) { border-right: 0; }
.community-hero-register span:nth-last-child(-n+2) { border-bottom: 0; }
.community-hero-register small { color: var(--dim); font: 650 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.community-hero-register strong { margin-top: .35rem; overflow-wrap: anywhere; color: var(--bio); font: 700 .79rem var(--mono); }

.community-shell { width: min(100%, var(--max)); padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem); margin: auto; }
.community-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.community-section-heading h2 { margin: .65rem 0 0; font-size: clamp(2.6rem, 5.5vw, 5.4rem); font-weight: 300; line-height: .96; letter-spacing: -.06em; }
.community-section-heading > p { margin: 0; padding-left: 1.2rem; border-left: 1px solid var(--brand); color: var(--muted); }
.community-fine { color: var(--dim); font-size: .76rem; }

.community-filter-deck {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(2, minmax(175px, .72fr)) minmax(220px, .9fr) auto;
  gap: .75rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(115, 230, 174, .025), transparent 35%), var(--surface);
}
.community-filter-deck label:not(.community-check) { display: grid; gap: .38rem; color: var(--brand-bright); font: 700 .61rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.community-filter-deck input[type="search"],
.community-filter-deck select,
.notebook-form input,
.notebook-form select,
.notebook-form textarea {
  width: 100%;
  min-height: 46px;
  padding: .7rem .78rem;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: #020204;
  color: var(--ink);
  font: .84rem var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.community-filter-deck input:focus,
.community-filter-deck select:focus,
.notebook-form input:focus,
.notebook-form select:focus,
.notebook-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 23, 69, .06); }
.community-input-wrap { position: relative; display: block; }
.community-input-wrap i { position: absolute; left: .8rem; top: 50%; z-index: 1; color: var(--bio); font: normal 1.15rem var(--mono); transform: translateY(-50%); }
.community-input-wrap input { padding-left: 2.35rem !important; }
.community-check { display: flex; min-height: 46px; align-items: center; gap: .72rem; padding: .5rem .72rem; border: 1px solid var(--line); background: #020204; cursor: pointer; }
.community-check input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--brand); }
.community-check span { display: grid; line-height: 1.2; }
.community-check strong { color: #d6d8dd; font: 650 .66rem var(--mono); }
.community-check small { margin-top: .2rem; color: var(--dim); font-size: .6rem; }
.community-reset { min-height: 46px; padding: .65rem .8rem; border: 0; background: transparent; color: var(--brand-bright); font: 700 .68rem var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.community-result-bar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 56px; padding: .75rem .2rem; border-bottom: 1px solid var(--line); }
.community-result-bar p { margin: 0; color: #c8cad0; font: .7rem var(--mono); }
.community-result-bar > span { color: var(--dim); font: 650 .58rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }

.community-load-state { display: flex; min-height: 170px; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.5rem; padding: 2rem; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.community-load-state[hidden] { display: none; }
.community-load-state strong { display: block; font-size: 1rem; }
.community-load-state p { max-width: 620px; margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }
.community-load-state .button { margin-left: 1rem; }
.community-load-state.is-error { border-color: rgba(255, 103, 128, .38); background: rgba(255, 103, 128, .035); }
.community-loader { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(115, 230, 174, .28); border-top-color: var(--bio); border-radius: 50%; box-shadow: 0 0 20px rgba(115, 230, 174, .12); animation: community-spin 1s linear infinite; }
@keyframes community-spin { to { transform: rotate(1turn); } }
.community-empty { padding: clamp(2rem, 7vw, 5rem); margin-top: 1.5rem; border: 1px solid var(--line); background: radial-gradient(500px 260px at 50% 0, rgba(255, 23, 69, .07), transparent), var(--surface); text-align: center; }
.community-empty[hidden] { display: none; }
.community-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin: auto; border: 1px solid rgba(255, 23, 69, .38); color: var(--brand-bright); font: 700 .73rem var(--mono); }
.community-empty h3 { margin: 1rem 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 350; letter-spacing: -.045em; }
.community-empty p { max-width: 650px; margin: 0 auto 1.4rem; color: var(--muted); }
.community-load-more { display: flex; justify-content: center; padding-top: 2rem; }
.community-noscript-note { padding: 1rem; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

/* Field guide */
.guide-progress { position: sticky; top: 74px; z-index: 42; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.guide-progress progress { display: block; width: 100%; height: 100%; overflow: hidden; border: 0; appearance: none; background: transparent; }
.guide-progress progress::-webkit-progress-bar { background: transparent; }
.guide-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand), var(--bio)); }
.guide-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand), var(--bio)); }
.guide-pathway-card[data-guide-domain="carbohydrate-core"], .guide-domain-card[data-guide-domain="carbohydrate-core"] { --domain-color: #51d9c2; }
.guide-pathway-card[data-guide-domain="sugar-branches-glycans"], .guide-domain-card[data-guide-domain="sugar-branches-glycans"] { --domain-color: #6fd7ff; }
.guide-pathway-card[data-guide-domain="central-energy"], .guide-domain-card[data-guide-domain="central-energy"] { --domain-color: #ffb45d; }
.guide-pathway-card[data-guide-domain="metabolic-integration"], .guide-domain-card[data-guide-domain="metabolic-integration"] { --domain-color: #f7d66c; }
.guide-pathway-card[data-guide-domain="fatty-acid-flow"], .guide-domain-card[data-guide-domain="fatty-acid-flow"] { --domain-color: #ff7e72; }
.guide-pathway-card[data-guide-domain="complex-lipids"], .guide-domain-card[data-guide-domain="complex-lipids"] { --domain-color: #f58bc8; }
.guide-pathway-card[data-guide-domain="lipid-mediators"], .guide-domain-card[data-guide-domain="lipid-mediators"] { --domain-color: #c99bff; }
.guide-pathway-card[data-guide-domain="amino-acid-carbon"], .guide-domain-card[data-guide-domain="amino-acid-carbon"] { --domain-color: #77d68d; }
.guide-pathway-card[data-guide-domain="nitrogen-one-carbon"], .guide-domain-card[data-guide-domain="nitrogen-one-carbon"] { --domain-color: #a5e86f; }
.guide-pathway-card[data-guide-domain="nucleotides"], .guide-domain-card[data-guide-domain="nucleotides"] { --domain-color: #5fc5ff; }
.guide-pathway-card[data-guide-domain="vitamins-cofactors"], .guide-domain-card[data-guide-domain="vitamins-cofactors"] { --domain-color: #f5c95d; }
.guide-pathway-card[data-guide-domain="heme-oxidations"], .guide-domain-card[data-guide-domain="heme-oxidations"] { --domain-color: #ff6969; }
.guide-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.guide-rail-inner { position: sticky; top: 105px; }
.guide-rail h2 { margin: .7rem 0 1.4rem; font-size: 1.25rem; font-weight: 600; }
.guide-rail nav { display: grid; border-top: 1px solid var(--line); }
.guide-rail nav a { display: grid; gap: .1rem; padding: .68rem 0 .68rem .8rem; border-bottom: 1px solid var(--line); border-left: 1px solid transparent; text-decoration: none; }
.guide-rail nav a:hover, .guide-rail nav a[aria-current="location"] { border-left-color: var(--bio); background: linear-gradient(90deg, rgba(115, 230, 174, .05), transparent); }
.guide-rail nav span { color: var(--dim); font: 650 .54rem var(--mono); letter-spacing: .08em; }
.guide-rail nav strong { color: #c8cad0; font-size: .78rem; font-weight: 600; line-height: 1.3; }
.guide-rail nav a[aria-current="location"] strong { color: var(--bio); }
.guide-chapters { display: grid; gap: clamp(3rem, 8vw, 7rem); }
.guide-chapter { position: relative; scroll-margin-top: 110px; padding: clamp(1.6rem, 4vw, 3.5rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(115, 230, 174, .025), transparent 30%), var(--surface); }
.guide-chapter::before, .guide-chapter::after { position: absolute; content: ""; pointer-events: none; }
.guide-chapter::before { left: -1px; top: -1px; width: 34px; height: 1px; background: var(--bio); box-shadow: 0 0 16px rgba(115, 230, 174, .45); }
.guide-chapter::after { left: -1px; top: -1px; width: 1px; height: 34px; background: var(--bio); }
.guide-kicker { color: var(--bio); font: 700 .63rem var(--mono); letter-spacing: .14em; }
.guide-chapter > header h2 { max-width: 900px; margin: 1rem 0; font-size: clamp(2.35rem, 5.5vw, 5.2rem); font-weight: 300; line-height: .96; letter-spacing: -.06em; overflow-wrap: anywhere; }
.guide-summary { max-width: 860px; color: #c3c5cc; font-size: clamp(1.02rem, 1.7vw, 1.23rem); }
.guide-prose { max-width: 860px; padding: 1.5rem 0; border-top: 1px solid var(--line); color: #b9bcc4; }
.guide-prose p { margin: 0 0 1.1rem; }
.guide-ideas { margin: 1rem 0 2.5rem; padding: 1.1rem; border: 1px solid rgba(255, 198, 103, .22); background: rgba(255, 198, 103, .025); }
.guide-ideas h3, .guide-pathways > h3, .guide-sources h3 { margin: 0 0 .8rem; color: var(--amber); font: 700 .62rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.guide-ideas ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; margin: 0; list-style: none; counter-reset: guide-idea; background: rgba(255, 198, 103, .15); }
.guide-ideas li { position: relative; min-height: 118px; padding: 2.4rem 1rem 1rem; background: #070708; color: #c7c5bd; font-size: .82rem; counter-increment: guide-idea; }
.guide-ideas li::before { position: absolute; left: 1rem; top: .8rem; content: "0" counter(guide-idea); color: var(--amber); font: 700 .59rem var(--mono); }
.guide-pathway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.guide-pathway-card { position: relative; display: grid; grid-template-columns: 5px minmax(0, 1fr); padding: 1rem; border: 1px solid var(--line); background: #040406; }
.guide-pathway-card > span { grid-row: 1 / 4; width: 3px; height: 100%; background: var(--domain-color, var(--bio)); box-shadow: 0 0 14px color-mix(in srgb, var(--domain-color, var(--bio)) 45%, transparent); }
.guide-pathway-card > div:not(.guide-card-actions), .guide-pathway-card > p, .guide-card-actions { grid-column: 2; margin-left: .8rem; }
.guide-pathway-card strong { display: block; font-size: .92rem; }
.guide-pathway-card small { display: block; margin-top: .2rem; color: var(--dim); font: .57rem var(--mono); }
.guide-pathway-card p { margin-top: .8rem; margin-bottom: .8rem; color: var(--muted); font-size: .78rem; }
.guide-card-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: auto; }
.guide-card-actions a { color: var(--bio); font: 700 .62rem var(--mono); }
.guide-card-actions a + a { color: var(--cyan); }
.guide-sources { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide-sources ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.guide-sources a { display: flex; gap: .55rem; padding: .48rem .65rem; border: 1px solid var(--line); background: #030304; text-decoration: none; }
.guide-sources a span { color: var(--muted); font: .6rem var(--mono); }.guide-sources a strong { color: var(--cyan); font: 700 .62rem var(--mono); }
.guide-back { display: inline-block; margin-top: 1.7rem; color: var(--dim); font: .63rem var(--mono); }
.guide-domain-ledger { padding-top: clamp(4rem, 8vw, 7rem); }
.guide-domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guide-domain-card { display: flex; min-height: 470px; flex-direction: column; padding: clamp(1.25rem, 3vw, 2.2rem); border: 1px solid var(--line); border-top: 2px solid var(--domain-color, var(--bio)); background: linear-gradient(160deg, color-mix(in srgb, var(--domain-color, var(--bio)) 5%, transparent), var(--surface) 35%); }
.guide-domain-card header > span { color: var(--domain-color, var(--bio)); font: 700 .61rem var(--mono); letter-spacing: .1em; }
.guide-domain-card h3 { margin: .65rem 0; font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 350; letter-spacing: -.045em; }
.guide-domain-card header p { color: var(--muted); }
.guide-domain-card ul { padding: 0; margin: auto 0 1.5rem; list-style: none; border-top: 1px solid var(--line); }
.guide-domain-card li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.guide-domain-card li div { display: grid; }.guide-domain-card li strong { font-size: .77rem; }.guide-domain-card li small { color: var(--dim); font: .56rem var(--mono); }
.guide-domain-card li a { color: var(--cyan); font: 700 .61rem var(--mono); }
.guide-domain-card > .button { align-self: flex-start; }

/* Metabolite passports */
.metabolite-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 1.5rem; }
.metabolite-grid[hidden] { display: none; }
.metabolite-passport { display: flex; min-height: 510px; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); background: linear-gradient(150deg, rgba(85, 216, 255, .025), transparent 38%), var(--surface); }
.metabolite-passport:hover { border-color: rgba(115, 230, 174, .35); }
.passport-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.passport-kind { color: var(--cyan); font: 700 .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.passport-head h3 { margin: .75rem 0 .2rem; overflow-wrap: anywhere; font-size: clamp(1.5rem, 2.7vw, 2.25rem); font-weight: 380; line-height: 1.04; letter-spacing: -.045em; }
.passport-head p { margin: 0; color: var(--bio); font-size: .76rem; }
.passport-instance-count { flex: 0 0 auto; padding: .3rem .45rem; border: 1px solid var(--line); color: var(--dim); font: .56rem var(--mono); }
.passport-flags { display: flex; flex-wrap: wrap; gap: .35rem; padding: 1rem 0; margin-top: 1.2rem; border-top: 1px solid var(--line); }
.passport-flags span { padding: .24rem .4rem; border: 1px solid rgba(115, 230, 174, .2); color: #9fd9bd; font: .55rem var(--mono); }
.passport-identifiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.passport-identifiers div { min-height: 65px; padding: .65rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.passport-identifiers dt, .passport-context h4 { color: var(--dim); font: 650 .54rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.passport-identifiers dd { margin: .2rem 0 0; overflow-wrap: anywhere; color: #ced0d5; font-size: .68rem; }
.passport-context { margin-bottom: .85rem; }
.passport-context h4 { margin: 0 0 .45rem; }
.community-chip-row { display: flex; flex-wrap: wrap; gap: .32rem; }
.community-chip-row span { padding: .28rem .4rem; border: 1px solid var(--line); color: #aeb2ba; font: .56rem var(--mono); }
.community-chip-row .is-remainder { color: var(--bio); }.community-chip-row .is-unavailable { color: var(--dim); font-style: italic; }
.passport-actions { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--line); }
.passport-actions a { color: var(--bio); font: 700 .64rem var(--mono); }.passport-actions a + a { color: var(--cyan); }
.community-method-strip { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); }
.community-method-strip h2 { margin: .8rem 0; font-size: clamp(2.3rem, 5vw, 4.8rem); font-weight: 320; line-height: .98; letter-spacing: -.055em; }
.community-method-strip ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.community-method-strip li { display: grid; align-content: start; min-height: 150px; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.community-method-strip strong { color: var(--bio); font: 700 .68rem var(--mono); }.community-method-strip span { margin-top: .6rem; color: var(--muted); font-size: .79rem; }

/* Cofactor lens */
.cofactor-filter { grid-template-columns: minmax(280px, 1fr) minmax(240px, .55fr) auto; }
.cofactor-load-state { min-height: 110px; }
.cofactor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 1.5rem; }
.cofactor-card { display: flex; min-height: 490px; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255, 198, 103, .035), transparent 30%), var(--surface); }
.cofactor-card[hidden] { display: none; }
.cofactor-card:hover { border-color: rgba(255, 198, 103, .38); }
.cofactor-card > header { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 1rem; align-items: center; }
.cofactor-symbol { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255, 198, 103, .36); color: var(--amber); font: 700 .8rem var(--mono); box-shadow: inset 0 0 24px rgba(255, 198, 103, .04); }
.cofactor-role { color: var(--dim); font: 650 .54rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cofactor-card h3 { margin: .35rem 0 0; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.cofactor-explanation { min-height: 145px; margin: 1.3rem 0; color: #b5b8c0; font-size: .85rem; }
.cofactor-connection-summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 0; margin-top: auto; border-top: 1px solid var(--line); }
.cofactor-connection-summary span { color: var(--dim); font: .58rem var(--mono); text-transform: uppercase; }.cofactor-connection-summary strong { color: var(--bio); font: 700 .61rem var(--mono); text-align: right; }
.cofactor-reactions { border-top: 1px solid var(--line); }
.cofactor-reactions summary { display: flex; justify-content: space-between; gap: .7rem; padding: .8rem 0; color: #d3d5d9; font: 650 .65rem var(--mono); cursor: pointer; }
.cofactor-reactions summary small { color: var(--dim); font-size: .55rem; }
.cofactor-reactions ol { display: grid; max-height: 330px; gap: 0; overflow: auto; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.cofactor-reactions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.cofactor-reactions li > div { display: grid; gap: .2rem; }.cofactor-reactions li strong { font-size: .68rem; line-height: 1.35; }.cofactor-reactions li small { color: var(--dim); font: .54rem/1.4 var(--mono); }
.cofactor-reactions li > div:last-child { align-content: start; gap: .4rem; }.cofactor-reactions li a { color: var(--cyan); font: 700 .57rem var(--mono); }
.cofactor-reactions > p { color: var(--dim); font-size: .75rem; }
.cofactor-reading-key { border-top: 1px solid var(--line); }
.cofactor-key-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.cofactor-key-grid article { min-height: 210px; padding: 1.2rem; background: var(--surface); }
.cofactor-key-grid article > span { color: var(--amber); font: 700 .62rem var(--mono); }.cofactor-key-grid h3 { margin: 3rem 0 .5rem; font-size: 1.1rem; }.cofactor-key-grid p { color: var(--muted); font-size: .78rem; }

/* Private study notebook */
.community-hero-notebook { align-items: center; }
.community-privacy-card { position: relative; z-index: 2; padding: 1.5rem; border: 1px solid rgba(115, 230, 174, .25); background: linear-gradient(145deg, rgba(115, 230, 174, .05), transparent 45%), #050507; }
.community-privacy-mark { display: inline-flex; padding: .32rem .45rem; border: 1px solid rgba(115, 230, 174, .4); color: var(--bio); font: 700 .58rem var(--mono); letter-spacing: .13em; }
.community-privacy-card h2 { margin: 1.7rem 0 .8rem; font-size: 1.65rem; font-weight: 400; letter-spacing: -.035em; }
.community-privacy-card p { color: var(--muted); font-size: .84rem; }.community-privacy-card code { color: var(--cyan); }
.community-privacy-card ul { display: grid; gap: 0; padding: 0; margin: 1.3rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.community-privacy-card li { padding: .55rem 0; border-bottom: 1px solid var(--line); color: #c7c9ce; font: .63rem var(--mono); }
.community-privacy-card li::before { margin-right: .55rem; color: var(--bio); content: "✓"; }
.notebook-heading { align-items: center; }
.notebook-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--line); }
.notebook-stats div { padding: .85rem; border-right: 1px solid var(--line); }.notebook-stats div:last-child { border-right: 0; }
.notebook-stats dt { color: var(--dim); font: 650 .55rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.notebook-stats dd { margin: .25rem 0 0; color: var(--bio); font: 700 .78rem var(--mono); }
.notebook-status { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .65rem .8rem; margin-bottom: 2rem; border: 1px solid rgba(115, 230, 174, .2); background: rgba(115, 230, 174, .025); }
.notebook-status > span { width: 8px; height: 8px; border-radius: 50%; background: var(--bio); box-shadow: 0 0 12px rgba(115, 230, 174, .55); }.notebook-status p { margin: 0; color: #bfc3c9; font: .64rem var(--mono); }
.notebook-status.is-error { border-color: rgba(255, 103, 128, .35); background: rgba(255, 103, 128, .035); }.notebook-status.is-error > span { background: var(--danger); box-shadow: 0 0 12px rgba(255, 103, 128, .5); }
.notebook-tour { margin-bottom: 3rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(173, 136, 255, .035), transparent 32%), var(--surface); }
.notebook-tour > header { display: grid; grid-template-columns: 1fr minmax(260px, 460px); gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.notebook-tour h3 { margin: .65rem 0 0; font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 350; line-height: 1.02; letter-spacing: -.05em; }.notebook-tour > header p { margin: 0; color: var(--muted); }
.notebook-tour ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; padding: 0; margin: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.notebook-tour li { background: #050507; }
.notebook-tour label { position: relative; display: block; height: 100%; min-height: 310px; padding: 1rem; cursor: pointer; }
.notebook-tour input { position: absolute; right: 1rem; top: 1rem; width: 24px; height: 24px; accent-color: var(--bio); }
.notebook-tour label > span { display: flex; height: 100%; flex-direction: column; padding-top: 2.3rem; }
.notebook-tour small { color: var(--violet); font: 700 .55rem var(--mono); }.notebook-tour strong { margin: 1rem 0 .5rem; font-size: .94rem; line-height: 1.3; }.notebook-tour em { color: var(--muted); font-size: .73rem; font-style: normal; }.notebook-tour a { margin-top: auto; padding-top: 1rem; color: var(--bio); font: 700 .6rem var(--mono); }
.notebook-tour input:checked + span strong { color: var(--bio); }.notebook-tour input:checked + span { opacity: .72; }
.notebook-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.notebook-panel { border: 1px solid var(--line); background: var(--surface); }
.notebook-panel > header { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.notebook-panel-index { color: var(--brand-bright); font: 700 .65rem var(--mono); }.notebook-panel h3 { margin: 0 0 .35rem; font-size: 1.45rem; font-weight: 450; }.notebook-panel header p { margin: 0; color: var(--muted); font-size: .78rem; }
.notebook-form { display: grid; gap: .8rem; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.notebook-form label { display: grid; gap: .35rem; color: var(--brand-bright); font: 700 .59rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }.notebook-form label small { color: var(--dim); text-transform: lowercase; }.notebook-form textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.notebook-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr); gap: .8rem; }
.notebook-form .button { justify-self: start; }
.notebook-list { display: grid; gap: .65rem; max-height: 700px; overflow: auto; padding: 1.25rem; }
.notebook-list-empty { padding: 1.25rem; color: var(--dim); font-size: .8rem; }.notebook-list-empty[hidden] { display: none; }.notebook-list-empty p { margin: 0; }
.notebook-item { padding: 1rem; border: 1px solid var(--line); background: #030304; }
.notebook-item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }.notebook-item-head > span { color: var(--cyan); font: 700 .57rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }.notebook-item-head button { min-width: 44px; min-height: 32px; padding: .2rem .35rem; border: 0; background: transparent; color: var(--danger); font: 650 .57rem var(--mono); }
.notebook-item h4 { margin: 1rem 0 .25rem; font-size: 1.05rem; }.notebook-item > code { display: block; color: var(--bio); font-size: .62rem; }.notebook-item > p { white-space: pre-wrap; overflow-wrap: anywhere; color: #b9bcc3; font-size: .79rem; }
.notebook-item footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; margin-top: .8rem; border-top: 1px solid var(--line); }.notebook-item time { color: var(--dim); font: .54rem var(--mono); }.notebook-item footer a { color: var(--bio); font: 700 .59rem var(--mono); }
.notebook-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); gap: 2rem; align-items: end; padding: clamp(1.4rem, 4vw, 2.5rem); margin-top: 2rem; border: 1px solid rgba(115, 230, 174, .24); background: linear-gradient(125deg, rgba(115, 230, 174, .04), transparent 42%), var(--surface); }
.notebook-data h3 { margin: .6rem 0; font-size: clamp(1.65rem, 4vw, 3rem); font-weight: 360; letter-spacing: -.045em; }.notebook-data p { max-width: 760px; margin: 0; color: var(--muted); }
.notebook-data-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }.notebook-import { position: relative; cursor: pointer; }.notebook-import input.visually-hidden { inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; clip: auto; cursor: pointer; }.notebook-import:has(input:focus-visible) { outline: 3px solid var(--brand-bright); outline-offset: 4px; }.notebook-clear { color: var(--danger); }
.notebook-data > .community-fine { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 1200px) {
  .community-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); }
  .community-filter-deck { grid-template-columns: minmax(250px, 1.5fr) repeat(2, minmax(170px, 1fr)); }
  .community-filter-deck .community-check { grid-column: 1 / 3; }.community-filter-deck .community-reset { justify-self: end; }
  .cofactor-filter { grid-template-columns: minmax(280px, 1fr) minmax(220px, .6fr) auto; }.cofactor-filter .community-reset { justify-self: stretch; }
  .metabolite-grid, .cofactor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notebook-tour ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notebook-tour li:nth-last-child(-n+2) { min-height: 280px; }
}

@media (max-width: 900px) {
  .community-hero { grid-template-columns: 1fr; align-items: start; }
  .community-hero-register { width: min(100%, 580px); }
  .community-section-heading, .community-method-strip, .notebook-tour > header, .notebook-data { grid-template-columns: 1fr; }
  .community-section-heading > p { padding-left: 0; padding-top: 1rem; border-top: 1px solid var(--brand); border-left: 0; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-rail-inner { position: static; }.guide-rail nav { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); }.guide-rail nav a { border-right: 1px solid var(--line); }
  .guide-domain-grid { grid-template-columns: 1fr; }.guide-domain-card { min-height: 0; }
  .cofactor-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notebook-columns { grid-template-columns: 1fr; }
  .notebook-data-controls { max-width: 600px; }
}

@media (max-width: 680px) {
  .community-hero::after { opacity: .1; }
  .community-hero h1 { font-size: clamp(3rem, 16vw, 5.2rem); }
  .community-hero-actions .button { flex: 1 1 100%; }
  .community-hero-register span { min-height: 78px; padding: .75rem; }
  .community-shell { padding-right: 1rem; padding-left: 1rem; }
  .community-filter-deck, .cofactor-filter { grid-template-columns: 1fr; padding: .8rem; }
  .community-filter-deck .community-check { grid-column: auto; }.community-filter-deck .community-reset, .cofactor-filter .community-reset { justify-self: stretch; }
  .community-result-bar { align-items: flex-start; flex-direction: column; padding: .8rem 0; }
  .community-load-state { align-items: flex-start; flex-direction: column; }.community-load-state .button { margin-left: 0; }
  .guide-progress { top: 68px; }
  .guide-rail nav { grid-template-columns: 1fr; }
  .guide-chapter { padding: 1.25rem; }.guide-chapter > header h2 { font-size: clamp(2.15rem, 12vw, 3.7rem); }
  .guide-ideas ol, .guide-pathway-grid { grid-template-columns: 1fr; }
  .guide-ideas li { min-height: 95px; }
  .guide-pathway-card { grid-template-columns: 4px minmax(0, 1fr); }
  .metabolite-grid, .cofactor-grid { grid-template-columns: 1fr; }
  .metabolite-passport, .cofactor-card { min-height: 0; }
  .cofactor-explanation { min-height: 0; }
  .community-method-strip ol, .cofactor-key-grid { grid-template-columns: 1fr; }
  .community-method-strip li, .cofactor-key-grid article { min-height: 0; }.cofactor-key-grid h3 { margin-top: 1.5rem; }
  .notebook-stats { width: 100%; }
  .notebook-tour ol { grid-template-columns: 1fr; }.notebook-tour label { min-height: 240px; }
  .notebook-form-row, .notebook-data-controls { grid-template-columns: 1fr; }
  .notebook-form .button, .notebook-data-controls .button { width: 100%; }
  .notebook-data { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
  .community-hero { padding-right: .9rem; padding-left: .9rem; }
  .community-hero h1 { font-size: clamp(2.85rem, 15vw, 4rem); }
  .community-hero-register { grid-template-columns: 1fr; }
  .community-hero-register span, .community-hero-register span:nth-child(2n) { min-height: 66px; border-right: 0; border-bottom: 1px solid var(--line); }
  .community-hero-register span:last-child { border-bottom: 0; }
  .community-section-heading h2 { font-size: 2.55rem; }
  .passport-head { flex-direction: column; }.passport-instance-count { align-self: flex-start; }
  .passport-identifiers { grid-template-columns: 1fr; }
  .passport-actions { align-items: flex-start; flex-direction: column; }
  .cofactor-card > header { grid-template-columns: 48px minmax(0, 1fr); }.cofactor-symbol { width: 48px; height: 48px; }
  .cofactor-connection-summary, .cofactor-reactions summary { align-items: flex-start; flex-direction: column; }
  .cofactor-reactions li { grid-template-columns: 1fr; }
  .notebook-stats { grid-template-columns: 1fr; }.notebook-stats div { border-right: 0; border-bottom: 1px solid var(--line); }.notebook-stats div:last-child { border-bottom: 0; }
  .notebook-panel > header { grid-template-columns: 1fr; }.notebook-item footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .community-loader { animation: none; border-color: var(--bio); }
  .guide-progress progress { transition: none; }
}