/* Shared stylesheet for the public /guides/* pages.
   Mirrors the DOM structure and tokens of src/screens/tasks/TaskDetail.tsx
   so a guide page reads as the same screen as an in-app task detail.
   Tailwind class equivalents are noted inline for traceability. */

:root {
  --guide-bg: #F5F3F0;          /* var(--app-surface) */
  --guide-card-bg: #FFFFFF;
  --guide-border: #E8E8E8;
  --guide-text: #1A1A1A;
  --guide-text-muted: #666666;
  --guide-text-muted-2: #767676;
  --guide-accent: #8EB38E;
  --guide-accent-hover: #7aa37a;
  --guide-accent-dark: #4A7C59;

  --guide-tips-bg: #E8EDE7;
  --guide-tips-border: #C8D4C7;
  --guide-tips-label: #2E4A2E;
  --guide-tips-text: #4A5C4A;

  --guide-warn-bg: #FFF5E6;
  --guide-warn-border: #F0D9B8;
  --guide-warn-title: #5C4A2E;
  --guide-warn-dot: #D4A574;
  --guide-warn-text: #7B6A52;

  /* .content-max utility from src/styles/theme.css */
  --guide-content-max: clamp(760px, 78vw, 960px);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--guide-bg);
  color: var(--guide-text);
  /* Tailwind v4 preflight default sans stack — the app sets no custom font */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* ============================================================
   Header — full-width sticky bar, matching TaskDetail.tsx:
   "sticky top-0 z-10 pl-3 pr-6 h-14 flex items-center justify-between"

   Deliberate deviation: the app fixes this bar at h-14 (56px) while the
   logo is 5rem/4.5rem, so the logo overhangs the painted background and
   scrolled content shows through it on narrow viewports. Here the bar is
   sized to the logo instead, so the sticky background always covers it.
   ============================================================ */

.guide-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 5rem;       /* covers the 5rem mobile logo (app uses h-14) */
  padding-left: 12px;     /* pl-3 */
  padding-right: 24px;    /* pr-6 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--guide-bg);
}

@media (min-width: 640px) {
  .guide-header { min-height: 4.5rem; }  /* matches the 4.5rem desktop logo */
}

/* Matches TaskDetail's h-[5rem] sm:h-[4.5rem] w-auto */
.guide-logo img {
  height: 5rem;
  width: auto;
  display: block;
}

@media (min-width: 640px) {
  .guide-logo img { height: 4.5rem; }
}

/* Header CTA — primary fill, pill sizing (38px / 20px radius / 14px 700) */
.guide-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--guide-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  flex-shrink: 0;
}

.guide-cta-pill:hover { background: var(--guide-accent-hover); }

/* ============================================================
   Content column — .content-max px-6 mt-6
   ============================================================ */

.guide-main {
  width: 100%;
  max-width: var(--guide-content-max);
  margin: 24px auto 0;
  padding: 0 24px 32px;
}

/* Task title — text-2xl font-medium (app renders this as h2) */
.guide-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--guide-text);
  margin: 0 0 24px;
}

/* Plain (non-card) section: heading + body, e.g. Description — mb-6 */
.guide-section {
  margin-bottom: 24px;
}

/* text-base font-semibold mb-2 */
.guide-section h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--guide-text);
  margin: 0 0 8px;
}

/* text-sm leading-relaxed */
.guide-section p {
  font-size: 14px;
  line-height: 1.625;
  color: var(--guide-text-muted);
  margin: 0;
}

/* ============================================================
   Estimated time — p-4 rounded-2xl, white, 1.5px #E8E8E8
   ============================================================ */

.guide-time {
  display: flex;
  background: var(--guide-card-bg);
  border: 1.5px solid var(--guide-border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.guide-time-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.guide-time-col:first-child { padding-right: 16px; }
.guide-time-col:last-child { padding-left: 16px; }

.guide-time-divider {
  width: 1px;
  background: var(--guide-border);
  align-self: stretch;
}

/* text-xs font-medium uppercase */
.guide-time-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--guide-text-muted-2);
  margin-bottom: 6px;
}

