*, *::before, *::after { box-sizing: border-box; }

/* A "#section" link lands below the sticky header, not under it. */
html { scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  font-family: var(--sb-font);
  font-size: var(--sb-text-md);
  line-height: 1.5;
  color: var(--sb-text);
  background: var(--sb-bg);
}

a { color: var(--sb-blue); }
/* Hover and focus fade in and out instead of switching at once (owner, 19 Oct 2026: "all hover effects
   should be a transition, not sudden"). Colours, borders and shadows only - nothing moves - so it is
   kept for reduced-motion users too. Placed first: a component that sets its own transition (a picker
   that slides in) still overrides it. */
a, button, summary, input, select, textarea, label, .skpa_btn, [role="button"], [role="menuitem"] {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, text-decoration-color .2s ease;
}
:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }

.skpa_site-header {
  background: var(--sb-surface);
  border-bottom: 3px solid var(--sb-teal);
  /* Stays at the top; slides away while scrolling down and back on scrolling up (owner, 14 Oct 2026;
     app.js sets the classes). z-index above the messaging dock (900) so the Me menu inside it stays on top. */
  position: sticky; top: 0; z-index: 950;
  transition: transform .2s ease;
}
.skpa_site-header--away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .skpa_site-header { transition: none; } }
/* Columns that stick while scrolling sit below the header while it is showing. */
html.skpa_header-pinned .skpa_rail,
html.skpa_header-pinned .skpa_admin-nav,
html.skpa_header-pinned .skpa_account > .skpa_account-nav { top: calc(var(--sb-header-h, 4.5rem) + var(--sb-space-4)); }
.skpa_rail, .skpa_admin-nav, .skpa_account > .skpa_account-nav { transition: top .2s ease; }
.skpa_site-header__inner {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--sb-space-3) var(--sb-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-4);
}
.skpa_brand { display: inline-flex; align-items: center; }
.skpa_brand__logo { display: block; height: 2.5rem; width: auto; }
.skpa_site-header form { margin: 0; }
.skpa_header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sb-space-3); }
.skpa_header-welcome { font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_header-navlink { display: inline-flex; align-items: center; gap: var(--sb-space-1); color: var(--sb-navy); font-weight: 600; }
/* A role's call to action in the main navigation - a teacher's "Generate resume" (owner, 12 Oct 2026). */
.skpa_header-cta { white-space: nowrap; }
.skpa_header-navlink__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
  font-size: 0.65rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--sb-danger); border-radius: 999px;
}
.skpa_bell { position: relative; display: inline-flex; padding: var(--sb-space-2); color: var(--sb-navy); border-radius: 50%; }
.skpa_bell:hover { background: var(--sb-bg); }
.skpa_bell__badge {
  position: absolute; top: 0; right: 0; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--sb-danger); border-radius: 999px;
}

/* Header nav collapse (owner, 29 Sept 2026: "responsiveness is heart of our portal because all
   people will use 90% in mobile view") - a signed-in header has 7+ items (welcome text, Feed,
   Networking, Admin, Jobs, Search, bell, sign-out) with no wrap handling, cramped on a phone.
   Same zero-JS checkbox-toggle convention already used for gallery-removal (.skpa_remove-toggle
   in this file) - works with no JavaScript, so the menu still opens with JS disabled. The
   checkbox itself is visually hidden via the existing .skpa_visually-hidden utility (clip-based,
   not display:none, so it stays keyboard-focusable/operable through its label). No visual change
   above the breakpoint - .skpa_header-actions renders exactly as it always has. */
/* Phone header (owner, 15 Oct 2026: "90% of teachers will see our portal via mobile only"):
   logo on the left; on the right what is used most stays in view - Sign in when signed out, the
   bell and the Me avatar when signed in - then the burger, which holds every page link. Tap
   targets are at least 44px. The burger turns into a cross while open; tapping the dimmed page
   (.skpa_nav-overlay) closes it. Above 48rem nothing folds: links first, then the quick group. */
.skpa_header-quick { display: flex; align-items: center; gap: var(--sb-space-2); }
.skpa_nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--sb-navy);
  background: transparent;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.skpa_nav-toggle:hover { background: var(--sb-bg); }
.skpa_nav-toggle__close { display: none; }
#skpa-nav-toggle:checked ~ .skpa_nav-toggle .skpa_nav-toggle__open { display: none; }
#skpa-nav-toggle:checked ~ .skpa_nav-toggle .skpa_nav-toggle__close { display: block; }
#skpa-nav-toggle:focus-visible ~ .skpa_nav-toggle { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
/* Unread requests or messages wait inside the closed burger - a dot says so. */
.skpa_nav-toggle__dot { position: absolute; top: 0.4rem; right: 0.4rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sb-danger); box-shadow: 0 0 0 2px var(--sb-surface); }
.skpa_nav-overlay { display: none; }
.skpa_header-actions .skpa_header-phone-only { display: none; }
@media (min-width: 48rem) {
  .skpa_header-actions { order: 1; margin-left: auto; }
  .skpa_header-quick { order: 2; }
}
@media (max-width: 47.99rem) {
  .skpa_site-header__inner { gap: var(--sb-space-2); padding-inline: var(--sb-space-3); }
  .skpa_brand { flex: 0 1 auto; min-width: 0; }
  .skpa_brand__logo { height: 2.125rem; max-width: 100%; object-fit: contain; object-position: left center; }
  .skpa_header-quick { margin-left: auto; gap: var(--sb-space-1); }
  .skpa_header-quick .skpa_header-wide-only { display: none; }
  .skpa_header-actions .skpa_header-phone-only { display: flex; }
  .skpa_header-quick .skpa_header-signin { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: var(--sb-space-4); white-space: nowrap; }
  .skpa_bell { padding: 0.6875rem; }
  .skpa_bell__badge { top: 0.2rem; right: 0.2rem; }
  .skpa_nav-toggle { display: flex; }
  .skpa_nav-overlay {
    position: fixed; inset: 0; top: var(--sb-header-h, 4.25rem); z-index: 15;
    background: rgba(2, 61, 91, 0.35);
  }
  #skpa-nav-toggle:checked ~ .skpa_nav-overlay { display: block; }
  .skpa_header-actions {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--sb-space-2) var(--sb-space-4) var(--sb-space-4);
    background: var(--sb-surface);
    border-top: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    z-index: 20;
    /* The header is sticky, so a long phone menu scrolls inside itself to reach its last items. */
    max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - var(--sb-header-h, 4.5rem)); overflow-y: auto; overscroll-behavior: contain;
  }
  #skpa-nav-toggle:checked ~ .skpa_header-actions { display: flex; }
  .skpa_header-navlink { width: 100%; min-height: 3rem; padding: 0 var(--sb-space-1); border-bottom: 1px solid var(--sb-border); font-size: 1rem; text-decoration: none; }
  .skpa_header-navlink:active { background: var(--sb-bg); }
  .skpa_header-actions .skpa_header-cta { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 2.75rem; align-items: center; margin-top: var(--sb-space-4); font-size: 1rem; }
}

/* Header "Me" dropdown (owner, 2 Oct 2026, from a LinkedIn screenshot: "Welcome, X" plus the bare
   Sign-out button became an avatar+name trigger that opens a LinkedIn-style panel - identity,
   View profile, Account, Manage, Sign out). Same zero-JS checkbox-toggle convention as
   .skpa_nav-toggle above, its own independent checkbox so the two menus open/close separately. */
.skpa_me { position: relative; }
.skpa_me__trigger { display: flex; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-1) var(--sb-space-2); border-radius: var(--sb-radius-sm); cursor: pointer; }
.skpa_me__trigger:hover { background: var(--sb-bg); }
.skpa_me__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); color: #fff; font-size: var(--sb-text-sm); font-weight: 700; }
.skpa_me__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_me__label { display: flex; align-items: center; gap: var(--sb-space-1); font-weight: 600; color: var(--sb-navy); }
.skpa_me__caret { flex: none; }

/* Invisible full-screen label wired to the same checkbox, sitting between the page and the panel
   (z-index 950 < panel's 960) - a click anywhere outside the panel lands on this and toggles the
   checkbox off, closing the menu (owner, 2 Oct 2026: clicking elsewhere didn't close it before). */
/* Above the messaging dock (z-index 900, message-dock.css) - an open menu is never covered by it (owner, 14 Oct 2026). */
.skpa_me__overlay { display: none; position: fixed; inset: 0; z-index: 950; cursor: default; }
#skpa-me-toggle:checked ~ .skpa_me__overlay { display: block; }

.skpa_me__panel {
  display: none;
  position: absolute; top: 100%; right: 0; z-index: 960;
  width: 16rem; max-width: 80vw; margin-top: var(--sb-space-2);
  /* A long menu stays inside the window and scrolls within its own box (owner, 14 Oct 2026). */
  max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sb-space-4);
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
}
#skpa-me-toggle:checked ~ .skpa_me__panel { display: block; }

.skpa_me__identity { padding-bottom: var(--sb-space-3); margin-bottom: var(--sb-space-3); text-align: center; border-bottom: 1px solid var(--sb-border); }
.skpa_me__identity .skpa_me__avatar { width: 3.5rem; height: 3.5rem; margin: 0 auto var(--sb-space-2); font-size: var(--sb-text-lg); }
.skpa_me__name { margin: 0; font-weight: 700; color: var(--sb-navy); }
.skpa_me__headline { margin: var(--sb-space-1) 0 var(--sb-space-3); color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

/* The border goes on a section that FOLLOWS another .skpa_me__section (adjacent-sibling), not on
   "the first section" via :first-of-type - that selector matches the first <div> among siblings,
   which is .skpa_me__identity (also a div), not Account, so Account's own border-top never
   actually got removed and doubled up with .skpa_me__identity's border-bottom (found from a real
   screenshot, 2 Oct 2026). This way Account (the first .skpa_me__section, whatever came before it)
   never gets a border-top, and Manage/Sign out each get exactly one, from this rule alone. */
.skpa_me__section { padding: var(--sb-space-3) 0; }
.skpa_me__section + .skpa_me__section { border-top: 1px solid var(--sb-border); }
.skpa_me__section-title { margin: 0 0 var(--sb-space-2); font-size: var(--sb-text-sm); font-weight: 700; color: var(--sb-text-muted); }
.skpa_me__item { display: block; padding: 4px 0 0px; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: var(--sb-text); text-decoration: none; background: transparent; border: 0; width: 100%; cursor: pointer; }
.skpa_me__item:hover { color: var(--sb-blue); }
@media (max-width: 47.99rem) {
  /* Me: the avatar alone (the word "Me" stays for screen readers), its panel opens full-width under the header. */
  .skpa_me { position: static; }
  .skpa_me__trigger { min-height: 2.75rem; padding: 0 var(--sb-space-1); }
  .skpa_me__word { display: none; }
  .skpa_me__panel {
    top: 100%; left: var(--sb-space-2); right: var(--sb-space-2); width: auto; max-width: none; margin-top: var(--sb-space-1);
    max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - var(--sb-header-h, 4.5rem) - 1rem);
  }
  .skpa_me__item { min-height: 2.75rem; display: flex; align-items: center; font-size: 1rem; }
  .skpa_me__item[hidden] { display: none; }
}
.skpa_me__section form { margin: 0; }
.skpa_me__signout:hover { color: var(--sb-danger); }

.skpa_notif { padding: var(--sb-space-3) 0; border-top: 1px solid var(--sb-border); }
.skpa_notif:first-of-type { padding-top: 0; border-top: 0; }
.skpa_notif--unread { background: rgba(9, 189, 177, 0.07); margin: 0 calc(var(--sb-space-3) * -1); padding: var(--sb-space-3); border-radius: var(--sb-radius-sm); }
.skpa_notif__title { margin: 0 0 var(--sb-space-1); font-weight: 600; }

.skpa_stat-row { display: flex; flex-wrap: wrap; gap: var(--sb-space-4); }
.skpa_stat { flex: 1 1 12rem; text-align: center; }
.skpa_stat__value { margin: 0; font-size: var(--sb-text-xl); font-weight: 700; color: var(--sb-navy); }
.skpa_stat__label { margin: 0; color: var(--sb-text-muted); }

/* align-items: flex-start (not center) - a row with only a name is fine centered, but the avatar
   visibly floats away from the name whenever the body has more than one line underneath it (a
   comment's text, a Remove button, a role label) - center-aligns the avatar against the whole
   stack's height instead of against the first line, which is what actually looks broken in a real
   screenshot. Top-aligning is the standard "avatar + stacked text" list pattern everywhere else. */
.skpa_viewer-row { display: flex; align-items: flex-start; gap: var(--sb-space-3); padding: var(--sb-space-3) 0; border-top: 1px solid var(--sb-border); }
.skpa_viewer-row:first-of-type { padding-top: 0; border-top: 0; }
.skpa_viewer-row__avatar { flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_viewer-row__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_viewer-row__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: #fff; }
/* flex:1;min-width:0 - without it a long unbroken name/headline forces this row wider than its
   card instead of wrapping, since a flex item's default min-width is auto, not 0. The sibling
   avatar+text-row components (.skpa_org-group__body, .skpa_mini-profile__body) already guard
   against this; this one was missed. */
.skpa_viewer-row__body { flex: 1; min-width: 0; }
.skpa_viewer-row__name { margin: 0; font-weight: 600; }
/* .skpa_link's own margin-left assumes it follows other inline text on the same line (e.g. a
   "Cancel" link after a "Save" button) - here it's the row's own name, the first/only thing on
   its line, so that margin just shoves it out of alignment with the avatar beside it and the
   text below it (found via a real screenshot, 29 Sept 2026). */
.skpa_viewer-row__name .skpa_link { margin-left: 0; }
.skpa_inline-stats .skpa_link, .skpa_enquiry .skpa_link, .skpa_compare .skpa_link { margin-left: 0; } /* links inside a line of text, e.g. "2 institutes · 2 teachers" */

.skpa_container { max-width: 64rem; margin: 0 auto; padding: var(--sb-space-4) var(--sb-space-4) var(--sb-space-6); }

.skpa_card {
  position: relative;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 1.25rem;
}
.skpa_card--narrow { max-width: 26rem; margin: var(--sb-space-8) auto; }

h1 { margin: 0 0 var(--sb-space-4); font-size: var(--sb-text-xl); color: var(--sb-navy); }
.skpa_muted { color: var(--sb-text-muted); margin-top: 4px; }
/* Descriptions under titles 14px (owner, 4 Oct 2026). Only whole grey paragraphs - a grey word inside a line keeps that line's size. */
p.skpa_muted { font-size: 0.875rem; }

.skpa_field { margin-bottom: var(--sb-space-3); }
.skpa_field label { display: block; margin-bottom: var(--sb-space-1); font-weight: 600; }
.skpa_field input, .skpa_field select, .skpa_field textarea, .skpa_master-search input {
  width: 100%;
  padding: var(--sb-space-2) var(--sb-space-3);
  font: inherit;
  color: inherit;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  background: #fff;
}
.skpa_field textarea { resize: vertical; min-height: 6rem; }
.skpa_field--error input, .skpa_field--error select { border-color: var(--sb-danger); }
.skpa_field__error { margin: var(--sb-space-1) 0 0; color: var(--sb-danger); font-size: var(--sb-text-sm); }
.skpa_field__hint { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

.skpa_btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--sb-teal-strong);
  border: 1px solid transparent;
  border-radius: var(--sb-radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.skpa_btn:hover { background: var(--sb-blue); }
.skpa_btn--block { width: 100%; }
.skpa_btn--ghost { color: var(--sb-navy); background: transparent; border-color: var(--sb-navy); }
.skpa_btn--ghost:hover { color: #fff; background: var(--sb-navy); }
/* Outlined red, same shape as ghost (before --sm so the small size still applies). */
.skpa_btn--danger { color: var(--sb-danger); background: transparent; border-color: var(--sb-danger); }
.skpa_btn--danger:hover { color: #fff; background: var(--sb-danger); }
.skpa_btn--sm { padding: 0.3rem 0.75rem; font-size: var(--sb-text-sm); }
/* A job's "View & apply" on a touch screen: a full 44px tap (most teachers apply from a phone). */
@media (hover: none) { .skpa_org-group__apply .skpa_btn { min-height: 44px; display: inline-flex; align-items: center; } }
.skpa_btn--google { display: flex; align-items: center; justify-content: center; gap: var(--sb-space-2); color: #3c4043; background: #fff; border: 1px solid var(--sb-border); }
.skpa_btn--google:hover { background: #f7f8f8; }

.skpa_or-divider { display: flex; align-items: center; gap: var(--sb-space-3); margin: var(--sb-space-4) 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_or-divider::before, .skpa_or-divider::after { content: ''; flex: 1; border-top: 1px solid var(--sb-border); }

.skpa_notice { padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-sm); background: #e7f6f5; color: var(--sb-navy); }

/* Wider card and grouped form fields */
.skpa_card--wide { max-width: 44rem; margin: var(--sb-space-4) auto; }
.skpa_card--spaced { margin-top: var(--sb-space-4); }
.skpa_divider { border: none; border-top: 1px solid var(--sb-border); margin: var(--sb-space-4) 0; }
/* Card titles 16px everywhere (owner, 4 Oct 2026: "titles as 16px like Finish your profile, Resume, Generate resume"). */
.skpa_card__title { margin: 0 0 var(--sb-space-1); font-size: 1rem; font-weight: 700; color: var(--sb-navy); }

.skpa_field__row { display: grid; grid-template-columns: 1fr; gap: 0 var(--sb-space-4); }
@media (min-width: 40rem) {
  .skpa_field__row { grid-template-columns: 1fr 1fr; }
  .skpa_field__row--3 { grid-template-columns: 2fr 2fr 1fr; }
}

fieldset.skpa_field { border: 0; padding: 0; min-width: 0; }
.skpa_legend { padding: 0; margin-bottom: var(--sb-space-2); font-weight: 600; }
.skpa_label--sub { margin-top: var(--sb-space-3); }
.skpa_checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sb-space-2) var(--sb-space-4); }
.skpa_field .skpa_check { display: flex; align-items: center; gap: var(--sb-space-2); font-weight: 400; margin: 0; }
.skpa_field .skpa_check input { width: auto; }
.skpa_field--error .skpa_legend { color: var(--sb-danger); }
.skpa_checklist { list-style: none; margin: 0 0 var(--sb-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--sb-space-2); }
.skpa_checklist__item { display: flex; align-items: center; gap: var(--sb-space-2); flex-wrap: wrap; }
.skpa_link { margin-left: var(--sb-space-4); overflow-wrap: anywhere; }
/* A link that starts a line of text (or is the first element in it) is never pushed right - the gap is only for "Cancel" after a button. */
p > .skpa_link:first-child { margin-left: 0; }
.skpa_notice { margin: 0 0 var(--sb-space-4); }
/* Password field with show/hide button */
.skpa_password { position: relative; }
.skpa_field .skpa_password input { padding-right: 3rem; }
.skpa_password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--sb-text-muted);
  background: transparent;
  border: 0;
  border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
  cursor: pointer;
}
.skpa_password__toggle:hover { color: var(--sb-navy); }
.skpa_password__toggle .skpa_icon--hide { display: none; }
.skpa_password__toggle.skpa_is-visible .skpa_icon--show { display: none; }
.skpa_password__toggle.skpa_is-visible .skpa_icon--hide { display: block; }
/* Required-field marker and screen-reader-only text */
.skpa_required { color: var(--sb-danger); font-weight: 700; }
.skpa_visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* "Skip to main content": the first thing a keyboard or screen-reader user reaches; shown only when focused. */
.skpa_skip-link { position: absolute; z-index: 1000; top: -100px; left: var(--sb-space-3); padding: 0.75rem 1rem; color: #fff; font-weight: 600; background: var(--sb-navy); border-radius: var(--sb-radius-sm); }
.skpa_skip-link:focus { top: var(--sb-space-2); }
/* "Sample" under the name of a test account's institute, profile or job (_sample_tag.php). */
.skpa_sample-tag { margin: var(--sb-space-2) 0 0; font-size: var(--sb-text-sm); }
#main:focus { outline: none; }
/* Institute header preview (cover with the round logo overlapping it) */
.skpa_page { max-width: 44rem; margin: 0 auto; }
/* A 2-column page's title/intro (see .skpa_dash below) - full width and left-aligned so it lines up
   with the grid underneath it, unlike .skpa_page's own narrower, self-centered reading width. */
.skpa_page-head { margin-bottom: var(--sb-space-6); }
.skpa_page-head h1 { margin: 0 0 var(--sb-space-2); }
/* No overflow: hidden on the card - it cut off the "⋯" menu that opens below the profile buttons
   (owner screenshot, 4 Oct 2026). The cover rounds its own top corners instead. */
.skpa_profile-head { padding: 0; }
.skpa_cover { aspect-ratio: 4 / 1; overflow: hidden; background: linear-gradient(135deg, var(--sb-navy), var(--sb-blue)); }
.skpa_profile-head > .skpa_cover { border-radius: calc(var(--sb-radius) - 1px) calc(var(--sb-radius) - 1px) 0 0; }
.skpa_cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_profile-head__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sb-space-4); padding: 0 var(--sb-space-6) var(--sb-space-6); }
.skpa_avatar { flex: none; width: 6rem; height: 6rem; margin-top: -3rem; overflow: hidden; border: 4px solid var(--sb-surface); border-radius: 50%; background: var(--sb-surface); box-shadow: var(--sb-shadow); }
.skpa_avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_avatar__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--sb-text-xl); font-weight: 700; color: #fff; background: var(--sb-teal-strong); }
.skpa_profile-head__text { flex: 1 1 14rem; padding-top: var(--sb-space-3); }
.skpa_profile-head__name { margin: 0; font-size: var(--sb-text-lg); color: var(--sb-navy); }
.skpa_profile-head__text p { margin: var(--sb-space-1) 0 0; }

/* Logo and cover upload rows */
.skpa_photo-row { padding: var(--sb-space-4) 0; border-top: 1px solid var(--sb-border); }
.skpa_photo-row:first-of-type { padding-top: var(--sb-space-2); border-top: 0; }
.skpa_photo-row__title { margin: 0 0 var(--sb-space-1); font-size: var(--sb-text-md); color: var(--sb-navy); }
.skpa_photo-row__size { margin: var(--sb-space-1) 0; color: var(--sb-navy); } /* the exact size that fits the profile (owner, 14 Oct 2026) */
.skpa_photo-row__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); margin: var(--sb-space-2) 0; }
.skpa_photo-row__form input[type="file"] { flex: 1 1 14rem; min-width: 0; font: inherit; }
.skpa_photo-row__remove { margin: var(--sb-space-2) 0 0; }
.skpa_photo-row.skpa_field--error .skpa_photo-row__title { color: var(--sb-danger); }
/* Dashboard: two columns like the institute profile, one column on narrow screens */
.skpa_dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sb-space-4); align-items: start; }
@media (min-width: 60rem) {
  .skpa_dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sb-space-6); }
}
.skpa_dash__main, .skpa_dash__aside { min-width: 0; }
.skpa_dash--spaced { margin-top: var(--sb-space-4); }
.skpa_dash .skpa_card__title { margin-bottom: var(--sb-space-2); }
.skpa_dash p { margin: 0 0 var(--sb-space-2); }

