/* ============================================================================
   AVAVA Radio — Terms & conditions
   Own styles for terms.html. Everything shared (header, crumbs, page intro,
   footer, mono/dim helpers, ember buttons) lives in style.css.

   01. Section frame and headings
   02. The short version: verdicts and the rail
   03. The stream: may / may not
   04. Who owns what you hear
   05. What you send us
   06. Money, bookings, refunds
   07. What we do not promise
   08. Law and paperwork
   09. Responsive ≤1100px / ≤760px
   ========================================================================= */

/* ------------------------------------------- 01. frame and headings ----- */
.tm-sec { padding-top: 0; padding-bottom: 0; }
.tm-sec--first { padding-top: 40px; }   /* the handoff's gap from the header to the first block */
.tm-sec--last { padding-bottom: 60px; }
/* the rules between the sections of this page are a touch stronger */
.page .divider { background: var(--i18); }

.tm-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.tm-h { margin: 0; font: 700 clamp(24px, 3.2vw, 52px) / .95 'Bricolage Grotesque', sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.tm-h--s { font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.04em; }
.tm-rule { border-top: 2px solid var(--ink); padding-top: clamp(16px, 2vw, 26px); }

.tm-x { display: block; min-width: 0; font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }
.tm-x--m { font-size: 15px; }
.tm-line { display: block; min-width: 0; font: 400 15px / 1.5 Archivo, sans-serif; color: var(--i78); text-wrap: pretty; }
.tm-line--dim { color: var(--i6); }
.tm-line--wide { flex: 1 1 380px; }
.tm-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 18px; }
/* the closing line of the paperwork sits on the column's own gap, with no extra air */
.tm-paper .tm-foot { padding-top: 0; }
.tm-foot--rule { margin-top: clamp(16px, 2vw, 22px); padding-top: 16px; border-top: 1px solid var(--i16); }

/* --------------------------------------------- 02. the short version ---- */
.tm-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i18); }
.tm-summary { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 320px); gap: clamp(20px, 2.6vw, 44px); padding-top: clamp(18px, 2.4vw, 28px); }
.tm-said-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.tm-said { font: 400 clamp(19px, 2.2vw, 30px) / 1.4 'Instrument Serif', serif; font-style: italic; text-wrap: pretty; }
.tm-said--s { font-size: clamp(17px, 1.8vw, 23px); line-height: 1.35; }

/* the hairlines between the verdicts are the grid's own background */
.tm-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px; background: var(--i14); list-style: none; }
.tm-cell { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 24px 22px 20px; background: var(--paper); }
.tm-cell .mono { color: var(--i5); }
.tm-cell--on { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.tm-cell--on .mono, .tm-cell--on .tm-verdict { color: var(--accent); }
.tm-verdict { font: 700 clamp(24px, 2.9vw, 40px) / .95 'Bricolage Grotesque', sans-serif; letter-spacing: -.04em; text-transform: uppercase; }

.tm-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--i16); }
.tm-rails { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.tm-rail-row { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i14); }
.tm-rail-row .push { text-align: right; }
.tm-rail-mail { margin-top: auto; word-break: break-word; }

/* ---------------------------------------------- 03. may / may not ------- */
.tm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 44px); }
.tm-col { display: flex; flex-direction: column; min-width: 0; }
.tm-count { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; }
.tm-count .mono { color: var(--i5); }
.tm-col--yes .tm-count .mono, .tm-col--yes .tm-num { color: var(--accent); }
.tm-num { font: 800 clamp(26px, 3vw, 42px) / 1 Orbitron, sans-serif; }
.tm-num--s { font-size: clamp(24px, 2.7vw, 38px); }
.tm-rules { list-style: none; }
.tm-rule-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--i14); }
.tm-rule-row--s { padding: 11px 0; }
.tm-glyph { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.3; color: var(--i45); }
.tm-col--yes .tm-glyph { color: var(--accent); }
.tm-col:not(.tm-col--yes) .tm-line { color: var(--i6); }

