/* Shared application chrome. Layout and semantic colors remain page-owned. */
:root {
  --ui-panel-radius: .85rem;
  --ui-control-radius: .6rem;
  --ui-panel-space: 1.5rem;
  --ui-control-height: 2.85rem;
  --ui-field-shadow: 0 1px 2px rgb(0 0 0 / .12);
  --ui-button-shadow: inset 0 1px rgb(255 255 255 / .08), 0 1px 2px rgb(0 0 0 / .1);
  --ui-panel-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

/* Panels keep titles, descriptions, and content within one quiet border. */
:is(.panel, .settings-card, .auth-card, .resource-card, .plans-card,
    .plans-plan-card, .client-card, .docs-entry-grid > a, .live-studio,
    .reader-navigator, .reader-content, .presentation-disclosure-content,
    .not-found-card, .error-page, .stat-card, .recognition-card, .audit-card) {
  border-radius: var(--ui-panel-radius);
  box-shadow: var(--ui-panel-shadow);
}
.settings-card:not(.preference-settings-card, .session-list, .credential-list, .notification-settings),
.auth-card, .plans-card, .plans-plan-card {
  padding: var(--ui-panel-space);
}
.dashboard-body .settings-card:not(.preference-settings-card) {
  background: #2d333b;
  border: 1px solid #444c56;
}
html[data-theme="light"] .dashboard-body .settings-card:not(.preference-settings-card) {
  background: #fff;
  border-color: #d8dde4;
}
.panel-header {
  padding: var(--ui-panel-space);
  gap: 1rem;
}
.panel-header h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.panel-header p { font-size: .875rem; line-height: 1.65; }
.panel-body { padding: 1.25rem var(--ui-panel-space) var(--ui-panel-space); }
.panel-actions { padding: 1.25rem var(--ui-panel-space); }
.settings-card > h2:first-child,
.session-list > h2,
.credential-list > h2 {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #444c56;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
html[data-theme="light"] :is(.settings-card > h2:first-child, .session-list > h2, .credential-list > h2) { border-color: #d8dde4; }
.settings-card + .settings-card { margin-top: 1.5rem; }
.dashboard-body .settings-heading h1 { font-family: Georgia, serif; }
.page-heading .subtitle, .settings-heading > p:last-child { font-size: .9rem; line-height: 1.65; }
.settings-heading { padding-bottom: 0; border-bottom: 0; margin-bottom: 2rem; }

/* Form fields: retain checkbox, radio, slider, color, and hidden-input geometry. */
:where(body) :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="url"],
    input[type="tel"], input[type="number"], input[type="date"],
    input[type="datetime-local"], textarea, select):not(.sr-only):not(.presentation-heading input):not(:where(#presentation-editor *, #live-design-editor *)) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  box-shadow: var(--ui-field-shadow);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.5;
}
:where(.settings-form, .key-form, .plans-form, .auth-shell, .controller-fields) label {
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.5;
}
.settings-form { gap: 1.25rem; }
.settings-form label { gap: .5rem; }
.settings-form input:not(.sr-only):not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), .settings-form textarea, .settings-form select {
  border-color: #444c56;
  background: #22272e;
}
html[data-theme="light"] .settings-form :is(input, textarea, select):not(.sr-only):not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]) {
  border-color: #d8dde4;
  background: #faf9f6;
}
.settings-form input:not(.sr-only):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]),
.settings-form textarea, .settings-form select { font-size: .95rem; }
.settings-form input::placeholder, .settings-form textarea::placeholder { opacity: .7; }

/* Text actions share the approved sizing; icon toolbars keep compact hit areas. */
:is(.settings-primary, .settings-button, label.settings-button, .settings-danger,
    .button-link, .quiet, .quiet-link, .oauth, .manage-button,
    .auth-shell form:not(.last-login-forget) > button, .public-site .button, .join-form button, .secret-form button,
    .key-input-row button, .ssh-key-form > button, .inline-create button, .overview-quick-action button, .plans-form .button,
    .plans-plan-card .button, .contribution-actions .button,
    .actions a, .actions button) {
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border-radius: var(--ui-control-radius);
  box-shadow: var(--ui-button-shadow);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}
