/* Callio's adapter boundary: APP-SHELL owns the outer frame; the canvas stays app-owned. */
:root {
  --accent: #c84f2f;
  --accent-soft: #f4d2c6;
  --accent-hover: rgba(200, 79, 47, .15);
  --banner-height: 46px;
}

/* APP-UI's NumberBadge ships with a blue gradient.  Callio's linked card
   badge must follow the same persisted Before/After color as its diagram
   anchor, while retaining the framework-owned diameter and numeral styling. */
.app-ui .ui-number-badge.callout-number-badge {
  background: var(--group-color, var(--primary));
}

/* APP-UI gives toolbar buttons an explicit display value, which otherwise
   overrides the HTML hidden attribute. Keep the semantic visibility state
   authoritative for contextual Callio toolbar actions. */
.app-ui .ui-toolbar-button[hidden] {
  display: none !important;
}

/* Keep the authored page, the shell defaults, and Settings out of the first
   paint. Callio reveals one fully hydrated frame only after its project accent
   and actual canvas layout are available. */
body.callio-booting { visibility: hidden; }

/* The retired shell's desktop stage inset must never surround a Flush app. */
body.style-flush {
  padding: 0 !important;
  gap: 0 !important;
  background: var(--bg-surface);
}

body.style-flush::before,
body.style-flush::after { display: none; }

body.style-flush #appRoot {
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  border-radius: 0;
}

/* Installed iOS web apps have no browser chrome to protect this frame from
   the sensor housing and home indicator. Keep that protection phone-only so
   desktop and ordinary browser layouts retain their existing geometry. */
@supports (padding: env(safe-area-inset-top)) {
  body.tier-phone.style-flush #appRoot {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.tier-phone.style-flush #appShell .shell-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  }
}

