/* agent-mode.css — "For Agents" machine-readable layer, shared across every page. */

/* ── ICON-ONLY NAV TOGGLES, EXPAND ON HOVER ──
   Both circle buttons in the nav (.cs-theme-toggle light/dark toggle, and
   .agent-mode-toggle which also carries the .cs-theme-toggle class) ship
   their text label inline in every page's own CSS (home.css/case-study.css/
   projects.css/about.css/play.css/resume.css/mini-folio.css each redefine
   the button's padding/gap independently - see the changelog note on why).
   Rather than touch every one of those, this single block (loaded on every
   page, right after core.css) collapses the button to a plain 32px circle
   by default and expands it back out to its normal padded/labeled shape on
   hover/focus - !important throughout since none of those page-specific
   blocks use !important on these properties, so this always wins regardless
   of CSS load order. */
.cs-theme-toggle {
  width: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  /* width target on hover is a plain px number (not max-content/auto) -
     transitions to/from those keywords don't reliably interpolate across
     browsers and just snap instead of animating, which read as janky. */
  transition: width 0.4s cubic-bezier(0.65,0,0.35,1), color 0.2s, border-color 0.2s, background 0.2s !important;
}
.cs-theme-toggle:hover,
.cs-theme-toggle:focus-visible {
  width: 132px !important;
  padding: 0 14px !important;
  gap: 6px !important;
}
/* "For Agents: Active" runs noticeably longer than "Toggle Mode" / plain
   "For Agents" - its own wider target keeps that state from clipping. */
.agent-mode-toggle:hover,
.agent-mode-toggle:focus-visible {
  width: 168px !important;
}
.cs-theme-toggle span,
.cs-theme-toggle .agent-mode-label,
.cs-theme-toggle .agent-mode-emoji {
  display: inline-block !important;
  opacity: 0;
  width: 0;
  margin: 0 !important;
  overflow: hidden;
  white-space: nowrap !important;
  transition: opacity 0.18s ease, width 0.4s cubic-bezier(0.65,0,0.35,1);
}
.cs-theme-toggle:hover span,
.cs-theme-toggle:hover .agent-mode-label,
.cs-theme-toggle:hover .agent-mode-emoji,
.cs-theme-toggle:focus-visible span,
.cs-theme-toggle:focus-visible .agent-mode-label,
.cs-theme-toggle:focus-visible .agent-mode-emoji {
  opacity: 1;
  width: auto;
  transition: opacity 0.25s ease 0.12s, width 0.4s cubic-bezier(0.65,0,0.35,1);
}
/* The agent toggle's emoji sits before the icon-hiding label and should
   stay visible even collapsed (it IS the icon for that button) - only its
   text label collapses. */
.agent-mode-toggle .agent-mode-emoji { opacity: 1 !important; width: auto !important; }
@media (max-width: 900px) {
  /* Buttons already condense to icon-only permanently below this
     breakpoint (existing site-wide rule) - no hover on touch devices, so
     skip the width animation entirely there. */
  .cs-theme-toggle,
  .cs-theme-toggle:hover,
  .cs-theme-toggle:focus-visible {
    width: 32px !important;
    padding: 0 !important;
  }
}

