/* 7419 Outreach Tracker — Primer (github.com/primer) with the team's colors.
   primer.css (v21.5.1, MIT) provides every component; this file re-points Primer's tokens to 7419's palette
   (navy #11224e / #1a2f5e, gold #ffc14a / #ffb41a / #ffcd6b / #d59a25 / #926408, red #dc2626) and adds the
   few app-specific pieces Primer doesn't ship (photo grid, capture box, layout). */

[data-color-mode=light][data-light-theme=light],
:root {
  /* text */
  --fgColor-default: #11224e;
  --fgColor-muted: #64748b;
  --fgColor-onEmphasis: #ffffff;
  --fgColor-accent: #11224e;
  --fgColor-link: #11224e;
  --fgColor-success: #926408;
  --fgColor-attention: #926408;
  --fgColor-danger: #dc2626;
  --fgColor-open: #11224e;
  --fgColor-closed: #dc2626;

  /* emphasis / muted backgrounds */
  --bgColor-emphasis: #11224e;
  --bgColor-accent-emphasis: #11224e;
  --bgColor-accent-muted: #eaedf3;
  --bgColor-success-emphasis: #ffc14a;
  --bgColor-success-muted: #fff4d6;
  --bgColor-attention-emphasis: #d59a25;
  --bgColor-attention-muted: #fff4d6;
  --bgColor-danger-emphasis: #dc2626;
  --bgColor-danger-muted: #fee2e2;
  --bgColor-open-emphasis: #11224e;
  --bgColor-closed-emphasis: #dc2626;

  --borderColor-accent-emphasis: #11224e;
  --borderColor-success-emphasis: #d59a25;
  --borderColor-attention-emphasis: #d59a25;
  --borderColor-danger-emphasis: #dc2626;
  --borderColor-open-emphasis: #11224e;
  --borderColor-closed-emphasis: #dc2626;

  /* buttons: the team's primary action color is gold on navy text (as on 7419.tech) */
  --button-primary-bgColor-rest: #ffc14a;
  --button-primary-bgColor-hover: #ffb41a;
  --button-primary-bgColor-active: #f0a81c;
  --button-primary-bgColor-disabled: #ffe3a8;
  --button-primary-fgColor-rest: #11224e;
  --button-primary-fgColor-disabled: #8a7a55;
  --button-primary-borderColor-rest: #1f232826;
  --button-primary-borderColor-hover: #1f232826;
  --button-primary-borderColor-active: #1f232826;
  --button-primary-borderColor-disabled: #1f232826;
  --button-primary-iconColor-rest: #11224e;
  --button-primary-shadow-selected: inset 0 1px 0 0 #0000001f;
  --button-danger-fgColor-rest: #dc2626;
  --button-danger-bgColor-hover: #b91c1c;
  --button-danger-borderColor-hover: #b91c1c;
  --button-danger-bgColor-active: #991b1b;
  --button-invisible-fgColor-rest: #11224e;
  --button-invisible-fgColor-hover: #11224e;
  --buttonCounter-primary-bgColor-rest: #11224e33;

  /* focus, nav, header */
  --focus-outlineColor: #11224e;
  --underlineNav-borderColor-active: #ffc14a;
  --header-bgColor: #11224e;
  --header-fgColor-default: #ffffffb3;
  --header-fgColor-logo: #ffffff;
  --header-borderColor-divider: #ffffff33;
  --headerSearch-bgColor: #1a2f5e;

  --selection-bgColor: #ffc14a66;
}

