/* kupol.live — «режим застосунку» на телефоні (≤640px), за прототипом ios.html.
   Ті самі сторінки й розмітка, що й на десктопі; тут лише нативні iOS-патерни:
   навбар з розмиттям, великі заголовки, сегменти, картки з шевроном, таб-бар, переходи. */

.m-nb, .tabbar { display: none; }

@media (max-width: 640px) {
  :root { --accent: #c8461f; --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body { background: var(--shell); }
  .shell { border: 0; border-radius: 0; min-height: 100dvh; padding-inline: 16px;
           padding-bottom: calc(var(--tabbar-h) + 32px); }
  .top { display: none; }
  #main { scroll-margin-top: 64px; }

  /* ── навбар ─────────────────────────────────────────────── */
  .m-nb { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
          min-height: 44px; margin-inline: -16px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px 6px;
          background: color-mix(in srgb, var(--shell) 82%, transparent);
          backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
          view-transition-name: navbar; }
  .m-logo { display: flex; align-items: flex-end; gap: 6px; text-decoration: none; }
  .m-logo .m-mark { display: block; width: 29px; height: auto; flex: none; margin-bottom: 1px; color: var(--fg); }
  .m-logo .w { font-size: 18px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
  .m-logo .w span { font-weight: 400; color: var(--muted); }
  .m-back { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; text-decoration: none; padding: 8px 4px 8px 0; color: var(--accent); }
  .m-back svg { width: 22px; height: 22px; stroke: currentColor; }
  .icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tint); display: grid; place-items: center; cursor: pointer; color: var(--fg); }
  .icon-btn svg { width: 19px; height: 19px; stroke: currentColor; }
  .icon-btn.done { background: var(--good-soft); color: var(--good); }

  /* ── таб-бар ────────────────────────────────────────────── */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
            height: var(--tabbar-h); padding: 7px 6px env(safe-area-inset-bottom, 0px);
            background: color-mix(in srgb, var(--shell) 82%, transparent);
            backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
            border-top: 1px solid var(--line); view-transition-name: tabbar; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500;
         color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tab svg { width: 25px; height: 25px; stroke: currentColor; }
  body[data-tab="today"] .tab[data-tab="today"],
  body[data-tab="week"] .tab[data-tab="week"],
  body[data-tab="events"] .tab[data-tab="events"],
  body[data-tab="rada"] .tab[data-tab="rada"],
  body[data-tab="podcast"] .tab[data-tab="podcast"] { color: var(--accent); }

  footer { margin-top: 40px; font-size: 12.5px; flex-direction: column; gap: 4px; }

  /* ── великі заголовки ───────────────────────────────────── */
  .intro { padding-block: 6px 16px; }
  .intro .date { font-size: 14px; margin: 0 0 4px; }
  .intro h1 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 8px; }
  .intro p { font-size: 15px; line-height: 1.5; }
  .sect { padding-top: 36px; }
  .sect > h2 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin: 0 4px 12px; }

  /* ── сегменти (UISegmentedControl) ──────────────────────── */
  .seg, .seg.compact { display: grid; width: 100%; background: var(--tint); border: 0; border-radius: 12px; padding: 3px; gap: 2px; }
  .seg button, .seg.compact button { flex-direction: column; gap: 1px; border: 0; border-radius: 9px; padding: 7px 2px;
                                     font-size: 13.5px; font-weight: 500; line-height: 1.2; }
  .seg button small, .seg button small.short { font-size: 11px; font-weight: 400; }
  .seg button[aria-selected="true"] { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

  /* ── картки подій з шевроном ────────────────────────────── */
  .events { gap: 10px; margin-top: 14px; }
  .event { grid-template-columns: 44px minmax(0, 1fr) 10px; gap: 12px; align-items: start; padding: 14px; border-radius: 20px;
           transition: transform .12s; -webkit-tap-highlight-color: transparent; }
  .event:active { transform: scale(.985); }
  .event::after { content: ""; width: 8px; height: 8px; margin-top: 18px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
                  transform: rotate(45deg); opacity: .6; }
  .event canvas { width: 44px; height: 44px; }
  .event .go { display: none; }
  .event .t { font-size: 12.5px; margin: 0 0 2px; }
  .event h2, .event h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 4px; }
  .event p:not(.t) { font-size: 14px; line-height: 1.4; margin: 0 0 10px;
                     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ── «Тиждень за 60 секунд» ─────────────────────────────── */
  .digest { border-radius: 20px; }
  .dtxt { padding: 18px 16px 20px; }
  .dtxt h3 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 12px; }
  .dtxt > p:not(.dmeta) { font-size: 15.5px; line-height: 1.55; }

  /* ── усі події ──────────────────────────────────────────── */
  .ev-stats { gap: 0; margin-bottom: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .ev-stats div { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 12px 14px; }
  .ev-stats div:first-child { border-left: 0; }
  .ev-stats b { font-size: 24px; font-weight: 500; }
  .ev-stats span { font-size: 12.5px; white-space: nowrap; }
  .ev-group { padding-top: 28px; }
  .ev-group-h { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin: 0 4px; }
  .ev-day { padding-top: 18px; }
  .ev-date { margin: 0 4px; }
  .ev-date b { font-size: 30px; font-weight: 500; }
  .ev-date span { font-size: 15px; }
  .ev-date small { font-size: 12.5px; }
  .ev-date em { font-size: 12px; padding: 5px 9px; }
  .ev-day .events { margin-top: 10px; }

  /* ── сторінка події ─────────────────────────────────────── */
  .article { padding-block: 4px 0; }
  .article .back { display: none; }
  .article .meta { flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; margin: 0 4px 8px; }
  .article .meta canvas { width: 64px; height: 64px; margin: 6px 0 14px; }
  .article h1 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.18; margin: 0 4px 12px; }
  .article .lede { font-size: 16px; line-height: 1.5; margin: 0 4px 16px; }
  .article > .row { margin: 0 4px; }
  .article h2 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin: 28px 4px 12px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .tile { border-radius: 16px; padding: 12px; }
  .tile .k { font-size: 11.5px; margin-bottom: 8px; }
  .tile .v { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
  .tile .s { display: none; }
  .tile .lvl.word { flex-direction: column; align-items: flex-start; gap: 7px; }
  .tile .lvl .dots i { width: 7px; height: 7px; }
  .box { border-radius: 18px; padding: 16px; }
  .short { gap: 10px; font-size: 15px; line-height: 1.45; }
  .short li { padding-left: 18px; }
  .short li::before { width: 7px; height: 7px; top: .58em; }
  .foryou-head { flex-direction: column; align-items: stretch; gap: 12px; margin: 28px 0 12px; }
  .foryou-head h2 { margin: 0 4px; }
  .aud-text p { font-size: 15.5px; line-height: 1.6; margin: 0 4px 12px; }
  .points { gap: 8px; }
  .point { border-radius: 18px; padding: 14px 16px; }
  .point h4 { font-size: 16px; font-weight: 600; }
  .point p { font-size: 14.5px; line-height: 1.45; }
  .post { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }


  details.more { border-radius: 18px; margin-top: 28px; }
  details.more summary { padding: 16px; font-size: 15.5px; }
  details.more .in { padding: 0 16px 16px; }
  .note { font-size: 13px; border-radius: 16px; margin-top: 28px; }
  .empty { border-radius: 18px; padding: 16px; }
}