.agent-mode-toggle {
  position: relative;
  font-family: var(--mono, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Fixed size for the emoji itself so it reads the same as the neighboring
   15-18px SVG nav icons instead of inheriting whatever text size happens
   to be ambient on a given page. Two-class selectors here so this beats
   the sitewide mobile `.cs-theme-toggle span { display: none }` rule
   (core.css / home.css / case-study.css) that collapses the toggle to an
   icon-only circle — that rule should hide the text label, not the emoji. */
.agent-mode-toggle .agent-mode-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.agent-mode-toggle .agent-mode-label { display: inline; }

/* Condense to icon-only at the same breakpoint the theme toggle collapses
   at (case-study.css/home.css/core.css: 860px / 900px depending on page),
   instead of disappearing at a different, narrower breakpoint — the two
   nav circle buttons should condense together, not one before the other. */
@media (max-width: 900px) {
  .agent-mode-toggle { display: none !important; }
}
.agent-mode-toggle.active {
  color: #fff !important;
  background: rgba(120, 200, 140, 0.22) !important;
  border-color: rgba(120, 200, 140, 0.6) !important;
}
.theme-light .agent-mode-toggle.active {
  color: rgba(20, 90, 40, 0.95) !important;
  background: rgba(60, 160, 90, 0.14) !important;
  border-color: rgba(60, 160, 90, 0.55) !important;
}

.agent-mode-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(10, 9, 8, 0.95);
  color: rgba(255, 255, 255, 0.85);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--serif, sans-serif);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 10;
}
.agent-mode-toggle:hover .agent-mode-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Make sure the toggle (and rest of nav) always stays clickable above the overlay,
   and the custom flower cursor (#orb, normally z-index:9999) still draws on top
   instead of vanishing behind the full-viewport layer. */
body.agent-mode .nav,
body.agent-mode #site-nav {
  z-index: 2147483000 !important;
}
body.agent-mode #orb {
  z-index: 2147483001 !important;
}

/* Freeze background motion / video / audio while the layer is up so nothing
   keeps animating or fetching behind the text layer. */
body.agent-mode * {
  animation-play-state: paused !important;
  transition: none !important;
}

#agent-readable-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  overflow-y: auto;
  background: #0d0d0d;
  color: #d8f0d8;
  padding: 180px 24px 80px;
  font-family: var(--mono, 'DM Mono', 'Courier New', monospace);
}
body.agent-mode #agent-readable-layer { display: block; }
/* Dark by default (matches this site's own dark-by-default pages); flips to a
   light terminal palette when the page's own light/dark toggle is set to light. */
body.theme-light #agent-readable-layer { background: #fefefe; color: #262420; }
body.theme-light .arl-inner h1 { color: #141210; }
body.theme-light .arl-inner h2 { color: #1f7a4c; border-top-color: rgba(20,18,16,0.16); }
body.theme-light .arl-inner strong { color: #141210; }
body.theme-light .arl-eyebrow { color: #1f7a4c; }
body.theme-light .arl-note { color: rgba(20,18,16,0.5); }
body.theme-light .arl-contact a { color: #1f7a4c; }

.arl-eyebrow {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9be89b;
  margin-bottom: 10px;
}

.arl-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: inherit;
}
.arl-inner h1 {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  color: #ffffff;
}
.arl-inner h2 {
  font-family: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px dashed rgba(216, 240, 216, 0.25);
  color: #9be89b;
}
.arl-inner h2:first-of-type { border-top: 0; padding-top: 0; }
.arl-inner p { font-family: inherit; font-size: 13px; line-height: 1.7; margin: 0 0 12px; }
.arl-inner ul { margin: 0 0 8px; padding-left: 20px; }
.arl-inner li { font-family: inherit; font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
.arl-inner strong { font-weight: 700; color: #ffffff; }
.arl-inner a { color: #9be89b; text-decoration: underline; text-underline-offset: 2px; }
.arl-inner a:hover { color: #ffffff; }
body.theme-light .arl-inner a { color: #1f7a4c; }
body.theme-light .arl-inner a:hover { color: #141210; }
.arl-note {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(216, 240, 216, 0.5);
  margin-bottom: 28px;
}
.arl-contact {
  margin-top: 8px;
  font-family: inherit;
  font-size: 13px;
}
.arl-contact a { color: #9be89b; }

@media (max-width: 700px) {
  #agent-readable-layer { padding-left: 16px; padding-right: 16px; }
  .arl-eyebrow { font-size: 10px; }
  .arl-inner h1 { font-size: 13.5px; }
  .arl-inner h2 { font-size: 11px; margin: 28px 0 10px; padding-top: 16px; }
  .arl-inner p, .arl-inner li, .arl-note, .arl-contact { font-size: 12px; }
}