/* Backend additions on top of the original static design (style.css). */

/* Form feedback */
.auth-error {
  margin-top: -4px;
  color: #d93025;
  font-size: 12.1px;
  line-height: 1.4;
}

.auth-alert {
  margin: 0 0 15.4px;
  padding: 11px 15.4px;
  border-radius: 8.8px;
  font-size: 13.2px;
}

.auth-alert--success {
  background: #e7f6ec;
  color: #1e7a3c;
}

/* Former buttons that are now real links */
a.auth-submit,
a.register-secondary {
  display: grid;
  place-items: center;
  text-decoration: none;
}

a.more-btn,
a.search-more-btn,
a.view-more {
  text-decoration: none;
  cursor: pointer;
}

a.journal-tab {
  display: inline-block;
  text-decoration: none;
}

a.profile-journal-link {
  text-decoration: none;
}

.profile-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38.5px;
  align-items: center;
  padding: 0 13.2px;
  border-radius: 5.5px;
  background: transparent;
  color: #20242d;
  font: 500 12.1px Poppins, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.profile-tabs a.active {
  background: #253754;
  color: #fff;
}

.profile-header-actions a {
  display: grid;
  width: 24.2px;
  height: 33px;
  place-items: center;
  color: #20242d;
  font-size: 18.7px;
}

.profile-sidebar form {
  display: flex;
  margin-top: auto;
}