.skpa_icon-btn {
  position: absolute; top: var(--sb-space-3); right: var(--sb-space-3); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: var(--sb-navy);
  background: var(--sb-surface); border-radius: 50%; box-shadow: var(--sb-shadow);
}
.skpa_icon-btn:hover { color: #fff; background: var(--sb-navy); }
/* Leave room so a card title never runs under a top-right edit icon */
.skpa_card--has-icon > .skpa_card__title { padding-right: 3rem; }
/* About text on the dashboard */
.skpa_about-text { line-height: 1.6; color: var(--sb-text); white-space: pre-line; }
/* Local test-email viewer (/app/dev/mail) */
.skpa_mail-body { white-space: pre-wrap; word-break: break-word; font-family: inherit; }
/* flex-basis 100% forces this onto its own full-width row below the avatar/name, at every screen
   width - it previously sat as a narrow flex sibling that landed wherever the wrap happened to put
   it (squeezed to a ~12rem column on the left on a phone, since flex-wrap gives a wrapped item the
   remaining space, not the full container width), which read as misaligned, disconnected data. */
.skpa_facts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--sb-space-2) var(--sb-space-6); margin: var(--sb-space-3) 0 0; padding-top: var(--sb-space-3); border-top: 1px solid var(--sb-border); }
.skpa_facts div { margin: 0; }
.skpa_facts dt { font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_facts dd { margin: 0; font-weight: 600; color: var(--sb-navy); }

.skpa_badge { display: inline-block; padding: var(--sb-space-1) var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 600; border-radius: 999px; }
.skpa_badge--neutral { color: #34424a; background: #eef1f3; }
.skpa_badge--warn { color: #7a4b00; background: #fff4d6; }
.skpa_badge--ok { color: #0d5c34; background: #e2f5ea; }
.skpa_badge--bad { color: var(--sb-danger); background: var(--sb-danger-bg); }

.skpa_progress { display: block; width: 100%; height: 0.6rem; margin: var(--sb-space-2) 0 var(--sb-space-4); accent-color: var(--sb-teal-strong); }
.skpa_steps { margin: 0; padding: 0; list-style: none; }
.skpa_step { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-2) 0; color: var(--sb-text-muted); }
.skpa_step--done { color: var(--sb-teal-strong); }
.skpa_step--done span { color: var(--sb-text); }
.skpa_list { margin: 0; padding-left: 1.25rem; color: var(--sb-text-muted); }
.skpa_list--plain { padding-left: 0; list-style: none; }
.skpa_list li { margin-bottom: var(--sb-space-1); }
/* A stored document with its download button */
.skpa_doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-3); margin: var(--sb-space-3) 0; background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_doc__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; font-size: var(--sb-text-sm); font-weight: 700; color: var(--sb-navy); background: #dfe6ea; border-radius: var(--sb-radius-sm); }
.skpa_doc__text { flex: 1 1 12rem; display: flex; flex-direction: column; min-width: 0; }
.skpa_facts--wide { flex: none; }
/* "What can I upload?" help list */
.skpa_details { margin-top: var(--sb-space-4); }
.skpa_details summary { cursor: pointer; font-weight: 600; color: var(--sb-blue); }
/* Jumping to a section's #anchor (e.g. an admin table row's "Suspend"/"Close" link) reveals a
   collapsed <details> inside it even without JS - no library, just the :target pseudo-class. */
:target details:not([open]) > *:not(summary) { display: block; }
.skpa_defs { margin: var(--sb-space-3) 0 0; }
.skpa_defs dt { margin-top: var(--sb-space-3); font-weight: 600; color: var(--sb-navy); }
.skpa_defs dd { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); }

/* Facilities: the editable grid on the "Institute facilities" page */
.skpa_facility-grid { display: grid; grid-template-columns: 1fr; gap: var(--sb-space-4); margin: var(--sb-space-4) 0 0; }
@media (min-width: 40rem) { .skpa_facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .skpa_facility-grid { grid-template-columns: repeat(3, 1fr); } }
.skpa_facility-card { display: flex; flex-direction: column; overflow: hidden; background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_facility-card__img { display: block; width: 100%; height: 11rem; object-fit: cover; background: linear-gradient(135deg, var(--sb-navy), var(--sb-blue)); }
.skpa_facility-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sb-space-2); padding: var(--sb-space-4); }
.skpa_facility-card__title { margin: 0; font-size: var(--sb-text-md); color: var(--sb-navy); }
.skpa_facility-card__desc { margin: 0; color: var(--sb-text); font-size: var(--sb-text-sm); white-space: pre-line; }
.skpa_facility-card__actions { display: flex; gap: var(--sb-space-2); margin-top: auto; padding-top: var(--sb-space-2); }
.skpa_facility-card__actions form { margin: 0; }
.skpa_facility-card--editing { grid-column: 1 / -1; padding: var(--sb-space-4); background: var(--sb-surface); border-style: dashed; }
/* A demo video reuses .skpa_facility-card__img for its box (same size, same card), but a black
   letterbox background reads better behind a video frame than the picture-card gradient. */
video.skpa_facility-card__img { background: #000; }

/* "People you may know" grid on the connections page (LinkedIn-style, owner 27 Sept 2026) - its own
   small component rather than reusing .skpa_facility-card: a person needs a centered circular
   avatar and centered text/button, not a rectangular banner picture with left-aligned copy. */
.skpa_people-grid { display: grid; grid-template-columns: 1fr; gap: var(--sb-space-4); margin: var(--sb-space-4) 0 0; }
@media (min-width: 28rem) { .skpa_people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .skpa_people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .skpa_people-grid { grid-template-columns: repeat(4, 1fr); } }
.skpa_people-card { display: flex; flex-direction: column; align-items: center; gap: var(--sb-space-1); padding: var(--sb-space-3); text-align: center; background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_people-card__avatar { flex: none; width: 4rem; height: 4rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_people-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_people-card__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--sb-text-lg); font-weight: 700; color: #fff; }
.skpa_people-card__name { margin: 0; font-weight: 600; }
.skpa_people-card__name a { color: inherit; }
.skpa_people-card__desc { margin: 0; min-height: 2.6em; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_people-card__actions { width: 100%; margin-top: auto; padding-top: var(--sb-space-2); }
.skpa_people-card__actions form { margin: 0; }
.skpa_people-card .skpa_btn { width: 100%; padding-left: var(--sb-space-2); padding-right: var(--sb-space-2); white-space: nowrap; }

/* One certificate slide (see _certification_slide.php): title and meta above a large, uncropped
   picture (object-fit: contain, not cover - a certificate's border and small print must stay
   whole, unlike a facility photo where cropping to fill the box is fine). */
.skpa_cert-slide { padding: var(--sb-space-2) var(--sb-space-1) var(--sb-space-4); text-align: center; }
.skpa_cert-slide__title { margin: 0; font-size: var(--sb-text-md); font-weight: 600; color: var(--sb-navy); }
.skpa_cert-slide__meta { margin: var(--sb-space-1) 0 var(--sb-space-3); color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_cert-slide__img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 22rem; object-fit: contain; /* a fixed box: same height for every slide, kept before the picture arrives */ background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_cert-slide__img--empty { display: flex; align-items: center; justify-content: center; height: 14rem; color: var(--sb-text-muted); }
.skpa_cert-slide__desc { margin: var(--sb-space-3) 0 0; color: var(--sb-text); font-size: var(--sb-text-sm); text-align: left; white-space: pre-line; }
.skpa_cert-slide__link { display: inline-block; margin-top: var(--sb-space-3); font-size: var(--sb-text-sm); }

.skpa_org-group { display: flex; gap: var(--sb-space-4); padding: var(--sb-space-4) 0; border-top: 1px solid var(--sb-border); }
.skpa_org-group:first-child { padding-top: 0; border-top: none; }
/* The first row under a card title: no divider pressed against the title (the card's ✎ button comes
   first in the markup, so :first-child alone missed it), just a little air; and no extra gap after the
   last row - the card's own padding is enough (owner screenshot, Languages known, 4 Oct 2026). */
.skpa_card__title + .skpa_org-group, .skpa_card__head + .skpa_org-group { padding-top: var(--sb-space-3); border-top: none; }
.skpa_org-group:last-child { padding-bottom: 0; }
.skpa_org-group__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--sb-navy); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); overflow: hidden; }
.skpa_org-group__icon svg { width: 1.5rem; height: 1.5rem; }
.skpa_org-group__icon img { width: 100%; height: 100%; object-fit: cover; }
.skpa_org-group__body { flex: 1; min-width: 0; }
.skpa_org-group__name { margin: 0; font-size: var(--sb-text-md); color: var(--sb-navy); }
.skpa_org-group__meta { margin: 0 0 var(--sb-space-3); color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_org-group__desc { margin: var(--sb-space-1) 0 0; color: var(--sb-text); font-size: var(--sb-text-sm); white-space: pre-line; }
.skpa_org-group__actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.skpa_org-group__actions form { margin: 0; }
.skpa_org-group--editing { display: block; }
.skpa_role-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.skpa_role-timeline__item { position: relative; padding: 0 0 var(--sb-space-4) 1.25rem; border-left: 2px solid var(--sb-border); }
.skpa_role-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.skpa_role-timeline__item::before { content: ''; position: absolute; top: 0.3rem; left: -0.3125rem; width: 0.625rem; height: 0.625rem; background: var(--sb-navy); border-radius: 50%; }
.skpa_role-timeline__item--editing { padding-left: 0; border-left-color: transparent; }
.skpa_role-timeline__item--editing::before { display: none; }
.skpa_role-timeline__title { margin: 0; font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-navy); }
.skpa_role-timeline__meta { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_role-timeline__desc { margin: var(--sb-space-1) 0 0; color: var(--sb-text); font-size: var(--sb-text-sm); white-space: pre-line; }
.skpa_role-timeline__actions { display: flex; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.skpa_role-timeline__actions form { margin: 0; }
.skpa_facility-gallery { margin-top: var(--sb-space-4); padding-top: var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_facility-thumb { display: block; width: 10rem; height: 7.5rem; object-fit: cover; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
/* Wraps a picture that opens full size in a new tab (block, not the default inline <a>, so it never adds stray gaps around the image) */
.skpa_img-link { display: block; margin-bottom: var(--sb-space-2); }
.skpa_img-link:last-child { margin-bottom: 0; }
/* A live "you just chose this" preview strip, filled in by app.js next to a file input with one
   thumbnail per file selected (one file, or several when the input allows "multiple"), each with
   a remove button - reuses .skpa_gallery-grid__item/__remove so it looks identical to the "already
   saved" gallery grid below it. The container itself has no conflicting `display` rule, so its
   `hidden` attribute just works. */
.skpa_preview-list { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin: var(--sb-space-2) 0; }
.skpa_preview-list > .skpa_gallery-grid__item { flex: 0 0 7rem; }
/* Public facility detail page (/in/{slug}/facilities/{facility}) */
.skpa_facility-detail__img { display: block; width: 100%; max-height: 24rem; object-fit: cover; border-radius: var(--sb-radius-sm); margin-bottom: var(--sb-space-4); }
.skpa_facility-detail__desc { line-height: 1.6; color: var(--sb-text); white-space: pre-line; }
/* Gallery viewer: one large picture, a thumbnail strip underneath to pick which one shows.
   The strip reuses .skpa_slider (slider.css/slider.js, scroll-snap + arrows); only its item
   width is overridden here, from the card-sized default down to a small thumbnail. */
.skpa_gallery-viewer__main { position: relative; margin-bottom: var(--sb-space-3); }
.skpa_gallery-viewer__link { display: block; }
.skpa_gallery-viewer__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sb-radius-sm); background: linear-gradient(135deg, var(--sb-navy), var(--sb-blue)); }
.skpa_gallery-viewer__main .skpa_slider__prev { left: 0.6rem; }
.skpa_gallery-viewer__main .skpa_slider__next { right: 0.6rem; }
.skpa_gallery-thumbs .skpa_slider__viewport { padding-bottom: 0; }
.skpa_gallery-thumbs .skpa_slider__item { flex: 0 0 5rem; scroll-snap-align: start; }
.skpa_gallery-thumb { display: block; overflow: hidden; border: 2px solid transparent; border-radius: var(--sb-radius-sm); }
.skpa_gallery-thumb img { display: block; width: 100%; height: 3.75rem; object-fit: cover; }
.skpa_gallery-thumb--active { border-color: var(--sb-teal-strong); }
.skpa_gallery-thumb:hover { border-color: var(--sb-border); }
.skpa_gallery-thumb--active:hover { border-color: var(--sb-teal-strong); }
/* Lightbox: opened by clicking the large gallery picture. A native <dialog>, shown with
   showModal() (slider.js) - that gives us the backdrop, Escape-to-close and focus trapping for
   free, no library needed. Without JS the <dialog> is never opened; the picture link still works
   as a plain "open full size in a new tab" instead (see public_facility.php). */
.skpa_lightbox { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: 92vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--sb-radius-sm); background: transparent; overflow: hidden; }
.skpa_lightbox::backdrop { background: rgba(2, 20, 30, 0.85); }
.skpa_lightbox__img { display: block; max-width: 92vw; max-height: 92vh; border-radius: var(--sb-radius-sm); }
.skpa_lightbox__close { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; padding: 0; line-height: 1; font-size: 1.5rem; color: #fff; background: rgba(2, 20, 30, 0.6); border: 0; border-radius: 50%; cursor: pointer; }
.skpa_lightbox__close:hover { background: rgba(2, 20, 30, 0.85); }
.skpa_lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; padding: 0; line-height: 1; font-size: 1.4rem; color: #fff; background: rgba(255, 255, 255, 0.15); border: 0; border-radius: 50%; cursor: pointer; }
.skpa_lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.skpa_lightbox__prev { left: 1rem; }
.skpa_lightbox__next { right: 1rem; }
/* A facility's gallery, managed on the edit card */
.skpa_gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--sb-space-3); margin: var(--sb-space-3) 0; }
.skpa_gallery-grid__item { position: relative; }
.skpa_gallery-grid__item img { display: block; width: 100%; height: 5.5rem; object-fit: cover; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_gallery-grid__remove { position: absolute; top: 0.25rem; right: 0.25rem; width: 2rem; height: 2rem; padding: 0; line-height: 2rem; text-align: center; color: #fff; background: rgba(2, 61, 91, 0.75); border: 0; border-radius: 50%; cursor: pointer; }
.skpa_gallery-grid__remove:hover { background: var(--sb-danger); }
/* A single non-grid item (the event/facility banner shown with the same x-to-remove style as a gallery picture). */
.skpa_gallery-grid__item--single { display: inline-block; width: 10rem; }
.skpa_gallery-grid__item--single img { width: 10rem; height: 7.5rem; }
/* Removal here is deferred, not immediate: the checkbox just marks a picture, applied on "Save changes". */
.skpa_remove-toggle:checked ~ .skpa_gallery-grid__remove { background: var(--sb-danger); }
.skpa_gallery-grid__item:has(.skpa_remove-toggle:checked) img { opacity: 0.35; filter: grayscale(1); }

/* Platform admin panel shell: a sidebar of sections next to the page content, used on every
   /app/admin/* page. Its own (wider) max-width, since a dense table needs more room than
   .skpa_container's 64rem reading width. */
.skpa_admin { display: flex; flex-direction: column; gap: var(--sb-space-6); max-width: 72rem; margin: 0 auto; }
@media (min-width: 60rem) {
  .skpa_admin { flex-direction: row; align-items: flex-start; }
}
.skpa_admin-nav { flex: none; width: 100%; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); padding: var(--sb-space-4); }
@media (min-width: 60rem) {
  .skpa_admin-nav { width: 13rem; position: sticky; top: var(--sb-space-4); }
}
.skpa_admin-nav__title { margin: 0 0 var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sb-text-muted); }
.skpa_admin-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sb-space-1); }
@media (min-width: 60rem) {
  .skpa_admin-nav__list { flex-direction: column; }
}
.skpa_admin-nav__link { display: flex; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-2) var(--sb-space-3); border-radius: var(--sb-radius-sm); color: var(--sb-text); font-weight: 600; text-decoration: none; }
.skpa_admin-nav__link:hover { background: var(--sb-bg); }
.skpa_admin-nav__link--active { color: #fff; background: var(--sb-teal-strong); }
.skpa_admin-nav__link--active:hover { background: var(--sb-teal-strong); }
.skpa_admin-main { flex: 1; min-width: 0; width: 100%; }

/* The signed-in person's own account-menu shell: a left-sidebar-nav beside the page content -
   same left-sidebar-nav shape as the platform admin panel (.skpa_admin above), cloned under its
   own class names since this wraps ordinary account pages, not /app/admin/*. Used on every page
   the Me dropdown's Account/Manage links lead to EXCEPT /app/institutes/{id}/jobs, which uses
   .skpa_account-grid below instead (owner, 2 Oct 2026: "the layout must change in job posting
   only, other pages needs to stay as before" - the full-height sidebar fit every simple page fine;
   only the job postings page has its own secondary 2-column content (the job list + "Post a job"
   form) that needs the different treatment). Mobile-first: stacked below 60rem. */
.skpa_account { display: flex; flex-direction: column; gap: var(--sb-space-6); max-width: 64rem; margin: 0 auto; }
@media (min-width: 60rem) {
  .skpa_account { flex-direction: row; align-items: flex-start; }
}
.skpa_account > .skpa_account-nav { flex: none; width: 100%; }
@media (min-width: 60rem) {
  .skpa_account > .skpa_account-nav { width: 14rem; position: sticky; top: var(--sb-space-4); }
}
.skpa_account-main { flex: 1; min-width: 0; width: 100%; }

/* The job postings page only: a left-sidebar-nav beside the page header in row one, then the
   page's own content (job list + "Post a job" form, already a real 2-column .skpa_dash) spanning
   the full width in row two - owner's own fix, from a screenshot of this exact page after the
   plain full-height sidebar above squeezed that 2-column content into a cramped third column:
   "two row, row one left side menus and right side the back to dashboard link title and
   description and the second row left side job list and right side the form." */
.skpa_account-grid { display: grid; gap: var(--sb-space-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "head" "content"; max-width: 64rem; margin: 0 auto; }
@media (min-width: 60rem) {
  .skpa_account-grid { grid-template-columns: 14rem minmax(0, 1fr); grid-template-areas: "nav head" "content content"; align-items: start; }
}
.skpa_account-grid > .skpa_account-nav { grid-area: nav; }
.skpa_account-head { grid-area: head; min-width: 0; }
.skpa_account-content { grid-area: content; min-width: 0; }

/* Shared by both shells above - the nav card's own look and its link list, identical regardless
   of which wrapper (.skpa_account or .skpa_account-grid) supplies its outer sizing/position. */
.skpa_account-nav { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); padding: var(--sb-space-4); }
.skpa_account-nav__title { margin: var(--sb-space-3) 0 var(--sb-space-2); font-size: var(--sb-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sb-text-muted); }
.skpa_account-nav__title:first-child { margin-top: 0; }
.skpa_account-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sb-space-1); }
@media (min-width: 60rem) {
  .skpa_account-nav__list { flex-direction: column; }
}
.skpa_account-nav__link { display: block; padding: var(--sb-space-2) var(--sb-space-3); border-radius: var(--sb-radius-sm); color: var(--sb-text); font-weight: 600; text-decoration: none; }
.skpa_account-nav__link:hover { background: var(--sb-bg); }
.skpa_account-nav__link--active { color: #fff; background: var(--sb-teal-strong); }
.skpa_account-nav__link--active:hover { background: var(--sb-teal-strong); }

/* Job postings page only: smaller nav text/spacing than the shared default above, since this page's
   sidebar sits beside its own busy page header instead of running full-height (owner, 2 Oct 2026:
   "for job posting page alone we can reduce left side bar menus font size and spacing in other
   pages we can keep as it is" - scoped to .skpa_account-grid so the other 7 account pages are
   untouched). */
.skpa_account-grid .skpa_account-nav { padding: var(--sb-space-3); }
.skpa_account-grid .skpa_account-nav__title { margin: var(--sb-space-2) 0 var(--sb-space-1); font-size: 0.6875rem; }
.skpa_account-grid .skpa_account-nav__list { gap: 0; }
.skpa_account-grid .skpa_account-nav__link { padding: var(--sb-space-1) var(--sb-space-2); font-size: var(--sb-text-sm); }

/* Dense admin table (users, institutes) - a horizontal-scroll wrapper so many columns never break
   the layout on a phone, unlike the card/row-group idiom used everywhere else in the portal. */
.skpa_table-wrap { overflow-x: auto; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); }
.skpa_table { width: 100%; border-collapse: collapse; font-size: var(--sb-text-sm); }
.skpa_table th, .skpa_table td { padding: var(--sb-space-3) var(--sb-space-4); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--sb-border); vertical-align: middle; }
.skpa_table th { color: var(--sb-text-muted); font-weight: 600; background: var(--sb-bg); }
.skpa_table tbody tr:last-child td { border-bottom: 0; }
.skpa_table tbody tr:hover { background: rgba(9, 189, 177, 0.05); }
/* Wraps between words; min-width keeps a short column from breaking names letter by letter. */
.skpa_table td.skpa_table__wrap { min-width: 10rem; white-space: normal; overflow-wrap: break-word; }
/* Put on a <div> inside the <td>: a flex <td> stops being a table cell and its row lines drift. */
.skpa_table__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sb-space-2); }
.skpa_table__actions form { margin: 0; }
.skpa_table td.skpa_table__wrap--narrow { min-width: 8rem; }
.skpa_table__email { overflow-wrap: anywhere; } /* one long "word", allowed to break anywhere */
.skpa_table__sub { display: block; margin-top: var(--sb-space-1); font-size: var(--sb-text-sm); }
.skpa_table__icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--sb-navy); background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); overflow: hidden; font-size: var(--sb-text-sm); font-weight: 700; }
.skpa_table__icon img { width: 100%; height: 100%; object-fit: cover; }
.skpa_table__name-cell { display: flex; align-items: center; gap: var(--sb-space-3); }

