/* Coordina Developer — official burgundy and gold visual identity.
 * Presentation only: no alteration of authorization, handlers or data.
 * Loaded after styles.css, scoped to the Developer console and MFA screens. */
:root {
  color-scheme: light;
  --bg: #fcf7f3;
  --panel: #fffdfa;
  --panel2: #f6ebe6;
  --ink: #41252a;
  --muted: #765f65;
  --line: #e7d8d3;
  --accent: #ebc45c;
  --gold: #ebc45c;
  --brand-red: #68333d;
  --brand-deep: #4e222d;
  --brand-soft: #f5e5e3;
  --brand-yellow: #f2cd66;
  --radius: 17px;
}
body {
  background: var(--bg);
  color: var(--ink);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: 3px solid #c18b16;
  outline-offset: 3px;
}
.ambient {
  background:
    radial-gradient(
      circle at 10% 80%,
      rgba(236, 180, 113, 0.12),
      transparent 42%
    ),
    #fcf7f3;
}
.ambient span {
  opacity: 0.08;
  filter: blur(44px);
}
.ambient span:nth-child(1) {
  background: #9d5a61;
}
.ambient span:nth-child(2) {
  background: #facb53;
}
.ambient span:nth-child(3) {
  background: #db9999;
}

/* Sign-in and activation: simple, spacious, readable. */
.welcome {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(240, 192, 99, 0.16),
      transparent 40%
    ),
    linear-gradient(145deg, #522530, #733b45);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff8ee;
}
.welcome::after {
  border-color: rgba(255, 218, 143, 0.16);
}
.logo {
  letter-spacing: -0.045em;
}
.welcome .logo {
  color: #fff8ec;
}
.logo small,
.welcome .logo small {
  color: #f6dba7;
}
.logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #392028;
  border: 1px solid rgba(248, 214, 139, 0.25);
  box-shadow: 0 8px 22px rgba(36, 13, 20, 0.21);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-mark.small {
  width: 47px;
  height: 47px;
  border-radius: 13px;
}
.welcome .kicker,
.welcome .eyebrow {
  color: #f5ce72;
}
.welcome .status-pulse,
.status-pulse {
  background: #f5c650;
  box-shadow: 0 0 0 5px rgba(250, 214, 140, 0.13);
}
.welcome h1 {
  font-size: clamp(43px, 5vw, 70px);
  max-width: 720px;
}
.welcome h1 em {
  color: #f4cf70;
}
.welcome-copy > p {
  color: #f1dfe0;
  line-height: 1.72;
}
.welcome-features span {
  color: #ffefc7;
  border-color: rgba(255, 229, 177, 0.3);
  background: rgba(255, 255, 255, 0.055);
  padding: 10px 14px;
}
.welcome-foot {
  color: #e4c4c7;
}
.login-panel {
  background: #fcf7f3;
}
.login-card {
  background: #fffdfb;
  border: 1px solid #eadbd4;
  box-shadow: 0 22px 70px rgba(86, 45, 52, 0.09);
}
.login-card h2,
.login-card h3 {
  color: #47242d;
}
.lock-icon,
.panel-icon {
  background: #f9edcf;
  color: #8b5813;
}
.eyebrow,
.kicker {
  color: #8f4c44;
}
.muted,
.login-card .muted {
  color: #765e64;
}
.login-card input,
.login-card select {
  background: #fff;
  border: 1px solid #c9aeb0;
  color: #3b2429;
}
.login-card input::placeholder {
  color: #90787e;
}
.login-card label {
  color: #4e3036;
}
.primary-button,
#sandbox-portal-form .primary-button {
  background: #f0c95e;
  border: 1px solid #d6a938;
  color: #462731;
  box-shadow: none;
  font-weight: 820;
}
.primary-button:hover:not(:disabled) {
  background: #ffda78;
  box-shadow: 0 8px 20px rgba(175, 114, 31, 0.15);
}
.login-card a,
.text-button {
  color: #843b48;
}
.login-card .security-foot {
  border-color: #ecdfd7;
  color: #725d63;
}
.login-card .manual-key,
.login-card .recovery-codes {
  background: #f9eee8;
  color: #492b33;
  border-color: #ddc4c4;
}
.login-card .mfa-qr {
  border: 1px solid #e9d8c7;
}

