/*
 * CoryVu shared tool-page stylesheet.
 * Canonical styles for the standard tool-page modules: hero + badges,
 * inputs/results layout, dashboard metric cards, assessment pill, insights,
 * breakdown tables, timeline, FAQ, compliance box and print rules.
 * Extracted from the reference page (final-pay-calculator-uk). Pages load
 * this after /assets/site.css and keep only page-specific rules inline.
 */

.tool-hero {
      margin-top: 24px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
      gap: 24px;
      align-items: start;
    }

    .tool-hero h1 {
      max-width: 14ch;
      font-size: clamp(2.05rem, 3.35vw, 3.25rem);
      line-height: 1;
      margin-top: 12px;
      margin-bottom: 16px;
    }

    .tool-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
      gap: 24px;
      align-items: start;
      margin-top: 24px;
    }

    .tool-stack, .side-stack { display: grid; gap: 18px; }

    .sticky-side {
      position: sticky;
      top: 18px;
      display: grid;
      gap: 18px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .field { display: flex; flex-direction: column; gap: 8px; }

    .field label, .section-label {
      color: var(--text);
      font-size: 0.93rem;
      font-weight: 760;
    }

    .option-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .reason-option {
      position: relative;
      display: block;
      margin: 0;
      min-height: 78px;
      border: 1px solid rgba(104, 120, 154, 0.2);
      border-radius: 16px;
      padding: 13px;
      background: rgba(255, 255, 255, 0.75);
      cursor: pointer;
      transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }

    .reason-option:hover {
      transform: translateY(-1px);
      border-color: rgba(33, 67, 165, 0.34);
      box-shadow: 0 10px 22px rgba(26, 39, 71, 0.08);
    }

    .reason-option input {
      position: absolute;
      inset: 13px 13px auto auto;
      width: 18px;
      height: 18px;
      min-height: 0;
      padding: 0;
      margin: 0;
    }

    .reason-option strong { display: block; padding-right: 24px; font-size: 0.96rem; line-height: 1.25; }
    .reason-option span { display: block; margin-top: 7px; color: var(--muted); font-size: 0.84rem; line-height: 1.35; }

    .reason-option:has(input:checked) {
      border-color: rgba(33, 67, 165, 0.55);
      background: #edf2ff;
      box-shadow: 0 0 0 4px rgba(33, 67, 165, 0.08);
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .metric-card {
      border-radius: 18px;
      border: 1px solid rgba(104, 120, 154, 0.14);
      background: rgba(255, 255, 255, 0.76);
      padding: 14px;
    }

    .metric-card .label { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 700; margin-bottom: 7px; }
    .metric-card .value { display: block; color: var(--text); font-size: 1.28rem; font-weight: 850; letter-spacing: -0.02em; }

    .result-total {
      font-size: clamp(1.85rem, 3vw, 2.6rem);
      line-height: 1;
      font-weight: 880;
      color: var(--text);
      margin: 8px 0 14px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 0.88rem;
      font-weight: 780;
    }

    .status-pill::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.72;
    }

    .status-complete { color: #0d6b43; background: #eaf8f1; }
    .status-waiting { color: #596579; background: #eef3f8; }
    .status-check { color: #8e5600; background: #fff4dd; }
    .status-action { color: #9a251a; background: #fdecec; }

    .insight-list { display: grid; gap: 12px; }

    .insight {
      border-radius: 16px;
      border: 1px solid rgba(104, 120, 154, 0.14);
      background: rgba(255, 255, 255, 0.84);
      padding: 14px 16px;
    }

    .insight strong { display: block; margin-bottom: 5px; }
    .insight p { margin: 0; }

    .table-wrap {
      overflow-x: auto;
      border-radius: 18px;
      border: 1px solid rgba(104, 120, 154, 0.14);
      background: rgba(255, 255, 255, 0.92);
    }

    table { width: 100%; border-collapse: collapse; min-width: 420px; }

    th, td {
      padding: 13px 15px;
      text-align: left;
      border-bottom: 1px solid rgba(104, 120, 154, 0.12);
      vertical-align: top;
    }

    th {
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      background: rgba(241, 246, 255, 0.92);
    }

    tr:last-child td { border-bottom: none; }
    .total-row td { font-weight: 800; font-size: 1.04rem; background: rgba(241, 246, 255, 0.6); }
    .deduction-row td { color: #9a251a; }

    .actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .actions button { margin-top: 0; }

    .summary-box {
      border-radius: 18px;
      border: 1px solid rgba(33, 67, 165, 0.14);
      background: linear-gradient(180deg, rgba(33, 67, 165, 0.07), rgba(255, 255, 255, 0.9));
      padding: 16px;
    }

    .summary-box p { margin: 0; color: var(--text); line-height: 1.65; }

    .timeline { display: grid; gap: 10px; }

    .timeline-step {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .timeline-dot {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #edf2ff;
      color: var(--accent-dark);
      font-size: 0.8rem;
      font-weight: 850;
    }

    .timeline-step strong { display: block; line-height: 1.25; }
    .timeline-step span { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 3px; }

    .compliance-box {
      border: 1px solid rgba(154, 37, 26, 0.2);
      border-radius: 18px;
      background: #fff7f6;
      padding: 18px;
    }

    .compliance-list { margin: 12px 0 0; padding-left: 20px; color: #78322b; }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 24px;
    }

    .faq-list { display: grid; gap: 12px; }

    .faq-item {
      border-radius: 16px;
      border: 1px solid rgba(104, 120, 154, 0.14);
      background: rgba(255, 255, 255, 0.84);
      overflow: hidden;
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 15px 17px;
      font-weight: 770;
      color: var(--text);
    }

    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item div { padding: 0 17px 15px; }
    .faq-item p { margin: 0; }

    .notice { min-height: 1.4em; color: var(--muted); font-size: 0.9rem; margin-top: 8px; }

    @media (max-width: 980px) {
      .tool-hero, .tool-layout, .content-grid { grid-template-columns: 1fr; }
      .sticky-side { position: static; }
    }

    @media (max-width: 700px) {
      .form-grid, .dashboard-grid { grid-template-columns: 1fr; }
    }

    @media print {
      .site-nav, .tool-hero, .tool-stack, .actions, .content-grid, .faq-list, .site-footer, .print-hide {
        display: none !important;
      }
      main { max-width: none; padding: 0; }
      .tool-layout, .sticky-side { display: block; }
    }