/* ── «Встановіть kupol» — підказка встановити PWA (тільки телефон, не в standalone) ── */
.install { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 0px) + 12px);
           background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 22px; padding: 16px;
           box-shadow: 0 12px 40px rgba(0, 0, 0, .18); transform: translateY(24px); opacity: 0;
           transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; view-transition-name: install; }
.install.show { transform: none; opacity: 1; }
.install-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%;
             background: var(--tint); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.install-x svg { width: 15px; height: 15px; }
.install-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 30px; }
.install-head img { border-radius: 12px; border: 1px solid var(--line); }
.install-head b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.install-head span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.install-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.install-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.install-steps li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; line-height: 1.3;
                    background: var(--tint); border-radius: 12px; padding: 10px 12px; }
.install-steps .n { width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: var(--ink-fg);
                    display: grid; place-items: center; font-size: 11.5px; font-weight: 600; margin-right: 4px; flex: none; }
.install-steps svg { width: 19px; height: 19px; color: #0a84ff; flex: none; }
.install-steps b { font-weight: 600; }
.install-btn { display: block; width: 100%; margin-top: 14px; border: 0; border-radius: 999px; padding: 13px; font: inherit;
               font-size: 15.5px; font-weight: 500; cursor: pointer; background: var(--ink); color: var(--ink-fg); }
.install-btn.ghost { background: var(--tint); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .install { transition: none; } }
@media (min-width: 641px) { .install { left: auto; right: 24px; bottom: 24px; width: 380px; } }

/* Футер: увімкнути/вимкнути сповіщення про нові розбори */
.push-toggle { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline;
               text-underline-offset: 3px; cursor: pointer; text-align: left; }
.push-toggle:disabled { text-decoration: none; cursor: default; }

/* ── переходи між сторінками, як push/pop в iOS ───────────── */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .3s cubic-bezier(.2, .8, .2, 1) both kp-out; }
  ::view-transition-new(root) { animation: .32s cubic-bezier(.2, .8, .2, 1) both kp-in; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: kp-back-out; z-index: 2; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: kp-back-in; }
  ::view-transition-group(tabbar), ::view-transition-group(navbar) { animation: none; z-index: 5; }
  @keyframes kp-in       { from { transform: translateX(100%); } }
  @keyframes kp-out      { to   { transform: translateX(-24%); opacity: .6; } }
  @keyframes kp-back-in  { from { transform: translateX(-24%); opacity: .6; } }
  @keyframes kp-back-out { to   { transform: translateX(100%); } }
}

