/* The bar across the top of every page, on its own so that a page that is
   not one of ours (Ente's photos app) carries the same one: the logo going
   home, and the menu shell.js fills from /_dd/me. home.css imports it. It
   brings its own tokens and touches nothing outside header.dd-bar. */

@font-face {
  font-family: "Public Sans";
  src: url("/_dd/static/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.dd-bar {
  --bar: #1D4470;
  --bar-ink: #FFFFFF;
  --bar-mark: #9CC3EA;
  --bar-edge: rgba(255, 255, 255, .25);
  --bar-menu: #FFFFFF;
  --bar-menu-ink: #1A1F1C;
  --bar-menu-line: #D5D9D3;
  --bar-menu-rule: #E3E6E1;
  --bar-menu-hover: #EEF1F5;
  --bar-focus: #E0A21B;
}
/* the scheme follows the device, or a choice the page stamps on the root:
   ours as data-theme, Ente's as a class */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .dd-bar {
    --bar: #16304F;
    --bar-mark: #7FAEDD;
    --bar-menu: #171C22;
    --bar-menu-ink: #E5E9EE;
    --bar-menu-line: #2A313B;
    --bar-menu-rule: #222831;
    --bar-menu-hover: #0F1318;
  }
}
:root[data-theme="dark"] .dd-bar, :root.dark .dd-bar {
  --bar: #16304F;
  --bar-mark: #7FAEDD;
  --bar-menu: #171C22;
  --bar-menu-ink: #E5E9EE;
  --bar-menu-line: #2A313B;
  --bar-menu-rule: #222831;
  --bar-menu-hover: #0F1318;
}

.dd-bar {
  flex-shrink: 0;
  background: var(--bar);
  color: var(--bar-ink);
  font-family: "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
.dd-bar *, .dd-bar *::before, .dd-bar *::after { box-sizing: border-box; }
.dd-bar :focus-visible { outline: 3px solid var(--bar-focus); outline-offset: 2px; }
.dd-bar .bar {
  height: 64px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dd-bar .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--bar-ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.dd-bar .brand:hover { color: var(--bar-ink); }
.dd-bar .brand svg { width: 22px; height: 22px; }
.dd-bar .brand .mark-line { stroke: var(--bar-ink); }
.dd-bar .brand .mark-fill { fill: var(--bar-mark); }
.dd-bar .bar > a:not(.brand), .dd-bar .bar > a:not(.brand):hover {
  color: var(--bar-ink);
  font-size: 15px;
  font-weight: 600;
}
.dd-bar .me {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.dd-bar .avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--bar-mark);
  color: var(--bar);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* the menu: everything that is not a service */
.dd-bar .menu { position: relative; }
.dd-bar .menu summary {
  list-style: none;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--bar-edge);
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  color: var(--bar-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.dd-bar .menu summary::-webkit-details-marker { display: none; }
.dd-bar .menu summary:hover, .dd-bar .menu[open] summary { background: rgba(255, 255, 255, .16); }
.dd-bar .chev {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--bar-ink);
}
.dd-bar .menu[open] summary .chev { transform: rotate(180deg); }
.dd-bar .menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  /* above whatever the page under the bar puts on top of itself */
  z-index: 1400;
  min-width: 200px;
  padding: 6px 0;
  border: 1px solid var(--bar-menu-line);
  border-radius: 4px;
  background: var(--bar-menu);
  display: flex;
  flex-direction: column;
}
.dd-bar .menu nav a {
  padding: 9px 16px;
  color: var(--bar-menu-ink);
  text-decoration: none;
  font-size: 15px;
}
.dd-bar .menu nav a:hover { background: var(--bar-menu-hover); color: var(--bar-menu-ink); }
.dd-bar .menu nav hr { border: none; border-top: 1px solid var(--bar-menu-rule); margin: 6px 0; }

/* left of the name: the services, one click from any of them, and Friends */
.dd-bar .links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.dd-bar .links .link, .dd-bar .svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bar-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.dd-bar .links .link:hover, .dd-bar .svc-btn:hover, .dd-bar .svc-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: var(--bar-ink); }
.dd-bar .links .link[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.dd-bar .svc-btn svg { width: 12px; height: 12px; }
.dd-bar .svc { position: relative; }
.dd-bar .svc-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 1400;
  width: 320px;
  padding: 6px;
  border: 1px solid var(--bar-menu-line);
  border-radius: 6px;
  background: var(--bar-menu);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
}
.dd-bar .svc-menu[hidden] { display: none; }
.dd-bar .svc-menu .s {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  color: var(--bar-menu-ink);
  text-decoration: none;
}
.dd-bar .svc-menu .s:hover { background: var(--bar-menu-hover); color: var(--bar-menu-ink); }
.dd-bar .svc-menu .s svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 7px;
  background: var(--c, var(--bar));
  stroke: #fff;
}
.dd-bar .svc-menu b { display: block; font-size: 15px; line-height: 1.3; }
.dd-bar .svc-menu .s span span { display: block; font-size: 13px; line-height: 1.35; color: var(--bar-menu-ink); opacity: .7; }
.dd-bar .svc-menu .all {
  display: block;
  margin-top: 4px;
  padding: 10px 8px 6px;
  border-top: 1px solid var(--bar-menu-rule);
  color: var(--bar-menu-ink);
  opacity: .75;
  font-size: 14px;
  text-decoration: none;
}
.dd-bar .svc-menu .all:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 860px) {
  .dd-bar .bar { padding: 0 16px; height: 56px; }
}
@media (max-width: 560px) {
  .dd-bar .brand span { display: none; }
  .dd-bar .me summary > span:not(.avatar):not(.chev) { display: none; }
  .dd-bar .svc-menu { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; }
}

