/* HabHub portal — brand styling ported from the original HabHub project.
   KW Habilitation brand. Keep colors/animation values in sync with the brand book. */

:root {
  --hh-blue: #0065BD;
  --hh-cyan: #009FDA;
  --hh-magenta: #D10074;
  --hh-green: #69BE28;
  --hh-gold: #EBB700;
  --hh-purple: #6E2585;
  --hh-dark: #1a1a2e;
  --hh-darker: #111827;
  --hh-text: #1a1a2e;
  --hh-muted: #64748b;
  --hh-faint: #94a3b8;
  /* Rounded display face — brand character; reserve for large headings/logo.
     Body + nav use a legible system sans so text stays crisp at small sizes. */
  --hh-display: 'Arial Rounded MT Bold', 'Helvetica Rounded', 'Arial', sans-serif;
  --hh-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.hh-body {
  font-family: var(--hh-sans);
  color: var(--hh-text);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Brand stripe — cyan / green / magenta / gold quarters */
.brand-stripe {
  height: 4px;
  background: linear-gradient(
    90deg,
    #009FDA 0%, #009FDA 25%,
    #69BE28 25%, #69BE28 50%,
    #D10074 50%, #D10074 75%,
    #EBB700 75%, #EBB700 100%
  );
}

/* ---------- Header ---------- */
.hh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.hh-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 64px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hh-header-logo { height: 36px; width: auto; display: block; }
.hh-header-actions { display: flex; align-items: center; gap: 0.9rem; }
.hh-user { color: var(--hh-muted); font-size: 0.85rem; }
.hh-signout {
  font-size: 0.8rem;
  color: var(--hh-blue);
  text-decoration: none;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.3rem 0.7rem;
  transition: all 0.2s;
}
.hh-signout:hover { background: #f0f4f8; }

/* ---------- Main ---------- */
.hh-main { flex: 1 1 auto; }
.hh-container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; }

/* ---------- Footer ---------- */
.hh-footer { margin-top: auto; }
.hh-footer-bar {
  background: var(--hh-dark);
  padding: 1.25rem;
}
.hh-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.hh-footer-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}
.hh-footer-logo {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

/* ---------- Login / auth-error page ---------- */
.login-bg {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 159, 218, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(105, 190, 40, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(209, 0, 116, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  animation: login-float 20s ease-in-out infinite;
}
.login-orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #009FDA 0%, transparent 70%);
  top: -10%; right: -5%; animation-delay: 0s;
}
.login-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #69BE28 0%, transparent 70%);
  bottom: -5%; left: -8%; animation-delay: -7s;
}
.login-orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, #D10074 0%, transparent 70%);
  bottom: 20%; right: -10%; animation-delay: -13s;
}
@keyframes login-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15px, -20px) scale(1.05); }
  66% { transform: translate(-10px, 12px) scale(0.97); }
}

.login-logo { position: relative; z-index: 10; margin-bottom: 2.5rem; }
.login-logo img { height: 84px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }

.login-card-wrap { position: relative; z-index: 10; width: 100%; max-width: 380px; }
.login-card {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.8);
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.login-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.login-card h1 {
  margin: 0 0 0.375rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hh-dark);
}
.login-card .login-sub {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--hh-muted);
}
.login-card .login-hint {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--hh-faint);
}

/* Microsoft sign-in button */
.ms-button {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--hh-blue);
  padding: 0.875rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.ms-button:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 101, 189, 0.25);
  background: #007ad0;
}
.ms-button:active { transform: scale(0.98); }
.ms-button svg { position: relative; width: 18px; height: 18px; }
.ms-button span { position: relative; }

/* Brand dots */
.login-dots {
  position: relative;
  z-index: 10;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.login-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0.7;
}
.login-dots .d-cyan { background: var(--hh-cyan); }
.login-dots .d-green { background: var(--hh-green); }
.login-dots .d-magenta { background: var(--hh-magenta); }
.login-dots .d-gold { background: var(--hh-gold); }

/* Error icon */
.login-error-icon {
  display: flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  font-size: 1.1rem;
}

/* Staggered entrance */
.entrance { animation: login-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.entrance-1 { animation-delay: 0.1s; }
.entrance-2 { animation-delay: 0.25s; }
.entrance-3 { animation-delay: 0.45s; }
@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-orb, .entrance { animation: none; }
}

/* ====================== Browse (HabHub-style) ====================== */
.hh-page-title { font-family: var(--hh-display); color: var(--hh-dark); font-weight: 700; margin: 0 0 0.25rem; font-size: 1.5rem; }
.hh-page-title .hh-name { color: var(--hh-blue); }
.hh-page-sub { color: var(--hh-muted); margin: 0 0 1.5rem; }
.hh-empty { color: var(--hh-muted); font-style: italic; margin-top: 1rem; }

.hh-breadcrumbs { font-size: 0.85rem; margin-bottom: 1rem; color: var(--hh-muted); }
.hh-breadcrumbs a { color: var(--hh-blue); text-decoration: none; }
.hh-breadcrumbs a:hover { text-decoration: underline; }
.hh-breadcrumbs .hh-sep { margin: 0 0.4rem; color: var(--hh-faint); }
.hh-breadcrumbs .hh-current { color: var(--hh-text); font-weight: 600; }

/* ---------- Section cards (accent bar + colored header) ---------- */
.hh-sections { display: flex; flex-direction: column; gap: 1.5rem; }
/* extra breathing room between the home Announcements section and the tile grid */
.hh-home-announce { margin-bottom: 2rem; }
/* clickable section header (e.g. home "Announcements" -> full list) */
.hh-section-headlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.hh-section-headlink .hh-section-go {
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.16s, transform 0.16s;
}
.hh-section-headlink:hover .hh-section-title { text-decoration: underline; }
.hh-section-headlink:hover .hh-section-go { opacity: 0.8; transform: translateX(0); }
.hh-section {
  position: relative; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.85rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden;
}
.hh-section-bar { height: 4px; width: 100%; }
.hh-section-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.25rem 0.5rem; }
.hh-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 0.55rem; font-size: 0.9rem;
}
.hh-section-title { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hh-section-count {
  background: #f0f4f8; color: var(--hh-muted); border-radius: 1rem;
  padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 600;
}
.hh-section-body { padding: 0.5rem 1.25rem 1.25rem; }

/* ---------- Tile cards (white, colored border + chip + title) ---------- */
.hh-tile-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .hh-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .hh-tile-grid { grid-template-columns: repeat(4, 1fr); } }

