/* Grove base components - DS Mail Box handoff. Soft surfaces, hairline
   lines, one accent. Every colour comes from a --g-* token in tokens.css.
   Base type 13px Geist; IDs and shortcuts in Geist Mono; icons are
   Material Symbols Rounded (.icon). */

* { box-sizing: border-box; }

/* Component display rules (flex, grid) would otherwise beat the UA style and
   leave Stimulus-toggled panes visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--g-bg);
  color: var(--g-tx);
  font-family: var(--g-font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--g-acc-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--g-mono); }

.icon {
  font-family: var(--g-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-block;
  font-variation-settings: "FILL" 0;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  user-select: none;
}
.icon--fill { font-variation-settings: "FILL" 1; }

kbd, .kbd {
  font: 500 10.5px var(--g-mono);
  padding: 2px 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--g-line-strong);
  color: var(--g-tx-3);
  background: transparent;
}

/* ---- the app frame: 48px top bar across, 232px sidebar below ---- */

.frame { display: flex; flex-direction: column; min-height: 100vh; background: var(--g-bg); }
.shell { flex: 1; display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main { padding: 18px 22px; flex: 1; min-width: 0; }

/* ---- brand ---- */

.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--g-acc); color: var(--g-acc-tx);
}
.mark .icon { font-size: 15px; font-variation-settings: "FILL" 1; }
.mark--lg { width: 32px; height: 32px; border-radius: 8px; }
.mark--lg .icon { font-size: 21px; }
.wordmark { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }

/* ---- sidebar ---- */

.rail {
  background: var(--g-bg-sub);
  border-right: 1px solid var(--g-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 8px;
  min-height: 0;
}
.rail__section { display: flex; flex-direction: column; gap: 1px; }
.rail__filters { flex: 1; overflow-y: auto; gap: 1px; }
.rail__foot { display: flex; flex-direction: column; gap: 1px; padding-top: 8px; border-top: 1px solid var(--g-line); }

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--g-tx-3);
}
.label--section { height: 22px; display: flex; align-items: center; padding: 0 6px; margin: 4px 0 0; }

