/* Chief Electron Layout */
/* The same sign-in card as the browser (layouts/auth.css), in the app's own
   frameless window. Three things differ: the bar carries a drag grip, it is
   translucent over whatever the window sits on, and the card casts no shadow —
   a shadow renders into a region the app doesn't draw and the OS still
   hit-tests it. */

/* base/reset.css reserves a scrollbar gutter on html so growing pages don't
   shift sideways. Here it reserves a 10px strip of transparent, unclickable
   window down the right edge, and nothing in this window scrolls anyway. */
html:has(> body.electron-layout) {
  scrollbar-gutter: auto;
  overflow: hidden;
}

/* The window is the card, so the card fills it edge to edge. Any gutter here
   would be transparent to look at and still solid to the OS, which is a strip
   of window that swallows clicks meant for whatever is behind it. */
body.electron-layout {
  background: transparent;
  height: 100vh;
  display: flex;
  padding: 0;
  user-select: none;
  overflow: hidden;
}

.electron-container {
  width: 100%;
  height: 100%;
}

.electron-layout .auth-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

/* One height for every step, so the window doesn't twitch between screens. The
   window is roomier than the panel's content on most steps, so it gets a wider
   margin than the browser card's. */
.electron-layout .auth-panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
}

/* Released builds size this window themselves, and have shipped it at three
   different heights, so the slack is never a known quantity. Two auto margins
   split it evenly: the content sits centred in the panel and the trailing line
   holds the bottom edge, rather than the whole page stacking up under the bar
   with a pool of empty panel beneath it. A view's trailing <script> draws no
   box, so the bottom margin goes on the last child that does. */
.electron-layout .auth-panel > :first-child {
  margin-top: auto;
}

.electron-layout .auth-panel > :nth-last-child(1 of :not(script)) {
  margin-top: auto;
}

.electron-layout .auth-bar {
  background-color: var(--panel-bar-bg);
  backdrop-filter: var(--backdrop-filter);
  -webkit-backdrop-filter: var(--backdrop-filter);
}

/* The bar is this window's title bar, so all of it drags. The grip is the
   affordance that says so, not the only part that works — and the window's
   transparent margin drags nothing, or a click on the ground behind the card
   would pick the window up. */
.electron-layout .auth-bar {
  -webkit-app-region: drag;
}

body.in-electron .auth-bar-grip {
  display: block;
}

/* Connection status, hidden until the cable reconnects or drops */
.electron-connection-status {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  border: 1px solid;
  display: none;
}

.electron-connection-status.visible {
  display: block;
  animation: fadeInDown 0.3s ease;
}

.electron-connection-status.reconnecting {
  background: #fffbeb;
  border-color: #fde68a;
  color: var(--panel-caution);
}

.electron-connection-status.disconnected {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--panel-danger-text);
}

/* Invitation screens, the one other thing this window shows */
.invite-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--light-text-secondary);
}

.invite-benefits li::before {
  content: "✓";
  color: var(--panel-verified);
  margin-right: var(--spacing-sm);
}

.invite-note {
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--light-text-secondary);
}

.invite-disclosure {
  padding: var(--spacing-md);
  background: var(--light-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

/* The OAuth success page's meta-refresh sits on the navy ground, so it keeps a
   spinner drawn for that ground rather than the panel's. */
.electron-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(from var(--color-primary) r g b / 0.3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}