/* ── «Цитата картинкою» (static/quote.js): кнопка після виділення тексту + лист із прев'ю ── */
.quote-pill { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--tabbar-h, 0px) + 16px);
              display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
              background: var(--ink); color: var(--ink-fg); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
              box-shadow: 0 10px 30px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent;
              transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.quote-pill.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.quote-pill svg { width: 17px; height: 17px; color: var(--accent, #c8461f); }
.quote-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
               background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.quote-sheet.show { opacity: 1; }
.quote-card { width: 100%; max-width: 480px; max-height: 100dvh; overflow: auto; background: var(--card); color: var(--fg);
              border-radius: 24px 24px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
              transform: translateY(40px); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.quote-sheet.show .quote-card { transform: none; }
.quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.quote-head b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.quote-theme { width: auto !important; flex: none; }
.quote-theme button { padding: 7px 14px !important; font-size: 14px !important; }
.quote-preview img { display: block; width: 100%; max-height: 58dvh; aspect-ratio: 4 / 5; object-fit: contain;
                     border-radius: 14px; border: 1px solid var(--line); background: var(--tint); }
.quote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-actions .install-btn:disabled { opacity: .5; cursor: progress; }
@media (min-width: 641px) { .quote-sheet { align-items: center; } .quote-card { border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .quote-pill, .quote-sheet, .quote-card { transition: none; } }

/* ── Перехід довше 300 мс: тонка смужка вгорі (static/app.js) ── */
.nav-progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 2.5px; overflow: hidden;
                pointer-events: none; opacity: 0; transition: opacity .15s; view-transition-name: nav-progress; }
.nav-progress::before { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 0 2px 2px 0;
                        background: var(--accent, #c8461f); animation: kp-progress 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.nav-progress.on { opacity: 1; }
@keyframes kp-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .nav-progress::before { animation: none; width: 100%; opacity: .7; } }

/* ── «Підписатися на календар» (templates/events/_calendar.html) ── */
.cal-sub { position: relative; display: inline-block; margin: 0 0 16px; }
.cal-sub summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; user-select: none;
                   padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
                   color: var(--fg); font-size: 15px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
.cal-sub summary::-webkit-details-marker { display: none; }
.cal-sub summary svg { width: 18px; height: 18px; fill: none; stroke: var(--accent, #c8461f); stroke-width: 1.8; stroke-linecap: round; }
.cal-sub[open] summary { border-color: var(--accent, #c8461f); }
.cal-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px));
            padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card);
            box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.cal-menu p { margin: 4px 8px 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.cal-menu a, .cal-menu button { display: block; width: 100%; text-align: left; padding: 11px 10px; border: 0; border-radius: 10px;
                                background: none; color: var(--fg); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
.cal-menu a:hover, .cal-menu button:hover, .cal-menu a:focus-visible, .cal-menu button:focus-visible { background: var(--tint); }
.cm-sect-h .cal-sub { margin: 0; }
.cm-sect-h .cal-menu { left: auto; right: 0; }
.cm-sect-h:has(.cal-sub) { align-items: center; }

/* ── Місячний календар на /events/ (templates/events/_month_cal.html) ──
   Desktop: a sticky column beside the list. Phone: a light block between the stats and the filter. */
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.ev-side { grid-column: 2; grid-row: 1; position: sticky; top: 96px; padding-top: 4px; }  /* below the sticky site header */
.ev-main { grid-column: 1; grid-row: 1; min-width: 0; }
.mcal { padding: 16px 14px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.mcal-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin: 0 0 10px; }
.mcal-head h2 { margin: 0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.mcal-head h2 small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.mcal-nav { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; }
.mcal-nav:hover:not([disabled]) { background: var(--tint); }
.mcal-nav[disabled] { opacity: .2; cursor: default; }
.mcal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; justify-items: center; }
.mcal-dow { font-size: 11.5px; color: var(--muted); padding: 0 0 6px; }
.mcal-d { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
          font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: none; }
.mcal-d b { font-weight: 400; line-height: 1; }
.mcal-d.has { color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mcal-d.has b { font-weight: 600; }
.mcal-d.has:hover, .mcal-d.has:focus-visible { background: var(--tint); outline: none; }
.mcal-d i { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.mcal-d u { width: 4px; height: 4px; border-radius: 50%; background: var(--accent, #c8461f); }
.mcal-d.has.past u { opacity: .45; }
.mcal-d.today { background: var(--ink); color: var(--ink-fg); }
.mcal-d.today:hover { background: var(--ink); }
.mcal-d.today u { background: var(--ink-fg); }
.mcal .cal-sub { display: block; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mcal .cal-sub summary { display: flex; justify-content: center; border: 0; background: var(--tint); padding: 10px 14px; font-size: 14.5px; }
.mcal .cal-menu { left: 0; right: 0; width: auto; }
.ev-day { scroll-margin-top: 90px; }
.ev-day.flash .ev-date { animation: mcal-flash 1.4s ease-out; border-radius: 12px; }
@keyframes mcal-flash { from { background: var(--tint); box-shadow: 0 0 0 6px var(--tint); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 900px) {
  .ev-layout { display: block; }
  .ev-side { position: static; padding: 0; margin: 0 0 16px; }
  .mcal { max-width: 420px; }
}
@media (max-width: 640px) {
  .mcal { max-width: none; padding: 12px 10px 10px; border-radius: 20px; }
  .mcal-head { margin-bottom: 6px; }
  .mcal-grid { row-gap: 0; }
  .mcal-d { width: 38px; height: 38px; font-size: 15px; }
  .mcal .cal-sub { margin-top: 8px; padding-top: 8px; }
  .ev-day { scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .ev-day.flash .ev-date { animation: none; } }