/* Admin dashboard: cards arranged in a responsive grid instead of stacked full-width, plus a
   compact number+label grid for a card's own breakdown - mirrors .skpa_stat-row's big-number
   look (see _profile_viewers.php), just smaller, since several of these need to fit in one card. */
.skpa_admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sb-space-4); align-items: start; }
.skpa_count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sb-space-3); margin: var(--sb-space-3) 0; }
.skpa_count-item { text-align: center; padding: var(--sb-space-2); background: var(--sb-bg); border-radius: var(--sb-radius-sm); }
.skpa_count-item__value { margin: 0; font-size: var(--sb-text-lg); font-weight: 700; color: var(--sb-navy); }
.skpa_count-item__label { margin: 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

/* Feed: a post's own picture, shown at its own aspect ratio (the 'post' ImageProcessor profile
   never crops), capped so a tall picture never dominates the card. */
/* width/height come from the picture itself (ImageSizes), so its space is kept before it arrives;
   height: auto keeps the shape when it is narrowed, contain when it is capped at 32rem. */
.skpa_post-image { display: block; max-width: 100%; height: auto; max-height: 32rem; object-fit: contain; margin-top: var(--sb-space-3); border-radius: var(--sb-radius-sm); }

/* Feed compose box: a small formatting toolbar, an emoji popup and an @-mention dropdown - see
   post-editor.js. The toolbar buttons start hidden in the markup and are revealed by the script,
   same progressive-enhancement pattern slider.js's arrow buttons already use; the plain textarea
   underneath works with zero JS (the markdown-lite syntax can always just be typed by hand). */
.skpa_editor-toolbar { display: flex; gap: var(--sb-space-2); margin-bottom: var(--sb-space-2); }
.skpa_editor-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; font-size: var(--sb-text-sm); line-height: 1;
  color: var(--sb-navy); background: transparent; border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm); cursor: pointer;
}
.skpa_editor-btn:hover { color: #fff; background: var(--sb-navy); }
/* Hidden until post-editor.js runs, but its space is kept, so the box below never jumps when they appear. */
/* (!important and the extra class: it must beat ".skpa_field [hidden]" further down.) */
.skpa_editor-btn[hidden], .skpa_field .skpa_editor-btn[hidden] { display: inline-flex !important; visibility: hidden; }

.skpa_emoji-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sb-space-1);
  max-width: 20rem; margin-top: var(--sb-space-2); padding: var(--sb-space-2);
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm);
  box-shadow: var(--sb-shadow);
}
.skpa_emoji-picker[hidden] { display: none; }
.skpa_emoji-picker button {
  padding: var(--sb-space-1); font-size: 1.1rem; line-height: 1; text-align: center;
  background: transparent; border: 0; border-radius: var(--sb-radius-sm); cursor: pointer;
}
.skpa_emoji-picker button:hover { background: var(--sb-bg); }

.skpa_mention-list {
  display: block; margin: var(--sb-space-2) 0 0; padding: var(--sb-space-1) 0; list-style: none;
  max-width: 20rem; max-height: 12rem; overflow-y: auto;
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm);
  box-shadow: var(--sb-shadow);
}
.skpa_mention-list[hidden] { display: none; }
.skpa_mention-item {
  display: flex; align-items: center; gap: var(--sb-space-2); width: 100%; padding: var(--sb-space-2) var(--sb-space-3);
  font: inherit; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer;
}
.skpa_mention-item:hover, .skpa_mention-item.skpa_mention-item--active { background: var(--sb-bg); }

/* A rendered @-mention inside a post's body (see TextFormatter) - visually distinct from a plain
   [link](url), matching LinkedIn's own bold-tag treatment. */
.skpa_mention { font-weight: 600; color: var(--sb-blue); text-decoration: none; }

/* Feed: back to the site's standard .skpa_dash 2-column layout (owner, 2 Oct 2026 - moved the
   "you" card out of its own left rail and into the right sidebar, alongside the suggestion
   widgets, dropping the dedicated 3-column layout this page used to have). The compact "you"
   card below is a horizontal avatar+text row (the same shape as .skpa_viewer-row) rather than a
   centered vertical stack, so its first readable line sits at the same height as the other
   sidebar cards' own headings instead of lower down (found from a real screenshot, 29 Sept 2026 -
   still applies now that the card lives in the sidebar rather than its own rail). */
.skpa_mini-profile { display: flex; align-items: flex-start; gap: var(--sb-space-3); }
.skpa_mini-profile__avatar { flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_mini-profile__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_mini-profile__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: #fff; }
.skpa_mini-profile__body { min-width: 0; }
.skpa_mini-profile__name { margin: 0; font-weight: 700; color: var(--sb-navy); }
.skpa_mini-profile__name a { color: inherit; text-decoration: none; }
.skpa_mini-profile__name a:hover { text-decoration: underline; }
.skpa_mini-profile__headline, .skpa_mini-profile__place { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

/* Right rail widgets: each suggestion/staff/follow row reuses .skpa_viewer-row (already built for
   post authors/comments) for the avatar+name layout, plus one small action button underneath. */
.skpa_rail-row__action { margin-top: var(--sb-space-1); }
.skpa_rail-card__seeall { display: block; margin-top: var(--sb-space-2); font-size: var(--sb-text-sm); text-align: center; }
/* The next suggestion fading in after a Connect/Follow (feed-actions.js); none when motion is reduced. */
/* "Tell me about new jobs" under an institute's Follow button. */
.skpa_follow-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin: var(--sb-space-2) 0 0; font-size: var(--sb-text-sm); }
.skpa_rail-empty { margin: var(--sb-space-2) 0 0; font-size: var(--sb-text-sm); }
.skpa_viewer-row--entering { animation: skpa_rail-in 0.35s ease-out; }
@keyframes skpa_rail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skpa_viewer-row--entering { animation: none; } }
.skpa_mention:hover { text-decoration: underline; }

/* LinkedIn-style verified badge: a small filled checkmark shown inline next to a verified
   institute's name (see _verified_badge.php), not a separate text pill below it. */
.skpa_verified-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; margin-left: 0.2em; color: #fff; background: var(--sb-teal-strong); border-radius: 50%; vertical-align: middle; }
.skpa_verified-badge svg { width: 65%; height: 65%; }
/* "Verified" / "Not verified" tag under a profile's name (_verification_tag.php). The owner's own
   "Not verified" tag is a link to their verification page. */
.skpa_verify-tag { margin: var(--sb-space-1) 0; }
.skpa_verify-tag__link { text-decoration: none; }
.skpa_verify-tag__link:hover, .skpa_verify-tag__link:focus-visible { text-decoration: underline; }

/* "Posts & activity" page's tab row (owner, 2 Oct 2026, from a LinkedIn screenshot) - plain
   navigable links styled as rounded pills, not a JS tab widget, so each tab is its own real,
   bookmarkable, back-button-safe page (?tab=posts etc.) and still works with JS fully off. */
/* Sign-up step 1, "I am joining as" (_role_picker.php): large tappable cards, nothing pre-selected, one clear
   message when it is missed (owner, 20 Oct 2026: the small dropdown was not noticed). */