/* Workspace switcher: a card per workspace; the current one is raised. */
.ws { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 8px; color: var(--g-tx); text-decoration: none; }
.ws:hover { background: var(--g-bg-hover); text-decoration: none; }
.ws[aria-current="page"] { background: var(--g-bg); box-shadow: var(--g-shadow-sm); }
.ws__badge { width: 26px; height: 26px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: var(--g-blue-bg); color: var(--g-blue-fg); }
.ws__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws__name { font-weight: 600; font-size: 13px; }
.ws__addr { font-size: 11px; color: var(--g-tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar nav item: 28px row, label left, count right. */
.filter {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 28px; padding: 0 8px; border-radius: 6px;
  color: var(--g-tx-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.filter:hover { background: var(--g-bg-hover); color: var(--g-tx); text-decoration: none; }
.filter[aria-current="page"] { background: var(--g-bg-sel); color: var(--g-tx); font-weight: 600; }
.filter[aria-current="page"] .icon { font-variation-settings: "FILL" 1; color: var(--g-acc); }
.filter .icon { font-size: 17px; color: var(--g-tx-3); }
.filter > span:first-of-type:not(.icon), .filter__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter .chip--count { margin-left: auto; background: transparent; box-shadow: none; color: var(--g-tx-3); font-family: var(--g-font); font-weight: 500; padding: 0; }
.filter[aria-current="page"] .chip--count { color: var(--g-tx-2); }

/* Segmented control (two or three options welded together). */
.weld { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--g-bg-hover); }
.weld__item, .weld .btn {
  flex: 1; height: 24px; padding: 0 10px; border: 0; border-radius: 6px; box-shadow: none; cursor: pointer;
  font-family: inherit; text-decoration: none;
  background: transparent; color: var(--g-tx-2); font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.weld__item:hover { color: var(--g-tx); text-decoration: none; }
.weld__item .icon { font-size: 16px; }
.weld__item[aria-current="page"], .weld .btn[aria-current="page"] { background: var(--g-bg); color: var(--g-tx); box-shadow: var(--g-shadow-sm); }
.weld__item--disabled, .filter--disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- top bar ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0 12px 0 0;
  background: var(--g-bg-sub);
  border-bottom: 1px solid var(--g-line);
}
.topbar__brand { width: 232px; flex: none; display: flex; align-items: center; gap: 6px; padding-left: 10px; }
.topbar__home { display: flex; align-items: center; gap: 8px; color: var(--g-tx); text-decoration: none; }
.topbar__home:hover { text-decoration: none; }
.topbar__toggle { color: var(--g-tx-3); }

/* ---- collapsible panes: state on <html data-rail / data-side> ---- */
.pane-closed-icon { display: none; }
:root[data-rail="collapsed"] .topbar__toggle .pane-open-icon { display: none; }
:root[data-rail="collapsed"] .topbar__toggle .pane-closed-icon { display: inline-block; }
:root[data-rail="collapsed"] .topbar__brand { width: 56px; padding-left: 13px; }
:root[data-rail="collapsed"] .topbar__home { display: none; }
:root[data-rail="collapsed"] .shell { grid-template-columns: 56px minmax(0, 1fr); }
:root[data-rail="collapsed"] .rail { padding: 10px 6px; align-items: center; }
:root[data-rail="collapsed"] .rail .ws { justify-content: center; padding: 6px; }
:root[data-rail="collapsed"] .rail .ws__text,
:root[data-rail="collapsed"] .rail .filter__label,
:root[data-rail="collapsed"] .rail .chip--count,
:root[data-rail="collapsed"] .rail .label,
:root[data-rail="collapsed"] .rail .weld__label,
:root[data-rail="collapsed"] .rail .theme { display: none; }
:root[data-rail="collapsed"] .rail .weld { flex-direction: column; width: 40px; }
:root[data-rail="collapsed"] .rail .filter { justify-content: center; width: 40px; padding: 0; }
:root[data-rail="collapsed"] .rail .filter .icon { font-size: 19px; }
:root[data-rail="collapsed"] .rail__foot { width: 100%; align-items: center; }
.topbar__spacer { flex: 1; }

.search { width: 520px; max-width: 40vw; }
.search__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--g-tx); font: inherit; outline: none; padding: 0; }
.search__input::placeholder { color: var(--g-tx-3); }

.user { display: flex; align-items: center; gap: 8px; }
.user__meta { display: flex; flex-direction: column; line-height: 1.2; }
.user__name { font-size: 13px; font-weight: 500; }
.user__role { font-size: 11px; color: var(--g-tx-3); }

/* ---- buttons (ButtonComponent and legacy .btn share these) ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; min-width: 30px; padding: 0 10px;
  border: 0; border-radius: var(--g-r-btn);
  background: var(--g-bg); color: var(--g-tx);
  box-shadow: inset 0 0 0 1px var(--g-line-strong);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background 80ms linear;
}
.btn:hover { background: var(--g-bg-hover); text-decoration: none; }
.btn .icon { font-size: 18px; }
.btn--icon-only { padding: 0; }
.btn--primary { background: var(--g-acc); color: var(--g-acc-tx); box-shadow: none; font-weight: 500; }
.btn--primary:hover { background: color-mix(in srgb, var(--g-acc) 88%, black); }
.btn--ghost { background: transparent; color: var(--g-tx-2); box-shadow: none; }
.btn--ghost:hover { background: var(--g-bg-hover); color: var(--g-tx); }
.btn--subtle { background: var(--g-bg-hover); box-shadow: none; }
.btn--active, .btn[aria-current="page"] { background: var(--g-bg-hover); box-shadow: inset 0 0 0 1px var(--g-line-strong); font-weight: 600; }
.btn--danger { background: var(--g-bg); color: var(--g-red-fg); box-shadow: inset 0 0 0 1px var(--g-line-strong); }
.btn--danger:hover { background: var(--g-red-bg); }
.btn--sm, .btn--tiny { height: 24px; min-width: 24px; padding: 0 8px; font-size: 12px; }
.btn--sm .icon, .btn--tiny .icon { font-size: 16px; }
.btn--block { display: flex; width: 100%; margin-top: 16px; height: 32px; }
.btn .kbd { margin-left: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---- inputs ---- */

.input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 7px;
  background: var(--g-bg-input);
  color: var(--g-tx);
  box-shadow: inset 0 0 0 1px var(--g-line);
  font: inherit;
  font-size: 13px;
}
textarea.input { height: auto; padding: 8px 10px; line-height: 1.5; }
select.input { padding-right: 6px; }
.input:focus, .input:focus-visible, .search:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--g-acc), 0 0 0 3px var(--g-acc-soft);
}
.input::placeholder { color: var(--g-tx-3); }

