/* ==========================================================
   The Advisor's Day — page-specific styles
   ========================================================== */

/* ─── Day-clock (vertical, in hero accent) ─── */
.day-clock {
  width: 320px; max-width: 100%; margin: 0 auto;
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 18px; box-shadow: var(--shadow-lg);
  position: relative;
}
.day-clock-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--red); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px; text-align: center;
}
.day-clock ol { list-style: none; padding: 0; margin: 0; }
.day-clock li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 8px;
  cursor: pointer; transition: background .2s;
  text-decoration: none; color: var(--navy);
}
.day-clock li:hover { background: var(--bg-alt); }
.day-clock li + li { border-top: 1px solid var(--border-light); }
.day-clock-num {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: .06em; min-width: 22px;
}
.day-clock-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); flex-shrink: 0;
}
.day-clock-icon svg { width: 14px; height: 14px; }
.day-clock-label { font-size: 13px; font-weight: 600; }
.day-clock-time { font-size: 11px; color: var(--muted); margin-left: auto; font-family: var(--font-mono); }

/* ─── Role Lens (sticky pill switcher) ─── */
.role-lens {
  position: sticky; top: 70px; z-index: 50;
  margin: 32px auto 0; max-width: max-content;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1.5px solid var(--border); border-radius: 100px;
  padding: 4px; display: flex; gap: 2px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, border-color .25s;
}
@media (prefers-reduced-transparency: reduce) {
  .role-lens { backdrop-filter: none; background: #fdfdfe; }
}
.role-lens.shadowed { box-shadow: var(--shadow-md); border-color: rgba(15,23,41,.08); }
.role-lens-btn {
  padding: 7px 16px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--slate);
  background: transparent; border: none; border-radius: 100px;
  cursor: pointer; transition: all .25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.role-lens-btn:hover:not(.active) { color: var(--navy); }
.role-lens-btn.active { background: var(--navy); color: white; box-shadow: var(--shadow-sm); }
.role-lens-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lens-color, var(--muted)); }
.role-lens-btn.active .role-lens-dot { background: white; }

@media (max-width: 720px) {
  .role-lens { top: 64px; padding: 3px; }
  .role-lens-btn { padding: 6px 11px; font-size: 11px; }
}

/* ─── Day Flow (horizontal 7-step spine) ─── */
.day-flow-wrap {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 22px; box-shadow: var(--shadow-md);
  max-width: 1100px; margin: 0 auto;
}
.day-flow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px; position: relative;
}
.day-flow::before {
  content: ''; position: absolute;
  top: 23px; left: 7%; right: 7%;
  height: 2px; background: var(--border); z-index: 0;
}
.df-step {
  background: transparent; border: none;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; padding: 0; position: relative; z-index: 1;
  color: inherit; text-decoration: none;
  transition: transform .25s var(--ease-spring);
}
.df-step:hover { transform: translateY(-3px); }
.df-step-circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: white; border: 2.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--muted); margin-bottom: 10px;
  transition: all .3s var(--ease-out);
}
.df-step:hover .df-step-circle {
  border-color: var(--df-color, var(--red));
  color: var(--df-color, var(--red));
  box-shadow: 0 4px 16px rgba(15,23,41,.1);
}
.df-step-icon { width: 18px; height: 18px; }
.df-step-name {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.3;
}
.df-step-tool {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  margin-top: 3px;
}

@media (max-width: 880px) {
  .day-flow { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
  .day-flow::before { display: none; }
}
@media (max-width: 480px) {
  .day-flow { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Step section scaffold ─── */
.step-section {
  position: relative; padding: 88px 24px;
  border-top: 1px solid var(--border-light);
}
.step-section.alt { background: var(--bg-alt); }
.step-section .container { max-width: 1080px; }

.step-bg-num {
  position: absolute; top: 32px; right: 28px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(120px, 18vw, 220px);
  color: var(--bg-alt); line-height: 1; letter-spacing: -.05em;
  pointer-events: none; z-index: 0; user-select: none;
}
.step-section.alt .step-bg-num { color: white; }
.step-section > .container { position: relative; z-index: 1; }

.step-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--step-color, var(--red));
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.step-eyebrow::before {
  content: ''; width: 16px; height: 2px;
  background: var(--step-color, var(--red)); border-radius: 1px;
}
.step-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  color: var(--navy); margin-bottom: 8px;
}
.step-moment {
  font-size: 14px; color: var(--slate); font-style: italic;
  margin-bottom: 36px; max-width: 560px;
}

/* Two-column block layout for surface tile + workflow */
.step-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 28px; margin-bottom: 28px;
  align-items: start;
}
@media (max-width: 880px) { .step-grid { grid-template-columns: 1fr; } }

/* Surface tile (the M365 surface that fits the moment) */
.step-surface {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  position: relative; overflow: hidden;
}
.step-surface::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--step-color, var(--red));
}
.step-surface-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-surface-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--step-bg, var(--red-light));
  color: var(--step-color, var(--red));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-surface-icon svg { width: 18px; height: 18px; }
.step-surface-name {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
}
.step-surface-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; }
.step-surface-list { list-style: none; padding: 0; margin: 0; }
.step-surface-list li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; font-size: 13px; color: var(--navy-soft); line-height: 1.5;
  border-top: 1px solid var(--border-light);
}
.step-surface-list li:first-child { border-top: none; }
.step-surface-list li::before {
  content: '→'; color: var(--step-color, var(--red));
  font-weight: 700; flex-shrink: 0;
}

