/*
  Customer portal.

  Its own stylesheet rather than more of site.css: the portal is a different audience on a
  different auth scheme, and an agent-side change should not be able to move a customer's screen.
  Design tokens are shared from site.css so the two still look like one product.
*/

.portal-header {
  height: 72px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.portal-header .login-brand { color: var(--text); text-decoration: none; }
.portal-header .login-brand span { font-size: 15px; font-weight: 800; }
.portal-nav { display: flex; align-items: center; gap: 28px; }
.portal-nav a { color: var(--text-soft); font-size: 12px; font-weight: 700; text-decoration: none; }
.portal-nav a:hover,.portal-nav a.active { color: var(--orange-hover); }

.portal-identity { display: flex; align-items: center; gap: 14px; }
.portal-identity span { color: var(--muted); font-size: 11px; font-weight: 600; }

.ghost-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  color: var(--grey);
  background: var(--surface);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: .16s;
}
.ghost-button:hover { border-color: var(--text-faint); background: var(--zircon); }

.portal-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 24px 48px;
}

/* Signed-in customer home --------------------------------------------------------------- */
.portal-customer-home { min-height:100vh; background:var(--surface-sunken); }
.portal-customer-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; }
.portal-customer-header .portal-nav { justify-self:center; }
.portal-customer-header .portal-identity { justify-self:end; }
.portal-home-view { min-height:calc(100vh - 74px); }
.portal-member-hero { min-height:310px; }
.portal-search-link { align-items:center; color:var(--text-soft); text-align:left; text-decoration:none; }
.portal-search-link span { flex:1; padding:0 19px; font-size:14px; }
.portal-search-link b { width:62px; height:100%; display:grid; place-items:center; color:var(--text-soft); background:var(--surface-sunken); font-size:24px; }
.portal-member-welcome { margin-top:72px; align-items:start; }
.portal-overview-card h3 { font-size:24px; }
.portal-home-recent { margin:18px 0 22px; border-top:1px solid var(--border); }
.portal-home-recent a { margin:0; padding:12px 0; border-bottom:1px solid var(--border); display:block; color:var(--text); }
.portal-home-recent b,.portal-home-recent small { display:block; }
.portal-home-recent b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.portal-home-recent small { margin-top:4px; color:var(--text-soft); font-size:10px; }
.portal-overview-card .primary-button { color:var(--on-brand); }
.portal-home-text-link { color:var(--link); font-size:11px; font-weight:750; }

