/* Profile page — self-declared details and device preferences.
   Loaded by app.html only; the page itself is signed-in only. */

#profile .profile-inner {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 64px;
}

#profile .profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px;
  margin-top: 18px;
}

#profile .profile-card-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

#profile .profile-card-sub {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

#profile .profile-field { margin-bottom: 16px; }

#profile .profile-field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

#profile .profile-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}

#profile .profile-field input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

#profile .profile-field-note {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

/* Identity block: the values admin uses to recognise the account. */
#profile .profile-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-family: var(--sans);
  font-size: 12.5px;
}

#profile .profile-identity dt { color: var(--muted); white-space: nowrap; }
#profile .profile-identity dd { color: var(--text); margin: 0; overflow-wrap: anywhere; }

/* Avatar */
#profile .profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#profile .profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  object-fit: cover;
  flex: 0 0 auto;
}

#profile .profile-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--faint);
}

#profile .profile-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Preference toggles reuse the app's chip idiom. */
#profile .profile-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }

#profile .profile-choice {
  min-height: 40px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

#profile .profile-choice:hover { color: var(--text); border-color: var(--gold-dim, var(--gold)); }
#profile .profile-choice.active { color: var(--gold); border-color: var(--gold); }
#profile .profile-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#profile .profile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

#profile .profile-status {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--green);
}

#profile .profile-status.is-error { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  #profile .profile-choice { transition: none; }
}

@media (max-width: 620px) {
  #profile .profile-card { padding: 16px; }
  #profile .profile-identity { grid-template-columns: 1fr; gap: 2px 0; }
  #profile .profile-identity dd { margin-bottom: 10px; }
}

/* Workspace boot skeleton - static in app.html, shown from first paint until
   the first switchTab. Lives here because app.html is at its style-tag cap
   and this sheet is head-loaded by the workspace alone. */
#a2-boot-skeleton{max-width:1280px;margin:18px auto 0;padding:0 18px;}
#a2-boot-skeleton[hidden]{display:none;}
.a2-skel{position:relative;overflow:hidden;border:1px solid rgba(201,168,76,.14);border-radius:14px;background:rgba(255,255,255,.025);}
.a2-skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(201,168,76,.06) 40%,rgba(201,168,76,.11) 50%,rgba(201,168,76,.06) 60%,transparent 80%);
  background-size:200% 100%;animation:a2SkelShimmer 1.4s ease-in-out infinite;}
.a2-skel-subnav{height:44px;margin-bottom:16px;}
.a2-skel-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.a2-skel-kpi{height:96px;}
.a2-skel-table{height:320px;}
@keyframes a2SkelShimmer{from{background-position:180% 0}to{background-position:-80% 0}}
html.light .a2-skel,html[data-theme="light"] .a2-skel{border-color:rgba(60,43,18,.12);background:rgba(60,43,18,.03);}
html.light .a2-skel::after,html[data-theme="light"] .a2-skel::after{
  background:linear-gradient(100deg,transparent 20%,rgba(60,43,18,.04) 40%,rgba(60,43,18,.08) 50%,rgba(60,43,18,.04) 60%,transparent 80%);background-size:200% 100%;}
@media (max-width:640px){.a2-skel-kpis{grid-template-columns:repeat(2,1fr);}.a2-skel-table{height:240px;}}
@media (prefers-reduced-motion: reduce){.a2-skel::after{animation:none;background:rgba(201,168,76,.05);}}

/* If the workspace script itself never arrives (flaky first visit), no code
   can ever hide the shimmer - so the help line is pure CSS: it depends on
   nothing having loaded. Deliberately not disabled under reduced-motion;
   this is information appearing, not decoration. */
#a2-boot-skeleton::after{content:'載入時間過長 — 請重新整理頁面 · Taking too long — please reload';display:block;text-align:center;padding-top:18px;font:13px/1.6 var(--sans,Inter,sans-serif);color:rgba(235,226,210,.78);opacity:0;animation:a2SkelHelpIn .5s ease-out 10s forwards;}
html.light #a2-boot-skeleton::after,html[data-theme="light"] #a2-boot-skeleton::after{color:rgba(60,43,18,.78);}
@keyframes a2SkelHelpIn{to{opacity:1}}