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

.app-content { padding-block: 3rem; }
.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-layout-brand { flex: 0 0 auto; width: auto; }
.app-auth-brand .se-layout-brand__identity,
.app-auth-brand .se-layout-brand__logo,
.app-auth-brand .se-layout-brand__asset { width: auto; height: 5rem; }
.app-auth-brand .se-layout-brand__asset se-icon,
.app-auth-brand .se-layout-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; }
se-sidebar > footer { display: grid; gap: .75rem; }
#logout-form { display: none; }
@media (max-width: 767px) { .app-auth { padding: 1rem; } .app-content { padding-block: 1.5rem; } .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; }
.app-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.app-shell > se-topbar { flex: none; }
.app-shell se-topbar > [data-end] { flex: none; }
.app-shell se-topbar > [data-start] { min-width: 0; flex: 1; }
.app-shell se-topbar se-layout-brand { width: auto; flex: none; }
.app-shell se-topbar se-layout-brand .se-layout-brand__logo { width: auto; height: 3.5rem; }
.app-shell se-sidebar:not([collapsed]) se-layout-brand .se-layout-brand__logo { width: auto; height: 4rem; }
.app-shell se-sidebar:not([collapsed]) se-layout-brand .se-layout-brand__asset--full-light se-icon { width: 10rem; height: 3.5rem; }
.app-scope-row { position: relative; display: flex; flex: 1; min-height: 0; }
.app-scope-row > main { flex: 1; min-width: 0; overflow: auto; }
#app-navigation { display: contents; }
#app-content { display: block; }
@media (max-width: 767px) {
  .app-shell se-topbar se-layout-brand .se-layout-brand__logo { width: 2.5rem; height: 2.5rem; }
  .app-shell se-topbar se-layout-brand[data-wide-icon] .se-layout-brand__asset--full-light,
  .app-shell se-topbar se-layout-brand[data-wide-icon] .se-layout-brand__asset--full-dark { display: 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-layout-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); }

.project-header { display: grid; gap: 1rem; }
.project-header--compact { position: fixed; z-index: 10; box-sizing: border-box; padding-block: .5rem 0; gap: .25rem; background: var(--se-bg); box-shadow: 0 1px 0 var(--se-border); }
.project-header[hidden] { display: none; }
#catalog-rows { overflow: visible; }
#catalog-rows > se-list-header { position: sticky; top: var(--project-header-offset, 0px); 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; }
.public-login { position: fixed; top: 1rem; right: 1rem; z-index: 20; }
.app-shell:has(> .public-login) .project-header .app-heading { padding-right: 6rem; }
#catalog-rows[aria-busy] { cursor: progress; overflow-anchor: 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); }
.app-shell se-sidebar[collapsed] se-layout-brand .se-layout-brand__logo,
.app-shell se-sidebar[collapsed] se-layout-brand .se-layout-brand__asset--compact-light,
.app-shell se-sidebar[collapsed] se-layout-brand .se-layout-brand__asset--compact-light se-icon { width: 2.75rem; height: 2.75rem; }
.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-title-group, .project-sync-badge { display: flex; align-items: center; gap: .65rem; }
.project-title-group { flex-wrap: wrap; min-width: 0; }
.project-title-group a { text-decoration: none; }
.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; } }