/* Top bar. OWNER: topbar/sync worker. The bar is a row of fixed-width slots created by the shell (app.ts):
   brand, periods, global, sync, review, add, menu. A slot's width never depends on its content: the only flexible
   slot is sync, whose width depends on the viewport alone (its text is left-anchored and ellipsized).
   Layouts: >= 1280px one 64px row; 761-1279px two rows (104px); <= 760px two compact rows (100px). */

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.bar-in {
  height: var(--bar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--pad);
  max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto;
  contain: layout;
}
.mark {
  flex: none; width: 112px;
  text-decoration: none;
  font-weight: 800; font-stretch: 62%;
  font-size: 26px; letter-spacing: -.01em; line-height: 1;
  display: inline-flex; align-items: flex-end;
}
.mark i { width: 7px; height: 7px; background: var(--red); display: inline-block; margin-left: 2px; margin-bottom: 3px; }

.slot-brand { width: 112px; }
.slot-global { width: 268px; display: flex; gap: 12px; align-items: center; }
.slot-sync { flex: 1 1 0; min-width: 0; position: relative; display: flex; justify-content: flex-end; }
.slot-review { width: 76px; }
.slot-add { width: 96px; }
.slot-menu { width: 36px; position: relative; }

/* ---------- global: Cycle/Month + currency (segmented radiogroups) ---------- */
.slot-global .seg { height: 32px; align-items: center; gap: 0; padding: 2px; border: 1px solid var(--hair); border-radius: 16px; flex: none; }
.slot-global .chip { height: 26px; padding: 0 10px; border: 0; border-radius: 13px; }
.slot-global .chip:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.slot-global .chip[aria-checked="true"] { background: var(--ink); color: var(--paper); }

/* ---------- sync (mailbox) ---------- */
.sync { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); white-space: nowrap; }
.sync-info { flex: 1 1 0; min-width: 0; height: 32px; display: flex; align-items: center; gap: 8px; text-align: left; color: inherit; }
.sync-info:hover .sync-text { color: var(--ink); }
.sync-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); transition: background .3s; }
.sync-text { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 16px; transition: color .3s; }
.sync-long, .sync-short { display: block; overflow: hidden; text-overflow: ellipsis; }
.sync-short { display: none; }
.sync[data-state="busy"] .sync-dot { background: var(--red); animation: pulse 0.9s ease-in-out infinite; }
.sync[data-state="error"] .sync-dot { background: var(--red); }
.sync[data-state="error"] .sync-text { color: var(--red-t); }
.sync[data-state="off"] .sync-dot, .sync[data-state="pending"] .sync-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--grey); }
.sync.flash .sync-text { color: var(--ink); }
.sync.flash .sync-dot { background: var(--red); }
@keyframes pulse { 50% { transform: scale(1.9); opacity: .4; } }
.sync-scan { flex: none; width: 10ch; text-align: left; white-space: nowrap; }

.sync-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 35;
  width: 340px; max-width: calc(100vw - 24px); padding: 14px 16px 16px;
  background: var(--paper); border: 1px solid var(--ink);
  font: 400 var(--t-xs)/1.55 var(--f-mono); color: var(--ink); white-space: normal;
  animation: popIn .35s var(--expo);
}
.sync-pop[hidden] { display: none; }
.sync-pop p { margin: 0; }
.sync-pop .eyebrow { margin-bottom: 6px; }
.sync-pop-error { margin-top: 8px !important; color: var(--red-t); }
@keyframes popIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- buttons (.btn-line / .btn-text are shared: pulse.css) ---------- */
.review-link { flex: none; width: 76px; height: 32px; text-decoration: none; font: 500 var(--t-xs) var(--f-mono); display: inline-flex; align-items: center; gap: 6px; }
.review-link b { flex: none; width: 30px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 11px; padding: 0; transition: transform .4s var(--expo); }
.review-link b.zero { background: transparent; color: var(--grey-t); box-shadow: inset 0 0 0 1px var(--hair); }
.review-link b.bump { animation: bump .5s var(--expo); }
@keyframes bump { 30% { transform: scale(1.35); } }

