/*
 * Portal styling. Deliberately plain and theme-agnostic: this renders inside whatever theme
 * the site runs, and a parent checking a call time on a phone needs legibility, not brand.
 * Sizes are in rem so the theme's base font still governs.
 */

.tr-portal { max-width: 46rem; margin: 0 auto; line-height: 1.5; }

.tr-notice { padding: .75rem 1rem; border-radius: .375rem; margin-bottom: 1rem; }
.tr-notice-ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
.tr-notice-warn { background: #fffbeb; border: 1px solid #fde68a; }

.tr-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: baseline;
           justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.12);
           padding-bottom: .75rem; margin-bottom: 1.25rem; }
.tr-head h2 { margin: 0; }
.tr-program { margin: .125rem 0 0; opacity: .7; font-size: .9rem; }

.tr-groups { display: flex; flex-wrap: wrap; gap: .375rem; }
.tr-chip { display: inline-block; padding: .25rem .625rem; border-radius: 999px;
           border: 1px solid rgba(0,0,0,.2); font-size: .85rem; text-decoration: none; }
.tr-chip.is-current { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.tr-section { margin-bottom: 2rem; }
.tr-section h3 { margin: 0 0 .75rem; font-size: 1.05rem; text-transform: uppercase;
                 letter-spacing: .04em; opacity: .75; }

.tr-schedule { list-style: none; margin: 0; padding: 0; }
.tr-schedule-item { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.tr-when { font-weight: 600; }
.tr-where, .tr-call { opacity: .75; font-size: .9rem; }
.tr-call { white-space: nowrap; }

.tr-post { padding: 1rem; border: 1px solid rgba(0,0,0,.12); border-radius: .5rem;
           margin-bottom: .75rem; }
.tr-post.is-pinned { border-color: #fbbf24; box-shadow: inset 3px 0 0 #fbbf24; }
.tr-post h4 { margin: 0 0 .25rem; }
.tr-meta { margin: 0 0 .5rem; font-size: .8rem; opacity: .65; }
.tr-body { margin-bottom: .5rem; }

.tr-btn { display: inline-block; padding: .5rem 1rem; border: 0; border-radius: .375rem;
          background: #0a0a0a; color: #fff; cursor: pointer; font: inherit; }
.tr-btn:disabled { opacity: .5; cursor: default; }
.tr-link { background: none; border: 0; padding: 0; color: inherit;
           text-decoration: underline; cursor: pointer; font: inherit; }

.tr-acked { margin: 0; font-size: .85rem; color: #047857; font-weight: 600; }
.tr-ackreport { margin-top: .5rem; font-size: .85rem; }
.tr-ackreport ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.tr-pending { opacity: .8; }

.tr-replies { margin-top: .75rem; border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; }
.tr-reply { margin: .25rem 0; font-size: .9rem; }
.tr-reply-form { display: flex; gap: .5rem; margin-top: .5rem; }
.tr-reply-input { flex: 1; padding: .375rem .5rem; }

.tr-signin { max-width: 26rem; margin: 2rem auto; }
.tr-signin label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
.tr-signin input { width: 100%; padding: .5rem; margin-bottom: .75rem; }
.tr-msg { min-height: 1.25rem; font-size: .9rem; opacity: .85; }

.tr-tools { margin-bottom: 2rem; border: 1px solid rgba(0,0,0,.12); border-radius: .5rem;
            padding: .75rem 1rem; background: rgba(0,0,0,.02); }
.tr-tools > summary { cursor: pointer; font-weight: 600; }
.tr-tool { margin-top: 1.25rem; }
.tr-tool h3 { margin: 0 0 .5rem; font-size: 1rem; }
.tr-tool label { display: block; margin: .5rem 0; }
.tr-tool input[type="text"], .tr-tool input[type="datetime-local"],
.tr-tool textarea, .tr-tool select { width: 100%; padding: .375rem .5rem; }
.tr-check { display: flex !important; align-items: center; gap: .5rem; }
.tr-check input { width: auto; }
.tr-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.tr-row label { flex: 1 1 10rem; }
.tr-hint { font-size: .85rem; opacity: .7; margin: .25rem 0 .5rem; }
.tr-count { font-weight: 400; opacity: .6; }

.tr-roster { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tr-roster th, .tr-roster td { text-align: left; padding: .375rem .5rem;
                               border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.tr-phone { opacity: .7; font-size: .85em; }

.tr-empty { opacity: .7; font-style: italic; }
.tr-foot { margin-top: 2rem; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.08);
           font-size: .85rem; }

@media (max-width: 480px) {
    .tr-head { flex-direction: column; align-items: flex-start; }
    .tr-roster thead { display: none; }
    .tr-roster tr { display: block; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
    .tr-roster td { display: block; border: 0; padding: .125rem 0; }
}