/* ============================================================
   ABIDE - Desktop Experience
   True desktop layout: branded sidebar + content column.
   Mobile layout (< 1024px) is 100% untouched.
   ============================================================ */

/* ============================================================
   DESKTOP SHELL — ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --header-height: 60px;
    --desktop-sidebar-width: 220px;
  }

  /* Body: windowed card presentation with gradient bg */
  body {
    padding: 20px;
    overflow: auto; /* override app.css overflow:hidden */
    background: var(--bg-sunken);
    background-image: linear-gradient(150deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
  }

  /* #app: CSS Grid windowed card */
  #app {
    display: grid;
    grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) 1fr auto;
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "sidebar legal";
    width: min(1400px, calc(100vw - 40px));
    max-width: none;
    height: calc(100dvh - 40px);     /* bounded height so 1fr row is constrained */
    min-height: calc(100dvh - 40px);
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--divider-solid);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.08);
  }

  /* ── SIDEBAR ──────────────────────────────────────────── */
  #desktop-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--glass-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--divider-solid);
    padding: var(--space-5) var(--space-3) var(--space-4);
    overflow: hidden;
    position: relative;
  }

  /* Brand row */
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--divider-solid);
    margin-bottom: var(--space-4);
    flex-shrink: 0;
  }
  .sidebar-brand__icon {
    flex-shrink: 0;
    color: var(--accent);
  }
  .sidebar-brand__name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }

  /* Nav container */
  .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
    padding-bottom: var(--space-2);
  }

  /* ── TAB-ITEM overrides for sidebar context ─────────────
     These override the mobile flex-column centering.
     Uses the same .tab-item class so Router.updateTabBar()
     automatically applies .active — zero extra JS. */
  .tab-item {
    flex: 0 0 auto;
    height: 50px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    border-radius: 12px;
    width: 100%;
  }

  .tab-item:hover {
    background: var(--accent-soft);
  }

  .tab-item.active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* Left accent rail on active item */
  .tab-item.active::before {
    width: 3px;
    height: 24px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 999px;
    position: absolute;
  }

  .tab-label {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
  }

  /* ── SIDEBAR FOOTER ─────────────────────────────────── */
  .sidebar-footer {
    flex-shrink: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--divider-solid);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .sidebar-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
  }

  .sidebar-profile__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    overflow: hidden;
  }

  .sidebar-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .sidebar-profile__avatar--fallback {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
  }

  .sidebar-profile__meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .sidebar-profile__name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-profile__status {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-profile__status--synced {
    color: var(--accent);
  }

  .sidebar-profile__connect {
    color: var(--accent);
    text-decoration: underline;
  }

  .sidebar-legal {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  .sidebar-legal a {
    color: var(--text-secondary);
    text-decoration: underline;
  }

  /* ── BOTTOM TAB BAR: hidden on desktop ──────────────── */
  .tab-bar {
    display: none !important;
  }

  /* ── CONTENT COLUMN ─────────────────────────────────── */
  .status-bar-spacer {
    display: none !important;
  }

  .app-header {
    grid-area: header;
    height: var(--header-height);
    border-bottom: 1px solid var(--divider-solid);
    border-left: 1px solid var(--divider-solid);
  }

  .header-content {
    padding: 0 var(--space-6);
  }

  .header-title {
    font-size: var(--text-2xl);
  }

  /* ── AMBIENT BACKGROUND GRAPHICS ────────────────────────
     Orbs are absolutely positioned inside .view-container.
     overflow-x: clip trims orbs at the horizontal edge
     without creating a new scroll container on the y-axis,
     so scroll remains on the .view-container element itself. */
  .view-container {
    grid-area: main;
    border-left: 1px solid var(--divider-solid);
    padding-bottom: 0;
    scroll-padding-top: var(--space-4);
    position: relative;
    min-height: 0;          /* required for grid child to be bounded */
    overflow-y: auto;       /* scroll lives here, NOT on body */
    overflow-x: clip;       /* clip orbs horizontally only */
  }

  .view-content {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-10);
  }

  .view-container::before,
  .view-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    filter: blur(72px);
  }

  /* Top-right orb */
  .view-container::before {
    width: 380px;
    height: 380px;
    top: -60px;
    right: -60px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  }

  /* Bottom-left orb */
  .view-container::after {
    width: 320px;
    height: 320px;
    bottom: 80px;
    left: -40px;
    background: radial-gradient(circle, var(--accent-warm, var(--accent)) 0%, transparent 70%);
    opacity: 0.18;
  }

  /* Ensure view content renders above the orbs */
  .view-content {
    position: relative;
    z-index: 1;
  }

  .app-legal {
    grid-area: legal;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-8);
    border-top: 1px solid var(--divider-solid);
    border-left: 1px solid var(--divider-solid);
    margin-bottom: 0;
  }

  /* ── PER-VIEW LAYOUTS ───────────────────────────────── */

  /* Today page desktop layout — single column at 1024px (content is already narrow) */
  body[data-route="/"] .home-view {
    max-width: 660px;
    display: block;
  }

  body[data-route="/"] .home-view > * {
    margin-bottom: var(--space-4);
  }

  body[data-route="/"] .home-view .home-greeting__name {
    font-size: clamp(2rem, 2.8vw, 3rem);
  }

  body[data-route="/"] .home-view .home-devotion-text {
    display: block;          /* remove -webkit-box clamp entirely */
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: var(--text-lg);
  }

  body[data-route="/"] .home-view .setup-prompt,
  body[data-route="/"] .home-view .empty-state {
    max-width: 760px;
    margin: 0 auto;
  }

  /* ── HOME ACTION BUTTONS: desktop sizing ──────────────── */
  /* Give each action row a glass card surface — matches app's card language */
  body[data-route="/"] .home-view .home-actions,
  body[data-route="/"] .home-view .home-complete-row {
    background: var(--glass-fill);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2) !important;
    box-shadow: var(--shadow-sm);
  }

  /* Tighter buttons — no more giant iPhone pills */
  body[data-route="/"] .home-view .home-actions .btn,
  body[data-route="/"] .home-view .home-complete-row .btn,
  body[data-route="/"] .home-view .home-complete-row .btn-full {
    font-size: var(--text-sm);
    padding: 9px var(--space-4);
  }

  /* Mark as Done: centered, capped width */
  body[data-route="/"] .home-view .home-complete-row .complete-btn {
    font-size: var(--text-sm);
    padding: 9px var(--space-5);
    max-width: 210px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Action row: tighter gap */
  body[data-route="/"] .home-view .home-actions {
    margin-bottom: 0;
    gap: var(--space-2);
  }

  /* Plan page */
  body[data-route="/plan"] .view-content {
    max-width: 1180px;
  }

  body[data-route="/plan"] .plan-topics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  body[data-route="/plan"] .topic-chip {
    font-size: var(--text-base);
    padding: 14px 16px;
  }

  body[data-route="/plan"] .plan-dictation-row {
    gap: var(--space-3);
  }

  body[data-route="/plan"] .plan-topic-input {
    min-height: 52px;
  }

  /* Scripture page */
  body[data-route="/scripture"] .view-content {
    max-width: 1220px;
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  body[data-route="/scripture"] .scripture-search-bar {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  body[data-route="/scripture"] #quick-links {
    grid-column: 1;
    margin-top: 0;
    position: sticky;
    top: var(--space-6);
  }

  body[data-route="/scripture"] #passage-container {
    grid-column: 2;
    min-height: 320px;
  }

  /* Journal page */
  body[data-route="/journal"] .view-content {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    gap: var(--space-6);
    align-items: start;
  }

  body[data-route="/journal"] .journal-past {
    grid-column: 2;
    position: sticky;
    top: var(--space-6);
  }

  /* Settings page */
  body[data-route="/settings"] .view-content {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  body[data-route="/settings"] .settings-section {
    margin-bottom: 0;
  }

  body[data-route="/settings"] #settings-pastors-section,
  body[data-route="/settings"] #settings-appearance-section,
  body[data-route="/settings"] #settings-notifications-section {
    grid-column: 1 / -1;
  }

  body[data-route="/settings"] #save-settings,
  body[data-route="/settings"] #settings-save-hint,
  body[data-route="/settings"] .settings-version-footer {
    grid-column: 1 / -1;
  }

  body[data-route="/settings"] .settings-row__value {
    white-space: normal;
  }
}