.hh-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  min-height: 156px; padding: 1.4rem 1rem; background: #fff;
  border: 3px solid #e2e8f0; border-radius: 1rem; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hh-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0,0,0,0.25); }
.hh-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 0.9rem; font-size: 1.3rem;
}
.hh-tile-title { font-family: var(--hh-display); font-weight: 800; font-size: 1.05rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; }
.hh-tile-ext { position: absolute; top: 0.6rem; right: 0.7rem; color: var(--hh-faint); font-size: 0.75rem; }

/* brand-color variants: border (20%), icon chip (10% bg + solid), title */
.hh-tile.c-cyan    { border-color: rgba(0,159,218,0.25); }
.hh-tile.c-cyan:hover    { border-color: rgba(0,159,218,0.6); }
.hh-tile.c-cyan .hh-tile-icon  { background: rgba(0,159,218,0.1); color: var(--hh-cyan); }
.hh-tile.c-cyan .hh-tile-title { color: var(--hh-cyan); }
.hh-tile.c-green   { border-color: rgba(105,190,40,0.25); }
.hh-tile.c-green:hover   { border-color: rgba(105,190,40,0.6); }
.hh-tile.c-green .hh-tile-icon { background: rgba(105,190,40,0.1); color: var(--hh-green); }
.hh-tile.c-green .hh-tile-title{ color: var(--hh-green); }
.hh-tile.c-magenta { border-color: rgba(209,0,116,0.25); }
.hh-tile.c-magenta:hover { border-color: rgba(209,0,116,0.6); }
.hh-tile.c-magenta .hh-tile-icon  { background: rgba(209,0,116,0.1); color: var(--hh-magenta); }
.hh-tile.c-magenta .hh-tile-title { color: var(--hh-magenta); }
.hh-tile.c-gold    { border-color: rgba(235,183,0,0.3); }
.hh-tile.c-gold:hover    { border-color: rgba(235,183,0,0.7); }
.hh-tile.c-gold .hh-tile-icon  { background: rgba(235,183,0,0.12); color: #b88f00; }
.hh-tile.c-gold .hh-tile-title { color: #b88f00; }
.hh-tile.c-purple  { border-color: rgba(110,37,133,0.25); }
.hh-tile.c-purple:hover  { border-color: rgba(110,37,133,0.6); }
.hh-tile.c-purple .hh-tile-icon  { background: rgba(110,37,133,0.1); color: var(--hh-purple); }
.hh-tile.c-purple .hh-tile-title { color: var(--hh-purple); }
.hh-tile.c-blue    { border-color: rgba(0,101,189,0.25); }
.hh-tile.c-blue:hover    { border-color: rgba(0,101,189,0.6); }
.hh-tile.c-blue .hh-tile-icon  { background: rgba(0,101,189,0.1); color: var(--hh-blue); }
.hh-tile.c-blue .hh-tile-title { color: var(--hh-blue); }

/* ---------- File rows ---------- */
.hh-file-list { display: flex; flex-direction: column; }
.hh-file {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  padding: 0.7rem 0.6rem; background: transparent; border: none;
  border-bottom: 1px solid #eef2f6; cursor: pointer; text-align: left;
  font: inherit; color: var(--hh-text); transition: background 0.12s;
}
.hh-file:last-child { border-bottom: none; }
.hh-file:hover { background: #f6f9fc; }
.hh-file-icon { width: 1.4rem; font-size: 1.15rem; text-align: center; }
.hh-file-name { flex: 1; font-size: 0.92rem; font-weight: 500; }
.hh-file-size { color: var(--hh-faint); font-size: 0.8rem; }
.hh-file-go { color: var(--hh-faint); font-size: 0.75rem; }

/* ---------- In-browser viewer modal ---------- */
.hh-viewer {
  display: none; position: fixed; inset: 0; z-index: 1110;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); padding: 1rem;
}
.hh-viewer.open { display: flex; }
.hh-viewer-box {
  display: flex; flex-direction: column; width: 100%; max-width: 1100px;
  max-height: 92vh; background: #fff; border-radius: 1rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); overflow: hidden;
}
.hh-viewer-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.7rem 0.6rem 1.1rem; border-bottom: 1px solid #e2e8f0;
}
.hh-viewer-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.9rem;
  color: var(--hh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-viewer-actions { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }
.hh-viewer-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600; color: var(--hh-blue); text-decoration: none;
  background: rgba(0,101,189,0.08); border: 1px solid rgba(0,101,189,0.18);
  border-radius: 0.55rem; padding: 0.4rem 0.75rem; cursor: pointer; white-space: nowrap;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.hh-viewer-btn:hover { background: var(--hh-blue); color: #fff; border-color: var(--hh-blue); }
.hh-viewer-btn i { font-size: 0.78rem; }
@media (max-width: 560px) { .hh-viewer-btn span { display: none; } }
.hh-viewer-close { border: none; background: transparent; font-size: 1.4rem; flex: none;
  line-height: 1; color: var(--hh-muted); cursor: pointer; padding: 0 0.3rem; }
.hh-viewer-close:hover { color: var(--hh-magenta); }
.hh-viewer-body { flex: 1; overflow: auto; display: flex; flex-direction: column;
  align-items: center; padding: 0.75rem; min-height: 0; }
.hh-view-pdf { width: 100%; height: 80vh; border: none; border-radius: 0.5rem; }
.hh-view-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 0.5rem; }
.hh-view-media { max-width: 100%; max-height: 78vh; border-radius: 0.5rem; }
.hh-view-loading { color: var(--hh-muted); font-size: 0.9rem; padding: 3rem 1rem; }
.hh-view-loading .fa-spinner { margin-right: 0.5rem; color: var(--hh-blue); }

/* ---------- Flash messages ---------- */
.hh-flash { padding: 0.7rem 1rem; border-radius: 0.6rem; margin-bottom: 1rem; font-size: 0.9rem; }
.hh-flash-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.hh-flash-warning { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.hh-flash-danger  { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.hh-flash-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

/* ---------- Manager affordances ---------- */
.hh-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.hh-manage-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--hh-purple);
  background: rgba(110,37,133,0.1); border-radius: 1rem; padding: 0.2rem 0.7rem;
}
.hh-tile-wrap { position: relative; }
.hh-tile-del, .hh-file-del { display: inline; }
.hh-tile-del button {
  position: absolute; top: 0.4rem; left: 0.5rem; z-index: 2;
  border: none; background: rgba(255,255,255,0.9); color: #b91c1c;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.15s;
}
.hh-tile-wrap:hover .hh-tile-del button { opacity: 1; }
.hh-file-row { display: flex; align-items: center; }
.hh-file-row .hh-file { flex: 1; }
.hh-file-ver { color: var(--hh-faint); font-size: 0.75rem; font-weight: 600; }
.hh-file-del button {
  border: none; background: transparent; color: #cbd5e1; cursor: pointer;
  padding: 0 0.7rem; font-size: 0.9rem;
}
.hh-file-del button:hover { color: #b91c1c; }

/* ---------- Manage panel ---------- */
.hh-manage { display: flex; flex-direction: column; gap: 1.1rem; }
.hh-manage-block { display: flex; flex-direction: column; gap: 0.35rem; }
.hh-manage-label { font-weight: 600; font-size: 0.85rem; color: var(--hh-text); }
.hh-manage-label .fas { color: var(--hh-purple); margin-right: 0.3rem; }
.hh-manage-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.hh-manage-row input[type=text], .hh-manage-row input[type=url] {
  flex: 1; min-width: 160px; padding: 0.5rem 0.7rem; border: 1px solid #cbd5e1;
  border-radius: 0.5rem; font-size: 0.9rem; font-family: inherit;
}
.hh-manage-row input[type=file] { font-size: 0.88rem; }
.hh-manage-btn {
  background: var(--hh-blue); color: #fff; border: none; border-radius: 0.5rem;
  padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.hh-manage-btn:hover { background: #007ad0; }
.hh-manage-hint { font-size: 0.78rem; color: var(--hh-muted); }

/* ======================================================================
   Announcements
   A refined "notice board": dates read as a quiet blue label, titles are
   the prominent clickable element. Reuses the section-card, brand palette,
   radii (0.5–0.85rem) and soft shadows of the surrounding portal so the
   surfaces feel native rather than bolted on.
   ====================================================================== */

/* ---------- Nav: Home / Forms / Settings ---------- */
/* base.html marks the top nav items (incl. the Settings <summary>) as
   .hh-navlink; style them as a coherent set so the disclosure aligns. */
.hh-navlink {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hh-text);
  text-decoration: none;
  padding: 0.35rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.hh-navlink:hover { color: var(--hh-blue); border-bottom-color: var(--hh-blue); }
.hh-navlink .fas { font-size: 0.8em; margin-right: 0.2rem; }

/* ---------- Settings disclosure (tidy dropdown) ---------- */
.hh-settings { position: relative; }
.hh-settings > summary {
  list-style: none;            /* hide default marker (Firefox) */
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.hh-settings > summary::-webkit-details-marker { display: none; }  /* hide triangle (WebKit) */
.hh-settings[open] > summary { color: var(--hh-blue); border-bottom-color: var(--hh-blue); }
.hh-settings[open] > summary .fa-gear { transform: rotate(45deg); }
.hh-settings > summary .fa-gear { transition: transform 0.25s ease; }

.hh-settings-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35);
  animation: hh-pop 0.16s ease both;
}
/* little pointer notch */
.hh-settings-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 1rem;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.hh-settings-menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hh-text);
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.hh-settings-menu a:hover { background: #f0f4f8; color: var(--hh-blue); }
@keyframes hh-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Announcement feed: blog-style cards (home section + list page) ---------- */
.hh-ann-feed { display: flex; flex-direction: column; gap: 0.65rem; }

.hh-ann-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0.95rem 1.05rem;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eef2f6;
  border-left: 3px solid transparent;
  border-radius: 0.6rem;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.hh-ann-card:focus-visible { outline: 2px solid var(--hh-blue); outline-offset: 2px; }
/* Announcement modal */
.hh-ann-modal-box { max-width: 680px; }
.hh-ann-modal-date { margin: 0 0 0.5rem; padding: 0 1.25rem; font-size: 0.82rem; color: var(--hh-muted); }
.hh-ann-modal-body { padding: 0 1.25rem 1.4rem; }
.hh-ann-card::before { content: none; }
.hh-ann-card:hover {
  background: #f9fbfd;
  border-left-color: var(--hh-blue);
  box-shadow: 0 12px 26px -20px rgba(15, 23, 42, 0.45);
}

.hh-ann-card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin-bottom: 0.4rem;
}
.hh-ann-date {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hh-blue);
  opacity: 0.85;
}
.hh-ann-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hh-text);
  transition: color 0.14s;
}
.hh-ann-card:hover .hh-ann-title { color: var(--hh-blue); }

