/* /blog/instagram-trial-reels: the timeline and the results reader. The
   article shell is the shared article.css; nothing here restyles it. */

/* The answer tiles' labels: article.css draws them #737373 on #f6f7f5, about
   4.4:1, under WCAG's 4.5:1 for small text (Lighthouse flags it on every
   article). Darker here; the shared file is the orchestrator's to change. */
.guide-body .answer dt{color:#666}

/* What happens after you post: a vertical timeline, the same at every width. */
.tr-timeline{list-style:none;margin:24px 0 0;padding:0}
.guide-body .tr-timeline li{position:relative;margin:0;padding:0 0 22px 30px}
.guide-body .tr-timeline li+li{margin-top:0}
.tr-timeline li::before{content:"";position:absolute;left:5px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #fff}
.tr-timeline li::after{content:"";position:absolute;left:10px;top:24px;bottom:-4px;width:2px;background:#e4e4e4}
.tr-timeline li:last-child{padding-bottom:0}
.tr-timeline li:last-child::after{display:none}
.tr-when{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4c4c4c}
.guide-body .tr-timeline p{margin-top:4px}

/* The results reader. */
.tr-reader{margin-top:28px;padding:28px;border:1px solid #e6eadf;border-radius:18px;background:#f6f8f3}
.guide-body .tr-reader h3{font-size:20px;letter-spacing:-.02em}
.guide-body .tr-reader-intro{margin-top:6px;font-size:15px;line-height:1.65;color:#454545}
.tr-form{margin-top:20px}
.tr-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.tr-field-wide{grid-column:1/-1}
.tr-field label{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.tr-field label span{font-weight:400;color:#6b6b6b}
.tr-field input{display:block;width:100%;min-height:50px;margin-top:6px;padding:11px 14px;border:1px solid #d9d9d9;border-radius:12px;background:#fff;font:inherit;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.tr-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #3478f51f}
.tr-field input[aria-invalid=true]{border-color:#c4321f}
.tr-field small{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#626262}

/* Choices as pills: real radio buttons, kept focusable, drawn by their label. */
.tr-chips{margin:20px 0 0;padding:0;border:0;min-width:0}
.tr-chips legend{float:left;width:100%;margin-bottom:8px;padding:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.tr-chips label{position:relative;display:inline-flex;margin:0 8px 8px 0;cursor:pointer}
.tr-chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tr-chips span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #d9d9d9;border-radius:99px;background:#fff;font-size:15px;font-weight:500;line-height:1.2;color:#2e2e2e;transition:background-color .15s,border-color .15s,color .15s}
.tr-chips label:hover span{border-color:#9fb9ea}
.tr-chips input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.tr-chips input:focus-visible+span{outline:3px solid #3478f580;outline-offset:2px}

.tr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.tr-actions .button{min-height:52px;padding:14px 26px;font-size:16px}
.guide-body .tr-error{margin:0;font-size:14px;line-height:1.5;color:#b42318}
.tr-error:empty{display:none}

/* The answer. */
.tr-out{margin-top:24px;padding:24px;border:1px solid #e4e4e4;border-radius:16px;background:#fff;animation:tr-in .25s ease-out}
.tr-out:empty{display:none}
.tr-out:focus{outline:none}
.tr-badge{display:inline-block;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#eef0ec;color:#3d3d3d}
.tr-out[data-tier=strong] .tr-badge,.tr-out[data-tier=win] .tr-badge{background:var(--green);color:#1f3d14}
.tr-out[data-tier=even] .tr-badge{background:#fbefc9;color:#5c4200}
.tr-out[data-tier=low] .tr-badge{background:#f6d5cf;color:#6e2618}
.tr-out[data-tier=early] .tr-badge{background:#e3ecfd;color:#1f4d9e}
.guide-body .tr-ratio{margin-top:12px;font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.tr-ratio small{margin-left:6px;font-size:17px;font-weight:500;letter-spacing:-.01em;color:#515151}
.guide-body .tr-verdict{margin-top:8px;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.tr-bars{display:grid;gap:8px;margin-top:16px}
.tr-bar{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14px;color:#454545}
.tr-bar i{display:block;height:12px;min-width:3px;border-radius:6px;background:var(--blue)}
.tr-bar.is-usual i{background:#c9d2de}
.tr-bar b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.guide-body .tr-out p:not(.tr-ratio):not(.tr-verdict):not(.eyebrow){margin-top:12px;font-size:16px;line-height:1.7}
.tr-next{margin-top:18px;padding-top:16px;border-top:1px solid #efefef}
.guide-body .tr-next .eyebrow{color:#6b6b6b}
.guide-body .tr-next p.tr-next-text{margin-top:4px}
.guide-body .tr-fine{font-size:13px !important;line-height:1.6 !important;color:#6b6b6b !important}

/* Figures: Instagram's screens redrawn (phones), HandlePilot's from the app. */
.tr-shot{margin:26px 0 0}
.tr-shot img{display:block;width:100%;height:auto;margin:0 auto}
.tr-phone img{max-width:290px}
.tr-app img{border-radius:10px;box-shadow:0 1px 3px #00000014,0 10px 28px #0000000d}
.guide-body .tr-shot figcaption{margin-top:12px;text-align:center;font-size:13px;line-height:1.6;color:#6b6b6b}
.guide-body .tr-shot+p,.guide-body .tr-shot+.tr-shot,.guide-body .tr-shot+.guide-table{margin-top:24px}
.tr-out[data-early=true] .tr-badge{background:#e3ecfd;color:#1f4d9e}

.tr-bands{margin-top:0}
.tr-reader+.guide-table{margin-top:24px}

@keyframes tr-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .tr-out{animation:none}
 .tr-field input,.tr-chips span{transition:none}
}
@media(max-width:650px){
 .tr-reader{margin-top:24px;padding:20px 16px;border-radius:16px}
 .tr-fields{grid-template-columns:1fr;gap:14px}
 .tr-chips span{padding:10px 14px;font-size:14px}
 .tr-actions .button{width:100%}
 .tr-out{padding:18px 16px}
 .guide-body .tr-ratio{font-size:38px}
 .tr-bar{grid-template-columns:46px minmax(0,1fr) auto}
}