html, body { width: 100%; height: 100%; margin: 0; }
/* Paired brand artwork follows text brightness, not the brand accent color. */
se-brand { --se-primary: var(--se-text); }
body { color: var(--se-text); background: var(--se-bg); font-family: var(--se-font); }

.app-page { display: grid; width: min(100%, 72rem); margin: auto; gap: 1.5rem; }
.app-page > * { min-width: 0; }
.app-account-page { max-width: 48rem; }
.app-method-list { display: grid; }
.app-method-list .app-method-row { padding-block: 1rem; border-top: 1px solid var(--se-border); }
.app-method-icon { flex: none; width: 1.5rem; height: 1.5rem; }
.app-auth { display: grid; min-height: 100%; place-items: center; box-sizing: border-box; padding: 2rem; }
.app-auth-card { display: block; width: min(100%, 28rem); box-sizing: border-box; }
.app-auth-brand { display: flex; justify-content: center; }
.app-auth-brand se-brand { flex: 0 0 auto; width: auto; }
.app-auth-brand .se-brand__identity,
.app-auth-brand .se-brand__logo,
.app-auth-brand .se-brand__asset { width: auto; height: 5rem; }
.app-auth-brand .se-brand__asset se-icon,
.app-auth-brand .se-brand__asset img { width: auto; height: 4rem; }
.app-form { display: grid; gap: 1.5rem; }
.app-form > header { display: grid; gap: .375rem; }
.app-form-fields { display: grid; gap: 1.25rem; }
.app-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--se-border); }
.app-auth .app-form-actions se-button { flex: 1; }
.app-provider-form { display: flex; }
.app-provider-form se-button { flex: 1; }
.app-auth-links { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; color: var(--se-faint); font-size: .875rem; }
.app-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.app-stack { display: grid; gap: 1.25rem; }
.app-row-actions { display: flex; align-items: center; gap: .5rem; }
.app-row-actions form { margin: 0; }
.app-method-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.app-method-label { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.app-auth-divider { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--se-border); }
.app-auth se-segmented-control .se-segmented__options { display: grid; }
#logout-form { display: none; }
@media (max-width: 767px) { .app-auth { padding: 1rem; } .app-grid { grid-template-columns: 1fr; } }
.app-deletion-phrase { user-select: none; }
.app-method-details { min-width: 0; overflow-wrap: anywhere; }
.app-method-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.app-method-heading > div { flex: 1; min-width: 0; }
.app-method-heading > form, .app-method-heading > se-badge { flex: none; }
/* The upload preview uses the same centered cover crop as the profile avatar. */
.app-photo-preview { display: grid; justify-items: center; gap: 1rem; }
.app-photo-preview[hidden], [data-profile-photo-upload][hidden] { display: none; }
.app-photo-frame { position: relative; width: min(100%, 18rem); aspect-ratio: 1; overflow: hidden; background: var(--se-surface-soft); }
.app-photo-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-photo-circle { position: absolute; inset: 0; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 6rem rgb(0 0 0 / .5); pointer-events: none; }

/* Shared illustration size; the library caps the artwork at its container width. */
se-empty-illustration { --se-illustration-width: 32rem; margin-block-start: clamp(1rem, 6vh, 4rem); }

.app-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 767px) { .app-sheet-grid, .app-form-row { grid-template-columns: 1fr; } }

.app-shell se-brand { user-select: none; -webkit-user-select: none; }

/* App-owned identity layout: keep verification beside both name and email. */
.app-user-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.app-verification-status { flex-shrink: 0; }

/* Action alignment; the library handles focus-ring overflow. */
.app-table-actions { display: flex; align-items: center; }

.app-setting-form { white-space: normal; display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; gap: 1rem; padding: .25rem; }
@media (max-width: 640px) { .app-setting-form { grid-template-columns: minmax(0, 1fr); } .app-setting-form > se-button { justify-self: start; } }

.app-setting-form .app-setting-description { white-space: normal; }

.app-table-profile { min-width: 0; flex: 1; }

/* Editor composition; form styling is provided by Simple Elements. */
.translation-key { display: flex; align-items: center; gap: .25rem; white-space: normal; min-width: 0; }
.translation-key > .app-table-actions { margin-inline-start: auto; flex: none; }
.translation-key > span { overflow-wrap: anywhere; }
.translation-cell { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: .5rem; min-width: 0; white-space: normal; }
.translation-cell > [data-translation-cell-target="conflict"], .translation-cell > [data-translation-cell-target="error"] { grid-column: 1 / -1; }
.translation-save-status { width: 1rem; height: 1rem; color: var(--se-primary); }
.translation-status-label { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.translation-value { display: block; width: 100%; min-height: 2rem; padding: .25rem .5rem; border: 1px solid transparent; font-size: .75rem; line-height: 1.125rem; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; color: inherit; font-family: inherit; }
button.translation-value { cursor: text; }
.translation-cell pre { white-space: pre-wrap; }



.translation-toolbar { display: flex; align-items: center; gap: .5rem; margin: 0; }
.translation-toolbar [data-desktop-search] > se-input { width: clamp(12rem, 24vw, 22rem); }
.translation-loading-frame { display: block; width: 100%; margin-top: 1rem; }
.translation-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem; }
se-list-header .app-row-actions > se-select { flex: 1; min-width: 0; }