/* 3-line body preview; the rest is revealed on the detail page */
.hh-ann-excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hh-muted, #475569);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-ann-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hh-blue);
}
.hh-ann-more .fas { font-size: 0.85em; transition: transform 0.18s; }
.hh-ann-card:hover .hh-ann-more .fas { transform: translateX(3px); }
.hh-ann-more[hidden] { display: none; }   /* keep [hidden] authoritative over inline-flex */

.hh-ann-seeall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hh-blue);
  text-decoration: none;
  transition: gap 0.18s;
}
.hh-ann-seeall:hover { gap: 0.6rem; text-decoration: underline; }

/* ---------- Announcement detail ---------- */
.hh-ann-detail { max-width: 740px; }
.hh-ann-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hh-muted);
  text-decoration: none;
  transition: color 0.16s, gap 0.16s;
}
.hh-ann-back:hover { color: var(--hh-blue); gap: 0.6rem; }
.hh-ann-meta {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hh-blue);
  opacity: 0.85;
}
.hh-ann-meta::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--hh-blue);
  opacity: 0.5;
}

/* ---------- Announcement body (Quill "snow" output) ---------- */
.hh-ann-body {
  font-size: 1rem;
  line-height: 1.7;
  color: #27303f;
}
.hh-ann-body > :first-child { margin-top: 0; }
.hh-ann-body > :last-child { margin-bottom: 0; }
.hh-ann-body p { margin: 0 0 1rem; }
.hh-ann-body h1, .hh-ann-body h2, .hh-ann-body h3,
.hh-ann-body h4, .hh-ann-body h5, .hh-ann-body h6 {
  margin: 1.8rem 0 0.7rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--hh-dark);
}
.hh-ann-body h1 { font-size: 1.45rem; }
.hh-ann-body h2 { font-size: 1.25rem; }
.hh-ann-body h3 { font-size: 1.1rem; }
.hh-ann-body ul, .hh-ann-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.hh-ann-body li { margin: 0.3rem 0; }
.hh-ann-body a {
  color: var(--hh-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.hh-ann-body a:hover { color: var(--hh-magenta); }
.hh-ann-body strong, .hh-ann-body b { font-weight: 800; color: var(--hh-dark); }
.hh-ann-body em, .hh-ann-body i { font-style: italic; }
.hh-ann-body blockquote {
  margin: 1.2rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 4px solid rgba(0, 101, 189, 0.35);
  color: var(--hh-muted);
  font-style: italic;
}
.hh-ann-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }

/* ---------- Manage list ---------- */
.hh-manage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hh-manage-head .hh-page-title { margin: 0; }

.hh-manage-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 0.9rem;
}
.hh-manage-table thead th {
  text-align: left;
  padding: 0.7rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-muted);
}
.hh-manage-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
  color: var(--hh-text);
}
.hh-manage-table tbody tr:last-child td { border-bottom: none; }
.hh-manage-table tbody tr:hover { background: #f9fbfd; }
.hh-manage-table tbody td a { color: var(--hh-blue); text-decoration: none; font-weight: 600; }
.hh-manage-table tbody td a:hover { text-decoration: underline; }

.hh-manage-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}
.hh-manage-actions form { display: inline-flex; margin: 0; }
.hh-manage-actions a,
.hh-manage-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 0.45rem;
  color: var(--hh-muted);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.hh-manage-actions a:hover { background: #eef5fc; color: var(--hh-blue); }
.hh-manage-actions button:hover { background: #f0f4f8; color: var(--hh-text); }
.hh-manage-actions .fa-toggle-on { color: var(--hh-green); }
.hh-manage-actions form:last-child button:hover { background: #fef2f2; color: #b91c1c; }

/* ---------- Status badges (small pills) ---------- */
.hh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.hh-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hh-badge-on   { background: #ecfdf5; color: #047857; }
.hh-badge-off  { background: #f1f5f9; color: #64748b; }
.hh-badge-sched { background: #fffbeb; color: #b45309; }

/* ---------- Buttons (portal feel) ---------- */
.hh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.6rem;
  background: #fff;
  color: var(--hh-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.08s;
}
.hh-btn:hover { background: #f0f4f8; border-color: #94a3b8; }
.hh-btn:active { transform: scale(0.98); }
.hh-btn-primary {
  background: var(--hh-blue);
  border-color: var(--hh-blue);
  color: #fff;
}
.hh-btn-primary:hover {
  background: #007ad0;
  border-color: #007ad0;
  box-shadow: 0 8px 16px -8px rgba(0, 101, 189, 0.5);
}

/* ---------- Editor form ---------- */
.hh-ann-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 740px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
}
.hh-label {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hh-text);
}
.hh-ann-form > .hh-label:first-of-type { margin-top: 0; }
.hh-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.55rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--hh-text);
  background: #fff;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.hh-input:focus {
  outline: none;
  border-color: var(--hh-blue);
  box-shadow: 0 0 0 3px rgba(0, 101, 189, 0.12);
}

/* Quill editor surface — match input field styling */
.hh-ann-form #ann-editor {
  min-height: 200px;
  border: 1px solid #cbd5e1;
  border-top: none;
  border-radius: 0 0 0.55rem 0.55rem;
  font-family: inherit;
  font-size: 0.95rem;
}
.hh-ann-form .ql-toolbar.ql-snow {
  border: 1px solid #cbd5e1;
  border-radius: 0.55rem 0.55rem 0 0;
  background: #f8fafc;
}
.hh-ann-form .ql-container.ql-snow { border: none; }

.hh-ann-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hh-ann-form-row .hh-label { margin-top: 0.9rem; }

.hh-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hh-text);
  cursor: pointer;
}
.hh-check input[type=checkbox] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--hh-blue);
  cursor: pointer;
}