:is(.studio-button, .live-control, .translation-icon-button, .icon-save-button,
    .presentation-button, .reader-rail-actions button, .toolbar button,
    .copy-code, .shell-presets button) {
  border-radius: var(--ui-control-radius);
  box-shadow: var(--ui-button-shadow);
  font-weight: 500;
}
/* These buttons are intentionally square, including in narrow reader layouts. */
:is(.reader-shortcuts-trigger, .reader-fullscreen, .translation-icon-button,
    .icon-save-button, .sidebar-toggle).settings-button:has(> svg:only-child) {
  width: 2.75rem;
  padding: .6rem;
}
.resource-card:hover, .docs-entry-grid > a:hover, .actions a:hover,
.actions button:hover, .toolbar button:hover { transform: none; }
:is(button, .button-link, .settings-button, .oauth)[disabled],
:is(button, .button-link, .settings-button, .oauth)[aria-disabled="true"] { box-shadow: none; }

/* Status colors still indicate success, warning, and error. */
:is(.feedback-notice, .notice, .plans-notice, .permission-hint, .live-quota-notice,
    .organization-contact-notice, .capacity-warning) {
  border-radius: var(--ui-panel-radius);
  line-height: 1.65;
}
.feedback-notice { padding: 1.25rem var(--ui-panel-space); gap: .85rem; }
.feedback-notice p { font-size: .9rem; font-weight: 500; line-height: 1.6; }
.feedback-notice-icon { flex-shrink: 0; }
:is(.settings-dialog, .reader-shortcuts-dialog, .presentation-dialog) {
  border-radius: var(--ui-panel-radius);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / .3);
}
.settings-dialog :is(header, footer) { padding: 1.25rem var(--ui-panel-space); }
.settings-dialog > form > :is(p, label) { padding-inline: var(--ui-panel-space); font-size: .875rem; line-height: 1.65; }
.settings-dialog header button { min-height: 2.35rem; padding: 0; }

/* The account preferences follow the same in-panel header pattern as profile. */
.settings-hub:not(.profile-settings) .preference-group { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: var(--ui-panel-space); }
.settings-hub:not(.profile-settings) .preference-copy h2 { font-size: 1rem; font-weight: 600; }
.settings-hub:not(.profile-settings) .preference-copy p { font-size: .875rem; line-height: 1.65; }

@media (max-width: 48rem) {
  :root { --ui-panel-space: 1.15rem; }
  .panel-header { flex-wrap: wrap; }
  .settings-form .credential-fields { grid-template-columns: minmax(0, 1fr); }
  .feedback-notice { padding: 1rem var(--ui-panel-space); }
  .key-input-row { grid-template-columns: minmax(0, 1fr); }
  .key-input-row button { justify-self: start; }
}

/* Editor properties remain dense; the surrounding chrome shares the same shapes. */
:where(#presentation-editor, #live-design-editor) :is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="color"], [type="hidden"]), select, textarea) {
  border-radius: var(--ui-control-radius);
  box-shadow: var(--ui-field-shadow);
}

