/* ================================================================
   GS Polish — eye-candy layer on the Anthropic palette
   ivory #F0EEE6 · cream #FAF9F5 · charcoal #191919 · terracotta #D97757
   ================================================================ */

/* ---------- Reading rhythm ---------- */
#R-body-inner { line-height: 1.72; }
#R-body-inner > * { max-width: 46rem; }
#R-body-inner h1 { font-size: 2.1rem; margin: 0.6em 0 0.5em; }
#R-body-inner h2 {
  font-size: 1.45rem; margin: 2.2em 0 0.7em; padding-top: 0.4em;
  position: relative;
}
#R-body-inner h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.2rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #D97757, #E8B08E);
}
#R-body-inner h3 { font-size: 1.15rem; margin: 1.6em 0 0.5em; }
#R-body-inner p, #R-body-inner li { font-size: 1.02rem; }
#R-body-inner a { text-underline-offset: 3px; transition: color .15s ease; }
#R-body-inner hr { border: 0; height: 1px; background: #E0DCD1; margin: 2.5em 0; }
#R-body-inner img { border-radius: 12px; box-shadow: 0 4px 20px -6px rgba(25,25,25,.12); }

/* ---------- Notice boxes: soft tinted cards ---------- */
#R-body .box.notices {
  border-radius: 12px; border: 1px solid #E8E4D8;
  box-shadow: 0 1px 3px rgba(25,25,25,.05);
  overflow: hidden; margin: 1.4em 0;
}
#R-body .box.notices > .box-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .5em 1em .45em;
}
#R-body .box.notices > .box-content { padding: .9em 1.1em; background: #FFFFFF; }
#R-body .box.notices.info > .box-label    { background: rgba(217,119,87,.12); color: #B0552F; }
#R-body .box.notices.info                 { border-left: 3px solid #D97757; }
#R-body .box.notices.tip > .box-label     { background: rgba(122,141,100,.14); color: #5C7046; }
#R-body .box.notices.tip                  { border-left: 3px solid #7A8D64; }
#R-body .box.notices.warning > .box-label { background: rgba(180,83,9,.12); color: #92400E; }
#R-body .box.notices.warning              { border-left: 3px solid #B45309; }
#R-body .box.notices.note > .box-label    { background: rgba(107,114,128,.12); color: #4B5563; }
#R-body .box.notices.note                 { border-left: 3px solid #6B7280; }

/* ---------- Expand (quiz/checkpoint) as interactive cards ---------- */
#R-body details.box {
  border-radius: 12px; border: 1px solid #E8E4D8; background: #FFFFFF;
  transition: box-shadow .18s ease, transform .18s ease;
}
#R-body details.box:hover { box-shadow: 0 6px 20px -8px rgba(25,25,25,.14); }
#R-body details.box summary { cursor: pointer; font-weight: 600; }
#R-body details.box[open] { border-left: 3px solid #D97757; }

/* ---------- Code / prompt blocks ---------- */
#R-body div.highlight, #R-body pre {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 18px -8px rgba(25,25,25,.25);
}
#R-body div.highlight pre, #R-body pre { padding: 1.1em 1.25em; line-height: 1.6; }
#R-body code { border-radius: 6px; padding: .12em .4em; }

/* ---------- Tables ---------- */
#R-body table { border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0;
  border: 1px solid #E8E4D8; box-shadow: 0 1px 3px rgba(25,25,25,.05); }
#R-body table th { font-weight: 600; letter-spacing: .02em; padding: .7em 1em; }
#R-body table td { padding: .6em 1em; border-top: 1px solid #EEEBE1; }
#R-body table tr { transition: background .12s ease; }
#R-body table tbody tr:hover { background: rgba(217,119,87,.06); }

/* ---------- Sidebar refinement ---------- */
#R-sidebar { border-right: 1px solid #E0DCD1; }
#R-sidebar .collapsible-menu li > a, #R-sidebar li > a {
  border-radius: 8px; margin: 1px 6px; padding: .32em .6em;
  transition: background .15s ease, color .15s ease;
}
#R-sidebar li > a:hover { background: rgba(217,119,87,.10); }
#R-sidebar li.active > a { font-weight: 600; }