.hh-ann-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f6;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hh-ann-card { padding: 0.85rem 0.9rem; }
  .hh-ann-card-head { gap: 0.15rem 0.6rem; }
  .hh-ann-form-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .hh-manage-head { align-items: stretch; }
  .hh-manage-head .hh-btn { justify-content: center; }
  /* let the manage table scroll horizontally rather than crush columns */
  .hh-manage-table { display: block; overflow-x: auto; white-space: nowrap; }
  .hh-ann-form { padding: 1.1rem; }
  .hh-settings-menu { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-settings-menu { animation: none; }
  .hh-settings > summary .fa-gear { transition: none; }
}

/* ======================================================================
   In-place editing (library editors) — editor affordances + modal
   Brand purple reads as the "edit" accent (matches .hh-manage-badge). All
   radii/shadows/tokens mirror the surrounding portal so it feels native.
   ====================================================================== */

/* ---------- Editor action bar (under a page/folder title) ---------- */
.hh-editbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hh-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  border-radius: 0.7rem; padding: 0.5rem 0.9rem; font: inherit;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  border: 1px solid #d7dde6; background: #fff; color: var(--hh-text);
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hh-btn .fas { font-size: 0.85em; }
.hh-btn:hover { border-color: var(--hh-purple); color: var(--hh-purple); }
.hh-btn-primary {
  background: var(--hh-purple); border-color: var(--hh-purple); color: #fff;
}
.hh-btn-primary:hover { background: #7d2c98; border-color: #7d2c98; color: #fff;
  box-shadow: 0 8px 16px -8px rgba(110,37,133,0.5); }
.hh-btn-danger:hover { border-color: #dc2626; color: #dc2626; }
.hh-btn-sm { padding: 0.35rem 0.6rem; border-radius: 0.55rem; font-size: 0.78rem; }

/* ---------- Edit pencil on tile cards (mirrors .hh-tile-del) ---------- */
.hh-tile-edit button {
  position: absolute; top: 0.4rem; right: 0.5rem; z-index: 2;
  border: none; background: rgba(255,255,255,0.92); color: var(--hh-purple);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.72rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.15s;
}
.hh-tile-wrap:hover .hh-tile-edit button { opacity: 1; }

/* ---------- Per-document editor actions ---------- */
.hh-file-actions { display: inline-flex; align-items: center; gap: 0.15rem; }
.hh-file-actions button, .hh-file-actions a.hh-act-dl {
  border: none; background: transparent; color: #c2cbd6; cursor: pointer;
  padding: 0.3rem 0.5rem; font-size: 0.85rem; border-radius: 0.4rem;
  transition: color 0.14s, background 0.14s;
  display: inline-flex; align-items: center; text-decoration: none; line-height: 1;
}
.hh-file-actions button:hover, .hh-file-actions a.hh-act-dl:hover { background: #f0f4f8; color: var(--hh-purple); }
.hh-file-actions button.hh-act-del:hover { color: #b91c1c; }

/* ---------- Empty-state add prompt (folder with nothing yet) ---------- */
.hh-add-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 2.25rem 1rem; color: var(--hh-muted); text-align: center;
  border: 1.5px dashed #d7dde6; border-radius: 0.9rem; background: #fbfcfe;
}
.hh-add-prompt .fa-folder-open { font-size: 1.6rem; color: var(--hh-faint); }

/* ---------- Modal (forms; sibling of the file viewer) ---------- */
.hh-modal {
  display: none; position: fixed; inset: 0; z-index: 1100;
  align-items: center; justify-content: center;
  background: rgba(17,24,39,0.55); backdrop-filter: blur(3px); padding: 1rem;
}
.hh-modal.open { display: flex; }
.hh-modal-box {
  width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 1rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  animation: hh-pop 0.16s ease both;
}
.hh-modal-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1.1rem 1.25rem 0.5rem;
}
.hh-modal-head .hh-modal-ic {
  width: 2rem; height: 2rem; flex: none; border-radius: 0.6rem;
  display: grid; place-items: center;
  background: rgba(110,37,133,0.1); color: var(--hh-purple); font-size: 0.9rem;
}
.hh-modal-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--hh-dark); }
.hh-modal-x {
  margin-left: auto; border: none; background: transparent; font-size: 1.5rem;
  line-height: 1; color: var(--hh-muted); cursor: pointer; padding: 0 0.2rem;
}
.hh-modal-x:hover { color: var(--hh-magenta); }
.hh-modal-body { padding: 0.75rem 1.25rem 1.25rem; }
.hh-modal-foot {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  padding-top: 0.5rem; margin-top: 0.25rem;
}

