/* App modals */

.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.app-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: min(640px, 90vh);
  background: var(--bg-panel);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  isolation: isolate;
}

/* Help modal: sizes to its content (opening a pill grows it, up to
   .app-modal's max-height). Its body's bottom padding is pulled to 16px so the
   three vertical gaps read as one rhythm — above the FAQ list (from
   .app-modal-header's 16px padding-bottom), between the list and the version
   line (.help-version's margin-top), and below the version line. */
.app-modal--help .app-modal-body {
  padding-bottom: 16px;
}

.app-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.app-modal-close img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.app-modal-close:hover {
  background: var(--bg-hover);
}

.app-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 48px 16px;
  flex-shrink: 0;
}

.app-modal-title {
  font-size: 16px;
  font-weight: 700;
  text-shadow: var(--text-shadow);
  margin-bottom: 12px;
}

.app-modal-icon {
  width: 40px;
  height: 40px;
  opacity: 0.9;
}

.app-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 20px 20px;
}

.app-modal-placeholder {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 32px 16px 48px;
}

/* Trust-on-first-use (TrustServerModal) */

.trust-fingerprint {
  display: block;
  margin: 10px 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--text-primary);
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-sm);
}

.trust-details {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -4px;
}

/* Connections */

.connections-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.connection-card {
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition);
}

.connection-card--editing {
  border-color: var(--outline);
}

.connection-card-main {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 14px 12px;
}

.connection-card-status,
.connection-card-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.connection-card-status {
  align-self: center;
}

.connection-card-status img,
.connection-card-edit img {
  width: 20px;
  height: 20px;
}

.connection-card-status:hover,
.connection-card-edit:hover {
  background: var(--bg-hover);
}

.connection-card-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.connection-field {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), opacity var(--transition);
}

/* A remembered connection has no password to show, so the box says so
   instead. Italic marks it as a status message rather than a value the
   user typed — the moment they type, it becomes an ordinary field. */
.connection-field--remembered::placeholder {
  font-style: italic;
  opacity: 0.85;
}

.connection-field:read-only {
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
  border-color: transparent;
  cursor: default;
  opacity: 0.85;
}

.connection-field:focus:not(:read-only) {
  border-color: var(--outline);
}

.connection-card-actions {
  display: flex;
  border-top: 1px solid var(--outline-subtle);
}

.connection-action {
  flex: 1;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: var(--bg-toolbar);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
}

.connection-action + .connection-action {
  border-left: 1px solid var(--outline-subtle);
}

.connection-action:hover {
  background: var(--bg-hover-strong);
}

.connections-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition), opacity var(--transition);
}

.connections-add img {
  width: 28px;
  height: 28px;
  opacity: 0.75;
}

.connections-add:hover:not(:disabled) {
  background: var(--bg-hover);
}

.connections-add:hover:not(:disabled) img {
  opacity: 1;
}

.connections-add:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Confirm dialog */

.confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-panel);
  border-radius: inherit;
}

.confirm-dialog {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  background: var(--bg-menu);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.confirm-dialog-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-btn {
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.confirm-btn--cancel {
  background: var(--bg-toolbar);
  color: var(--text-primary);
}

.confirm-btn--remove {
  background: rgba(180, 60, 60, 0.35);
  border-color: rgba(200, 80, 80, 0.5);
  color: var(--text-primary);
}

.confirm-btn:hover {
  background: var(--bg-hover-strong);
}

/* Settings modal */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-section + .settings-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--outline-subtle);
}

.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
}

.settings-row--toggle {
  cursor: pointer;
}

.settings-row--toggle:hover {
  background: var(--bg-hover);
  border-color: var(--outline);
}

.settings-row-label {
  font-weight: 500;
}

.settings-row--action {
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.settings-row--action:hover {
  background: var(--bg-hover-strong);
  border-color: var(--outline);
}

.settings-toggle {
  position: relative;
  width: 34px;
  height: 18px;
  margin: 0;
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--transition), background var(--transition);
}

.settings-toggle:checked {
  background: rgba(86, 128, 194, 0.35);
  border-color: var(--bg-selected);
}