.profile-sidebar form .profile-logout {
  width: 100%;
  margin-top: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.profile-journal-link,
.profile-journal-link:hover {
  color: #1769e0;
}

.content-nav a[aria-current="page"] {
  pointer-events: none;
}

/* Submission wizard, statuses, reviews */
.auth-alert--error { background: #fdecea; color: #b3261e; }

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6.6px;
  margin: 0 0 24.2px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.wizard-steps li { flex: 1 1 154px; }

.wizard-steps a,
.wizard-step-static {
  display: flex;
  align-items: center;
  gap: 8.8px;
  padding: 8.8px 11px;
  border-radius: 6.6px;
  background: #f1f3f6;
  color: #5b6472;
  font: 500 12.1px Poppins, sans-serif;
  text-decoration: none;
}

.wizard-steps li > * > span:first-child {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #d9dde4;
  color: #20242d;
  font-size: 12.1px;
}

.wizard-steps .is-current > * { background: #253754; color: #fff; }
.wizard-steps .is-current > * > span:first-child { background: #fff; color: #253754; }
.wizard-steps .is-done > * > span:first-child { background: #2d6da8; color: #fff; }

.wizard-actions {
  display: flex;
  align-items: center;
  gap: 13.2px;
  margin-top: 19.8px;
}

.wizard-actions .register-secondary,
.wizard-actions .profile-save { min-width: 132px; padding: 0 19.8px; }

.wizard-author {
  margin: 0 0 15.4px;
  padding: 15.4px;
  border: 1px solid #e6e9ee;
  border-radius: 8.8px;
}

.wizard-primary { display: flex; align-items: center; gap: 8.8px; margin-top: 11px; font-size: 12.1px; }

.wizard-summary { margin: 15.4px 0; font-size: 13.2px; }
.wizard-summary dt { margin-top: 11px; color: #5b6472; font-weight: 600; }
.wizard-summary dd { margin: 2.2px 0 0; white-space: pre-line; }

.wizard-delete { margin-top: 26.4px; }

.submissions-head { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; flex-wrap: wrap; }
.submissions-head .profile-save { text-decoration: none; display: inline-grid; place-items: center; padding: 0 17.6px; }

.profile-panel textarea {
  width: 100%;
  padding: 11px 13.2px;
  border: 1px solid #e1e5eb;
  border-radius: 5.5px;
  font: 13.2px Poppins, sans-serif;
}

.status-badge {
  display: inline-block;
  padding: 2.2px 8.8px;
  border-radius: 11px;
  background: #eef0f4;
  color: #394150;
  font-size: 12.1px;
  font-weight: 600;
}

.status-published, .status-completed, .status-accepted { background: #e7f6ec; color: #1e7a3c; }
.status-rejected, .status-declined { background: #fdecea; color: #b3261e; }
.status-revisions, .status-pending, .status-in_review { background: #fff4de; color: #8a5a00; }

.profile-notification-group.is-unread { border-left: 3.3px solid #2d6da8; padding-left: 11px; }

.profile-bell { position: relative; }
.profile-bell-count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16.5px;
  padding: 0 4.4px;
  border-radius: 8.8px;
  background: #d93025;
  color: #fff;
  font-size: 12.1px;
  line-height: 16.5px;
  text-align: center;
}

/* Wizard steps stay on one row on phones: only the current step shows its label. */
@media (max-width: 575.98px) {
  .wizard-steps { flex-wrap: nowrap; gap: 4.4px; }
  .wizard-steps li { flex: 0 0 auto; }
  .wizard-steps li:not(.is-current) > * { padding: 8.8px; font-size: 0; gap: 0; }
  .wizard-steps li:not(.is-current) > * > span:first-child { font-size: 12.1px; }
  .wizard-steps .is-current { flex: 1 1 auto; }
}

.profile-panel > p:not(.profile-hint):not(.profile-privacy):not(.profile-notification-intro):not(.profile-password-intro) { font-size: 13.2px; line-height: 1.5; }

/* Pages without a breadcrumb need breathing room under the header. */
.search-main,
.announcement-section,
.contact-section {
  padding-top: 44px;
}

.search-main { padding-bottom: 44px; }

@media (max-width: 767.98px) {
  .search-main,
  .announcement-section,
  .contact-section { padding-top: 26.4px; }
}

/* ---------- File input with drop zone and preview ---------- */
.file-drop { margin-bottom: 24.2px; }

/* Visually hidden but still focusable/submittable (the zone below is its label). */
.file-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.file-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.4px;
  padding: 28.6px 17.6px;
  border: 2.2px dashed #c9d3e0;
  border-radius: 13.2px;
  background: #f8fafc;
  color: #394150;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.file-drop__zone i { color: #2d6da8; font-size: 33px; line-height: 1; }
.file-drop__title { font: 500 14.3px Poppins, sans-serif; }
.file-drop__title u { color: #2d6da8; }
.file-drop__hint { color: #5b6472; font-size: 12.1px; }

.file-drop__zone:hover,
.file-drop.is-dragover .file-drop__zone { border-color: #2d6da8; background: #eef5fc; }
.file-drop__input:focus-visible + .file-drop__zone { outline: 3.3px solid rgba(45, 109, 168, .4); outline-offset: 2.2px; }

.file-drop.has-file .file-drop__zone { display: none; }
.file-drop.has-error .file-drop__zone { border-color: #d93025; background: #fdf4f3; }

.file-drop__selected {
  display: flex;
  align-items: center;
  gap: 15.4px;
  padding: 13.2px;
  border: 1px solid #dfe5ee;
  border-radius: 13.2px;
  background: #fff;
}

.file-drop__selected[hidden] { display: none; }

.file-drop__thumb {
  display: grid;
  flex: 0 0 70.4px;
  width: 70.4px;
  height: 70.4px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: #eef2f7;
  color: #2d6da8;
  font: 700 12.1px Poppins, sans-serif;
  text-transform: uppercase;
}

.file-drop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-drop__thumb i { font-size: 28.6px; line-height: 1; }
.file-drop__thumb small { display: block; margin-top: 2.2px; font-size: 12.1px; }

.file-drop__meta { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; font-size: 13.2px; }
.file-drop__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-drop__meta span { color: #5b6472; }
.file-drop__note { font-size: 12.1px; }

.file-drop__actions { display: flex; flex: 0 0 auto; gap: 8.8px; }

.file-drop__btn {
  min-height: 37.4px;
  padding: 0 13.2px;
  border: 1px solid #d9dfe8;
  border-radius: 8.8px;
  background: #fff;
  color: #253754;
  font: 500 13.2px Poppins, sans-serif;
  cursor: pointer;
}

.file-drop__btn:hover { background: #f1f4f8; }
.file-drop__btn--danger { color: #b3261e; }
.file-drop__btn--danger:hover { background: #fdecea; }

.file-drop__preview {
  margin-top: 13.2px;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 13.2px;
  background: #eef2f7;
}

.file-drop__preview[hidden] { display: none; }
.file-drop__preview iframe,
.file-drop__preview object,
.file-drop__preview img { display: block; width: 100%; height: 462px; border: 0; }
.file-drop__preview img { object-fit: contain; }

.file-drop__error { min-height: 0; margin-top: 8.8px; color: #b3261e; font-size: 13.2px; }
.file-drop__error:empty { display: none; }

@media (max-width: 575.98px) {
  .file-drop__selected { flex-wrap: wrap; }
  .file-drop__actions { width: 100%; }
  .file-drop__btn { flex: 1 1 0; min-height: 44px; }
  .file-drop__preview iframe,
  .file-drop__preview object { height: 352px; }
}

/* Wizard footer: both buttons share one height and baseline. */
.wizard-actions { justify-content: space-between; }

.wizard-actions .register-secondary,
.wizard-actions .profile-save,
.wizard-actions form .profile-save {
  display: inline-grid;
  height: 48.4px;
  min-height: 48.4px;
  margin: 0;
  padding: 0 26.4px;
  place-items: center;
  text-decoration: none;
}

/* The generic ".profile-form input" rule (full width, 39.6px tall) must not stretch checkboxes/radios. */
.profile-form input[type="checkbox"],
.profile-form input[type="radio"] {
  flex: 0 0 auto;
  width: 17.6px;
  height: 17.6px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #2d6da8;
}

.wizard-primary { cursor: pointer; }
.register-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13.2px; line-height: 1.45; }
.register-consent input { margin-top: 2.2px; }

@media (min-width: 768px) {
  .wizard-author .profile-field-grid { grid-template-columns: 1.2fr 1fr 1.2fr; }
}


/* ---------- Scale 1.1: Bootstrap rem spacing and container widths follow the 110% sizes ---------- */
html { font-size: 110%; }

/* Container widths: Bootstrap's own sizes up to xl (the 1.1 font scale must not widen the layout),
   and a calm 1280px on large screens so there is always air on both sides. */
@media (min-width: 576px) { .container, .container-sm { max-width: 540px; } }
@media (min-width: 768px) { .container, .container-sm, .container-md { max-width: 720px; } }
@media (min-width: 992px) { .container, .container-sm, .container-md, .container-lg { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1280px; } }

/* Scale 1.1 follow-ups: let flex children shrink instead of forcing horizontal overflow. */
.profile-main { min-width: 0; }

@media (max-width: 575.98px) {
  .wizard-steps { overflow: hidden; }
  .wizard-steps .is-current { min-width: 0; }
  .wizard-steps .is-current > * {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* ---------- Single-page wizard (steps switched with JS) ---------- */
.wizard-step-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8.8px;
  padding: 8.8px 11px;
  border: 0;
  border-radius: 6.6px;
  background: #f1f3f6;
  color: #5b6472;
  font: 500 12.1px Poppins, sans-serif;
  text-align: left;
  cursor: pointer;
}

.wizard-step-btn:disabled { cursor: default; opacity: .7; }
.wizard-steps .is-current > .wizard-step-btn { background: #253754; color: #fff; }
.wizard-steps .is-done > .wizard-step-btn { color: #253754; }

.wizard-step[hidden] { display: none; }

.wizard-drafts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 17px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #f4f7fb;
  font-size: 12.1px;
}

.wizard-draft-btn {
  margin-left: auto;
  height: 48px;
  padding: 0 22px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  color: #253754;
  font: 600 13.2px Poppins, sans-serif;
  cursor: pointer;
}

.wizard-draft-btn:hover { background: #f1f4f8; }
.wizard-counter { margin-left: 6px; color: #5b6472; font-weight: 400; }

/* ======================================================================
   Form typography and rhythm (one scale: 12.1 hints / 13.2 labels / 14.3 fields)
   ====================================================================== */
.profile-form label,
.profile-role-options legend,
.profile-role-options label,
.register-consent,
.wizard-primary { font-size: 13.2px; line-height: 1.4; }

.profile-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.profile-form textarea,
.profile-select-wrap select { font-size: 14.3px; }

.profile-hint,
.profile-privacy,
.profile-required,
.file-drop__hint,
.file-drop__note { font-size: 12.1px; }

.profile-panel textarea { font-size: 14.3px; line-height: 1.5; }

/* Wizard steps wrap their fields in a div, so they need the same grid gap as .profile-form itself. */
.wizard-step {
  display: grid;
  gap: 13.2px;
}

.wizard-step > .profile-notification-heading { margin: 0 0 4.4px; }
.wizard-step > .profile-password-intro { margin: 0 0 6.6px; }
.wizard-step > label { margin-top: 6.6px; }
.wizard-step .profile-role-options { margin: 8.8px 0 0; gap: 13.2px; }
.wizard-step .register-consent { margin-top: 4.4px; }
.wizard-step .file-drop { margin-bottom: 0; }
.wizard-step .profile-required { margin-top: 6.6px; }
.wizard-step .auth-error:empty { display: none; }

.wizard-author { display: grid; gap: 13.2px; margin: 0 0 15.4px; padding: 17.6px; }
.wizard-author .profile-field-grid { gap: 15.4px; }
.wizard-primary { display: flex; align-items: center; gap: 8.8px; margin: 0; }

#author-rows { display: grid; gap: 0; }
.wizard-actions { margin-top: 24.2px; }

/* Same rhythm for the other profile forms that nest fields in plain divs. */
.profile-form > .profile-journal-link { margin: 6.6px 0 4.4px; }

/* Phones: 16px fields stop iOS from zooming in when a field is focused. */
@media (max-width: 767.98px) {
  .profile-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .profile-form textarea,
  .profile-select-wrap select,
  .auth-form input,
  .auth-form select,
  .search-filter-form input { font-size: 16px; }
}

/* ======================================================================
   Loading state for submit buttons (set by main.js on form submit)
   ====================================================================== */
@keyframes btn-spin { to { transform: rotate(360deg); } }

button.is-loading,
.is-loading[type="submit"] {
  position: relative;
  padding-right: 44px;
  cursor: progress;
  pointer-events: none;
  opacity: .9;
}

button.is-loading::after,
.is-loading[type="submit"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  button.is-loading::after,
  .is-loading[type="submit"]::after { animation-duration: 1.6s; }
}

/* Wizard footer buttons share one height (48.4px = 44px x 1.1). */
.wizard-actions .register-secondary,
.wizard-actions .profile-save,
.wizard-actions .wizard-draft-btn,
.wizard-actions form .profile-save { height: 48.4px; min-height: 48.4px; }

/* ---------- Auth pages keep the full header (site title, search, language, profile) ---------- */
/* The original design hid .topbar on the login page above 576px; the user wants it kept. */
.login-page .topbar { display: block; }
.login-page .site-header { border-top: 2.2px solid #252525; }

/* The footer sits at the bottom whatever the header height is (replaces the old calc(100vh - header) guess). */
body:has(> .auth-section),
body:has(> .register-section) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-section,
.register-section {
  flex: 1 0 auto;
  min-height: 0;
}

/* ---------- Header icon buttons (search, profile, menu) ---------- */
/* The icons were 14px glyphs in a 31px button, next to a 40px language pill and 14px text. */
.icon-btn {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.icon-btn i {
  display: block;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 575.98px) {
  /* Phones: the site title shares the row with four controls, keep it on two lines. */
  .icon-btn { width: 34px; height: 34px; font-size: 18px; }
  .icon-btn i { font-size: 18px; }
}

@media (max-width: 399.98px) {
  .site-header .title { font-size: 13.2px; }
}

/* ---------- Other-journals modal: save bar under the scrolling list ---------- */
.profile-role-footer {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  padding: 15.4px 22px;
  border-top: 1px solid #e8ebef;
  background: #fafbfc;
}

.profile-role-footer .register-secondary,
.profile-role-footer .profile-save { height: 44px; min-height: 44px; padding: 0 22px; margin: 0; }

/* Real button now (was a link): keep the dashed "add" look. */
button.profile-journal-link { width: 100%; font-family: Poppins, sans-serif; }

/* ---------- Other-journals modal: close button and soft open/close ---------- */
.profile-role-dialog header { padding-right: 14px; }

.profile-role-dialog header button {
  display: grid;
  flex: 0 0 auto;
  width: 33px;
  height: 33px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

/* The glyph box was 14x21: make it a centred square so the X sits in the middle of its button. */
.profile-role-dialog header button i {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
}

.profile-role-dialog header button:hover { background: rgba(255, 255, 255, .26); }
.profile-role-dialog header button:active { transform: scale(.94); }
.profile-role-dialog header button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Soft open/close: the backdrop fades, the dialog rises and settles. JS toggles .is-open and
   only sets [hidden] once the closing transition has finished. */
.profile-role-modal {
  opacity: 0;
  transition: opacity .22s ease;
}

.profile-role-modal.is-open { opacity: 1; }

.profile-role-modal .profile-role-dialog {
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.profile-role-modal.is-open .profile-role-dialog {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .profile-role-modal,
  .profile-role-modal .profile-role-dialog { transition: none; transform: none; }
}

/* Profile sidebar brand ("UNEC TƏLƏBƏ / TƏDQİQATLARI JURNALI"): a bit smaller (was 18.7px). */
.profile-sidebar-brand .profile-brand {
  font-size: 15.4px;
  line-height: 1.4;
}

/* ---- Profile pages: page head, compact buttons, list cards ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; flex-wrap: wrap; margin: 0 0 17.6px; }
.page-head .profile-notification-heading { margin: 0; font-size: 17.6px; font-weight: 600; line-height: 1.3; }
.profile-panel > .profile-notification-heading { margin: 0 0 17.6px; font-size: 17.6px; font-weight: 600; }
.profile-panel > .profile-notification-heading:not(:first-child) { margin-top: 26.4px; }
.page-head form { margin: 0; }

.btn-compact {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35.2px; padding: 0 15.4px; margin: 0; width: auto;
  border: 1px solid #c9d1dc; border-radius: 5.5px; background: #fff; color: #2d6da8;
  font: 600 13.2px Poppins, sans-serif; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-compact:hover { background: #f1f5fa; border-color: #2d6da8; }
.page-head .profile-save { height: 35.2px; padding: 0 15.4px; font-size: 13.2px; width: auto; margin: 0; }

.list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 13.2px;
  padding: 13.2px 15.4px; margin: 0 0 11px;
  background: #fff; border: 1px solid #e1e5eb; border-radius: 6.6px;
}
.list-item:last-of-type { margin-bottom: 0; }
.list-item-main { min-width: 0; display: flex; flex-direction: column; gap: 4.4px; }
.list-item-title { font-size: 14.3px; font-weight: 600; line-height: 1.4; color: #1f2937; overflow-wrap: anywhere; }
.list-item-title a { color: inherit; text-decoration: none; }
.list-item-title a:hover { color: #2d6da8; }
.list-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4.4px 8.8px; font-size: 12.1px; color: #6b7280; }
.list-item-meta .auth-link { font-size: inherit; }
.list-item.is-unread { border-left: 3.3px solid #2d6da8; background: #f6f9fd; }
.list-item .status-badge { display: inline-flex; align-self: flex-start; white-space: nowrap; }
.list-item > .status-badge { align-self: center; flex: 0 0 auto; }
.list-empty { padding: 22px 15.4px; text-align: center; color: #6b7280; font-size: 13.2px; border: 1px dashed #d6dce5; border-radius: 6.6px; margin: 0; }
.profile-panel .pagination { margin-top: 17.6px; }

@media (max-width: 575.98px) {
  .list-item { flex-wrap: wrap; align-items: flex-start; }
}

/* ---- Detail pages ---- */
.profile-panel > .back-link { display: inline-flex; margin: 0 0 17.6px; }
.profile-panel > h3.profile-notification-heading { margin: 26.4px 0 11px; font-size: 14.3px; font-weight: 600; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6.6px 8.8px; margin: -8.8px 0 17.6px; font-size: 12.1px; color: #6b7280; }
.detail-meta .status-badge { margin: 0; }
.profile-panel .wizard-summary { margin: 0 0 8.8px; padding: 15.4px; background: #fff; border: 1px solid #e1e5eb; border-radius: 6.6px; }
.profile-panel .wizard-summary dt:first-child { margin-top: 0; }
.profile-panel .wizard-summary dd { font-size: 13.2px; line-height: 1.55; }
.note-card { display: flex; flex-direction: column; gap: 6.6px; margin: 0 0 11px; padding: 13.2px 15.4px; background: #f6f8fb; border: 1px solid #e1e5eb; border-radius: 6.6px; font-size: 13.2px; }
.note-card-title { font-weight: 600; font-size: 13.2px; color: #1f2937; }
.note-card-date { font-size: 12.1px; color: #6b7280; }
.note-card p { margin: 0; line-height: 1.55; }
.profile-panel form.wizard-actions { margin: 0; }
.profile-panel form .profile-save { align-self: flex-start; }

/* ---- Profile area on phones: off-canvas menu behind a hamburger, full-width content ---- */
.profile-menu-open, .profile-backdrop { display: none; }
@media (max-width: 767.98px) {
  .profile-header { justify-content: space-between; padding: 0 15.4px; }
  .profile-menu-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38.5px; height: 38.5px; padding: 0; border: 1px solid #d6dce5; border-radius: 6.6px;
    background: #fff; color: #20242d; font-size: 22px; cursor: pointer;
  }
  .profile-sidebar, .profile-sidebar.is-closed, .profile-sidebar.is-open {
    top: 0; bottom: 0; z-index: 1000; width: min(82vw, 264px); transform: translateX(-100%); box-shadow: none; visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
  }
  .profile-sidebar.is-open { transform: translateX(0); box-shadow: 8.8px 0 28px rgba(0,0,0,.18); visibility: visible; transition: transform .25s ease; }
  .profile-sidebar.is-closed nav, .profile-sidebar.is-closed .profile-logout { position: static; width: auto; left: auto; }
  .profile-sidebar.is-closed .profile-brand { visibility: visible; }
  .profile-backdrop {
    display: block; position: fixed; inset: 0; z-index: 990; background: rgba(15,23,42,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body:not(.sidebar-collapsed) .profile-backdrop { opacity: 1; pointer-events: auto; }
  body.sidebar-collapsed .profile-main, .profile-main { padding: calc(var(--profile-header-height) + 17.6px) 13.2px 33px; margin-left: 0; }
  .profile-panel { padding: 17.6px 15.4px; }
}

/* Every primary/secondary button centres its label, whether it is a <button> or an <a>. */
.profile-save, .register-secondary, a.register-secondary, .btn-compact {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; line-height: 1.2; box-sizing: border-box;
}
.page-head .profile-save, .page-head .btn-compact { height: 38.5px; min-height: 38.5px; padding: 0 17.6px; margin: 0; width: auto; white-space: nowrap; }
.submissions-head .profile-save { display: inline-flex; }
@media (max-width: 575.98px) {
  .page-head .profile-save, .page-head .btn-compact { width: auto; }
}

/* Contact page: live embedded map behind the contact cards */
.contact-map--embed { background-image: none; background-color: #e8eef5; }
.contact-map--embed .contact-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map--embed .contact-cards { pointer-events: none; }
.contact-map--embed .contact-card { pointer-events: auto; }
@media (max-width: 767.98px) {
  .contact-map--embed { display: flex; flex-direction: column; }
  .contact-map--embed .contact-map-frame { position: static; order: 2; height: 280px; border-radius: 0 0 19.8px 19.8px; }
  .contact-map--embed .contact-cards { order: 1; }
}