/* ---------- Topbar ---------- */
#R-topbar { border-bottom: 1px solid #E8E4D8; backdrop-filter: blur(8px); }

/* ---------- Blockquote ---------- */
#R-body blockquote {
  border-left: 3px solid #D97757; background: #F5F2EA;
  border-radius: 0 12px 12px 0; padding: .8em 1.2em; font-style: normal; color: #4B4A44;
}

/* ---------- Buttons & prev/next ---------- */
#R-body .btn, #R-body a.btn { border-radius: 999px; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; }
#R-body .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(217,119,87,.4); }
a.topbar-button, #R-topbar .topbar-button { transition: color .15s ease; }

/* ---------- Home hero & session cards ---------- */
.gs-hero {
  background: linear-gradient(135deg, #191919 0%, #33302A 100%);
  color: #FAF9F5; border-radius: 18px; padding: 2.6rem 2.4rem; margin: 1rem 0 2rem;
  position: relative; overflow: hidden;
}
.gs-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(217,119,87,.35), transparent 70%);
}
.gs-hero h1 { color: #FAF9F5 !important; margin: 0 0 .4em !important; font-size: 2.2rem !important; }
.gs-hero h1::before { display: none; }
.gs-hero p { color: #D9D5C9; max-width: 38rem; font-size: 1.06rem; }
.gs-hero .gs-kicker {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #E8B08E; margin-bottom: .8em;
}
.gs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.6rem 0 2rem; max-width: none !important; }
.gs-card {
  display: block; background: #FFFFFF; border: 1px solid #E8E4D8; border-radius: 14px;
  padding: 1.3rem 1.2rem; text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gs-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -14px rgba(25,25,25,.2); border-color: #D97757; }
.gs-card .gs-card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; margin-bottom: .7rem;
  background: rgba(217,119,87,.14); color: #B0552F; font-weight: 700; font-size: .95rem;
}
.gs-card h3 { margin: 0 0 .35rem !important; font-size: 1.06rem !important; color: #191919; }
.gs-card p { margin: 0; font-size: .9rem; color: #6B6A64; line-height: 1.5; }
.gs-card .gs-card-time { display: block; margin-top: .8rem; font-size: .78rem; font-weight: 600; color: #B0552F; letter-spacing: .04em; }

/* ---------- Reading progress ---------- */
#gs-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #D97757, #E8B08E); z-index: 9999;
  transition: width .08s linear;
}

/* ---------- Scrollbar (webkit) ---------- */
#R-body-inner::-webkit-scrollbar { width: 10px; }
#R-body-inner::-webkit-scrollbar-thumb { background: #D9D5C9; border-radius: 6px; }

/* ================================================================
   Sidebar: overflow fix + collapsible + resizable (desktop ≥ 769px)
   ================================================================ */
#R-sidebar { overflow-x: hidden; }
#R-sidebar li > a { max-width: 100%; box-sizing: border-box; }

@media (min-width: 769px) {
  :root {
    --gs-nav-w: 18.75rem;
    --MENU-WIDTH-S: var(--gs-nav-w);
    --MENU-WIDTH-M: var(--gs-nav-w);
    --MENU-WIDTH-L: var(--gs-nav-w);
  }
  #R-sidebar { transition: width .25s ease; }
  #R-body { transition: margin-inline-start .25s ease; }

  /* drag handle on the sidebar's right edge */
  #gs-nav-resizer {
    position: fixed; top: 0; bottom: 0; z-index: 500;
    left: calc(var(--gs-nav-w) - 4px); width: 8px; cursor: col-resize;
  }
  #gs-nav-resizer:hover, #gs-nav-resizer.dragging { background: rgba(217,119,87,.25); }

  /* collapse/expand chevron pinned to the sidebar edge */
  #gs-nav-toggle {
    position: fixed; top: 50%; transform: translateY(-50%);
    left: calc(var(--gs-nav-w) - 13px); z-index: 501;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #E0DCD1; background: #FFFFFF; color: #6B6A64;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
    box-shadow: 0 2px 8px rgba(25,25,25,.12);
    transition: left .25s ease, color .15s ease, border-color .15s ease;
  }
  #gs-nav-toggle:hover { color: #D97757; border-color: #D97757; }

  /* collapsed state */
  html.gs-nav-collapsed { --gs-nav-w: 0rem; }
  html.gs-nav-collapsed #R-sidebar { width: 0 !important; min-width: 0 !important; }
  html.gs-nav-collapsed #gs-nav-resizer { display: none; }
  html.gs-nav-collapsed #gs-nav-toggle { left: 10px; }
  html.gs-nav-body-anim #R-sidebar * { pointer-events: none; }
}
@media (max-width: 768.98px) {
  #gs-nav-toggle, #gs-nav-resizer { display: none; }
}

/* ================================================================
   Sidebar chevrons: keep the section expand arrows visible
   (theme positions them absolutely at the inline start; our nav
   pills must reserve that space instead of covering it)
   ================================================================ */
#R-sidebar ul.collapsible-menu > li > label {
  width: 1.5rem; padding-inline-start: .45rem; z-index: 3;
  display: flex; align-items: center; height: 1.9em;
}
#R-sidebar ul.collapsible-menu > li > label > .fas {
  color: #D97757; font-size: .72rem; width: auto;
  transition: transform .2s ease;
}
#R-sidebar ul.collapsible-menu > li > a {
  padding-inline-start: 1.75rem;
  margin-inline-start: 2px;
}