#appWorkspace.callio-app-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.callio-control-bar {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.callio-control-bar .app-shell-toolbar-line {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.app-shell-module-bar .callio-control-bar {
  display: flex;
  padding: 6px 16px;
  gap: 8px;
  background: var(--bg-surface);
}
.callio-module-action-group,
.callio-report-banner-actions { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.callio-module-heading-slot,
.callio-module-actions-slot { display: grid; min-width: 0; }
.callio-module-heading-slot > .callio-module-header { grid-area: 1 / 1; padding: 0; background: transparent; }
.callio-module-heading-slot .callio-module-heading { align-self: stretch; display: grid; grid-template-rows: auto 1fr; }
.callio-module-actions-slot { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.callio-module-actions-slot::-webkit-scrollbar { display: none; }
.callio-registered-actions { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; min-width: max-content; }
/* Keep inactive content in the shared intrinsic tracks, but remove its visual,
   pointer, keyboard and accessibility presence. The adapter also sets inert. */
.callio-module-heading-slot > .callio-module-header[hidden],
.callio-module-actions-slot > .callio-registered-actions[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.callio-control-bar :is(.ui-button, .ui-icon-button)[hidden] { display: none !important; }
.callio-control-bar .ui-button { white-space: nowrap; }
.callio-google-report-text-actions:not(:has(> button:not([hidden]))) { display: none; }
.callio-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.callio-toolbar-actions > :is(button, .ui-segmented-control) { flex: 0 0 auto; white-space: nowrap; }
.workspace-project-picker { position: relative; min-width: 0; }
.workspace-project-name {
  display: block;
  max-width: min(360px, 42vw);
  min-width: 0;
  overflow: hidden;
  color: var(--text-main);
  /* APP-UI AppTitle: project/application identity is above every workspace
     title. The semantic class in markup supplies family, size and weight. */
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.workspace-project-menu {
  position: absolute;
  z-index: 140;
  top: calc(100% + 5px);
  left: 0;
  width: min(300px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 90px));
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
.workspace-project-group { display: grid; gap: 4px; padding: 4px 0 8px; }
.workspace-project-group + .workspace-project-group { border-top: 1px solid var(--border-subtle); padding-top: 9px; }
.workspace-project-group > strong { padding: 0 7px 3px; color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.workspace-project-option {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.workspace-project-option:hover,
.workspace-project-option:focus-visible,
.workspace-project-option[aria-current="true"] { background: var(--hover-bg); outline: none; }
.workspace-project-option-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.workspace-project-option-meta { color: var(--text-muted); font-size: 10px; }
.workspace-project-empty { padding: 4px 7px; color: var(--text-muted); font-size: 11px; }
.workspace-project-menu-status { margin: 4px 7px 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
/* Settings is the containing surface; Shared project follows its flat section rhythm. */
.private-project-sharing { display: grid; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.private-project-sharing > p,
.private-project-sharing-status { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.private-project-invite-form { display: grid; gap: 5px; }
.private-project-invite-form > label { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.private-project-invite-form > div { display: flex; gap: 6px; }
.private-project-invite-form input { min-width: 0; flex: 1 1 auto; min-height: 34px; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); color: var(--text-main); }
.private-project-invite-form button { width: auto !important; white-space: nowrap; }
.private-project-members { display: grid; gap: 4px; }
.private-project-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-main); font-size: 11px; line-height: 16px; }
.private-project-member button { width: auto !important; padding: 3px 6px; font-size: 10px; }
.private-project-member .private-project-member-remove { flex: 0 0 auto; width: 16px !important; min-height: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 14px; line-height: 16px; }
.callio-control-bar .app-shell-toolbar-pinned { max-width: 100%; }
.callio-control-bar .app-shell-toolbar-pinned > :not(.callio-module-actions-slot) { flex-shrink: 0; }
#callioSearchHost { position: relative; width: 35px; height: 34px; }
#callioSearchHost .app-shell-search-control { position: absolute; top: 0; right: 0; }

/* Every module viewport starts at the same sheet origin immediately below the
   shared module bar.  Canvas remains the normal flex child; the listing and
   report workspaces are app-owned replacements for that same rectangle. */
.callio-app-workspace .sheet { position: relative; }
.callio-app-workspace .sheet > :is(.card-spreadsheet-workspace, .project-report-workspace, .google-report-workspace) {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
#appShell .collapse-control { position: relative; z-index: 2; pointer-events: auto; }
#appShell [data-accordion-id="canvas-view"] .chevron { display: none !important; }
/* This permanent child group must contribute its full height to the shell's
   scrollable flex column. Otherwise flex shrink clips its links inside the
   framework submenu's overflow:hidden box as browser zoom shortens the view. */
#appShell .sub-menu[data-submenu-for="canvas-view"] { flex: 0 0 auto; }
/* Search results must clear the app-owned canvas marker and zoom rail while
   open, without changing the toolbar's normal stacking order. */
.callio-control-bar:has(.app-shell-search-control.is-open) { z-index: 120; }

.callio-app-workspace .sheet {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  transition: padding-right 180ms ease;
}

.callio-app-workspace .workspace { flex: 1 1 auto; min-height: 0; }

/* The card-detail sheet is app-owned because it changes the canvas viewport.
   Its semantic surface and close control come from the pinned APP-UI vanilla
   contract; later slices supply the sheet content. */
:root {
  --card-detail-panel-width: min(17.8125rem, calc(100vw - 1rem));
}

.callio-app-workspace.card-detail-panel-open .sheet {
  padding-right: var(--card-detail-panel-width);
}

.app-ui.card-detail-panel {
  --primary: var(--accent);
  position: fixed;
  z-index: 210;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--card-detail-panel-width);
  min-width: var(--card-detail-panel-width);
  max-width: var(--card-detail-panel-width);
  height: 0;
  gap: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--surface-border);
  border-radius: 0;
  background: var(--surface-solid);
  box-shadow: none;
  color: var(--foreground);
  font-family: var(--font-body);
  letter-spacing: 0;
  overflow: auto;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.card-detail-panel[hidden] { display: none; }
.card-detail-panel.is-open { transform: translateX(0); }

.card-detail-panel-header,
.card-detail-panel-item-header,
.card-detail-panel-actions,
.card-detail-tags {
  display: flex;
  align-items: flex-start;
}

.card-detail-panel-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) 0;
}
.card-detail-sheet-title {
  min-width: 0;
  color: var(--foreground);
  line-height: 1.15;
}
.card-detail-panel-item-header {
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-2);
}
.card-detail-panel-heading { min-width: 0; }
.card-detail-panel-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-heading);
  color: var(--group-color, var(--primary));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.card-detail-panel-actions {
  position: relative;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  /* Icon glyph centers align with the first title line, rather than the
     midpoint of a possible two-line title. */
  margin-top: -.375rem;
}
.card-detail-panel-header .card-detail-panel-close { margin: 0; }
.app-ui.card-detail-panel .card-detail-panel-menu,
.app-ui.card-detail-panel .card-detail-panel-close,
.app-ui.card-detail-panel .card-detail-panel-menu:hover,
.app-ui.card-detail-panel .card-detail-panel-close:hover,
.app-ui.card-detail-panel .card-detail-panel-menu:active,
.app-ui.card-detail-panel .card-detail-panel-close:active,
.app-ui.card-detail-panel .card-detail-panel-menu:focus-visible,
.app-ui.card-detail-panel .card-detail-panel-close:focus-visible,
.app-ui.card-detail-panel .card-detail-panel-menu[aria-expanded="true"] {
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.app-ui.card-detail-panel .card-detail-panel-close:not(:focus-visible) { outline: none; }
.app-ui.card-detail-panel .card-detail-panel-close:focus-visible { outline-color: var(--muted-foreground); }
.card-detail-panel-menu { font-size: 1.125rem; line-height: 1; }
.card-detail-panel-menu:hover,
.card-detail-panel-menu:focus-visible,
.card-detail-panel-menu[aria-expanded="true"] { color: var(--primary); }
.card-detail-panel .ui-dropdown-menu { right: 0; left: auto; }
.card-detail-panel-tabs { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.card-detail-panel-tabs > .ui-tabs-list {
  display: grid;
  width: 100%;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 var(--space-5);
}
.card-detail-panel-tabs > .ui-tabs-list > [role="tab"] {
  width: 100%;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
.card-detail-panel-tabs > .ui-tabs-list > [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.card-detail-tab-panel { width: 100%; min-width: 0; min-height: 0; padding: var(--space-4) var(--space-5); }
.card-detail-tab-panel[hidden] { display: none; }
.card-detail-hero {
  flex: 0 0 auto;
  width: auto;
  aspect-ratio: 16 / 9;
  max-height: 9rem;
  margin: var(--space-4) var(--space-5) 0;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-solid);
}
.card-detail-hero img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.card-detail-hero-empty { display: grid; height: 100%; place-items: center; margin: 0; color: var(--muted-foreground); }
.card-detail-hero > [hidden] { display: none !important; }
.card-detail-field-group { display: grid; gap: var(--space-1); min-width: 0; }
.card-detail-panel .ui-label {
  margin-bottom: 0;
  color: var(--muted-foreground);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.card-detail-tags { display: grid; gap: var(--space-1); margin-top: var(--space-4); }
.card-detail-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.card-detail-metadata {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-border);
}
.card-detail-metadata > div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.card-detail-metadata dt,
.card-detail-metadata dd { margin: 0; }
.card-detail-metadata dd { color: var(--foreground); font-size: .8125rem; font-weight: 500; line-height: 1.35; }
.app-ui .callio-group-badge,
.card-detail-panel .ui-badge {
  border-color: color-mix(in srgb, var(--group-color, var(--primary)) 26%, var(--surface-border));
  background: color-mix(in srgb, var(--group-color, var(--primary)) 14%, var(--surface-solid));
  color: var(--group-color, var(--primary));
}
.card-detail-description {
  display: block;
  width: 100%;
  min-height: 6rem;
  max-height: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.45;
  resize: vertical;
}
.card-detail-images-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.card-detail-image-tile,
.card-detail-image-add-slot {
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}
.card-detail-image-tile {
  position: relative;
  background: var(--surface-solid);
  color: var(--muted-foreground);
  cursor: grab;
}
.card-detail-image-open { display: grid; width: 100%; height: 100%; place-items: center; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.card-detail-image-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-detail-image-open:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.app-ui.card-detail-panel .card-detail-image-delete { position: absolute; z-index: 1; top: var(--space-1); right: var(--space-1); width: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; padding: 0; background: var(--surface-solid); box-shadow: var(--elevation-1); font-size: 1rem; line-height: 1; }
.card-detail-image-tile.is-dragging { opacity: .45; }
.card-detail-image-tile.is-drag-over { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.card-detail-image-add-slot {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow: visible;
  background: var(--surface-elevated);
  color: var(--muted-foreground);
  font-size: .6875rem;
  line-height: 1.2;
  text-align: center;
}
.card-detail-image-add-slot[aria-disabled="true"] { cursor: default; opacity: .6; }
.card-detail-image-add-slot.is-drag-over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface-elevated)); }
.card-detail-image-add-icon { width: 1.125rem; height: 1.125rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card-detail-image-add-actions { display: flex; justify-content: center; gap: var(--space-1); }
.app-ui.card-detail-panel .card-detail-image-text-action { appearance: none; border: 0; padding: 0; background: none; box-shadow: none; color: var(--foreground); font-size: .6875rem; line-height: 1.2; cursor: pointer; }
.app-ui.card-detail-panel .card-detail-image-text-action:hover { text-decoration: underline; }
.app-ui.card-detail-panel .card-detail-image-text-action:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; }
.card-detail-image-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.card-detail-image-url-layer { position: fixed; z-index: 230; inset: 0; pointer-events: none; }
.app-ui.card-detail-image-url-layer .card-detail-image-url-popover { position: fixed; display: flex; align-items: center; width: min(20rem, calc(100vw - 1rem)); gap: var(--space-2); padding: var(--space-2); text-align: left; pointer-events: auto; }
.app-ui.card-detail-image-url-layer .card-detail-image-url-popover[hidden] { display: none; }
.card-detail-image-url-popover .ui-input { flex: 1 1 auto; width: auto; min-width: 0; }
.card-detail-image-url-popover .ui-button { flex: 0 0 auto; }

/* The confirmation is existing app behavior; it must remain actionable when
   requested from the detail sheet's dropdown. */
.card-detail-panel ~ .card-delete-confirm { z-index: 220; }

@media (max-width: 700px) {
  :root { --card-detail-panel-width: min(17.8125rem, calc(100vw - 1rem)); }
}

/* The Callio canvas is part of the Flush workspace, never an island surface. */
body.style-flush .callio-app-workspace .sheet,
body.style-flush .callio-app-workspace .workspace {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#appSettings { display: grid; gap: 0; }
#appSettings .settings-section { display: grid; gap: 10px; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
#appSettings .settings-section:first-child { padding-top: 0; }
#appSettings .settings-section:last-of-type { border-bottom: 0; }
#appSettings .settings-field { display: grid; gap: 5px; min-width: 0; }
#appSettings .settings-color-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#appSettings .settings-color-input { width: 28px; min-width: 28px; height: 25px; padding: 2px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-surface); cursor: pointer; }
#appSettings .developer-preview-control { justify-content: flex-start; width: max-content; max-width: 100%; overflow-x: auto; }
#appSettings .developer-preview-button { display: grid; width: 34px; min-width: 34px; height: 32px; place-items: center; padding: 0; }
#appSettings .developer-preview-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#appSettings .drawing-url-form button,
#appSettings .remove-drawing-button { width: auto; }
#appSettings .drawing-url-form input { width: 100%; min-width: 0; flex: 1 1 auto; }
#appSettings .drawing-replacement,
#appSettings .media-backfill { gap: 8px; }
#appSettings .group-color-settings,
#appSettings .drawing-replacement {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#appSettings .presentation-publish-help {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

body.tier-desktop #appRoot[data-layout="topnav"] #appShell .shell-footer .app-shell-settings-endpoint { order: 1; }
body.tier-desktop #appRoot[data-layout="topnav"] #appShell .shell-footer .profile-card { order: 2; }
body.tier-tablet #appRoot[data-layout="topnav"] #appShell .shell-footer .app-shell-settings-endpoint { order: 1; }
body.tier-tablet #appRoot[data-layout="topnav"] #appShell .shell-footer .profile-card { order: 2; }

.callio-topnav-more-icon {
  width: 34px;
  justify-content: center;
  padding: 0;
}
.callio-topnav-more-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
#appSettings #demoTemplatePublisher { gap: 7px; }
#appSettings #demoTemplatePublisher > p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
#appSettings .drawing-url-form > div { display: flex; gap: 6px; }
#appSettings .drawing-url-form input { min-width: 0; flex: 1 1 auto; }
#appSettings .shell-settings-about { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 11px; }

/* Keep Utility distinct from the application navigation. */
#appShell .section-title:last-of-type {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
#appShell .nav-item[data-nav-id="save-project"]:focus-visible,
#appShell .nav-item[data-nav-id="open-project"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
#appShell .nav-item[data-nav-id="save-project"][aria-disabled="true"],
#appShell .nav-item[data-nav-id="open-project"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}
/* Account presentation is Callio-owned content layered on the reusable shell.
   Keep long verified names/emails inside the rail without changing identity
   or logout behavior. */
#appShell .profile-card {
  min-width: 0;
  gap: 10px;
}
#appShell .profile-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
#appShell .profile-info { min-width: 0; }
#appShell .profile-name,
#appShell .profile-role {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#appShell .profile-role {
  letter-spacing: 0;
  line-height: 1.35;
}
#appShell .nav-item[data-nav-id="log-out"] {
  color: var(--text-muted);
}
#appShell .nav-item[data-nav-id="log-out"]:hover,
#appShell .nav-item[data-nav-id="log-out"]:focus-visible {
  color: var(--text-main);
}
#appShell .nav-item[data-nav-id="log-out"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* In rail modes the avatar remains the account affordance; expanded phone
   drawers restore the two-line identity with the same truncation rules. */
body.tier-desktop #appRoot[data-layout="vertical"] #appShell[data-collapsed="true"] .profile-card,
body.tier-tablet #appRoot[data-layout="vertical"] #appShell .profile-card {
  gap: 0;
}
body.tier-phone #appShell .profile-info {
  min-width: 0;
}
body.tier-phone #appShell .nav-item[data-nav-id="log-out"] {
  padding-left: 10px !important;
}