.btn-add {
  flex: none; width: 96px; justify-content: center;
  height: 36px; padding: 0 12px;
  background: var(--ink); color: var(--paper);
  font: 600 var(--t-sm) var(--f-display); font-stretch: 100%;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 18px;
  transition: background .25s, transform .2s var(--ease);
}
.btn-add:hover { background: #2a2a2a; }
.btn-add:active { transform: scale(.97); }
.btn-add .add-plus { font-size: 18px; line-height: 1; margin-top: -2px; }
.btn-add kbd { border-color: rgba(243,242,238,.5); margin-left: 0; }

/* ---------- ⋯ menu ---------- */
.menu-btn { width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; font: 600 18px/1 var(--f-display); transition: background .2s; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 35;
  width: 248px; padding: 6px 0; background: var(--paper); border: 1px solid var(--ink);
  display: grid; animation: popIn .35s var(--expo);
}
.menu-list[hidden] { display: none; }
.menu-item { height: 38px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font: 500 var(--t-sm) var(--f-display); }
.menu-item small { font: 400 11px var(--f-mono); color: var(--grey-t); }
.menu-item:hover, .menu-item:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.menu-item:hover small, .menu-item:focus-visible small { color: var(--mute); }
.menu-item[disabled] { color: var(--grey-t); cursor: default; background: none; }
.menu-item[data-action="lock"] { color: var(--red-t); }
.menu-item[data-action="lock"]:hover, .menu-item[data-action="lock"]:focus-visible { background: var(--red-t); color: var(--paper); }
.menu-sep { border: 0; border-top: 1px solid var(--hair); margin: 6px 0; }

/* ---------- dialogs opened from the menu (content of #modal) ---------- */
/* Top-anchored: these dialogs load their content after opening; a centred dialog would move as it grows. */
#modal-content .source-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font: 400 var(--t-sm) var(--f-display); }
#modal-content .source-info span { display: grid; gap: 2px; }
#modal-content .source-info small, #modal-content .source-info b { font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); }
#modal-content .bank { font: 500 var(--t-xs) var(--f-mono); display: inline !important; }
#modal-content .bank-bca { color: var(--bca); }
#modal-content .bank-jenius { color: var(--jenius); }
#modal-content .bank-manual { color: var(--manual); }
#modal-content .passkey-list { margin-top: 14px; }
#modal-content #passkey-add { margin-top: 6px; }
#modal-content #passkey-add[disabled] { opacity: .45; cursor: not-allowed; }
#modal-content #source-list { margin-top: 14px; font: 400 var(--t-xs)/1.55 var(--f-mono); }
#modal-content #source-list > p { margin: 0 0 10px; }
#modal-content .source-review { border-top: 1px solid var(--hair); padding: 8px 0; }
#modal-content .source-review summary { cursor: pointer; font: 500 var(--t-xs) var(--f-mono); color: var(--ink); }
#modal-content .source-review p { margin: 6px 0 0; color: var(--grey-t); overflow-wrap: anywhere; }
#modal-content #reset-payday { margin: 0 0 4px; }
#modal-content .fixed-list { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#modal-content label.check { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0; border-bottom: 1px solid var(--hair); font: 400 var(--t-sm) var(--f-display); color: var(--ink); cursor: pointer; }
#modal-content label.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
#modal-content form[aria-busy="true"] { cursor: progress; }

.progress { height: 1px; background: var(--hair); }
.progress span { display: block; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* flying dot for mailbox imports (fixed, transform/opacity only) */
.fly { position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--red); border-radius: 50%; z-index: 60; pointer-events: none; }

/* ---------- responsive ---------- */
@media (min-width: 1280px) and (max-width: 1399px) {
  .sync-long { display: none; }
  .sync-short { display: block; }
}
/* two rows: brand · sync · review · add · menu / periods · global */
@media (max-width: 1279px) {
  :root { --bar-h: 104px; }
  .bar-in { flex-wrap: wrap; align-content: flex-start; row-gap: 0; }
  .bar-in::after { content: ''; order: 10; flex: 0 0 100%; height: 0; }
  .bar-in > .slot { height: 52px; display: flex; align-items: center; }
  .slot-brand { order: 1; } .slot-sync { order: 2; } .slot-review { order: 3; } .slot-add { order: 4; } .slot-menu { order: 5; }
  .bar-in > .slot-periods { order: 11; }
  .slot-global { order: 12; margin-left: auto; }
}
@media (max-width: 760px) {
  :root { --bar-h: 100px; }
  .bar-in { column-gap: 8px; }
  .bar-in > .slot { height: 52px; }
  .bar-in > .slot-brand, .bar-in > .slot-sync, .bar-in > .slot-review, .bar-in > .slot-add, .bar-in > .slot-menu { height: 48px; }
  .slot-brand { width: 84px; }
  .mark { font-size: 24px; width: 84px; }
  .slot-sync { position: static; }
  .sync { gap: 6px; font-size: 11px; }
  .sync-info { gap: 6px; }
  .sync-long { display: none; }
  .sync-short { display: block; }
  .sync-scan { width: 9.5ch; font-size: 11px; }
  .sync-pop { left: var(--pad); right: var(--pad); top: 46px; width: auto; max-width: none; }
  .slot-review { width: 30px; }
  .review-link { width: 30px; }
  .review-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .slot-add { width: 36px; }
  .btn-add { width: 36px; height: 36px; padding: 0; gap: 0; }
  .btn-add .add-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn-add kbd { display: none; }
  .slot-menu { width: 32px; position: static; }
  .menu-btn { width: 32px; height: 32px; }
  .menu-list { right: var(--pad); top: 46px; }
  /* row 2: periods (flexible) + compact global toggles stacked in a 52px row */
  .bar-in > .slot-periods { flex: 1 1 0; width: auto; min-width: 0; display: flex; }
  .slot-global { width: 104px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; margin-left: 0; }
  .slot-global .chips { overflow: visible; margin: 0; padding: 1px; scrollbar-width: auto; height: 24px; align-items: center; flex: none; }
  .slot-global .seg { border-radius: 12px; }
  .slot-global .chip { height: 20px; padding: 0 6px; font-size: 11px; border-radius: 10px; }
}