/*
 * Traffic Light member page: the page layout. The page links the shared tools styles (header,
 * cards, forms, buttons, notices, print rules; area F's tools.css) before this file. The
 * verdict, map and progress styles are in traffic-light.css, which the public teaser shares.
 */

.tl-page { max-width: 760px; }
.tl-form label:first-child { margin-top: 0; }
.tl-form textarea { min-height: 128px; }
.tl-details { margin: 14px 0 0; border-top: 1px solid var(--hairline); padding-top: 6px; }
.tl-details > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; }
.tl-details > summary::-webkit-details-marker { display: none; }
.tl-details > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 2px; transition: transform .2s; }
.tl-details[open] > summary::before { transform: rotate(45deg); }
#tl-action-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .tl-details > summary::before { transition: none; } }
.tl-details-suffix { font-weight: 400; color: var(--muted); font-size: 13px; }
.tl-fields { padding-bottom: 4px; }
.tl-field-error { margin: 5px 0 0; font-size: 13.5px; color: var(--danger); }
.tl-phi { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text); background: var(--tint); border-radius: 10px; padding: 10px 12px; margin: 16px 0 0; }
.tl-phi-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 12px; line-height: 15px; text-align: center; margin-top: 1px; }
.tl-form .form-actions .btn-primary { width: 100%; min-height: 48px; font-size: 15px; }
.tl-timing { margin-top: 8px; }
.tl-example-link { padding: 0; min-height: 0; font-size: inherit; }
.tl-cancel { width: 100%; }
.tl-progress-done > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13.5px; color: var(--muted); }
.tl-actions { display: grid; gap: 10px; }
.tl-actions .btn-primary { width: 100%; }
.tl-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-action-row .btn-secondary { flex: 1 1 140px; }
.tl-history { margin-top: 28px; }
.tl-check-label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.tl-check-label input { width: 20px; height: 20px; }
.tl-history-list { list-style: none; padding: 0; margin: 8px 0; }
.tl-history-list .btn-link { text-align: left; min-height: 44px; padding: 4px 0; }

@media (min-width: 720px) {
  .tl-form .form-actions .btn-primary { width: auto; }
  .tl-cancel { width: auto; }
  .tl-actions .btn-primary { width: auto; justify-self: start; }
}

@media print {
  .tl-history, .tl-form, #tl-carry-note, #tl-example-link, .tl-actions { display: none !important; }
}