/* =============================================================================
   USMLE PULSE — Evil Dog V2.0

   Scoped entirely under html.edog2, which lib/evil-dog-v2.js adds only for
   accounts on the allowlist. Without that class not one rule below matches, so
   this stylesheet is inert for everyone else even though it is linked on shared
   pages.

   IT IS THE SAME WEBSITE, WEARING A DIFFERENT COAT
   An earlier version of this file repainted everything into its own dark
   palette. That was wrong: it fought the site's own light/dark system, broke
   the theme toggle, and made the edition feel like a different product.

   So the colours here come from the site's own tokens — --paper, --paper-2,
   --line, --text, --text-muted, --brand — which main.css already flips under
   [data-theme="dark"]. Light mode and dark mode therefore both work, and they
   work for the same reason the rest of the site does. The only thing this file
   adds is ONE accent, the warm orange from the artwork, defined once per mode.
   ========================================================================== */

/* The single accent, in both modes. Everything else is inherited. */
html.edog2 {
  /* TEXT accent — must clear 4.5:1 against --paper. Measured 4.87:1 on
     #f7f6f3. The artwork's own orange is far too light for this job (3.16:1),
     which is why the two are not the same value. */
  --e-orange:      #b34d13;
  /* PLATE — the button face. Deliberately a settled terracotta rather than the
     artwork's neon orange: at a full page width these are three large blocks
     of colour, and the brighter mix was tiring to sit in front of. This one
     clears 4.5:1 against white at ANY size, so the label no longer depends on
     staying above the large-text threshold to be readable. */
  --e-plate-top:   #c4551a;
  --e-plate-mid:   #b34d13;
  --e-plate-deep:  #9c4409;
  --e-orange-soft: #fdeee2;   /* tint behind hover states and chips */
  --e-glow:        rgba(240, 115, 33, .38);
}
html[data-theme="dark"].edog2 {
  /* Only the TEXT accent changes with the page. On dark paper it can be bright:
     7.94:1 on #0c151c.

     The PLATE deliberately does NOT change. It is a solid block of colour with
     a cream label on it, so its contrast is a property of the button alone and
     has nothing to do with the page behind it. Lightening it for dark mode —
     which an earlier version did — only pushed the label down to 2.78:1 and
     broke a button that had been fine. */
  --e-orange:      #ff8c33;
  --e-orange-soft: #2a1a0f;
  --e-glow:        rgba(255, 140, 51, .45);
}

/* ===========================================================================
   HEADER
   The site's real header stays — logo, brand, theme toggle, log out. The JS
   only swaps the contents of .nav-links for the three tabs and hides the
   handful of actions that would be a fourth destination. That keeps the
   edition recognisably USMLE Pulse and means the theme toggle keeps working,
   which is the whole point of this rewrite.
   =========================================================================== */
html.edog2 .nav-links a {
  position: relative;
  font-weight: 700;
}
/* The active tab is marked with the accent rather than the usual teal, so the
   edition has a signature without anything being restyled wholesale. */
html.edog2 .nav-links a[aria-current="page"] { color: var(--e-orange); }
html.edog2 .nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--e-orange);
}
html.edog2 .nav-links a:hover { color: var(--e-orange); }

/* Three tabs is a short row, so it is centred rather than left hanging off the
   brand. Desktop only: below 860px the header collapses into its own menu and
   this must not interfere with it. */
@media (min-width: 861px) {
  html.edog2 .site-header .container { justify-content: flex-start; }
  html.edog2 .site-header .nav-menu { flex: 1 1 auto; }
  html.edog2 .site-header .nav-links { margin-inline: auto; }
}

/* Hidden because the edition has exactly three destinations. The theme toggle,
   Admin (moderators only) and Log out are controls, not destinations, so they
   stay — Admin in particular is how you get back out after previewing. */
html.edog2 .site-header .notif-bell,
html.edog2 .site-header a[href="dashboard.html"] { display: none !important; }

/* ===========================================================================
   THE HOMEPAGE
   The artwork is shown as a framed picture rather than a full-bleed background.

   The right-hand third of the image is a PAINTED set of buttons. Those are art,
   not controls, so the picture is cropped to exclude them and real buttons sit
   alongside in their place. An earlier version instead laid a dark gradient
   over that side — which also swallowed the "Hi Ola" speech bubble, the most
   personal thing in the image. Cropping keeps the greeting and loses only the
   part that was being replaced anyway.

   The crop is done with background-size rather than by editing the file, so the
   original artwork is untouched and can be swapped without redoing the maths.
   Source image is 1536x1024; the painted buttons begin at about x=930.
   =========================================================================== */