/* Public support front door --------------------------------------------------------------- */
.support-home { min-height: 100vh; color: var(--text); background: var(--surface-sunken); }
.support-home-nav { height: 74px; padding: 0 max(28px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--surface); }
.support-home-nav .login-brand { color:var(--text); text-decoration:none; }
.support-home-nav .login-brand span { font-size:17px; font-weight:850; }
.support-home-nav nav { display:flex; align-items:center; gap:28px; }
.support-home-nav nav a { color:var(--text-soft); font-size:12px; font-weight:700; text-decoration:none; }
.support-home-nav nav a:hover { color:var(--orange-hover); }
.support-home-nav .support-nav-cta { padding:11px 17px; border-radius:9px; color:var(--on-brand); background:var(--ink); box-shadow:0 7px 18px rgba(25,30,39,.16); }
.support-home-nav .support-nav-cta:hover { color:var(--on-brand); background:var(--ink); }
.support-hero { min-height:310px; padding:54px 24px 96px; display:grid; place-content:center; text-align:center; color:var(--on-brand); background:radial-gradient(circle at 78% 14%,rgba(255,255,255,.16),transparent 29%),var(--brand-gradient); }
.support-hero .eyebrow { margin:0 0 10px; color:var(--on-brand); opacity:.82; }
.support-hero h1 { margin:0 0 24px; font-size:clamp(34px,4vw,54px); letter-spacing:-.04em; }
.support-search { width:min(680px,calc(100vw - 40px)); height:58px; display:flex; border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 18px 45px rgba(118,50,10,.25); }
.support-search input { flex:1; min-width:0; padding:0 19px; border:0; outline:0; color:var(--text); font:inherit; font-size:14px; }
.support-search button { width:62px; border:0; color:var(--text-soft); background:var(--surface-sunken); cursor:pointer; font-size:25px; }
.support-action-grid { width:min(1040px,calc(100% - 32px)); margin:-57px auto 0; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.support-action-grid > a { min-height:132px; padding:24px; border:1px solid var(--border); border-radius:16px; display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:15px; color:var(--text); background:var(--surface); box-shadow:0 14px 34px rgba(35,45,60,.09); text-decoration:none; transition:.18s; }
.support-action-grid > a:hover { border-color:var(--orange-tint); transform:translateY(-3px); box-shadow:0 18px 42px rgba(35,45,60,.13); }
.support-action-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:var(--orange-hover); background:var(--orange-wash-strong); font-size:21px; }
.support-action-grid b,.support-action-grid small { display:block; }
.support-action-grid b { margin-bottom:6px; font-size:14px; }
.support-action-grid small { color:var(--text-soft); font-size:11px; line-height:1.5; }
.support-action-grid i { color:var(--orange); font-size:19px; font-style:normal; }
.support-welcome { width:min(1040px,calc(100% - 32px)); margin:76px auto; display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
.support-welcome h2 { margin:8px 0 15px; font-size:clamp(28px,3vw,42px); line-height:1.08; letter-spacing:-.035em; }
.support-welcome > div:first-child > p:last-child { max-width:580px; color:var(--text-soft); line-height:1.7; }
.support-welcome-card { padding:29px; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:0 18px 50px rgba(39,48,63,.1); }
.support-welcome-card > span { color:var(--orange); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.support-welcome-card h3 { margin:10px 0 8px; font-size:21px; }
.support-welcome-card p { margin:0 0 22px; color:var(--text-soft); font-size:12px; line-height:1.6; }
.support-welcome-card a { display:inline-flex; margin-right:14px; text-decoration:none; }
.support-footer { min-height:74px; padding:0 max(28px,calc((100vw - 1040px)/2)); border-top:1px solid var(--border); display:flex; align-items:center; gap:24px; color:var(--text-soft); background:var(--surface); font-size:11px; }
.support-footer a { color:inherit; }

/* Customer access card ------------------------------------------------------------------- */
.portal-access-page { min-height:100vh; color:var(--text); background:var(--surface-sunken); }
.portal-access-header { height:78px; padding:0 max(24px,calc((100vw - 980px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--surface); }
.portal-access-header .login-brand { color:var(--text); text-decoration:none; }
.portal-access-header .login-brand span { color:var(--orange); font-weight:900; letter-spacing:.13em; }
.portal-access-header > a:last-child { color:var(--text-soft); font-size:12px; font-weight:700; }
.portal-access-shell { width:min(500px,calc(100% - 36px)); margin:54px auto 18px; display:grid; grid-template-columns:1fr; align-items:start; }
.portal-access-card { min-height:510px; padding:34px 38px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 18px 48px rgba(35,45,60,.08); }
.portal-access-card[hidden] { display:none; }
.portal-access-card .eyebrow { color:var(--orange); }
.portal-access-card h1 { margin:7px 0 5px; font-size:25px; }
.portal-access-card > p:not(.eyebrow):not(.login-result) { margin:0 0 25px; color:var(--text-soft); font-size:11px; }
.portal-access-card a,.portal-agent-link a { color:var(--green-ink); }
.portal-access-card form label { margin:0 0 15px; display:block; color:var(--text); font-size:11px; font-weight:750; }
.portal-access-card form label > span { color:var(--coral); }
.portal-access-card form input[type=email],.portal-access-card form input[type=password],.portal-access-card form input[type=text] { width:100%; height:44px; margin-top:7px; padding:0 12px; border:1px solid var(--border-dark); border-radius:5px; background:var(--surface); font:inherit; }
.portal-access-card form .portal-remember { display:flex; align-items:center; gap:7px; font-weight:500; }
.portal-access-card form .portal-remember input { margin:0; accent-color:var(--green-ink); }
.portal-access-card form .primary-button { width:100%; min-height:42px; border-radius:4px; background:var(--green); }
.portal-auth-divider { margin:21px 0 12px; border-top:1px solid var(--border); text-align:center; }
.portal-auth-divider span { padding:0 10px; color:var(--text-soft); background:var(--surface); position:relative; top:-8px; font-size:10px; }
.portal-link-button,.portal-forgot { margin:auto; padding:4px; border:0; display:block; color:var(--green-hover); background:transparent; cursor:pointer; font:inherit; font-size:11px; text-decoration:underline; }
.portal-human-check { min-height:64px; margin:5px 0 19px; padding:10px 13px; border:1px solid var(--border-dark); border-radius:5px; display:flex; align-items:center; gap:12px; background:var(--surface-sunken); }
.portal-human-check > span { width:30px; height:30px; border:2px solid var(--green); display:grid; place-items:center; color:var(--green); }
.portal-human-check b,.portal-human-check small { display:block; }
.portal-human-check small { margin-top:3px; color:var(--text-soft); font-size:9px; }
.portal-agent-link { margin:24px 0 50px; text-align:center; font-size:11px; font-weight:700; }
.portal-access-card .login-result { min-height:34px; margin:12px 0; padding:9px; border-radius:5px; font-size:11px; text-align:center; }
.portal-auth-switch { margin:20px 0 0 !important; padding-top:18px; border-top:1px solid var(--border); text-align:center; }
.portal-auth-switch button { padding:2px 3px; border:0; color:var(--green-ink); background:transparent; cursor:pointer; font:inherit; font-weight:800; text-decoration:underline; }

.portal-login-back { margin-bottom:24px; display:inline-block; color:var(--text-soft); font-size:11px; font-weight:700; text-decoration:none; }
.portal-auth-tabs { margin-bottom:26px; padding:4px; border-radius:11px; display:grid; grid-template-columns:1fr 1fr; background:var(--surface-muted); }
.portal-auth-tabs button { min-height:38px; border:0; border-radius:8px; color:var(--text-soft); background:transparent; cursor:pointer; font:inherit; font-size:11px; font-weight:800; }
.portal-auth-tabs button[aria-selected="true"] { color:var(--orange-hover); background:var(--surface); box-shadow:0 3px 10px rgba(35,42,54,.1); }
.portal-auth-note { margin:18px 0 0; color:var(--text-faint); font-size:10px; line-height:1.5; text-align:center; }
.portal-account-backdrop { position:fixed; inset:0; z-index:100; padding:20px; display:grid; place-items:center; background:rgba(20,26,34,.56); }
.portal-account-card { width:min(440px,100%); padding:28px; border-radius:14px; position:relative; background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.24); }
.portal-account-card h2 { margin:5px 0 8px; }.portal-account-card > p:not(.eyebrow) { color:var(--text-soft); font-size:11px; }
.portal-account-card label { margin:15px 0; display:block; color:var(--text); font-size:11px; font-weight:750; }.portal-account-card input { width:100%; height:42px; margin-top:6px; padding:0 11px; border:1px solid var(--border-dark); border-radius:7px; }
.portal-account-card .primary-button { width:100%; }.portal-account-close { position:absolute; top:15px; right:17px; border:0; color:var(--text-soft); background:transparent; cursor:pointer; font-size:24px; }

.portal-toolbar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.portal-toolbar h1 { margin: 0; font-size: 21px; }
.portal-actions { display: flex; align-items: center; gap: 12px; }

.portal-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; cursor: pointer; }
.portal-toggle input { width: 15px; height: 15px; accent-color: var(--orange); cursor: pointer; }

.portal-tickets { display: flex; flex-direction: column; gap: 10px; }

.portal-ticket {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: .16s;
}
.portal-ticket:hover { border-color: var(--border-dark); transform: translateY(-1px); }
.portal-ticket h2 { margin: 6px 0 8px; font-size: 14px; }
.portal-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-ticket-id { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.portal-ticket-meta { margin: 0; color: var(--muted); font-size: 11px; }

/* Status colour is semantic, deliberately separate from the orange accent. */
.portal-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.portal-status-open { color: var(--orange-hover); background: var(--orange-pale); }
.portal-status-pending { color: var(--amber-ink); background: var(--amber-wash); }
.portal-status-resolved,
.portal-status-closed { color: var(--green-hover); background: var(--green-pale); }

.portal-empty { padding: 44px 20px; color: var(--muted); text-align: center; font-size: 12px; }

/* ---- Detail ------------------------------------------------------------------------------ */

.portal-back {
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  color: var(--orange-hover);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.portal-back:hover { text-decoration: underline; }

.portal-detail-head {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.portal-detail-head h1 { margin: 8px 0 10px; font-size: 19px; }

.portal-thread { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }

.portal-message {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
/* The customer's own messages sit apart from Triniteq's, so a thread reads at a glance. */
.portal-message.from-customer { margin-left: 44px; border-color: var(--orange-pale); background: var(--orange-wash); }
.portal-message.from-support { margin-right: 44px; background: var(--zircon); }
.portal-message-head { margin-bottom: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.portal-message-head b { font-size: 11px; }
.portal-message-head time { color: var(--muted); font-size: 10px; }
.portal-message-body { margin: 0; color: var(--grey); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-message-attachments { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.portal-message-attachments li { padding: 3px 9px; border-radius: 999px; background: var(--zircon); color: var(--muted); font-size: 10px; }

/* ---- Forms --------------------------------------------------------------------------------*/

.portal-form {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.portal-form h2 { margin: 0 0 14px; font-size: 14px; }
.portal-form label { display: block; margin-bottom: 13px; color: var(--grey); font-size: 11px; font-weight: 700; }
.portal-form input[type=text],
.portal-form textarea,
.portal-form select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-dark);
  border-radius: 9px;
  color: var(--grey);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
}
.portal-form textarea { min-height: 110px; resize: vertical; }
.portal-form input:focus-visible,
.portal-form textarea:focus-visible,
.portal-form select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }

.portal-form-actions { display: flex; align-items: center; gap: 12px; }
.portal-form-message { margin: 0; font-size: 11px; }
.portal-form-message.is-error { color: var(--coral-hover); }
.portal-form-message.is-ok { color: var(--green-hover); }

.portal-resolved-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--border-dark);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

button:focus-visible,
.portal-ticket:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (max-width: 640px) {
  .portal-shell { padding: 20px 16px 40px; }
  .portal-message.from-customer { margin-left: 12px; }
  .portal-message.from-support { margin-right: 12px; }

  /* The header could not fit a phone. A 128px logo, the wordmark, Help, the signed-in address and
     Sign out, in a fixed 64px bar with space-between and nothing allowed to wrap: on a 375px
     screen that is well over the width, so it overflowed the viewport and took the horizontal
     scrollbar with it. It wraps and sizes to its content now. */
  .portal-header { height: auto; min-height: 56px; padding: 10px 16px; flex-wrap: wrap; gap: 8px 12px; }
  .portal-header .login-brand img { width: 96px; }
  .portal-identity { gap: 10px; }
  .portal-nav { display:none; }
  .support-home-nav nav a:not(.support-nav-cta) { display:none; }
  .support-home-nav .login-brand span { display:none; }
  .support-action-grid { grid-template-columns:1fr; margin-top:-45px; }
  .support-action-grid > a { min-height:108px; }
  .support-welcome { margin:48px auto; grid-template-columns:1fr; gap:28px; }
  .support-footer { padding:20px; flex-wrap:wrap; }
  .portal-customer-header { grid-template-columns:1fr auto; }
  .portal-customer-header .portal-nav { display:none; }
  .portal-member-hero { min-height:280px; padding-top:42px; }
}

@media (max-width: 420px) {
  /* Last to go, because it is the one thing here the customer already knows -- it is their own
     address -- and dropping it keeps Help and Sign out reachable without a second row. */
  #portalWho { display: none; }
  .portal-header .login-brand img { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-ticket, .ghost-button { transition: none; }
  .portal-ticket:hover { transform: none; }
}

/* ---- Help centre ------------------------------------------------------------------------- */
.kb-site-header .support-nav-cta { padding:10px 15px; border-radius:7px; color:var(--on-brand); background:var(--ink); }
.kb-site-header .support-nav-cta:hover { color:var(--on-brand); }
#kbRoot.portal-shell { max-width:none; padding:0 0 55px; background:var(--surface-sunken); }
/* The help centre's layout is help-centre.css; its guide components are kb-guide.css. */

@media (max-width:700px) {
  .portal-access-shell { grid-template-columns:1fr; margin-top:22px; }.portal-access-card { min-height:0; padding:26px 22px; }
}

/* ---- Satisfaction rating ------------------------------------------------------------------ */

.csat-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 77%, rgba(255, 119, 36, .12), transparent 25%),
    radial-gradient(circle at 83% 42%, rgba(102, 91, 224, .08), transparent 34%),
    linear-gradient(180deg, var(--surface) 0, var(--surface-sunken) 45%, var(--surface-sunken) 100%);
}
.csat-page::before,
.csat-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  transform: rotate(15deg);
}
.csat-page::before {
  left: -5vw;
  bottom: 4vh;
  width: 42vw;
  height: 51vh;
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(255, 105, 53, .3), rgba(255, 166, 121, .03) 64%);
  clip-path: polygon(10% 0, 100% 72%, 22% 100%, 0 21%);
}
.csat-page::after {
  right: -3vw;
  top: 24vh;
  width: 34vw;
  height: 58vh;
  border-radius: 46px;
  background: linear-gradient(145deg, rgba(117, 100, 229, .05), rgba(117, 100, 229, .16));
  clip-path: polygon(78% 0, 100% 8%, 83% 100%, 0 81%);
}
.csat-header {
  position: relative;
  z-index: 2;
  height: 84px;
  padding: 0 23px;
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, .94);
}
.csat-header .login-brand { gap: 14px; }
.csat-header .login-brand img { width: 102px; }
.csat-header .login-brand span { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.csat-stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 84px);
  min-height: calc(100dvh - 84px);
  padding: clamp(70px, 10vh, 120px) 20px 50px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.csat-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 45% -8% 3%;
  opacity: .42;
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 17px, rgba(247, 118, 65, .2) 18px 19px, transparent 20px 31px);
  transform: scaleY(.3);
}
.csat-shell { width: min(760px, 100%); margin: 0; }

