/* Faculty profile site: shared styles.
   Theme: blue solder mask with gold pads. Change the colors here. */

:root {
  --blue: #1E2A66;
  --blue-deep: #0F1640;
  --gold: #E8B931;
  --ground: #F5F6FA;
  --card: #FFFFFF;
  --ink: #161A2E;
  --slate: #545D75;
  --trace: #D3D9EC;
  --line: #C9D0E6;
  --field: #7A84A0;
  --wash: #E9ECF6;
  --danger: #B42318;
  --ok: #1F7A4D;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
p { margin: 0; }
.strong { font-weight: 700; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  padding: 10px 14px; border-radius: 4px;
  background: var(--gold); color: var(--ink); font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- Header band: the board ---------- */

.band { position: relative; overflow: hidden; background: var(--blue); color: #FFFFFF; }
.band__traces { position: absolute; top: 0; right: 0; pointer-events: none; }
.band__traces .trace { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.band__traces .via { fill: none; stroke: var(--gold); stroke-width: 2; }
.band__inner {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(20px, 3.5vw, 44px) 20px clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 20px;
}
.band--compact .band__inner { padding-top: 20px; padding-bottom: 24px; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 2px solid var(--gold); border-radius: 4px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__school { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.84); }
.brand__program { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 22px; }
.band__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.band__title { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.display { margin: 0; font-family: var(--display); font-size: clamp(44px, 2.5vw + 34px, 64px); font-weight: 700; line-height: 1.05; }
.display--small { font-size: clamp(32px, 1.8vw + 25px, 44px); }
.band__lede { max-width: 560px; color: rgba(255, 255, 255, 0.9); }
.search { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.search label, .filters__label { font-size: 14px; font-weight: 700; line-height: 20px; }
.filters { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 14px;
  border: 2px solid var(--gold); border-radius: 3px;
  background: transparent; color: #FFFFFF;
  font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 20px;
  cursor: pointer;
}
.chip:hover { background: rgba(232, 185, 49, 0.16); }
.chip[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* ---------- Inputs ---------- */

input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--field); border-radius: 4px;
  background: #FFFFFF; color: var(--ink); font: inherit;
}
.band input[type="search"] { border-color: transparent; }
textarea { min-height: 104px; resize: vertical; }

/* ---------- Directory ---------- */

.directory { max-width: 1080px; margin: 0 auto; padding-bottom: 40px; }
.directory__count { padding: 16px 20px 10px; font-size: 14px; color: var(--slate); }
.directory__count strong { color: var(--ink); }
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  border-top: 1px solid var(--trace); border-left: 1px solid var(--trace);
}
.grid > li { display: flex; }
.row {
  flex: 1; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px; background: var(--card);
  border-right: 1px solid var(--trace); border-bottom: 1px solid var(--trace);
  color: var(--ink); text-decoration: none;
}
.row:hover { color: var(--ink); }
.row:hover .row__name { text-decoration: underline; }
.row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__name { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 24px; }
.row__meta { font-size: 14px; line-height: 20px; color: var(--slate); }
.row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mini-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--trace); border-radius: 3px;
  font-family: var(--display); font-size: 14px; font-weight: 500; line-height: 18px;
}
.mini-tag--more { color: var(--slate); }
.tag__pad { width: 7px; height: 7px; flex-shrink: 0; border-radius: 1px; background: var(--gold); }
.row__status { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 20px; }
.row__status svg { color: var(--gold); }
.row__chevron { flex-shrink: 0; margin-top: 20px; color: var(--slate); }
.avatar { width: 60px; height: 60px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: #E4E8F3; }
.avatar--empty { display: grid; place-items: center; color: var(--slate); }
.empty { padding: 32px 20px; background: var(--card); border-right: 1px solid var(--trace); border-bottom: 1px solid var(--trace); color: var(--slate); }
.site-footer { flex-shrink: 0; background: var(--blue); color: rgba(255, 255, 255, 0.86); }
.site-footer__inner { max-width: 1120px; margin: 0 auto; padding: 28px 20px 36px; font-size: 14px; line-height: 21px; }

/* Public page: keep the footer band at the bottom of short pages */
body.public { display: flex; flex-direction: column; }
body.public > #directory-view, body.public > #profile-view { flex: 1 0 auto; }

.notice { margin: 16px 20px; padding: 14px 16px; border: 1px solid var(--trace); border-radius: 6px; background: var(--card); }
.notice--ok { border-color: #9BD3B5; background: #EEF8F2; }
.notice--warn { border-color: #EBCB73; background: #FFF8E5; }
.notice--error { border-color: #F2B8B5; background: #FDEDEC; }

/* ---------- Profile ---------- */

.band__inner--profile { padding-top: 8px; gap: 16px; }
.back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 44px;
  color: #FFFFFF; font-size: 15px; font-weight: 700; text-decoration: none;
}
.back:hover { color: #FFFFFF; text-decoration: underline; }
.ident { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 28px; }
.portrait {
  width: 104px; height: 104px; flex-shrink: 0;
  border: 2px solid var(--gold); border-radius: 12px;
  object-fit: cover; background: rgba(255, 255, 255, 0.08);
}
.portrait--empty { display: grid; place-items: center; color: rgba(255, 255, 255, 0.75); }
.ident__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ident__name { margin: 0; font-family: var(--display); font-size: clamp(32px, 1.8vw + 25px, 44px); font-weight: 700; line-height: 1.12; }
.ident__name:focus { outline: none; }
.ident__meta { font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.88); }
.pad {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px;
  border-radius: 3px; background: var(--gold); color: var(--ink);
  font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 20px;
}
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-light {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px;
  color: #FFFFFF; font-size: 15px; font-weight: 700; text-decoration: none;
}
.btn-light:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.btn-light--solid { padding: 0 16px; border-color: #FFFFFF; background: #FFFFFF; color: var(--blue); }
.btn-light--solid:hover { background: var(--wash); color: var(--blue); }

.profile-body {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) 20px 48px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px;
}
.profile-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.profile-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.bio { max-width: 68ch; font-size: 17px; line-height: 27px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 28px; color: var(--blue); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--card);
  color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 500; text-decoration: none;
}
a.tag:hover { border-color: var(--blue); color: var(--ink); }
.tag .tag__pad { width: 8px; height: 8px; }
.pair { display: flex; flex-direction: column; gap: 2px; }
.pair__label { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--slate); }
.pair__value { font-size: 16px; line-height: 24px; }
.pair__strong { font-weight: 700; line-height: 24px; }
.pair__detail { font-size: 15px; line-height: 22px; color: var(--slate); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 22px 28px; }
.timeline__item::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border: 3px solid var(--blue); border-radius: 50%; background: var(--ground);
}
.timeline__item:not(:last-child)::after {
  content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--line);
}
.timeline__degree { font-weight: 700; line-height: 22px; }
.timeline__detail { font-size: 15px; line-height: 22px; color: var(--slate); }
.timeline__item .timeline__work { margin-top: 6px; font-size: 15px; line-height: 22px; }
.timeline__repo { display: inline-block; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 22px; }
.pubs { margin: 0; padding-left: 22px; font-size: 15px; line-height: 23px; }
.pubs li + li { margin-top: 14px; }
.note { font-size: 14px; line-height: 20px; color: var(--slate); }
.advisees { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trace); }
.advisees li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--trace); }
.advisees__title { font-weight: 700; line-height: 24px; }
.dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dl div { display: flex; flex-direction: column; gap: 2px; }
.dl dt { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--slate); }
.dl dd { margin: 0; font-size: 16px; line-height: 24px; }
.updated { padding-top: 16px; border-top: 1px solid var(--trace); font-size: 14px; line-height: 20px; color: var(--slate); }
.missing { max-width: 1120px; margin: 0 auto; padding: 48px 20px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Forms (edit and review pages) ---------- */

.page-narrow { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
.page-wide { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }
.page-narrow .notice, .page-wide .notice { margin: 0 0 20px; }
fieldset {
  min-width: 0; margin: 0 0 20px; padding: 20px;
  border: 1px solid var(--trace); border-radius: 6px; background: var(--card);
}
legend { padding: 0 6px; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 28px; color: var(--blue); }
.fieldset-hint { margin-bottom: 16px; font-size: 15px; color: var(--slate); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field > label, .label-text { font-size: 15px; font-weight: 700; line-height: 22px; }
.hint { font-size: 14px; line-height: 20px; color: var(--slate); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 16px; }
.error-text { color: var(--danger); font-size: 14px; font-weight: 700; line-height: 20px; }
.field--error input, .field--error textarea, .field--error select { border: 2px solid var(--danger); }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--blue); }
.check label { font-weight: 400; }
.tag-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-option { position: relative; display: inline-flex; }
.tag-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-option span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--card);
  font-family: var(--display); font-size: 16px; font-weight: 500; cursor: pointer;
}
.tag-option span::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--field); border-radius: 1px; }
.tag-option input:checked + span { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tag-option input:checked + span::before { border-color: var(--gold); background: var(--gold); }
.tag-option input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.tag-option input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.subgroup + .subgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trace); }
.subgroup h3 { margin: 0 0 12px; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 24px; }
.repeat-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trace); }
.repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.repeat-head h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 24px; }
.repeat-add { margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 2px solid var(--blue); border-radius: 4px;
  background: var(--blue); color: #FFFFFF;
  font: 700 15px/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--blue-deep); background: var(--blue-deep); color: #FFFFFF; }
