/* Ticket TERMS: the owner's one-time Terms page (D-TERMS, design/brand/proposed/terms-agree/, approved #326).
   One centred phone-width column on every screen size, like the sign-in pages: wordmark and tagline, then one
   card with a mint intro (the guide pose, the title and the text) over a white part holding the tick box,
   Continue and Log out. The two links are laid out as their own 44 px lines, as drawn. Tokens only. */
.terms { padding: var(--g-space-32) var(--g-space-18) var(--g-space-48); }
.terms h1, .terms p { margin: 0; }
.terms__column { max-width: var(--g-size-phone); margin: 0 auto; }

.terms__brand { text-align: center; margin-bottom: var(--g-space-32); }
.terms__logo { display: block; width: calc(var(--g-space-48) * 4); height: auto; margin: 0 auto; }
.terms__brand p { font-size: var(--g-font-size-small); margin-top: var(--g-space-12); }

.terms__card { background: var(--g-color-white); border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); }
.terms__intro { padding: var(--g-space-16); background: var(--g-color-mint); color: var(--g-color-navy); border-radius: var(--g-radius-card) var(--g-radius-card) 0 0; }
.terms__art { display: block; width: calc(var(--g-space-48) * 2); height: auto; margin: 0 auto var(--g-space-16); }
.terms__intro h1 { font-size: var(--g-font-size-heading); line-height: var(--g-line-height-heading); overflow-wrap: anywhere; }
.terms__intro p { margin-top: var(--g-space-12); }
.terms__body { padding: var(--g-space-16); }

/* The box sits in its own 44 px target; its label text also ticks it, and the links inside open the page. */
.terms__choice { display: grid; grid-template-columns: var(--g-size-touch) minmax(0, 1fr); gap: var(--g-space-8); align-items: start; }
.terms__hit { display: grid; place-items: center; min-width: var(--g-size-touch); min-height: var(--g-size-touch); cursor: pointer; }
.terms__hit input[type=checkbox] { appearance: none; width: var(--g-space-24); height: var(--g-space-24); margin: 0; border: var(--g-space-4) solid var(--g-color-muted); border-radius: var(--g-space-4); background: var(--g-color-white); cursor: pointer; }
.terms__hit input[type=checkbox][aria-invalid=true] { border-color: var(--g-color-muted); }
.terms__hit input[type=checkbox]:checked { background: var(--g-color-teal); border-color: var(--g-color-teal); }
.terms__hit input[type=checkbox]:checked::after { content: "✓"; display: block; color: var(--g-color-white); font-size: var(--g-font-size-body); font-weight: 700; line-height: 1; text-align: center; }
/* Frame 3: focus is moved to the box by the page, so its ring shows whichever way Continue was pressed. */
.terms__hit input[type=checkbox][aria-invalid=true]:focus { outline: var(--g-space-4) solid var(--g-color-navy); outline-offset: var(--g-space-4); }
.terms__copy { min-width: 0; }
.terms__copy label { display: inline-block; min-height: var(--g-size-touch); padding-top: var(--g-space-12); cursor: pointer; }
.terms__legal { display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: var(--g-size-touch); color: var(--g-color-navy); text-decoration: underline; text-underline-offset: var(--g-space-4); }
.terms__new-tab { display: block; margin-top: var(--g-space-4); font-size: var(--g-font-size-caption); color: var(--g-color-muted); }

.terms__error { margin-top: var(--g-space-8); font-size: var(--g-font-size-small); color: var(--g-color-error); }
.terms__notice { margin-top: var(--g-space-16); padding: var(--g-space-16); color: var(--g-color-navy); background: var(--g-color-error-surface); border-inline-start: var(--g-space-4) solid var(--g-color-error); border-radius: var(--g-radius-input); }
.terms__notice--offline { background: var(--g-color-warning-surface); border-inline-start-color: var(--g-color-warning); }
.terms__error[hidden], .terms__notice[hidden] { display: none; }

.terms__primary { display: block; width: 100%; min-height: var(--g-size-primary); margin-top: var(--g-space-24); padding: var(--g-space-12) var(--g-space-16); border: 0; border-radius: var(--g-radius-button); background: var(--g-color-teal); color: var(--g-color-white); box-shadow: var(--g-shadow-raised); font: inherit; font-weight: 600; cursor: pointer; }
.terms__primary:active { background: var(--g-color-teal-pressed); box-shadow: none; }
/* While saving (frame 1c) Turbo holds the button as "Saving…"; it keeps its look. */
.terms__primary:disabled { cursor: wait; }

.terms__logout { margin-top: var(--g-space-24); text-align: center; }
.terms__logout form { display: inline; }
.terms__quiet { min-height: var(--g-size-touch); min-width: var(--g-size-touch); padding: 0 var(--g-space-8); border: 0; background: transparent; box-shadow: none; color: var(--g-color-navy); font: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: var(--g-space-4); cursor: pointer; }

@media (max-width: 390px) {
  .terms { padding-top: var(--g-space-16); }
  .terms__intro h1 { font-size: var(--g-font-size-heading-small); }
}
@media (max-width: 320px) {
  .terms { padding-inline: var(--g-space-14); }
}