/* SKILLGEEK — LMS and commerce surfaces.
   Extends the SAME design system over Tutor and WooCommerce, so a learner never
   crosses a visual seam between the marketing site and the thing they bought.

   Every value is a token. Plugin files are NEVER edited — this restyles from
   outside, which is why the selectors below are plugin class names. If a plugin
   update renames a class, the surface degrades to the plugin's own styling
   rather than breaking. */

/* ------------------------------------------------------- shared shell --- */
.sg-lms .tutor-wrap,
.woocommerce-page .site-content,
.woocommerce .woocommerce-notices-wrapper {
  font-family: var(--font-body);
}

.woocommerce-page .entry-content,
.tutor-wrap {
  color: var(--ink);
}

/* Astra's page title area duplicates our own page head on commerce pages. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header { margin-bottom: var(--sp-6); }

.woocommerce-page h1,
.woocommerce-page h2,
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------ buttons --- */
/* Tutor and WooCommerce each ship their own button classes. Map all of them
   onto the one button style so the site has a single call-to-action language. */
/*
 * Tutor 4 brand tokens, remapped to our crimson.
 *
 * ⚠️ THIS REPLACED A BLANKET `.tutor-btn` OVERRIDE, and the difference matters.
 * `.tutor-btn` is Tutor's BASE class — every button carries it, then adds a
 * variant: -link, -ghost, -outline, -secondary, -primary-soft, -destructive,
 * -icon. Painting the base class crimson painted ALL of them, including the
 * destructive button that is supposed to read as danger. The visible symptom
 * was the discussions filter, `class="tutor-btn tutor-btn-link"`, whose inner
 * spans carry tutor-text-secondary / tutor-text-primary: those set their own
 * dark colours, so the label stayed dark on a crimson pill nobody could read.
 *
 * Setting the TOKENS instead lets Tutor's own component CSS derive each
 * variant, including the text colour that belongs with each background.
 */
/* ⚠️ Scoped to :root, not to .tutor-wrap. Tutor renders components OUTSIDE that
   wrapper — the login/enrol box on a course page is one — and a wrapper-scoped
   remap left those still painted in Tutor's stock blue (measured: "Register Now"
   at rgb(62,100,222) on the single-course page). */
:root,
[data-tutor-theme] {
  --tutor-brand-100: var(--brand-50);
  --tutor-brand-200: var(--brand-100);
  --tutor-brand-300: var(--brand-200);
  --tutor-brand-400: var(--brand-300);
  --tutor-brand-600: var(--brand-600);
  --tutor-brand-700: var(--brand-700);
  --tutor-brand-800: var(--brand-800);
  --tutor-brand-900: var(--brand-900);
  --tutor-brand-950: var(--accent-900);
}

/* WooCommerce's buttons, plus Tutor's PRIMARY only. Every other Tutor variant
   keeps its own styling — see the note above. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.tutor-btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-5) !important;
  border-radius: var(--radius) !important;
  background: var(--action) !important;
  color: var(--ink-inverse) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1 !important;
  border: 0 !important;
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/*
 * A button that carries our fill must colour its CHILDREN too. Tutor puts the
 * label in <span class="tutor-text-primary">, which sets its own dark colour and
 * would otherwise beat the inherited white.
 */
.tutor-btn-primary,
.tutor-btn-primary span,
.tutor-btn-primary svg { color: var(--ink-inverse) !important; }

/*
 * The quiet button variants need a readable colour of their own.
 *
 * ⚠️ Tutor's stock greys fail AA on white: `.tutor-btn-ghost` renders
 * rgb(117,124,142), measured at **4.17:1** against a 4.5 requirement, on
 * "Wishlist" and "Share". That was previously HIDDEN by our blanket `.tutor-btn`
 * rule, which forced white-on-crimson over every variant — removing the blanket
 * fixed the unreadable filter pill and exposed this underneath.
 */