.translation-cell > [hidden] { display: none; }

/* Use the content gutter for the translation table on narrow screens. */
@media (max-width: 767px) {
  #translation-results { margin-inline: -1.25rem; width: calc(100% + 2.5rem); }
}

/* Mobile key-label experiment: remove this block and its row label to revert. */
@media (max-width: 767px) {
  #translation-rows se-list-row { row-gap: 0; }
  #translation-rows .translation-mobile-key { display: flex; justify-content: center; align-items: center; gap: .25rem; text-align: center; margin-inline: -1rem; padding-inline: 1rem; border-bottom: 1px solid var(--se-border); grid-column: 1 / -1; grid-row: 1; padding-block: .25rem; color: var(--se-muted); font-size: .6875rem; white-space: normal; overflow-wrap: anywhere; }
  #translation-rows .translation-mobile-key se-icon { width: .75rem; height: .75rem; flex: none; }
  #translation-rows se-list-row > .app-table-control { grid-row: 2; }
}

.key-name-row { align-items: end; }

.key-translation-row[hidden], se-list-row[data-plural-parent][hidden] { display: none; }

@media (max-width: 767px) { .app-export-action { display: none; } }

.translation-key-parent { color: var(--se-muted); }

#catalog-rows { overflow: visible; }
#catalog-rows > se-list-header { position: sticky; top: 0; z-index: 6; background: var(--se-surface); border-radius: var(--se-radius) var(--se-radius) 0 0; }
.catalog-value > .catalog-cell-status { margin-inline-start: auto; }

@media (min-width: 768px) { [data-controller="translation-table"] { --se-list-header-top: calc(var(--app-nav-height, 6rem) - 3rem); } }

.app-language-add, .app-language-add > button { width: 100%; }

.app-settings-body { width: min(100%, 48rem); margin-inline: auto; }
.export-format-row { display: flex; gap: 1rem; }
.export-format-row > se-select { flex: 1; min-width: 0; }
[data-export-download-target="progress"] { width: 100%; accent-color: var(--se-primary); }

.app-sheet-image { max-width: 100%; width: 16rem; max-height: 10rem; object-fit: contain; }

.app-reference-link { color: var(--se-primary); }
.sheet-import-files { display: grid; gap: .5rem; }

