/* content.css — Headings, panels, beginner notes, tables
   Extracted from the single-file UI; loaded by index.html in order. */
  /* ============================ HEADINGS / PANELS (manuscript chapter heads) ============================ */
  .panel { margin-bottom:26px; }
  .panel > h2 {
    margin:0 0 8px; font-size:23px; color:var(--accent); font-weight:600; letter-spacing:.3px;
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding-bottom:10px; position:relative;
    border-bottom:1px solid color-mix(in srgb,var(--gold) 40%, transparent);
    text-shadow:0 1px 0 #ffffff60;
  }
  /* haldi (turmeric) double rule beneath chapter heads */
  .panel > h2::after {
    content:""; position:absolute; left:0; bottom:-4px; height:2px; width:88px;
    background:linear-gradient(90deg, var(--gold), color-mix(in srgb,var(--accent) 60%, var(--gold)));
    border-radius:2px;
  }
  .panel > h2 .deva { font-family:var(--deva); color:var(--gold); font-size:17px; font-weight:400; }
  .panel .lead-note { color:var(--muted); font-size:15.5px; margin:13px 0 18px; line-height:1.65; }
  /* friendly beginner orientation line at the top of technical sections */
  .beginner-note {
    color:var(--muted); font-size:16px; line-height:1.7; font-style:italic;
    margin:8px 0 20px; padding:13px 17px;
    background:color-mix(in srgb,var(--gold) 8%,var(--surface));
    border-left:3px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow:var(--shadow-sm);
  }
  .beginner-note .adv-hint {
    font-style:normal; font-variant:small-caps; letter-spacing:.6px; font-weight:700;
    font-size:11.5px; color:var(--accent); margin-left:8px;
    padding:2px 9px; border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    border-radius:20px; background:color-mix(in srgb,var(--accent) 8%,transparent); white-space:nowrap;
  }
  /* "how to read this chart" collapsible under the diamond */
  details.howto {
    margin:14px auto 0; max-width:560px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden;
  }
  details.howto summary {
    cursor:pointer; list-style:none; padding:12px 16px; font-size:14.5px; color:var(--accent-2);
    font-weight:600; display:flex; align-items:center; gap:8px; transition:background .12s;
  }
  details.howto summary::-webkit-details-marker { display:none; }
  details.howto summary::before { content:"❖"; color:var(--gold); font-size:11px; }
  details.howto summary:hover { background:var(--surface-2); }
  details.howto[open] summary { border-bottom:1px solid var(--line-soft); }
  details.howto .ht-body { padding:14px 17px; font-size:15px; line-height:1.7; color:var(--muted); }
  details.howto .ht-body p { margin:8px 0; }
  .grid2 { display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:30px; align-items:start; }

  h3 { font-size:16px; color:var(--accent-2); margin:28px 0 12px; letter-spacing:.4px; font-variant:small-caps;
       padding-bottom:6px; border-bottom:1px solid var(--line-soft); }
  h3:first-child { margin-top:0; }

  /* ============================ TABLES ============================ */
  table { width:100%; border-collapse:separate; border-spacing:0; font-size:15.5px; margin-top:6px;
    border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
  th, td { text-align:left; padding:12px 14px; }
  thead th, table tr:first-child th {
    color:var(--accent-ink); font-weight:600; font-size:12px;
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 92%, #fff 8%), var(--accent));
    font-variant:small-caps; letter-spacing:.9px;
    box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--gold) 60%, transparent);
  }
  tbody tr:nth-child(even) { background:var(--surface-2); }
  tbody tr:nth-child(odd) { background:color-mix(in srgb, var(--surface) 70%, transparent); }
  tbody tr:hover { background:color-mix(in srgb, var(--gold) 16%, transparent); }
  td { border-bottom:1px solid var(--line-soft); }
  tbody tr:last-child td { border-bottom:0; }
  td .planet-name { font-weight:600; }
  td .num, td.bnum, td.bav-total { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .retro { color:var(--accent-2); font-weight:700; }

  .badge { display:inline-block; padding:3px 10px; border-radius:4px; font-size:12px; font-weight:600; letter-spacing:.3px; font-variant:small-caps; }
  .badge.exalted { background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); }
  .badge.debilitated { background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad); }
  .badge.own { background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--gold); }
  .badge.house { background:var(--surface-2); color:var(--accent); border:1px solid var(--line); font-family:var(--mono); }
  .muted { color:var(--muted); }
  .deg, .mono-inline { font-family:var(--mono); font-variant-numeric:tabular-nums; }