/* a setting in the menu: its name opens its page, the switch flips it */
.dd-bar .menu nav .toggle { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.dd-bar .menu nav .toggle a { flex: 1; }
.dd-bar .menu nav .switch {
  flex: none;
  width: 34px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  border: 0;
  background: var(--bar-menu-line);
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.dd-bar .menu nav .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.dd-bar .menu nav .switch[aria-checked="true"] { background: #1D5C42; }
.dd-bar .menu nav .switch[aria-checked="true"]::after { transform: translateX(14px); }
.dd-bar .menu nav .switch:disabled { opacity: .5; cursor: default; }
.dd-bar .menu nav .switch:focus-visible { outline: 3px solid var(--bar-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dd-bar .menu nav .switch, .dd-bar .menu nav .switch::after { transition: none; } }

/* right of the services: the docs, and the search over every page's own
   results, the services and the docs (shell.js) */
.dd-bar .bar > .docs-link {
  margin-left: auto;
  margin-right: -8px;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 4px;
  color: var(--bar-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.dd-bar .bar > .docs-link:hover, .dd-bar .bar > .docs-link[aria-current="page"] { background: rgba(255, 255, 255, .14); color: var(--bar-ink); }
.dd-bar .dd-search { position: relative; flex: 0 1 320px; }
/* by its id: the pages size their own fields (home.css, git.css), never this one */
.dd-bar #dd-q {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 34px;
  font: inherit;
  font-size: 14px;
  color: var(--bar-ink);
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--bar-edge);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}
.dd-bar #dd-q::placeholder { color: rgba(255, 255, 255, .72); opacity: 1; }
.dd-bar #dd-q:focus { outline: none; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }
.dd-bar #dd-q::-webkit-search-cancel-button { display: none; }
.dd-bar .dd-search .glass { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; pointer-events: none; }
.dd-bar .dd-search svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dd-bar .dd-search .glass { color: rgba(255, 255, 255, .8); }
.dd-bar .dd-search kbd {
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 0 5px;
  font: 12px/18px ui-monospace, Consolas, monospace;
  color: rgba(255, 255, 255, .75);
  border: 1px solid var(--bar-edge);
  border-radius: 3px;
}
.dd-bar #dd-q:focus ~ kbd { display: none; }
.dd-bar .dd-search .open-search { display: none; }
.dd-bar .found {
  position: absolute;
  z-index: 1400;
  top: calc(100% + 6px);
  right: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  padding: 6px;
  background: var(--bar-menu);
  color: var(--bar-menu-ink);
  border: 1px solid var(--bar-menu-line);
  border-radius: 6px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
  font-size: 14px;
  line-height: 1.4;
}
.dd-bar .found h4 { margin: 8px 10px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .6; }
.dd-bar .found a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--bar-menu-ink);
  text-decoration: none;
}
.dd-bar .found a:hover, .dd-bar .found a.on { background: var(--bar-menu-hover); color: var(--bar-menu-ink); }
.dd-bar .found .ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: var(--c, var(--bar-menu-rule)); }
.dd-bar .found .ic svg { width: 16px; height: 16px; fill: none; stroke: var(--ic, #fff); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dd-bar .found .plain .ic { --ic: var(--bar-menu-ink); }
.dd-bar .found b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.dd-bar .found small { display: block; font-size: 13px; opacity: .7; overflow-wrap: anywhere; }
.dd-bar .found mark { background: none; color: inherit; text-decoration: underline 2px var(--bar-focus); text-underline-offset: 2px; }
.dd-bar .found .more { display: block; padding: 7px 10px; font-size: 13.5px; opacity: .8; }
.dd-bar .found p { margin: 8px 10px; opacity: .75; }
.dd-bar .me > .sign-in { color: var(--bar-ink); font-size: 15px; font-weight: 600; text-decoration: none; padding: 0 4px; }
.dd-bar .me > .sign-in:hover { text-decoration: underline; color: var(--bar-ink); }
@media (max-width: 760px) {
  .dd-bar .dd-search { flex: none; }
  .dd-bar .dd-search:not(.open) :is(input, kbd, .glass) { display: none; }
  .dd-bar .dd-search .open-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    color: var(--bar-ink);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
  .dd-bar .dd-search .open-search:hover { background: rgba(255, 255, 255, .14); }
  .dd-bar .dd-search .open-search svg { width: 18px; height: 18px; }
  .dd-bar .dd-search.open { position: fixed; z-index: 1400; left: 0; right: 0; top: 56px; padding: 8px 16px 10px; background: var(--bar); }
  .dd-bar .dd-search.open .open-search, .dd-bar .dd-search.open kbd { display: none; }
  .dd-bar .dd-search.open .glass { left: 27px; top: 19px; }
  .dd-bar .dd-search.open .found { left: 16px; right: 16px; width: auto; }
}