/* ==========================================================================
   Terms & Conditions (/terms-conditions)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the "Last updated" line in the header, the contents card (sticky beside the terms from 992px,
   above them below that), and the terms themselves in one white card with a readable line length. Every class starts
   with tnc-. Views/Public/TermsAndConditions.cshtml links it in its FinalHeader section with a ?v= cache buster from
   StaticAssetVersion. No script: the old jQuery sticky block and scroll nav are CSS position: sticky and plain links.
   The layout, the contents card and the print rules use the same values as the sibling legal page /privacy-policy
   (assets/css/privacy-policy.css), so moving between the two keeps the reading column in place: change them together.
   ========================================================================== */

/* ---------- Header: the title on one line where it fits, and the "Last updated" line ---------- */
/* The header has no chips beside the copy, so the copy may take the room: "CanIPhish Terms & Conditions" at the
   largest title size is about 61rem wide, past the base's 820px */
.tnc-root .tc-hero__copy { max-width: 64rem; }
.tc-root .tnc-updated { display: flex; align-items: baseline; gap: 8px; }
.tnc-updated i { font-size: 1.3rem; color: var(--tc-yellow); }
/* The date never splits across lines; on the narrowest phones the line is a touch smaller so it stays on one */
.tnc-updated time { white-space: nowrap; }
@media (max-width: 399.98px) { .tc-root .tnc-updated { font-size: 1.0625rem; } }

/* ---------- Layout: contents beside the terms (as /privacy-policy) ---------- */
.tnc-layout { display: grid; gap: 22px; }
.tnc-aside, .tnc-main { min-width: 0; }
@media (min-width: 992px) {
  .tnc-layout { grid-template-columns: 260px minmax(0, 52rem); gap: 36px; }
  /* The aside stretches the full height of the terms, so its card can stay in view while they scroll by */
  .tc-root .tnc-toc { position: sticky; top: 100px; }
}
@media (min-width: 1200px) { .tnc-layout { grid-template-columns: 290px minmax(0, 52rem); gap: 48px; } }

/* ---------- The contents card: its label as a header row, then the links (as /privacy-policy's open list) ---------- */
.tc-root .tnc-toc { padding: 0; }
.tnc-toc__label { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 10px 14px 10px 18px; border-bottom: 2px solid var(--tc-line); font: 700 .875rem/1.2 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-ink); }
.tnc-toc__list { display: grid; gap: 2px; padding: 10px 10px 12px; }
.tc-root .tnc-toc__link { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font: 600 .9375rem/1.3 var(--tc-display); color: var(--tc-ink); text-decoration: none; }
.tc-root .tnc-toc__link:hover, .tc-root .tnc-toc__link:focus { color: var(--tc-ink); text-decoration: none; background: var(--tc-butter); }
/* The ring is drawn inside the link, as on /privacy-policy */
.tc-root .tnc-toc__link:focus-visible { outline: 3px solid var(--tc-ink); outline-offset: -3px; box-shadow: none; background: var(--tc-butter); }
/* With a mouse the rows can be tighter; touch screens keep 44px rows */
@media (min-width: 992px) and (pointer: fine) { .tc-root .tnc-toc__link { min-height: 0; padding: 5px 10px; } }

/* ---------- The terms ---------- */
.tc-root .tnc-doc { padding: 26px 20px 30px; }
@media (max-width: 399.98px) { .tc-root .tnc-doc { padding: 22px 16px 26px; } }
@media (min-width: 768px) { .tc-root .tnc-doc { padding: 40px 44px 44px; } }
@media (max-width: 575.98px) { .tnc-prose { font-size: 1rem; } }
/* Readable line length for the paragraphs */
.tnc-prose p { max-width: 46rem; }
/* Each numbered part sits under a dashed rule */
.tnc-part + .tnc-part { margin-top: 1.9em; padding-top: 1.9em; border-top: 2px dashed rgba(47, 42, 79, .2); }
.tc-root .tnc-part > :first-child { margin-top: 0; }
.tc-root .tnc-part > :last-child { margin-bottom: 0; }
.tc-root .tnc-prose h2 { margin-bottom: .55em; }
/* The part's number, in the family's accent colour */
.tnc-n { color: var(--tc-rust); }
/* Long PDF link labels wrap instead of widening the card on phones */
.tnc-prose a { overflow-wrap: anywhere; }

/* ---------- Related legal pages under the terms ---------- */
.tnc-main .tc-related { margin-top: 32px; }

/* ---------- Print: the terms alone (the contents labels are the headings' own words) ---------- */
@media print {
  .tnc-aside, .tnc-main .tc-related { display: none; }
  .tnc-layout { display: block; }
  .tc-root .tnc-doc { padding: 0; border: 0; box-shadow: none; }
}