.btn--secondary { background: var(--card); color: var(--blue); }
.btn--secondary:hover { border-color: var(--blue); background: var(--wash); color: var(--blue); }
.btn--quiet { padding: 0 10px; border-color: transparent; background: transparent; color: var(--blue); }
.btn--quiet:hover { border-color: transparent; background: var(--wash); color: var(--blue); }
.btn--quiet.btn--warn { color: var(--danger); }
.btn--quiet.btn--warn:hover { background: #FDEDEC; color: var(--danger); }
.btn--danger { border-color: var(--danger); background: var(--card); color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); background: #FDEDEC; color: var(--danger); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 32px; }
.danger-zone { padding: 20px; border: 1px solid #F2B8B5; border-radius: 6px; background: var(--card); }
.danger-zone h2 { margin: 0 0 6px; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--danger); }
.danger-zone p { margin-bottom: 14px; color: var(--slate); }
.photo-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.portrait--light { border-color: var(--line); background: #E4E8F3; color: var(--slate); }
.photo-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.counter { font-size: 13px; color: var(--slate); text-align: right; }
.name-grid { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); gap: 0 16px; }
.field-grid, .name-grid { margin-bottom: 18px; }
.field-grid:last-child, .name-grid:last-child { margin-bottom: 0; }
.name-preview {
  margin: -4px 0 18px; padding: 10px 14px;
  border-left: 3px solid var(--gold); background: var(--ground);
  font-size: 14px; line-height: 21px;
}
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px 16px; }
.link-note { margin: -8px 0 20px; font-size: 14px; line-height: 20px; color: var(--slate); }
.readonly { padding: 10px 14px; border: 1px dashed var(--line); border-radius: 4px; overflow-wrap: anywhere; }
#error-summary ul { margin: 8px 0 0; padding-left: 20px; }
#error-summary a { color: var(--danger); font-weight: 700; }