.translation-empty { color: var(--se-faint); }
.translation-wildcard { color: #8a5900; font-weight: 700; }
.catalog-count { color: #a21caf; font-weight: 700; }
[data-theme="dark"] .translation-wildcard { color: #facc15; }
[data-theme="dark"] .catalog-count { color: #f0abfc; }
.catalog-page { display: grid; gap: 1rem; }
#catalog-rows[aria-busy] { cursor: progress; overflow-anchor: none; }
#catalog-rows[aria-busy] [data-catalog-target] { opacity: .35; }
.catalog-language-header { position: relative; }
.catalog-language-status { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem; background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius); font-weight: normal; }
.catalog-language-status[hidden] { display: none; }
se-button[aria-disabled="true"] { opacity: .55; }
.catalog-filters { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.catalog-filters--right { margin-inline-start: auto; justify-content: flex-end; }
.catalog-filter-actions { display: flex; justify-content: flex-end; padding-top: 1rem; }
.catalog-loading { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .5rem; }
.catalog-loading[hidden] { display: none; }
.catalog-spinner { animation: catalog-spin 1s linear infinite; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .catalog-spinner { animation: none; } }
.history-group-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.history-row-actions { display: flex; align-items: center; justify-content: flex-end; }
.catalog-history .history-mobile-actor { display: none; }
.history-mobile-summary { display: none; }
.catalog-history .history-user { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 767px) {
  .catalog-history .history-user se-profile { display: none; }
  .catalog-history se-list-header .history-user { display: none; }
  .catalog-history .history-group-heading { display: none; }
  .history-mobile-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; min-width: 0; }
  .catalog-history .history-row-actions { grid-column: 2; grid-row: 1; }
  .catalog-history .history-mobile-actor { display: block; flex-basis: 100%; color: var(--se-muted); font-size: .75rem; }
}
.catalog-key, .catalog-value { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; padding-block: .2rem; }
.catalog-key se-code { display: inline-block; line-height: 1.5; }
.catalog-key > se-menu { margin-inline-start: auto; }
@media (hover: hover) and (pointer: fine) {
  .catalog-scalar-row:not(:hover):not(:focus-within) .catalog-key > se-menu:not(:has([aria-expanded="true"])) { opacity: 0; }
}
.catalog-value > .translation-cell { width: 100%; }
.translation-cell textarea[aria-invalid="true"] { outline: 1px solid var(--se-danger); }
.catalog-value { flex-wrap: nowrap; }
.catalog-value > .catalog-translation { flex: 1; min-width: 0; }
.catalog-cell-status { display: flex; align-items: center; width: 1rem; flex: none; }
.translation-cell > .catalog-cell-status, .translation-cell > .translation-save-status { grid-area: 1 / 2; }
.translation-cell:has(.catalog-cell-status se-tooltip):not(:has(se-spinner)) > .translation-save-status { display: none; }
.translation-cell:has(se-spinner) > .translation-save-status { display: block; }
.translation-cell:has(se-spinner) > .catalog-cell-status { visibility: hidden; }
.catalog-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; border: 0; background: none; }
.catalog-status-icon se-icon { width: 1rem; height: 1rem; }
button.catalog-status-icon { cursor: pointer; }
.catalog-status-icon--error { color: var(--se-danger); }
.catalog-status-icon--warning { color: var(--se-warning); }
.catalog-value > se-button { margin-inline-start: auto; flex: none; }
.catalog-translation { white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-pending-key, .catalog-pending-value { display: grid; gap: .375rem; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.catalog-pending-value se-diff-value { white-space: pre-wrap; }

.history-actor, .history-change, .history-description { min-width: 0; }
.history-actor { display: flex; align-items: center; gap: .75rem; }
.history-actor > se-badge { flex: none; margin-inline-start: auto; }
.history-mobile-actor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-mobile-name { font-weight: 700; }
.history-change { display: flex; align-items: center; justify-content: space-between; gap: 1rem; white-space: normal; }
.history-description { display: grid; gap: .375rem; overflow-wrap: anywhere; }
.history-change-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.history-description se-code { display: inline-block; line-height: 1.4; vertical-align: middle; }
.history-event-detail { grid-column: 1 / -1; }
.history-values { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--se-muted); }
.history-key-change { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.history-restore-action { flex: none; margin-inline-start: auto; }
.history-more { display: flex; justify-content: center; }
.history-filter-group { display: grid; gap: .75rem; margin: 0; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--se-border); }
.history-filter-group:last-child { border-bottom: 0; }
.format-showcase { display: grid; gap: 1.5rem; }
.format-preview-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.format-preview-files--single { grid-template-columns: minmax(0, 1fr); }
.format-preview-file { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; gap: .5rem; }
.format-preview-file se-code-editor, .format-preview-file .se-editor { height: 100%; min-width: 0; }
.se-table .format-preview-value { white-space: pre-line; }
@media (max-width: 767px) {
  .format-preview-files { grid-template-columns: minmax(0, 1fr); }
  .history-table > :is(se-list-header, se-list-row) > [data-column-divider] { border-right: 0; padding-right: 0; }
  .history-table .se-list__row:has(> .history-actor) { position: relative; row-gap: .25rem; padding: .75rem 3.5rem; }
  .history-table .se-list__row:has(> .history-actor) > * { padding-block: 0; }
  .history-table.se-table:has(> se-list-row[collapsible]) .se-list__row:has(> .history-actor) > :first-child { padding-left: 0; }
  .history-table .se-list__row:has(> .history-actor) .se-list__toggle,
  .history-table .se-list__row:has(> .history-actor) .history-restore-action { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; }
  .history-table .se-list__row:has(> .history-actor) .se-list__toggle { left: 1rem; }
  .history-table .se-list__row:has(> .history-actor) .history-restore-action { right: 1rem; }
}
/* Separate forms share an action row without nesting forms or custom submission. */
.catalog-github-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.catalog-github-forms--connected { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-github-connect { display: contents; }
.catalog-github-connect > se-input { grid-column: 1 / -1; }
.catalog-github-disconnect, .catalog-github-disconnect > se-button { width: 100%; }
.project-sync-badge { display: flex; align-items: center; gap: .65rem; }
.project-sync-badge { white-space: nowrap; }
.catalog-limit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
[data-catalog-options] [hidden] { display: none !important; }
[data-validation-row] > div { white-space: normal; overflow-wrap: anywhere; }
[data-validation-row] se-text { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 700px) { .catalog-limit-fields { grid-template-columns: 1fr; } }

/* The app owns the shell; Simple Elements owns the controls within it. */
.app-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; padding: 0 1.25rem; flex: none; border-bottom: 1px solid var(--se-border); background: var(--se-surface); position: relative; z-index: 50; }
.app-topbar-start { display: flex; align-items: center; gap: .75rem; flex: none; }
#app-project-heading { flex: 1; min-width: 0; }
.app-topbar se-brand { flex: none; user-select: none; }
.app-topbar se-brand .se-brand__logo, .app-topbar se-brand .se-brand__asset se-icon { width: 9rem; height: 2.75rem; }
.app-topbar > se-profile { max-width: 16rem; min-width: 0; }
.app-scope-row { position: relative; display: flex; flex: 1; min-height: 0; }
#app-navigation { display: contents; }
.app-navigation { position: relative; flex: none; width: 15rem; min-height: 0; border-right: 1px solid var(--se-border); background: var(--se-surface); transition: width 200ms ease; --se-toggle-offset: 1.25rem; }
.app-navigation[data-se-minimized="true"] { width: 4.5rem; }
.app-navigation-scroll { height: 100%; box-sizing: border-box; overflow: auto; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1.5rem; }
.app-navigation-scroll > se-nav-section { flex: none; }
.app-navigation[data-se-minimized="true"] .app-navigation-scroll { padding-inline: .25rem; }
.app-navigation[data-se-minimized="true"] se-title[level="sidebar"] { display: none; }
.app-workspace { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.app-content-row { display: flex; flex: 1; min-height: 0; min-width: 0; }
.app-content { flex: 1; min-height: 0; min-width: 0; overflow: auto; box-sizing: border-box; scroll-padding-top: 1.5rem; }
.app-content-inner { padding: 2rem clamp(1.25rem, 3vw, 3rem); }
.app-project-bar { display: flex; align-items: flex-end; justify-content: flex-end; flex: none; min-width: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--se-border); background: var(--se-surface); }
.app-project-identity { display: flex; align-items: center; gap: .65rem; min-width: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--se-border); }
.app-project-identity se-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-project-identity > :not(se-title) { flex: none; }
.app-project-identity a { text-decoration: none; }
.app-project-bar > .app-project-tabs { flex: 1; min-width: 0; margin: 0; padding: 0; border-bottom: 0; }
.app-project-tabs > [data-actions] { margin: 0; padding: 0 0 .375rem .5rem; }
.app-project-tabs > nav { scrollbar-width: none; }
.app-settings-navigation { flex: none; width: 13rem; padding: 1.5rem .75rem; border-right: 1px solid var(--se-border); background: var(--se-surface); box-sizing: border-box; overflow: auto; }
.app-settings-navigation > se-title { display: block; margin: 0 .75rem 1rem; }
.app-context-links { display: grid; gap: .25rem; }
.app-content [id] { scroll-margin-top: 1rem; }
.app-navigation-backdrop { position: absolute; inset: 0; z-index: 30; border: 0; background: rgb(0 0 0 / .3); backdrop-filter: blur(4px); cursor: pointer; }
.app-navigation[hidden], .app-navigation-backdrop[hidden] { display: none; }
.app-mobile-only { display: none; }
@media (max-width: 767px) {
  .app-mobile-only { display: inline-block; }
  .app-desktop-only { display: none; }
  .app-topbar { padding-inline: 1rem; height: 3.75rem; }
  .app-topbar se-brand .se-brand__logo, .app-topbar se-brand .se-brand__asset se-icon { width: 2.5rem; height: 2.5rem; }
  .app-navigation { position: absolute; inset: 0 auto 0 0; width: min(20rem, calc(100vw - 3rem)); z-index: 40; box-shadow: 1rem 0 3rem rgb(0 0 0 / .15); }
  .app-navigation[data-se-minimized="true"] { width: min(20rem, calc(100vw - 3rem)); }
  .app-content-row { flex-direction: column; }
  .app-content-inner { padding: 1.25rem; }
  .app-project-bar { padding-inline: .75rem; }
  .app-project-identity { padding-inline-start: .75rem; }
  .app-project-identity se-title { font-size: .875rem; }
  .app-project-branch, .app-project-identity > se-tooltip { display: none; }
  .app-settings-navigation { width: 100%; max-height: 5rem; padding: .5rem; border-right: 0; border-bottom: 1px solid var(--se-border); overflow: auto; }
  .app-settings-navigation > se-title { display: none; }
  .app-context-links { display: flex; gap: .25rem; }
  .app-context-links > se-nav-item { flex: none; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .app-navigation { transition: none; } }