.skpa_role-picker { margin: 0 0 var(--sb-space-6); padding: 0; border: 0; min-width: 0; }
.skpa_role-picker__legend { margin-bottom: var(--sb-space-3); padding: 0; font-size: var(--sb-text-lg); font-weight: 700; color: var(--sb-navy); }
.skpa_role-picker__options { display: grid; gap: var(--sb-space-3); }
.skpa_role-card { display: flex; align-items: center; gap: var(--sb-space-3); min-height: 64px; padding: var(--sb-space-3) var(--sb-space-4); background: var(--sb-surface); border: 2px solid var(--sb-border); border-radius: var(--sb-radius); cursor: pointer; }
.skpa_role-card:hover { border-color: var(--sb-teal); }
.skpa_role-card input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--sb-teal-strong); }
.skpa_role-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--sb-teal-strong); background: var(--sb-bg); border-radius: 50%; }
.skpa_role-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skpa_role-card__name { font-weight: 700; color: var(--sb-navy); }
.skpa_role-card__hint { font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_role-card:has(input:checked) { border-color: var(--sb-teal-strong); background: rgba(9, 189, 177, 0.08); box-shadow: 0 0 0 1px var(--sb-teal-strong); }
.skpa_role-card:has(input:focus-visible) { outline: 3px solid var(--sb-teal); outline-offset: 2px; }
.skpa_role-picker__error { margin: 0 0 var(--sb-space-3); padding: var(--sb-space-3) var(--sb-space-4); font-weight: 600; color: #8a1c1c; background: #fdecec; border-left: 4px solid #c62828; border-radius: var(--sb-radius-sm); }
.skpa_role-picker--error .skpa_role-card { border-color: #e3a1a1; }

/* Folding filters (jobs board, Search): the main search box stays in view, the other filters sit in a <details>
   panel - folded on a phone so results come first, opened on wider screens by app.js (owner, 20 Oct 2026:
   "too much scroll to see the result"). The count shows how many filters are in use while it is folded. */
.skpa_search-bar { display: flex; align-items: flex-end; gap: var(--sb-space-2); }
.skpa_search-bar .skpa_field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.skpa_search-bar .skpa_btn { flex: none; min-height: 44px; }
.skpa_filters { margin-top: var(--sb-space-3); }
.skpa_filters__toggle { display: inline-flex; align-items: center; gap: var(--sb-space-2); min-height: 44px; padding: var(--sb-space-2) var(--sb-space-4); font-weight: 600; color: var(--sb-navy); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 999px; cursor: pointer; list-style: none; }
.skpa_filters__toggle::-webkit-details-marker { display: none; }
.skpa_filters__toggle::after { content: ""; width: .5rem; height: .5rem; margin-left: var(--sb-space-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.skpa_filters[open] > .skpa_filters__toggle::after { transform: translateY(2px) rotate(-135deg); }
.skpa_filters__toggle:hover { background: var(--sb-bg); }
.skpa_filters__toggle:focus-visible { outline: 3px solid var(--sb-teal); outline-offset: 2px; }
.skpa_filters__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; font-size: var(--sb-text-sm); color: #fff; background: var(--sb-teal-strong); border-radius: 999px; }
.skpa_filters__body { padding-top: var(--sb-space-4); }

/* Underline tabs: one choice between views of the same page (Search: Institutes | Teachers & staff). Equal halves side by
   side even on a phone, the active one underlined in teal - owner, 20 Oct 2026: stacked buttons were not read as tabs. */
.skpa_viewtabs { display: flex; border-bottom: 2px solid var(--sb-border); margin-bottom: var(--sb-space-4); }
.skpa_viewtabs__item { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--sb-space-2) var(--sb-space-3); margin-bottom: -2px; font-weight: 600; color: var(--sb-text-muted); text-align: center; text-decoration: none; border-bottom: 3px solid transparent; }
.skpa_viewtabs__item:hover { color: var(--sb-navy); background: var(--sb-bg); }
.skpa_viewtabs__item--active, .skpa_viewtabs__item--active:hover { color: var(--sb-teal-strong); border-bottom-color: var(--sb-teal-strong); background: transparent; }
.skpa_viewtabs__item:focus-visible { outline: 3px solid var(--sb-teal); outline-offset: -3px; }
.skpa_pill-tabs { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin-bottom: var(--sb-space-4); }
.skpa_pill-tabs__item { padding: var(--sb-space-2) var(--sb-space-4); font-weight: 600; color: var(--sb-navy); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 999px; text-decoration: none; }
.skpa_pill-tabs__item:hover { background: var(--sb-bg); }
.skpa_pill-tabs__item--active { color: #fff; background: var(--sb-teal-strong); border-color: var(--sb-teal-strong); }
.skpa_pill-tabs__item--active:hover { background: var(--sb-teal-strong); }

/* Hiring pipeline (job_applicants.php): stage tabs with counts, the stage line, the interview box,
   the fold-out panels (interview form, change stage, private notes). */
.skpa_pipeline-tabs .skpa_pill-tabs__item { padding: var(--sb-space-1) var(--sb-space-3); font-size: var(--sb-text-sm); }
.skpa_pipeline-tabs__count { display: inline-block; min-width: 1.25rem; margin-left: 0.15rem; padding: 0 0.3rem; font-size: 0.75rem; text-align: center; background: rgba(2, 61, 91, .08); border-radius: 999px; }
.skpa_pill-tabs__item--active .skpa_pipeline-tabs__count { background: rgba(255, 255, 255, .25); }
/* Applicants page: the job's open/closed status with Close/Reopen, and the "all positions filled" prompt. */
.skpa_job-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-2); margin-bottom: var(--sb-space-3); }
.skpa_job-status p { margin: 0; }
.skpa_job-filled { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-2); }
.skpa_job-filled p { margin: 0; }
/* Why a candidate was suggested for a job: "Teaches Tamil", "Subject Teacher", "In Chennai". */
/* Teacher search: the "Only people open to work" checkbox sits level with the selects beside it. */
.skpa_search-otw { align-self: end; }
@media (min-width: 40rem) { .skpa_search-form .skpa_field__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .skpa_jobs-filter .skpa_field__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Save / Saved toggles (jobs and teachers). */
.skpa_save-form { display: inline-block; margin: 0; }
.skpa_save-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.skpa_save-btn--on { color: var(--sb-teal-strong); border-color: var(--sb-teal-strong); }
/* Profile strength meter (dashboard). */
.skpa_strength__value { margin: 0 0 var(--sb-space-1); font-size: 1.125rem; }
.skpa_strength__next { margin: var(--sb-space-2) 0 0; }
.skpa_strength__all { margin-top: var(--sb-space-2); }
.skpa_strength__all > summary { cursor: pointer; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_strength__all .skpa_steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sb-space-2) var(--sb-space-4); margin: var(--sb-space-2) 0 0; padding: 0; list-style: none; }
.skpa_strength__all .skpa_step { display: flex; align-items: center; gap: var(--sb-space-2); margin: 0; }
.skpa_strength__all .skpa_step svg { flex: none; }
/* Subjects with endorsements, and recommendations, on a teacher's profile. */
.skpa_endorse-list { margin: var(--sb-space-2) 0 0; padding: 0; list-style: none; }
.skpa_endorse { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sb-space-3); padding: var(--sb-space-2) 0; border-top: 1px solid var(--sb-border); }
.skpa_endorse:first-child { border-top: 0; }
.skpa_endorse p { margin: var(--sb-space-1) 0 0; }
.skpa_endorse form { margin: 0; flex: none; }
.skpa_endorse .skpa_link, .skpa_recommendation .skpa_link { margin-left: 0; }
.skpa_recommendation { padding-top: var(--sb-space-3); }
/* Insights (institutes): a row of numbers, a server-drawn SVG column chart (_bar_chart.php), tables. */
.skpa_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--sb-space-3); max-width: 44rem; margin: 0 auto; }
.skpa_stat { padding: var(--sb-space-4); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); }
.skpa_stat__label { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_stat__value { margin: var(--sb-space-1) 0 0; font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--sb-navy); }
.skpa_stat__note { margin: var(--sb-space-1) 0 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_chart { --sb-chart-1: #00897b; margin: var(--sb-space-3) 0 0; }
.skpa_chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.skpa_chart__grid { stroke: var(--sb-border); stroke-width: 1; }
.skpa_chart__tick { font-size: 13px; fill: var(--sb-text-muted); }
.skpa_chart__value { font-size: 13px; font-weight: 600; fill: var(--sb-text); }
.skpa_chart__bar { fill: var(--sb-chart-1); }
.skpa_chart__hit { fill: transparent; }
.skpa_chart__col:hover .skpa_chart__hit { fill: rgba(2, 61, 91, .05); }
.skpa_chart__col:hover .skpa_chart__bar { fill: #00695f; }
.skpa_chart__table { margin-top: var(--sb-space-2); }
.skpa_chart__table > summary { cursor: pointer; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_scroll-x { overflow-x: auto; margin-top: var(--sb-space-2); }
.skpa_table .skpa_num { text-align: right; font-variant-numeric: tabular-nums; }
.skpa_insights-table td:first-child { white-space: normal; min-width: 12rem; }
.skpa_insights-table .skpa_link { margin-left: 0; }
.skpa_match-reasons { display: flex; flex-wrap: wrap; gap: var(--sb-space-1); margin: var(--sb-space-1) 0; }
/* Job preferences as an institute sees them (_job_preferences.php) */
.skpa_job-prefs { margin: var(--sb-space-2) 0; }
.skpa_job-prefs p { margin: var(--sb-space-1) 0; }
.skpa_job-prefs__label { font-weight: 600; color: var(--sb-text, inherit); }
/* Screening questions: answers on the applicant list, the apply form, the job form */
.skpa_screening { margin: var(--sb-space-2) 0; }
.skpa_screening p { margin: var(--sb-space-1) 0; }
.skpa_screening__list { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--sb-space-1) 0; font-size: var(--sb-text-sm); }
.skpa_screening__list dt { font-weight: 600; margin-top: var(--sb-space-1); }
.skpa_screening__list dd { margin: 0; }
.skpa_screening__miss { color: #7a4b00; font-weight: 600; }
.skpa_screening-apply__q { margin: 0 0 var(--sb-space-1); font-weight: 600; }
.skpa_screening-apply__q .skpa_badge { margin-left: var(--sb-space-2); font-weight: 600; }
.skpa_screening-apply__choices { display: flex; gap: var(--sb-space-4); }
.skpa_screening-apply__choices .skpa_choice { margin: 0; }
.skpa_screening-edit { margin: var(--sb-space-3) 0; }
.skpa_screening-edit__row { margin-top: var(--sb-space-2); }
.skpa_screening-filter { margin: var(--sb-space-2) 0 0; }
.skpa_screening-preview { margin: var(--sb-space-1) 0 var(--sb-space-3); padding-left: var(--sb-space-4); }
.skpa_screening-preview li { margin: var(--sb-space-1) 0; }
/* Drafts (_draft_list.php) and a form's row of buttons */
.skpa_form-actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); align-items: center; }
.skpa_drafts { margin-top: var(--sb-space-3); }
.skpa_drafts__list { list-style: none; margin: var(--sb-space-2) 0 0; padding: 0; }
.skpa_drafts__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-1) var(--sb-space-3); padding: var(--sb-space-2) 0; border-top: 1px solid var(--sb-border, #e3e8ec); }
.skpa_drafts__label { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.skpa_drafts__item--open .skpa_drafts__label { color: var(--sb-teal-strong, inherit); }
.skpa_drafts__actions { display: flex; align-items: center; gap: var(--sb-space-3); }
.skpa_drafts__actions form { margin: 0; }
/* Following (/app/following) */
.skpa_following-row { padding: var(--sb-space-3) 0; border-top: 1px solid var(--sb-border); }
.skpa_following-row:first-of-type { border-top: 0; }
.skpa_following-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2) var(--sb-space-4); margin-top: var(--sb-space-2); }
.skpa_following-row__actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin: 0; }
.skpa_applicant__stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-1); }
.skpa_applicant__stage .skpa_muted { margin: 0; font-size: var(--sb-text-sm); }
.skpa_interview { margin: var(--sb-space-2) 0; padding: var(--sb-space-2) var(--sb-space-3); background: #eef6f5; border-left: 3px solid var(--sb-teal-strong); border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0; }
.skpa_interview p { margin: 0; }
.skpa_interview a { overflow-wrap: anywhere; }
/* Interview rounds: a list of .skpa_interview boxes; a cancelled round is plain, its time struck through. */
.skpa_rounds { margin: 0; padding: 0; list-style: none; }
.skpa_interview--cancelled { background: transparent; border-left-color: var(--sb-border); }
.skpa_interview--cancelled strong { text-decoration: line-through; }
.skpa_rounds__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sb-space-3); }
.skpa_rounds__actions form { margin: 0; }
.skpa_rounds__actions > .skpa_applicant__panel { margin-top: 0; border-top: 0; }
.skpa_rounds__actions > .skpa_applicant__panel[open] { flex-basis: 100%; }
.skpa_rounds__actions .skpa_link-btn { padding-top: var(--sb-space-2); font-size: var(--sb-text-sm); }
.skpa_applicant__panel { margin-top: var(--sb-space-2); border-top: 1px dashed var(--sb-border); }
.skpa_applicant__panel > summary { padding: var(--sb-space-2) 0 0; font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-blue); cursor: pointer; }
.skpa_applicant__panel[open] > summary { margin-bottom: var(--sb-space-2); }
/* The candidate's Accept / Decline row: "Decline" sits beside the button, and its form takes the full row when opened. */
.skpa_offer-answer { align-items: flex-start; }
.skpa_offer-answer > .skpa_applicant__panel { margin-top: 0; border-top: 0; }
.skpa_offer-answer > .skpa_applicant__panel > summary { padding: 0.35rem 0; }
.skpa_offer-answer > .skpa_applicant__panel[open] { flex-basis: 100%; }
.skpa_applicant__panel textarea { box-sizing: border-box; width: 100%; font: inherit; padding: var(--sb-space-2) var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_stage-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
.skpa_stage-form select { font: inherit; padding: 0.3rem var(--sb-space-2); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_stage-form .skpa_field__hint { flex-basis: 100%; }
.skpa_notes { margin: 0 0 var(--sb-space-2); padding: 0; list-style: none; }
.skpa_notes__item { padding: var(--sb-space-2) 0; border-bottom: 1px solid var(--sb-border); }
.skpa_notes__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.skpa_notes__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); font-size: var(--sb-text-sm); }
.skpa_notes__delete { margin: 0; }
.skpa_link-btn { padding: 0; font: inherit; color: var(--sb-blue); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.skpa_link-btn:hover { color: var(--sb-navy); }
/* The applicant's progress line (_application_stage.php): done steps teal, the current one bold. Its own
   name - it first reused .skpa_steps and squashed the dashboard and verification checklists. */
.skpa_stageline { display: flex; flex-wrap: wrap; gap: var(--sb-space-1) 0; margin: var(--sb-space-2) 0; padding: 0; list-style: none; font-size: var(--sb-text-sm); }
.skpa_stageline__item { display: flex; align-items: center; color: var(--sb-text-muted); }
.skpa_stageline__item + .skpa_stageline__item::before { content: ""; width: 1.25rem; margin: 0 var(--sb-space-2); border-top: 2px solid var(--sb-border); }
.skpa_stageline__item.is-done { color: var(--sb-teal-strong); }
.skpa_stageline__item.is-done::after { content: "\2713"; margin-left: 0.25rem; }
/* A name heading in a list row is a link on its own - no inline-text margin. */
.skpa_org-group__name .skpa_link { margin-left: 0; }
.skpa_stageline__item.is-done + .skpa_stageline__item::before { border-top-color: var(--sb-teal-strong); }
.skpa_stageline__item.is-current { font-weight: 700; color: var(--sb-navy); }
@media (min-width: 40rem) { .skpa_interview-form .skpa_field__row { grid-template-columns: 1fr 1fr; } }

/* A bare list of short lines (the dashboard Courses card): no bullets, small gap. */
.skpa_plain-list { list-style: none; margin: 0 0 var(--sb-space-2); padding: 0; display: grid; gap: var(--sb-space-1); }

/* "Your data" page (account_data.php): a bulleted what-you-get / what-happens list, and the delete card marked as the danger zone. */
.skpa_data-list { margin: 0 0 var(--sb-space-3); padding-left: 1.25rem; display: grid; gap: var(--sb-space-1); }
.skpa_card--danger { border-color: var(--sb-danger); }

/* Admin "Lists" editor (admin_master_list.php): switched-off rows dimmed, the fixed code shown small, the in-row edit form wide enough to use. */
.skpa_table__row--off td { opacity: .6; }
.skpa_master-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--sb-text-sm); }
.skpa_master-position { max-width: 8rem; }

/* Emailed sign-in code page (login_code.php): a big, spaced code box and the two small secondary actions side by side. */
.skpa_field .skpa_code-input { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.skpa_code-sent { overflow-wrap: anywhere; }
.skpa_code-actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin-top: var(--sb-space-4); }
.skpa_master-actions { display: flex; align-items: center; gap: var(--sb-space-4); }
.skpa_master-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2) var(--sb-space-3); margin: var(--sb-space-6) 0 var(--sb-space-2); }
.skpa_master-search input { flex: 1 1 14rem; }

/* Type-to-search suggestions (suggest.js): the course title box and the subject picker. The list
   reuses .skpa_mention-list/.skpa_mention-item, floated under its input. */
.skpa_suggest { position: relative; }
.skpa_suggest .skpa_suggest__list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-width: none; margin-top: var(--sb-space-1); }
.skpa_suggest__hint { margin-left: auto; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_suggest__own { font-weight: 600; color: var(--sb-blue); }
.skpa_suggest__input { width: 100%; }
.skpa_chips { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-2); padding: 0; list-style: none; }
.skpa_chips[hidden] { display: none; }
.skpa_chip { display: inline-flex; align-items: center; gap: var(--sb-space-1); padding: var(--sb-space-1) var(--sb-space-1) var(--sb-space-1) var(--sb-space-3); font-size: var(--sb-text-sm); color: #34424a; background: #eef1f3; border-radius: 999px; }
.skpa_chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; font-size: 1rem; line-height: 1; color: inherit; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.skpa_chip__remove:hover, .skpa_chip__remove:focus-visible { background: #d9dee2; }
/* The site's own display rules (.skpa_checks is a grid, .skpa_field label/input are blocks) beat
   the browser's [hidden] style, so anything suggest.js hides inside a form field must say so here. */
.skpa_field [hidden], .skpa_subject-picker [hidden] { display: none !important; }

/* Benefits (dashboard, public page, job page): two groups, each a tidy grid of ticked lines
   rather than a wrap of grey pills (owner, 2 Oct 2026: "UI for benefits section is not looking good"). */
.skpa_benefits { display: grid; gap: var(--sb-space-4); }
.skpa_benefits__group + .skpa_benefits__group { padding-top: var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_benefits__heading { display: flex; align-items: center; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-text-muted); }
.skpa_benefits__heading svg { color: var(--sb-teal-strong); }
.skpa_benefits__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sb-space-2) var(--sb-space-4); margin: 0; padding: 0; list-style: none; }
.skpa_benefits__item { display: flex; align-items: flex-start; gap: var(--sb-space-2); line-height: 1.4; color: var(--sb-text); }
.skpa_benefits__item svg { flex: none; margin-top: .15rem; color: var(--sb-teal-strong); }

/* Detail pages (course, facility, event): every picture in one gallery slider at the top of the card. */
.skpa_detail-gallery { margin-bottom: var(--sb-space-4); }
.skpa_detail-subheading { margin-top: var(--sb-space-6); }

/* Detail pages (course, event, achievement, facility): the sidebar of the institute's other
   sections (_detail_sidebar.php). Narrow column, so every slider shows one card at a time. */
.skpa_detail-aside__card + .skpa_detail-aside__card { margin-top: var(--sb-space-4); }
.skpa_dash__aside .skpa_slider__item { flex-basis: 100%; }
.skpa_dash__aside .skpa_benefits__list { grid-template-columns: 1fr; }
.skpa_detail-aside__all { margin: var(--sb-space-4) 0 0; }
.skpa_detail-main .skpa_card { margin: 0; }

