/* The bar at the top of every screen, the same whichever look the screen below it is in (app.css or desk.css). It
   has colours of its own, so it never depends on what the page calls --panel or --ink. Light and dark follow the
   device, unless the photographer chose one with the ◐ button: that sets data-theme on <html> and is remembered on
   the device as "field-theme", the same choice the field view makes. */
:root{--bar-bg:#ffffff;--bar-ink:#1f2620;--bar-muted:#667064;--bar-line:#e2e3da;--bar-soft:#f1f1ea;--bar-pop:#ffffff;--bar-avatar:#2f4a3d}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bar-bg:#191f26;--bar-ink:#eef0f2;--bar-muted:#a3abb4;--bar-line:#2a323c;--bar-soft:#242c36;--bar-pop:#2e3743;--bar-avatar:#2f5a47}}
:root[data-theme=dark]{--bar-bg:#191f26;--bar-ink:#eef0f2;--bar-muted:#a3abb4;--bar-line:#2a323c;--bar-soft:#242c36;--bar-pop:#2e3743;--bar-avatar:#2f5a47}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:10px clamp(16px,2.4vw,40px);background:color-mix(in srgb,var(--bar-bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--bar-line);color:var(--bar-ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bar a{color:inherit;text-decoration:none}
.bar-brand{display:flex;align-items:center;gap:10px;font-family:Georgia,"Times New Roman",serif;font-size:19px;white-space:nowrap}
.bar-brand img{display:block;width:30px;height:30px;flex:none}
.bar-nav{display:flex;gap:4px;flex:1;min-width:0}
.bar-nav a{padding:7px 12px;border-radius:8px;font-size:14px;color:var(--bar-muted);white-space:nowrap}
.bar-nav a:hover{background:var(--bar-soft);color:var(--bar-ink)}
.bar-nav a[aria-current=page]{background:var(--bar-soft);color:var(--bar-ink);font-weight:700}
.bar-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.bar-theme{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--bar-soft);color:var(--bar-ink);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.bar-lang{display:flex;margin:0;padding:3px;border-radius:9px;background:var(--bar-soft)}
.bar-lang button{border:0;background:transparent;color:var(--bar-muted);font:inherit;font-size:12px;font-weight:700;letter-spacing:.5px;padding:5px 9px;border-radius:7px;cursor:pointer}
.bar-lang button[aria-pressed=true]{background:var(--bar-pop);color:var(--bar-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bar-user{position:relative}
.bar-user>summary{list-style:none;cursor:pointer}
.bar-user>summary::-webkit-details-marker{display:none}
.bar-user>summary span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bar-avatar);color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px}
.bar-user>div{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;background:var(--bar-bg);border:1px solid var(--bar-line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.bar-user p{margin:4px 8px 8px;font-weight:700}
.bar-user form{margin:0}
.bar-user button{width:100%;text-align:left;border:0;background:transparent;color:var(--bar-ink);font:inherit;padding:8px;border-radius:7px;cursor:pointer}
.bar-user button:hover{background:var(--bar-soft)}
.bar :is(a,button,summary):focus-visible{outline:2px solid #f2a33a;outline-offset:2px}

/* On a phone the sections take a row of their own and run off its edge, fading there to say so; the mark already
   leads home. */
@media (max-width:800px){
  .bar{flex-wrap:wrap;gap:8px 10px;padding:8px 14px}
  .bar-brand span{display:none}
  .bar-nav{order:3;flex-basis:100%;gap:2px;padding-right:22px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .bar-nav::-webkit-scrollbar{display:none}
  .bar-nav a{padding:7px 8px}
  .bar-nav .bar-home{display:none}
}
@media print{.bar{display:none!important}}