/* ================================================================
   Design review round 2 — typography, hierarchy, course UX
   ================================================================ */

/* Type engine refinements */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
#R-body-inner h1, #R-body-inner h2, #R-body-inner h3 { text-wrap: balance; }
#R-body-inner h1 { font-size: 2.3rem; line-height: 1.15; letter-spacing: -0.025em; }
#R-body-inner table { font-variant-numeric: tabular-nums; }
html { scroll-padding-top: 4.5rem; }

/* Wider canvas, same comfortable prose measure */
#R-body-inner > * { max-width: 48rem; }

/* Kill the duplicate auto-title above the home hero */
#R-body-inner h1:has(+ .gs-hero) { display: none; }

/* Terracotta list markers + styled summary chevrons */
#R-body-inner ul > li::marker { color: #D97757; }
#R-body-inner ol > li::marker { color: #B0552F; font-weight: 600; }
#R-body details.box summary::marker { color: #D97757; }

/* Sidebar hierarchy: sessions read as chapters, pages as entries */
#R-sidebar ul.collapsible-menu > li > a {
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
}
#R-sidebar ul.collapsible-menu > li > ul a {
  font-weight: 400; font-size: .885rem; color: rgba(80,78,72,.92);
}

/* Search: quiet pill */
#R-sidebar .searchbox {
  border-radius: 999px; overflow: hidden;
  border: 1px solid #E0DCD1; background: #FAF9F5;
}
#R-sidebar .searchbox input { background: transparent; }

/* Copy buttons on dark code blocks stay visible */
#R-body div.highlight .copy-to-clipboard-button,
#R-body pre .copy-to-clipboard-button { color: #F0EEE6; opacity: .75; }
#R-body div.highlight .copy-to-clipboard-button:hover { color: #D97757; opacity: 1; }

/* Bottom prev/next course navigation cards */
#gs-bottom-nav {
  display: flex; gap: 1rem; margin: 3rem 0 1.5rem; max-width: 48rem;
}
#gs-bottom-nav a {
  flex: 1; display: block; padding: 1rem 1.2rem; text-decoration: none;
  background: #FFFFFF; border: 1px solid #E8E4D8; border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#gs-bottom-nav a:hover {
  transform: translateY(-3px); border-color: #D97757;
  box-shadow: 0 12px 28px -12px rgba(25,25,25,.18);
}
#gs-bottom-nav .gs-bn-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #B0552F; margin-bottom: .3rem;
}
#gs-bottom-nav .gs-bn-title { font-weight: 600; color: #191919; font-size: .98rem; }
#gs-bottom-nav a.gs-bn-next { text-align: right; }
@media (max-width: 640px) { #gs-bottom-nav { flex-direction: column; } .gs-hero { padding: 1.8rem 1.4rem; } }

/* ================================================================
   Fix round 3 — duplicate titles, anchor pills, prompt copy button
   ================================================================ */

/* 1. Hide the auto page-title H1 when the content brings its own H1 */
#R-body-inner h1:has(+ h1) { display: none; }

/* 2. Heading anchor buttons: no more gray pills — invisible until
      you hover the heading, then a quiet terracotta link icon */
#R-body span.anchor.copyanchor, #R-body span.anchor.scrollanchor,
#R-body .btn.anchor {
  opacity: 0; background: transparent !important; border: none !important;
  box-shadow: none !important; transition: opacity .15s ease;
}
#R-body h1:hover .btn.anchor, #R-body h2:hover .btn.anchor,
#R-body h3:hover .btn.anchor, #R-body h4:hover .btn.anchor,
#R-body .btn.anchor:focus-within { opacity: .55; }
#R-body .btn.anchor button { background: transparent; border: none; color: #D97757; cursor: pointer; }
.gs-hero .btn.anchor { display: none !important; }

