/* Test layout 2: phone home screen. Loaded last; every rule is scoped to
   html[data-layout="phone"], so nothing changes unless the captain switches it
   on in Settings. Brand colours come from the existing navy / gold palette. */
html[data-layout="phone"] .desk-nav,
html[data-layout="phone"] .tabbar { display: none !important; }
html[data-layout="phone"] body.desktop-mode .phone-screen {
  grid-template-columns: 1fr; grid-template-rows: 64px 1fr;
  grid-template-areas: "header" "main";
}
html[data-layout="phone"] .content { padding-bottom: 128px !important; }
html[data-layout="phone"] #burgerBtn { display: inline-flex !important; }

#ct-launcher { --ct-navy: #061733; --ct-navy-2: #0d2a52; --ct-gold: #d6a85a; --ct-ink: #f5f1e7; }
#ct-launcher .ct-launch-panel {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 150px;
  /* Same backdrop as the message board: Atlantic duotone under a navy veil.
     Attached to the fixed panel (not background-attachment: fixed, which
     iPhone Safari ignores), so it stays put while the apps scroll. */
  background:
    linear-gradient(180deg, rgba(6,16,30,0.72) 0%, rgba(6,16,30,0.60) 45%, rgba(6,16,30,0.85) 100%),
    url('/img/atlantic-duotone.jpg') center / cover no-repeat,
    var(--ct-navy);
  color: var(--ct-ink);
  font-family: var(--font-body, system-ui, sans-serif);
}
#ct-launcher .ct-launch-panel.ct-enter { animation: ct-launch-in 220ms cubic-bezier(.16,1,.3,1); }
@keyframes ct-launch-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
#ct-launcher .ct-launch-panel > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.ct-launch-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0 12px; }
.ct-launch-eyebrow { display: block; font: 600 12px/1.4 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ct-gold); }
.ct-launch-heading h1 { margin: 2px 0 0; font: 600 28px/1.1 'Barlow Condensed', sans-serif; letter-spacing: -.005em; color: #fff; }
.ct-launch-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ct-launch-actions button, .ct-arrange-tools button, .ct-arrange-tools select {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(245,241,231,.28);
  background: transparent; color: var(--ct-ink); font: 500 14px/1 inherit; cursor: pointer;
}
.ct-launch-actions button:hover, .ct-arrange-tools button:hover { background: rgba(245,241,231,.1); }
.ct-launch-actions button[aria-pressed="true"] { background: var(--ct-gold); border-color: var(--ct-gold); color: var(--ct-navy); font-weight: 600; }
.ct-launch-search { position: relative; margin: 6px auto 4px; }
.ct-launch-search span { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); opacity: .7; pointer-events: none; }
.ct-launch-search span svg { width: 20px; height: 20px; }
.ct-launch-search input, .ct-folder-name-label input {
  width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid rgba(245,241,231,.22);
  background: rgba(245,241,231,.08); color: #fff; font: 400 16px/1.2 inherit; padding: 0 14px 0 44px;
}
.ct-folder-name-label { display: block; margin: 4px auto 10px; font-size: 13px; color: rgba(245,241,231,.8); }
.ct-folder-name-label input { padding-left: 14px; margin-top: 6px; }
.ct-launch-search input::placeholder { color: rgba(245,241,231,.55); }
.ct-launch-search input:focus-visible, .ct-folder-name-label input:focus-visible { outline: 2px solid var(--ct-gold); outline-offset: 2px; }
.ct-launch-help { margin: 10px auto 16px; font-size: 14px; line-height: 1.45; color: rgba(245,241,231,.78); }
.ct-arrange-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; margin: 0 auto 16px !important; border-radius: 16px; background: rgba(245,241,231,.1); }
.ct-arrange-tools strong { flex: 1 1 100%; font-size: 15px; color: #fff; }
.ct-arrange-tools label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ct-arrange-tools select { padding: 0 10px; background: var(--ct-navy-2); max-width: 190px; }
.ct-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 22px 8px; padding: 6px 0 12px; }
.ct-launch-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: rgba(245,241,231,.8); }
.ct-launch-drop-root { margin-top: 20px !important; padding: 18px; border: 1.5px dashed rgba(245,241,231,.4); border-radius: 16px; text-align: center; font-size: 14px; }
.ct-launch-status { min-height: 20px; margin-top: 16px !important; font-size: 13px; color: var(--ct-gold); }

