/* archimedes-principle lesson-specific styles. Extracted during theme polish Phase 4. */
/* ── Page ─────────────────────────────────────────── */
    .ap-page { padding-bottom: 3.5rem; }

    /* ── Hero ─────────────────────────────────────────── */
    .ap-hero { padding: 0.4rem 0 1.3rem; text-align: left; }
    .ap-hero h1 { max-width: 30ch; margin-left: 0; margin-right: 0;
      font-size: clamp(1.55rem, 3.5vw, 2.3rem); }
    .ap-hero-meta { display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.4rem 0.7rem; margin: 0.5rem 0 0; font-size: 0.82rem; color: #64748b; }
    .ap-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%;
      background: currentColor; opacity: 0.4; display: inline-block; vertical-align: middle; }
    .ap-lede { margin: 0.65rem 0 0; max-width: 68ch; color: #3f4f65;
      font-size: 0.96rem; line-height: 1.62; }
    [data-theme="night"] .ap-lede { color: rgba(245,245,247,0.7); }

    /* ── Section card ─────────────────────────────────── */
    .ap-card {
      background: var(--white, #fff);
      border: 1px solid var(--line, #d2d2d7);
      border-left: 3.5px solid var(--card-accent, #5ac8fa);
      border-radius: var(--radius, 18px);
      box-shadow: var(--shadow, 0 12px 34px rgba(0,0,0,0.08));
      padding: 1.2rem 1.4rem;
      margin-bottom: 1rem;
    }
    .ap-card h2 { margin: 0 0 0.55rem; font-size: 1.2rem; letter-spacing: -0.02em; }
    .ap-card h3 { margin: 0.85rem 0 0.3rem; font-size: 1rem; letter-spacing: -0.01em; }
    .ap-card p  { margin: 0 0 0.6rem; color: #3f4f65; font-size: 0.88rem; line-height: 1.65; }
    .ap-card p:last-child { margin-bottom: 0; }
    [data-theme="night"] .ap-card { background: var(--white, #2c2c2e); }
    [data-theme="night"] .ap-card p { color: rgba(245,245,247,0.72); }

    /* ── Eureka box ───────────────────────────────────── */
    .ap-eureka {
      display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
      background: linear-gradient(135deg, rgba(90,200,250,0.1), rgba(0,122,255,0.06));
      border: 1px solid rgba(90,200,250,0.3);
      border-radius: 14px; padding: 1rem 1.2rem; margin: 0.8rem 0;
    }
    .ap-eureka-word {
      font-size: clamp(2rem, 5vw, 3rem); font-weight: 900;
      color: #5ac8fa; letter-spacing: -0.03em; line-height: 1;
      flex-shrink: 0;
    }
    .ap-eureka-text { font-size: 0.87rem; color: #3f4f65; line-height: 1.6; flex: 1; }
    [data-theme="night"] .ap-eureka-text { color: rgba(245,245,247,0.72); }
    .ap-eureka-text strong { color: var(--text,#1d1d1f); }

    /* ── Principle statement ──────────────────────────── */
    .ap-principle {
      background: linear-gradient(135deg, rgba(90,200,250,0.09), rgba(0,122,255,0.07));
      border: 1.5px solid rgba(90,200,250,0.3);
      border-radius: 14px; padding: 1rem 1.2rem; margin: 0.8rem 0;
      font-size: clamp(0.88rem, 2vw, 1rem); font-weight: 700;
      color: var(--text,#1d1d1f); line-height: 1.55;
      text-align: center;
    }
    .ap-principle em { color: #5ac8fa; font-style: normal; }

    /* ── Density formula ──────────────────────────────── */
    .ap-formula-box {
      display: flex; align-items: center; justify-content: center;
      gap: 0.8rem; flex-wrap: wrap;
      background: linear-gradient(135deg, rgba(88,86,214,0.08), rgba(90,200,250,0.06));
      border: 1px solid rgba(88,86,214,0.2);
      border-radius: 14px; padding: 1rem 1.4rem; margin: 0.8rem 0;
    }
    .ap-formula-sym { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900;
      color: #5856d6; line-height: 1; letter-spacing: -0.03em; }
    .ap-formula-vars { display: flex; flex-direction: column; gap: 0.3rem; }
    .ap-formula-var { font-size: 0.82rem; color: #3f4f65; line-height: 1.45; }
    .ap-formula-var strong { color: var(--text,#1d1d1f); }
    [data-theme="night"] .ap-formula-var { color: rgba(245,245,247,0.68); }

    /* ── Density comparison table ─────────────────────── */
    .ap-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.84rem; }
    .ap-table th { text-align: left; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase; color: #64748b;
      padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--line,#d2d2d7); }
    .ap-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line,#d2d2d7);
      color: var(--text,#1d1d1f); vertical-align: middle; }
    .ap-table tr:last-child td { border-bottom: none; }
    .ap-table .floats { color: #34c759; font-weight: 800; }
    .ap-table .sinks  { color: #ff3b30; font-weight: 800; }
    .ap-density-bar-wrap { width: 100px; display: inline-block;
      background: rgba(0,0,0,0.06); border-radius: 4px; height: 12px;
      vertical-align: middle; overflow: hidden; }
    [data-theme="night"] .ap-density-bar-wrap { background: rgba(255,255,255,0.08); }
    .ap-density-bar { height: 100%; border-radius: 4px; }
    .ap-density-bar--wood { width: 55%; background: var(--warning); }
    .ap-density-bar--ice { width: 92%; background: var(--info); }
    .ap-density-bar--water { width: 100%; background: var(--accent); }
    .ap-density-bar--aluminum,
    .ap-density-bar--steel,
    .ap-density-bar--lead { width: 100%; background: var(--text-muted); }
    .ap-density-bar--gold { width: 100%; background: var(--warning); }
    .ap-status-neutral { color: var(--text-muted); font-weight: 600; }
    .ap-text-success { color: var(--success); }
    .ap-text-danger { color: var(--danger); }
    .ap-text-info { color: var(--info); }
    .ap-physics-principle {
      margin-top: 1rem;
      padding: 1rem;
      background: var(--accent-soft);
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
    }
    .ap-small-note {
      margin: 0.5rem 0 0;
      font-size: 0.85rem;
      color: var(--text-body);
    }
    .ap-muted-note {
      color: var(--text-muted);
      font-size: 0.84rem;
    }
    .ap-density-slider {
      width: 100%;
      accent-color: var(--accent);
    }

    /* ── Callout ──────────────────────────────────────── */
    .ap-callout {
      border-radius: 12px; padding: 0.85rem 1rem; margin: 0.8rem 0;
      font-size: 0.85rem; line-height: 1.6; color: #3f4f65;
    }
    [data-theme="night"] .ap-callout { color: rgba(245,245,247,0.72); }
    .ap-callout.blue  { background: rgba(90,200,250,0.08); border: 1px solid rgba(90,200,250,0.22); }
    .ap-callout.green { background: rgba(52,199,89,0.07);  border: 1px solid rgba(52,199,89,0.2); }
    .ap-callout.orange{ background: rgba(255,149,0,0.07);  border: 1px solid rgba(255,149,0,0.2); }
    .ap-callout strong { color: var(--text,#1d1d1f); }

    /* ── Bio ──────────────────────────────────────────── */
    .ap-bio { display: flex; gap: 1rem; align-items: flex-start; }
    .ap-bio-portrait {
      width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; line-height: 1;
    }
    .ap-bio-text { flex: 1; font-size: 0.87rem; color: #3f4f65; line-height: 1.62; }
    [data-theme="night"] .ap-bio-text { color: rgba(245,245,247,0.72); }
    .ap-bio-text strong { color: var(--text,#1d1d1f); }

    /* ── Sink or Float Machine ────────────────────────── */
    .ap-machine {
      background: var(--white,#fff);
      border: 1px solid var(--line,#d2d2d7);
      border-left: 3.5px solid #5ac8fa;
      border-radius: var(--radius,18px);
      box-shadow: var(--shadow,0 12px 34px rgba(0,0,0,0.08));
      padding: 1.2rem 1.4rem; margin-bottom: 1rem;
    }
    [data-theme="night"] .ap-machine { background: var(--white,#2c2c2e); }
    .ap-machine h2 { margin: 0 0 0.2rem; font-size: 1.2rem; letter-spacing: -0.02em; }
    .ap-machine-sub { margin: 0 0 1rem; font-size: 0.84rem; color: #64748b; }

    /* Object picker */
    .ap-obj-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 0.55rem; margin-bottom: 1rem;
    }
    .ap-obj-btn {
      display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
      padding: 0.6rem 0.4rem; border-radius: 12px; border: 1.5px solid var(--line,#d2d2d7);
      background: var(--white,#fff); cursor: pointer; font-family: inherit;
      transition: border-color 0.15s, background 0.15s;
    }
    [data-theme="night"] .ap-obj-btn { background: rgba(255,255,255,0.04); color: #fff; }
    .ap-obj-btn:hover { border-color: #5ac8fa; background: rgba(90,200,250,0.07); }
    .ap-obj-btn.selected { border-color: #5ac8fa; background: rgba(90,200,250,0.12); }
    .ap-obj-icon { font-size: 1.5rem; line-height: 1; }
    .ap-obj-name { font-size: 0.72rem; font-weight: 700; color: var(--text,#1d1d1f); text-align: center; }
    .ap-obj-density { font-size: 0.65rem; color: #64748b; }

    /* Custom density slider */
    .ap-custom-row {
      display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
      margin-bottom: 1rem; padding: 0.7rem 1rem;
      background: rgba(0,0,0,0.03); border: 1px solid var(--line,#d2d2d7);
      border-radius: 10px;
    }
    [data-theme="night"] .ap-custom-row { background: rgba(255,255,255,0.04); }
    .ap-custom-row label { font-size: 0.76rem; font-weight: 700; color: #64748b;
      text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
    .ap-custom-row input[type="range"] { flex: 1; accent-color: #5ac8fa; min-width: 80px; }
    .ap-custom-density-val { font-size: 0.88rem; font-weight: 800;
      color: var(--text,#1d1d1f); min-width: 70px; text-align: right; }

    /* Canvas tank */
    #ap-tank-canvas { display: block; border-radius: 12px; width: 100%; }

    /* Result panel */
    .ap-result-row {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-top: 0.75rem;
    }
    .ap-result-cell { background: rgba(0,0,0,0.03); border: 1px solid var(--line,#d2d2d7);
      border-radius: 10px; padding: 0.6rem 0.8rem; text-align: center; }
    [data-theme="night"] .ap-result-cell { background: rgba(255,255,255,0.05); }
    .ap-result-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: #64748b; display: block; margin-bottom: 0.2rem; }
    .ap-result-val { font-size: 1rem; font-weight: 900; color: var(--text,#1d1d1f); }
    .ap-result-unit { font-size: 0.68rem; color: #64748b; font-weight: 500; }
    .ap-result-verdict { font-size: 0.82rem; font-weight: 800; padding: 0.3rem 0.7rem;
      border-radius: 999px; display: inline-block; margin-top: 0.3rem; }
    .verdict-float { background: rgba(52,199,89,0.15); color: #1a7a2e; }
    .verdict-sink  { background: rgba(255,59,48,0.12);  color: #c0392b; }
    [data-theme="night"] .verdict-float { color: #34c759; }
    [data-theme="night"] .verdict-sink  { color: #ff6b6b; }

    .ap-machine-btns { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
    .ap-btn { padding: 8px 16px; border-radius: 8px; border: none;
      background: #5ac8fa; color: #fff; font-size: 0.85rem; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
    .ap-btn:hover { opacity: 0.85; }
    .ap-btn.secondary { background: rgba(0,0,0,0.08); color: var(--text,#1d1d1f); }
    [data-theme="night"] .ap-btn.secondary { background: rgba(255,255,255,0.1); color: #fff; }

    /* ── How ships float ──────────────────────────────── */
    .ap-ship-row { display: flex; gap: 1rem; align-items: stretch; margin: 0.8rem 0; }
    .ap-ship-card { flex: 1; border-radius: 12px; padding: 0.85rem;
      border: 1px solid var(--line,#d2d2d7); background: rgba(0,0,0,0.03); }
    [data-theme="night"] .ap-ship-card { background: rgba(255,255,255,0.04); }
    .ap-ship-card-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: #64748b; margin: 0 0 0.4rem; }
    .ap-ship-visual { height: 60px; border-radius: 8px; margin-bottom: 0.5rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem; }
    .ap-ship-visual.water-bg {
      background: linear-gradient(to bottom, #e0f4ff 0%, #5ac8fa 50%, #007aff 100%); }
    .ap-ship-card p { font-size: 0.78rem; color: #3f4f65; line-height: 1.55; margin: 0; }
    [data-theme="night"] .ap-ship-card p { color: rgba(245,245,247,0.68); }

    /* ── Applications grid ────────────────────────────── */
    .ap-apps { display: grid; grid-template-columns: repeat(2,1fr);
      gap: 0.8rem; margin-top: 0.7rem; }
    .ap-app-card { background: rgba(0,0,0,0.03); border: 1px solid var(--line,#d2d2d7);
      border-radius: 12px; padding: 0.85rem; display: flex; gap: 0.7rem; align-items: flex-start; }
    [data-theme="night"] .ap-app-card { background: rgba(255,255,255,0.04); }
    .ap-app-icon { font-size: 1.55rem; line-height: 1; flex-shrink: 0; }
    .ap-app-text strong { display: block; font-size: 0.86rem; margin-bottom: 0.18rem; }
    .ap-app-text small  { font-size: 0.78rem; color: #64748b; line-height: 1.5; display: block; }

    /* ── Practice problems ────────────────────────────── */
    .ap-practice { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.8rem; }
    .ap-problem { background: rgba(0,0,0,0.03); border: 1px solid var(--line,#d2d2d7);
      border-radius: 12px; padding: 0.9rem 1rem; }
    [data-theme="night"] .ap-problem { background: rgba(255,255,255,0.04); }
    .ap-problem p { margin: 0 0 0.5rem; font-size: 0.87rem;
      color: var(--text,#1d1d1f); font-weight: 600; }
    .ap-problem-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
    .ap-ans-input { width: 110px; padding: 6px 10px;
      border: 1.5px solid var(--line,#d2d2d7); border-radius: 8px;
      font-size: 0.88rem; font-family: inherit;
      background: var(--white,#fff); color: var(--text,#1d1d1f); outline: none; }
    .ap-ans-input:focus { border-color: #5ac8fa; }
    .ap-check-btn { padding: 6px 14px; border-radius: 8px; border: none;
      background: #5ac8fa; color: #fff; font-size: 0.82rem; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
    .ap-check-btn:hover { opacity: 0.85; }
    .ap-feedback { font-size: 0.8rem; font-weight: 700; padding: 4px 10px;
      border-radius: 999px; display: none; }
    .ap-feedback.correct { background: rgba(52,199,89,0.15); color: #1a7a2e; display: inline-block; }
    .ap-feedback.wrong   { background: rgba(255,59,48,0.12); color: #c0392b; display: inline-block; }
    [data-theme="night"] .ap-feedback.correct { color: #34c759; }
    [data-theme="night"] .ap-feedback.wrong   { color: #ff6b6b; }
    .ap-hint { font-size: 0.77rem; color: #64748b; margin-top: 0.35rem; display: none; }
    .ap-hint.visible { display: block; }
    .ap-problem-diff { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
      margin-right: 0.4rem; vertical-align: middle; }
    .diff-easy { background: rgba(52,199,89,0.12); color: #1a7a2e; }
    .diff-mid  { background: rgba(90,200,250,0.15); color: #0071a4; }
    .diff-hard { background: rgba(255,149,0,0.12);  color: #b35900; }
    [data-theme="night"] .diff-easy { color: #34c759; }
    [data-theme="night"] .diff-mid  { color: #5ac8fa; }
    [data-theme="night"] .diff-hard { color: #ff9500; }

    @media (max-width: 680px) {
      .ap-bio      { flex-direction: column; align-items: center; text-align: center; }
      .ap-apps     { grid-template-columns: 1fr; }
      .ap-ship-row { flex-direction: column; }
      .ap-result-row { grid-template-columns: repeat(3,1fr); }
    }

    /* ── Layout overrides ─────────────────────────────── */
    .ll-viewport {
      --ll-tab-active: #5ac8fa;
      --ll-tab-active-bg: rgba(90,200,250,0.12);
    }
    #ap-tank-canvas { max-height: calc(100dvh - 140px); }