.settings-toggle:checked::after {
  transform: translateX(16px);
  background: var(--text-primary);
}

/* User avatar */

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-input);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-avatar--fallback {
  padding: 3px;
  background: var(--bg-toolbar);
}

.user-avatar--fallback img {
  object-fit: contain;
  opacity: 0.85;
}

/* Revision detail modal */

.app-modal--revision {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: min(680px, 90vh);
  background: var(--bg-panel);
}

.revision-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 48px 12px 20px;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.revision-modal-identity {
  min-width: 0;
}

.revision-modal-name {
  font-size: 15px;
  font-weight: 700;
  text-shadow: var(--text-shadow);
  line-height: 1.2;
}

.revision-modal-email {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.revision-modal-meta {
  display: flex;
  gap: 16px;
  padding: 0 20px 12px;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.revision-modal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.revision-modal-meta-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.revision-modal-meta-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.revision-modal-description {
  margin: 0 20px 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.revision-modal-files {
  flex: 1;
  min-height: 0;
  margin: 0 20px;
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel-inner);
}

.revision-file-list {
  list-style: none;
  overflow: auto;
  flex: 1;
  min-height: 120px;
  max-height: 220px;
  background: var(--bg-panel-inner);
}

.revision-file-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  padding: 0 10px;
  height: 24px; /* fixed: windowed list (RevisionDetailModal) positions by row index */
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: left;
  border: none;
  background: var(--bg-panel-inner);
  color: var(--text-primary);
  cursor: default;
  transition: background var(--transition);
  position: relative;
  z-index: 0;
}

.revision-file-row--alt {
  background: var(--bg-row-alt);
}

.revision-file-row:hover:not(.revision-file-row--selected) {
  background: var(--bg-hover);
}

.revision-file-row--selected {
  background: var(--bg-selected-row);
}

.revision-file-row--selected:hover,
.revision-file-row--selected.revision-file-row--focused {
  background: var(--bg-selected-row-hover);
}

.revision-file-row--focused:not(.revision-file-row--selected) {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--outline);
}

.app-modal--revision:focus {
  outline: none;
}

.revision-file-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.revision-file-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revision-file-type {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.55;
}

.revision-modal-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px 18px;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.revision-pill-btn {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-toolbar);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  line-height: 1.3;
}

.revision-pill-btn:hover {
  background: var(--bg-hover-strong);
  border-color: var(--outline);
}

.revision-pill-btn--danger {
  background: #4a2828;
  border-color: #8a4545;
}

.revision-pill-btn--danger:hover {
  background: #5c3232;
  border-color: #a05050;
}

/* Submit modal (shares the revision-detail card) */

.submit-description {
  font-family: var(--font-ui);
  color: var(--text-primary);
  resize: vertical;
  min-height: 54px;
  outline: none;
}

.submit-description:focus {
  border-color: var(--outline);
}

.submit-description::placeholder {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.65;
}

.submit-file-row--excluded {
  opacity: 0.45;
}

.submit-hint {
  margin: 0 20px 8px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
  flex-shrink: 0;
}

.submit-hint--warning {
  color: var(--status-orange);
}

.revision-pill-btn--primary {
  background: #2d4a76;
  border-color: #4a6ea5;
}

.revision-pill-btn--primary:hover {
  background: #38598c;
  border-color: #5b82bd;
}

.revision-pill-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.revert-confirm-dialog--primary {
  background: linear-gradient(180deg, #28395a 0%, #182030 100%);
  border: 1px solid #5079b3;
}

/* Revert confirm */

.revert-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: inherit;
}

.revert-confirm-dialog {
  width: 100%;
  max-width: 300px;
  padding: 20px 18px 16px;
  text-align: center;
  background: linear-gradient(180deg, #5a2828 0%, #301818 100%);
  border: 1px solid #a05050;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.revert-confirm-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  display: block;
}

.revert-confirm-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: var(--text-shadow);
}

.revert-confirm-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.revert-confirm-actions {
  display: flex;
  gap: 8px;
}