.organization-profile-panel-heading { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #444c56; }
.organization-profile-panel-heading h2 { margin: 0 0 .65rem; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.organization-profile-panel-heading p { margin: 0; color: #a6afb9; font-size: .875rem; line-height: 1.65; }
html[data-theme="light"] .organization-profile-panel-heading { border-color: #d8dde4; }
html[data-theme="light"] .organization-profile-panel-heading p { color: #68758a; }
.organization-profile-editor .profile-photo-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: start; gap: .85rem 1.25rem; text-align: left; }
.organization-profile-editor .profile-photo-editor > [data-avatar-preview] { grid-row: span 2; width: 4.5rem; height: 4.5rem; }
.organization-profile-editor .profile-photo-editor > div { justify-content: start; }
.organization-profile-editor .profile-photo-editor p { font-size: .75rem; }

/* Some legacy credential forms removed borders; use the common field treatment. */
.dashboard-body .settings-form :is(input, textarea, select):not(.sr-only):not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]) {
  border: 1px solid #444c56;
  font-size: .95rem;
  font-weight: 400;
}
html[data-theme="light"] .dashboard-body .settings-form :is(input, textarea, select):not(.sr-only):not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]) { border-color: #d8dde4; }

/* A session always has three columns: device, identity, and its action group. */
.session-list .session-row { grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.25rem var(--ui-panel-space); }
.session-row > .session-icon { width: 2.75rem; height: 2.75rem; border: 1px solid #444c56; border-radius: .65rem; background: rgb(140 149 159 / .06); }
.session-row .session-identity { gap: .35rem; }
.session-identity strong { font-size: .95rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.session-identity small { font-size: .8rem; line-height: 1.55; }
.session-identity .session-agent { font-size: .75rem; }
.session-row > .session-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
.session-actions form { margin: 0; }
.session-actions .settings-button { white-space: nowrap; }
.session-list footer { padding: 1.25rem var(--ui-panel-space); }
.session-list footer small { font-size: .8rem; line-height: 1.65; }
html[data-theme="light"] .session-row > .session-icon { border-color: #d8dde4; background: #f6f8fa; }

/* Each authorization is a complete card with a clear identity and access list. */
.connected-apps-heading { margin-bottom: 1.25rem; }
.connected-apps-heading h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.connected-apps-heading p { margin: 0; color: #a6afb9; font-size: .875rem; line-height: 1.65; }
.connected-apps-list .connected-app-card { padding: var(--ui-panel-space); margin: 0 0 1.5rem; }
.connected-app-card > .connected-app-header { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid #444c56; }
.connected-app-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 1px solid #444c56; border-radius: .65rem; color: #ffbd52; background: rgb(255 189 82 / .06); }
.connected-app-identity { min-width: 0; }
.connected-app-card h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.connected-app-expiry { margin: .35rem 0 0; color: #a6afb9; font-size: .8rem; line-height: 1.6; }
.connected-app-expiry time { font-variant-numeric: tabular-nums; }
.connected-app-header form, .connected-app-header button { margin: 0; }
.connected-app-header button { white-space: nowrap; }
.connected-app-permissions { padding: 1.25rem 0; }
.connected-app-permissions h4 { margin: 0 0 1rem; font-size: .8rem; font-weight: 600; color: #a6afb9; }
.connected-app-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; padding: 0; margin: 0; list-style: none; font-size: .875rem; line-height: 1.6; }
.connected-app-capabilities li { display: flex; align-items: baseline; gap: .65rem; overflow-wrap: anywhere; }
.connected-app-capabilities li::before { content: '✓'; flex: none; color: #72d69b; font-weight: 600; }
.connected-app-details { margin: 0; padding-top: 1rem; border-top: 1px solid #444c56; font-size: .8rem; line-height: 1.65; }
.connected-app-details summary { width: auto; padding: .25rem 0; cursor: pointer; color: #a6afb9; }
.connected-app-details dl { display: grid; gap: 1rem; margin: 1rem 0 0; }
.connected-app-details dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; }
.connected-app-details dt, .connected-app-details dd { margin: 0; }
.connected-app-details dt { color: #a6afb9; font-weight: 500; }
.connected-app-details ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.connected-app-details code { display: inline-block; padding: .2rem .5rem; border: 1px solid #444c56; border-radius: .4rem; background: #22272e; color: #b8c5d6; font-size: .75rem; overflow-wrap: anywhere; }
.connected-apps-footer.settings-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; padding: var(--ui-panel-space); }
.connected-apps-footer p { margin: 0; color: #a6afb9; font-size: .875rem; line-height: 1.65; }
.connected-apps-footer .settings-button { flex: none; }
.connected-apps-empty { text-align: center; }
.connected-apps-empty .connected-app-icon { margin: 0 auto 1rem; }
.connected-apps-empty h3 { font-size: 1rem; font-weight: 600; }
.connected-apps-empty p { color: #a6afb9; font-size: .875rem; line-height: 1.65; }
.application-mcp-access { font-size: .875rem; line-height: 1.65; }
.application-mcp-access summary { font-weight: 600; cursor: pointer; }
.application-mcp-access p { color: #a6afb9; margin: 1rem 0; }
html[data-theme="light"] :is(.connected-apps-heading p, .connected-app-expiry, .connected-app-permissions h4, .connected-app-details summary, .connected-app-details dt, .connected-apps-footer p, .connected-apps-empty p, .application-mcp-access p) { color: #68758a; }
html[data-theme="light"] :is(.connected-app-header, .connected-app-icon, .connected-app-details, .connected-app-details code) { border-color: #d8dde4; }
html[data-theme="light"] .connected-app-icon { color: #a66a10; background: #fff5e5; }
html[data-theme="light"] .connected-app-capabilities li::before { color: #247843; }
html[data-theme="light"] .connected-app-details code { color: #4c5869; background: #f6f8fa; }
@media (max-width: 70rem) {
  .session-list .session-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .session-row > .session-actions { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 48rem) {
  .session-list .session-row { gap: .85rem; }
  .session-row > .session-actions { grid-column: 1 / -1; }
  .session-row .session-actions form { grid-column: auto; width: auto; flex: 1 1 8rem; }
  .session-actions .settings-button { width: 100%; }
  .connected-app-card > .connected-app-header { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .connected-app-header form { grid-column: 1 / -1; justify-self: start; }
  .connected-app-capabilities { grid-template-columns: minmax(0, 1fr); }
  .connected-app-details dl > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .connected-apps-footer.settings-card { flex-direction: column; align-items: stretch; gap: 1rem; }
}

.session-list .session-row, .session-list footer { border-top-color: #444c56; }
.session-list + .session-connected-apps { margin-top: 1.5rem; }
html[data-theme="light"] .session-list :is(.session-row, footer) { border-top-color: #d8dde4; }

/* The username prefix and editable value form a single bordered input. */
.dashboard-body .settings-form .handle-input input:not(.sr-only),
html[data-theme="light"] .dashboard-body .settings-form .handle-input input:not(.sr-only) { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }

.connected-apps-list { margin-bottom: 1.5rem; }

/* Credentials use one inset, with compact permission groups aligned at the title. */
.dashboard-body .credential-editor { padding: 1.25rem; }
.credential-editor > h2:first-child { margin: 0 0 .85rem; padding: 0 0 .85rem; }
.credential-editor > p { margin: 0 0 1rem; font-size: .8rem; line-height: 1.55; }
.credential-editor > form { padding: 0; gap: 1rem; }
.credential-editor .scope-grid { align-items: start; gap: .65rem; }
.credential-editor .scope-group-heading { grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: start; gap: .5rem; padding: .6rem .65rem .35rem; }
.credential-editor .scope-group-heading > input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; margin: .1rem 0 0; }
.credential-editor .scope-group-copy { gap: .2rem; }
.credential-editor .scope-group-copy strong { min-height: 1.2rem; display: flex; align-items: center; gap: .45rem; line-height: 1.4; }
.credential-editor .permission-summary-icon { display: grid; place-items: center; flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; }
.credential-editor .permission-summary-icon svg { display: block; width: 1.1rem; height: 1.1rem; margin: 0; }
.credential-editor .scope-group-copy > small { padding-left: 1.55rem; line-height: 1.4; }
.credential-editor .scope-selected-count { align-self: start; padding-top: .15rem; white-space: nowrap; line-height: 1.4; }
.credential-editor .scope-group-options { gap: .15rem .35rem; padding: .15rem .65rem .5rem 1.95rem; }
.credential-editor .scope-option { min-height: 1.85rem; padding: .25rem .35rem; }
.credential-editor .scope-option input[type="checkbox"] { flex: 0 0 .9rem; width: .9rem; height: .9rem; min-height: .9rem; }
.credential-editor .credential-editor-actions { padding-top: .65rem; }
.credential-empty { padding-block: 1rem; }
@media (max-width: 48rem) {
  .dashboard-body .credential-editor { padding: 1rem; }
  .credential-editor .scope-grid { grid-template-columns: minmax(0, 1fr); }
}
.credential-editor .scope-picker legend { color: inherit; }
.credential-list > h2:first-child { margin-bottom: 0; padding: 1rem 1.25rem; }
.credential-list .credential-empty { padding: 1rem 1.25rem; }