/* Shared page header (title row + toolbar + MENU): used by the Public page and Main Admin.
   Colors come from https://anesthesiology.hopkinsmedicine.org/ (navy #1B3058, gold #FFCB00, orange #EB7E00). */
/* ---- Main Admin toolbar: icon-only buttons and the hamburger menu ---- */
.header-actions .btn-icon { font-size: 19px; line-height: 1; }
.btn-published-state { background: rgba(16, 185, 129, 0.2); color: #34d399; cursor: default; }
.menu-wrap { position: relative; display: inline-block; }
.main-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10000; min-width: 190px; padding: 4px; background: #1e293b; border: 1px solid #475569; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.main-menu[hidden] { display: none; }
.main-menu a, .main-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: #f1f5f9; font: 600 13px -apple-system, "Segoe UI", Arial, sans-serif; text-align: left; text-decoration: none; border-radius: 5px; cursor: pointer; }
.main-menu a:hover, .main-menu button:hover, .main-menu a:focus-visible, .main-menu button:focus-visible { background: #334155; outline: none; }
.main-menu .mi-off { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #64748b; font: 600 13px -apple-system, "Segoe UI", Arial, sans-serif; cursor: not-allowed; }
.main-menu .mi { width: 22px; text-align: center; font-size: 16px; }
@media print { .menu-wrap { display: none !important; } }

/* ---- Header colors taken from https://anesthesiology.hopkinsmedicine.org/ (read 2026-10-23) ----
   navy #1B3058 (nav bar, title text), gold #FFCB00 (5px stripe above the nav bar), accent orange #EB7E00,
   light surface #F4F6F8, border gray #D6D6D6, body text #555. Only this page loads this file. */
/* brand tokens: see tokens.css */

/* title row: white, navy bold title (like the Hopkins site header) */
.title-banner { background: #fff; color: var(--hop-navy); border-bottom: 0; font-family: var(--font-ui); }
.title-banner-name { color: var(--hop-navy); font-weight: 800; }
.page-tag { background: var(--hop-gold); color: var(--hop-navy); border: 0; border-radius: 3px; padding: 2px 7px; }
.title-banner .name-search { background: var(--hop-surface); border: 1px solid var(--hop-border); }
.title-banner .name-search input { color: #1A1A1A; }
.title-banner .name-search input::placeholder { color: #6d6d6d; }
.title-banner .name-search:focus-within { background: #fff; border-color: var(--hop-navy); }
.title-banner .name-search-icon { color: var(--hop-navy); }
.title-banner .name-search-count { color: var(--hop-orange); }
.title-banner .name-search-count.none { color: #b91c1c; }

/* toolbar row: navy bar with the gold stripe on top (same total height as before) */
.top-header { background: var(--hop-navy); border-top: 8px solid var(--hop-gold); }
.pub-info { color: var(--on-dark-muted); }
.top-header .btn-primary { background: var(--hop-gold); color: var(--hop-navy); }
.top-header .btn-primary:hover { background: #ffd83d; }
.main-menu { background: var(--hop-navy); border-color: rgba(255,255,255,.25); }
.main-menu a:hover, .main-menu button:hover, .main-menu a:focus-visible, .main-menu button:focus-visible { background: var(--hop-navy-2); }

/* dark mode keeps a dark title row (no white glare) */
html[data-theme="dark"] .title-banner { background: #0f172a; color: #f3f4f6; }
html[data-theme="dark"] .title-banner-name { color: #f3f4f6; }
html[data-theme="dark"] .title-banner .name-search { background: #1e293b; border-color: #475569; }
html[data-theme="dark"] .title-banner .name-search input { color: #f3f4f6; }
html[data-theme="dark"] .title-banner .name-search input::placeholder { color: #94a3b8; }
html[data-theme="dark"] .title-banner .name-search-icon { color: #f3f4f6; }
html[data-theme="dark"] .page-tag { background: var(--hop-gold); color: var(--hop-navy); }

/* ---- Toolbar sides swapped (owner, 2026-10-23): icon buttons on the LEFT, Published / Version info on the RIGHT ---- */
.top-header .header-actions { grid-column: 1; grid-row: 1; justify-self: start; }
.top-header .header-center  { grid-column: 2; grid-row: 1; }
.top-header .header-left    { grid-column: 3; grid-row: 1; justify-self: end; }
.main-menu { right: auto; left: 0; }


/* ---- Menu modelled on the Hopkins Anesthesiology site: "MENU" button whose bars turn into an X, navy panel,
        Open Sans items separated by thin light lines ---- */
.top-header .mm-btn { background: transparent; color: #fff; border: 0; padding: 2px 8px; gap: 8px; font-size: 13px; letter-spacing: .6px; }
.top-header .mm-btn:hover { background: rgba(255,255,255,.12); }
.mm-label { font: 700 13px var(--font-ui); text-transform: uppercase; }
.mm-bars { position: relative; display: inline-block; width: 18px; height: 14px; }
.mm-bars i { position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 1px; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.mm-bars i:nth-child(1) { top: 0; }
.mm-bars i:nth-child(2) { top: 6px; }
.mm-bars i:nth-child(3) { top: 12px; }
.mm-btn.open .mm-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mm-btn.open .mm-bars i:nth-child(2) { opacity: 0; }
.mm-btn.open .mm-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.main-menu { min-width: 250px; padding: 6px 14px 8px; background: var(--hop-navy); border: 0; border-top: 3px solid var(--hop-gold); border-radius: 0 0 6px 6px; box-shadow: 0 10px 26px rgba(0,0,0,.4); font-family: var(--font-ui); }
.main-menu:not([hidden]) { animation: mm-drop .18s ease-out; }
@keyframes mm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.main-menu a, .main-menu button, .main-menu .mi-off { padding: 9px 2px; border-radius: 0; font: 400 15px var(--font-ui); border-bottom: 1px solid rgba(255,255,255,.1); }
.main-menu > :last-child { border-bottom: 0; }
.main-menu a:hover, .main-menu button:hover, .main-menu a:focus-visible, .main-menu button:focus-visible { background: transparent; color: var(--hop-gold); }
.main-menu .mi-off { color: rgba(255,255,255,.4); }
.main-menu .mi { width: 24px; }

/* MENU button is the first thing on the far left of the toolbar */
.header-actions .menu-wrap { order: -1; margin-right: 4px; }

/* icon + label buttons (Float Lists, Upload) */
.header-actions .btn-label { font: 600 12px var(--font-ui); }
.header-actions .btn-outline .btn-icon, #staff-win-toggle .win-icon { margin-right: 1px; }

/* outline icons (same style as the owner's icon sheet: black line art, drawn as inline SVG) */
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.main-menu .mi { display: inline-flex; align-items: center; justify-content: center; }
.main-menu .mi .ico { width: 19px; height: 19px; }

/* Publish / Published: yellow pill with a thick black outline (owner's picture, 2026-10-24) */
.pub-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 15px; border: 2.5px solid #000; border-radius: 999px; background: #F8F53B; color: #000; font: 800 13px/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: transform .12s ease, background .12s ease; }
.pub-pill:hover { background: #FFFB5C; transform: translateY(-1px); }
.pub-pill:disabled { opacity: .7; cursor: wait; transform: none; }
.pub-pill.is-published { background: #9BE38A; cursor: default; }
.pub-pill.is-published:hover { background: #9BE38A; transform: none; }

/* Public page: the Print button sits before (left of) the Menu button */
.header-actions .tb-print { order: -2; }

/* ---- Search box made the most visible control (owner, 2026-11-10): big white pill with a navy border and shadow ---- */
.title-banner { min-height: 40px; display: flex; align-items: center; justify-content: center; }
.title-banner .name-search { height: 30px; padding: 0 11px; gap: 6px; background: #fff; border: 2px solid var(--hop-navy);
  border-radius: 999px; box-shadow: 0 2px 8px rgba(27, 48, 88, .28); right: 14px; }
.title-banner .name-search input { width: 216px; font: 600 12px var(--font-ui); color: #111; }
.title-banner .name-search input::placeholder { color: #5b6677; font-weight: 600; }
.title-banner .name-search input:focus-visible { box-shadow: none; }
.title-banner .name-search:focus-within { background: #fff; border-color: var(--hop-navy); box-shadow: var(--focus-ring); }
.title-banner .name-search-icon { font-size: 14px; }
.title-banner .name-search-count { font: 700 11px var(--font-ui); }
html[data-theme="dark"] .title-banner .name-search { background: #1e293b; border-color: var(--hop-gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .title-banner .name-search input { color: #f8fafc; }
html[data-theme="dark"] .title-banner .name-search:focus-within { background: #0f172a; box-shadow: 0 0 0 3px rgba(255, 203, 0, .45); }
@media print { .title-banner .name-search { display: none !important; } }

/* ---- Toolbar spacing and date navigation (owner, 2026-11-10): one tidy group  [<]  Monday, Sep 21, 2026  [>]  [calendar] ---- */
.top-header { height: 42px; }
.header-center { gap: 8px; }
.header-center .btn { height: 30px; min-width: 30px; justify-content: center; padding: 0 9px; }
.header-center .nav-arrow { width: 32px; padding: 0 0 3px; font-size: 22px; font-weight: 700; }
.header-center .btn:hover:not(.disabled) { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.header-date { min-width: 176px; text-align: center; font: 700 14px var(--font-ui); letter-spacing: .2px; }
.header-actions { gap: 8px; }
.header-actions .btn { height: 30px; }
.header-actions .mm-btn { height: 30px; }
.pub-info { font-size: 11px; }

/* ---- The date itself opens the calendar (owner, 2026-11-10): no separate calendar button ---- */
.header-center .header-date { gap: 8px; cursor: pointer; color: #fff; }
.header-center .header-date .date-caret { font-size: 11px; opacity: .8; }
.header-center .header-date:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }

/* ---- Public display on big screens (owner, 2026-11-10): the header and the section titles grow with the screen height,
        in step with the board text (which grows to fill the screen). Laptop size (900px tall) keeps the sizes above;
        growth stops at 1.5x. Phones and print are not affected. ---- */
@media screen and (min-width: 769px) {
  body.fill-screen .title-banner { min-height: clamp(40px, 4.45vh, 60px); }
  body.fill-screen .title-banner-name { font-size: clamp(17px, 1.9vh, 26px); }
  body.fill-screen .title-banner .name-search { height: clamp(30px, 3.35vh, 45px); padding: 0 clamp(11px, 1.2vh, 16px); }
  body.fill-screen .title-banner .name-search input { width: clamp(216px, 24vh, 324px); font-size: clamp(12px, 1.35vh, 18px); }
  body.fill-screen .title-banner .name-search-icon { font-size: clamp(14px, 1.55vh, 21px); }
  body.fill-screen .title-banner .name-search-count { font-size: clamp(11px, 1.2vh, 16px); }

  body.fill-screen .top-header { height: clamp(42px, 4.65vh, 63px); }
  body.fill-screen .header-center, body.fill-screen .header-actions { gap: clamp(8px, .9vh, 12px); }
  body.fill-screen .header-center .btn, body.fill-screen .header-actions .btn, body.fill-screen .header-actions .mm-btn { height: clamp(30px, 3.35vh, 45px); }
  body.fill-screen .header-center .nav-arrow { width: clamp(32px, 3.55vh, 48px); font-size: clamp(22px, 2.45vh, 33px); }
  body.fill-screen .header-date { min-width: clamp(176px, 19.5vh, 264px); font-size: clamp(14px, 1.55vh, 21px); }
  body.fill-screen .header-center .header-date .date-caret { font-size: clamp(11px, 1.2vh, 16px); }
  body.fill-screen .header-actions .btn-label, body.fill-screen .mm-label { font-size: clamp(12px, 1.4vh, 18px); }
  body.fill-screen .top-header .ico { width: clamp(18px, 2vh, 27px); height: clamp(18px, 2vh, 27px); }
  body.fill-screen .pub-info { font-size: clamp(11px, 1.2vh, 16px); }

  /* section titles (ZOR-3, ENDO, WRG ...) never smaller than the names under them */
  body.fill-screen .col-header, body.fill-screen .sub-header { font-size: clamp(12px, calc(var(--fit) - 2.5px), 19px); }
}

.ver-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.main-menu .mi-head { display: block; padding: 6px 12px 2px; font: 800 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.main-menu .mi-sub { padding-left: 24px; }