.revert-confirm-actions .revision-pill-btn {
  flex: 1;
}

/* File-control popups: same card as the revert confirm, but app-level
   (fixed overlay) and with a grey single-"Okay" info variant. */

.cbm-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.42);
}

.cbm-confirm-dialog {
  width: 100%;
  max-width: 300px;
  padding: 20px 18px 16px;
  text-align: center;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.cbm-confirm-dialog--danger {
  background: linear-gradient(180deg, #5a2828 0%, #301818 100%);
  border: 1px solid #a05050;
}

.cbm-confirm-dialog--info {
  background: linear-gradient(180deg, #464646 0%, #262626 100%);
  border: 1px solid #6e6e6e;
}

/* Orange sibling of the danger card: conflicts that need attention but are
   not (yet) blocking, e.g. a teammate checking out a file you have edits on. */
.cbm-confirm-dialog--warning {
  background: linear-gradient(180deg, #5a4228 0%, #302218 100%);
  border: 1px solid #a07850;
}

.cbm-confirm-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  display: block;
}

.cbm-confirm-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: var(--text-shadow);
}

.cbm-confirm-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}

.cbm-confirm-actions {
  display: flex;
  gap: 8px;
}

.cbm-confirm-actions .revision-pill-btn {
  flex: 1;
}

/* Read-only, scrollable file list inside an cbm-confirm dialog (revert warning,
   submit conflicts, stale edits). Widen the card so paths fit. */
.cbm-confirm-dialog:has(.cbm-filelist) {
  max-width: 460px;
}

.cbm-filelist {
  margin: 0 0 16px;
  text-align: left;
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-panel-inner);
}

.cbm-filelist-head {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--outline-subtle);
}

.cbm-filelist-head-path {
  flex: 1;
  min-width: 0;
}

.cbm-filelist-head-note {
  flex-shrink: 0;
  max-width: 45%;
}

.cbm-filelist-list {
  min-height: 0;
  max-height: 200px;
}

.cbm-filelist-row {
  cursor: default;
}

.cbm-filelist-row:hover {
  background: var(--bg-panel-inner);
}

.cbm-filelist-row.revision-file-row--alt:hover {
  background: var(--bg-row-alt);
}

.cbm-filelist-note {
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Single-line text prompt inside an cbm-confirm card (New Folder). */
.cbm-prompt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 6px;
  text-align: left;
}

.cbm-prompt-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Same dark input recipe as .server-config-field / .account-input. */
.cbm-prompt-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color var(--transition);
}

.cbm-prompt-input:focus {
  border-color: var(--outline);
}

/* Kept in the layout even when empty, so the card doesn't jump a row taller
   the moment an error appears under the field. */