/* 3. Prompt copy button: always-visible terracotta pill inside the block */
#R-body .actionbar-wrapper { position: relative; }
#R-body .actionbar-wrapper pre { padding-top: 2.4em; }
#R-body .actionbar-wrapper .copy-to-clipboard-button,
#R-body .actionbar .copy-to-clipboard-button {
  background: #D97757 !important; color: #FFFFFF !important;
  border: none !important; border-radius: 999px !important;
  padding: .34em .9em !important; font-size: .78rem !important; font-weight: 600;
  opacity: 1 !important; cursor: pointer;
  box-shadow: 0 2px 8px rgba(25,25,25,.25);
  transition: background .15s ease, transform .15s ease;
}
#R-body .copy-to-clipboard-button:hover {
  background: #C15F3F !important; transform: translateY(-1px);
}
#R-body .copy-to-clipboard-button::after {
  content: " Copiar"; font-family: inherit;
}
html[lang^="en"] #R-body .copy-to-clipboard-button::after { content: " Copy"; }

/* ================================================================
   Fix round 4 — kill phantom heading scrollbars ("overflow bars")
   Theme sets overflow-x:hidden on headings -> they become scroll
   containers; tight line-heights + fa-lg anchor icons overflow 1-2px
   vertically -> macOS renders scrollbar thumbs. Make headings
   non-scrollable and hide any residual scrollbar.
   ================================================================ */
#R-body h1, #R-body h2, #R-body h3, #R-body h4, #R-body h5, #R-body h6,
.gs-hero h1, .gs-card h3 {
  overflow: visible !important;
  scrollbar-width: none;
}
#R-body :is(h1,h2,h3,h4,h5,h6)::-webkit-scrollbar,
.gs-hero h1::-webkit-scrollbar { display: none; }
/* anchor icons must not exceed the heading line box */
#R-body .btn.anchor .fa-lg { font-size: 1em; }

/* ================================================================
   Claude logo — sidebar lockup, hero mark, gentle eye candy
   ================================================================ */
.gs-logo-lockup {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1rem .9rem;
}
.gs-logo-mark {
  width: 40px; height: 40px; flex: 0 0 auto;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.gs-logo-lockup:hover .gs-logo-mark { transform: rotate(90deg) scale(1.08); }
.gs-logo-text {
  font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: #191919;
  letter-spacing: -0.01em;
}
.gs-logo-sub {
  display: block; font-weight: 500; font-size: .72rem; color: #8A8778;
  letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem;
}
/* hero mark: quiet starburst watermark, top-right */
.gs-hero .gs-hero-logo {
  position: absolute; right: 2rem; top: 2rem; width: 54px; height: 54px;
  opacity: .9; z-index: 1;
  animation: gs-breathe 6s ease-in-out infinite;
}
@keyframes gs-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.06); opacity: 1; }
}
@media (max-width: 640px) { .gs-hero .gs-hero-logo { width: 36px; right: 1.2rem; top: 1.2rem; } }
@media (prefers-reduced-motion: reduce) {
  .gs-hero .gs-hero-logo { animation: none; }
  .gs-logo-lockup:hover .gs-logo-mark { transform: none; }
}