html, body { background: var(--bgColor-default); }
body { min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
main { padding-bottom: calc(var(--base-size-48) + env(safe-area-inset-bottom, 0px)); }
.hidden { display: none !important; }
::selection { background: #ffc14a66; }

/* ---------- header (Primer .Header, navy) ---------- */
.Header { padding-top: calc(var(--base-size-16) + env(safe-area-inset-top, 0px)); position: sticky; top: 0; }
.Header .brand { display: flex; align-items: center; gap: 10px; }
.Header .brand img { width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.Header .brand small { display: block; font-size: 12px; font-weight: 400; color: var(--header-fgColor-default); line-height: 1.2; }
.Header .Header-link.text-normal { font-weight: 400; }
.Header .btn-header { color: var(--header-fgColor-logo); background: transparent; border-color: #ffffff4d; }
.Header .btn-header:hover { background: #ffffff14; border-color: #ffffff80; color: #fff; }

/* ---------- sign-in page (github.com/login proportions) ---------- */
.auth-page { max-width: 340px; margin: 0 auto; padding-top: var(--base-size-24); }
.auth-page h1 { font-size: 24px; font-weight: 300; letter-spacing: -0.5px; text-align: center; margin: var(--base-size-16) 0 var(--base-size-8); }
.auth-page .auth-form { background: var(--bgColor-muted); border: 1px solid var(--borderColor-default); border-radius: var(--borderRadius-medium); padding: var(--base-size-16); }
.auth-page .form-group { margin: 0 0 var(--base-size-16); }
.auth-page .form-group label { display: block; font-weight: 400; font-size: 14px; margin-bottom: var(--base-size-8); }
.auth-page .form-control { width: 100%; }
.auth-page .callout { border: 1px solid var(--borderColor-default); border-radius: var(--borderRadius-medium); padding: var(--base-size-16); text-align: center; margin-top: var(--base-size-16); font-size: 14px; }
.auth-page .btn-block { margin-top: var(--base-size-4); }

/* ---------- forms ---------- */
.form-group { margin-bottom: var(--base-size-16); }
.form-group label, .FormControl-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--base-size-8); }
.form-group .note, .FormControl-caption { display: block; font-size: 12px; color: var(--fgColor-muted); margin-top: var(--base-size-4); }
.form-control.width-full { width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--base-size-16); }
@media (max-width: 543px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-control { font-size: 16px; } /* keeps iOS Safari from zooming into inputs */
}
.form-error { color: var(--fgColor-danger); font-size: 12px; margin: calc(var(--base-size-8) * -1) 0 var(--base-size-12); }
.form-error:empty { display: none; }

/* ---------- boxes ---------- */
.Box + .Box, .Box + .flash, .flash + .Box { margin-top: var(--base-size-16); }
.Box-title { font-size: 14px; font-weight: 600; margin: 0; }
.Box-header.d-flex { align-items: center; gap: var(--base-size-8); }
.Box-row.d-flex { gap: var(--base-size-12); }

/* ---------- progress ---------- */
.Progress-item.approved { background: var(--bgColor-success-emphasis); }
.Progress-item.pending { background: repeating-linear-gradient(135deg, #ffcd6b 0 4px, #ffe6b3 4px 8px); }
.legend { list-style: none; margin: var(--base-size-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--base-size-4) var(--base-size-16); font-size: 12px; color: var(--fgColor-muted); }
.legend b { color: var(--fgColor-default); font-weight: 600; }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.legend .dot.approved { background: var(--bgColor-success-emphasis); }
.legend .dot.pending { background: #ffcd6b; }
.legend .dot.left { background: var(--bgColor-neutral-muted); }
.big-number { font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big-number small { font-size: 16px; font-weight: 400; color: var(--fgColor-muted); margin-left: 2px; letter-spacing: 0; }

/* ---------- status labels ---------- */
.Label.Label--approved { background: #ffc14a; border-color: #ffc14a; color: #11224e; }
.Label.Label--live { background: #11224e; border-color: #11224e; color: #fff; }
.Label .octicon { vertical-align: -2px; }
.State { padding: 5px 12px; font-size: 14px; font-weight: 500; line-height: 20px; border-radius: 2em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.State--open { background: #11224e; color: #fff; }
.State--open .octicon { color: #ffc14a; }
.State--draft { background: var(--bgColor-neutral-muted); color: var(--fgColor-default); box-shadow: inset 0 0 0 1px var(--borderColor-default); }
.State--success { background: #ffc14a; color: #11224e; }
.State .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffc14a; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.elapsed { font-size: 24px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }

/* ---------- sessions ---------- */
.session-row { display: flex; gap: var(--base-size-16); align-items: flex-start; }
.session-row .main { flex: 1 1 auto; min-width: 0; }
.session-row .hours { text-align: right; white-space: nowrap; flex: none; }
.session-row .hours b { font-size: 20px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.session-row .hours small { display: block; font-size: 12px; color: var(--fgColor-muted); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--base-size-8); margin-top: var(--base-size-12); max-width: 360px; }
.photo button { display: block; width: 100%; padding: 0; border: 1px solid var(--borderColor-default); border-radius: var(--borderRadius-medium); overflow: hidden; background: var(--bgColor-muted); aspect-ratio: 4 / 3; cursor: pointer; }
.photo button:disabled { cursor: default; color: var(--fgColor-muted); font-size: 12px; display: grid; place-items: center; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--fgColor-muted); margin-top: var(--base-size-4); }
.photo .cap b { color: var(--fgColor-default); font-weight: 600; }
.review .photos { max-width: 480px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: #11224ee6; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.lightbox.show { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--borderRadius-medium); }
.lightbox .cap { color: #fff; margin-top: 12px; text-align: center; font-size: 14px; }
.lightbox .cap b { color: #ffc14a; }

/* ---------- dialog (Primer Overlay on a native <dialog>) ---------- */
dialog.Overlay { position: fixed; }
dialog.Overlay::backdrop { background: var(--overlay-backdrop-bgColor, #c8d1da66); }
dialog.Overlay[open] { animation: Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1); }
@media (max-width: 767px) {
  dialog.Overlay.Overlay--placement-bottom-whenNarrow { inset: auto 0 0; margin: 0; width: 100%; max-width: 100vw; max-height: calc(100dvh - 48px); border-radius: 12px 12px 0 0; animation: Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1); }
  dialog.Overlay .Overlay-footer { padding-bottom: calc(var(--base-size-16) + env(safe-area-inset-bottom, 0px)); }
}
@keyframes Overlay--motion-scaleFade { 0% { opacity: 0; transform: scale(.5); } }
@keyframes Overlay--motion-slideUp { 0% { transform: translateY(100%); } }
.Overlay-body .form-group:last-child { margin-bottom: 0; }

/* photo capture */
.capture { border: 1px dashed var(--borderColor-default); border-radius: var(--borderRadius-medium); background: var(--bgColor-muted); text-align: center; padding: var(--base-size-24) var(--base-size-16); }
.capture .octicon { color: var(--fgColor-muted); margin-bottom: var(--base-size-8); }
.capture input { display: none; }
.capture.has-photo { padding: 0; border-style: solid; overflow: hidden; position: relative; }
.capture.has-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.capture.has-photo .retake { position: absolute; right: 8px; bottom: 8px; }

/* ---------- toast (Primer .Toast, fixed) ---------- */
.Toast.app-toast { position: fixed; left: 50%; bottom: calc(var(--base-size-16) + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.33,1,.68,1); z-index: 210; pointer-events: none; margin: 0; max-width: calc(100vw - 32px); }
.Toast.app-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- admin ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--base-size-12); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat .n { font-size: 24px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--fgColor-muted); }
.UnderlineNav-item { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.UnderlineNav-item .Counter { margin-left: 4px; }
.review .decision { display: grid; grid-template-columns: 1fr; gap: var(--base-size-12) var(--base-size-16); }
@media (min-width: 768px) { .review .decision { grid-template-columns: 160px 1fr; } .review .decision .span { grid-column: 1 / -1; } }
.review .decision .form-group { margin: 0; }
.review .actions { display: flex; flex-wrap: wrap; gap: var(--base-size-8); grid-column: 1 / -1; }
.member-row .Progress { margin-top: var(--base-size-8); }
.member-row .nums { text-align: right; white-space: nowrap; }
.member-row .nums b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.member-row .nums small { color: var(--fgColor-muted); font-size: 12px; }
.initials { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #11224e; color: #ffc14a; font-size: 12px; font-weight: 600; flex: none; letter-spacing: .02em; }
.initials.small { width: 24px; height: 24px; font-size: 10px; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--base-size-8); align-items: center; }
.toolbar .form-control { min-width: 0; }
.toolbar .spacer { flex: 1 1 auto; }

/* ---------- misc ---------- */
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo-banner { border-radius: 0; border-width: 0 0 1px; text-align: center; font-size: 12px; padding: var(--base-size-8) var(--base-size-16); }
footer { font-size: 12px; color: var(--fgColor-muted); }
.blankslate .octicon { color: var(--fgColor-muted); margin-bottom: var(--base-size-8); }
.hide-sm-inline { display: none; }
@media (min-width: 544px) { .hide-sm-inline { display: inline; } }
.octicon { vertical-align: text-bottom; fill: currentColor; }
.btn .octicon { vertical-align: text-bottom; margin-right: 4px; }
.btn-large { font-size: 16px; padding: 10px 20px; border-radius: 6px; }
.btn.btn-icon-only .octicon { margin: 0; }
.mt-0 { margin-top: 0 !important; }

/* ---------- refinements after first render ---------- */
.btn svg.octicon { margin-right: 6px; }
.btn.btn-icon-only svg.octicon { margin-right: 0; }
.Toast--success .Toast-icon { color: #11224e; }
.photo .cap { white-space: nowrap; gap: 6px; }
@media (max-width: 543px) {
  .session-row { display: block; }
  .session-row .hours { float: right; margin-left: 12px; }
  .session-row .main { overflow: visible; }
  .photos { max-width: none; }
  .review .photos { max-width: none; }
}
.demo-banner { border-left: 0; border-right: 0; }
.State--draft { background: var(--bgColor-neutral-muted); box-shadow: none; }

.stats .Box { margin-top: 0; }
@media (max-width: 543px) {
  .UnderlineNav-item .UnderlineNav-octicon { display: none !important; } /* Primer forces display:inline with !important */
  .UnderlineNav-body .UnderlineNav-item { padding: 0 8px; }
  .UnderlineNav-body { gap: 0; }
}
.btn .octicon:only-child { margin-right: 6px; }
.btn.btn-icon-only .octicon:only-child, .close-button .octicon:only-child { margin-right: 0; }

/* page subtitle under the h1 (semester · requirement) */
.page-sub, .mono-note { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; font-weight: 400; color: var(--fgColor-muted); line-height: 1.5; }
.page-sub { margin-top: 2px; }

/* role badge: rectangular, navy */
.Label.Label--admin { background: #11224e; border-color: #11224e; color: #fff; border-radius: 4px; }
.member-actions { display: flex; flex-wrap: wrap; gap: var(--base-size-8); margin-top: var(--base-size-8); }