.cbm-prompt-error {
  font-size: 11px;
  line-height: 1.4;
  color: #ff9b9b;
  text-align: left;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.cbm-prompt-error--hidden {
  visibility: hidden;
}

/* Connection card: workspace folder row + errors + active state */

.connection-card--active {
  border-color: color-mix(in srgb, var(--availability-green-base) 60%, var(--outline-subtle));
}

.connection-workspace-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.connection-field--workspace {
  flex: 1;
  font-family: var(--font-mono);
}

/* Compact picker button styled to match the workspace path field beside it. */
.connection-action--browse {
  flex: none;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  background: var(--bg-input);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  transition: background var(--transition), border-color var(--transition);
}

.connection-action--browse:hover {
  background: var(--bg-hover-strong);
  border-color: var(--outline);
}

.connection-card-error {
  margin: 0;
  padding: 0 14px 10px 52px;
  font-size: 11px;
  color: #e08080;
}

/* Login / Projects pages (organization modal) */

.projects-subtitle {
  margin: -4px 0 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.login-form .connection-field {
  padding: 8px 10px;
  font-size: 12px;
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.connection-action--login {
  margin-top: 4px;
  border-radius: var(--radius-md);
  background: var(--bg-toolbar);
}

.connection-action--login:hover:not(:disabled) {
  background: var(--bg-hover-strong);
}

.connection-action--login:disabled {
  opacity: 0.55;
  cursor: default;
}

.connection-card-error--flush {
  padding: 0 2px;
}

.project-card-name {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.project-card-subtext {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

.project-join-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.project-join-row .connection-field {
  flex: 1;
}

.projects-logout {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-toolbar);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.projects-logout:hover {
  background: var(--bg-hover-strong);
  border-color: var(--outline);
}

/* Account modal */

.account-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 10px;
}

.account-avatar-preview {
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
}

.account-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-actions {
  display: flex;
  gap: 8px;
}

.account-field-row {
  gap: 12px;
}

.account-input {
  flex: 1;
  max-width: 60%;
  background: var(--bg-input);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color var(--transition);
}

.account-input:focus {
  border-color: var(--outline);
}

.account-input:read-only {
  color: var(--text-muted);
}

.account-field-hint {
  margin: 0;
  padding: 0 10px;
  font-size: 10px;
  color: var(--text-disabled);
}

.account-error {
  margin: 0;
  font-size: 11px;
  color: #e08080;
}

.account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.account-saved-note {
  font-size: 11px;
  color: var(--availability-green-base);
}

/* Help FAQ */

.help-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-faq-item {
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition);
}

.help-faq-item:hover {
  border-color: var(--outline);
}

.help-faq-item--open {
  border-color: var(--outline);
}

.help-faq-question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: var(--text-shadow);
  transition: background var(--transition);
}

.help-faq-question:hover {
  background: var(--bg-hover);
}

.help-faq-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform var(--transition);
}

.help-faq-item--open .help-faq-chevron {
  transform: rotate(90deg);
}

.help-faq-question-text {
  flex: 1;
}

.help-faq-answer {
  margin: 0;
  padding: 0 14px 14px 36px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.help-version {
  margin: 16px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}

.help-version-number {
  opacity: 0.55;
}

/* Second line of the same footer block, so it hangs off the version line
   rather than opening a fourth gap in the modal's 16px rhythm (see
   .app-modal--help above). Same faint treatment as the version number. */
.help-copyright {
  margin: 3px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.55;
}

/* ---- Device manager (login limit modal + Manage Devices panel) ------------ */

.device-modal-intro {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.device-line-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.device-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-sm);
}

.device-line-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.device-line-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-line-host {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-line-checkouts {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.device-line-checkouts--active {
  color: var(--status-orange);
}

.device-line-remove,
.device-card-remove,
.device-file-checkin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.device-line-remove {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.device-line-remove:hover:not(:disabled),
.device-card-remove:hover:not(:disabled),
.device-file-checkin:hover:not(:disabled) {
  background: var(--bg-hover);
}

.device-line-remove img,
.device-card-remove img {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.device-line-remove:disabled,
.device-card-remove:disabled,
.device-file-checkin:disabled {
  opacity: 0.4;
  cursor: default;
}

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

.device-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Panel (Manage Devices) — roomier cards, one per device. */
.devices-panel {
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.devices-panel-notice {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.device-card {
  position: relative;
  background: var(--bg-panel-inner);
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.device-card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
}

.device-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 30px;
  margin-bottom: 10px;
}

.device-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.device-card-name {
  font-weight: 700;
  color: var(--text-primary);
}

.device-card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--status-pale-green);
  border: 1px solid var(--status-pale-green);
  border-radius: 999px;
  padding: 1px 7px;
}

.device-card-owner {
  font-size: 11px;
  color: var(--text-muted);
}

.device-card-host {
  font-size: 11px;
  color: var(--text-muted);
}

.device-card-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.device-card-nofiles {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Collapsible checkout summary: a caret + "N files checked out" that toggles
   the file list, mirroring the repo folder-tree disclosure control. */
.device-files-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
}

.device-files-toggle:hover {
  color: var(--text-primary);
}

.device-files-toggle .tree-toggle-icon {
  width: 12px;
  height: 12px;
  opacity: 0.75;
  flex-shrink: 0;
}

.device-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.device-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}

.device-file-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

.device-file-path {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-file-project {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.device-file-checkin {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.device-file-checkin img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}
