/* agentrating.net. Same family as agenticdevelopment.ai, agentdoc.net and
   agentmandate.net (Space Grotesk, IBM Plex, blueprint grid, rail menu).
   This surface's ink is a warm navy on parchment and its lead accent is gold.
   Light is the default; a system that asks for dark gets the dark set unless
   the page says data-theme="light". Every grade is a word as well as a fill:
   investment grade is filled, speculative grade is outlined, default is red. */
:root{
  --ink:#F3F1EA; --panel:#FBFAF6; --panel-2:#E9E6DB; --line:#D8D3C4;
  --paper:#161A24; --dim:#4A4F5C; --faint:#5E6370;
  --accent:#D4AE3A; --accent-ink:#7A5A00; --on-accent:#1C1606;
  --inv:#1D2B4A; --on-inv:#F4F1E6; --spec:#1D2B4A; --dflt:#A3361D; --on-dflt:#FFFFFF;
  --watch:#7A5A00;
  --glow:rgba(212,174,58,.13);
  --disp:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --wire:'IBM Plex Mono', ui-monospace, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#10131A; --panel:#171B24; --panel-2:#1D2230; --line:#2C3242;
    --paper:#EEEBE2; --dim:#A3A8B5; --faint:#8A8F9C;
    --accent-ink:#E2C35A; --inv:#C9D5F2; --on-inv:#10131A; --spec:#C9D5F2; --dflt:#E0745A; --on-dflt:#10131A;
    --watch:#E2C35A; --glow:rgba(226,195,90,.08);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#10131A; --panel:#171B24; --panel-2:#1D2230; --line:#2C3242;
  --paper:#EEEBE2; --dim:#A3A8B5; --faint:#8A8F9C;
  --accent-ink:#E2C35A; --inv:#C9D5F2; --on-inv:#10131A; --spec:#C9D5F2; --dflt:#E0745A; --on-dflt:#10131A;
  --watch:#E2C35A; --glow:rgba(226,195,90,.08);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background-color:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(80% 40% at 40% 0%, var(--glow), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:100% 100%, 64px 64px, 64px 64px;
  background-position:0 0, -1px -1px, -1px -1px;
  background-attachment:fixed, scroll, scroll;
}
a{ color:inherit; }
a:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:4px; }
h1,h2,h3{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.08; }

/* the rail */
.layout{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.rail{ border-right:1px solid var(--line); padding:26px 22px; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }
.brand{ font-family:var(--wire); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; margin-bottom:30px; }
.brand .mk{ font-family:var(--disp); font-weight:700; font-size:.72rem; letter-spacing:.04em; color:var(--on-inv);
  background:var(--inv); border-radius:4px; padding:2px 6px; }
.rail .grp{ font-family:var(--wire); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:16px 0 4px; }
.rail .grp:first-of-type{ margin-top:0; }
.rail nav a{ display:block; font-family:var(--wire); font-size:.8rem; color:var(--dim); text-decoration:none;
  padding:6px 0 6px 12px; margin-left:-12px; border-left:2px solid transparent; }
.rail nav a:hover{ color:var(--paper); }
.rail nav a.on{ color:var(--paper); border-left-color:var(--accent-ink); }
.rail .foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--wire); font-size:.72rem; color:var(--faint); line-height:1.7; }
.rail .foot a{ color:var(--dim); display:block; }

.main{ min-width:0; }
.wrap{ max-width:980px; margin:0 auto; padding:0 40px 40px; }

/* page heads */
.page-head{ padding:56px 0 34px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); margin:0 0 18px; max-width:20ch; letter-spacing:-.035em; }
.turn{ font-size:clamp(1.1rem,1.7vw,1.28rem); color:var(--dim); max-width:56ch; margin:0; }
.turn b{ color:var(--paper); font-weight:600; }
.jump{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.jump a{ font-family:var(--wire); font-size:.78rem; text-decoration:none; color:var(--dim);
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); display:inline-block; }
.jump a:hover{ color:var(--paper); border-color:var(--accent-ink); }

/* prose */
.prose{ padding:8px 0 20px; }
.prose h2{ font-size:clamp(1.45rem,2.4vw,1.9rem); margin:56px 0 12px; max-width:30ch; scroll-margin-top:16px; }
.prose h3{ font-size:1.14rem; margin:30px 0 8px; }
.prose p, .prose li{ color:var(--dim); max-width:66ch; }
.prose p b, .prose li b, .prose td b{ color:var(--paper); font-weight:600; }
.prose a{ color:var(--paper); text-decoration-color:var(--accent-ink); text-underline-offset:3px; }
.prose ul, .prose ol{ padding-left:1.2em; }
.prose li{ margin-bottom:8px; }
.prose code{ font-family:var(--wire); font-size:.86em; background:var(--panel-2); border-radius:4px; padding:1px 5px; }

