/* ==========================================================================
   policy.css — page-specific styles for ai_policy.html
   Layered on top of brand.css. Loaded only by the AI Use Policy page.
   Extracted from inline <style> block in ai_policy.html on 2026-04-26.
   ========================================================================== */

    :root {
      --policy-sage: #d1e4dd;
      --policy-sage-deep: #bfd6cd;
      --policy-tint-warm: #fff4e0;
      --policy-accent-warm-dark: #7a4a08;
      --policy-restricted: #8a1f1f;
      --policy-restricted-bg: #fdecea;
      --policy-ok-text: #1b5e20;
      --policy-ok-bg: #e6f3ec;
    }

    .meta-chips {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 1.25rem;
    }
    .meta-chips .chip {
      background: var(--policy-sage);
      color: var(--primary-dark, #1a3a2e);
      padding: 0.25rem 0.85rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .toc-nav {
      background: var(--tint-green-light, #e8f0ec);
      border-left: 4px solid var(--primary, #2e4e42);
      padding: 1.25rem 1.5rem;
      border-radius: var(--border-radius, 6px);
    }
    .toc-nav h2 {
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--primary, #2e4e42);
      margin: 0 0 0.75rem 0;
    }
    .toc-nav ol { margin-left: 1.25rem; padding-left: 0.5rem; }
    .toc-nav li { margin-bottom: 0.35rem; line-height: 1.55; }

    .tier-card {
      background: var(--bg-white, #fff);
      border: 1px solid var(--policy-sage);
      border-top: 6px solid var(--primary, #2e4e42);
      border-radius: var(--border-radius, 6px);
      padding: 1.75rem;
      box-shadow: 0 1px 3px rgba(46, 78, 66, 0.08);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .tier-card.tier-restricted { border-top-color: var(--policy-restricted); }
    .tier-card.tier-supported  { border-top-color: var(--accent-warm, #a6670e); }
    .tier-card.tier-integrated { border-top-color: var(--primary, #2e4e42); }

    .tier-label {
      display: inline-block;
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      color: #fff;
      align-self: flex-start;
    }
    .tier-restricted .tier-label { background-color: var(--policy-restricted); }
    .tier-supported  .tier-label { background-color: var(--policy-accent-warm-dark); }
    .tier-integrated .tier-label { background-color: var(--primary, #2e4e42); }

    .tier-card h3 {
      margin: 0.25rem 0 0.5rem 0;
      color: var(--primary, #2e4e42);
      font-size: 1.4rem;
    }
    .tier-card h4 {
      margin: 1rem 0 0.4rem 0;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--primary-dark, #1a3a2e);
    }
    .tier-card ul { margin: 0.25rem 0 0 1.25rem; }
    .tier-card li { margin-bottom: 0.35rem; line-height: 1.6; }

    .policy-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0 1.5rem 0;
      font-size: 0.95rem;
      background: var(--bg-white, #fff);
      border-radius: var(--border-radius, 6px);
      overflow: hidden;
    }
    .policy-table caption {
      text-align: left;
      font-weight: 700;
      color: var(--primary, #2e4e42);
      margin-bottom: 0.5rem;
      font-size: 1rem;
    }
    .policy-table th,
    .policy-table td {
      text-align: left;
      padding: 0.75rem 0.9rem;
      border-bottom: 1px solid var(--policy-sage);
      vertical-align: top;
      line-height: 1.55;
    }
    .policy-table thead th {
      background-color: var(--primary, #2e4e42);
      color: #fff;
      font-weight: 700;
      border-bottom: none;
    }
    .policy-table tbody tr:nth-child(even) {
      background-color: var(--tint-green-light, #e8f0ec);
    }
    .policy-table th[scope="row"] {
      background-color: transparent;
      color: var(--primary-dark, #1a3a2e);
      font-weight: 700;
    }
    @media (max-width: 680px) {
      .policy-table th, .policy-table td { padding: 0.55rem 0.6rem; font-size: 0.88rem; }
    }

    .receipts-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.5rem 1rem;
      background: var(--policy-sage);
      padding: 1.25rem 1.5rem;
      border-radius: var(--border-radius, 6px);
    }
    .receipts-grid .num {
      font-weight: 700;
      color: var(--primary-dark, #1a3a2e);
      white-space: nowrap;
    }
    .receipts-grid .desc { color: var(--text-body, #2d2d2d); line-height: 1.6; }
    dl.receipts-grid { margin: 0; }
    .receipts-grid dt { margin: 0; }
    .receipts-grid dd { margin: 0; }

    .student-block {
      background: var(--tint-green-light, #e8f0ec);
      border: 2px dashed var(--primary, #2e4e42);
      border-radius: var(--border-radius, 6px);
      padding: 1.5rem 1.75rem;
    }
    .student-block .student-label {
      display: inline-block;
      background: var(--primary, #2e4e42);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0.2rem 0.75rem;
      border-radius: 4px;
      margin-bottom: 0.75rem;
    }
    .student-block h3 {
      margin-top: 0;
      color: var(--primary, #2e4e42);
      font-size: 1.2rem;
    }

    /* "How AI Can Help You Write" use-case cards.
       Each card has a branded left stripe + a tier-eligibility chip so
       the content reconciles with the three-tier policy above. */
    .uses-grid {
      display: grid;
      gap: 1.25rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .use-card {
      background: var(--bg-white, #fff);
      border: 1px solid var(--policy-sage);
      border-left: 6px solid var(--primary, #2e4e42);
      border-radius: var(--border-radius, 6px);
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .use-card.u-brainstorm  { border-left-color: var(--primary-dark, #1a3a2e); }
    .use-card.u-research    { border-left-color: #2e7d32; }
    .use-card.u-grammar     { border-left-color: var(--accent-warm, #a6670e); }
    .use-card.u-feedback    { border-left-color: #0277bd; }
    .use-card.u-selfassess  { border-left-color: #6a1b9a; }

    .use-card h3 {
      margin: 0;
      color: var(--primary, #2e4e42);
      font-size: 1.15rem;
    }
    .use-card p { margin: 0; }
    .tier-chip {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      color: #fff;
      background: var(--primary, #2e4e42);
      width: fit-content;
    }
    .tier-chip.chip-t1 { background: var(--policy-restricted); }
    .tier-chip.chip-t2 { background: var(--policy-accent-warm-dark); }
    .tier-chip.chip-t3 { background: var(--primary, #2e4e42); }

    /* Inline callout label used inside .callout blocks */
    .callout strong.label {
      display: block;
      color: var(--policy-accent-warm-dark);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
      font-weight: 700;
    }
    .callout p + p { margin-top: 0.6rem; }
    .callout--warm strong.label { color: var(--policy-accent-warm-dark); }

    /* Policy prose list spacing */
    .policy-prose p { margin-bottom: 1rem; }
    .policy-prose p:last-child { margin-bottom: 0; }
    .policy-prose ul, .policy-prose ol { margin: 0.5rem 0 1rem 1.5rem; }
    .policy-prose li { margin-bottom: 0.4rem; line-height: 1.7; }