.edog2-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}
.edog2-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}

.edog2-art {
  position: relative;
  /* the proportions of the cropped region, not of the whole file */
  aspect-ratio: 930 / 1024;
  border-radius: 20px;
  overflow: hidden;
  /* The default is written HERE, in the stylesheet, and is therefore resolved
     relative to this file. Do not move this path into an inline style via a
     custom property: a url() inside a custom property resolves against the
     sheet where the var() is used, which silently produced
     assets/css/assets/img/... and a broken image. */
  background-image: var(--edog-hero, url("../img/evil-dog-v2/hero.jpg"));
  background-repeat: no-repeat;
  /* 1536 / 930 = 165.2% — draws the image wide enough that the visible box
     shows exactly x = 0..930, i.e. everything except the painted buttons. */
  background-size: 165.2% auto;
  background-position: left center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg, 0 24px 48px -18px rgba(0,0,0,.45));
}
/* A whisper of warmth along the join, so the picture and the buttons read as
   one composition instead of two panels sitting next to each other. */
.edog2-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 72%, var(--e-glow) 130%);
}

.edog2-menu { display: grid; gap: clamp(.6rem, 1.5vw, .9rem); }

/* The button, rebuilt from the artwork: warm orange plate, light top edge,
   deep shadow. Identical in both modes — it is the accent, so it should look
   the same whichever way the page is set. */
.edog2-btn {
  display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1rem);
  padding: clamp(.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 14px; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255, 190, 140, .28);
  /* One soft gradient instead of a gloss highlight stacked on a bright ramp.
     The old version had a white sheen across the top and a glow around the
     outside; at this size that reads as three glossy slabs rather than three
     things to press. */
  background: linear-gradient(180deg, var(--e-plate-top), var(--e-plate-deep));
  color: #fff;
  /* The body typeface, not the display one. The display face is a heavy
     poster font — right for a headline, tiring for three stacked labels. */
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  letter-spacing: .005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 200, .28),
    0 6px 16px -12px rgba(0, 0, 0, .55);
  transition: transform .14s ease, box-shadow .18s, filter .18s;
}
.edog2-btn-ico { flex: none; display: grid; place-items: center; opacity: .95 }
.edog2-btn-ico svg { width: clamp(23px, 3vw, 31px); height: clamp(23px, 3vw, 31px); display: block }
.edog2-btn-txt { flex: 1 }
.edog2-btn-go { flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s }
.edog2-btn-go svg { width: 19px; height: 19px; display: block }

.edog2-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 200, .34),
    0 12px 24px -14px rgba(0, 0, 0, .6);
}
.edog2-btn:hover .edog2-btn-go { opacity: .95; transform: translateX(0) }
.edog2-btn:active { transform: translateY(1px) scale(.995) }
.edog2-btn:focus-visible { outline: 3px solid var(--e-orange); outline-offset: 3px }

/* Entrance: picture, then the three plates, once, on load. */
.edog2-art, .edog2-menu .edog2-btn { animation: edogIn .5s cubic-bezier(.16,1,.3,1) both }
.edog2-art { animation-delay: .02s }
.edog2-menu .edog2-btn:nth-child(1) { animation-delay: .16s }
.edog2-menu .edog2-btn:nth-child(2) { animation-delay: .24s }
.edog2-menu .edog2-btn:nth-child(3) { animation-delay: .32s }
@keyframes edogIn {
  from { opacity: 0; transform: translateY(12px) scale(.98) }
  to   { opacity: 1; transform: none }
}

/* PHONES AND TABLETS
   The picture keeps the SAME geometry as desktop, because that geometry shows
   the cropped artwork whole: 165.2% wide anchored left removes the painted
   buttons, and an aspect ratio of 930/1024 — the crop's own proportions —
   means there is nothing left over to cut vertically either.

   Earlier breakpoints used landscape boxes (16/11, then 4/3) to stop the
   picture being tall on a phone. Measured, those showed only y 139..833 of the
   1024: the top of the "Hi Ola" speech bubble and the dog's feet were both
   sliced off — the two things the picture is actually of.

   A portrait picture on a portrait screen is the right answer. At 375px wide
   it comes out 378px tall, which leaves the three buttons comfortably on
   screen. Do not reintroduce a landscape box here. */