/* ---------- Form fields (portal-native) ---------- */
.hh-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.hh-field:last-of-type { margin-bottom: 0; }
.hh-label { font-size: 0.82rem; font-weight: 700; color: var(--hh-text); }
.hh-input, .hh-textarea, .hh-select {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #cbd5e1;
  border-radius: 0.6rem; font: inherit; font-size: 0.92rem; color: var(--hh-text);
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
}
.hh-input:focus, .hh-textarea:focus, .hh-select:focus {
  outline: none; border-color: var(--hh-purple);
  box-shadow: 0 0 0 3px rgba(110,37,133,0.12);
}
.hh-textarea { resize: vertical; min-height: 3.5rem; }
.hh-select[multiple] { min-height: 6rem; }
.hh-help { font-size: 0.76rem; color: var(--hh-muted); }
.hh-row2 { display: flex; gap: 0.75rem; }
.hh-row2 > * { flex: 1; min-width: 0; }
.hh-color { width: 100%; height: 2.4rem; padding: 0.2rem; border: 1px solid #cbd5e1;
  border-radius: 0.6rem; background: #fff; cursor: pointer; }
.hh-icon-field { display: flex; align-items: center; gap: 0.6rem; }
.hh-icon-field .hh-icon-pv {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 0.6rem;
  display: grid; place-items: center; background: #f0f4f8; color: var(--hh-purple);
  font-size: 1rem;
}

/* ---------- Segmented "what to add" control ---------- */
.hh-seg { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.hh-seg button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.7rem 0.4rem; border: 1px solid #d7dde6; border-radius: 0.7rem;
  background: #fff; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--hh-muted); transition: all 0.14s;
}
.hh-seg button .fas { font-size: 1.05rem; }
.hh-seg button:hover { border-color: var(--hh-purple); color: var(--hh-purple); }
.hh-seg button.active {
  border-color: var(--hh-purple); color: var(--hh-purple);
  background: rgba(110,37,133,0.07); box-shadow: 0 0 0 1px var(--hh-purple) inset;
}

/* ---------- Version history list ---------- */
.hh-vers { display: flex; flex-direction: column; }
.hh-vers-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.2rem;
  border-bottom: 1px solid #eef2f6; font-size: 0.85rem;
}
.hh-vers-row:last-child { border-bottom: none; }
.hh-vers-no {
  flex: none; font-weight: 700; color: var(--hh-purple);
  background: rgba(110,37,133,0.1); border-radius: 0.4rem; padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
}
.hh-vers-meta { flex: 1; min-width: 0; color: var(--hh-muted); }
.hh-vers-meta .hh-vers-by { color: var(--hh-text); font-weight: 500; }
.hh-vers-cur { color: var(--hh-green); font-weight: 700; font-size: 0.75rem; }
.hh-modal-msg { font-size: 0.85rem; color: var(--hh-text); margin: 0 0 0.5rem; }
.hh-loading { color: var(--hh-muted); font-size: 0.88rem; padding: 1.5rem 0; text-align: center; }
.hh-loading .fa-spinner { color: var(--hh-purple); margin-right: 0.4rem; }

/* Profile dropdown + modal — Task 10 */
.hh-profile { position: relative; display: inline-block; }
.hh-profile > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.hh-profile > summary::-webkit-details-marker { display: none; }
.hh-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hh-avatar-initials { width: 28px; height: 28px; border-radius: 50%; background: #009FDA; color: #fff;
  align-items: center; justify-content: center; font-weight: 600; }
/* Profile modal toggles visibility via the [hidden] attribute (not the .open
   class the policy/file/edit modals use). Scope its show-rule to its own id so
   it does NOT clobber the shared `.hh-modal { display:none }` default — otherwise
   every .open-toggled modal stays visible and can't be closed. */