/* InputComponent wrapper: icon, field, shortcut keys. */
.field {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px; border-radius: 7px;
  background: var(--g-bg-input); box-shadow: inset 0 0 0 1px var(--g-line);
}
.field--sm { height: 26px; }
.field .icon { color: var(--g-tx-3); }
.field__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--g-tx); font: inherit; padding: 0; }
.field__input::placeholder { color: var(--g-tx-3); }
.field__input:focus, .field__input:focus-visible { outline: none; box-shadow: none; }
.field:focus-within { box-shadow: inset 0 0 0 1.5px var(--g-acc), 0 0 0 3px var(--g-acc-soft); }

/* ---- chips (ChipComponent and legacy .chip) ---- */

.chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 18px; padding: 0 6px; border-radius: var(--g-r-chip);
  background: var(--g-gray-bg); color: var(--g-gray-fg);
  font-family: var(--g-font); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.chip--md { height: 22px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.chip .icon { font-size: 13px; }
.chip--md .icon { font-size: 14px; }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--g-line-strong); color: var(--g-tx-2); }
.chip--plain { background: transparent; padding: 0; }
.chip--blue    { background: var(--g-blue-bg);   color: var(--g-blue-fg); }
.chip--violet  { background: var(--g-violet-bg); color: var(--g-violet-fg); }
.chip--amber   { background: var(--g-amber-bg);  color: var(--g-amber-fg); }
.chip--red     { background: var(--g-red-bg);    color: var(--g-red-fg); }
.chip--green   { background: var(--g-green-bg);  color: var(--g-green-fg); }
.chip--orange  { background: var(--g-orange-bg); color: var(--g-orange-fg); }
.chip--gray    { background: var(--g-gray-bg);   color: var(--g-gray-fg); }
.chip--accent  { background: var(--g-acc-soft);  color: var(--g-acc-ink); }
/* Legacy names kept by existing views, mapped onto the status palette. */
.chip--count    { background: var(--g-gray-bg); color: var(--g-tx-2); font-weight: 600; }
.chip--won      { background: var(--g-green-bg); color: var(--g-green-fg); }
.chip--open     { background: var(--g-blue-bg); color: var(--g-blue-fg); }
.chip--closed   { background: var(--g-gray-bg); color: var(--g-gray-fg); }
.chip--archived { background: var(--g-gray-bg); color: var(--g-tx-3); }
.chip--type     { background: transparent; box-shadow: inset 0 0 0 1px var(--g-line-strong); color: var(--g-tx-2); }

/* ---- avatars (AvatarComponent: colour hashed from the name) ---- */

.avatar {
  position: relative; display: inline-flex; flex: none;
  align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #D6E6F7; color: #1F4B7A;
  font-size: 10px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
}
.avatar--sm { width: 20px; height: 20px; font-size: 8px; }
.avatar--md { width: 26px; height: 26px; }
.avatar--lg { width: 40px; height: 40px; font-size: 16px; }
.avatar--deep { width: 26px; height: 26px; }
.avatar__status { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--g-bg); }
.avatar__status--online { background: var(--g-online); }
.avatar__status--away   { background: var(--g-away); }
.avatar__status--ooo    { background: var(--g-ooo); }

/* Focus: accent ring, keyboard only. */
:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---- cards ---- */

.panel {
  background: var(--g-bg);
  border-radius: var(--g-r-card);
  box-shadow: var(--g-shadow-sm);
  overflow: hidden;
}

/* Card header: title left, actions right, hairline below. */
.band {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  background: var(--g-bg); color: var(--g-tx);
  border-bottom: 1px solid var(--g-line);
  font-size: 13px; font-weight: 600;
}
.band .chip--count { font-weight: 500; }

.page-title { font-size: 20px; font-weight: 650; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 8px; }
.page-sub { color: var(--g-tx-3); font-size: 12px; margin: 2px 0 0; }

/* Banners: info / ok / warn / error. */
.notice {
  display: flex; align-items: center; gap: 8px;
  border-radius: 8px; font-size: 13px; padding: 9px 12px; margin: 0 0 14px;
  background: var(--g-blue-bg); color: var(--g-blue-fg);
}
.notice--ok { background: var(--g-green-bg); color: var(--g-green-fg); }
.notice--alert { background: var(--g-red-bg); color: var(--g-red-fg); }
.notice--warn { background: var(--g-amber-bg); color: var(--g-amber-fg); }

/* ---- sign in: form left, a grove at first light right ---- */