@media (max-width: 820px) {
  .edog2-hero-in { grid-template-columns: 1fr; gap: 1.1rem }
  .edog2-art {
    aspect-ratio: 930 / 1024;
    background-size: 165.2% auto;
    background-position: left center;
    border-radius: 16px;
    /* Only for short or landscape viewports, where the natural height would
       run off the screen. A tall portrait phone never reaches this, so the
       crop above stays intact in the case that matters. */
    max-height: 62vh;
  }
  /* Tighter spacing on one column: this is what buys the third button its
     place on screen, before any cropping is considered. */
  .edog2-hero { padding-top: .9rem; padding-bottom: 1.4rem }
}

/* SHORT SCREENS (a 360x640 phone, or anything in landscape).
   The three buttons matter more than the last few pixels of pavement, so the
   picture gives up just enough height for them to fit above the fold.

   The trade is measured, not guessed: at 360x640 this takes the picture from
   353px to 320px, which crops about 48 original pixels from the top and the
   same from the bottom. The speech bubble starts at y=85 and the dog ends at
   y=935, so both survive with room to spare. Do not tighten this further
   without re-checking those two numbers. */
@media (max-width: 820px) and (max-height: 720px) {
  /* Release the aspect ratio and set the height outright.

     Two wrong turns to avoid here. max-height alone left the box narrower than
     the buttons and visibly off to one side. Adding margin-inline:auto to
     centre it collapsed the element to 2x2px, because a block with both
     aspect-ratio and auto side margins shrink-wraps its (empty) content.

     An explicit height with aspect-ratio:auto keeps the box full width and
     crops a little from the top and bottom instead — about 58 original pixels
     each side at 360x640. The bubble starts at y=85 and the dog ends at y=935,
     so both are still clear. */
  .edog2-art {
    aspect-ratio: auto;
    height: calc(100vh - 320px);
    min-height: 190px;
  }
  .edog2-hero { padding-top: .6rem; padding-bottom: 1rem }
  .edog2-hero-in { gap: .8rem }
}

/* ===========================================================================
   THE PLAN PAGE
   Three things only: University V2.0, the garden and the market.

   plan.js switches the page into its own `uni2-mode` when the Uni 2.0 tab is
   selected, and that mode hides the garden and the shop. Right for the normal
   site, wrong here — so the two are put back with a more specific selector.
   No colours are touched: the panels keep the site's own card styling and
   therefore keep working in both light and dark.
   =========================================================================== */
html.edog2 .cal-always,
html.edog2 .plan-grid,
html.edog2 .plan-duo,
html.edog2 [data-plan-challenges],
html.edog2 .nbme-card,
html.edog2 .anki-gate,
html.edog2 .uni-card:not(.uni2-card),
/* The read-mode slider. The container is .readmode-wrap — an earlier version
   listed .rm-tabs, which does not exist in the markup, so the slider was never
   actually hidden. planBoot() still clicks the Uni 2.0 button inside it; a
   display:none element is perfectly clickable from script. */
html.edog2 .readmode-wrap,
html.edog2 .plan-head .sub,                 /* "Set your module order…" */
html.edog2 .plan-tips,                      /* Anki / Pulse Notes / high-yield */
html.edog2 [data-examdate],                 /* the "when is your exam" countdown */
html.edog2 [data-plan-until],
html.edog2 [data-demo-banner],
html.edog2 [data-trial-banner],
html.edog2 .plan-progress { display: none !important; }

html.edog2 body.uni2-mode .garden-card,
html.edog2 body.uni2-mode .shop-card { display: block !important; }
html.edog2 .garden-card,
html.edog2 .shop-card { display: block; }

/* ===========================================================================
   ACCENT TOUCHES
   Small and deliberate. The edition should feel like it belongs to one person,
   not like a re-skin — so the accent lands on the things she actually presses,
   and everything else keeps the site's own look in both modes.
   =========================================================================== */
html.edog2 .btn-primary,
html.edog2 .pomo-btn.pomo-primary {
  background: linear-gradient(180deg, var(--e-plate-top), var(--e-plate-deep));
  border-color: rgba(255, 190, 130, .5);
  color: #fff;
}
html.edog2 .pomo-mode.is-active { background: var(--e-orange); color: #fff }
html.edog2 .pomo-link:hover { color: var(--e-orange) }
html.edog2 .qb-due-pill { background: var(--e-orange-soft); color: var(--e-orange) }
html.edog2 .qb-ch { border-left-color: var(--e-orange) }
html.edog2 .qb-dot.is-seen { background: var(--e-orange) }
html.edog2 .qb-scope { color: var(--e-orange) }
html.edog2 .qb-progressbar > span { background: var(--e-orange) }

/* ===========================================================================
   REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.edog2 .edog2-art,
  html.edog2 .edog2-menu .edog2-btn { animation: none !important; transition: none !important }
  html.edog2 .edog2-btn:hover { transform: none }
}