/* Before / With AI mini-comparison */
.step-ba {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.step-ba-col {
  padding: 16px 18px; border-radius: var(--radius); background: white;
  border: 1.5px solid var(--border);
}
.step-ba-col.with { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: rgba(22,163,74,.18); }
.step-ba-col h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 10px;
}
.step-ba-col.with h4 { color: #16a34a; }
.step-ba-col ul { list-style: none; padding: 0; margin: 0; }
.step-ba-col li {
  font-size: 12px; color: var(--navy-soft); line-height: 1.5;
  padding: 4px 0; display: flex; align-items: flex-start; gap: 6px;
}
.step-ba-col li::before { content: '·'; color: var(--muted); font-weight: 700; flex-shrink: 0; }
.step-ba-col.with li::before { content: '✓'; color: #16a34a; }

@media (max-width: 540px) { .step-ba { grid-template-columns: 1fr; } }

/* Workflow numbered mini-flow */
.step-workflow {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  margin-bottom: 28px;
}
.step-workflow-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--step-color, var(--red));
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.step-workflow-list { list-style: none; padding: 0; margin: 0; counter-reset: wf; }
.step-workflow-list li {
  position: relative; padding: 10px 0 10px 38px;
  border-top: 1px solid var(--border-light);
  font-size: 13px; color: var(--navy-soft); line-height: 1.5;
  counter-increment: wf;
}
.step-workflow-list li:first-child { border-top: none; }
.step-workflow-list li::before {
  content: counter(wf, decimal-leading-zero);
  position: absolute; left: 0; top: 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--step-color, var(--red));
  letter-spacing: .04em;
}
.step-workflow-list li strong { color: var(--navy); font-weight: 600; }

/* Role lines (the lens-aware lines) */
.step-roles {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  margin-bottom: 24px;
}
.step-roles-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--slate); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.step-roles-list { list-style: none; padding: 0; margin: 0; }
.step-roles-list li {
  padding: 10px 0; border-top: 1px solid var(--border-light);
  font-size: 13px; color: var(--navy-soft); line-height: 1.55;
  display: flex; align-items: flex-start; gap: 12px;
  transition: opacity .25s;
}
.step-roles-list li:first-child { border-top: none; }
.role-tag {
  flex-shrink: 0; padding: 2px 9px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.role-tag.pm { background: #eff6ff; color: #3b82f6; }
.role-tag.advisor { background: #f5f3ff; color: #7c3aed; }
.role-tag.analyst { background: #ccfbf1; color: #0d9488; }
.role-tag.specialist { background: #fef2f2; color: #E61E28; }

/* Lens-driven dimming (body[data-lens="<role>"] dims others) */
body[data-lens="pm"]        .step-roles-list li:not([data-role="pm"]),
body[data-lens="advisor"]   .step-roles-list li:not([data-role="advisor"]),
body[data-lens="analyst"]   .step-roles-list li:not([data-role="analyst"]),
body[data-lens="specialist"] .step-roles-list li:not([data-role="specialist"]) {
  opacity: .35;
}
body[data-lens="pm"]        .step-roles-list li[data-role="pm"],
body[data-lens="advisor"]   .step-roles-list li[data-role="advisor"],
body[data-lens="analyst"]   .step-roles-list li[data-role="analyst"],
body[data-lens="specialist"] .step-roles-list li[data-role="specialist"] {
  background: var(--bg-alt); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px;
}

/* Trust pill + Tool Arsenal link row */
.step-foot {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding-top: 8px;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: #f0fdf4;
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 100px; font-size: 12px; color: #166534; font-weight: 500;
}
.trust-pill svg { width: 14px; height: 14px; flex-shrink: 0; color: #16a34a; }
.step-deeper {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--step-color, var(--red));
  margin-left: auto;
}
.step-deeper svg { width: 13px; height: 13px; transition: transform .3s var(--ease-spring); }
.step-deeper:hover svg { transform: translateX(3px); }

/* ─── Worked Day timelines ─── */
.worked-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; max-width: 1080px; margin: 0 auto;
}
@media (max-width: 880px) { .worked-grid { grid-template-columns: 1fr; } }

.worked-day {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
  position: relative; overflow: hidden;
}
.worked-day::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--worked-color, var(--red));
}
.worked-day-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.worked-day h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -.02em;
}
.worked-day-saving {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--worked-color, var(--red));
  letter-spacing: .04em;
}
.worked-day-sub { font-size: 12px; color: var(--muted); margin-bottom: 18px; }

.worked-list { list-style: none; padding: 0; margin: 0; }
.worked-list li {
  position: relative; padding: 10px 0 10px 60px;
  border-top: 1px solid var(--border-light);
}
.worked-list li:first-child { border-top: none; }
.worked-time {
  position: absolute; left: 0; top: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--worked-color, var(--red)); letter-spacing: .04em;
  width: 50px;
}
.worked-step {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--navy); margin-bottom: 2px;
}
.worked-detail { font-size: 12px; color: var(--slate); line-height: 1.5; }

/* (next-grid now lives in chapters.css — shared across pages) */

/* Ensure copy button on dark blocks shows correctly when reused outside prompting */
.dom-copy { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .day-clock li,
  .role-lens,
  .role-lens-btn,
  .df-step-circle,
  .step-roles-list li { transition: none !important; }
  .df-step,
  .df-step:hover,
  .step-deeper svg,
  .step-deeper:hover svg { transition: none !important; transform: none !important; }
}