/* ---------- Review page ---------- */

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-bar h2 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 700; }
.panel { margin: 0 0 20px; padding: 20px; border: 1px solid var(--trace); border-radius: 6px; background: var(--card); }
.panel h2 { margin: 0 0 12px; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--blue); }
.panel > summary {
  padding: 8px 0; cursor: pointer;
  font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--blue);
}
.panel[open] > summary { margin-bottom: 12px; }
.admin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trace); }
.admin-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 16px 4px; border-bottom: 1px solid var(--trace);
}
.admin-empty { padding: 24px 4px; color: var(--slate); }
.admin-item__who { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-item__name { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 24px; }
.admin-item__meta { font-size: 14px; color: var(--slate); overflow-wrap: anywhere; }
.admin-item__actions { display: flex; flex-wrap: wrap; gap: 4px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px;
  border: 1px solid var(--trace); border-radius: 3px; background: var(--ground);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.badge--pending { border-color: var(--gold); background: var(--gold); }
.badge--published { border-color: #9BD3B5; background: #EEF8F2; color: var(--ok); }
.badge--returned, .badge--withdrawn, .badge--hidden, .badge--expired { border-color: #F2B8B5; background: #FDEDEC; color: var(--danger); }
.link-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.link-box code {
  flex: 1 1 280px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--trace); border-radius: 4px; background: #FFFFFF;
  font-size: 13px; overflow-wrap: anywhere;
}
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.preview { margin-top: 20px; border: 1px solid var(--trace); border-radius: 6px; overflow: hidden; background: var(--ground); }
.preview-label { margin-top: 24px; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--blue); }

@media (max-width: 480px) {
  .name-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .band__traces { width: 150px; height: 130px; }
  .band__traces .trace--wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}