/* Workspace: dark-wine navigation, warm-white content and gold affordances. */
.console {
  grid-template-columns: 242px minmax(0, 1fr);
}
.sidebar {
  background: #532932;
  border-right: 1px solid #48202b;
  color: #fff6ee;
}
.sidebar-brand {
  border-color: rgba(255, 229, 175, 0.15);
  gap: 12px;
}
.sidebar-brand strong {
  color: #fff8ef;
  letter-spacing: -0.04em;
}
.sidebar-brand small {
  color: #f0d5c7;
  letter-spacing: 0.02em;
}
.sidebar-label {
  color: #e7bac0;
}
.sidebar-link {
  color: #ecd8d7;
  font-size: 13px;
  min-height: 48px;
  font-weight: 670;
}
.sidebar-link.active {
  color: #fff0b0;
  background: #793b45;
  border: 1px solid #a05a60;
  box-shadow: inset 3px 0 0 #f5ce67;
}
.sidebar-link:hover:not(:disabled) {
  background: #69333e;
  color: #fff;
}
.sidebar-link:disabled {
  color: #a8868a;
  cursor: not-allowed;
}
.nav-symbol {
  color: #efc767;
}
.sidebar-bottom {
  color: #e5c9cc;
  border-color: rgba(255, 255, 255, 0.17);
}
.env-dot {
  background: #f1cb67;
}
.sidebar-future {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 15px;
  padding: 16px 8px 0;
}
.sidebar-future > summary {
  color: #ebccd0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 10px;
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
}
.sidebar-future > summary::-webkit-details-marker {
  display: none;
}
.sidebar-future > summary:hover {
  background: #65333d;
}
.sidebar-future[open] > summary span {
  transform: rotate(180deg);
}
.sidebar-future .future-links {
  padding-top: 7px;
}
.sidebar-future .sidebar-link {
  font-size: 11px;
}
.workspace {
  background:
    radial-gradient(
      circle at 100% -10%,
      rgba(240, 196, 114, 0.12),
      transparent 32%
    ),
    #fcf8f5;
}
.workspace-header {
  background: #fffdf9;
  border-color: #eadbd3;
  min-height: 90px;
}
.workspace-context {
  color: #865862;
  font-size: 10px;
}
.workspace-header h2 {
  color: #482630;
  font-size: 28px;
}
.access-tag {
  background: #fbf0d1;
  border-color: #ecd9a6;
  color: #6c4c1e;
  letter-spacing: 0.02em;
}
.logout-button {
  background: #fff;
  border-color: #dcc5c5;
  color: #6d3540;
}
.logout-button:hover {
  background: #f9eeee;
  border-color: #bc7a7d;
}
.workspace-body {
  max-width: 1450px;
}
.page-intro {
  margin-bottom: 25px;
  align-items: center;
}
.page-intro h3 {
  font-size: clamp(33px, 3.3vw, 49px);
  font-weight: 760;
}
.page-intro h3 em {
  color: #a34f52;
}
.page-intro p {
  font-size: 14px;
  color: #765f65;
  line-height: 1.7;
}
.introduction-index {
  color: #9c8183;
}
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.quick-action {
  width: 100%;
  min-width: 0;
  display: flex;
  text-align: left;
  align-items: center;
  gap: 13px;
  padding: 22px 17px;
  background: #fff;
  border: 1px solid #ead6ce;
  border-radius: 17px;
  color: #512b34;
  text-decoration: none;
  box-shadow: 0 7px 22px rgba(75, 39, 47, 0.03);
  transition:
    border-color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.quick-action:hover {
  transform: translateY(-2px);
  border-color: #d5a665;
  box-shadow: 0 10px 24px rgba(91, 45, 45, 0.08);
}
.quick-action-icon {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #f5e1e1;
  color: #843b48;
  font-size: 22px;
}
.quick-action strong {
  display: block;
  font-size: 15px;
  font-weight: 820;
}
.quick-action small {
  display: block;
  margin-top: 5px;
  color: #826970;
  font-size: 11px;
  line-height: 1.5;
}
.quick-action-arrow {
  margin-left: auto;
  color: #a27045;
  font-size: 18px;
  align-self: flex-start;
}
.metric-section-title {
  font-size: 17px;
  color: #542e37;
  margin: 0 0 15px;
  letter-spacing: -0.02em;
}
.metric {
  background: #fffdf9;
  border: 1px solid #e7d8d0;
  box-shadow: 0 4px 15px rgba(94, 40, 45, 0.028);
}
.metric-accent {
  background: #6d343f;
  border-color: #68313d;
}
.metric-heading,
.metric-foot {
  color: #80626a;
}
.metric-heading span {
  color: #bb8540;
}
.metric-number {
  color: #482832;
}
.metric-accent .metric-heading,
.metric-accent .metric-foot {
  color: #f0d8d9;
}
.metric-accent .metric-heading span {
  color: #f9d878;
}
.metric-accent .metric-number {
  color: #fff8ed;
}
.panel {
  background: #fffefa;
  border-color: #e7d7d2;
  box-shadow: 0 4px 16px rgba(85, 42, 50, 0.028);
}
.panel h4 {
  color: #4b2831;
}
.panel p {
  color: #735c62;
}
.panel small {
  color: #7e6b70;
}
.panel-icon {
  color: #8b5813;
}
.session-details dt {
  color: #80676c;
}
.session-details dd {
  color: #542f38;
}
.inline-action {
  background: #f9e5b2;
  border: 1px solid #e7c674;
  color: #5e333b;
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 780;
  margin-top: 13px;
}
.inline-action:hover {
  background: #ffe7a0;
}
.workspace-footer {
  color: #8b7476;
  border-color: #eadbd5;
}
.progress {
  background: #f5e6de;
}
.progress span {
  background: #d4a64e;
}

/* Creation/publishing controls remain fully available, but are less dense. */
.portal-management-grid .panel {
  max-width: none;
}
#sandbox-portal-form {
  max-width: 830px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 11px;
  padding: 22px;
  background: #fdf6ed;
  border: 1px solid #ecdcd2;
  border-radius: 14px;
}
#sandbox-portal-form > label,
#sandbox-portal-form > select,
#sandbox-portal-form > #sandbox-career-row,
#sandbox-portal-form > small,
#sandbox-portal-form > input,
#sandbox-portal-form > button {
  grid-column: 1 / -1;
}
#sandbox-portal-form label {
  color: #593b40;
}
#sandbox-portal-form select,
#sandbox-portal-form select option {
  color-scheme: light;
  background: #fffdfb;
  color: #39272a;
  border-color: #c9aaa8;
}
#sandbox-portal-form select:disabled {
  color: #947e83;
  background: #f4eeec;
}
#sandbox-logo {
  background: #fff;
  border-color: #c7a7a4;
  color: #4a3236;
}
#sandbox-logo::file-selector-button {
  background: #f6d57b;
  color: #593637;
}
#sandbox-logo-hint {
  color: #80666e;
}
.sandbox-portal-row {
  background: #fffdfb;
  border-color: #e3d0ca;
  color: #422a30;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(81, 43, 48, 0.025);
}
.portal-logo-preview {
  background: #faf2ec;
  color: #765b63;
  border-color: #d6b6af;
}
.portal-name {
  color: #4a2730;
}
.portal-state {
  color: #80616a;
}
.portal-action,
.portal-logo-label,
.portal-remove-logo {
  background: #fff8ef;
  color: #6a3842;
  border-color: #cdaea9;
}
.portal-action:hover,
.portal-logo-label:hover,
.portal-remove-logo:hover {
  background: #fae6d9;
  color: #54272d;
}
.portal-logo-message {
  color: #856267;
}
.portal-publication,
.portal-rename-form {
  border-color: #eadad2;
}
.portal-public-link {
  color: #894451;
}
.portal-publish-form label,
.portal-rename-form label {
  color: #5d3741;
}
.portal-publish-form input,
.portal-rename-form input {
  color-scheme: light;
  background: #fff;
  color: #3e292c;
  border-color: #c9aaa6;
}
.portal-domain-suffix {
  color: #826870;
}
.portal-publication-disclaimer {
  color: #7e656b;
}
.portal-publish-button {
  background: #edc75e;
  color: #553038;
  border-color: #dbad3f;
}
.portal-publish-button:hover {
  background: #f9db83;
}
.portal-publish-button.portal-unpublish {
  color: #923d4b;
  border-color: #c99b9d;
  background: #fff4f1;
}
.portal-rename-button {
  background: #f2e6e3;
  border-color: #cfaeaa;
  color: #67363f;
}
.portal-publication-message {
  color: #814450;
}
.portal-reserved-domain {
  color: #7b5962;
}
#academic-directory-list a {
  color: #91434d;
}

