/* Programming and Staffing Build — the "See a model" drawer (EXAMPLES). Class prefix ex-. Uses the tokens of app.css (dark ground, off-white type, brand red).
   Phone first: nothing needs a horizontal page scroll at 320 px; the wide tables stack on a phone and scroll inside their own box on a laptop. */
.ex{display:block;font-size:15.5px;line-height:1.5}
.ex-banner{display:inline-block;margin:0 0 8px;padding:4px 12px;border:2px solid var(--red);border-radius:3px;background:var(--red-wash);color:#fff;font-family:var(--label);letter-spacing:.14em;font-size:17px;text-transform:uppercase}
.ex-p{margin:0 0 10px;color:var(--ink)}
.ex-p.ex-says{padding:8px 12px;border-left:3px solid var(--blue);background:var(--panel-2);font-style:italic}
.ex-big{margin:0 0 10px;font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:.01em;text-transform:none}
.ex-note{padding:8px 12px;border:1px dashed var(--warn);border-radius:4px;color:var(--ink);background:rgba(242,179,61,.08)}
.ex-hint{margin-left:8px;color:var(--muted);font-size:13.5px}
.ex-tag{margin:6px 0 12px;color:var(--muted)}
.ex-tag b{color:var(--ink);font-weight:600}

/* picker: three buttons side by side (on a phone only the name shows; the line under them says the rest) */
.ex-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 6px}
@media (max-width:639px){.ex-tab span{display:none}.ex-tab{padding:8px;justify-content:center}.ex-tab b{font-size:14px;line-height:1.25}}
.ex-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:8px 12px;text-align:left;background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;cursor:pointer}
.ex-tab b{font-weight:600;font-size:15.5px}
.ex-tab span{color:var(--muted);font-size:13.5px}
.ex-tab:hover{background:var(--panel-3)}
.ex-tab[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-wash)}
.ex-tab[aria-pressed=true] span{color:var(--ink)}

.ex-h{margin:14px 0 6px;font-family:var(--label);letter-spacing:.12em;font-size:17px;color:var(--muted);text-transform:uppercase;font-weight:400}
.ex-answer,.ex-why{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.ex-why{border-left:3px solid var(--ok)}
.ex-why .ex-h{margin-top:2px}
.ex-dl{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 6px}
.ex-dl dt{margin:8px 0 0;color:var(--muted);font-size:13.5px}
.ex-dl dd{margin:0;color:var(--ink)}
@media (min-width:640px){.ex-dl{grid-template-columns:minmax(150px,26%) 1fr;column-gap:14px}.ex-dl dt{margin:0;padding:6px 0;border-bottom:1px solid var(--line)}.ex-dl dd{padding:6px 0;border-bottom:1px solid var(--line)}}
.ex-ul{margin:0 0 8px;padding-left:20px}
.ex-ul li{margin:3px 0}
.ex-det{margin:8px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.ex-det>summary{cursor:pointer;min-height:44px;padding:10px 12px;display:flex;align-items:center;font-weight:600}
.ex-det[open]>summary{border-bottom:1px solid var(--line)}
.ex-det>*:not(summary){margin-left:12px;margin-right:12px}
.ex-det>*:last-child{margin-bottom:12px}
.ex-det>.ex-h:first-of-type{margin-top:10px}

/* tables */
.ex-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 10px;max-width:100%}
.ex-tbl{width:100%;border-collapse:collapse;font-size:14.5px;overflow-wrap:break-word}
.ex-tbl th{font-family:var(--label);letter-spacing:.08em;font-weight:400;font-size:15px;text-align:left;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.ex-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:639px){
  .ex-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ex-tbl,.ex-tbl tbody,.ex-tbl tr,.ex-tbl td{display:block;width:100%}
  .ex-tbl tr{border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:0 0 10px;background:var(--panel-2)}
  .ex-tbl td{border:0;padding:4px 0}
  .ex-tbl td::before{content:attr(data-label);display:block;color:var(--muted);font-size:12.5px;letter-spacing:.04em}
}

/* the month: seven columns, one cell per night; the type is always written as a letter too */
.ex-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:8px 0}
.ex-cal__w{text-align:center;color:var(--muted);font-family:var(--label);letter-spacing:.1em;font-size:14px}
.ex-cal__d{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:42px;border-radius:4px;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.04em;line-height:1.15}
.ex-cal__d b{font-weight:400;font-size:12px;opacity:.95}
.ex-t-local{background:#3a7d44} .ex-t-regional{background:#2f6fb5} .ex-t-national{background:#7b3fa0} .ex-t-residency{background:#2a9d8f;color:#001}
.ex-t-theme{background:#e08a1e;color:#111} .ex-t-private{background:#c9a227;color:#111} .ex-t-dark{background:#3a3a3a;color:#d6d6d6}
.ex-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 10px;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.ex-legend li{display:inline-flex;align-items:center;gap:6px}
.ex-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line-2)}

.ex-dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.ex-dl-row b{flex:1 1 100%}