/* The transfer glyphs share the framework navigation's optical stroke weight. */
#appShell .nav-item[data-nav-id="save-project"] svg,
#appShell .nav-item[data-nav-id="open-project"] svg { stroke-width: 1.8; }

/* Spreadsheet is a workspace mode, not a canvas overlay. Keep the shared
   second toolbar row so its View/Edit control stays in the same place as Canvas and
   Project Report; only canvas-specific tools are irrelevant here. */
body.callio-spreadsheet-mode .workspace-zoom-controls { display: none; }
body.callio-spreadsheet-mode #addCalloutButton,
body.callio-spreadsheet-mode #fitDrawingButton,
body.callio-spreadsheet-mode #arrangeCardsButton { display: none; }

/* Keep the existing live status accessible while making task-specific
   feedback consistent wherever the settings panel exposes it. */
#appSettings .drawing-replacement-status,
#appSettings .media-backfill-status,
#appSettings .presentation-publish-status,
#appSettings .demo-template-publish-status {
  min-height: 1.2em;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
#appSettings .drawing-replacement-status[data-error="true"],
#appSettings .media-backfill-status[data-error="true"],
#appSettings .presentation-publish-status[data-error="true"],
#appSettings .demo-template-publish-status[data-error="true"] {
  color: var(--danger);
}
#appSettings .drawing-replacement-status[data-error="false"],
#appSettings .media-backfill-status[data-error="false"],
#appSettings .presentation-publish-status[data-error="false"],
#appSettings .demo-template-publish-status[data-error="false"] {
  color: #176b3a;
}