/* Keep the same effective layout on tablets and phones. */
@media (max-width: 1160px) {
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  .console {
    grid-template-columns: 1fr;
  }
  .sidebar {
    padding: 16px 18px;
  }
  .sidebar-brand {
    padding-bottom: 12px;
  }
  .sidebar-future {
    display: none;
  }
  .sidebar-links {
    padding-bottom: 9px;
  }
  .sidebar-link {
    min-height: 43px;
  }
}
@media (max-width: 610px) {
  .quick-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-action {
    padding: 16px 14px;
  }
  .workspace-header {
    min-height: 72px;
  }
  .workspace-header h2 {
    font-size: 24px;
  }
  .page-intro h3 {
    font-size: 33px;
  }
  #sandbox-portal-form {
    display: grid;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .login-layout {
    grid-template-columns: 1fr;
  }
  .welcome {
    border-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick-action {
    transition: none;
    transform: none;
  }
}

.portal-rename-details {
  margin-top: 14px;
  max-width: 560px;
}
.portal-rename-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 10px 12px;
  background: #f7ede6;
  border: 1px solid #e1cbc4;
  border-radius: 10px;
  color: #713946;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.portal-rename-details > summary::-webkit-details-marker {
  display: none;
}
.portal-rename-details > summary::before {
  content: "⌄";
  font-size: 16px;
}
.portal-rename-details[open] > summary::before {
  transform: rotate(180deg);
}
.portal-rename-details .portal-rename-form {
  margin-top: 7px;
}

.portal-lifecycle-controls {
  grid-column: 2 / -1;
  border-top: 1px solid #ecdcd4;
  margin-top: 3px;
  padding-top: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 13px;
}
.portal-lifecycle-note {
  width: 100%;
  color: #72535d;
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.55;
}
.portal-lifecycle-tag {
  align-self: flex-start;
  border: 1px solid #d9b5a8;
  border-radius: 999px;
  padding: 6px 11px;
  background: #fff5e5;
  color: #7a3849;
  font-size: 11px;
  font-weight: 780;
}
.portal-lifecycle-button {
  color: #56313b;
  background: #f5d379;
  border: 1px solid #d6a444;
  border-radius: 9px;
  min-height: 40px;
  padding: 9px 14px;
  font-weight: 750;
  font-size: 12px;
}
.portal-lifecycle-button.portal-lifecycle-danger {
  background: #fff2f0;
  border-color: #d9a3a4;
  color: #873844;
}
.portal-lifecycle-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 1150px) {
  .portal-lifecycle-controls {
    grid-column: 1 / -1;
  }
}