/*
CHANGE LOG
File: static/css/truck-stop-light.css
Purpose: iPlan's own rules for the Truck Stop Light story (copied from iplan.nsgia.com /static/css/site.css: palette, Georgia
         body text, Arial headings, buttons, the "More detail" accordion), scoped under .tsl-page so the page reads exactly like
         the iPlan Explainer while ProHRHQ's header and footer around it are untouched. The story-card rules themselves are in
         static/css/iplan-thesis-cards.css (unchanged copy).
Version History:
2026-10-20 v1.3 - .tsl-known note.
2026-10-20 v1.2 - Panel title button, pick-list groups.
2026-10-20 v1.1 - Side panel and dialog styles (the site's sticky booking box pattern).
2026-10-20 v1.0 - Created (Michael: the page keeps iPlan's look, the nav bar is ProHRHQ's).
*/
.tsl-page{
  --navy:#14315a; --navy-deep:#0f2542; --green:#2f6b4f; --green-soft:#e7efe9;
  --ink:#1f2730; --gray:#535c68; --line:#bcc6cf; --line-soft:#e2e8ed;
  --panel:#f4f6f7; --white:#ffffff; --wide:1400px;
  max-width:calc(var(--wide) + 112px); margin:0 auto; padding:24px 32px 100px;
  color:var(--ink); font-family:Georgia,"Times New Roman",serif; line-height:1.6; font-size:17px;
}
.tsl-page *{ box-sizing:border-box; }
.tsl-page h1,.tsl-page h2,.tsl-page h3,.tsl-page .eyebrow,.tsl-page .btn{ font-family:Arial,Helvetica,sans-serif; }
.tsl-page h2{ color:var(--navy); font-size:26px; margin:0 0 12px; font-weight:700; letter-spacing:.01em; }
.tsl-page p{ margin:0 0 14px; max-width:62ch; }
.tsl-page section p{ max-width:110ch !important; }
.tsl-page .lead{ font-size:19px; color:var(--ink); }
.tsl-page .btnrow{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.tsl-page .btn{
  display:inline-block; padding:10px 16px; font-size:16px; letter-spacing:.03em;
  text-decoration:none; border:1px solid var(--navy); color:var(--navy); background:var(--white);
}
.tsl-page .btn:hover{ background:var(--navy); color:#fff; }
.tsl-page .btn.solid{ background:var(--navy); color:#fff; }
.tsl-page .btn.solid:hover{ background:var(--navy-deep); }
.tsl-page details.acc{ border:1px solid var(--line); border-radius:6px; margin:10px 0; background:var(--white); overflow:hidden; max-width:var(--wide); }
.tsl-page details.acc > summary{ cursor:pointer; list-style:none; padding:13px 18px; background:var(--navy); color:#fff;
  font-weight:700; font-size:17px; letter-spacing:.01em; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tsl-page details.acc > summary::-webkit-details-marker{ display:none; }
.tsl-page details.acc > summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:#dce6f2; }
.tsl-page details.acc[open] > summary::after{ content:"\2212"; }
.tsl-page details.acc > summary:hover{ background:var(--navy-deep); }
.tsl-page details.acc .acc-body{ padding:4px 18px 14px; }
.tsl-page details.acc .acc-body > :first-child{ margin-top:12px; }
.tsl-page details.acc .acc-body p{ max-width:none; }

/* ---- side panel: the site's sticky booking box pattern (prohrhq_home_v2.css .hv5-sticky / .hv5-sticky-tab), ProHRHQ tokens ---- */
.tsl-side{ display:none; font-family:var(--font-sans); }
.tsl-side-tab{ margin:0; padding:8px 12px; background:var(--color-navy-deep); color:#fff; font-weight:600; font-size:.92rem; border-radius:6px 6px 0 0; }
.tsl-side-card{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:#fff; border:1px solid var(--color-rule); border-left:4px solid var(--color-gold); border-radius:0 0 6px 6px; box-shadow:var(--shadow-soft); }
.tsl-side-card strong{ color:var(--color-navy-deep); font-size:.98rem; }
.tsl-side-card em{ font-style:normal; color:var(--color-text); font-size:.9rem; }
.tsl-side-note{ font-size:.85rem; color:var(--color-text-mute); }
.tsl-side-note a{ color:var(--color-link); }
.tsl-btn{ cursor:pointer; padding:10px 12px; border:1px solid var(--color-navy-deep); border-radius:6px; background:#fff; color:var(--color-navy-deep); font-family:var(--font-sans); font-weight:600; font-size:.95rem; text-align:center; }
.tsl-btn:hover{ background:var(--color-navy-deep); color:#fff; }
.tsl-btn--solid{ background:var(--color-navy-deep); color:#fff; }
.tsl-btn--solid:hover{ background:var(--color-link-hover); }
.tsl-btn:disabled{ opacity:.6; cursor:default; }
@media (min-width:1400px){
  .tsl-side{ display:block; position:fixed; right:24px; top:calc(50% - 126px); width:210px; z-index:21; }
}
@media (max-width:1399px){
  /* narrower screens: a compact bar above the site's bottom strip, same two buttons */
  .tsl-side{ display:block; position:fixed; left:8px; right:8px; bottom:56px; z-index:21; }
  .tsl-side-tab, .tsl-side-card em, .tsl-side-note{ display:none; }
  .tsl-side-card{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; border-radius:6px; padding:10px 12px; box-shadow:0 2px 10px rgba(20,33,61,.25); }
  .tsl-side-open{ text-align:center; text-decoration:none; padding:6px 0; }
}
.tsl-dialog{ width:min(520px,94vw); padding:24px; border:0; border-radius:8px; box-shadow:0 20px 60px rgba(20,33,61,.35); font-family:var(--font-sans); color:var(--color-text); }
.tsl-dialog::backdrop{ background:rgba(20,33,61,.55); }
.tsl-dialog-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tsl-dialog-head h2{ margin:0; font-size:1.4rem; color:var(--color-navy-deep); }
.tsl-dialog-close{ font-size:2rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--color-navy-deep); min-width:44px; min-height:44px; }
.tsl-field{ display:flex; flex-direction:column; gap:4px; margin:12px 0; font-size:.95rem; }
.tsl-field input, .tsl-field textarea{ padding:9px 10px; border:1px solid var(--color-rule); border-radius:6px; font:inherit; }
.tsl-field textarea{ min-height:90px; resize:vertical; }
.tsl-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tsl-status{ min-height:1.4em; margin:8px 0 0; font-size:.95rem; }
.tsl-status--error{ color:#9b1c1c; font-weight:600; }

.tsl-side-open{ display:block; width:100%; margin:0; padding:0; border:0; background:none; cursor:pointer; text-align:left; font-family:var(--font-sans); font-weight:700; font-size:1.02rem; color:var(--color-navy-deep); text-decoration:underline; text-underline-offset:3px; }
.tsl-side-open:hover{ color:var(--color-link-hover); }
.tsl-group{ margin:12px 0; padding:10px 12px; border:1px solid var(--color-rule); border-radius:6px; }
.tsl-group legend{ padding:0 6px; font-weight:600; color:var(--color-navy-deep); }
.tsl-check{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:1rem; cursor:pointer; }
.tsl-check input{ width:18px; height:18px; }
.tsl-dialog{ max-height:92vh; overflow-y:auto; }
.tsl-known{ margin:12px 0; padding:10px 12px; background:var(--color-gold-soft); border-radius:6px; font-size:.95rem; color:var(--color-navy-deep); }