/* Settings and Print are utilities, not persistent navigation destinations. */
body.indicator-pill .nav-item[data-nav-id="settings"].active,
body.indicator-pill .nav-item[data-nav-id="print"].active {
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
body.indicator-pill .nav-item[data-nav-id="settings"].active svg,
body.indicator-pill .nav-item[data-nav-id="print"].active svg { stroke: currentColor; }

.app-shell-settings-panel {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, calc(-50% - 8px)) scale(.985);
}
.app-shell-settings-panel.open { transform: translate(-50%, -50%) scale(1); }
body.tier-phone .app-shell-settings-panel {
  top: 50%;
  right: auto;
  left: 50%;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}

@media (max-width: 760px) {
  .callio-control-bar { align-items: stretch; }
  .callio-control-bar .app-shell-toolbar-line { width: 100%; }
  #callioSearchHost { width: 35px; }
  /* The phone drawer already contains Callio's brand and profile. Keep only a
     full-size floating trigger in the workspace header. */
  body.tier-phone .mobile-nav-bar {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 90;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  body.tier-phone .mobile-nav-bar .mobile-brand,
  body.tier-phone .mobile-nav-bar .mobile-avatar { display: none !important; }
  body.tier-phone .mobile-nav-bar .hamburger-btn {
    width: 36px;
    height: 36px;
    pointer-events: auto;
  }
  body.tier-phone .mobile-nav-bar .hamburger-btn svg { width: 18px; height: 18px; }
  body.tier-phone .main-workspace { height: 100% !important; }
}

body.tier-phone .workspace-project-name,
html[data-preview-size="phone"] .workspace-project-name { display: none; }

/* Phone navigation is a floating trigger, so it must not reserve the
   framework's 48px mobile-header track. Keep the real iPhone tier and the
   explicit Mac Phone preview identical. */
body.tier-phone .mobile-nav-bar,
html[data-preview-size="phone"] .mobile-nav-bar {
  position: absolute;
  top: 8px;
  right: auto;
  left: 8px;
  z-index: 90;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
body.tier-phone .mobile-nav-bar .hamburger-btn,
html[data-preview-size="phone"] .mobile-nav-bar .hamburger-btn {
  display: inline-flex;
  width: auto;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  gap: 6px;
  pointer-events: auto;
}
body.tier-phone .mobile-nav-bar .hamburger-btn svg,
html[data-preview-size="phone"] .mobile-nav-bar .hamburger-btn svg {
  width: 18px;
  height: 18px;
}
body.tier-phone .mobile-nav-bar .hamburger-btn::after,
html[data-preview-size="phone"] .mobile-nav-bar .hamburger-btn::after {
  content: attr(data-callio-current-mode);
  color: var(--text-main);
  font: 600 12px/1 var(--font-stack);
}
body.tier-phone .main-workspace,
html[data-preview-size="phone"] .main-workspace {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
html[data-preview-size="phone"] .mobile-nav-bar .mobile-brand,
html[data-preview-size="phone"] .mobile-nav-bar .mobile-avatar { display: none !important; }

@media print {
  #appShell,
  .mobile-nav-bar,
  .mobile-backdrop,
  .callio-control-bar,
  .app-shell-settings-backdrop,
  .app-shell-settings-panel { display: none !important; }
}