/* Desktop OS shortcuts stay horizontal at phone widths too. */
:is([data-theme="windows"], [data-theme="mac"], [data-theme="ubuntu"]) .profiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Wide screens become tablets, even when the theme was chosen on a laptop. */
@media (min-width: 768px) {
  :is([data-theme="android"], [data-theme="ios"]) body { padding: 64px 32px max(40px, env(safe-area-inset-bottom)); }
  :is([data-theme="android"], [data-theme="ios"]) .window { max-width: 1280px; }
  [data-theme="android"] body { padding-inline: clamp(24px, 4vw, 56px); }
  [data-theme="android"] .window { max-width: 1360px; }
  :is([data-theme="android"], [data-theme="ios"]) .intro { margin-bottom: 55px; }
  :is([data-theme="android"], [data-theme="ios"]) h1 { font-size: 42px; }
  :is([data-theme="android"], [data-theme="ios"]) .profiles { gap: 30px; }
  :is([data-theme="android"], [data-theme="ios"]) .profile { font-size: 15px; }
  :is([data-theme="android"], [data-theme="ios"]) .system-menu { width: min(800px, calc(100vw - 64px)); }
  :is([data-theme="android"], [data-theme="ios"]) .menu-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: 'heading heading' 'sidebar choices'; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  :is([data-theme="android"], [data-theme="ios"]) .menu-titlebar { grid-area: heading; }
  :is([data-theme="android"], [data-theme="ios"]) .tablet-settings-sidebar { display: block; grid-area: sidebar; min-height: 410px; border-right: 1px solid #0003; padding-top: 22px; }
  .tablet-settings-title { display: flex; align-items: center; gap: 11px; padding: 4px 20px 22px; font-weight: bold; font-size: 18px; }
  .settings-category { padding: 13px 20px; font-weight: bold; }
  :is([data-theme="android"], [data-theme="ios"]) .theme-list { grid-area: choices; }
  [data-theme="ios"] .tablet-settings-sidebar { background: #c9d0de; color: #3e4e67; }
  [data-theme="ios"] .settings-category { color: #fff; text-shadow: 0 -1px #284e7e; background: linear-gradient(#7397c6, #4d75a9); border-block: 1px solid #456894; }
  [data-theme="ios"] .profile-icon { width: 92px; height: 92px; padding: 8px; border-radius: 19px; }
  [data-theme="ios"] .profile img { width: 74px; height: 74px; }
  /* Android 3 Honeycomb moved the status and navigation chrome to the bottom. */
  html[data-theme="android"] { --accent: #62cce9; }
  [data-theme="android"] body { padding-bottom: max(74px, calc(42px + env(safe-area-inset-bottom))); background: radial-gradient(ellipse at 70% 25%, #144663, transparent 65%), linear-gradient(135deg, #07131b, #102a3b 50%, #06131d); }
  [data-theme="android"] body[data-view="cv"] .window { inset: 0 0 42px; height: calc(100dvh - 42px); }
  [data-theme="android"] .mobile-status { top: auto; bottom: 0; height: 42px; padding-inline: 24px; color: #62cce9; border-top: 1px solid #253a49; background: #060c12; }
  [data-theme="android"] .settings-launcher:hover .settings-tile { color: #62cce9; }
  [data-theme="android"] .settings-tile { width: 88px; height: 88px; background: linear-gradient(#23465a, #0c202e); border-color: #436477; border-radius: 3px; color: #9fb9c9; }
  [data-theme="android"] .profile img { width: 88px; height: 88px; }
  [data-theme="android"] .cv-icon { width: 88px; height: 88px; }
  [data-theme="android"] .cv-icon::before { top: 21px; box-shadow: 0 12px #ddd, 0 24px #777, 0 36px #777; }
  [data-theme="android"] .profile:hover .profile-label, [data-theme="android"] .profile:focus-visible .profile-label { background: #62cce9; }
  [data-theme="android"] .cv-icon { border-color: #62cce9; box-shadow: inset 0 0 0 3px #62cce9, 0 2px 3px #0009; }
  [data-theme="android"] .cv-icon::before, [data-theme="android"] .cv-icon::after { background: #62cce9; }
  [data-theme="android"] .system-menu { border-color: #2c506a; background: #0c1821; }
  [data-theme="android"] .menu-titlebar { color: #62cce9; background: #152b3a; border-color: #62cce9; }
  [data-theme="android"] .tablet-settings-sidebar { background: #101f2b; color: #b6d1e2; }
  [data-theme="android"] .settings-category { color: #62cce9; background: #1b3445; border-left: 3px solid #62cce9; }
  [data-theme="android"] .theme-choice { border-color: #253c4c; }
  [data-theme="android"] .theme-choice:hover, [data-theme="android"] .theme-choice:focus-visible { background: #62cce9; }
  [data-theme="android"] .theme-choice[aria-pressed="true"]::after { color: #62cce9; }
}
@media (orientation: landscape) and (min-width: 480px) {
  :is([data-theme="android"], [data-theme="ios"]) .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  :is([data-theme="android"], [data-theme="ios"]) body,
  :is([data-theme="android"], [data-theme="ios"]) body * { cursor: auto; }
  :is([data-theme="android"], [data-theme="ios"]) a,
  :is([data-theme="android"], [data-theme="ios"]) button { cursor: pointer; }
}

@media (max-width: 639px) {
  .panel-clock { padding-inline: 8px; }
  [data-theme="mac"] .panel-button { padding-inline: 8px; }
  [data-theme="mac"] .finder-title { padding-inline: 6px; }
  [data-theme="mac"] .mac-mark { padding-inline: 8px; }
  [data-theme="ubuntu"] .panel-button { padding-inline: 8px; font-size: 13px; }
  [data-theme="ubuntu"] .panel-clock { font-size: 12px; }
  [data-theme="ubuntu"] .ubuntu-mark { font-size: 18px; margin-right: 3px; }
}
@media (max-width: 600px) {
  :is([data-theme="android"], [data-theme="ios"]) .system-menu { inset: 0; transform: none; width: 100%; max-height: 100svh; min-height: 100svh; border: 0; border-radius: 0; }
  :is([data-theme="android"], [data-theme="ios"]) .menu-titlebar { padding-top: max(9px, env(safe-area-inset-top)); }
  :is([data-theme="android"], [data-theme="ios"]) .theme-list { margin-bottom: max(20px, env(safe-area-inset-bottom)); }
  [data-theme="android"] .theme-list { margin: 0; }
}
@media (max-height: 510px) and (min-width: 601px) {
  :is([data-theme="android"], [data-theme="ios"]) body { padding-top: 42px; }
  :is([data-theme="android"], [data-theme="ios"]) .intro { margin-bottom: 14px; }
}
[data-theme="ios"] body[data-view="cv"] { overflow: hidden; }
[data-theme="ios"] body[data-view="cv"] .intro { display: none; }
[data-theme="ios"] body[data-view="cv"] .window {
  position: fixed;
  inset: 29px 0 0;
  width: 100%;
  max-width: none;
  height: calc(100dvh - 29px);
  margin: 0;
  background: #fff;
  overflow: hidden;
}
[data-theme="ios"] body[data-view="cv"] .window-content,
[data-theme="ios"] body[data-view="cv"] .directory { height: 100%; }
[data-theme="ios"] body[data-view="cv"] .cv-notes { display: flex; flex-direction: column; height: 100%; }
[data-theme="ios"] body[data-view="cv"] .cv-toolbar {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 14px;
  min-height: 48px;
  background: linear-gradient(#b4c2d3, #57769b);
  border-bottom: 1px solid #3d5573;
}
[data-theme="ios"] body[data-view="cv"] .cv-toolbar > span { font-size: 0; }
[data-theme="ios"] body[data-view="cv"] .cv-toolbar > span::after { content: 'CV Notes'; font-size: 16px; font-weight: bold; }
[data-theme="ios"] body[data-view="cv"] .cv-back { color: #fff; background: linear-gradient(#89a1bf, #466890); border: 1px solid #3d587a; border-radius: 6px; box-shadow: inset 0 1px #c5d4e5; min-height: 32px; }
[data-theme="ios"] body[data-view="cv"] .cv-paper { flex: 1; min-height: 0; max-height: none; border-radius: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
[data-theme="ios"] body.menu-open .system-menu { inset: 29px 0 0; transform: none; width: 100%; height: calc(100dvh - 29px); min-height: 0; max-height: none; border: 0; border-radius: 0; }

@media print {
  .desktop-panel, .system-menu, .mobile-status, .mobile-settings-app { display: none !important; }
  body { color: #000 !important; background: #fff !important; padding: 0 !important; }
  .window { position: static !important; }
  .profile, .profile:visited { color: #000 !important; }
}

@media (min-width: 768px) {
  [data-theme="ios"] body.menu-open .system-menu { padding: 0; overflow: hidden; }
  [data-theme="ios"] .tablet-settings-sidebar { min-height: 0; }
  [data-theme="ios"] .theme-list { min-height: 0; overflow: auto; align-self: stretch; }
}