/* tables */
.tbl{ overflow-x:auto; margin:20px 0 26px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.tbl table{ border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem; }
.tbl th, .tbl td{ text-align:left; vertical-align:top; padding:12px 16px; border-bottom:1px solid var(--line); line-height:1.5; color:var(--dim); }
.tbl th{ font-family:var(--wire); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:500; background:var(--panel-2); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tr.line td{ border-bottom:2px solid var(--accent); }

/* a grade */
.g{ display:inline-flex; align-items:center; justify-content:center; min-width:3.1em; padding:3px 9px; border-radius:6px;
  font-family:var(--disp); font-weight:700; font-size:.98rem; letter-spacing:.02em; white-space:nowrap; }
.g.inv{ background:var(--inv); color:var(--on-inv); }
.g.spec{ border:1.5px solid var(--spec); color:var(--spec); }
.g.dflt{ background:var(--dflt); color:var(--on-dflt); }
.g.nr{ border:1.5px dashed var(--faint); color:var(--dim); }
.tag{ font-family:var(--wire); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.tag.watch{ color:var(--watch); }

/* the scale, drawn */
.scale{ margin:30px 0 8px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; }
.scale .step{ border-radius:10px; padding:16px 10px 12px; text-align:center; }
.scale .step b{ display:block; font-family:var(--disp); font-size:clamp(1.2rem,2.4vw,1.8rem); line-height:1; }
.scale .step span{ display:block; margin-top:8px; font-family:var(--wire); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.scale .inv{ background:var(--inv); color:var(--on-inv); }
.scale .spec{ border:1.5px solid var(--spec); color:var(--spec); background:var(--panel); }
.scale .dflt{ background:var(--dflt); color:var(--on-dflt); }
.scale-key{ display:flex; justify-content:space-between; gap:12px; font-family:var(--wire); font-size:.72rem; color:var(--faint); }
.scale-key b{ color:var(--paper); font-weight:600; }

/* a callout */
.rule{ margin:30px 0; padding:20px 24px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 12px 12px 0;
  font-size:1.1rem; line-height:1.55; color:var(--paper); max-width:66ch; }

/* the badge and the card */
.show{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:start; margin:22px 0 10px; }
.badges{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.bdg{ display:inline-flex; align-items:stretch; height:26px; border-radius:5px; overflow:hidden; font:500 12.5px/26px var(--body); text-decoration:none; white-space:nowrap; }
.bdg .l{ background:#2A2F3B; color:#F1EEE5; padding:0 9px; }
.bdg .r{ padding:0 10px; font-family:var(--disp); font-weight:700; }
.bdg .r.inv{ background:#1D2B4A; color:#F4F1E6; }
.bdg .r.spec{ background:#FFFFFF; color:#1D2B4A; box-shadow:inset 0 0 0 1.5px #1D2B4A; }
.bdg .r.watch{ background:#7A5A00; color:#FFFFFF; font-family:var(--body); font-weight:500; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card .nm{ font-family:var(--disp); font-weight:700; font-size:1.2rem; }
.card .hd{ font-family:var(--wire); font-size:.76rem; color:var(--faint); }
.card .big{ font-family:var(--disp); font-weight:700; font-size:2rem; line-height:1; padding:8px 12px; border-radius:8px; background:var(--inv); color:var(--on-inv); }
.card dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:14px 0 0; font-size:.9rem; }
.card dt{ color:var(--faint); }
.card dd{ margin:0; color:var(--paper); }

/* related standards */
.family{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 0; }
.family a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); text-decoration:none; }
.family a b{ display:block; font-family:var(--disp); color:var(--paper); }
.family a span{ font-size:.9rem; color:var(--dim); }
.family a:hover{ border-color:var(--accent-ink); }

.footer{ margin-top:40px; padding:28px 0 0; border-top:1px solid var(--line); font-family:var(--wire); font-size:.74rem; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:6px 22px; }
.footer a{ color:var(--dim); }

@media (max-width: 860px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:16px 22px 14px; }
  .brand{ margin-bottom:12px; }
  .rail .grp{ display:none; }
  .rail nav{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-bottom:6px; }
  .rail nav a{ padding:5px 10px; margin-left:0; border:1px solid var(--line); border-radius:6px; }
  .rail nav a.on{ border-color:var(--accent-ink); }
  .rail .foot{ display:none; }
  .wrap{ padding:0 22px 40px; }
  .show{ grid-template-columns:1fr; }
  .family{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .wrap{ padding:0 16px 36px; }
  .page-head{ padding:32px 0 26px; }
  .scale{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}