.ct-app { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 4px 2px; border-radius: 16px; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.ct-app-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 17px; background: #1f4a7a; color: #fff; transition: transform 140ms ease; }
.ct-app-art > svg { width: 30px; height: 30px; stroke-width: 1.7; }
.ct-app[data-hue="0"] .ct-app-art { background: #1f4a7a; }
.ct-app[data-hue="1"] .ct-app-art { background: #1d6b73; }
.ct-app[data-hue="2"] .ct-app-art { background: #9a6d27; }
.ct-app[data-hue="3"] .ct-app-art { background: #8a3a4a; }
.ct-app[data-hue="4"] .ct-app-art { background: #5d6a2e; }
.ct-app[data-hue="5"] .ct-app-art { background: #4c5a73; }
.ct-app[data-hue="f"] .ct-app-art { background: rgba(245,241,231,.16); border: 1px solid rgba(245,241,231,.28); }
.ct-app-home .ct-app-art { background: var(--ct-gold); color: var(--ct-navy); }
.ct-app:hover .ct-app-art { transform: translateY(-2px); }
.ct-app:active .ct-app-art { transform: scale(.94); }
.ct-app:focus-visible { outline: 2px solid var(--ct-gold); outline-offset: 2px; }
.ct-app-label { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font-size: 13px; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.ct-app-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #c8323d; color: #fff; font: 600 12px/20px inherit; text-align: center; }
.ct-folder-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 46px; height: 46px; }
.ct-folder-mini span { display: grid; place-items: center; border-radius: 6px; background: rgba(245,241,231,.22); }
.ct-folder-mini svg { width: 15px; height: 15px; }
.ct-app.is-selected .ct-app-art { box-shadow: 0 0 0 3px var(--ct-gold); }
.ct-app.is-dragging { opacity: .28; }
.ct-drop-over { outline: 2px solid var(--ct-gold); outline-offset: 2px; border-radius: 16px; }
.ct-drop-over.ct-launch-grid { outline-style: dashed; }
.ct-drag-ghost { position: fixed; z-index: 10000; pointer-events: none; width: 92px; transform: translate(-50%, -50%) scale(1.1); opacity: .94; }
#ct-launcher.is-editing .ct-app { touch-action: none; }
#ct-launcher.is-editing .ct-launch-grid .ct-app:not(.is-selected) .ct-app-art { animation: ct-wiggle 260ms ease-in-out infinite alternate; }
@keyframes ct-wiggle { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }

.ct-launch-dock {
  position: fixed; z-index: 46; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: flex-start; justify-content: center; gap: 4px; max-width: calc(100vw - 20px);
  padding: 10px 12px 8px; border-radius: 28px;
  background: rgba(6,23,51,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(214,168,90,.35); box-shadow: 0 10px 30px rgba(6,23,51,.35);
}
.ct-launch-dock .ct-app { width: 70px; }
.ct-launch-dock .ct-app-art { width: 52px; height: 52px; border-radius: 15px; }
.ct-launch-dock .ct-app-art > svg { width: 26px; height: 26px; }
.ct-launch-dock .ct-app-label { font-size: 12px; -webkit-line-clamp: 2; min-height: 29px; }
.ct-launch-dock .ct-app.is-active .ct-app-label { color: var(--ct-gold); }
.ct-launch-dock.ct-drop-over { outline-offset: 3px; border-radius: 28px; }
.ct-dock-space { align-self: center; width: 66px; padding: 6px 4px; text-align: center; font-size: 12px; line-height: 1.2; color: rgba(245,241,231,.7); border: 1.5px dashed rgba(245,241,231,.35); border-radius: 14px; }

@media (min-width: 900px) {
  .ct-launch-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 30px 12px; }
  .ct-app-art { width: 76px; height: 76px; border-radius: 20px; }
  .ct-app-art > svg { width: 34px; height: 34px; }
  .ct-folder-mini { width: 54px; height: 54px; }
}
@media (max-width: 819px) { #ct-launcher .ct-launch-panel { padding-top: 64px; } }
@media (max-width: 520px) {
  .ct-launch-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 4px; }
  .ct-app-art { width: 60px; height: 60px; }
  .ct-launch-heading { flex-direction: column; gap: 10px; }
  .ct-launch-actions { justify-content: flex-start; }
  .ct-launch-heading h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #ct-launcher .ct-launch-panel, .ct-app-art { animation: none !important; transition: none !important; }
  #ct-launcher.is-editing .ct-launch-grid .ct-app .ct-app-art { animation: none !important; }
}

/* Mijn items: the person's own shortcuts, first on the home screen */
.ct-fav { margin: 6px auto 8px; padding: 14px 14px 10px; border-radius: 22px; background: rgba(245,241,231,.08); border: 1px solid rgba(214,168,90,.35); }
.ct-fav h2, .ct-all-h { margin: 0 0 12px; font: 600 14px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-gold); }
.ct-all-h { margin: 22px auto 6px; }
.ct-fav-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 8px; }
.ct-fav-empty { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: rgba(245,241,231,.8); }
.ct-fav.ct-drop-over { outline: 2px dashed var(--ct-gold); outline-offset: 2px; }
.ct-app.is-fav .ct-app-art::after { content: "\2605"; position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 10px; background: var(--ct-gold); color: var(--ct-navy); font-size: 12px; line-height: 20px; text-align: center; }
.ct-arrange-tools button[aria-pressed="true"] { background: var(--ct-gold); border-color: var(--ct-gold); color: var(--ct-navy); font-weight: 600; }
@media (min-width: 900px) { .ct-fav-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
@media (max-width: 520px) { .ct-fav-row { grid-template-columns: repeat(4, 1fr); gap: 16px 4px; } .ct-fav { padding: 12px 8px 8px; } }

/* App group popup: a small card next to the group you tapped. The home screen
   (My items, groups, bottom bar) stays visible around it. Dragging an app out of
   the card fades it away so My items, the bottom bar and the other groups can
   take the drop. Position and size are set inline from the tapped group. */
.ct-folder-backdrop, .ct-menu-backdrop { position: fixed; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(2, 8, 20, .4); cursor: default; transition: opacity 140ms ease; }
.ct-folder-backdrop { z-index: 46; }
.ct-folder-popup {
  position: fixed; z-index: 47; display: flex; flex-direction: column; padding: 10px 10px 6px; border-radius: 22px;
  background: rgba(13, 42, 82, .97); color: var(--ct-ink); border: 1px solid rgba(214, 168, 90, .55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45); font-family: var(--font-body, system-ui, sans-serif);
  transition: opacity 140ms ease;
}
.ct-folder-popup:focus, .ct-menu:focus { outline: none; }
.ct-folder-popup.ct-enter { animation: ct-folder-in 180ms cubic-bezier(.16, 1, .3, 1); }
@keyframes ct-folder-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.ct-folder-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; }
.ct-folder-header h2 { margin: 0; min-width: 0; font: 600 21px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.ct-folder-header .ct-launch-actions { flex: none; flex-wrap: nowrap; gap: 6px; }
.ct-folder-header .ct-launch-actions button { min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.ct-folder-popup .ct-launch-help { margin: 2px 2px 8px; font-size: 12px; line-height: 1.35; }
.ct-folder-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 4px; }
.ct-folder-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 2px; padding: 4px 0 4px; }
.ct-folder-popup .ct-app { padding: 2px 0; gap: 5px; }
.ct-folder-popup .ct-app-art { width: 50px; height: 50px; border-radius: 14px; }
.ct-folder-popup .ct-app-art > svg { width: 24px; height: 24px; }
.ct-folder-popup .ct-app-label { font-size: 11.5px; line-height: 1.15; }
.ct-folder-popup .ct-folder-name-label { margin: 0 0 8px; }
.ct-folder-popup .ct-arrange-tools { margin: 0 0 10px !important; padding: 8px; }
.ct-folder-popup .ct-arrange-tools button, .ct-folder-popup .ct-arrange-tools select { min-height: 40px; padding: 0 10px; font-size: 13px; }
.ct-folder-popup .ct-launch-status { margin: 4px 2px 0 !important; min-height: 16px; font-size: 12px; }
.ct-group-ungroup { min-height: 40px; margin-top: 6px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(245, 241, 231, .28); background: transparent; color: var(--ct-ink); font: 500 13px/1 inherit; cursor: pointer; }
.ct-group-ungroup:hover { background: rgba(245, 241, 231, .1); }
#ct-launcher.is-folder-drag-out .ct-folder-backdrop, #ct-launcher.is-folder-drag-out .ct-folder-popup { opacity: 0; pointer-events: none; }
#ct-launcher.has-folder .ct-launch-dock { z-index: 48; }
@media (prefers-reduced-motion: reduce) { .ct-folder-popup.ct-enter, .ct-folder-backdrop, .ct-folder-popup { animation: none !important; transition: none !important; } }

/* Press and hold (or right-click) an app: a small menu, no dragging needed */
.ct-menu-backdrop { z-index: 49; }
.ct-menu {
  position: fixed; z-index: 50; left: 50%; bottom: max(168px, calc(env(safe-area-inset-bottom) + 156px)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 240px); overflow-y: auto;
  padding: 14px; border-radius: 22px; background: rgba(13, 42, 82, .98); color: var(--ct-ink);
  border: 1px solid rgba(214, 168, 90, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); font-family: var(--font-body, system-ui, sans-serif);
  animation: ct-menu-in 160ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes ct-menu-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
.ct-menu h2 { margin: 0 0 2px; font: 600 20px/1.15 'Barlow Condensed', sans-serif; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.ct-menu button, .ct-menu select { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(245, 241, 231, .28); background: transparent; color: var(--ct-ink); font: 500 15px/1 inherit; text-align: left; cursor: pointer; }
.ct-menu button:hover { background: rgba(245, 241, 231, .1); }
.ct-menu button:focus-visible, .ct-menu select:focus-visible { outline: 2px solid var(--ct-gold); outline-offset: 2px; }
.ct-menu [data-act="m-open"] { background: var(--ct-gold); border-color: var(--ct-gold); color: var(--ct-navy); font-weight: 600; }
.ct-menu-move { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(245, 241, 231, .85); }
.ct-menu-move select { background: var(--ct-navy-2); width: 100%; }
.ct-menu .ct-menu-close { text-align: center; border-color: transparent; color: rgba(245, 241, 231, .8); }
.ct-menu .ct-launch-status { margin: 0 !important; font-size: 12px; }
.ct-menu .ct-launch-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .ct-menu { animation: none !important; } }