/* Institute "View all" pages (/in/{slug}/{section}) and their links, 4 Oct 2026 */
.skpa_card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sb-space-1) var(--sb-space-3); margin-bottom: var(--sb-space-2); }
.skpa_card__head .skpa_card__title { margin: 0; }
.skpa_card__more { font-size: var(--sb-text-sm); font-weight: 600; white-space: nowrap; }
.skpa_card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sb-space-4); }
@media (min-width: 36rem) { .skpa_card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .skpa_card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skpa_gallery-grid--page { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin: 0; }
.skpa_gallery-grid--page .skpa_gallery-grid__item img { height: 7.5rem; }
.skpa_gallery-grid--aside { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sb-space-2); margin: 0; }
.skpa_gallery-grid--aside .skpa_gallery-grid__item img { height: 4.5rem; }
.skpa_pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-3); margin-top: var(--sb-space-6); padding-top: var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_pagination__summary { margin: 0; font-size: var(--sb-text-sm); }
.skpa_pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-1); margin: 0; padding: 0; list-style: none; }
.skpa_pagination__link { display: inline-block; min-width: 2.25rem; padding: var(--sb-space-1) var(--sb-space-2); text-align: center; font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-navy); text-decoration: none; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); background: var(--sb-surface); }
a.skpa_pagination__link:hover { border-color: var(--sb-navy); }
.skpa_pagination__link--current { color: #fff; background: var(--sb-teal-strong); border-color: var(--sb-teal-strong); }
.skpa_pagination__link--off { color: var(--sb-text-muted); opacity: .6; }
.skpa_pagination__gap { padding: 0 var(--sb-space-1); color: var(--sb-text-muted); }
.skpa_explore { margin: 0; padding: 0; list-style: none; }
.skpa_explore__link { display: flex; justify-content: space-between; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-2) var(--sb-space-3); color: var(--sb-navy); font-weight: 600; text-decoration: none; border-radius: var(--sb-radius-sm); }
.skpa_explore__link:hover { background: var(--sb-bg); }
.skpa_explore__link--current, .skpa_explore__link--current:hover { color: #fff; background: var(--sb-teal-strong); }
.skpa_explore__count { min-width: 1.75rem; padding: 0 var(--sb-space-2); font-size: var(--sb-text-sm); text-align: center; color: var(--sb-text-muted); background: var(--sb-bg); border-radius: 999px; }
.skpa_explore__link--current .skpa_explore__count { color: var(--sb-teal-strong); background: #fff; }
.skpa_aside-list { margin: 0; padding: 0; list-style: none; }
.skpa_aside-list li { display: flex; flex-direction: column; padding: var(--sb-space-2) 0; border-top: 1px solid var(--sb-border); }
.skpa_aside-list li:first-child { border-top: 0; padding-top: 0; }
.skpa_aside-list a { font-weight: 600; }
.skpa_aside-list .skpa_muted { font-size: var(--sb-text-sm); }

/* Feed comments, LinkedIn style: bubble, actions row, one level of replies, reaction picker (4 Oct 2026) */
.skpa_comments { display: flex; flex-direction: column; gap: var(--sb-space-3); }
.skpa_comment { display: flex; gap: var(--sb-space-2); align-items: flex-start; }
/* Opened from a notification (/app/posts/{post}#comment-{id}): land a little below the top and show which comment it is. */
.skpa_comment { scroll-margin-top: var(--sb-space-6, 2rem); }
.skpa_comment:target { outline: 2px solid var(--sb-teal); outline-offset: 4px; border-radius: var(--sb-radius-sm); }
.skpa_comment__avatar { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--sb-text-sm); font-weight: 700; color: var(--sb-navy); background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: 50%; }
.skpa_comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.skpa_comment--reply .skpa_comment__avatar { flex-basis: 2rem; width: 2rem; height: 2rem; font-size: .75rem; }
.skpa_comment__main { flex: 1 1 auto; min-width: 0; }
.skpa_comment__bubble { padding: var(--sb-space-2) var(--sb-space-3); background: #eef1f3; border-radius: 0 var(--sb-radius) var(--sb-radius) var(--sb-radius); }
.skpa_comment__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sb-space-2); margin: 0; }
.skpa_comment__name { font-weight: 700; color: var(--sb-navy); text-decoration: none; }
a.skpa_comment__name:hover { text-decoration: underline; }
.skpa_comment__time { font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_comment__body { margin: var(--sb-space-1) 0 0; overflow-wrap: anywhere; }
.skpa_comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-1) var(--sb-space-2); margin: var(--sb-space-1) 0 0 var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_comment__action { padding: 2px var(--sb-space-1); font: inherit; font-weight: 600; color: var(--sb-text-muted); text-decoration: none; background: none; border: 0; border-radius: var(--sb-radius-sm); cursor: pointer; }
.skpa_comment__action:hover, .skpa_comment__action:focus-visible { color: var(--sb-navy); background: #eef1f3; }
.skpa_comment__action--danger:hover, .skpa_comment__action--danger:focus-visible { color: var(--sb-danger); }
.skpa_comment__remove { display: inline; margin: 0; }
.skpa_comment__sep { color: var(--sb-border); }
.skpa_comment__dot[hidden], .skpa_comment__count[hidden] { display: none; }
.skpa_comment__replies { display: flex; flex-direction: column; gap: var(--sb-space-3); margin-top: var(--sb-space-3); }
.skpa_comment__replies:empty { display: none; }
.skpa_comment__earlier { display: flex; flex-direction: column; gap: var(--sb-space-3); }
.skpa_comment__earlier > summary { font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-navy); cursor: pointer; }
.skpa_comment__earlier[open] > summary { margin-bottom: var(--sb-space-3); }
.skpa_comment__reply-box { display: none; margin-top: var(--sb-space-3); }
.skpa_comment__reply-box.is-open, .skpa_comment__reply-box:target { display: block; }
.skpa_comment__reply-box textarea { min-height: 2.5rem; }
/* Reactions: the Like button turns into your reaction; the picker floats above it */
.skpa_reactbar { display: inline-flex; align-items: center; gap: var(--sb-space-1) var(--sb-space-2); }
.skpa_react { position: relative; display: inline-block; margin: 0; }
.skpa_react__main { padding: 2px var(--sb-space-1); font: inherit; font-weight: 600; color: var(--sb-text-muted); background: none; border: 0; border-radius: var(--sb-radius-sm); cursor: pointer; -webkit-touch-callout: none; user-select: none; }
.skpa_react__main:hover, .skpa_react__main:focus-visible { background: #eef1f3; }
.skpa_react__main--like { color: #0a66c2; }
.skpa_react__main--celebrate { color: #44712e; }
.skpa_react__main--support { color: #715e86; }
.skpa_react__main--love { color: #b24020; }
.skpa_react__main--insightful { color: #915907; }
.skpa_react__main--funny { color: #1a707e; }
.skpa_react__picker { position: absolute; left: -0.5rem; bottom: 100%; z-index: 20; display: flex; gap: 2px; padding: var(--sb-space-1); margin-bottom: 6px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 999px; box-shadow: 0 4px 16px rgba(2, 61, 91, .18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility 0s .12s; }
/* an invisible strip under the picker so the pointer can travel up to it without it closing */
.skpa_react__picker::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.skpa_react:hover .skpa_react__picker, .skpa_react:focus-within .skpa_react__picker, .skpa_react.is-picking .skpa_react__picker { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: none) { .skpa_react:focus-within:not(.is-picking) .skpa_react__picker { opacity: 0; visibility: hidden; } }
.skpa_react__option { width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.35rem; line-height: 1; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.skpa_react__option:hover, .skpa_react__option:focus-visible { transform: scale(1.3) translateY(-3px); }
.skpa_react__option.is-mine { background: #eef1f3; }
.skpa_react__summary { display: inline-flex; align-items: center; gap: var(--sb-space-1); color: var(--sb-text-muted); }
.skpa_react__icons { display: inline-flex; }
.skpa_react__icons > span { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: -4px; font-size: .8rem; background: var(--sb-surface); border-radius: 50%; box-shadow: 0 0 0 2px var(--sb-surface); }
.skpa_react__icons > span:first-child { margin-left: 0; }

/* Post reactions, LinkedIn style (4 Oct 2026): stats line, then an action row */
.skpa_react__summary[hidden] { display: none; }
.skpa_post-stats { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-2); min-height: 1.5rem; padding-bottom: var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-muted); border-bottom: 1px solid var(--sb-border); }
.skpa_post-stats__comments { margin-left: auto; }
.skpa_post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-1); padding-top: var(--sb-space-1); }
.skpa_post-actions__remove { margin: 0 0 0 auto; }
/* Share and Repost (5 Oct 2026): a small panel under the action row; a repost shows the original in a box. */
.skpa_post-time { color: inherit; text-decoration: none; }
.skpa_post-time:hover, .skpa_post-time:focus-visible { text-decoration: underline; }
.skpa_post-stats__reposts { margin-left: var(--sb-space-2); }
.skpa_share { position: relative; }
.skpa_share > summary { list-style: none; }
.skpa_share > summary::-webkit-details-marker { display: none; }
.skpa_share__panel { position: absolute; z-index: 20; top: 100%; left: 0; display: grid; gap: var(--sb-space-2); width: min(20rem, 85vw); margin-top: var(--sb-space-1); padding: var(--sb-space-3); background: var(--sb-surface, #fff); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); box-shadow: 0 6px 20px rgba(2, 61, 91, .12); }
.skpa_share__panel input, .skpa_share__panel textarea, .skpa_share__panel select { width: 100%; padding: var(--sb-space-2); font: inherit; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_share__panel .skpa_btn { justify-self: start; }
/* The page-level Share (_share_links.php): sits under a detail page's title. */
.skpa_share--page { display: inline-block; margin-block: var(--sb-space-2); }
.skpa_share__apps { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); }
.skpa_share__hint { margin: 0; font-size: .8125rem; }
.skpa_repost { padding: var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_repost__author { margin: 0 0 var(--sb-space-1); font-weight: 600; }
.skpa_repost .skpa_post-image { margin-top: var(--sb-space-2); }
/* An event shared in followers' feeds: a card with the event's own details, linking to its page. */
.skpa_post-event { display: flex; gap: var(--sb-space-3); padding: var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); color: inherit; text-decoration: none; }
.skpa_post-event:hover, .skpa_post-event:focus-visible { border-color: var(--sb-teal); }
.skpa_post-event img { width: 7.5rem; height: 5.6rem; object-fit: cover; border-radius: var(--sb-radius-sm); flex: none; }
.skpa_post-event__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.skpa_post-event__when { font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-teal-strong); }
.skpa_post-event__title { overflow-wrap: anywhere; }
.skpa_post-event__more { font-size: var(--sb-text-sm); text-decoration: underline; }
@media (max-width: 30rem) { .skpa_post-event { flex-direction: column; } .skpa_post-event img { width: 100%; height: auto; max-height: 12rem; } }
.skpa_post-action, .skpa_react--post .skpa_react__main { display: inline-flex; align-items: center; gap: var(--sb-space-1); padding: var(--sb-space-2) var(--sb-space-3); font: inherit; font-weight: 600; color: var(--sb-text-muted); text-decoration: none; background: none; border: 0; border-radius: var(--sb-radius-sm); cursor: pointer; }
.skpa_post-action:hover, .skpa_post-action:focus-visible, .skpa_react--post .skpa_react__main:hover { color: var(--sb-navy); background: #eef1f3; }
.skpa_react--post .skpa_react__main--like { color: #0a66c2; }
.skpa_react--post .skpa_react__main--celebrate { color: #44712e; }
.skpa_react--post .skpa_react__main--support { color: #715e86; }
.skpa_react--post .skpa_react__main--love { color: #b24020; }
.skpa_react--post .skpa_react__main--insightful { color: #915907; }
.skpa_react--post .skpa_react__main--funny { color: #1a707e; }
.skpa_post-action--danger:hover, .skpa_post-action--danger:focus-visible { color: var(--sb-danger); }
.skpa_react--post .skpa_react__picker { left: 0; }

/* Report and block (4 Oct 2026): the More (...) menu, report form and admin queue */
.skpa_more { position: relative; margin-left: auto; align-self: flex-start; }
.skpa_more__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 var(--sb-space-1); font-weight: 700; letter-spacing: 1px; color: var(--sb-text-muted); list-style: none; border-radius: 50%; cursor: pointer; user-select: none; }
.skpa_more__toggle::-webkit-details-marker { display: none; }
.skpa_more__toggle:hover, .skpa_more[open] > .skpa_more__toggle, .skpa_more__toggle:focus-visible { color: var(--sb-navy); background: #eef1f3; }
.skpa_more__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 12rem; padding: var(--sb-space-1) 0; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); box-shadow: 0 6px 20px rgba(2, 61, 91, .16); }
.skpa_more__item { display: block; padding: var(--sb-space-2) var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-navy); text-decoration: none; white-space: nowrap; }
.skpa_more__item:hover, .skpa_more__item:focus-visible { background: #eef1f3; }
.skpa_more__item--danger { color: var(--sb-danger); }
.skpa_more__form { margin: 0; }
button.skpa_more__item { width: 100%; font-family: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.skpa_comment__meta { display: inline-flex; align-items: center; gap: var(--sb-space-1); }
.skpa_comment__meta .skpa_more__toggle { min-width: 1.5rem; height: 1.5rem; }

/* Edit a post or comment in place (_edit_box.php): hidden until Edit in the ⋯ menu opens it (or #target without JS). */
.skpa_edit-box { display: none; margin-top: var(--sb-space-3); }
.skpa_edit-box.is-open, .skpa_edit-box:target { display: block; }
.skpa_edit-box textarea { min-height: 2.5rem; }
.skpa_edit-box__actions { display: flex; gap: var(--sb-space-2); flex-wrap: wrap; }
.skpa_comment__main > .skpa_edit-box { margin: var(--sb-space-2) 0; }
.skpa_edited { font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_edited[hidden], [data-body][hidden] { display: none; }
.skpa_report-target { padding: var(--sb-space-2) var(--sb-space-3); background: #eef1f3; border-left: 3px solid var(--sb-border); border-radius: var(--sb-radius-sm); overflow-wrap: anywhere; }
.skpa_report-reason { display: flex; margin: var(--sb-space-2) 0; }
.skpa_report--urgent { border-left: 4px solid var(--sb-danger); }
.skpa_report__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-2); }
.skpa_report__details { font-style: italic; overflow-wrap: anywhere; }
.skpa_report__actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); }
.skpa_blocked-row { align-items: center; padding: var(--sb-space-2) 0; border-top: 1px solid var(--sb-border); }
.skpa_blocked-row:first-child { border-top: 0; }
.skpa_blocked-row form { margin-left: auto; }

/* ---------------------------------------------------------------- messaging (messages.php) */
/* LinkedIn style: conversations on the left, the open one on the right; on a phone one at a time. */
.skpa_chat { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 32rem; height: calc(100vh - 9rem); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); overflow: hidden; }
.skpa_chat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sb-border); }
.skpa_chat__title { margin: 0; padding: var(--sb-space-3) var(--sb-space-4); font-size: var(--sb-text-lg); border-bottom: 1px solid var(--sb-border); }
.skpa_chat__list [data-inbox] { flex: 1; min-height: 0; overflow-y: auto; }
.skpa_chat__thread { display: none; flex-direction: column; min-width: 0; min-height: 0; }
.skpa_chat--open .skpa_chat__list { display: none; }
.skpa_chat--open .skpa_chat__thread { display: flex; }
/* "People you can message" (_message_suggestions.php): the empty right side; under the list on a phone */
.skpa_chat__empty.skpa_chat__empty--suggest { align-self: stretch; margin: 0; padding: var(--sb-space-4); width: 100%; box-sizing: border-box; text-align: left; overflow-y: auto; }
.skpa_chat__suggest-phone { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sb-space-3) var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_chat__list--suggest [data-inbox] { flex: none; } /* on a phone the suggestions follow the (short) list, no gap */
.skpa_msg-suggest .skpa_card__title { margin: 0 0 var(--sb-space-1); }
.skpa_msg-suggest__list { margin: var(--sb-space-3) 0; padding: 0; list-style: none; }
.skpa_msg-suggest__item { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-2) 0; border-bottom: 1px solid var(--sb-border); }
.skpa_msg-suggest__item:last-child { border-bottom: 0; }
.skpa_msg-suggest__logo { border-radius: var(--sb-radius-sm); }
.skpa_msg-suggest__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.skpa_msg-suggest__name { overflow: hidden; font-weight: 600; color: var(--sb-text); text-overflow: ellipsis; white-space: nowrap; }
.skpa_msg-suggest__line { overflow: hidden; font-size: var(--sb-text-sm); color: var(--sb-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.skpa_msg-suggest__why { font-size: 0.75rem; color: var(--sb-teal-strong); }
@media (min-width: 48rem) {
  .skpa_chat__suggest-phone { display: none; }
  .skpa_chat__list--suggest [data-inbox] { flex: 1; }
}
/* Beside the side rail the list column is a little narrower, so the conversation keeps its room. */
@media (min-width: 60rem) {
  .skpa_dash--rail .skpa_chat { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); }
}
@media (min-width: 48rem) {
  .skpa_chat { grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); }
  .skpa_chat__list, .skpa_chat--open .skpa_chat__list { display: flex; }
  .skpa_chat__thread { display: flex; }
  .skpa_chat__back { display: none; }
}

.skpa_chat-list { margin: 0; padding: 0; list-style: none; }
.skpa_chat-list__empty { padding: var(--sb-space-4); }
.skpa_chat-list__item { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-3) var(--sb-space-4); color: var(--sb-text); text-decoration: none; border-bottom: 1px solid var(--sb-border); border-left: 3px solid transparent; }
.skpa_chat-list__item:hover { background: #f3f6f8; }
.skpa_chat-list__item.is-current { background: #eef6f5; border-left-color: var(--sb-teal-strong); }
.skpa_chat-list__avatar { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_chat-list__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_chat-list__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: #fff; }
.skpa_chat-list__body { flex: 1; min-width: 0; }
.skpa_chat-list__top { display: flex; justify-content: space-between; gap: var(--sb-space-2); }
.skpa_chat-list__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.skpa_chat-list__when { flex: none; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_chat-list__last { display: block; overflow: hidden; font-size: var(--sb-text-sm); color: var(--sb-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.skpa_chat-list__item.is-unread .skpa_chat-list__name, .skpa_chat-list__item.is-unread .skpa_chat-list__last { font-weight: 700; color: var(--sb-text); }
.skpa_chat-list__dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sb-teal-strong); }

.skpa_chat__head { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-3) var(--sb-space-4); border-bottom: 1px solid var(--sb-border); }
.skpa_chat__back { flex: none; font-size: var(--sb-text-sm); color: var(--sb-blue); }
.skpa_chat__who { min-width: 0; }
.skpa_chat__who h2 { margin: 0; font-size: var(--sb-text-md); }
.skpa_chat__who .skpa_link { margin-left: 0; }
.skpa_chat__who p { margin: 0; overflow: hidden; font-size: var(--sb-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.skpa_chat__empty { margin: auto; padding: var(--sb-space-6); text-align: center; }

.skpa_chat__messages { display: flex; flex-direction: column; gap: var(--sb-space-2); flex: 1; min-height: 0; padding: var(--sb-space-4); overflow-y: auto; }
.skpa_chat__earlier { align-self: center; font-size: var(--sb-text-sm); color: var(--sb-blue); }
.skpa_chat__start { align-self: center; text-align: center; }
.skpa_chat__day { display: flex; align-items: center; gap: var(--sb-space-2); margin: var(--sb-space-2) 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_chat__day::before, .skpa_chat__day::after { content: ""; flex: 1; border-top: 1px solid var(--sb-border); }
.skpa_chat-msg { position: relative; display: flex; align-items: flex-end; gap: var(--sb-space-2); max-width: 80%; }
.skpa_chat-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.skpa_chat-msg__avatar { flex: none; width: 2rem; height: 2rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_chat-msg__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_chat-msg__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--sb-text-sm); font-weight: 700; color: #fff; }
.skpa_chat-msg__bubble { min-width: 0; padding: var(--sb-space-2) var(--sb-space-3); background: #eef1f3; border-radius: var(--sb-radius) var(--sb-radius) var(--sb-radius) var(--sb-radius-sm); }
.skpa_chat-msg--mine .skpa_chat-msg__bubble { color: #fff; background: var(--sb-teal-strong); border-radius: var(--sb-radius) var(--sb-radius) var(--sb-radius-sm) var(--sb-radius); }
.skpa_chat-msg--mine .skpa_chat-msg__bubble a { color: #fff; }
.skpa_chat-msg__body { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.skpa_chat-msg__body--deleted { font-style: italic; opacity: 0.8; }
.skpa_chat-msg__warning { margin: var(--sb-space-2) 0 0; padding: var(--sb-space-2); font-size: var(--sb-text-sm); line-height: 1.4; color: #5c3d00; background: #fff8e6; border: 1px solid #f0d58a; border-radius: 6px; overflow-wrap: anywhere; }
.skpa_chat-msg__warning a { color: #5c3d00; font-weight: 600; }
.skpa_chat-msg__time { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--sb-text-muted); text-align: right; }
.skpa_chat-msg--mine .skpa_chat-msg__time { color: rgba(255, 255, 255, 0.85); }
.skpa_chat__seen { align-self: flex-end; margin: -0.25rem 0 0; font-size: 0.75rem; color: var(--sb-text-muted); }
/* The message toolbar, LinkedIn style (owner, 15 Oct 2026): hover (or tap on a phone - .is-active,
   message-actions.js) shows five quick reactions, Reply and "..." (Forward, Edit, Delete) in a small
   white pill over the message's top corner. It opens towards the middle of the chat - to the right of
   someone else's message, to the left of yours - so it never runs off the side. */
.skpa_chat-msg__tools {
  position: absolute; z-index: 5; top: 0; left: 2.25rem; transform: translateY(-82%); /* sits above the bubble, touching only its top edge - never over the text */
  display: flex; align-items: center; gap: 2px; padding: 2px 4px;
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 999px; box-shadow: 0 2px 10px rgba(2, 61, 91, .15);
  opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s;
}
.skpa_chat-msg--mine .skpa_chat-msg__tools { left: auto; right: 0; }
.skpa_chat-msg:hover .skpa_chat-msg__tools, .skpa_chat-msg.is-active .skpa_chat-msg__tools, .skpa_chat-msg__tools:focus-within { opacity: 1; visibility: visible; }
.skpa_chat-msg:has([data-msg-edit-form]) .skpa_chat-msg__tools { display: none; } /* not while the message is being edited */
.skpa_chat__messages { padding-top: calc(var(--sb-space-4) + 1.5rem); } /* room for the first message's toolbar */
@media (prefers-reduced-motion: reduce) { .skpa_chat-msg__tools { transition: none; } }
.skpa_chat-msg__quick { display: flex; gap: 2px; margin: 0; }
.skpa_chat-msg__tool, .skpa_chat-msg__tools .skpa_more__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; min-width: 2rem; height: 2rem; padding: 0;
  font-size: 1.05rem; line-height: 1; color: var(--sb-text-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.skpa_chat-msg__tool:hover, .skpa_chat-msg__tool:focus-visible, .skpa_chat-msg__tools .skpa_more__toggle:hover { color: var(--sb-navy); background: var(--sb-bg); }
.skpa_chat-msg__quick .skpa_chat-msg__tool:hover span { display: inline-block; transform: scale(1.25); }
.skpa_chat-msg__tools .skpa_chat-msg__more { position: static; margin: 0; } /* its menu lines up with the toolbar, not the "..." button, so it stays inside a narrow box */
.skpa_chat-msg__tools .skpa_more__menu { top: calc(100% + 4px); bottom: auto; left: auto; right: 0; min-width: 11rem; }
.skpa_chat-msg:not(.skpa_chat-msg--mine) .skpa_chat-msg__tools .skpa_more__menu { right: auto; left: 0; }
@media (hover: none) { .skpa_chat-msg__tool, .skpa_chat-msg__tools .skpa_more__toggle { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; } }
/* Reactions under the text: one chip per reaction with its count; yours is outlined. */
.skpa_chat-msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--sb-space-1) 0 0; }
.skpa_chat-msg__reaction {
  display: inline-flex; align-items: center; gap: 3px; min-height: 1.6rem; padding: 0 0.45rem;
  font: inherit; font-size: 0.8rem; color: var(--sb-text); background: #fff; border: 1px solid var(--sb-border); border-radius: 999px; cursor: pointer;
}
.skpa_chat-msg__reaction.is-mine { border-color: var(--sb-teal-strong); box-shadow: inset 0 0 0 1px var(--sb-teal-strong); }
.skpa_chat-msg__reaction:disabled { cursor: default; }
/* A reply's quote, and "Forwarded". */
.skpa_chat-msg__quote {
  display: block; margin: 0 0 var(--sb-space-1); padding: 0.3rem 0.5rem; font-size: 0.8rem; line-height: 1.35; color: var(--sb-text);
  text-decoration: none; background: rgba(2, 61, 91, .06); border-left: 3px solid var(--sb-teal-strong); border-radius: 4px;
}
.skpa_chat-msg--mine .skpa_chat-msg__bubble a.skpa_chat-msg__quote { color: #fff; background: rgba(255, 255, 255, .16); border-left-color: #fff; }
.skpa_chat-msg__quote strong { display: block; }
.skpa_chat-msg__quote-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .9; }
.skpa_chat-msg__quote-text--deleted { font-style: italic; }
.skpa_chat-msg__forwarded { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; font-size: 0.75rem; font-style: italic; opacity: .85; }
.skpa_chat-msg.is-flash .skpa_chat-msg__bubble { animation: skpa-flash 1.4s ease-out; }
@keyframes skpa-flash { 0% { box-shadow: 0 0 0 4px rgba(9, 189, 177, .55); } 100% { box-shadow: 0 0 0 4px rgba(9, 189, 177, 0); } }
@media (prefers-reduced-motion: reduce) { .skpa_chat-msg.is-flash .skpa_chat-msg__bubble { animation: none; outline: 3px solid var(--sb-teal); } }
/* "Replying to ..." above the send box. */
.skpa_chat__replying {
  display: flex; align-items: flex-start; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-2); padding: 0.35rem 0.5rem;
  font-size: var(--sb-text-sm); background: var(--sb-bg); border-left: 3px solid var(--sb-teal-strong); border-radius: 4px;
}
.skpa_chat__replying[hidden] { display: none; }
.skpa_chat__replying-text { flex: 1; min-width: 0; margin: 0; }
.skpa_chat__replying-text strong { display: block; color: var(--sb-navy); }
.skpa_chat__replying-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-text-muted); }
.skpa_chat__replying-cancel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; font-size: 1.2rem; line-height: 1; color: var(--sb-text-muted); text-decoration: none; border-radius: 50%; }
.skpa_chat__replying-cancel:hover { color: var(--sb-navy); background: #fff; }
/* Forward: the page (no JavaScript) and the small window (message-actions.js). */
.skpa_forward-list { margin: var(--sb-space-3) 0 0; padding: 0; list-style: none; }
.skpa_forward-list__item { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-2) 0; border-bottom: 1px solid var(--sb-border); }
.skpa_forward-list__item[hidden] { display: none; }
.skpa_forward-list__item form { margin: 0; }
.skpa_forward-list__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.skpa_forward-dialog { width: min(26rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100dvh - 4rem)); padding: var(--sb-space-4); border: 0; border-radius: var(--sb-radius); box-shadow: 0 10px 40px rgba(2, 61, 91, .25); }
.skpa_forward-dialog::backdrop { background: rgba(2, 61, 91, .35); }
.skpa_forward-dialog__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sb-space-2); }
.skpa_forward-dialog__head h2 { margin: 0; font-size: 1.1rem; color: var(--sb-navy); }
.skpa_forward-dialog__close { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; line-height: 1; color: var(--sb-text-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.skpa_forward-dialog__close:hover { background: var(--sb-bg); }
.skpa_forward-dialog input[type="search"] { box-sizing: border-box; width: 100%; padding: 0.5rem 0.75rem; font: inherit; border: 1px solid var(--sb-border); border-radius: 999px; }
.skpa_forward-dialog__note { margin: var(--sb-space-2) 0 0; }
.skpa_forward-dialog .skpa_forward-list { max-height: 20rem; overflow-y: auto; }
.skpa_chat-msg__edit { min-width: min(18rem, 60vw); margin: 0; }
.skpa_chat-msg__edit textarea { box-sizing: border-box; width: 100%; font: inherit; color: var(--sb-text); background: #fff; resize: vertical; }
.skpa_chat-msg__edit-bar { display: flex; justify-content: flex-end; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.skpa_chat-msg--mine .skpa_chat-msg__edit-bar .skpa_btn { color: var(--sb-teal-strong); background: #fff; border-color: #fff; }
.skpa_chat-msg--mine .skpa_chat-msg__edit-bar .skpa_btn--ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .8); }
.skpa_chat-msg--mine .skpa_chat-msg__edit .skpa_field__error { color: #fff; }

.skpa_chat__compose { padding: var(--sb-space-3) var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_chat__compose textarea { box-sizing: border-box; width: 100%; font: inherit; min-height: 2.75rem; max-height: 10rem; resize: vertical; }
.skpa_chat__compose-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.skpa_chat__attach { position: relative; display: inline-flex; align-items: center; gap: var(--sb-space-1); max-width: 14rem; padding: 0.2rem var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-teal-strong); border: 1px solid var(--sb-border); border-radius: 999px; cursor: pointer; }
.skpa_chat__attach:hover, .skpa_chat__attach:focus-within { border-color: var(--sb-teal-strong); }
.skpa_chat__attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.skpa_chat__attach > span[aria-hidden] { font-size: 1.1rem; line-height: 1; }
.skpa_chat__attach-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skpa_chat__attach.is-chosen { color: #fff; background: var(--sb-teal-strong); border-color: var(--sb-teal-strong); }
.skpa_chat__compose-bar .skpa_chat__hint { margin-right: auto; }
.skpa_chat__compose-bar .skpa_chat__attach + .skpa_chat__hint { margin-left: var(--sb-space-2); }
/* A picture or PDF sent in a message. */
.skpa_chat-msg__picture { display: block; margin: 0 0 var(--sb-space-1); }
.skpa_chat-msg__picture img { display: block; max-width: min(16rem, 100%); height: auto; max-height: 16rem; object-fit: contain; border-radius: var(--sb-radius-sm); cursor: zoom-in; }
.skpa_chat-msg__file { display: flex; align-items: center; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-1); padding: var(--sb-space-2); color: var(--sb-text); text-decoration: none; background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_chat-msg--mine .skpa_chat-msg__bubble a.skpa_chat-msg__file { color: var(--sb-text); }
.skpa_chat-msg__file-icon { flex: none; padding: 0.15rem 0.35rem; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--sb-danger); border-radius: 3px; }
.skpa_chat-msg__file-name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.skpa_chat-msg__file-size { flex: none; font-size: 0.75rem; color: var(--sb-text-muted); }
.skpa_chat-msg__body:empty { display: none; }
.skpa_chat__hint { font-size: var(--sb-text-sm); }
@media (max-width: 47.99rem) { .skpa_chat__hint { display: none; } .skpa_chat__compose-bar { justify-content: flex-end; } .skpa_chat__attach { margin-right: auto; } }
.skpa_chat__closed { margin: 0; padding: var(--sb-space-3) var(--sb-space-4); color: var(--sb-text-muted); text-align: center; background: #f3f6f8; border-top: 1px solid var(--sb-border); }
.skpa_report__evidence { margin: var(--sb-space-2) 0; }
.skpa_report__evidence summary { cursor: pointer; font-weight: 600; }
.skpa_report__evidence ol { max-height: 22rem; margin: var(--sb-space-2) 0; padding: var(--sb-space-2) var(--sb-space-2) var(--sb-space-2) var(--sb-space-6); overflow-y: auto; background: #f3f6f8; border-radius: var(--sb-radius-sm); }
.skpa_report__evidence li { margin-bottom: var(--sb-space-2); overflow-wrap: anywhere; }

/* Messaging step 2: requests, safety tip, Inbox / Requests tabs, radio rows on the settings page. */
.skpa_chat-tabs { display: flex; gap: var(--sb-space-1); padding: var(--sb-space-2) var(--sb-space-4); border-bottom: 1px solid var(--sb-border); }
.skpa_chat-tabs__item { padding: var(--sb-space-1) var(--sb-space-3); font-size: var(--sb-text-sm); font-weight: 600; color: var(--sb-text-muted); text-decoration: none; border: 1px solid var(--sb-border); border-radius: 999px; }
.skpa_chat-tabs__item.is-active { color: #fff; background: var(--sb-teal-strong); border-color: var(--sb-teal-strong); }
.skpa_chat-tabs__count { display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; font-size: 0.75rem; color: #fff; text-align: center; background: var(--sb-danger); border-radius: 999px; }
.skpa_chat-list__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin-top: 0.15rem; font-size: 0.75rem; }
.skpa_chat-list__tags .skpa_badge { padding: 0 var(--sb-space-2); font-size: 0.75rem; }
.skpa_chat__head .skpa_more { margin-left: auto; align-self: center; }
.skpa_chat__request { padding: var(--sb-space-3) var(--sb-space-4); background: #fff8e6; border-bottom: 1px solid #f0d58a; }
.skpa_chat__request p { margin: 0 0 var(--sb-space-2); }
.skpa_chat__request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
.skpa_chat__request-actions form { margin: 0; }
.skpa_chat__request-report { margin-left: auto; font-size: var(--sb-text-sm); }
.skpa_chat__safety { font-size: var(--sb-text-sm); color: #7a5300; }
.skpa_chat__safety--bar { margin: 0; padding: var(--sb-space-2) var(--sb-space-4); background: #fff8e6; border-bottom: 1px solid #f0d58a; }
.skpa_chat__note { margin: 0 0 var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_chat__as { margin-bottom: var(--sb-space-2); }
.skpa_choice { display: flex; align-items: flex-start; gap: var(--sb-space-2); margin: var(--sb-space-2) 0; }
.skpa_choice input { flex: none; margin-top: 0.3rem; }
/* Inside a .skpa_field the generic "label is a block, input is full width" rules won - the radio or
   checkbox sat on its own line, centred, away from its words (Job alerts, Messaging, search). */
.skpa_field .skpa_choice { display: flex; margin-bottom: 0; font-weight: 400; }
.skpa_field input[type="checkbox"], .skpa_field input[type="radio"] { width: auto; padding: 0; }

/* Profile actions on one row, LinkedIn style: Connect / Pending, Message, then the ⋯ menu right after them. */
.skpa_profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin-top: var(--sb-space-3); }
.skpa_profile-actions form { margin: 0; }
.skpa_profile-actions .skpa_btn { margin: 0; }
.skpa_profile-actions .skpa_more { margin-left: 0; align-self: center; }
.skpa_profile-actions .skpa_more__toggle { width: 2.5rem; height: 2.5rem; border: 1px solid var(--sb-border); border-radius: 50%; }
.skpa_profile-actions .skpa_more__menu { right: auto; left: 0; }

/* ---------------------------------------------------------------- page sidebars (View::RAILS, _side_rail.php) */
/* One-column pages get a right-hand rail of shortcut cards, same 2fr / 1fr grid as the dashboard (stacked under 60rem). */
.skpa_dash--rail { margin-top: 0; }
.skpa_dash--rail > .skpa_dash__main > .skpa_card--narrow { max-width: none; margin: 0; }
.skpa_rail { position: sticky; top: var(--sb-space-4); }
@media (max-width: 59.99rem) { .skpa_rail { position: static; } }
.skpa_rail-card .skpa_card__title { margin-bottom: var(--sb-space-2); }
.skpa_rail-card__actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.skpa_rail-card__footer { display: block; margin-top: var(--sb-space-3); padding-top: var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-blue); border-top: 1px solid var(--sb-border); }
.skpa_rail-card--join { background: linear-gradient(160deg, #eef8f6, var(--sb-surface) 60%); }
.skpa_rail-card--safety { border-left: 3px solid #f0b400; }
.skpa_rail-list { margin: 0; padding: 0; list-style: none; }
.skpa_rail-list__link { display: flex; justify-content: space-between; gap: var(--sb-space-2); padding: 0.4rem var(--sb-space-2); color: var(--sb-text); text-decoration: none; border-radius: var(--sb-radius-sm); }
.skpa_rail-list__link:hover { background: #f3f6f8; }
.skpa_rail-list__link.is-current { font-weight: 700; color: var(--sb-navy); background: #eef6f5; box-shadow: inset 3px 0 0 var(--sb-teal-strong); }
.skpa_rail-list__link--count strong { color: var(--sb-teal-strong); }
.skpa_rail-tips { margin: 0; padding-left: var(--sb-space-4); font-size: var(--sb-text-sm); }
.skpa_rail-tips li { margin-bottom: var(--sb-space-2); }
.skpa_rail-me { text-align: center; }
.skpa_rail-me__avatar { display: inline-block; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 50%; background: var(--sb-teal-strong); }
.skpa_rail-me__avatar--square { border-radius: var(--sb-radius-sm); }
.skpa_rail-me__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skpa_rail-me__avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: #fff; }
.skpa_rail-me__name { margin: var(--sb-space-2) 0 0; font-weight: 700; }
.skpa_rail-me__headline { margin: 0 0 var(--sb-space-2); font-size: var(--sb-text-sm); }
.skpa_rail-me .skpa_rail-card__actions { justify-content: center; }

/* Phones: iPhone Safari zooms into any form box whose text is under 16px when it is tapped - keep
   typing boxes at 16px there (the rest of the page stays 14px). Last in the file and with attribute
   selectors so it beats ".skpa_field input { font: inherit }" and friends. */
@media (max-width: 47.99rem) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select[name], select[id], textarea[name], textarea[id] { font-size: 16px; }
}

/* The "you are offline" page the service worker keeps on the device. */
.skpa_offline { max-width: 28rem; margin: 3rem auto; text-align: center; }
.skpa_offline img { margin: 0 auto var(--sb-space-3); border-radius: 1rem; }

/* Phone and browser notifications: the invitation (feed, dashboard) floats at the bottom of the
   screen - it appears after the page, so it must never push the page down (no layout shift). */
.skpa_push-invite { position: fixed; left: var(--sb-space-4); right: var(--sb-space-4); bottom: var(--sb-space-4); z-index: 50; max-width: 36rem; margin: 0 auto;
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: 0 8px 24px rgba(2, 61, 91, 0.18); }
.skpa_push-invite[hidden] { display: none; }
.skpa_push-invite__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-3) var(--sb-space-4); }
.skpa_push-invite__inner img { border-radius: 0.6rem; flex: none; }
.skpa_push-invite__inner p { flex: 1 1 16rem; margin: 0; }
.skpa_push-panel { margin: var(--sb-space-3) 0; }
.skpa_push-on { color: var(--sb-teal-strong); font-weight: 600; margin: 0 0 var(--sb-space-2); }
.skpa_push-install { margin: 0; }
.skpa_card__subtitle { margin: var(--sb-space-4, 1rem) 0 var(--sb-space-2); font-size: var(--sb-text-md); }
.skpa_push-devices li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-2) 0; border-top: 1px solid var(--sb-border); }

/* ---------------------------------------------------------------- loading skeletons
   One look for everything still on its way (owner, 6 Oct 2026: "skeleton for all sections, avoid
   CLS, keep it consistent"). Every box keeps the size of what will replace it, so nothing jumps.
   - .skpa_skeleton: the grey shimmering block; with __line, __avatar, __row for common shapes.
   - img.skpa_img-loading: set by app.js on every picture that has not arrived yet, removed when it
     has - the picture's box (kept by its width/height) shows the shimmer meanwhile.
   - Parts a script fills later (the feed's suggestions, @-mention search, earlier messages) show
     skeleton rows while they wait - see feed-actions.js, post-editor.js, messages.js. */
@keyframes skpa_shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skpa_skeleton, img.skpa_img-loading {
  background: linear-gradient(90deg, var(--sb-skeleton) 25%, var(--sb-skeleton-shine) 50%, var(--sb-skeleton) 75%);
  background-size: 200% 100%;
  animation: skpa_shimmer 1.4s ease-in-out infinite;
}
.skpa_skeleton { display: block; border-radius: var(--sb-radius-sm); color: transparent; }
.skpa_skeleton__line { height: 0.75rem; margin: 0.35rem 0; }
.skpa_skeleton__line--short { width: 55%; }
.skpa_skeleton__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skpa_skeleton__button { width: 6rem; height: 1.9rem; border-radius: 999px; margin-top: var(--sb-space-1); }
.skpa_skeleton-row { display: flex; gap: var(--sb-space-3); align-items: flex-start; padding: var(--sb-space-2) 0; }
.skpa_skeleton-row__body { flex: 1; min-width: 0; }
.skpa_skeleton-bubble { width: 60%; height: 2.6rem; margin: var(--sb-space-2) 0; border-radius: var(--sb-radius); }
.skpa_skeleton-bubble:nth-child(even) { width: 45%; margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .skpa_skeleton, img.skpa_img-loading { animation: none; }
}

/* The signed-out front page, skillbonds.com/ (templates/home.php): what SkillBonds is beside the sign-in box. */
.skpa_home { display: grid; gap: var(--sb-space-6); align-items: start; margin: var(--sb-space-6) 0; }
.skpa_home__title { margin: 0 0 var(--sb-space-3); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; color: var(--sb-navy); }
.skpa_home__lead { margin: 0 0 var(--sb-space-4); font-size: var(--sb-text-lg); color: var(--sb-text-muted); }
.skpa_home__points { margin: 0 0 var(--sb-space-6); padding-left: 1.2rem; }
.skpa_home__points li { margin-bottom: var(--sb-space-2); }
.skpa_home__links { display: flex; flex-wrap: wrap; gap: var(--sb-space-3); margin: 0; }
.skpa_home__signin { width: 100%; max-width: 26rem; box-sizing: border-box; justify-self: center; }
@media (min-width: 60rem) {
  .skpa_home { grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr); gap: var(--sb-space-8); margin: var(--sb-space-8) 0; }
  .skpa_home__signin { justify-self: end; }
}

/* Sign-up consents (_signup_consent.php) and "permission for students shown" (_people_consent.php): the box
   sits at the top of a label that may wrap to two lines. */
.skpa_field .skpa_check--top { align-items: flex-start; }
.skpa_field .skpa_check--top input { margin-top: 0.2rem; flex: none; }
.skpa_consent { margin: var(--sb-space-3) 0; }
.skpa_consent .skpa_field { margin-bottom: var(--sb-space-2); }

/* "How we handle your documents" on the verification page */
.skpa_doc-privacy { margin-top: var(--sb-space-3); }
.skpa_doc-privacy summary { cursor: pointer; }
.skpa_doc-privacy ul { margin: var(--sb-space-3) 0 0; padding-left: 1.2rem; }
.skpa_doc-privacy li { margin-bottom: var(--sb-space-2); }

/* Admission enquiries - the institute's list and a parent's "My enquiries" */
.skpa_enquiry { padding: var(--sb-space-4) 0; border-top: 1px solid var(--sb-border); }
.skpa_enquiry:first-of-type { border-top: 0; }
.skpa_enquiry__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sb-space-2); }
.skpa_enquiry__name { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.skpa_enquiry .skpa_about-text { margin: var(--sb-space-2) 0; }
.skpa_enquiry__form { display: grid; gap: var(--sb-space-2) var(--sb-space-3); align-items: end; margin-top: var(--sb-space-2); }
@media (min-width: 40rem) {
  .skpa_enquiry__form { grid-template-columns: 10rem 1fr auto; }
  .skpa_enquiry__form .skpa_field { margin-bottom: 0; }
}

/* School finder: compare 2-3 institutes; the table scrolls inside its box on a phone */
.skpa_compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.skpa_compare__table { width: 100%; min-width: 36rem; border-collapse: collapse; table-layout: fixed; }
.skpa_compare__table th, .skpa_compare__table td { padding: var(--sb-space-3); text-align: left; vertical-align: top; border-top: 1px solid var(--sb-border); overflow-wrap: anywhere; }
.skpa_compare__table thead th { border-top: 0; vertical-align: bottom; }
.skpa_compare__table tbody th { width: 9rem; color: var(--sb-text-muted); font-weight: 600; position: sticky; left: 0; background: var(--sb-surface); }
.skpa_compare__table thead th:first-child { width: 9rem; position: sticky; left: 0; background: var(--sb-surface); }
.skpa_compare__logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--sb-space-2); overflow: hidden; border-radius: var(--sb-radius-sm); background: var(--sb-bg); font-weight: 700; color: var(--sb-navy); }
.skpa_compare__logo img { width: 48px; height: 48px; object-fit: cover; }
.skpa_compare__list { margin: 0; padding-left: 1.1rem; }
.skpa_compare__table form { margin-top: var(--sb-space-2); }
.skpa_people-card__compare { justify-content: center; margin-top: var(--sb-space-2); }

/* Reviews (ReviewService): stars, the summary line, one review, the public reply. */
.skpa_section-title { margin: var(--sb-space-6) 0 var(--sb-space-2); font-size: var(--sb-text-lg); color: var(--sb-navy); }
.skpa_review { padding: var(--sb-space-3) 0; border-top: 1px solid var(--sb-border); }
.skpa_review p { margin: 0 0 var(--sb-space-1); }
.skpa_review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sb-space-2); }
.skpa_review__stars { color: #a35f00; letter-spacing: 1px; white-space: nowrap; }
.skpa_review__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sb-space-2); }
.skpa_review__reply { margin: var(--sb-space-2) 0 0; padding: var(--sb-space-2) var(--sb-space-3); background: var(--sb-bg); border-left: 3px solid var(--sb-teal-strong); border-radius: var(--sb-radius-sm); }

/* Bigger tap targets on touch screens (launch audit list C, 11 Oct 2026): links and buttons the
   audit measured under 24 px get a larger touch area. Padding grows the area and a matching
   negative margin keeps the layout exactly as it was. */
@media (pointer: coarse) {
  .skpa_card__more { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
  .skpa_react__main { min-height: 32px; padding: 6px var(--sb-space-2); }
  .skpa_comment__name { display: inline-block; padding: 6px 0; margin: -6px 0; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  .skpa_check { min-height: 44px; }
}

/* "Page not found" (templates/not_found.php, 12 Oct 2026): a way on instead of a dead end. */
.skpa_notfound { max-width: 44rem; margin: var(--sb-space-6) auto; padding: var(--sb-space-8) var(--sb-space-6); text-align: center; }
.skpa_notfound__code { margin: 0; font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: 0.04em; color: var(--sb-teal-strong); }
.skpa_notfound__title { margin: var(--sb-space-3) 0 var(--sb-space-2); font-size: var(--sb-text-xl); color: var(--sb-navy); }
.skpa_notfound__lead { max-width: 34rem; margin: 0 auto var(--sb-space-6); color: var(--sb-text-muted); }
.skpa_notfound__lead strong { color: var(--sb-text); }
.skpa_notfound__search { display: flex; gap: var(--sb-space-2); max-width: 30rem; margin: 0 auto var(--sb-space-6); }
.skpa_notfound__search input { flex: 1 1 auto; min-width: 0; }
.skpa_notfound__subtitle { margin: 0 0 var(--sb-space-3); font-size: var(--sb-text-md); color: var(--sb-text); }
.skpa_notfound__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sb-space-3); margin: 0 0 var(--sb-space-6); padding: 0; list-style: none; text-align: left; }
.skpa_notfound__link { display: block; height: 100%; padding: var(--sb-space-3) var(--sb-space-4); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); background: var(--sb-surface); color: var(--sb-text); text-decoration: none; }
.skpa_notfound__link:hover, .skpa_notfound__link:focus-visible { border-color: var(--sb-teal); box-shadow: var(--sb-shadow); }
.skpa_notfound__link-label { display: block; font-weight: 700; color: var(--sb-blue); }
.skpa_notfound__link-hint { display: block; margin-top: 0.15rem; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_notfound__help { margin: 0; }
@media (max-width: 30rem) {
  .skpa_notfound { padding: var(--sb-space-6) var(--sb-space-4); }
  .skpa_notfound__search { flex-direction: column; }
  .skpa_notfound__links { grid-template-columns: minmax(0, 1fr); }
}

/* Generate resume: template choice + editor (13 Oct 2026). The small "thumbnails" are drawn here
   (a header bar and three lines), no images. */
.skpa_resume-editor .skpa_card--wide { max-width: 52rem; }
.skpa_resume-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sb-space-3); }
.skpa_resume-template { position: relative; display: flex; flex-direction: column; gap: var(--sb-space-1); padding: var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); background: var(--sb-surface); cursor: pointer; }
.skpa_resume-template input { position: absolute; top: var(--sb-space-3); right: var(--sb-space-3); width: 1.1rem; height: 1.1rem; accent-color: var(--sb-teal-strong); }
.skpa_resume-template:has(input:checked) { border-color: var(--sb-teal-strong); box-shadow: 0 0 0 2px var(--sb-teal-strong); }
.skpa_resume-template:has(input:focus-visible) { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
.skpa_resume-template__name { font-weight: 700; }
.skpa_resume-template__desc { color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_resume-thumb { display: flex; flex-direction: column; gap: 6px; width: 5.5rem; height: 7rem; padding: 8px; margin-bottom: var(--sb-space-2); background: #fff; border: 1px solid #c8ced6; border-radius: 3px; }
.skpa_resume-thumb span { display: block; height: 4px; background: #9aa5b1; border-radius: 2px; }
.skpa_resume-thumb span:first-child { height: 8px; width: 70%; background: #1f2933; }
.skpa_resume-thumb span:nth-child(3) { width: 85%; }
.skpa_resume-thumb span:last-child { width: 60%; }
.skpa_resume-thumb--classic { outline: 2px solid #1f2933; outline-offset: -5px; }
.skpa_resume-thumb--classic span:nth-child(2) { height: 14px; background: transparent; border: 1px solid #1f2933; border-radius: 0; }
.skpa_resume-thumb--modern { padding-top: 0; }
.skpa_resume-thumb--modern span:first-child { height: 22px; width: auto; margin: 0 -8px 2px; background: #06837b; border-radius: 2px 2px 0 0; }
.skpa_resume-thumb--modern span:nth-child(2) { background: #06837b; width: 45%; }
.skpa_resume-thumb--simple span:nth-child(2) { height: 1px; background: #1f2933; }
.skpa_resume-section { margin: 0 0 var(--sb-space-4); padding: var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); background: var(--sb-surface); min-width: 0; }
.skpa_resume-section__legend { font-weight: 700; padding: 0 var(--sb-space-1); }
.skpa_resume-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sb-space-2) var(--sb-space-4); }
.skpa_resume-section__title { flex: 1 1 14rem; margin-bottom: 0; }
.skpa_resume-section__show { margin-bottom: 0.4rem; }
.skpa_resume-section__move { display: flex; gap: var(--sb-space-2); margin-bottom: 0.3rem; }
.skpa_resume-section > .skpa_field, .skpa_resume-section > .skpa_resume-item, .skpa_resume-section > .skpa_muted { margin-top: var(--sb-space-3); }
.skpa_resume-section.is-hidden > :not(input):not(legend):not(.skpa_resume-section__head) { opacity: 0.45; }
.skpa_resume-item { padding: var(--sb-space-3) 0 0; border-top: 1px dashed var(--sb-border); }
.skpa_resume-item.is-hidden .skpa_resume-item__fields { opacity: 0.45; }
.skpa_resume-item__show { margin-bottom: var(--sb-space-2); }
.skpa_resume-actions__reset { margin: var(--sb-space-4) 0 0; }
.skpa_resume-actions__reset .skpa_link-btn { padding: 0; border: 0; background: none; color: var(--sb-blue); text-decoration: underline; font: inherit; cursor: pointer; }
@media (min-width: 40rem) {
  .skpa_resume-item__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skpa_resume-item__wide { grid-column: 1 / -1; }
}

/* A short "good to know" note (owner, 14 Oct 2026: demo videos and job applications) - a soft
   box, quieter than .skpa_notice, which is for "something just happened". */
.skpa_note { margin: var(--sb-space-3) 0; padding: var(--sb-space-2) var(--sb-space-3); font-size: var(--sb-text-sm); color: var(--sb-navy); background: var(--sb-bg); border-left: 3px solid var(--sb-teal-strong); border-radius: var(--sb-radius-sm); }

/* "Fill my profile from my resume" review screen (onboarding_resume_review.php, 14 Oct 2026). */
.skpa_autofill__field { padding: var(--sb-space-3) 0; border-bottom: 1px solid var(--sb-border); }
.skpa_autofill__field:last-child { border-bottom: 0; }
.skpa_autofill__field input[type="text"], .skpa_autofill__field input[type="tel"], .skpa_autofill__field input[type="date"], .skpa_autofill__field select, .skpa_autofill__field textarea { margin-top: var(--sb-space-1); }
.skpa_autofill__label { margin: 0; font-weight: 600; color: var(--sb-navy); }
.skpa_autofill__now { margin: var(--sb-space-1) 0 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_autofill__guess { color: #7a4b00; }
.skpa_autofill__needs { margin: 0 0 var(--sb-space-2, 8px); padding: 8px 12px; border-left: 3px solid #b45309; background: #fff7ed; color: #7a4b00; font-size: 0.9rem; }
.skpa_autofill__row { padding: var(--sb-space-3) 0; border-bottom: 1px solid var(--sb-border); }
.skpa_autofill__row:last-child { border-bottom: 0; }
.skpa_resume-fill { margin: var(--sb-space-3) 0 0; }

/* Admin "Launch numbers" (owner, 15 Oct 2026) - its charts are the shared _bar_chart.php. */
.skpa_launch-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin-top: var(--sb-space-3); }
.skpa_launch-filter .skpa_btn { min-height: 2.75rem; display: inline-flex; align-items: center; }
.skpa_stat__change, .skpa_stat__split { margin: var(--sb-space-1) 0 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.skpa_launch-charts { display: grid; gap: var(--sb-space-4); }
/* One chart per row: the shared chart is drawn 640 wide, and three side by side would shrink its labels too far. */
.skpa_funnel-grid { display: grid; gap: var(--sb-space-5, 1.5rem); margin-top: var(--sb-space-3); }
@media (min-width: 48rem) { .skpa_funnel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skpa_funnel__title { margin: 0 0 var(--sb-space-2); font-size: var(--sb-text-base, 1rem); color: var(--sb-navy); }
.skpa_funnel__step { margin-bottom: var(--sb-space-3); }
.skpa_funnel__label { display: flex; justify-content: space-between; gap: var(--sb-space-2); margin: 0 0 var(--sb-space-1); font-size: var(--sb-text-sm); }
.skpa_funnel__bar { display: block; width: 100%; height: 0.6rem; border: 0; border-radius: 999px; background: var(--sb-bg); overflow: hidden; -webkit-appearance: none; appearance: none; }
.skpa_funnel__bar::-webkit-progress-bar { background: var(--sb-bg); border-radius: 999px; }
.skpa_funnel__bar::-webkit-progress-value { background: var(--sb-teal-strong); border-radius: 999px; }
.skpa_funnel__bar::-moz-progress-bar { background: var(--sb-teal-strong); border-radius: 999px; }

/* Share a job on WhatsApp in one tap (owner, 15 Oct 2026). WhatsApp's dark green: white on the bright #25D366 is under 2:1. */
.skpa_share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); margin: var(--sb-space-3) 0; }
/* Both buttons the same height and lined up (owner, 15 Oct 2026: they looked misaligned). */
.skpa_share-row > .skpa_btn, .skpa_share-row > .skpa_share > summary { display: inline-flex; align-items: center; gap: var(--sb-space-2); min-height: 2.5rem; margin: 0; padding-block: 0; line-height: 1.2; }
.skpa_share-row > .skpa_share { margin: 0; }
.skpa_btn--whatsapp { display: inline-flex; align-items: center; gap: var(--sb-space-2); color: #fff; background: #075e54; border-color: #075e54; }
.skpa_btn--whatsapp:hover, .skpa_btn--whatsapp:focus-visible { color: #fff; background: #054d45; border-color: #054d45; }
@media (max-width: 47.99rem) { .skpa_share-row > .skpa_btn, .skpa_share-row > .skpa_share > summary { min-height: 2.75rem; } }

/* Phone and touch sizes (owner, 15 Oct 2026: "our portal must be 10/10 in responsiveness"; 90% of
   teachers use a phone). On a narrow screen or any touch screen, every button, menu row, tab and
   field is at least 44px tall - the size a thumb hits without missing. Only height grows here
   (padding and min-height), never display, so the phone-only / wide-only switches keep working. */
@media (max-width: 47.99rem), (pointer: coarse) {
  /* Padding alone makes the 44px (owner, 19 Oct 2026: "the space under the button text is bigger than
     above it"): a link button is inline-block, and when min-height had to add the last few pixels
     they all went below the text. 0.75rem + one 14px line (1.3) + borders = 44px; small text 0.8rem. */
  .skpa_btn { min-height: 44px; padding-block: 0.75rem; }
  .skpa_btn--sm { padding-block: 0.8rem; }
  .skpa_editor-btn { min-width: 44px; min-height: 44px; }
  .skpa_more__toggle, .skpa_comment__meta .skpa_more__toggle { min-width: 44px; height: 44px; }
  .skpa_chat-tabs__item { display: inline-flex; align-items: center; min-height: 44px; }
  .skpa_account-nav__link, .skpa_account-grid .skpa_account-nav__link { display: flex; align-items: center; min-height: 44px; }
  .skpa_account-grid .skpa_account-nav__title { font-size: var(--sb-text-sm); }
  .skpa_rail-list__link, .skpa_explore__link { align-items: center; min-height: 44px; }
  select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) { min-height: 44px; }
  .skpa_brand, .skpa_icon-btn, .skpa_me__item { min-height: 44px; }
  .skpa_icon-btn { min-width: 44px; }
  .skpa_pill-tabs__item, .skpa_pipeline-tabs .skpa_pill-tabs__item { display: inline-flex; align-items: center; min-height: 44px; }
  .skpa_admin-nav__link { min-height: 44px; }
  summary:not([class]) { padding-block: 0.75rem; }
  /* Text links (names, job titles, "Back to ...", "See all"): an invisible layer around the link
     makes the tap area about 35px tall (WCAG asks 24) while the text and the layout stay exactly as
     they are. Not taller: in a list a job title and the institute under it are one line apart, and
     a bigger layer took taps meant for the line above (measured, 16 Oct 2026). */
  a:not([class]), a.skpa_link, a.skpa_badge, .skpa_rail-card__seeall, .skpa_rail-card__footer { position: relative; }
  a:not([class])::after, a.skpa_link::after, a.skpa_badge::after, .skpa_rail-card__seeall::after, .skpa_rail-card__footer::after { content: ""; position: absolute; inset: -8px -4px; }
}

/* "Working..." on a pressed button while its form is sent (app.js, owner 19 Oct 2026): a small
   spinner before the label, the button dimmed and not pressable again. */
.skpa_btn.is-busy, button.is-busy { position: relative; opacity: .75; cursor: progress; pointer-events: none; }
.skpa_btn.is-busy::before, button.is-busy::before {
  content: ''; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -0.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: skpa_spin .7s linear infinite;
}
@keyframes skpa_spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skpa_btn.is-busy::before, button.is-busy::before { animation-duration: 2s; } }
/* Share menu apps (owner, 19 Oct 2026: all social apps): "X" alone was a narrow tap - every app button at least 44px wide. */
.skpa_share__apps .skpa_btn { min-width: 44px; text-align: center; }

/* Phones: button rows line up (owner, 19 Oct 2026: "button spacing not aligned" - buttons of different
   widths wrapped raggedly). Equal width, two to a row, an odd last one across the whole row; a "..." menu
   keeps its own size. The account/manage links become a tidy two-column grid. */
@media (max-width: 47.99rem) {
  .skpa_profile-actions, .skpa_form-actions, .skpa_code-actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); }
  .skpa_profile-actions > .skpa_btn, .skpa_profile-actions > form,
  .skpa_form-actions > .skpa_btn, .skpa_form-actions > form,
  .skpa_code-actions > .skpa_btn, .skpa_code-actions > form { flex: 1 1 calc(50% - var(--sb-space-2)); min-width: 0; }
  .skpa_profile-actions > form > .skpa_btn, .skpa_form-actions > form > .skpa_btn, .skpa_code-actions > form > .skpa_btn { width: 100%; }
  .skpa_profile-actions .skpa_btn, .skpa_form-actions .skpa_btn, .skpa_code-actions .skpa_btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px;
  }
  .skpa_profile-actions > .skpa_more, .skpa_form-actions > .skpa_more { flex: 0 0 auto; }
  .skpa_account-nav__list, .skpa_account-grid .skpa_account-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sb-space-1); }
  .skpa_account-nav__link, .skpa_account-grid .skpa_account-nav__link { padding: var(--sb-space-2) var(--sb-space-3); border: 1px solid var(--sb-border); }
  .skpa_account-nav__link--active { border-color: var(--sb-teal-strong); }
}

/* Crop before upload (image-crop.js, owner 19 Oct 2026): the picture behind a frame of the saved
   shape, dragged and zoomed; a round guide for logos and profile photos. Phone first. */
.skpa_crop { width: min(600px, calc(100vw - 16px)); max-height: calc(100vh - 16px); padding: var(--sb-space-4); border: 0; border-radius: var(--sb-radius); background: var(--sb-surface); color: var(--sb-text); box-shadow: var(--sb-shadow); overflow: auto; }
.skpa_crop::backdrop { background: rgba(2, 20, 30, 0.75); }
.skpa_crop__title { margin: 0 0 var(--sb-space-1); font-size: 1.15rem; color: var(--sb-navy); }
.skpa_crop__hint { margin: 0 0 var(--sb-space-3); color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_crop__stage { position: relative; margin: 0 auto; max-width: 100%; overflow: hidden; border-radius: var(--sb-radius-sm); background: #20303a; cursor: grab; touch-action: none; user-select: none; }
.skpa_crop__stage:active { cursor: grabbing; }
.skpa_crop__stage:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
.skpa_crop__canvas { display: block; width: 100%; height: 100%; }
.skpa_crop__frame { position: absolute; inset: 0; pointer-events: none; border: 2px solid rgba(255, 255, 255, .9); border-radius: var(--sb-radius-sm); }
.skpa_crop__frame--round { border: 0; border-radius: 0; background: radial-gradient(circle closest-side, transparent 98%, rgba(2, 20, 30, .55) 100%); }
.skpa_crop__frame--round::after { content: ''; position: absolute; inset: 0; margin: auto; aspect-ratio: 1; height: 100%; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; }
.skpa_crop__zoom { display: flex; align-items: center; gap: var(--sb-space-3); margin: var(--sb-space-3) 0; font-weight: 600; }
.skpa_crop__zoom input { flex: 1; min-height: 44px; accent-color: var(--sb-teal-strong); }
.skpa_crop__actions { display: flex; gap: var(--sb-space-2); justify-content: flex-end; }
.skpa_crop__actions .skpa_btn { min-height: 44px; flex: 1 1 0; }
@media (min-width: 48rem) { .skpa_crop__actions .skpa_btn { flex: 0 0 auto; } }
.skpa_crop-preview { display: flex; align-items: center; gap: var(--sb-space-3); margin-top: var(--sb-space-2); }
.skpa_crop-preview__img { display: block; max-width: 100%; height: auto; max-height: 120px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_crop-preview__img--round { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
/* "Parent / public" next to a parent's name on a comment (owner, 19 Oct 2026: parents may comment on public posts). */
.skpa_comment__kind { margin-left: var(--sb-space-1); padding: 0 .4rem; border-radius: 999px; background: var(--sb-bg); color: var(--sb-text-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
/* "Getting your photo ready..." while image-shrink.js makes a phone photo smaller (owner, 19 Oct 2026). */
.skpa_shrink-note { margin: var(--sb-space-1) 0 0; font-size: var(--sb-text-sm); }
/* About SkillBonds (/about, owner 19 Oct 2026) - one page: hero, why, who, how, trust, questions, contact form. Phone first. */
.skpa_about { max-width: 60rem; margin: 0 auto; padding: var(--sb-space-6) 0 var(--sb-space-8); }
.skpa_about__hero { padding: var(--sb-space-6) 0 var(--sb-space-4); }
.skpa_about__eyebrow { margin: 0 0 var(--sb-space-2); color: var(--sb-teal-strong); font-weight: 700; font-size: var(--sb-text-sm); letter-spacing: .06em; text-transform: uppercase; }
.skpa_about__title { margin: 0 0 var(--sb-space-3); font-size: clamp(1.75rem, 5vw, 2.6rem); line-height: 1.15; color: var(--sb-navy); }
.skpa_about__lead { max-width: 44rem; margin: 0 0 var(--sb-space-6); font-size: var(--sb-text-lg); line-height: 1.55; color: var(--sb-text-muted); }
.skpa_about__actions { display: flex; flex-wrap: wrap; gap: var(--sb-space-3); margin: 0; }
.skpa_about__actions .skpa_btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.skpa_about__section { padding: var(--sb-space-8) 0 0; scroll-margin-top: 4.5rem; }
.skpa_about__heading { margin: 0 0 var(--sb-space-4); font-size: var(--sb-text-xl); color: var(--sb-navy); }
.skpa_about__prose { max-width: 44rem; }
.skpa_about__prose p { margin: 0 0 var(--sb-space-3); line-height: 1.6; }
.skpa_about__mission { padding: var(--sb-space-3) var(--sb-space-4); border-left: 4px solid var(--sb-teal); border-radius: var(--sb-radius-sm); background: var(--sb-surface); }
.skpa_about__cards { display: grid; gap: var(--sb-space-4); }
.skpa_about__card { margin: 0; }
.skpa_about__card-title { margin: 0 0 var(--sb-space-2); font-size: 1rem; color: var(--sb-navy); }
.skpa_about__list { margin: 0; padding-left: 1.1rem; }
.skpa_about__list li { margin-bottom: var(--sb-space-2); line-height: 1.5; }
.skpa_about__steps { display: grid; gap: var(--sb-space-4); margin: 0; padding: 0; list-style: none; }
.skpa_about__step { display: flex; gap: var(--sb-space-3); align-items: flex-start; }
.skpa_about__step p { margin: 0; line-height: 1.5; color: var(--sb-text-muted); }
.skpa_about__step-num { flex: 0 0 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sb-teal-strong); color: #fff; font-weight: 700; }
.skpa_about__trust { display: grid; gap: var(--sb-space-3); margin: 0; padding: 0; list-style: none; }
.skpa_about__trust li { padding: var(--sb-space-3) var(--sb-space-4); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); background: var(--sb-surface); line-height: 1.5; }
.skpa_about__faq details { border-bottom: 1px solid var(--sb-border); }
/* The questions open and close (owner, 19 Oct 2026: "the open/close icon is missing"): display:flex hides
   the browser's own triangle, so a chevron on the right turns when open. */
.skpa_about__faq summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3); padding: var(--sb-space-2) 0; font-weight: 600; color: var(--sb-navy); cursor: pointer; list-style: none; }
.skpa_about__faq summary::-webkit-details-marker { display: none; }
.skpa_about__faq summary::after { content: ''; flex: 0 0 auto; width: .55rem; height: .55rem; margin-right: .35rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .2s ease; }
.skpa_about__faq details[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.skpa_about__faq summary:hover { color: var(--sb-teal-strong); }
@media (prefers-reduced-motion: reduce) { .skpa_about__faq summary::after { transition: none; } }
.skpa_about__faq details p { margin: 0 0 var(--sb-space-3); line-height: 1.6; }
.skpa_about__form-card { max-width: 36rem; margin-top: var(--sb-space-3); }
.skpa_about__required-note { margin-top: 0; }
.skpa_about__form-card select, .skpa_about__form-card input, .skpa_about__form-card textarea { min-height: 44px; }
.skpa_about__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 48rem) {
  .skpa_about__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skpa_about__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skpa_about__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Privacy Policy, Terms of Use, Community Guidelines (owner, 19 Oct 2026) - a readable column. */
.skpa_legal { max-width: 46rem; margin: 0 auto; padding: var(--sb-space-6) 0 var(--sb-space-8); line-height: 1.65; }
.skpa_legal__title { margin: 0 0 var(--sb-space-1); font-size: clamp(1.6rem, 4.5vw, 2.2rem); color: var(--sb-navy); }
.skpa_legal__updated { margin: 0 0 var(--sb-space-4); color: var(--sb-text-muted); font-size: var(--sb-text-sm); }
.skpa_legal h2 { margin: var(--sb-space-8) 0 var(--sb-space-2); font-size: 1.15rem; color: var(--sb-navy); }
.skpa_legal ul { padding-left: 1.2rem; }
.skpa_legal li { margin-bottom: var(--sb-space-2); }
.skpa_legal__officer { padding: var(--sb-space-3) var(--sb-space-4); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); background: var(--sb-surface); }
.skpa_legal__links { display: flex; flex-wrap: wrap; gap: var(--sb-space-2) var(--sb-space-4); margin-top: var(--sb-space-8); padding-top: var(--sb-space-4); border-top: 1px solid var(--sb-border); }
.skpa_legal__links a, .skpa_legal__links span { display: inline-flex; align-items: center; min-height: 44px; }
.skpa_legal__links span { color: var(--sb-text-muted); }
/* Site footer (every page): About, Contact and the policies. Room at the bottom for the messaging box on computers. */
.skpa_footer { margin-top: var(--sb-space-8); padding: var(--sb-space-6) var(--sb-space-4) var(--sb-space-8); border-top: 1px solid var(--sb-border); background: var(--sb-surface); text-align: center; font-size: var(--sb-text-sm); }
.skpa_footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sb-space-4); }
.skpa_footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-text-muted); text-decoration: none; }
.skpa_footer__links a:hover, .skpa_footer__links a:focus-visible { color: var(--sb-blue); text-decoration: underline; }
.skpa_footer__copy { margin: var(--sb-space-2) 0 0; color: var(--sb-text-muted); }
.skpa_footer__copy a { color: var(--sb-blue); font-weight: 600; }
@media (min-width: 48rem) { .skpa_footer { padding-bottom: 4rem; } }
/* The Messages page fills the screen like a chat app - no footer under it. */
body:has(.skpa_chat) .skpa_footer { display: none; }
/* "Install app" (owner, 19 Oct 2026: very prominent in the main menu). A teal pill first in the menu row;
   in the phone menu a full-width row at the top. Hidden by app.js once the app runs from its icon. */
.skpa_install-cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px; padding: 0 .9rem; border: 1.5px solid var(--sb-teal-strong); border-radius: 999px; background: #e7f6f5; color: var(--sb-teal-strong); font: inherit; font-weight: 700; font-size: var(--sb-text-sm); white-space: nowrap; cursor: pointer; }
.skpa_install-cta:hover, .skpa_install-cta:focus-visible { background: var(--sb-teal-strong); color: #fff; }
.skpa_install-cta[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .skpa_header-actions .skpa_install-cta { width: 100%; min-height: 44px; margin-bottom: var(--sb-space-2); font-size: var(--sb-text-md); }
}
/* Phones: the slim banner under the header. */
.skpa_install-banner { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-2) var(--sb-space-4); border-bottom: 1px solid var(--sb-border); background: #e7f6f5; }
.skpa_install-banner[hidden] { display: none; }
.skpa_install-banner img { flex: 0 0 auto; border-radius: 8px; }
.skpa_install-banner__text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--sb-text-sm); line-height: 1.35; color: var(--sb-navy); }
.skpa_install-banner__text strong, .skpa_install-banner__text span { display: block; }
.skpa_install-banner__text span { color: var(--sb-text-muted); }
.skpa_install-banner .skpa_btn { flex: 0 0 auto; min-height: 36px; }
.skpa_install-banner__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sb-text-muted); cursor: pointer; }
.skpa_install-banner__close:hover { background: rgba(2, 61, 91, .08); color: var(--sb-navy); }
@media (min-width: 48rem) { .skpa_install-banner { display: none !important; } }
/* The how-to for browsers without an install prompt (iPhone, in-app browsers). */
.skpa_install-help { width: min(26rem, calc(100vw - 2rem)); padding: var(--sb-space-6); border: 0; border-radius: var(--sb-radius); box-shadow: 0 10px 40px rgba(2, 61, 91, .25); color: var(--sb-text); }
.skpa_install-help::backdrop { background: rgba(2, 20, 30, .55); }
.skpa_install-help__title { margin: 0 0 var(--sb-space-2); font-size: 1.15rem; color: var(--sb-navy); }
.skpa_install-help__steps { margin: var(--sb-space-4) 0; padding-left: 1.3rem; line-height: 1.55; }
.skpa_install-help__steps li { margin-bottom: var(--sb-space-2); }
.skpa_install-help .skpa_btn { width: 100%; min-height: 44px; }
/* ---------------------------------------------------------------- phone bottom bar + slide-in menu
   (owner, 19 Oct 2026). The bar: fixed at the bottom on phones, signed in, not on the Messages chat,
   stepping aside while the keyboard is up. The menu panel: the page's section menu sliding in from the
   left over a dimmed page (app.js adds .skpa_has-drawer / .skpa_drawer-open). */
.skpa_tabbar { display: none; }
@media (max-width: 47.99rem) {
  .skpa_tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; display: flex; padding: 0 var(--sb-space-1) env(safe-area-inset-bottom); background: var(--sb-surface); border-top: 1px solid var(--sb-border); box-shadow: 0 -2px 12px rgba(2, 61, 91, .08); transition: transform .2s ease; }
  .skpa_tabbar__item { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border: 0; background: none; color: var(--sb-text-muted); font: inherit; font-size: .6875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
  .skpa_tabbar__item[hidden] { display: none; }
  .skpa_tabbar__item:hover, .skpa_tabbar__item:focus-visible { color: var(--sb-navy); }
  .skpa_tabbar__item[aria-current="page"], .skpa_tabbar__item[aria-expanded="true"] { color: var(--sb-teal-strong); }
  .skpa_tabbar__item[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sb-teal-strong); }
  .skpa_tabbar__icon { position: relative; display: inline-flex; }
  .skpa_tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skpa_tabbar__badge { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sb-danger); color: #fff; font-size: .6875rem; line-height: 18px; text-align: center; }
  html.skpa_typing .skpa_tabbar { transform: translateY(110%); }
  body:has(.skpa_tabbar) { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
  body:has(.skpa_tabbar) .skpa_push-invite { bottom: calc(57px + env(safe-area-inset-bottom) + var(--sb-space-3)); }
  body:has(.skpa_chat) .skpa_tabbar { display: none; }
  body:has(.skpa_chat):has(.skpa_tabbar) { padding-bottom: 0; }

  /* The slide-in panel. */
  html.skpa_has-drawer .skpa_drawer { position: fixed; top: 0 !important; bottom: 0; left: 0; z-index: 1001; width: min(20rem, 86vw); max-width: none; margin: 0; padding: 0 var(--sb-space-4) calc(var(--sb-space-6) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--sb-bg); border: 0; border-radius: 0 var(--sb-radius) var(--sb-radius) 0; box-shadow: 4px 0 24px rgba(2, 20, 30, .25); visibility: hidden; transform: translateX(-105%); transition: transform .25s ease, visibility 0s linear .25s; }
  html.skpa_drawer-open .skpa_drawer { visibility: visible; transform: none; transition: transform .25s ease; }
  html.skpa_drawer-open { overflow: hidden; }
  .skpa_drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-2); margin: 0 calc(-1 * var(--sb-space-4)) var(--sb-space-3); padding: var(--sb-space-2) var(--sb-space-2) var(--sb-space-2) var(--sb-space-4); background: var(--sb-bg); border-bottom: 1px solid var(--sb-border); }
  .skpa_drawer__title { margin: 0; font-weight: 700; color: var(--sb-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skpa_drawer__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sb-navy); cursor: pointer; }
  .skpa_drawer__close:hover { background: rgba(2, 61, 91, .08); }
  html.skpa_has-drawer .skpa_account > .skpa_drawer .skpa_account-nav__list { grid-template-columns: 1fr; }
  .skpa_drawer-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 20, 30, .5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  html.skpa_drawer-open .skpa_drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease; }
}
.skpa_drawer__head { display: none; }
@media (max-width: 47.99rem) { html.skpa_has-drawer .skpa_drawer__head { display: flex; } }
@media (prefers-reduced-motion: reduce) { .skpa_tabbar, html.skpa_has-drawer .skpa_drawer, .skpa_drawer-backdrop { transition: none !important; } }
/* The bar's "+ Post" stands out a little; on phones the header shows Messages instead of the bell
   (the bell is in the bar); the sections button opens the page's slide-in menu (owner, 19 Oct 2026). */
.skpa_header-msg { display: none !important; }
.skpa_drawer-chip { display: none; }
@media (max-width: 47.99rem) {
  .skpa_tabbar__item--post { color: var(--sb-teal-strong); }
  .skpa_header-msg { display: inline-flex !important; }
  .skpa_header-quick .skpa_header-bell { display: none; }
  html.skpa_has-drawer .skpa_drawer-chip { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sb-space-2); width: calc(100% + 2 * var(--sb-space-4)); min-height: 44px; margin: calc(-1 * var(--sb-space-4)) calc(-1 * var(--sb-space-4)) var(--sb-space-3); padding: 0 var(--sb-space-4); border: 0; border-bottom: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-navy); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: top .2s ease, background-color .2s ease; }
  html.skpa_has-drawer.skpa_header-pinned .skpa_drawer-chip { top: var(--sb-header-h, 4.5rem); }
  .skpa_drawer-chip span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skpa_drawer-chip:hover, .skpa_drawer-chip:focus-visible { background: #e7f6f5; }
}
/* New post, full screen (/posts/new). */
.skpa_post-new { max-width: 40rem; margin: 0 auto; padding: var(--sb-space-4) 0 var(--sb-space-6); }
.skpa_post-new__head { display: flex; align-items: center; gap: var(--sb-space-2); margin-bottom: var(--sb-space-3); }
.skpa_post-new__back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -.6rem; border-radius: 50%; color: var(--sb-navy); }
.skpa_post-new__back:hover { background: rgba(2, 61, 91, .08); }
.skpa_post-new__title { margin: 0; font-size: var(--sb-text-xl); color: var(--sb-navy); }
.skpa_post-new textarea { min-height: 9rem; }
/* "Start a post" on the feed and its popup (owner, 19 Oct 2026, LinkedIn's way): the card opens the
   post box in a <dialog> - centred on computers, full screen on phones. */
.skpa_start-post { padding: var(--sb-space-3) var(--sb-space-4) var(--sb-space-1); }
.skpa_start-post__row { display: flex; align-items: center; gap: var(--sb-space-3); }
.skpa_start-post__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #e7f6f5; color: var(--sb-teal-strong); font-weight: 700; }
.skpa_start-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.skpa_start-post__box { flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; padding: 0 var(--sb-space-4); border: 1px solid #8c9ba5; border-radius: 999px; color: var(--sb-text); font-weight: 600; text-decoration: none; }
.skpa_start-post__box:hover, .skpa_start-post__box:focus-visible { background: rgba(2, 61, 91, .06); }
.skpa_start-post__actions { display: flex; justify-content: space-around; margin-top: var(--sb-space-1); }
.skpa_start-post__action { display: inline-flex; align-items: center; gap: var(--sb-space-2); min-height: 44px; padding: 0 var(--sb-space-3); border-radius: var(--sb-radius-sm); color: var(--sb-text-muted); font-weight: 600; text-decoration: none; }
.skpa_start-post__action:hover, .skpa_start-post__action:focus-visible { background: rgba(2, 61, 91, .06); color: var(--sb-text); }
.skpa_compose-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); padding: 0; border: 0; border-radius: var(--sb-radius); background: var(--sb-surface); color: var(--sb-text); box-shadow: 0 10px 40px rgba(2, 61, 91, .25); overflow: auto; overscroll-behavior: contain; }
.skpa_compose-dialog::backdrop { background: rgba(2, 20, 30, .55); }
.skpa_compose-dialog__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-2); padding: var(--sb-space-2) var(--sb-space-2) var(--sb-space-2) var(--sb-space-6); background: var(--sb-surface); border-bottom: 1px solid var(--sb-border); }
.skpa_compose-dialog__title { margin: 0; font-size: 1.15rem; color: var(--sb-navy); }
.skpa_compose-dialog__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sb-navy); cursor: pointer; }
.skpa_compose-dialog__close:hover { background: rgba(2, 61, 91, .08); }
.skpa_compose-dialog__body { padding: var(--sb-space-4) var(--sb-space-6) var(--sb-space-6); }
.skpa_compose-dialog textarea { min-height: 9rem; }
@media (max-width: 47.99rem) {
  .skpa_compose-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .skpa_compose-dialog__head { padding-left: var(--sb-space-4); }
  .skpa_compose-dialog__body { padding: var(--sb-space-4); }
}