.tutor-btn-ghost,
.tutor-btn-ghost span,
.tutor-btn-link-gray,
.tutor-btn-link-gray span { color: var(--ink-muted) !important; }

.tutor-btn-link,
.tutor-btn-link span { color: var(--link) !important; }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.tutor-btn-primary:hover {
  background: var(--action-hover) !important;
  color: var(--ink-inverse) !important;
  transform: translateY(-1px);
}

.woocommerce a.button.wc-backward,
.tutor-btn-outline-primary,
.tutor-btn-secondary {
  background: transparent !important;
  color: var(--brand-700) !important;
  box-shadow: inset 0 0 0 1px var(--brand-600);
}
.woocommerce a.button.wc-backward:hover,
.tutor-btn-outline-primary:hover,
.tutor-btn-secondary:hover {
  background: var(--brand-50) !important;
  color: var(--brand-800) !important;
}

/* ------------------------------------------------------------- forms ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page .select2-container .select2-selection--single,
.tutor-form-control,
.tutor-input-group input {
  min-height: 48px !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border: var(--border-interactive) !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  box-shadow: none !important;
}
.woocommerce form .form-row label,
.tutor-form-group label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.tutor-form-control:focus {
  outline: 3px solid var(--focus) !important;
  outline-offset: 1px;
}

/* ------------------------------------------------------------ panels ---- */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-account .woocommerce-MyAccount-navigation,
.tutor-card,
.tutor-dashboard-content-inner {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
  border: var(--border) !important;
  border-radius: var(--radius) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-subtle);
}

/* Wide commerce tables must scroll inside themselves, never widen the page. */
.woocommerce .shop_table_responsive,
.woocommerce-cart-form { overflow-x: auto; }

.woocommerce .price,
.woocommerce .amount,
.tutor-course-price {
  color: var(--brand-700) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.woocommerce del .amount { color: var(--n-500) !important; font-weight: 500; }

/* ----------------------------------------------------------- notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.tutor-alert {
  border-radius: var(--radius) !important;
  border: var(--border) !important;
  font-family: var(--font-body);
  background: var(--bg-subtle) !important;
  color: var(--ink) !important;
}
.woocommerce-message { border-left: 4px solid var(--accent-700) !important; }
.woocommerce-error   { border-left: 4px solid var(--brand-600) !important; }
.woocommerce-info    { border-left: 4px solid var(--accent-500) !important; }

/* ---------------------------------------------------- payment methods --- */
/* The gateway list is the money path. Styled, never restructured — PayMongo has
   no Blocks payment method, so this must stay the classic shortcode markup. */
.woocommerce-checkout #payment {
  background: var(--bg-subtle) !important;
  border: var(--border);
  border-radius: var(--radius);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: var(--border) !important;
  padding: var(--sp-4) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: var(--sp-3);
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods label {
  font-weight: 600;
  font-size: var(--fs-base);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--bg) !important;
  border: var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #place_order { width: 100%; }

/* --------------------------------------------------- Tutor dashboard ---- */
.sg-lms { padding-block: var(--sp-7); }
.sg-lms .tutor-dashboard-layout { gap: var(--sp-6); }
.sg-lms .tutor-dashboard-menu-items a,
.sg-lms .tutor-dashboard-permalinks a {
  border-radius: var(--radius-sm);
  min-height: 44px;
  font-family: var(--font-body);
}
.sg-lms .tutor-dashboard-menu-items a.active,
.sg-lms .tutor-dashboard-permalinks li.active a {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
}

/* Tutor's own sticky header would sit under ours; our header is the sticky one. */
.sg-lms .tutor-dashboard-header { position: static !important; }

/* ------------------------------------------------- progress and quiz ---- */
.tutor-progress-bar,
.tutor-progress-value { border-radius: var(--radius-full) !important; }
.tutor-progress-value { background: var(--accent-700) !important; }

.tutor-quiz-question-wrapper,
.tutor-quiz-answer-wrapper {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

/* --------------------------------------------------------- login ------- */
.tutor-login-wrap,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: var(--border) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-6) !important;
  max-width: 560px;
  background: var(--bg);
}