.logo-mark { display: block; flex: none; }

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; background: var(--g-bg); }
.auth__side { display: flex; flex-direction: column; padding: 40px 56px; }
.auth__brand { display: flex; align-items: center; gap: 10px; }
.auth__wordmark { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.auth__form { width: 100%; max-width: 368px; margin: auto 0; padding: 48px 0; }
.auth__title { margin: 0; font-size: 38px; line-height: 1.08; font-weight: 650; letter-spacing: -.035em; color: var(--g-tx); }
.auth__sub { margin: 10px 0 30px; font-size: 15px; line-height: 1.5; color: var(--g-tx-2); }
.auth__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--g-tx); }
.auth__input { height: 42px; margin-bottom: 18px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.auth__submit { width: 100%; height: 42px; margin-top: 6px; font-size: 14px; border-radius: 8px; }
.auth__help { margin: 18px 0 0; font-size: 12px; color: var(--g-tx-3); }
.auth__foot { margin: 0; font-size: 12px; color: var(--g-tx-3); }

/* A grove at dusk: the monstera illustration (Rui Silvestre, Unsplash),
   darkened onto deep forest green, with a soft shade behind the cards so
   they stay readable. Drifts very slowly. */
.auth__art {
  position: relative; overflow: hidden; display: grid; place-items: center; padding: 48px;
  background: #0C2C21;
}
.auth__leaves {
  position: absolute; inset: -4%; pointer-events: none;
  background: url("/assets/signin-leaves-88c55127.webp") center / cover no-repeat;
  filter: brightness(.42) saturate(.9);
  animation: auth-drift 40s ease-in-out infinite alternate;
}
.auth__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 50%, rgba(8, 30, 22, .7), rgba(8, 30, 22, .25) 70%, transparent 100%);
}
.auth__art > .story { position: relative; z-index: 1; }
@keyframes auth-drift { from { transform: scale(1.02) translate(-8px, -6px); } to { transform: scale(1.06) translate(10px, 8px); } }
@media (prefers-reduced-motion: reduce) { .auth__leaves { animation: none; } }

/* The story: hidden pieces wait below and fade up when their step's class
   lands on the root; .s-out sends everything off before the loop restarts. */