.csat-card {
  min-height: 490px;
  padding: 36px 64px 42px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 22px 60px rgba(41, 47, 63, .1);
  text-align: center;
}
.csat-card .eyebrow { margin: 16px 0 10px; color: var(--orange); font-size: 13px; }
.csat-card h1 { margin: 4px 0 7px; font-size: clamp(31px, 3vw, 43px); line-height: 1.1; }
.csat-subject { margin: 0 0 44px; color: var(--text-soft); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.csat-hero-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-brand);
  background: radial-gradient(circle at 50% 50%, var(--orange-active) 0 36%, transparent 38%);
  box-shadow: 0 8px 24px rgba(255, 116, 31, .14);
  font-size: 28px;
  font-weight: 800;
}

.csat-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.csat-score {
  min-width: 0;
  height: 122px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(32, 38, 52, .07);
  cursor: pointer;
  transition: .16s;
}
.csat-score b,
.csat-score span { display: block; color: currentColor; }
.csat-score b { margin-bottom: 10px; font-size: 31px; line-height: 1; }
.csat-score span { font-size: 27px; line-height: 1; }
.csat-score-1 { color: var(--coral); }
.csat-score-2 { color: var(--orange); }
.csat-score-3 { color: var(--amber-ink); }
.csat-score-4 { color: var(--lime-ink); }
.csat-score-5 { color: var(--green-hover); }
.csat-score:hover:not(:disabled) {
  border-color: currentColor;
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(32, 38, 52, .12);
  transform: translateY(-3px);
}
.csat-score:disabled { opacity: .45; cursor: default; }

