/* Standard module — Top bar (Project Rules, v0.6 batch).
   One shared copy for every report page; markup is built by topbar.js initTopbar().
   Tokens come from tokens.css — no local :root block. */

.topbar{position:sticky;top:0;z-index:40;height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:rgba(26,24,23,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.topbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-icon{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.tb-icon:hover{background:var(--ink-2);color:var(--text-1)}
.tb-icon:active{transform:scale(.94)}
.tb-icon:disabled{opacity:.28;cursor:default;background:transparent;transform:none}
.tb-back{border-color:var(--hairline-strong)}
.tb-title{min-width:0;margin-right:auto}
.tb-title b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title span{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tb-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-progress .bar{width:96px;height:5px;background:var(--ink-3);border-radius:99px;overflow:hidden}
.tb-progress .bar i{display:block;height:100%;background:var(--flame);border-radius:99px;transition:width .3s}
.tb-progress span{font-family:var(--font-mono);font-size:11px;color:var(--text-2);min-width:30px;text-align:right}
.sync{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--text-3);
  background:var(--ink-0);border:1px solid var(--hairline);border-radius:999px;padding:6px 11px;flex-shrink:0}
.sync .d{width:6px;height:6px;border-radius:99px;background:var(--pass)}
.sync.syncing{color:var(--warn)}
.sync.syncing .d{background:var(--warn);animation:tb-pulse 1s infinite}
@keyframes tb-pulse{50%{opacity:.25}}
.tb-sep{width:1px;height:24px;background:var(--hairline-strong);flex-shrink:0;margin:0 2px}
.tb-btn{height:40px;padding:0 15px;border-radius:10px;border:1px solid var(--hairline-strong);background:transparent;color:var(--text-1);
  font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.tb-btn:hover{background:var(--ink-2)}
.tb-btn:active{transform:scale(.97)}
.tb-btn:disabled{opacity:.4;cursor:default;transform:none}
.tb-btn svg{width:17px;height:17px}
.tb-btn.saved{color:var(--pass);border-color:var(--pass)}
.tb-primary{background:var(--flame);border-color:var(--flame);color:#fff}
.tb-primary:hover{background:var(--flame-hover)}
.tb-more{position:relative;flex-shrink:0}
.tb-menu{position:absolute;top:48px;right:0;background:var(--ink-2);border:1px solid var(--hairline-strong);border-radius:14px;
  padding:6px;min-width:200px;box-shadow:0 18px 44px rgba(0,0,0,.55);display:none;z-index:60}
.tb-menu.on{display:block}
.tb-menu button{display:flex;width:100%;align-items:center;gap:11px;background:none;border:none;color:var(--text-1);
  font-family:var(--font-ui);font-size:14px;font-weight:600;padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left}
.tb-menu button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-menu button:hover{background:var(--ink-3)}
.tb-menu button.danger{color:var(--fail)}
.tb-menu button.danger:hover{background:var(--fail-subtle)}
.tb-menu .mnsep{height:1px;background:var(--hairline);margin:5px 6px}
@media(max-width:760px){
  .topbar{height:50px;padding:0 8px;gap:6px}
  .tb-title b{font-size:12.5px;max-width:32vw}
  .tb-title span{display:none}
  .sync{display:none}
  .tb-sep{display:none}
  .tb-progress{display:none}
  .tb-icon{width:38px;height:38px}
  .tb-btn{height:38px;padding:0 12px;font-size:13px}
}
@media print{.topbar{display:none!important}}
/* iOS standalone: the status bar overlays the page (Android insets automatically).
   24px floor covers iPadOS, which misreports safe-area-inset-top as 0.
   Kept last in the file so it beats the max-width block's padding shorthand. */
@supports (-webkit-touch-callout: none){
  @media (display-mode: standalone){
    .topbar{height:calc(52px + max(env(safe-area-inset-top,0px),24px));
      padding-top:max(env(safe-area-inset-top,0px),24px)}
  }
}