.tm-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(16px, 2vw, 24px); padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tm-ask-b { flex: none; padding: 12px 18px; letter-spacing: .18em; line-height: normal; }
.tm-ask-b:hover { background: var(--shell); color: #fff; }

/* ------------------------------------ 04. who owns what you hear -------- */
.tm-layers { list-style: none; }
.tm-layer { display: grid; grid-template-columns: clamp(54px, 6vw, 74px) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 26px); align-items: start; padding: 18px 0; border-bottom: 1px solid var(--i14); }
.tm-layer-n { font: 800 clamp(20px, 2.2vw, 30px) / 1 Orbitron, sans-serif; color: var(--i35); }
.tm-layer--on .tm-layer-n, .tm-layer--on .tm-layer-t { color: var(--accent); }
.tm-layer-b { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tm-layer-t { font: 700 clamp(18px, 1.9vw, 25px) / 1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.tm-layer-own { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tm-owner { display: flex; align-items: baseline; gap: 10px; color: var(--i55); }
.tm-layer--on .tm-owner { color: var(--accent); }
.tm-owner .push { white-space: nowrap; }
.tm-bar-track { display: block; height: 8px; background: var(--i10); }
.tm-bar-track > i { display: block; height: 8px; background: var(--i35); }
.tm-layer--on .tm-bar-track > i { background: var(--accent); }

/* -------------------------------------------- 05. what you send us ------ */
.tm-groups { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); }
.tm-lede { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.tm-sends { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: clamp(14px, 1.8vw, 24px); list-style: none; }
.tm-send { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--i16); }
.tm-send--on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tm-send-t { display: flex; align-items: baseline; gap: 10px; }
.tm-send-n { font: 700 19px / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.tm-send--on .tm-send-n { color: var(--accent); }
.tm-send-t .push { white-space: nowrap; }
.tm-send-f { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--i14); }
.tm-send--on .tm-send-f { border-top-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.tm-mod { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); gap: clamp(18px, 2.4vw, 40px); align-items: start; padding-top: 18px; border-top: 1px solid var(--i16); }
.tm-nots { display: flex; flex-direction: column; min-width: 0; }
.tm-nots ul { list-style: none; }
.tm-nots-h { padding-bottom: 8px; }
.tm-modcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--i16); }
.tm-modcard-f { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--i14); }

/* --------------------------------------- 06. money, bookings, refunds --- */
.tm-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: clamp(14px, 1.8vw, 24px); list-style: none; }
.tm-case { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 20px; border: 1px solid var(--i16); }
.tm-case--on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tm-case-t { display: flex; align-items: baseline; gap: 10px; }
.tm-case-t .mono { color: var(--i45); }
.tm-case-n { font: 700 19px / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.tm-case--on .tm-case-t .mono, .tm-case--on .tm-case-n, .tm-case--on .tm-num { color: var(--accent); }
.tm-case-big { display: flex; align-items: baseline; gap: 10px; }
.tm-case-f { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--i14); }
.tm-case--on .tm-case-f { border-top-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ----------------------------------- 07. what we do not promise --------- */
/* the columns are separated by their own right-hand rule, not by a gap */
.tm-nots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); list-style: none; }
/* the prototype hangs the rule on the right of every column except the first —
   kept as it draws it, not "fixed" to a rule between columns */
.tm-not { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 clamp(14px, 1.6vw, 22px); border-right: 1px solid var(--i16); }
.tm-not:first-child { padding-left: 0; border-right: 0; }
.tm-not:last-child { padding-right: 0; }
.tm-not .mono { color: var(--i45); }
.tm-not-t { font: 700 clamp(17px, 1.8vw, 23px) / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.tm-not--on .mono, .tm-not--on .tm-not-t, .tm-not--on .tm-not-n { color: var(--accent); }
/* the caption under the number stays grey even in the ember column */
.tm-not--on .tm-not-f .mono { color: var(--i45); }
.tm-not-f { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--i14); }
.tm-not-n { font: 800 17px / 1 Orbitron, sans-serif; }

.tm-broke { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(16px, 2vw, 24px); padding: 16px; border: 1px solid var(--i16); }
.tm-broke-l { flex: none; white-space: nowrap; }

/* ---------------------------------------- 08. law and paperwork --------- */
.tm-record { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.tm-ver { display: flex; flex-direction: column; gap: 8px; flex: none; }
.tm-v { font: 900 clamp(70px, 11vw, 160px) / .8 Orbitron, sans-serif; color: var(--accent); }
.tm-signed { font: 400 clamp(17px, 1.8vw, 23px) / 1.3 'Instrument Serif', serif; font-style: italic; padding-top: 8px; }

.tm-paper { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.tm-edits { list-style: none; }
.tm-edit { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 22px); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--i14); }
.tm-edit .mono { white-space: nowrap; }
.tm-edit .tm-x--m { line-height: 1.5; }
.tm-edit:first-child .tm-x--m { color: var(--i78); }

/* the hairlines of the details strip are the grid's own background */
.tm-legals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--i14); border-top: 2px solid var(--ink); list-style: none; }
.tm-legal { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 16px; background: var(--paper); }
.tm-legal-v { font: 600 15px / 1.3 Archivo, sans-serif; word-break: break-word; }
.tm-legal-m { font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; word-break: break-word; }

/* ------------------------------------------------- 09. responsive ------- */
@media (max-width: 1100px) {
  .tm-summary, .tm-cols, .tm-mod, .tm-record { grid-template-columns: minmax(0, 1fr); }
  .tm-rail { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--i16); }
  .tm-layer { grid-template-columns: clamp(54px, 6vw, 74px) minmax(0, 1fr); }
  .tm-layer-own { grid-column: 2; }
}

@media (max-width: 760px) {
  .tm-sec--last { padding-bottom: 40px; }
  .tm-cell { padding: 18px 16px 16px; }
  .tm-sends, .tm-cases { grid-template-columns: minmax(0, 1fr); }
  .tm-not { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--i16); }
  .tm-not:last-child { border-bottom: 0; }
  .tm-layer { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tm-layer-own { grid-column: auto; }
  .tm-ask-b, .tm-broke-l { align-self: flex-start; }
}