/* ------------------------------------------------ certificate verify ---- */
.sg-verify {
  max-width: 620px;
  margin-inline: auto;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  background: var(--bg);
  text-align: center;
}
.sg-verify-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.sg-verify-status--valid   { background: var(--accent-50);  color: var(--accent-700); border: 1px solid var(--accent-100); }
.sg-verify-status--invalid { background: var(--brand-50);   color: var(--brand-700);  border: 1px solid var(--brand-100); }
.sg-verify dl { display: grid; gap: var(--sp-3); text-align: left; margin: var(--sp-5) 0 0; }
.sg-verify dt { font-size: var(--fs-sm); color: var(--ink-muted); }
.sg-verify dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------- mobile overflow ------ */
/* Found by probe at 390px: the certificates table (462px) and the serial
   <code> elements (384px, unbreakable) pushed the document to 503px wide.
   Wide content scrolls inside its own container; the page never does. */
.sg-lms .tutor-dashboard-page,
.sg-lms .tutor-dashboard-content-inner { overflow-x: auto; max-width: 100%; }

.sg-lms table { max-width: 100%; }

.sg-lms code,
.sg-verify code,
.ph-cp-verify code {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--fs-sm);
}

/* Belt and braces: nothing inside an LMS surface may widen the document. */
.sg-lms img, .sg-lms iframe, .sg-lms pre { max-width: 100%; }

/* ------------------------------------------------- container alignment -- */
/* Astra renders commerce/LMS content outside our .sg-container, so the page
   title sat flush against the viewport edge (observed on /checkout/). Give the
   parent theme's content wrappers the same max-width and gutters as ours so
   marketing and commerce pages line up on the same grid. */
.woocommerce-page .site-content > .ast-container,
.woocommerce-page .entry-content > .woocommerce,
.woocommerce-page .entry-header,
.single-courses .site-content > .ast-container,
.tutor-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Do not double-pad: our own wrapper already applies the gutter. */
.sg-lms .tutor-wrap { max-width: none; padding-inline: 0; }

.woocommerce-page .site-content,
.single-courses .site-content { padding-block: var(--sp-7); }

/* Tutor's muted text measured 4.17:1 as rendered — just under AA. Nudged to a
   token that clears it. Found by the Phase H rendered-contrast check. */
.sg-lms .tutor-color-muted,
.single-courses .tutor-color-muted,
.tutor-course-content-list-item-duration { color: var(--ink-muted) !important; }

/* --------------------------------------------- AA contrast top-ups ------ */
/* Found by the Phase H rendered-contrast check. All third-party defaults that
   land just under AA on our surfaces. Measured values are in the comments so a
   future change can be re-checked against the same numbers. */

/* WooCommerce's required-field asterisk: 3.86–4.00:1 */
.woocommerce .required,
.woocommerce abbr.required,
.woocommerce form .form-row .required {
  color: var(--brand-700) !important;
  text-decoration: none !important;
}

/* Tutor's subdued/muted text: 4.31–4.36:1 */
.sg-lms .tutor-text-subdued,
.sg-lms .tutor-color-subdued,
.sg-lms .tutor-color-muted,
.sg-lms .tutor-dashboard-menu-items a,
.sg-lms .tutor-dashboard-permalinks a {
  color: var(--ink-muted) !important;
}

/* The active dashboard tab must stay clearly the strongest item. */
.sg-lms .tutor-dashboard-menu-items a.active,
.sg-lms .tutor-dashboard-menu-items a.active span,
.sg-lms .tutor-dashboard-permalinks li.active a {
  color: var(--brand-700) !important;
  font-weight: 600;
}

