/* Shared customer portal presentation, deliberately scoped away from Studio/admin. */
.client-portal-view .portal-sidebar { min-width: 0; }
@media (max-width: 900px) {
  .client-portal-view .portal-layout { grid-template-columns: minmax(0, 1fr); }
}
.portal-main-area { min-width: 0; }
.portal-main-area .portal-tab-panel { min-width: 0; }
.portal-main-area :is(.portal-category-intro, .security-intro) {
  display: flex; align-items: flex-start; gap: 18px; padding: 24px;
  margin-bottom: 28px; border-radius: 18px;
  color: #fff; background: var(--ink, #07111b);
}
.portal-main-area :is(.portal-category-icon, .security-intro-icon) {
  flex: 0 0 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); border-radius: 14px; color: #ff9b40;
}
.portal-main-area :is(.portal-category-icon, .security-intro-icon) .es-icon { color: inherit; }
.portal-main-area :is(.portal-category-intro, .security-intro) > div { min-width: 0; overflow-wrap: anywhere; }
.portal-main-area :is(.portal-category-intro, .security-intro) .eyebrow { margin: 0 0 8px; font-size: .65rem; color: #ff9b40; }
.portal-main-area :is(.portal-category-intro, .security-intro) h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.2; }
.portal-main-area :is(.portal-category-intro, .security-intro) p:last-child { margin: 0; color: #d1d9e0; font-size: .85rem; line-height: 1.6; }
.portal-main-area .portal-category-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.portal-main-area .orders-filter-chips { flex-wrap: wrap; gap: 8px; }
.portal-main-area :is(button, a.button) { min-height: 44px; white-space: normal; }
.portal-main-area :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.portal-main-area .portal-form { gap: 20px; }
.portal-main-area .portal-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 46px; border-radius: 12px; background: var(--control-surface, #fff); }
.portal-main-area .portal-form label { line-height: 1.5; }
.portal-main-area .field-hint { font-weight: 400; line-height: 1.6; }
.portal-main-area .form-actions-bar { flex-wrap: wrap; gap: 12px; padding-top: 20px; }
.portal-main-area :is(.company-status-card, .address-card-group, .toggle-card, .info-banner-sm) { border-radius: 16px; background: var(--paper, #f7f4ee); border: 1px solid var(--line); }
.portal-main-area :is(.portal-order-card, .creation-card, .creation-project-card, .library-card, .address-card-item) { border-radius: 16px; border-color: var(--line); background: var(--control-surface, #fff); }
.portal-main-area :is(.creation-thumb-wrap, .library-card-thumb) { background: var(--paper, #f7f4ee); }
.portal-main-area .library-card { display:flex; flex-direction:column; min-width:0; padding:12px; border:1px solid var(--line); gap:12px; }
.portal-main-area .library-card-thumb { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:160px; padding:16px; border-radius:12px; }
.portal-main-area .library-card-thumb img { width:100%; height:144px; object-fit:contain; }
.portal-main-area .library-card-thumb [hidden] { display:none; }
.portal-main-area .lib-format-badge { position:absolute; top:8px; right:8px; background:var(--control-surface, #fff); padding:2px 6px; border-radius:6px; font-size:.65rem; font-weight:700; }
.portal-main-area .library-preview-status { margin:0; font-size:.78rem; text-align:center; color:var(--muted); }
.portal-main-area .library-card-body { display:flex; flex-direction:column; gap:6px; flex:1; }
.portal-main-area .lib-filename { font-size:.85rem; }
.portal-main-area .lib-dimensions { color:var(--muted); font-size:.75rem; }
.portal-main-area .library-card-actions { display:flex; margin-top:auto; padding-top:8px; }
.portal-main-area :is(.creation-card-body, .library-card-body, .address-lines) { overflow-wrap: anywhere; }
.portal-main-area :is(.creation-card-actions, .library-card-actions, .address-card-actions) { flex-wrap: wrap; gap: 8px; }
.portal-main-area .empty { grid-column: 1 / -1; width: 100%; max-width: none; padding: 28px 20px; border: 1px dashed var(--line); border-radius: 16px; background: var(--paper, #f7f4ee); }
.portal-main-area .empty p { max-width: 48ch; margin-inline: auto; line-height: 1.6; }
.portal-main-area .toggle-card { cursor: pointer; padding: 18px; gap: 16px; transition: border-color .15s, background .15s; }
.portal-main-area .toggle-card:has(input:checked) { border-color: #edc9a4; background: #fff8ef; }
.portal-main-area .toggle-card:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.portal-main-area .toggle-card input { accent-color: var(--orange); flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.portal-main-area .toggle-content { min-width: 0; }
.portal-main-area .toggle-content span { line-height: 1.6; font-weight: 400; color: var(--muted); }
.portal-main-area .info-banner-sm { padding: 16px; line-height: 1.6; color: var(--ink); }
.portal-main-area :is(.email-verification, #profile-phone-verification, .save-feedback):empty { display: none; }

/* Contact fields keep the same field > explanation > status rhythm. */
#profile-form-personal { --profile-success-bg:#effaf3; --profile-success-border:#b8dec5; --profile-success-ink:#21623a; gap:24px; }
#profile-form-personal .profile-contact-field { display:grid; gap:12px; min-width:0; }
#profile-form-personal label { margin:0; font-size:.9rem; }
#profile-form-personal input { font-size:1rem; }
#profile-form-personal input[readonly] { background:var(--paper); color:var(--ink); }
#profile-form-personal .field-hint { margin-top:8px; font-size:.78rem; }
#profile-form-personal .profile-contact-status { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--muted); min-height:52px; font-size:.85rem; line-height:1.5; }
#profile-form-personal .profile-contact-status:has(.contact-verified) { background:var(--profile-success-bg); border-color:var(--profile-success-border); color:var(--profile-success-ink); }
.contact-verified { display:flex; align-items:center; gap:10px; font-size:.88rem; line-height:1.5; }
.contact-verified .es-icon { flex-shrink:0; color:inherit; }
#profile-form-personal .profile-contact-status .contact-verified { color:inherit; }
#profile-form-personal .email-verification-actions { width:100%; margin:0; }
#profile-form-personal .email-verification p { width:100%; margin:0; }
#profile-form-personal .form-actions-bar { margin-top:0; padding-top:20px; }
#profile-form-personal .portal-save-btn { border-radius:12px; }
#profile-form-personal .profile-contact-status:empty { display:none; }
@media (max-width:640px) {
  #profile-form-personal .profile-contact-status > button { width:100%; }
}
@media (max-width: 640px) {
  .portal-main-area :is(.portal-category-intro, .security-intro) { padding: 18px; gap: 12px; margin-bottom: 22px; }
  .portal-main-area :is(.portal-category-icon, .security-intro-icon) { flex-basis: 38px; height: 38px; }
  .portal-main-area .portal-category-toolbar > :is(button, div:not(.orders-filter-chips)) { width: 100%; }
  .portal-main-area .portal-category-toolbar > div > button { width: 100%; }
  .portal-main-area .orders-filter-chips { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-main-area .creation-project-card { min-width: 0; }
  .portal-main-area :is(.form-grid-2, .form-grid-3) { grid-template-columns: minmax(0, 1fr); }
  .portal-main-area .input-with-action { flex-wrap: wrap; }
  .portal-main-area .input-with-action input { min-width: 0; flex-basis: 100%; }
  .portal-main-area .form-actions-bar > button { width: 100%; }
  .portal-main-area :is(.creations-grid, .library-grid-container, .addresses-cards-grid) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-main-area *, .portal-main-area *::before, .portal-main-area *::after { animation: none !important; transition: none !important; }
  .portal-main-area :is(.creation-card, .address-card-item):hover { transform: none; }
}
.guest-account-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 18px 0 24px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--orange) 38%, #d8dee6);
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 9%, #fff), #fff 62%);
  box-shadow: 0 14px 35px rgba(20, 31, 45, .08);
}

.guest-account-offer[hidden] { display: none; }
.guest-account-offer-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--orange); }
.guest-account-offer-copy h3 { margin: 2px 0 5px; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.guest-account-offer-copy p { margin: 0; color: var(--muted, #667085); }
.guest-account-offer-copy .eyebrow { color: #a94d00; font-size: .74rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 720px) {
  .guest-account-offer { grid-template-columns: auto minmax(0, 1fr); }
  .guest-account-offer .primary { grid-column: 1 / -1; width: 100%; }
}