/* My Widgets — owned-widgets workspace (open / save / revert / versions).
   Tokens and the 3-6-9 spacing rule per css-guidelines.md. Mounted into the
   landing overlay's My Widgets tab (see landing.css for the shell/pane sizing). */

/* --- access-key gate --- */

.mw-gate {
  max-width: 420px;
  margin: var(--space-36) auto;
  text-align: center;
}

.mw-gate h3 {
  font-size: var(--font-18);
  color: var(--text-primary);
  margin-bottom: var(--space-9);
}

.mw-gate-hint {
  font-size: var(--font-12);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-18);
}

.mw-gate-form {
  display: flex;
  gap: var(--space-9);
}

.mw-gate-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-9) var(--space-12);
  font-size: var(--font-12);
  color: var(--text-primary);
  background: var(--space-opacity-60);
  border: 2px solid var(--blue-opacity-30);
  border-radius: var(--space-9);
}

.mw-gate-input:focus {
  outline: none;
  border-color: var(--blue-electric);
  box-shadow: 0 0 var(--space-12) var(--blue-opacity-40);
}

.mw-gate-error {
  margin-top: var(--space-12);
  font-size: var(--font-12);
  color: var(--error-red);
}

/* --- panel header --- */

.mw-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: 2px solid var(--blue-opacity-15);
}

.mw-org {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  font-size: var(--font-15);
  color: var(--text-primary);
}

.mw-plan-chip {
  color: var(--blue-electric);
  border-color: var(--blue-opacity-30);
}

.mw-usage {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  font-size: var(--font-9);
  color: var(--text-secondary);
}

.mw-topup-btn {
  flex: none;
}

.mw-current {
  flex: 1;
  min-width: 160px;
  font-size: var(--font-9);
  color: var(--text-secondary);
}

.mw-current strong {
  color: var(--green-ghost);
}

.mw-signout {
  flex: none;
  padding: var(--space-3) var(--space-9);
  font-size: var(--font-9);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

.mw-signout:hover {
  color: var(--text-primary);
}

/* --- widget list --- */

.mw-widgets {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.mw-empty {
  padding: var(--space-36) var(--space-18);
  font-size: var(--font-12);
  color: var(--text-muted);
  text-align: center;
}

.mw-widget {
  padding: var(--space-12);
  background: var(--space-opacity-40);
  border: 2px solid var(--blue-opacity-20);
  border-radius: var(--space-9);
}

.mw-widget.is-open {
  border-color: var(--green-ghost);
  background: var(--green-opacity-05);
}

.mw-widget-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
}

.mw-widget-icon {
  flex: none;
  font-size: var(--font-21);
  line-height: 1;
}

.mw-widget-title {
  min-width: 0;
  flex: 1;
}

.mw-widget-title h4 {
  font-size: var(--font-12);
  color: var(--text-primary);
}

.mw-widget-title p {
  margin-top: var(--space-3);
  font-size: var(--font-9);
  line-height: 1.5;
  color: var(--text-secondary);
}

.mw-widget-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-9);
}

.mw-danger {
  border-color: var(--warning-orange);
  color: var(--warning-orange);
}

.mw-danger:hover:not(:disabled) {
  border-color: var(--error-red);
  color: var(--error-red);
}

/* --- versions --- */

.mw-versions {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--blue-opacity-15);
}

.mw-versions-empty {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  font-size: var(--font-9);
  color: var(--text-muted);
  border-top: 1px solid var(--blue-opacity-15);
}

.mw-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-9);
  border-radius: var(--space-6);
}

.mw-version.is-pinned {
  background: var(--blue-opacity-10);
}

.mw-version-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.mw-version-actions {
  flex: none;
  display: flex;
  gap: var(--space-6);
}

.mw-version-actions .btn-sm.is-active {
  background: var(--blue-electric);
  color: var(--space-deep);
  border-color: var(--blue-electric);
}