/* The dashboard's active tab lives in .tutor-dashboard-menu-index, NOT
   .tutor-dashboard-menu-items — an earlier override targeted the wrong
   container and silently did nothing. Tutor's own blue (#3E64DE on #E4EBFC)
   measured 4.31:1, just under AA. */
/* ⚠️ min-height belongs on the LINK ONLY.
   It used to be set on `a` AND `a span` together. A 44px min-height on the
   LABEL made that box 44px tall, and 44 + 16px of link padding rendered Home at
   60px while every sibling was 38px. It hit Home alone because this selector is
   scoped to .tutor-dashboard-menu-index, which is Home's wrapper. Measured, not
   guessed: span height 44px vs 22px, identical font-size and line-height. */
/* Applied to EVERY sidebar item, not just Home. Previously only Home carried it,
   which is why Home stood out; the siblings were 38px, under the 44px minimum
   target size (WCAG 2.5.5). Now they are uniform AND large enough to tap. */
.sg-lms .tutor-dashboard-sidebar a[href*="/dashboard"] {
  border-radius: var(--radius-sm);
  min-height: 44px;
}
.sg-lms .tutor-dashboard-menu-index a,
.sg-lms .tutor-dashboard-menu-index a span {
  color: var(--ink-muted) !important;
}
.sg-lms .tutor-dashboard-menu-index a.active,
.sg-lms .tutor-dashboard-menu-index a.active span {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
}

/* Tutor names each sidebar item's wrapper .tutor-dashboard-menu-<slug>, so
   targeting -index only ever fixed the Home tab. Match them all, plus the
   popover copy of the menu. */
.sg-lms [class*="tutor-dashboard-menu-"] a,
.sg-lms [class*="tutor-dashboard-menu-"] a span,
.sg-lms .tutor-popover a,
.sg-lms .tutor-popover a span {
  color: var(--ink-muted) !important;
}
.sg-lms [class*="tutor-dashboard-menu-"] a.active,
.sg-lms [class*="tutor-dashboard-menu-"] a.active span,
.sg-lms .tutor-popover a.active,
.sg-lms .tutor-popover a.active span {
  background-color: var(--brand-50) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
}

/* ===========================================================================
   Our own dashboard panels (Certificates, Orders & receipts)
   ---------------------------------------------------------------------------
   ⚠️ These templates used to be styled with Tutor 3.x utility classes —
   tutor-dashboard-content-inner, tutor-fs-5, tutor-mb-24, tutor-empty-state,
   tutor-py-32, tutor-table. NONE of them exist in Tutor 4's stylesheet
   (grepped: 0 occurrences each; only .tutor-card survived). So both panels
   rendered completely unstyled — headings flush against the border, no
   padding, no table rules.

   They now carry OUR classes. A third-party major version can no longer
   silently unstyle a page we own.
   ======================================================================== */
.sg-panel {
  background: var(--bg);
  border: var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--sp-6);
}
.sg-panel + .sg-panel { margin-top: var(--sp-5); }