/* ============================================================
   FULL-BLEED — ≥ 1280px
   Sidebar stays left; remove windowed card chrome.
   ============================================================ */
@media (min-width: 1280px) {
  body {
    padding: 0;
    background: var(--bg-base);
    background-image: linear-gradient(155deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
  }

  #app {
    width: 100%;
    height: 100dvh;       /* bounded so grid 1fr row constrains scroll container */
    min-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* Keep sidebar column; just go full-bleed */
    grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr);
  }

  .app-header   { border-left: none; }
  .view-container { border-left: none; }
  .app-legal    { border-left: none; justify-content: center; }

  .view-content {
    max-width: min(860px, calc(100vw - var(--desktop-sidebar-width) - 120px));
    padding: var(--space-8) var(--space-10) var(--space-12);
  }

  /* At 1280+ the orbs get bigger since there's more flanking space */
  .view-container::before {
    width: 480px;
    height: 480px;
    top: -80px;
    right: -80px;
    opacity: 0.22;
  }

  .view-container::after {
    width: 420px;
    height: 420px;
    bottom: 120px;
    left: -60px;
    opacity: 0.14;
  }

  /* Per-view wider grids at 1280px — restore two-column layout */
  body[data-route="/"] .home-view {
    display: grid;
    max-width: min(1100px, calc(100vw - var(--desktop-sidebar-width) - 80px));
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: var(--space-8);
    row-gap: var(--space-5);
    align-items: start;
  }

  body[data-route="/"] .home-view > * {
    grid-column: 1;
    margin-bottom: 0;
  }

  body[data-route="/"] .home-view .home-greeting,
  body[data-route="/"] .home-view .home-session-toggle,
  body[data-route="/"] .home-view .home-date-row,
  body[data-route="/"] .home-view .home-verse,
  body[data-route="/"] .home-view .home-devotion-excerpt,
  body[data-route="/"] .home-view .home-prayer,
  body[data-route="/"] .home-view .home-midday,
  body[data-route="/"] .home-view .home-actions,
  body[data-route="/"] .home-view .home-complete-row {
    grid-column: 1;
  }

  body[data-route="/"] .home-view .home-prompts,
  body[data-route="/"] .home-view .home-stretch {
    grid-column: 2;
    max-width: 410px;
  }

  body[data-route="/"] .home-view .home-date-row {
    justify-content: flex-start;
    gap: var(--space-4);
    margin-bottom: 0 !important;
  }

  body[data-route="/"] .home-view .home-session-toggle {
    margin-bottom: 0;
  }

  body[data-route="/"] .home-view .home-devotion-text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: 1.35rem;
    line-height: 1.6;
  }

  body[data-route="/"] .home-view .home-prompts {
    margin-top: 8px;
  }

  body[data-route="/"] .home-view .home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px; /* don't let action buttons span 900px */
  }

  body[data-route="/"] .home-view .home-complete-row {
    justify-content: flex-start;
    margin-top: var(--space-2) !important;
  }

  body[data-route="/"] .home-view .home-complete-row .btn,
  body[data-route="/"] .home-view .home-complete-row .btn-full {
    max-width: 420px;
    font-size: var(--text-sm);
    padding: 9px var(--space-4);
  }

  body[data-route="/"] .home-view .home-actions .btn {
    font-size: var(--text-sm);
    padding: 9px var(--space-4);
  }

  body[data-route="/"] .home-view .home-complete-row .complete-btn {
    font-size: var(--text-sm);
    padding: 9px var(--space-5);
    max-width: 210px;
  }

  body[data-route="/"] .home-view .scripture-card__text {
    font-size: 2.05rem;
    line-height: 1.45;
  }

  body[data-route="/plan"] .view-content,
  body[data-route="/settings"] .view-content,
  body[data-route="/scripture"] .view-content,
  body[data-route="/journal"] .view-content {
    max-width: min(960px, calc(100vw - var(--desktop-sidebar-width) - 120px));
  }
}

/* ============================================================
   MOBILE GUARD — sidebar never shows below 1024px
   ============================================================ */
@media (max-width: 1023px) {
  #desktop-sidebar {
    display: none !important;
  }
}