/* Admin -> Handbook (templates/admin_handbook.php): the team handbook, rendered from portal/docs. */
.skpa_handbook { min-width: 0; }
.skpa_handbook p, .skpa_handbook li { line-height: 1.6; }
.skpa_handbook ul, .skpa_handbook ol { padding-left: 1.25rem; margin: 0 0 var(--sb-space-3); }
.skpa_handbook li + li { margin-top: var(--sb-space-1); }
.skpa_handbook code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .8125rem; background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: 4px; padding: 0 .25rem; overflow-wrap: anywhere; }
.skpa_handbook__part { font-size: var(--sb-text-xl); color: var(--sb-navy); margin: var(--sb-space-8) 0 var(--sb-space-3); padding-bottom: var(--sb-space-2); border-bottom: 2px solid var(--sb-teal); scroll-margin-top: 4.5rem; }
.skpa_handbook__section { scroll-margin-top: 4.5rem; }
.skpa_handbook__title { font-size: var(--sb-text-lg); color: var(--sb-teal-strong); margin: 0 0 var(--sb-space-3); }
.skpa_handbook__sub { font-size: 1rem; color: var(--sb-navy); margin: var(--sb-space-6) 0 var(--sb-space-2); scroll-margin-top: 4.5rem; }
.skpa_handbook__note { background: #e7f6f5; border-left: 4px solid var(--sb-teal-strong); border-radius: var(--sb-radius-sm); padding: var(--sb-space-3) var(--sb-space-4); }
.skpa_handbook__code { background: #f3f5f6; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: var(--sb-space-3); overflow-x: auto; margin: 0 0 var(--sb-space-3); font-size: .75rem; line-height: 1.45; }
.skpa_handbook__code code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.skpa_handbook .skpa_table-wrap { margin: 0 0 var(--sb-space-3); box-shadow: none; }
.skpa_handbook__table th, .skpa_handbook__table td { white-space: normal; vertical-align: top; min-width: 7rem; }
.skpa_handbook__table thead th { background: #e7f6f5; color: var(--sb-navy); }
.skpa_handbook__table--facts tbody th { background: var(--sb-bg); color: var(--sb-navy); width: 30%; }
.skpa_handbook__swatch { display: inline-block; vertical-align: -1px; margin-right: .3rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--sb-border); }
.skpa_handbook__toc-parts { display: grid; gap: var(--sb-space-4); }
@media (min-width: 48rem) { .skpa_handbook__toc-parts { grid-template-columns: 1fr 1fr; } }
.skpa_handbook__toc-part { font-weight: 700; margin: 0 0 var(--sb-space-1); }
.skpa_handbook__toc-part a { color: var(--sb-navy); text-decoration: none; }
.skpa_handbook__toc-list { margin: 0; }
.skpa_handbook__toc-list a { display: inline-block; padding: .35rem 0; }
.skpa_handbook__top { margin: var(--sb-space-4) 0 0; font-size: var(--sb-text-sm); }