/* Navbar "you are being paged" alert, refreshed in place by DynamicLoading */
.paged-alert-slot,
.paged-alert-slot > div,
.paged-alert-slot #pagedAlert {
  display: flex;
  align-items: center;
}

.paged-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0.5rem;
  padding: 0.7rem 1rem;
  background-color: #e01b41;
  border: 1px solid #a81b36;
  border-radius: 3px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  animation: paged-alert-pulse 1s ease-out infinite;
}

.paged-alert:hover,
.paged-alert:focus {
  background-color: #a81b36;
  color: #fff;
  animation: none;
}

.paged-alert-icon {
  display: inline-flex;
  align-items: center;
}

.paged-alert-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  shape-rendering: geometricPrecision;
}

.paged-alert-cta {
  padding-left: 0.4em;
  margin-left: 0.1em;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 400;
  opacity: 0.95;
}

@keyframes paged-alert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 30, 70, 0.95), 0 0 0 0 rgba(255, 30, 70, 0.6); background-color: #ff1f48; }
  50%  { background-color: #c4132f; }
  70%  { box-shadow: 0 0 0 14px rgba(255, 30, 70, 0.25), 0 0 0 0 rgba(255, 30, 70, 0.4); }
  100% { box-shadow: 0 0 0 26px rgba(255, 30, 70, 0), 0 0 0 14px rgba(255, 30, 70, 0); background-color: #ff1f48; }
}

@media (prefers-reduced-motion: reduce) {
  .paged-alert {
    animation: none;
  }
}

/* The alert lives in the left .navbar-brand so it stays visible when the
   navbar-menu is collapsed on touch widths, and sits at the left of the bar.
   On desktop (Bulma's 1248px breakpoint, where the hamburger is hidden and the
   menu is inline) the slot is centered in the space left of the menu. Only the
   slot is centered, so the brand's other items keep their normal layout. */
@media screen and (min-width: 1248px) {
  nav.navbar > .navbar-brand:first-child {
    flex: 1 1 auto;
  }
  nav.navbar > .navbar-brand:first-child > .paged-alert-slot {
    margin: 0 auto;
  }
  nav.navbar > .navbar-menu {
    flex-grow: 0;
  }
}
/* Narrow screens: drop the "Acknowledge" call to action, then the label,
   leaving just the pulsing red icon badge. */
@media screen and (max-width: 767px) {
  .paged-alert {
    margin: 0 0.25rem;
    font-size: 0.65rem;
  }
  .paged-alert-cta {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .paged-alert {
    gap: 0;
    padding: 0.35rem;
  }
  .paged-alert-label {
    /* Keep the accessible name without taking up space */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .paged-alert-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Team dashboard: hero, summary stat tiles and the in-progress chats table */
.dashboard > .card,
.dashboard > .dashboard-stats {
  margin-bottom: 1.5rem;
}

.dashboard-hero-status {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

@media screen and (max-width: 1023px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .dashboard-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid rgba(24,28,33,0.08);
  border-left: 4px solid #b5b5b5;
  box-shadow: 0 2px 6px rgba(24,28,33,0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-stat-link {
  cursor: pointer;
  color: inherit;
}

.dashboard-stat-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.9em 1.4em -0.25em rgba(10,10,10,0.18),0 0px 0 1px rgba(10,10,10,0.02);
  color: inherit;
}

.dashboard-stat-link:focus-visible {
  outline: 2px solid #1859a4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-stat { transition: none; }
  .dashboard-stat-link:hover { transform: none; }
}

.dashboard-stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: #363636;
}

.dashboard-stat-label {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #7a7a7a;
}

/* Accent colour on the left rail keyed to each tile's tone */
.dashboard-stat.is-danger { border-left-color: #f14668; }
.dashboard-stat.is-warning { border-left-color: #ffe08a; }
.dashboard-stat.is-info { border-left-color: #3e8ed0; }
.dashboard-stat.is-success { border-left-color: #48c78e; }
.dashboard-stat.is-dark { border-left-color: #363636; }
.dashboard-stat.is-neutral { border-left-color: #dbdbdb; }

.dashboard-stat.is-danger .dashboard-stat-value { color: #cc0f35; }
.dashboard-stat.is-success .dashboard-stat-value { color: #257953; }
.dashboard-stat.is-info .dashboard-stat-value { color: #296fa8; }


/* Chat history - show chat page */
.chat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.chat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid rgba(24,28,33,0.08);
  border-left: 4px solid #dbdbdb;
  box-shadow: 0 2px 6px rgba(24,28,33,0.04);
}

.chat-tile.is-danger { border-left-color: #f14668; background-color: #fff5f7; }
.chat-tile.is-warning { border-left-color: #ffe08a; background-color: #fffaeb; }
.chat-tile.is-success { border-left-color: #48c78e; background-color: #effaf5; }
.chat-tile.is-neutral { border-left-color: #dbdbdb; background-color: #f7f9fb; }

.chat-tile-body {
  min-width: 0;
}

.chat-tile-title {
  margin-bottom: 0.25rem;
  color: #7a7a7a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-tile-text {
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chat-tile-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.chat-tile-action {
  flex-shrink: 0;
}

.chat-tile .button[disabled] {
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  .chat-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Presence box, beside the reply box on the show chat page */
.chat-presence {
  height: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  background-color: #f7f9fb;
}

.chat-presence-title {
  margin-bottom: 0.5rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-presence-empty {
  color: #7a7a7a;
  font-size: 0.85rem;
  line-height: 1.4;
}

.chat-presence-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 12rem;
  overflow-y: auto;
}

.chat-presence-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.3;
}

.chat-presence-name {
  flex: 1 1 auto;
  min-width: 0;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-presence-status {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 0.7rem;
}

.chat-presence-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #94a3b8;
}

.chat-presence-dot.is-recent {
  background-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.chat-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  background-color: #f7f9fb;
}

.chat-detail {
  min-width: 0;
}

.chat-detail dt {
  margin-bottom: 0.15rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-detail dd {
  margin: 0;
  color: #334155;
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1023px) {
  .chat-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .chat-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Each x-for iteration in the chat feed needs a single root element;
   display: contents keeps that wrapper out of the .chat-log flex layout. */
.chat-entry {
  display: contents;
}

.chat-day {
  display: flex;
  align-items: center;
  text-align: center;
  color: #7a7a7a;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0 0.25rem;
}

.chat-day::before,
.chat-day::after {
  content: "";
  flex: 1;
  border-top: 1px solid #ececec;
}

.chat-day span {
  padding: 0 0.75rem;
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 80%;
}

/* The viewer's own messages sit on the right, everyone else's on the left. */
.chat-message.is-other {
  align-self: flex-start;
}

.chat-message.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  flex: 0 0 32px;
  display: flex;
  line-height: 0;
}

.chat-avatar .avatar,
.chat-avatar svg {
  display: block;
}

/* An avatar is the initials SVG with an optional Gravatar <img> laid over it.
   The server only adds the image once it has checked Gravatar has a picture
   (models.AvatarURL). The white background hides the initials behind a transparent PNG. */
.avatar {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 0;
  vertical-align: top;
}

.avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

/* An avatar beside the first cell's text in a table row. */
.table-avatar-cell {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.table-avatar-cell .avatar { flex-shrink: 0; }
.table-avatar-cell > span { min-width: 0; }
.table-cell-subtext {
  display: block;
  font-size: .75rem;
  line-height: 1.2;
  color: #7a7a7a;
}

.chat-message-body {
  min-width: 0;
}

.chat-meta {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.75rem;
  color: #7a7a7a;
  margin-bottom: 0.2rem;
}

.chat-message.is-mine .chat-meta {
  flex-direction: row-reverse;
}

.chat-sender {
  font-weight: 600;
  color: #4a4a4a;
}

.chat-bubble {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.chat-message.is-other .chat-bubble {
  background-color: #f0f2f5;
  color: #363636;
  border-bottom-left-radius: 3px;
}

.chat-message.is-mine .chat-bubble {
  background-color: #8badaf;
  color: #fff;
  border-bottom-right-radius: 3px;
}

.chat-system {
  align-self: center;
  max-width: 80%;
  text-align: center;
  font-size: 0.8rem;
  color: #7a7a7a;
  background-color: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 0.35rem 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-time {
  white-space: nowrap;
}

/* The log scrolls on its own; new messages pin it (and the page) to the bottom */
.chat-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.chat-compose {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ececec;
}

/* Reply box on the left, a side box (eg. Presence) on the right; stacked on mobile. */
.chat-compose.has-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 16rem);
  gap: 2rem;
  align-items: stretch;
}

.chat-compose-main,
.chat-compose-side,
.chat-compose-side > div,
.chat-compose-side #chatPresence {
  min-width: 0;
}

.chat-compose-side > div,
.chat-compose-side #chatPresence {
  height: 100%;
}

@media screen and (max-width: 768px) {
  .chat-compose.has-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.chat-compose-input {
  min-height: 4.5rem;
  resize: vertical;
}

.chat-compose-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.chat-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .chat-message,
  .chat-system {
    max-width: 100%;
  }

  /* Mobile cards lay the no-rows text and Add button out side by side. */
  .table-no-rows > .content + * {
    margin-left: 0.75rem;
  }
}

/* Narrow centred page, eg. the team-side new chat page. The public team chat
   page has its own stylesheet: public_page.css. */
.page-chat {
  max-width: 700px;
  margin: 0 auto;
}

.page-chat .card-content {
  padding-top: 2.5rem;
}

aside.aside .aside-tools .aside-logo {
    display: block;
    width: 5.25rem;
    max-width: 55%;
    margin: 0 auto;
}

aside.aside .aside-tools .aside-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Shared form and authentication patterns from Tapitalee. */
.form-component .input,
.form-component .textarea,
.slim-form .input,
.slim-form .textarea { font-family: monospace; }
.form-component textarea,
.slim-form textarea { min-height: 3em; resize: vertical; }
.field-label { margin-bottom: .5rem; }
.field.is-grouped { flex-wrap: wrap; gap: .75rem; }
.field.is-grouped > .control:not(:last-child) { margin-right: 0; }

.instructions-card {
  display: block;
  position: relative;
  color: inherit;
  border: 1px solid #d5e8cb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(24,28,33,.04);
  padding: 1.5rem;
  background: #f2ffeb;
  overflow-wrap: anywhere;
}
.instructions-card:not(:last-child) { margin-bottom: 1.5rem; }
.instructions-card-content { font-size: .875em; }
.instructions-card.is-warning { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.instructions-card.is-danger { background: #fdf4f5; border-color: #f0d4d9; color: #763d48; }
.instructions-card.is-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.instructions-card.is-light { background: #f5f5f5; border-color: #dbdbdb; }
.instructions-card strong { color: inherit; }
.instructions-card > .delete { position: absolute; top: .5rem; right: .5rem; }
.instructions-card > .jb-notification-dismiss {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  padding: .25rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.instructions-card > .jb-notification-dismiss svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.instructions-card > .jb-notification-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.instructions-card:has(> .delete, > .jb-notification-dismiss) { padding-right: 2.5rem; }

.form-errors {
  margin-top: .75rem;
  padding: .75rem 1rem;
  border: 1px solid #f0d4d9;
  border-left: 3px solid #c76b7b;
  border-radius: 6px;
  background: #fdf4f5;
  color: #763d48;
  font-size: .875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.form-errors ul { margin: 0; padding: 0; list-style: none; }
.form-errors li + li { margin-top: .25rem; }
.form-errors-title { margin-bottom: .375rem; color: inherit; font-size: inherit; font-weight: 600; }
.form-errors-summary { margin-top: 0; margin-bottom: 1.5rem; }

.form-checkbox { display: inline-flex; align-items: center; gap: .6em; cursor: pointer; line-height: 1.5em; }
.form-checkbox input[type=checkbox] {
  appearance: none;
  margin: 0;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.form-checkbox input[type=checkbox]:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%232693C7' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  background-size: 65%;
}
.form-checkbox input:focus-visible { outline: 2px solid #2693c7; outline-offset: 2px; }
.form-checkbox input:disabled { opacity: .5; cursor: not-allowed; }

.radio-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .75rem; }
.slim-form .radio-buttons { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.radio-button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .875rem 2.5rem .875rem 1rem;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.radio-button:hover { border-color: #b5b5b5; }
.radio-button:has(input:checked) { border-color: #363636; background: #f5f5f5; }
.radio-button:has(input:focus-visible) { outline: 2px solid #3273dc; outline-offset: 2px; }
.radio-button.is-danger { border-color: #f14668; }
.radio-button.is-disabled, .radio-button:has(input:disabled) { cursor: not-allowed; opacity: .5; background: #f5f5f5; }
.radio-button input { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.radio-button-title { font-weight: 600; color: #363636; }
.radio-button-description { font-size: .85rem; color: #7a7a7a; }

.checkbox-buttons { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.checkbox-button { background: #fff; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.checkbox-button:has(input:checked) { border-color: #363636; background: #e8e8e8; }
.checkbox-button input { top: 1.35rem; width: 1.1rem; height: 1.1rem; }

.radio-buttons[id^="oncall-"] { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
@media screen and (max-width: 900px) { .radio-buttons[id^="oncall-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 480px) { .radio-buttons[id^="oncall-"] { grid-template-columns: 1fr; } }
td.oncall-user { width: 1%; white-space: nowrap; vertical-align: middle; }
td.oncall-preference { vertical-align: middle; }

.grand-buttons { display: flex; flex-wrap: wrap; gap: 2rem; }
.grand-button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  width: 18rem;
  max-width: 100%;
  padding: .875rem 2.75rem .875rem 1rem;
  border: 1px solid #363636;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(24,28,33,.04);
  background: #fff;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.grand-button:hover, .grand-button:focus-visible { color: inherit; background: #f5f5f5; }
.grand-button:focus-visible { outline: 2px solid #3273dc; outline-offset: 2px; }
.grand-button.is-disabled { cursor: not-allowed; opacity: .6; pointer-events: none; }
.grand-button-icon { position: absolute; top: .875rem; right: .875rem; display: flex; color: #363636; }
.grand-button-icon svg { width: 1.25rem; height: 1.25rem; }
.grand-button-body { display: flex; flex-direction: column; gap: .25rem; }
.grand-button-title { font-weight: 600; color: #363636; }
.grand-button-description { font-size: .85rem; color: #7a7a7a; }

.card.auth-card { border-radius: 20px; box-shadow: 0 16px 40px -16px rgba(24,28,33,.18); }
.auth-card > .card-header,
.auth-card > .card-header > .card-header-title { border-radius: 19px 19px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .auth-card { animation: auth-card-enter 550ms cubic-bezier(.22,1,.36,1) backwards; }
}
@keyframes auth-card-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media screen and (max-width: 951px) {
  .instructions-card { padding: 1rem; }
  .instructions-card.content-width { width: auto; }
}

/* Pagingteam shells retain their own branding and alert/navigation behavior. */
.public-header {
  padding: .75rem 1.5rem;
  background: linear-gradient(135deg, #17191e, #2e323a);
}
.public-logo { display: inline-flex; width: 75px; max-width: 100%; }
.public-logo svg { display: block; width: 100%; height: auto; }
.public-header.is-auth .public-logo { width: 100px; }
.auth-divider {
  margin: 1.5rem 0;
  color: #7a7a7a;
  font-size: .75rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.aside-user { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; min-width: 0; }
.aside-user .is-user-avatar { flex-shrink: 0; }
.aside-user-name { min-width: 0; color: #727c8f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-section-gap { margin-top: .75rem; }
button.navbar-item,
.table-tool-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.table-tool-button { display: inline-flex; align-items: center; justify-content: center; padding: .25rem; }
button.navbar-item:focus-visible,
.table-tool-button:focus-visible { outline: 2px solid #3273dc; outline-offset: -2px; }
button.grand-button { font: inherit; text-align: left; }

/* Keep long team names and form descriptions within their flex/grid tracks. */
.dashboard-hero .level,
.dashboard-hero .level-right { gap: 1rem; flex-wrap: wrap; }
.dashboard-hero .grand-buttons { gap: 1rem; }
.dashboard-hero .level-left,
.dashboard-hero .level-right,
.dashboard-hero .level-item { min-width: 0; max-width: 100%; }
.dashboard-stat,
.form-field-description { overflow-wrap: anywhere; }
.chat-meta { flex-wrap: wrap; }
.form-component .control,
.slim-form .control { min-width: 0; }
.form-component .input:focus-visible,
.form-component .textarea:focus-visible,
.slim-form .input:focus-visible,
.slim-form .textarea:focus-visible { outline: 2px solid #3273dc; outline-offset: 2px; }

@media screen and (max-width: 951px) {
  .select-menu-trigger,
  .select-menu:not(.is-enhanced) .select-menu-native { font-size: 16px; }
}

/* Choose plan page: two big plan boxes side by side. */
.plan-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  .plan-boxes { grid-template-columns: minmax(0, 1fr); }
}

.plan-box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid rgba(24,28,33,.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(24,28,33,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan-box:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(24,28,33,.25); }
.plan-box.is-featured { border-color: #2693c7; box-shadow: 0 8px 24px -10px rgba(38,147,199,.45); }
.plan-box.is-current { border-color: #48c78e; background: linear-gradient(180deg, #f6fffa 0%, #fff 40%); }
.plan-box.is-unavailable { opacity: .55; filter: grayscale(1); background: #f7f7f7; }
.plan-box.is-unavailable:hover { transform: none; box-shadow: 0 2px 6px rgba(24,28,33,.04); }

.plan-box-badge {
  position: absolute;
  top: -.8rem;
  left: 1.5rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: #48c78e;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.plan-box-badge.is-featured { background: #2693c7; }

.plan-box-name { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; color: #363636; }
.plan-box-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.25rem; }
.plan-box-currency { font-size: .9rem; font-weight: 600; color: #7a7a7a; }
.plan-box-amount { font-size: 2.75rem; font-weight: 800; line-height: 1; color: #363636; }
.plan-box-period { font-size: .9rem; color: #7a7a7a; }

.plan-box-features { flex: 1 1 auto; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.plan-box-features li { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; border-top: 1px solid #f0f0f0; line-height: 1.4; }
.plan-box-features li:first-child { border-top: 0; }
.plan-box-features li.is-missing { color: #a0a0a0; text-decoration: line-through; }
.plan-feature-icon { flex-shrink: 0; width: 1.25rem; font-weight: 700; text-align: center; }
.plan-feature-icon.is-included { color: #257953; }
.plan-feature-icon.is-missing { color: #c0c0c0; text-decoration: none; }

.plan-box-note {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: .85rem;
}
.plan-box-action { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .plan-box { transition: none; }
  .plan-box:hover { transform: none; }
}