.csat-scale {
  margin: 14px 0 0;
  display: flex; justify-content: space-between;
  color: var(--text-soft); font-size: 13px; font-weight: 600;
}
.csat-reassurance { margin-top: 42px; display: flex; align-items: center; gap: 12px; color: var(--text-soft); }
.csat-reassurance > span:last-child { display: grid; gap: 4px; }
.csat-reassurance b { font-size: 15px; font-weight: 500; }
.csat-reassurance small { font-size: 12px; }
.csat-shield { width: 20px; height: 22px; display: grid; place-items: center; color: var(--on-brand); background: var(--orange); clip-path: polygon(50% 0, 94% 18%, 86% 72%, 50% 100%, 14% 72%, 6% 18%); font-size: 11px; font-weight: 800; }
.csat-result-card { min-height: 260px; display: grid; align-content: center; gap: 20px; }

.csat-comment {
  display: block;
  margin-top: 22px;
  color: var(--grey);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.csat-comment textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-dark);
  border-radius: 9px;
  font: inherit; font-size: 12px; font-weight: 400;
  resize: vertical;
}
.csat-comment textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

@media (max-width: 480px) {
  .csat-stage { padding: 35px 14px; }
  .csat-card { min-height: 0; padding: 27px 18px 30px; }
  .csat-card h1 { font-size: 29px; }
  .csat-subject { margin-bottom: 28px; font-size: 14px; }
  .csat-scores { gap: 6px; }
  .csat-score { height: 88px; border-radius: 10px; }
  .csat-score b { margin-bottom: 8px; font-size: 23px; }
  .csat-score span { font-size: 21px; }
  .csat-scale { font-size: 11px; }
  .csat-reassurance { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .csat-score { transition: none; }
  .csat-score:hover:not(:disabled) { transform: none; }
}