.sg-panel__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.sg-panel__empty { margin: 0 0 var(--sp-2); color: var(--ink); }
.sg-panel__hint  { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.sg-panel__scroll { overflow-x: auto; }

/* ------------------------------------------------------------- table ---- */
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sg-table th,
.sg-table td { padding: var(--sp-3) var(--sp-3); text-align: left; vertical-align: middle; }
.sg-table thead th {
  color: var(--ink-muted);
  font-weight: 600;
  border-bottom: var(--border);
  white-space: nowrap;
}
.sg-table tbody tr + tr td { border-top: var(--border); }
.sg-table__right { text-align: right; }
.sg-table code { font-size: .9em; }

/* ------------------------------------------------------------- badge ---- */
.sg-badge {
  display: inline-block;
  padding: .25em .6em;
  border-radius: var(--radius-full, 999px);
  font-size: var(--fs-xs, .8rem);
  font-weight: 600;
  line-height: 1.4;
  background: var(--n-100);
  color: var(--n-800);
}
.sg-badge--ok,
.sg-badge--status-completed  { background: #E6F4EA; color: #17632C; }
.sg-badge--danger,
.sg-badge--status-failed,
.sg-badge--status-cancelled  { background: #FDE7E7; color: #8A1B1B; }
.sg-badge--status-processing,
.sg-badge--status-on-hold,
.sg-badge--status-pending    { background: #FFF3D6; color: #6B4A00; }

/* A small ghost button, for row actions. */
.sg-btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs, .8rem); }
.sg-btn--ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand-600);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.sg-btn--ghost:hover { background: var(--brand-50); color: var(--brand-800); }

/* Stack the orders table on narrow screens rather than letting it overflow. */
@media (max-width: 600px) {
  .sg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sg-table tbody tr { display: block; border-top: var(--border); padding: var(--sp-2) 0; }
  .sg-table tbody tr + tr td { border-top: 0; }
  .sg-table td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
  .sg-table td::before { content: attr(data-label); color: var(--ink-muted); font-weight: 600; }
}

/* Who is signed in, by name, beside Tutor's initials avatar.
   Hidden on narrow screens where the header has no room — the avatar and its
   dropdown still carry the name there. */
.sg-dash-user {
  display: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) { .sg-dash-user { display: inline-block; } }

/* ------------------------------------------- dashboard sidebar nav ------ */
/*
 * Nav labels must not wrap.
 *
 * Defensive only. The 60px-tall "Home" item was NOT a wrap — it was a
 * `min-height: 44px` we had applied to the label span as well as the link (see
 * the .tutor-dashboard-menu-index block below, where it is fixed). Keeping
 * nowrap because a sidebar label should not break across lines regardless.
 */
.tutor-dashboard-sidebar a > span {
  white-space: nowrap;
  flex-shrink: 0;
}

/* The name beside the avatar opens the same menu the avatar does.
 *
 * ⚠️ Colour is set explicitly on BOTH states, with !important, because this is a
 * <button>: the theme styles buttons as filled controls and its
 * `button:hover { color:#fff }` applied here too. Our button has a transparent
 * background, so on hover the name turned WHITE ON WHITE and vanished.
 * ⚡ Measured: rgb(32,33,37) at rest → rgb(255,255,255) on hover. */
button.sg-dash-user,
button.sg-dash-user:visited {
  border: 0;
  background: none !important;
  padding: 0 var(--sp-1, 4px);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink) !important;
  box-shadow: none !important;
}
button.sg-dash-user:hover,
button.sg-dash-user:focus {
  color: var(--brand-700) !important;
  background: none !important;
  text-decoration: underline;
}
button.sg-dash-user:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Way out of an empty list. Sits inside Tutor's centred empty-state column. */
.sg-empty-cta { display: flex; justify-content: center; margin-top: var(--sp-4); }

/* ------------------------------------------------ staff dashboard tabs --- */
/* Non-technical staff use these instead of wp-admin, so the form has to be
   plainly legible rather than dense like an admin screen. */
.sg-staff__saved {
  margin: 0 0 var(--sp-4);
  padding: .7rem 1rem;
  border-radius: var(--radius-sm, 6px);
  background: #E6F4EA;
  color: #14532D;          /* 8.9:1 on that background */
  font-weight: 600;
}
.sg-staff__group {
  border: var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.sg-staff__group legend {
  padding: 0 .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.sg-staff__field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 var(--sp-4); }
.sg-staff__field:last-child { margin-bottom: 0; }
.sg-staff__field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.sg-staff__field input,
.sg-staff__field textarea {
  width: 100%;
  min-height: 44px;                 /* WCAG 2.5.5 target size */
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-interactive);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.sg-staff__field textarea { min-height: 88px; resize: vertical; }
.sg-staff__field input:focus,
.sg-staff__field textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; }