#hh-profile-modal:not([hidden]) { display: flex; }
.hh-modal-card { background: #fff; border-radius: 16px; padding: 24px; width: min(92vw, 460px);
  max-height: 86vh; overflow: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.hh-modal-close { position: absolute; top: 12px; right: 16px; border: 0; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: #888; }
.hh-deflist { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 12px 0 20px; }
.hh-deflist dt { color: #888; } .hh-deflist dd { margin: 0; }
.hh-field { display: block; margin: 10px 0; }
.hh-field span { display: block; font-size: .85rem; color: #555; margin-bottom: 2px; }
.hh-field input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 8px; }
.hh-req-row { padding: 6px 0; border-bottom: 1px solid #eee; }

/* ---- Graphical profile card (modal) ---- */
.hh-modal-card.hh-pcard { padding: 0; overflow: hidden; width: min(94vw, 430px); }
.hh-pcard .hh-modal-close {
  top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(255,255,255,.92); color: var(--hh-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 2; }
.hh-pcard .hh-modal-close:hover { background: #fff; color: var(--hh-magenta); }

.hh-pcard-banner { margin: 0; padding: 10px 18px; font-size: .9rem; font-weight: 600;
  background: #f0f9f4; border-bottom: 1px solid #e2e8f0; }

.hh-pcard-head {
  background: linear-gradient(135deg, var(--hh-cyan) 0%, var(--hh-blue) 100%);
  color: #fff; padding: 28px 20px 22px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 4px; }
.hh-pcard-avatar { width: 92px; height: 92px; border-radius: 50%; position: relative;
  margin-bottom: 8px; border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.22); background: #fff; }
.hh-pcard-photo, .hh-pcard-initials {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hh-pcard-initials { align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: var(--hh-blue);
  background: #fff; letter-spacing: .5px; }
.hh-pcard-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.hh-pcard-title { font-size: .92rem; font-weight: 600; opacity: .95; }
.hh-pcard-dept { font-size: .85rem; opacity: .8; }

.hh-pcard-rows { list-style: none; margin: 0; padding: 8px 4px; }
.hh-pcard-rows li { display: grid; grid-template-columns: 28px 92px 1fr; align-items: center;
  gap: 10px; padding: 9px 16px; border-bottom: 1px solid #f1f5f9; }
.hh-pcard-rows li:last-child { border-bottom: 0; }
.hh-pcard-rows li i { color: var(--hh-cyan); font-size: .95rem; text-align: center; }
.hh-pcard-lbl { color: var(--hh-faint); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; }
.hh-pcard-val { color: var(--hh-text); font-size: .92rem; word-break: break-word; }
a.hh-pcard-val { color: var(--hh-blue); text-decoration: none; }
a.hh-pcard-val:hover { text-decoration: underline; }

.hh-pcard-pad { padding: 16px 18px 20px; }
.hh-pcard-foot { padding-top: 4px; }
.hh-pcard-foot .hh-btn { width: 100%; }
.hh-pcard-sect { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--hh-dark); }
.hh-pcard-hint { margin: 0 0 12px; font-size: .85rem; color: var(--hh-muted); }
.hh-pcard-actions { display: flex; gap: 8px; margin-top: 14px; }
.hh-pcard-actions .hh-btn { flex: 1; }
.hh-btn-ghost { background: #eef2f6; color: var(--hh-dark); }
.hh-btn-ghost:hover { background: #e2e8f0; }

.hh-badge-pending { background: #fef6e0; color: #9a6a00; }
.hh-badge-approved { background: #e7f6e7; color: #1d7a32; }
.hh-badge-rejected { background: #fdeaea; color: #b3261e; }
.hh-req-row { padding: 12px 0; border-bottom: 1px solid #eef2f6; }
.hh-req-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hh-req-date { color: var(--hh-faint); font-size: .8rem; }
.hh-req-fields { font-size: .9rem; color: var(--hh-text); line-height: 1.5; }
.hh-req-field { color: var(--hh-muted); text-transform: capitalize; }
.hh-req-note { margin-top: 6px; font-size: .85rem; color: var(--hh-muted); font-style: italic; }

@media (max-width: 480px) {
  .hh-pcard-rows li { grid-template-columns: 24px 1fr; }
  .hh-pcard-rows li .hh-pcard-lbl { display: none; }
}

/* ---- Admin profile-requests tabs ---- */
.hh-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px;
  border-bottom: 2px solid #e2e8f0; }
.hh-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: .9rem; font-weight: 600; color: var(--hh-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.hh-tab:hover { color: var(--hh-dark); background: #f0f4f8; }
.hh-tab.is-active { color: var(--hh-blue); border-bottom-color: var(--hh-blue); }
.hh-tab-count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #e2e8f0; color: var(--hh-dark); font-size: .72rem; font-weight: 700; }
.hh-tab.is-active .hh-tab-count { background: var(--hh-blue); color: #fff; }

/* profile-requests manage-table row content */
.hh-req-who { font-weight: 700; color: var(--hh-dark); }
.hh-req-email { font-size: .8rem; }
.hh-req-change { font-size: .85rem; line-height: 1.5; }
.hh-req-change .hh-req-field { color: var(--hh-muted); font-weight: 600; margin-right: 6px; }
.hh-req-change .hh-req-from { color: var(--hh-faint); }
.hh-req-change .hh-req-from + i { margin: 0 5px; font-size: .7rem; color: var(--hh-faint); }
.hh-req-change .hh-req-to { color: var(--hh-blue); font-weight: 600; }
.hh-req-review { font-size: .78rem; margin-top: 4px; }
/* Entra / M365 write-back outcome on an approved request. */
.hh-req-applied { font-size: .78rem; font-weight: 600; margin-top: 5px; color: var(--hh-green); }
.hh-req-applyfail { font-size: .78rem; font-weight: 600; margin-top: 5px; color: #b00020; }
.hh-req-applied .fas, .hh-req-applyfail .fas { margin-right: 4px; }
.hh-req-btns { display: flex; gap: 6px; }
.hh-reject-row td { background: #f8fafc; }
.hh-reject-inline { display: flex; gap: 8px; align-items: center; }
.hh-reject-inline .hh-input { flex: 1; max-width: 420px; }

/* ---- Notifications ---- */
.hh-notif { position: relative; }
.hh-bell { position: relative; display: inline-flex; align-items: center; }
.hh-bell-badge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--hh-magenta); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
.hh-notif[open] .hh-notif-dropdown { display: block; }
.hh-notif-dropdown {
  display: none; position: absolute; right: 0; top: 100%; margin-top: 8px;
  width: 320px; max-height: 360px; overflow: auto; z-index: 50;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.hh-notif-dd-head, .hh-notif-dd-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-weight: 700; color: var(--hh-dark);
}
.hh-notif-dd-foot { border-top: 1px solid #eef0f2; font-weight: 600; }
.hh-notif-dd-empty { padding: 18px 12px; color: #6b7280; }
.hh-notif-dd-list { list-style: none; margin: 0; padding: 0; }
.hh-notif-dd-item { border-top: 1px solid #f1f3f5; }
.hh-notif-dd-item.is-unread { background: #eef7fd; }
.hh-notif-dd-link {
  display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  color: var(--hh-dark); text-decoration: none;
}
.hh-notif-dd-link i { color: var(--hh-blue); }
.hh-notif-dd-title { font-size: 14px; }
.hh-linkbtn { background: none; border: 0; color: var(--hh-blue); cursor: pointer; font-size: 13px; }

.hh-notif-banner {
  display: flex; gap: 10px; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 8px 16px;
  background: linear-gradient(90deg, var(--hh-blue), var(--hh-cyan)); color: #fff;
  font-weight: 600;
}
.hh-notif-banner-view { color: #fff; text-decoration: underline; margin-left: auto; }
.hh-notif-banner-x {
  background: none; border: 0; color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}

.hh-notif-page { max-width: 800px; margin: 0 auto; }
.hh-notif-head { display: flex; justify-content: space-between; align-items: center; }
.hh-notif-list { list-style: none; margin: 16px 0; padding: 0; }
.hh-notif-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border: 1px solid #eef0f2; border-radius: 10px; margin-bottom: 8px;
}
.hh-notif-item.is-unread { border-color: var(--hh-cyan); background: #f4fbfe; }
.hh-notif-icon { color: var(--hh-blue); margin-top: 2px; }
.hh-notif-title { font-weight: 700; color: var(--hh-dark); text-decoration: none; }
.hh-notif-text { color: #374151; font-size: 14px; margin-top: 2px; }
.hh-notif-time { color: #9ca3af; font-size: 12px; margin-top: 4px; }
.hh-notif-markread {
  margin-left: auto; background: none; border: 0; color: var(--hh-green);
  cursor: pointer; font-size: 16px;
}
.hh-muted { color: #6b7280; }

/* Admin compose form */
.hh-aud-options { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.3rem 0 0.2rem; }
.hh-radio { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;
  font-weight: 500; color: var(--hh-text); cursor: pointer; }
.hh-radio input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--hh-blue); cursor: pointer; }
.hh-ann-form [data-aud] { margin-top: 0.9rem; }
.hh-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hh-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef7fd;
  border: 1px solid var(--hh-cyan); border-radius: 12px; padding: 2px 8px 2px 10px; font-size: 13px; }
.hh-chip-x { background: none; border: 0; color: var(--hh-blue); font-size: 15px;
  line-height: 1; cursor: pointer; padding: 0; }
.hh-user-opt { display: block; width: 100%; text-align: left; background: #fff;
  border: 0; border-bottom: 1px solid #f1f3f5; padding: 8px 10px; cursor: pointer; font-size: 14px; }
.hh-user-opt:hover { background: #f4fbfe; }
.hh-user-results { border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 4px;
  max-height: 220px; overflow: auto; }
.hh-user-results:empty { display: none; }

/* ---------- People-with-access grants (folder editor) ---------- */
.hh-grants { display: flex; flex-direction: column; gap: 0.55rem; }
.hh-grant-table { width: 100%; border-collapse: collapse; }
.hh-grant-table td { padding: 0.4rem 0.2rem; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.hh-grant-table tr:last-child td { border-bottom: none; }
.hh-grant-name { font-size: 0.9rem; color: #1e293b; line-height: 1.25; }
.hh-grant-email { display: block; font-size: 0.74rem; color: #94a3b8; }
.hh-grant-lvl { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: capitalize;
  padding: 0.1rem 0.55rem; border-radius: 999px; }
.hh-grant-lvl-view { background: #e2e8f0; color: #475569; }
.hh-grant-lvl-edit { background: #dcfce7; color: #15803d; }
.hh-grant-x { width: 1%; text-align: right; white-space: nowrap; }
.hh-grant-remove { border: none; background: none; cursor: pointer; color: #cbd5e1;
  font-size: 1.2rem; line-height: 1; padding: 0.1rem 0.35rem; border-radius: 6px; }
.hh-grant-remove:hover { color: #dc2626; background: #fef2f2; }

.hh-grant-add { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.hh-grant-pick-wrap { position: relative; flex: 1 1 170px; min-width: 0; }
.hh-grant-pick-wrap .hh-input { width: 100%; }
.hh-input-sm { padding: 0.42rem 0.55rem; font-size: 0.85rem; }
.hh-grant-add .hh-select { flex: 0 0 auto; width: auto; min-width: 5rem; }
.hh-grant-add .hh-btn { flex: 0 0 auto; white-space: nowrap; }

.hh-grant-results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); max-height: 220px; overflow-y: auto; }
.hh-grant-pick { display: block; width: 100%; text-align: left; border: none; background: none;
  cursor: pointer; padding: 0.45rem 0.7rem; border-bottom: 1px solid #f1f5f9; }
.hh-grant-pick:last-child { border-bottom: none; }
.hh-grant-pick:hover { background: #f0f4f8; }
.hh-grant-pick-name { display: block; font-size: 0.87rem; color: #1e293b; }
.hh-grant-pick-email { display: block; font-size: 0.74rem; color: #94a3b8; }

/* --- LMS learner player (PLAN-03) ------------------------------------ */
.lms-player { display: flex; gap: 1.5rem; align-items: flex-start; }
.lms-player-nav { flex: 0 0 260px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: .75rem; position: sticky; top: 1rem; }
.lms-player-main { flex: 1 1 auto; min-width: 0; }
.lms-nav-section { font-weight: 600; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; margin: .75rem .25rem .25rem; }
.lms-nav-list { list-style: none; margin: 0; padding: 0; }
.lms-nav-item a { display: flex; gap: .5rem; align-items: baseline;
  padding: .4rem .5rem; border-radius: 8px; color: inherit; text-decoration: none; }
.lms-nav-item a:hover { background: #eef2f7; }
.lms-nav-item.is-current a { background: #e0ecf7; font-weight: 600; }
.lms-nav-item.is-done .lms-nav-mark { color: #047857; }
.lms-nav-mark { flex: 0 0 auto; }
.lms-nav-opt { font-size: .75rem; color: #94a3b8; }
.lms-player-footer { display: flex; justify-content: space-between; gap: .75rem;
  margin-top: 1.5rem; flex-wrap: wrap; }
.lms-progress { background: #e2e8f0; border-radius: 999px; height: 10px;
  overflow: hidden; margin: .75rem 0 .25rem; }
.lms-progress-fill { background: #0065BD; height: 100%; transition: width .3s; }
.lms-outline, .lms-quiz-q ul { list-style: none; padding: 0; }
.lms-outline-item { display: flex; gap: .5rem; align-items: baseline; padding: .3rem 0; }
.lms-outline-item.is-done { color: #334155; }
.lms-outline-item.is-done .lms-nav-mark { color: #047857; }

/* ---------- LMS admin builder + shared admin-form utilities ----------
   These classes shipped in the builder templates without styles (the
   polish pass was deferred); everything below makes the authoring
   surfaces usable. The .hh-* utilities are intentionally global — the
   forms manage page uses the same previously-unstyled classes. */
.hh-inline-form { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.hh-inline-form .hh-input { width: auto; }
.hh-form {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.75rem; max-width: 36rem; margin: 1rem 0 1.5rem;
}
.hh-form .hh-label { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.hh-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; width: 100%; }
.hh-field-row .hh-label { flex: 1 1 12rem; }
.hh-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hh-row-actions { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.hh-row-archived td { opacity: 0.55; }
summary.hh-btn { list-style: none; }
summary.hh-btn::-webkit-details-marker { display: none; }
.hh-inline-details { position: relative; display: inline-block; }
.hh-inline-details[open] > .hh-inline-form {
  position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 30;
  display: flex; width: 20rem; max-width: 80vw; padding: 0.6rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.7rem;
  box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.3);
}
.hh-inline-details[open] > .hh-inline-form .hh-input { flex: 1; }
.hh-new-form-panel { margin-top: 1.25rem; }
.hh-new-form-panel > .hh-form {
  margin-top: 0.75rem; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.9rem; padding: 1rem 1.1rem;
}

.lms-builder { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.lms-outline-section {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.9rem;
  padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lms-section-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lms-rename-form { display: flex; flex: 1 1 18rem; gap: 0.4rem; }
.lms-rename-form .hh-input { flex: 1; min-width: 10rem; font-weight: 600; }
.lms-section-order { display: flex; gap: 0.35rem; margin-left: auto; }
.lms-component-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.lms-component-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.1rem; border-top: 1px solid #f1f5f9;
}
.lms-component-title { flex: 1 1 8rem; min-width: 8rem; font-weight: 600; }
.lms-component-actions {
  display: flex; align-items: center; gap: 0.35rem;
  margin-left: auto; flex-wrap: wrap;
}
.lms-add-component {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.6rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0;
}
.lms-add-component .hh-input[name="title"] { flex: 1 1 12rem; width: auto; }
.lms-add-component select.hh-input { width: auto; }
.lms-add-section {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 1rem; padding: 0.9rem 1.1rem; background: #f8fafc;
  border: 1.5px dashed #cbd5e1; border-radius: 0.9rem;
}
.lms-add-section .hh-input { flex: 1 1 14rem; width: auto; }

.lms-question-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; counter-reset: lmsq; }
.lms-question-list > li {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.1rem; border-top: 1px solid #f1f5f9; counter-increment: lmsq;
}
.lms-question-list > li::before { content: counter(lmsq) "."; font-weight: 700; color: #64748b; }
.lms-question-list > li > strong { flex: 1 1 10rem; }
.lms-choice-row { align-items: center; }
.lms-choice-row .hh-check { flex: 0 0 auto; }
.lms-choice-row .hh-input { flex: 1; }

/* Component editor pages: cards + video upload dropzone */
.lms-editor-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.9rem;
  padding: 1rem 1.1rem; margin: 0 0 1rem; max-width: 46rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lms-editor-card > .hh-section-title { margin: 0 0 0.75rem; }
.lms-editor-card .hh-form { margin: 0; max-width: none; }
.lms-video-current { margin-bottom: 1rem; }
.lms-video-current video {
  display: block; width: 100%; max-width: 40rem;
  border-radius: 0.7rem; background: #000;
}
.lms-video-current .hh-help { margin-top: 0.5rem; }
.lms-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 1.6rem 1rem; text-align: center; cursor: pointer;
  border: 1.5px dashed #cbd5e1; border-radius: 0.8rem; background: #f8fafc;
  transition: border-color 0.15s, background 0.15s;
}
.lms-dropzone:hover, .lms-dropzone.is-dragover {
  border-color: var(--hh-purple); background: #f7f0fa;
}
.lms-dropzone .fas { font-size: 1.5rem; color: var(--hh-purple); }
.lms-dropzone strong { font-size: 0.95rem; }
.lms-dropzone span { font-size: 0.8rem; color: #64748b; }
.lms-dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lms-video-upload { position: relative; }
.lms-video-upload progress {
  width: 100%; height: 0.6rem; margin-top: 0.6rem;
  accent-color: var(--hh-purple);
}
.lms-setting-row { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.lms-setting-row .hh-label { display: flex; flex-direction: column; gap: 0.3rem; }
.lms-input-narrow { width: 7rem; }
.lms-preview-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.lms-quiz-choice { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
.lms-quiz-choice.is-correct { color: #047857; font-weight: 600; }
.lms-quiz-choice.is-correct .lms-nav-mark { color: #047857; }
.lms-choice-block { width: 100%; }
.hh-tile-restricted { font-size: 0.72rem; color: #94a3b8; display: inline-flex; gap: 0.25rem; align-items: baseline; }

/* Module overview: landing hero + status outline */
.lms-overview-hero {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.9rem;
  padding: 1.25rem; margin-top: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lms-overview-icon {
  flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.lms-overview-head { flex: 1; min-width: 0; }
.lms-overview-head .hh-page-title { margin: 0 0 0.25rem; }
.lms-meta-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.25rem; }
.lms-start-btn { font-size: 0.95rem; padding: 0.65rem 1.5rem; }
.lms-overview-section { margin-top: 1rem; max-width: none; }  /* full container width, like the tile grid */
.lms-outline-link { display: flex; gap: 0.5rem; align-items: baseline; color: inherit; text-decoration: none; width: 100%; }
a.lms-outline-link:hover .lms-outline-title { color: var(--hh-purple); }
.lms-outline-icon { color: #94a3b8; font-size: 0.85rem; flex: 0 0 1.1rem; text-align: center; }
.lms-outline-title { font-weight: 500; }
.lms-outline-type { font-size: 0.75rem; color: #94a3b8; }
.lms-outline-state { margin-left: auto; font-size: 0.75rem; color: #64748b; white-space: nowrap; }
.lms-outline-state.is-done-text { color: #047857; font-weight: 600; }
.lms-outline-state.is-next-text { color: var(--hh-purple); font-weight: 600; }
.lms-outline-item.is-next .lms-outline-title { font-weight: 700; }
@media (max-width: 600px) { .lms-overview-hero { flex-direction: column; } }
.lms-start-form, .lms-done-form { margin: 1rem 0; }
.lms-module-link { text-decoration: none; color: inherit; display: block; }
.lms-richtext { max-width: 46rem; }
.lms-quiz-q { border: 1px solid #e2e8f0; border-radius: 12px;
  padding: .75rem 1rem; margin: .75rem 0; }
.lms-quiz-choice { display: flex; gap: .5rem; align-items: baseline;
  padding: .25rem 0; }
.lms-quiz-score { font-size: 1.1rem; font-weight: 600; }
.lms-quiz-score.is-pass { color: #047857; }
.lms-quiz-score.is-fail { color: #b91c1c; }
.lms-escape { margin-top: 1rem; }
.lms-video { width: 100%; max-width: 54rem; border-radius: 12px; background: #000; }
@media (max-width: 767px) {
  .lms-player { flex-direction: column; }
  .lms-player-nav { position: static; width: 100%; flex-basis: auto; }
}