.story { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.story__card, .story__reply, .story__done, .story__claim, .story__lang, .story__thinking, .story__text, .story__sent {
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.story__card, .story__reply, .story__done { opacity: 0; transform: translateY(18px); }
.story__card { padding: 16px 18px; border-radius: 14px; background: var(--g-bg); color: var(--g-tx); box-shadow: 0 18px 40px rgba(2, 14, 9, .45); }
.story__who { display: flex; align-items: center; gap: 10px; }
.story__name { display: flex; flex-direction: column; min-width: 0; }
.story__name strong { font-size: 14px; font-weight: 600; }
.story__name small { font-size: 12px; color: var(--g-tx-3); }
.story__age { margin-left: auto; font-size: 12px; color: var(--g-tx-3); }
.story__subject { margin: 12px 0 2px; font-size: 15px; font-weight: 600; }
.story__body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--g-tx-2); }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.story__status { display: inline-grid; }
.story__status > * { grid-area: 1 / 1; justify-self: start; transition: opacity .35s ease; }
.story__chip-done { opacity: 0; }
.story__lang { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--g-tx-3); }
.story__lang .icon { font-size: 15px; }
.story__claim { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 500; opacity: 0; transform: translateX(10px); }
.story__label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--g-violet-fg); }
.story__label .icon { font-size: 16px; }
.story__summary { background: var(--g-violet-bg); }
.story__thinking { margin: 0; font-size: 13px; color: var(--g-tx-3); }
.story__text { margin: 0; font-size: 13px; line-height: 1.55; opacity: 0; max-height: 0; overflow: hidden; }
.story__reply { align-self: flex-end; max-width: 86%; }
.story__bubble { margin: 0; padding: 12px 15px; border-radius: 14px 14px 4px 14px; background: var(--g-acc); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 14px 30px rgba(2, 14, 9, .4); }
.story__sent { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 6px 2px 0; font-size: 11px; color: #A9D6BE; opacity: 0; }
.story__sent .icon { font-size: 14px; }
.story__done { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #E6F4EC; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.story__done .icon { font-size: 17px; color: #7FD3A6; }

.s-mail .story__mail, .s-summary .story__summary, .s-reply .story__reply, .s-done .story__done { opacity: 1; transform: none; }
.s-claim .story__claim { opacity: 1; transform: none; }
.s-summary-text .story__thinking { display: none; }
.s-summary-text .story__text { opacity: 1; max-height: 6em; }
.s-sent .story__sent { opacity: 1; }
.s-resolved .story__chip-open { opacity: 0; }
.s-resolved .story__chip-done { opacity: 1; }
.s-out .story__card, .s-out .story__reply, .s-out .story__done { opacity: 0; transform: translateY(-14px); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .auth__side { padding: 28px 20px; }
  .auth__title { font-size: 32px; }
}

/* ---- theme picker ---- */

.theme { margin-top: 8px; }
.theme__label { margin: 0 0 6px; padding: 0 6px; }
.theme__btn { font-size: 11px; }

/* ---- settings ---- */

.settings { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 16px; }
.settings__stack { display: flex; flex-direction: column; gap: 18px; }

.grid-host { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }

.check { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; }
.check input { width: 16px; height: 16px; accent-color: var(--g-acc); }

.hint { color: var(--g-tx-3); font-size: 11px; line-height: 1.5; margin: 0 0 14px; }

.status {
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 16px;
}
.status--bad  { background: var(--g-red-bg); color: var(--g-red-fg); }
.status--good { background: var(--g-green-bg); color: var(--g-green-fg); }
.status--idle { background: var(--g-bg-sub); }
.status__title { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.status__detail { font-size: 11px; line-height: 1.5; margin: 0 0 8px; word-break: break-word; }
.status form { display: inline-block; }

/* Rows stay flat - no border, no shadow. */
.row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.row + .row { border-top: 1px solid var(--g-line); }
.row__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.grid-host--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Editable settings rows: the row is a <details> summary; the form opens under it. */
.row-edit + .row-edit, .row + .row-edit, .row-edit + .row { border-top: 1px solid var(--g-line); }
.row-edit > summary { list-style: none; cursor: pointer; }
.row-edit > summary::-webkit-details-marker { display: none; }
.row-edit > summary:hover { background: var(--g-bg-hover); }
.row-edit[open] > summary { background: var(--g-bg-sub); }
.row-edit__body { padding: 10px 14px 12px; background: var(--g-bg-sub); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.row-edit__form, .panel__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-edit__form .input, .panel__add .input { width: auto; flex: 1 1 140px; margin: 0; padding: 5px 8px; }
.row-edit__form select.input, .panel__add select.input { flex: 0 0 auto; }
.row-edit__tools { display: flex; gap: 6px; }
.row-edit__tools form { display: inline; }
.panel__add { padding: 10px 14px; border-top: 1px solid var(--g-line); background: var(--g-bg-sub); }
.panel__hint { padding: 0 14px 10px; margin: 0; background: var(--g-bg-sub); }
.check--inline { margin: 0; }

/* Product database properties on a customer. */
.props { margin-top: 12px; }
.props__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.props__head form { display: inline; }
.props__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0 0 6px; font-size: 11px; }
.props__list dt { color: var(--g-tx-3); }
.props__list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.props__test { padding: 8px 0 0; border: 0; background: transparent; }
.props__sql { font-size: 12px; line-height: 1.5; resize: vertical; }

.row__pos { color: var(--g-tx-3); font-size: 11px; width: 20px; }
.row__name small { display: block; font-size: 11px; color: var(--g-tx-3); font-weight: 400; }

@media (max-width: 1100px) {
  .settings { grid-template-columns: 1fr; }
}

/* Onboarding: setup steps and the workspace / add-team pages */
.steps { display: flex; gap: 6px 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 22px; font-size: 13px; color: var(--g-tx-3); }
.steps__item { display: inline-flex; align-items: center; gap: 7px; }
.steps__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--g-line); font-size: 11px; font-weight: 600; }
.steps__item[aria-current="step"] { color: var(--g-tx); font-weight: 600; }
.steps__item[aria-current="step"] .steps__num { background: var(--g-acc); border-color: transparent; color: var(--g-acc-tx); }
.steps__item--done .steps__num { color: var(--g-acc-ink); border-color: var(--g-acc-soft); }
.onboard { max-width: 620px; margin: 24px auto; }
.onboard .panel { margin-top: 16px; }
.onboard .hint { margin: 8px 0 0; }
.onboard__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rail__new-ws { color: var(--g-tx-3); }
.onboard .onboard__lead { margin: 0 0 14px; }