/* MohammadHossein Rezaei -- site styles.
   One theme, deliberately: the page is black, there is no light variant to
   keep in sync and no toggle to design. */

:root {
    --bg:   #000;
    --text: #f2f2f0;   /* reads as white; a hair off #fff, which vibrates */
  }

  * { box-sizing: border-box; }

  /* Negation, taken literally: every sentence on the page gets negated,
     in red, so you can see exactly what was inserted. */
  .neg { color: #ff3b30; font-weight: 600; }

  /* Rubric storm: criteria scattered over the page, purely decorative, so
     they never intercept a click. */
  .rcrit {
    position: fixed;
    z-index: 5;
    font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .rcrit.on { opacity: 0.92; transform: none; }

  /* Cacti grow up out of the bottom edge. The wrapper's height is animated
     and clips the drawing, so the plant is revealed from the ground up
     rather than scaled -- scaling would distort the stroke weight. */
  .cactus {
    position: fixed;
    bottom: 0;
    z-index: 1;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: height 1.7s cubic-bezier(0.16, 0.8, 0.3, 1);
  }
  .cactus svg { position: absolute; bottom: 0; left: 0; display: block; }
  .cactus path {
    fill: none;
    stroke: var(--text);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (prefers-reduced-motion: reduce) {
    .cactus { transition: height 0.3s linear; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rcrit { transition: opacity 0.2s ease; transform: none; }
  }

  html { height: 100%; }
  body.home { height: 100%; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 17px/1.6 system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* The one-screen layout belongs to the homepage alone. Scoped to .home
     because these rules previously applied to every page sharing this
     stylesheet, and `overflow: hidden` made the publications page
     impossible to scroll on any viewport wider than 40rem.

     Column: the page block takes the free space and centres itself, the
     terminal sits underneath. Nothing scrolls; the transcript scrolls
     inside its own box instead. */
  body.home {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  main {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 0;          /* lets the flex child actually shrink */
    overflow: hidden;       /* the page is clipped as it rides up and out */
  }

  .wrap {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 2rem 1.75rem 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  /* The page recedes one step per exchange (set inline from JS) rather than
     dropping to its final opacity on the first message. */

  a { color: inherit; text-decoration: underline;
      text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
  a:hover { text-decoration: none; }

  /* Papers referenced inside the prose. Unstyled at rest so they do not
     compete with the sentence; the underline only shows on hover, so they
     are still findable. */
  .q { text-decoration: none; }
  .q:hover { text-decoration: underline; text-decoration-thickness: 1px;
             text-underline-offset: 0.17em; }

  .photo {
    float: right;
    width: 108px; height: 108px;
    margin: 0.3rem 0 1rem 1.75rem;
  }

  h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em;
       margin: 0 0 1.1rem; }

  p { margin: 0 0 1.1rem; }

  /* Publications sit apart from the social links: their own block, with a
     few recent papers so the section says something on its own. */
  .pubs { margin: 1.6rem 0 0; }
  .pubs .head { font-weight: 600; }

  /* Navigation, not a paper. Italic, smaller and arrowed so it reads as a way
     out of the list rather than as another entry in it. */
  .pubs .more {
    margin-top: 0.9rem;
    font-size: 0.85em;
    font-style: italic;
  }
  .pubs .more a { text-decoration: none; }
  .pubs .more a:hover { text-decoration: underline;
                        text-decoration-thickness: 1px;
                        text-underline-offset: 0.17em; }
  .pub {
    display: flex;
    gap: 1.2rem;
    align-items: baseline;
    font-size: 0.9em;
    margin-top: 0.35rem;
  }
  .pub .t { flex: 1 1 auto; }
  .pub .v { flex: 0 0 auto; font-style: italic; }
  @media (max-width: 34rem) {
    .pub { display: block; }
    .pub .v { display: block; }
  }

  .links { margin: 1.4rem 0 0; }
  .links i { font-style: normal; padding: 0 0.5rem; opacity: 0.45; }

  /* ---- Terminal -------------------------------------------------------- */
  #term {
    position: relative;
    z-index: 3;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.75rem 1.5rem;
    font: 400 13.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  /* Deliberately uncapped. The log grows, which squeezes <main>, which
     pushes the page up and eventually off the top of the screen. Only once
     the terminal has taken the whole viewport does the log itself scroll,
     so the newest lines are always the visible ones. */
  #log {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0.4rem;
    scrollbar-width: none;
  }
  #log::-webkit-scrollbar { display: none; }
  #log div { margin: 0.1rem 0; white-space: pre-wrap; }
  /* The "> " prefix already separates your lines from ELIZA's, so neither
     needs to be dimmed to tell them apart. */
  #log .u::before { content: "> "; }
  #log .sys { font-weight: 600; }

  .prompt { display: flex; align-items: baseline; gap: 0.5ch; }
  .prompt span { flex: 0 0 auto; }

  #in {
    flex: 1 1 auto;
    background: none;
    border: 0;
    outline: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    caret-color: var(--text);
  }
  #in::placeholder { color: var(--text); opacity: 0.38; }

  /* ---- Easter egg: online rubrics elicitation ------------------------ */
  #onrub {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    max-width: 94vw;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--bg);
    outline: 1px solid var(--text);
    font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  #onrub.on { opacity: 1; }
  @media (max-width: 40rem) { #onrub { font-size: 10px; } }

  /* ---- Easter egg: RGSD token-level distillation --------------------- */
  #rgsd {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    max-width: 94vw;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--bg);
    outline: 1px solid var(--text);
    font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  #rgsd.on { opacity: 1; }
  @media (max-width: 40rem) { #rgsd { font-size: 10px; } }

  /* ---- Easter egg: reward-hacking curves ----------------------------- */
  #hack {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: min(620px, 94vw);
    padding: 0.8rem 0.9rem 0.6rem;
    background: var(--bg);
    outline: 1px solid var(--text);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  #hack.on { opacity: 1; }
  #hack svg { display: block; width: 100%; height: auto; max-width: 600px; }
  #hack text { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
               fill: var(--text); }
  #hack path, #hack line { fill: none; stroke: var(--text); }


  /* ---- Easter egg: EgoNormia scene inference ------------------------- */
  #ego {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    max-width: 92vw;
    padding: 0.85rem 1rem 0.9rem;
    background: var(--bg);
    outline: 1px solid var(--text);
    font: 400 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  #ego.on { opacity: 1; }
  @media (max-width: 40rem) { #ego { font-size: 10px; } }

  /* ---- Easter egg: rubric panel ---------------------------------------- */
  #rubric {
    position: fixed; right: 1.5rem; top: 1.5rem;
    width: 17rem; padding: 0.9rem 1rem 1rem;
    background: var(--bg); outline: 1px solid var(--text);
    font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    display: none;
  }
  #rubric.on { display: block; }
  #rubric h3 { font: inherit; font-weight: 700; margin: 0 0 0.6rem; }
  #rubric ul { list-style: none; margin: 0; padding: 0; }
  #rubric .score { margin-top: 0.7rem; }
  #rubric button { margin-top: 0.7rem; background: none; color: inherit;
    border: 0; padding: 0; font: inherit; text-decoration: underline;
    cursor: pointer; }
  #rubric .verdict { margin-top: 0.7rem; }

  /* Below 40rem the one-screen conceit stops working: the content is taller
     than the viewport, and the flex layout was clipping the top and bottom
     rather than letting anyone reach them. Fall back to an ordinary
     scrolling document, with the prompt stuck to the bottom edge. */
  @media (max-width: 40rem) {
    /* Safari zooms in on focus if the field is under 16px. The log stays at
       its own size; only the field the keyboard targets is bumped. */
    #in { font-size: 16px; }

    html { height: auto; }
    body.home { height: auto; display: block; overflow: auto; }
    main { display: block; overflow: visible; }
    .wrap { padding: 2rem 1.25rem 1rem; }
    #term {
      position: sticky;
      bottom: 0;
      background: var(--bg);
      padding: 0.5rem 1.25rem 1rem;
    }
    #log { max-height: 45vh; }
    /* long monospace lines scroll sideways inside their own panel rather
       than pushing the whole page wide */
    #ego, #rgsd, #onrub { overflow-x: auto; }
  }


/* ---- Publications page --------------------------------------------- */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 17px/1.6 system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 48rem; margin: 0 auto; padding: 4rem 1.75rem 6rem; }

  a { color: inherit; }

  header { margin-bottom: 2.4rem; }
  h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.3rem; }
  .back { font-size: 0.94em; }
  .back a { text-decoration: none; }
  .back a:hover { text-decoration: underline; text-underline-offset: 0.17em; }

  h2 { font-size: 0.95rem; font-weight: 400; font-style: italic;
       margin: 3.1rem 0 1.15rem; }

  /* Each paper is a block with room around it, so the page reads as a list of
     things rather than as continuous text. */
  .entry { margin-bottom: 2.2rem; }

  /* The title is not a link: the bracketed tags below carry every
     destination, which keeps underlines off the prose entirely. */
  .row { display: flex; gap: 1.5rem; align-items: baseline; }
  .row .t { flex: 1 1 auto; font-weight: 600; font-size: 0.94em; }
  /* The title links to the paper, but is not styled as a link: the underline
     appears on hover, so the page keeps its clean look and the obvious thing
     to click is still the title. */
  .row .t .t-link { text-decoration: none; }
  .row .t .t-link:hover { text-decoration: underline; text-decoration-thickness: 1px;
                          text-underline-offset: 0.17em; }
  .row .v { flex: 0 0 auto; font-style: italic; font-size: 0.86em; }

  .a { font-size: 0.81em; line-height: 1.45; margin-top: 0.3rem; }
  .a a { text-decoration: none; }
  .a a:hover { text-decoration: underline; text-decoration-thickness: 1px;
               text-underline-offset: 0.17em; }
  .a b { font-weight: 700; }

  .tags { font-size: 0.78em; margin-top: 0.45rem; }
  .tags a { text-decoration: none; margin-right: 0.55em; }
  .tags a:hover { text-decoration: underline; text-underline-offset: 0.17em; }
  .eq { font-style: italic; }

  @media (max-width: 34rem) {
    .wrap { padding: 2.5rem 1.25rem 4rem; }
    .row { display: block; }
    .row .v { display: block; }
  }


/* ---- 404 ------------------------------------------------------------ */
body.notfound {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nf { padding: 2rem 1.5rem; }
.nf p { margin: 0; }
.nf-sub { margin-top: 0.5rem; font-size: 0.9em; font-style: italic; }