/* ============================================================
   Rathe TEC — learn.css
   Filing-status table, note callout, FAQ accordion
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.table caption { text-align: left; }

.table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--green-600), var(--green-700));
  color: var(--cream-100);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.95rem 1.1rem;
  white-space: nowrap;
}

.table tbody th[scope="row"] {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pine);
  padding: 1.05rem 1.1rem;
  border-right: 1px solid var(--line);
  vertical-align: top;
  background: rgba(223, 233, 221, 0.4);
}

.table tbody td {
  padding: 1.05rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-600);
  vertical-align: top;
}
.table tbody tr:first-child th[scope="row"],
.table tbody tr:first-child td { border-top: 0; }

.table tbody tr:nth-child(even) td { background: rgba(245, 236, 221, 0.42); }
.table tbody tr:nth-child(even) th[scope="row"] { background: rgba(245, 236, 221, 0.5); }
.table tbody tr:hover td,
.table tbody tr:hover th[scope="row"] { background: rgba(185, 205, 182, 0.34); }

.table .cell-flag {
  display: inline-block;
  margin-bottom: 0.35rem;
  margin-right: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 4px;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid var(--green-200);
}
.table .cell-flag--warn { color: #8a4a2f; background: #f6e4d6; border-color: #e0bda1; }

/* ---------- Note callout ---------- */
.note {
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  padding: 1.1rem 1.3rem;
  background: linear-gradient(180deg, rgba(246, 228, 214, 0.7), rgba(245, 236, 221, 0.6));
  border: 1px solid #e0bda1;
  border-left: 4px solid var(--tan-400);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--ink-700);
}
.note strong { color: #7a4526; }
.note .mono { color: var(--green-700); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 0.7rem; }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq__item:hover { border-color: var(--green-300); }
.faq__item.is-open { border-color: var(--green-400); box-shadow: var(--shadow-md); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.faq__q:hover { color: var(--green-600); }

.faq__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-left: auto;
  border-radius: 50%;
  border: 1.5px solid var(--green-300);
  position: relative;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 2px;
  background: var(--green-600);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item.is-open .faq__icon { background: var(--green-500); border-color: var(--green-500); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after { background: var(--cream-100); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0.95rem 1.2rem 1.2rem;
  margin: 0;
  color: var(--ink-600);
  font-size: 0.96rem;
  border-top: 1px dashed var(--line);
}

@media (max-width: 560px) {
  .faq__q { font-size: 0.98rem; padding: 0.95rem 1rem; gap: 0.7rem; }
  .faq__a p { padding: 0.85rem 1rem 1.05rem; }
}