/* text-base font-semibold */
.guide-time-value {
  font-size: 16px;
  font-weight: 600;
  color: #4F4F4F;
}

.guide-time-note {
  font-size: 12px;
  line-height: 1.625;
  color: var(--guide-text-muted);
  margin: 8px 0 0;
}

/* ============================================================
   Cards — mb-6 p-5 rounded-3xl
   ============================================================ */

.guide-card {
  padding: 20px;
  border-radius: 24px;
  margin-bottom: 24px;
}

/* Steps card: white, NO border (matches the app exactly) */
.guide-card--steps {
  background: var(--guide-card-bg);
}

/* text-base font-semibold mb-4, not uppercase */
.guide-card--steps h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--guide-text);
  margin: 0 0 16px;
}

/* Scope caveat above the steps — text-sm mb-4 italic #767676 */
.guide-steps-note {
  font-size: 14px;
  line-height: 1.375;
  font-style: italic;
  color: var(--guide-text-muted-2);
  margin: 0 0 16px;
}

/* space-y-3 */
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* flex items-start gap-3 */
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* text-sm font-medium, min-width 20px */
.guide-step .step-num {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.375;
  color: var(--guide-accent);
  min-width: 20px;
  flex-shrink: 0;
}

/* text-sm leading-snug */
.guide-step .step-text {
  font-size: 14px;
  line-height: 1.375;
  color: var(--guide-text);
  flex: 1;
}

/* Warnings card */
.guide-card--warnings {
  background: var(--guide-warn-bg);
  border: 1.5px solid var(--guide-warn-border);
}

/* text-base font-semibold mb-3 uppercase */
.guide-card--warnings h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--guide-warn-title);
  margin: 0 0 12px;
}

/* i > 0 ? "pt-3 mt-3" + borderTop */
.guide-warning + .guide-warning {
  border-top: 1px solid var(--guide-warn-border);
  margin-top: 12px;
  padding-top: 12px;
}

/* text-sm font-semibold mb-2 */
.guide-warning .warning-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--guide-warn-title);
  margin: 0 0 8px;
}

/* space-y-1.5 */
.guide-warning ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* flex items-start gap-2 */
.guide-warning li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.625;
  color: var(--guide-warn-text);
}

/* 5px dot, mt-1.5 */
.guide-warning li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 9999px;
  background: var(--guide-warn-dot);
  margin-top: 6px;
  flex-shrink: 0;
}

/* Tips card */
.guide-card--tips {
  background: var(--guide-tips-bg);
  border: 1.5px solid var(--guide-tips-border);
}

/* Heading is #1A1A1A here (not green), uppercase */
.guide-card--tips h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--guide-text);
  margin: 0 0 12px;
}

.guide-tip + .guide-tip {
  border-top: 1px solid var(--guide-tips-border);
  margin-top: 12px;
  padding-top: 12px;
}

/* text-sm font-semibold mb-1 */
.guide-tip .tip-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--guide-tips-label);
  margin: 0 0 4px;
}

/* text-sm leading-relaxed */
.guide-tip .tip-text {
  font-size: 14px;
  line-height: 1.625;
  color: var(--guide-tips-text);
  margin: 0;
}

/* ============================================================
   Bottom CTA + footer
   ============================================================ */

/* Bottom CTA — mirrors the app's "Mark as Done" button:
   "w-full mt-2 mb-6 py-4 rounded-full text-base font-semibold" */
.guide-cta-bottom {
  display: block;
  width: 100%;
  margin-top: 8px;        /* mt-2 */
  margin-bottom: 24px;    /* mb-6 */
  padding: 16px 0;        /* py-4 */
  border-radius: 9999px;  /* rounded-full */
  background: var(--guide-accent);
  color: #ffffff;
  font-size: 16px;        /* text-base */
  font-weight: 600;       /* font-semibold */
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: none;
}

.guide-cta-bottom:hover { background: var(--guide-accent-hover); }

.guide-footer {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.625;
  color: var(--guide-text-muted);
  text-align: center;
}

.guide-footer a { color: var(--guide-accent-dark); }