/*
 * Feature 91.3 — Application-shell convergence.
 *
 * Presentation-only Workspace overrides that align the repeat-use application
 * chrome with the already-compacted Editor shell. The Editor remains structurally
 * separate and no runtime/component extraction is introduced here.
 */

@media (min-width: 901px) {
  .workspace-overview-page .workspace-topbar {
    gap: 10px;
    padding: 9px 18px;
  }

  .workspace-overview-page .workspace-topbar .brand-mark {
    width: 30px;
    height: 30px;
  }

  .workspace-overview-page .workspace-topbar .brand-word {
    font-size: 21px;
  }

  .workspace-overview-page .workspace-topbar .topbar-actions {
    gap: 7px;
  }
}

@media (min-width: 901px) and (max-width: 1650px) {
  .workspace-overview-page .workspace-topbar {
    padding-inline: 14px;
  }
}

.workspace-overview-page .workspace-nav .nav-link {
  font-family: var(--ic-font-sans);
  font-weight: var(--ic-weight-medium);
  letter-spacing: 0;
}

/*
 * Feature 92 — Backup header chip and drawer (context/specs/feature-92-workspace-ia-consolidation.md §3.4).
 * Lives here, in the always-loaded shell stylesheet, because the optional signed-in Backup
 * module's own stylesheet only loads once that module does; the chip and drawer chrome must
 * still render for signed-out and offline visitors.
 */
.backup-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ic-control-height, 2.75rem);
  padding: 0 var(--ic-space-4, 1rem);
  border: 1px solid var(--ic-color-border, rgba(36, 55, 86, 0.14));
  border-radius: var(--ic-radius-pill, 999px);
  background: var(--ic-color-surface, #fff);
  color: var(--ic-color-text, #15243a);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.backup-chip:hover { border-color: var(--ic-color-action, #b23b3b); }
.backup-chip:focus-visible { outline: none; box-shadow: var(--ic-focus-ring, 0 0 0 3px rgba(178, 59, 59, 0.22)); }
.backup-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ic-color-border, #b6bdc9);
  flex-shrink: 0;
}
.backup-chip[data-tone="none"] .backup-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--ic-color-text-muted, #52627a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v7A1.5 1.5 0 0 1 13.5 11H9.8l.4 1.2h1.3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h1.3l.4-1.2H2.5A1.5 1.5 0 0 1 1 9.5v-7Zm1.5-.5a.5.5 0 0 0-.5.5v6.5h12V2.5a.5.5 0 0 0-.5-.5h-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v7A1.5 1.5 0 0 1 13.5 11H9.8l.4 1.2h1.3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h1.3l.4-1.2H2.5A1.5 1.5 0 0 1 1 9.5v-7Zm1.5-.5a.5.5 0 0 0-.5.5v6.5h12V2.5a.5.5 0 0 0-.5-.5h-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.backup-chip[data-tone="stale"] .backup-chip-dot { background: var(--ic-color-warning, #c99a3d); }
.backup-chip[data-tone="current"] .backup-chip-dot { background: var(--ic-color-success, #5c7a6b); }
.backup-chip[data-tone="attention"] .backup-chip-dot { background: var(--ic-color-danger, #a6432e); }
.backup-chip[data-tone="attention"] { border-color: var(--ic-color-danger, #a6432e); color: var(--ic-color-danger, #a6432e); }

.backup-drawer {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: var(--ic-space-4, 1rem) var(--ic-space-4, 1rem) auto auto;
  padding: 0;
  border: none;
  border-radius: var(--ic-radius-panel, 1.125rem);
  box-shadow: var(--ic-shadow-overlay, 0 18px 48px rgba(9, 19, 34, 0.16));
  overflow: hidden;
}
.backup-drawer::backdrop { background: rgba(15, 23, 42, 0.32); }
.backup-drawer-panel {
  display: grid;
  gap: var(--ic-space-4, 1rem);
  max-height: calc(100vh - 32px);
  padding: var(--ic-space-5, 1.25rem);
  overflow-y: auto;
}
.backup-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-space-3, 0.75rem);
}
.backup-drawer-title { margin: 0; font-size: var(--ic-text-lg, 1.125rem); color: var(--ic-color-text, #15243a); }
.backup-drawer-close {
  appearance: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ic-color-text-muted, #52627a);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.backup-drawer-close:hover { background: var(--ic-color-canvas, #f2efe6); }
.backup-drawer-explainer {
  display: grid;
  gap: var(--ic-space-3, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.backup-drawer-explainer li { display: grid; gap: 2px; }
.backup-drawer-explainer strong { font-size: 13px; color: var(--ic-color-text, #15243a); }
.backup-drawer-explainer span { font-size: 12.5px; line-height: 1.45; color: var(--ic-color-text-muted, #52627a); }
.backup-drawer-download { display: grid; gap: var(--ic-space-2, 0.5rem); justify-items: start; padding-bottom: var(--ic-space-3, 0.75rem); }
.backup-drawer-download p { margin: 0; font-size: 13px; color: var(--ic-color-text-muted, #52627a); }
.backup-drawer-signed-out {
  display: grid;
  gap: var(--ic-space-3, 0.75rem);
  padding-top: var(--ic-space-3, 0.75rem);
  border-top: 1px solid var(--ic-color-border, rgba(36, 55, 86, 0.14));
}
.backup-drawer-signed-out p { margin: 0; font-size: 13px; color: var(--ic-color-text-muted, #52627a); }
.backup-drawer-body:not([hidden]) {
  padding-top: var(--ic-space-3, 0.75rem);
  border-top: 1px solid var(--ic-color-border, rgba(36, 55, 86, 0.14));
}

@media (max-width: 480px) {
  .backup-drawer { width: 100vw; margin: auto 0 0; border-radius: var(--ic-radius-panel, 1.125rem) var(--ic-radius-panel, 1.125rem) 0 0; }
  .backup-chip-label { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.backup-drawer-full-link {
  display: inline-block;
  margin-top: var(--ic-space-3, 0.75rem);
  color: var(--ic-color-text, #15243a);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

/* Workspace interface-language menu (feature 92 i18n). It reuses the market switcher's styles
 * (injected by loadMarketSwitcherStyles); this only adapts the option rows to <button> elements. */
.workspace-language .market-switcher-option {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  text-align: left;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.workspace-language .market-switcher-option:hover { background: var(--ic-paper, #f2efe6); }
.workspace-language .market-switcher-option.is-current { background: rgba(92, 122, 107, 0.08); cursor: default; }
.workspace-language .market-switcher-menu { width: min(240px, calc(100vw - 24px)); }

/* UX-044: at 320 px the backup chip wraps ("Saved on this device · Not backed up") instead of ending in "…". */
@media (max-width: 380px) {
  .backup-chip-label { max-width: 46vw; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; }
}