/* ============================================================
   DEARLY — case study identity.
   Self-directed exploration, no real Figma exports yet, so screens
   are placeholders (.cs-ph, from imprint.css) standing in for the
   real recreations, same convention as the Rio Tinto case study.
   Colour identity: jade + cool blue, the same forecast palette the
   project itself designs toward — reusing that choice as the site's
   accent felt more honest than picking an arbitrary brand colour.
   Structural layout reuses the generic .cs-* case-study classes;
   this file only adds the Dearly colour identity + a few components
   specific to this case study's narrative.
   ============================================================ */

:root {
  --dl-primary: #1F7A5C;
  --dl-primary-deep: #175C45;
  --dl-tint: #E3F3EC;
  --dl-tint-2: #CFE7DC;
  --dl-accent: #4C7EA8;
  --dl-accent-tint: #E5EEF5;
  --dl-red: #C2483E;
  --dl-red-bg: #FBEAE8;
  --dl-green: #1F7A5C;
  --dl-green-bg: #E3F3EC;
}

/* ---- scope generic .cs- accent colours to Dearly's palette ---- */
.dl-theme .cs-hb-mark .a { background: var(--dl-tint-2); border-color: var(--dl-primary); }
.dl-theme .cs-hb-mark .b { background: var(--dl-primary); }
.dl-theme .cs-dir-tag.win { color: var(--dl-primary); background: var(--dl-tint); }
.dl-theme .cs-dir-tag.mid { color: var(--dl-accent); background: var(--dl-accent-tint); }
.dl-theme .cs-dir-tag.fail { color: var(--dl-red); background: var(--dl-red-bg); }
.dl-theme .cs-dec.hero { border-color: var(--dl-primary); box-shadow: 0 0 0 1px var(--dl-primary), 0 24px 50px -30px rgba(31,122,92,.4); }
.dl-theme .cs-dec-tag.hero, .dl-theme .cs-dec-tag.note { color: var(--dl-primary); background: var(--dl-tint); }
.dl-theme .cs-dec-tag.win { color: var(--dl-green); background: var(--dl-green-bg); }
.dl-theme .cs-dec-tag.fail { color: var(--dl-red); background: var(--dl-red-bg); }
.dl-theme .cs-callout::after { color: var(--dl-primary); }
.dl-theme .cs-build-item .star { color: var(--dl-primary); }
.dl-theme .cs-em-card { background: linear-gradient(135deg, #E8F4EF 0%, #EAF1F7 100%); }
.dl-theme .cs-em-card::after { color: var(--dl-primary); }
.dl-theme .cs-next-link:hover .nl-t, .dl-theme .cs-next-link:hover .cs-next-arrow { color: var(--dl-primary); }
.dl-theme .cs-toggle button.on { color: var(--dl-primary-deep); }
.dl-theme .cs-ph { border-color: rgba(31,122,92,.3); }
.dl-theme .cs-ph .lbl { color: var(--dl-primary-deep); }

/* ---- "at a glance" stat strip (hero) ---- */
.dl-glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; }
@media (max-width: 900px) { .dl-glance { grid-template-columns: repeat(2, 1fr); } }
.dl-glance-cell { background: var(--card); padding: 20px 18px; }
.dl-glance-v { font-size: clamp(19px, 2.1vw, 24px); font-weight: 700; letter-spacing: -.02em; color: var(--dl-primary); }
.dl-glance-l { font-size: 12px; color: var(--ink-mute); margin-top: 6px; line-height: 1.4; }

/* ---- two-questions split cards ---- */
.dl-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 760px) { .dl-twocol { grid-template-columns: 1fr; } }
.dl-qcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 28px 30px; }
.dl-qcard .k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--dl-primary); margin-bottom: 12px; display: block; }
.dl-qcard p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; }

/* ---- three-step clarifying-question screen sequence ---- */
.dl-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 820px) { .dl-steps3 { grid-template-columns: 1fr; } }

/* ---- persona bio card (Ellie / Sam, no goals-frustrations split) ---- */
.dl-persona-id { display: flex; flex-direction: column; justify-content: center; }

/* ---- real prototype screenshots (full phone frame, no browser chrome) ----
   Default (.dl-steps3 grid, hero) sizing is unconstrained-width since those
   columns are already narrow and even. Inside .cs-mrow, though, the image
   sits in a wide flex-ish grid column next to a short text block — with no
   height cap a tall portrait screenshot blew up far larger than everything
   else on the page, so that context gets an explicit height cap instead. */
.dl-shot { display: flex; flex-direction: column; }
.dl-shot img { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 0 40px 70px -40px rgba(20, 40, 30, .35), 0 1px 0 rgba(0,0,0,.03); }
.dl-shot.hero { max-width: 340px; margin: 0 auto; }
.dl-shot.hero img { border-radius: 34px; }
.cs-mrow .dl-shot { max-width: 260px; margin: 0 auto; }
.cs-mrow .dl-shot img { max-height: 460px; width: auto; max-width: 100%; margin: 0 auto; }

/* ---- live interactive prototype embed (real iframe, clickable) ----
   The prototype's own page already lays itself out as phone-mock + a
   "now showing" screen-picker sidebar side by side — that sidebar IS the
   navigation, so the embed just needs to be wide enough to show both
   panels at their natural size, not a narrow phone-only crop. */
.dl-embed { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dl-embed-frame {
  width: 100%; max-width: 900px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(20, 40, 30, .35), 0 1px 0 rgba(0,0,0,.03);
}
.dl-embed-cap { font-size: 13px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; margin-top: 18px; text-align: center; }

/* ---- branded thumbnail for the work-page card ---- */
.thumb-dearly-brand {
  background:
    radial-gradient(circle at 22% 28%, #CFE7DC 0%, transparent 55%),
    radial-gradient(circle at 80% 78%, #DCE8F1 0%, transparent 55%),
    linear-gradient(135deg, #EAF6F0 0%, #EAF1F8 100%);
  position: relative; overflow: hidden;
}
.thumb-dearly-brand .ti-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(31,122,92,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,122,92,.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.thumb-dearly-brand .ti-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; }
.thumb-dearly-brand .ti-mark { width: 54px; height: 54px; position: relative; flex-shrink: 0; }
.thumb-dearly-brand .ti-mark span { position: absolute; width: 34px; height: 34px; border-radius: 10px; }
.thumb-dearly-brand .ti-mark .a { top: 0; left: 0; background: var(--dl-tint-2); border: 2.5px solid var(--dl-primary); }
.thumb-dearly-brand .ti-mark .b { bottom: 0; right: 0; background: var(--dl-primary); }
.thumb-dearly-brand .ti-word { font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.045em; color: #1C2A18; white-space: nowrap; }
.thumb-dearly-brand .thumb-tag { background: rgba(255,255,255,.92); }
.thumb-dearly-brand .thumb-label { color: var(--ink-mute); opacity: .9; }