/* A personal contact card, styled by the selected operating system. */
.profile-card { min-width: 0; width: 100%; color: #222; font: 13px/1.45 Tahoma, Arial, sans-serif; }
[data-theme] .profile-window { width: min(680px, calc(100vw - 16px)); max-width: 680px; }
.profile-window .window-content, .profile-window .profile-card { display: flex; flex-direction: column; min-height: 0; }
.profile-window .contact-back { display: none; }
.profile-window .path-bar { display: none; }
.contact-toolbar { display: flex; align-items: center; flex-shrink: 0; gap: 10px; min-height: 37px; padding: 5px 9px; margin: -10px -10px 10px; border-bottom: 1px solid #888; background: #c0c0c0; }
.contact-app-label { font-weight: bold; }
.contact-card-label { margin-left: auto; font-size: 11px; color: #555; }
.contact-back { min-height: 30px; padding: 4px 12px; }
.contact-layout { display: flex; min-height: 0; }
.contact-sidebar { display: flex; flex-direction: column; flex: 0 0 136px; border: 1px inset #999; margin-right: 9px; background: #fff; font-size: 11px; }
.contact-group { padding: 9px; border-bottom: 1px solid #aaa; background: #e9e9e9; font-weight: bold; }
.contact-selected { display: flex; align-items: center; gap: 6px; padding: 10px 7px; color: #fff; background: var(--accent); }
.contact-selected small { display: block; font-size: 10px; opacity: .8; }
.contact-mini-avatar { display: grid; place-items: center; width: 26px; height: 29px; flex-shrink: 0; border: 1px solid #fff8; font: bold 10px Georgia, serif; background: #ffffff25; }
.contact-count { margin-top: auto; padding: 7px; color: #777; border-top: 1px solid #ddd; }
.contact-scroll { flex: 1; min-width: 0; min-height: 0; max-height: min(68svh, 620px); overflow: auto; overscroll-behavior: contain; padding: 20px; background: #fff; border: 1px inset #aaa; }
.contact-identity { display: flex; align-items: center; gap: 15px; padding-bottom: 19px; border-bottom: 1px solid #bbb; }
.contact-avatar { flex: 0 0 76px; width: 76px; height: 90px; display: grid; place-items: center; color: #506079; border: 1px solid #919aaa; background: linear-gradient(135deg,#e8edf3,#bbc7d6); box-shadow: inset 0 0 0 4px #ffffff70; font: normal 28px/1 Georgia, serif; }
.contact-kicker { margin: 0 0 3px; color: #777; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.contact-identity h2 { margin: 0 0 5px; font: bold 24px/1.15 Georgia, 'Times New Roman', serif; }
.contact-role { font-size: 12px; font-weight: bold; margin: 0 0 5px; }
.contact-location { color: #666; font-size: 11px; margin: 0; }
.contact-section { margin-top: 20px; }
.contact-section h3 { margin: 0 0 9px; font-size: 12px; font-weight: bold; }
.contact-section p { margin: 0 0 10px; }
.contact-fields { margin: 19px 0 0; border-top: 1px solid #ddd; }
.contact-fields > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid #ddd; }
.contact-fields dt { color: #666; font-size: 11px; }
.contact-fields dd { margin: 0; font-size: 12px; }
.contact-interests ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 0; margin: 0; list-style: none; font-size: 11px; }
.contact-interests li { padding-left: 10px; border-left: 2px solid #999; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 22px; padding-top: 12px; border-top: 1px solid #bbb; }
.contact-links a { color: #0000a3; font-size: 11px; text-underline-offset: 2px; }
.contact-footnote { margin-top: 15px; color: #777; font-size: 10px; }
.profile-window.maximized .profile-card, .profile-window.maximized .contact-layout { flex: 1; min-height: 0; }
.profile-window.maximized .contact-scroll { max-height: none; }
[data-theme="windows"] .contact-app-label::before { content: 'File   Edit   View   '; font-weight: normal; color: #333; white-space: pre; margin-right: 22px; }
[data-theme="windows"] .contact-card-label { display: none; }
/* Platinum: an index card, restrained monochrome chrome, and a serif identity. */
[data-theme="mac"] .profile-card { font-family: Geneva, Arial, sans-serif; }
[data-theme="mac"] .contact-toolbar { background: #ddd; border-color: #777; }
[data-theme="mac"] .contact-scroll { background: #fffff5; border: 1px solid #555; box-shadow: inset 0 3px #e4e4d4; }
[data-theme="mac"] .contact-avatar { background: repeating-linear-gradient(#ddd 0 1px, #f8f8f0 1px 3px); color: #222; border-color: #555; box-shadow: 2px 2px #999; }
[data-theme="mac"] .contact-kicker { color: #555; }
[data-theme="mac"] .contact-identity { border-bottom: 3px double #777; }
[data-theme="mac"] .contact-sidebar { border: 1px solid #555; }
[data-theme="mac"] .contact-links a { color: #111; }
/* GNOME address book: warm GTK controls and an orange selected contact. */
[data-theme="ubuntu"] .profile-card { font-family: 'DejaVu Sans', Arial, sans-serif; }
[data-theme="ubuntu"] .contact-toolbar { background: #e8dfd1; border-color: #b6a48e; }
[data-theme="ubuntu"] .contact-scroll, [data-theme="ubuntu"] .contact-sidebar { border: 1px solid #b6a48e; border-radius: 3px; background: #fffaf2; }
[data-theme="ubuntu"] .contact-group { background: #ede3d4; border-color: #c6b79e; }
[data-theme="ubuntu"] .contact-avatar { border-color: #b49a75; border-radius: 4px; color: #7c4e30; background: linear-gradient(#fbecce,#d6b383); }
[data-theme="ubuntu"] .contact-identity h2 { font-family: inherit; font-size: 23px; }
[data-theme="ubuntu"] .contact-links a { color: #8e4519; }
[data-theme="ubuntu"] .contact-interests li { border-color: #b87941; }
/* Mobile Contacts are genuine full-screen app views. */
:is([data-theme="android"], [data-theme="ios"]) body[data-view="profile"] { overflow: hidden; }
:is([data-theme="android"], [data-theme="ios"]) body[data-view="profile"] #home-window { position: fixed; inset: 29px 0 0; width: 100%; max-width: none; height: calc(100dvh - 29px); margin: 0; overflow: hidden; }
:is([data-theme="android"], [data-theme="ios"]) body[data-view="profile"] .window-content,
:is([data-theme="android"], [data-theme="ios"]) body[data-view="profile"] .directory,
:is([data-theme="android"], [data-theme="ios"]) .profile-card { height: 100%; }
:is([data-theme="android"], [data-theme="ios"]) .profile-card { display: flex; flex-direction: column; }
:is([data-theme="android"], [data-theme="ios"]) .contact-toolbar { margin: 0; min-height: 50px; padding: 8px 12px; }
:is([data-theme="android"], [data-theme="ios"]) .contact-app-label { font-size: 18px; }
:is([data-theme="android"], [data-theme="ios"]) .contact-layout { flex: 1; min-height: 0; }
:is([data-theme="android"], [data-theme="ios"]) .contact-sidebar { display: none; }
:is([data-theme="android"], [data-theme="ios"]) .contact-scroll { max-height: none; padding: 24px 20px max(20px,env(safe-area-inset-bottom)); border: 0; }
:is([data-theme="android"], [data-theme="ios"]) .contact-identity h2 { font-family: Arial, sans-serif; font-size: 30px; }
[data-theme="android"] .profile-card { font-family: Arial, sans-serif; }
[data-theme="android"] .contact-toolbar { color: #fff; background: linear-gradient(#363636,#202020); border-bottom: 3px solid var(--accent); }
[data-theme="android"] .contact-card-label { color: #ccc; }
[data-theme="android"] .contact-back { background: #333; border: 1px solid #777; color: #fff; box-shadow: none; }
[data-theme="android"] .contact-scroll { background: #f4f4f4; }
[data-theme="android"] .contact-avatar { background: linear-gradient(#80ac3c,#477b20); border-color: #466520; color: #fff; border-radius: 3px; box-shadow: none; }
[data-theme="android"] .contact-identity { margin: -24px -20px 0; padding: 23px 20px; background: #fff; border-bottom: 1px solid #aaa; }
[data-theme="android"] .contact-section h3 { color: #548623; font-size: 12px; text-transform: uppercase; }
[data-theme="android"] .contact-fields > div { padding-block: 12px; }
[data-theme="android"] .contact-links a { color: #427617; }
[data-theme="android"] .contact-interests li { border-color: #78a742; }
/* iOS 6: blue navigation chrome, striped paper and grouped contact fields. */
[data-theme="ios"] .profile-card { font-family: Helvetica, Arial, sans-serif; color: #313131; }
[data-theme="ios"] .contact-toolbar { color: #fff; text-shadow: 0 -1px #3b5878; background: linear-gradient(#b3c3d6,#54749b); border-bottom: 1px solid #3e5675; }
[data-theme="ios"] .contact-back { border: 1px solid #3b587b; color: #fff; border-radius: 5px; background: linear-gradient(#86a2c2,#42638c); box-shadow: inset 0 1px #bccbde; }
[data-theme="ios"] .contact-card-label { color: #e0e9f6; }
[data-theme="ios"] .contact-scroll { background: repeating-linear-gradient(90deg,#e7e9ee 0 2px,#e0e3e9 2px 4px); }
[data-theme="ios"] .contact-avatar { border: 1px solid #a5a9b3; border-radius: 9px; background: linear-gradient(#f7f7f7,#bfc8d2); color: #768394; box-shadow: 0 1px #fff; font-family: Helvetica,Arial,sans-serif; }
[data-theme="ios"] .contact-identity { border: 0; }
[data-theme="ios"] .contact-role { color: #596c85; }
[data-theme="ios"] .contact-fields { overflow: hidden; background: #fff; border: 1px solid #b6bac3; border-radius: 9px; }
[data-theme="ios"] .contact-fields > div { padding: 12px; border-color: #ccc; }
[data-theme="ios"] .contact-fields > div:last-child { border: 0; }
[data-theme="ios"] .contact-fields dt { text-align: right; color: #536b91; font-weight: bold; }
[data-theme="ios"] .contact-section h3 { color: #4b607d; text-shadow: 0 1px #fff; font-size: 14px; }
[data-theme="ios"] .contact-links { border-top-color: #b9bdc6; }
[data-theme="ios"] .contact-links a { color: #375a92; font-weight: bold; }
[data-theme="ios"] .contact-footnote { color: #7b8390; }
[data-theme="windows"] .app-icon-profile { background-image: url('../artwork/icons/windows-profile.png'); background-size: 64px; image-rendering: pixelated; }
[data-theme="mac"] .app-icon-profile { background-image: url('../artwork/icons/mac-profile.png'); background-size: 64px; image-rendering: pixelated; }
[data-theme="ubuntu"] .app-icon-profile { background-image: url('../artwork/icons/ubuntu-profile.png'); }
[data-theme="android"] .app-icon-profile { background-image: url('../artwork/icons/android-profile.png'); }
[data-theme="ios"] .profile-icon.app-icon-profile { background-image: url('../artwork/icons/ios-profile.jpg'); background-size: cover; width: 80px; height: 80px; border-radius: 14px; }
@media (min-width: 680px) { :is([data-theme="windows"], [data-theme="mac"], [data-theme="ubuntu"]) .profiles { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (min-width: 768px) {
  :is([data-theme="android"], [data-theme="ios"]) .profiles { grid-template-columns: repeat(6,minmax(0,1fr)); }
  :is([data-theme="android"], [data-theme="ios"]) .contact-scroll { padding: 36px max(32px,calc((100vw - 850px)/2)); }
  :is([data-theme="android"], [data-theme="ios"]) .contact-sidebar { display: flex; flex-basis: 220px; margin: 0; border: 0; border-right: 1px solid #aaa; background: #d4dce6; }
  :is([data-theme="android"], [data-theme="ios"]) .contact-group { padding: 18px; background: #edf0f5; font-size: 14px; }
  :is([data-theme="android"], [data-theme="ios"]) .contact-selected { padding: 17px 12px; font-size: 14px; }
  [data-theme="ios"] .contact-selected { background: linear-gradient(#82a1c7,#4f75a6); }
  [data-theme="android"] .contact-sidebar { background: #162630; color: #ddd; border-color: #333; }
  [data-theme="android"] .contact-group { background: #10212c; }
  [data-theme="android"] .contact-scroll { padding: 32px; }
  [data-theme="android"] .contact-identity { margin: -32px -32px 0; padding: 26px 32px; }
  [data-theme="android"] .contact-selected { background: #2a5267; color: #62cce9; }
  [data-theme="android"] .contact-avatar { background: linear-gradient(#315e75,#163c50); border-color: #315e75; }
  [data-theme="android"] .contact-section h3 { color: #39708b; }
  [data-theme="android"] body[data-view="profile"] #home-window { inset: 0 0 42px; height: calc(100dvh - 42px); }
  [data-theme="ios"] .profile-icon.app-icon-profile { width: 92px; height: 92px; border-radius: 19px; }
}
@media (max-width: 540px) {
  .contact-sidebar { display: none; }
  .contact-scroll { padding: 16px; }
  .contact-avatar { width: 62px; height: 76px; flex-basis: 62px; font-size: 24px; }
  .contact-identity { gap: 12px; }
  .contact-identity h2 { font-size: 24px; }
  .contact-interests ul { grid-template-columns: 1fr; }
  [data-theme="windows"] .contact-app-label::before { display: none; }
}
/* Draft content stays brief while each section is being written. */
.contact-placeholder { color: #7a7a7a; font-style: italic; }
.contact-section .contact-fields { margin-top: 8px; }
.contact-section .contact-links { margin-top: 0; padding-top: 0; border-top: 0; }
.contact-avatar { overflow: hidden; box-shadow: none; }
.contact-photo, .contact-bitmap { display: block; width: 100%; height: 100%; object-fit: cover; }
.contact-bitmap { image-rendering: pixelated; }
[data-theme="ubuntu"] .contact-photo { filter: saturate(.85) contrast(.96); }
:is([data-theme="android"], [data-theme="ios"]) .contact-photo { filter: none; }

.contact-mini-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.contact-initials { font: 12px/1 Arial, sans-serif; }
.contact-interests > ul { display: block; }
.contact-interests > ul > li { margin-bottom: 8px; }
.contact-interests .contact-interest-group > ul { display: block; padding: 6px 0 0 18px; list-style: disc; }
.contact-interests .contact-interest-group > ul > li { padding: 0; border: 0; margin-bottom: 3px; }