/* Guwit team tools — password screen and tools menu. Used with assets/tools.js. */

/* Until the password is accepted, only the password screen is shown. */
html.tool-locked body > :not(.tool-gate){ display:none !important; }

.tool-gate{
  position:fixed; inset:0; z-index:100; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:var(--paper);
}
.tool-gate-card{
  width:100%; max-width:420px; display:flex; flex-direction:column; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; box-shadow:0 18px 50px rgba(34,27,46,.10);
}
.tool-gate-card .brand{ margin-bottom:6px; }
.tool-gate-card h1{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:1.6rem; line-height:1.2; color:var(--plum-ink);
}
.tool-gate-note{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.tool-gate-field{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9rem; }
.tool-gate-field input{
  font:inherit; font-weight:400; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); color:var(--ink);
}
.tool-gate-field input:focus{ outline:2px solid var(--plum); outline-offset:1px; }
.tool-gate-pw{ position:relative; display:block; }
.tool-gate-pw input{ width:100%; box-sizing:border-box; padding-right:76px; }
.tool-gate-eye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  padding:6px 12px; border:0; border-radius:8px; background:transparent;
  color:var(--plum-ink); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
}
.tool-gate-eye:hover{ background:var(--plum-tint); }
.tool-gate-eye:focus-visible{ outline:2px solid var(--plum); outline-offset:1px; }
.tool-gate-eye[disabled]{ opacity:.5; cursor:default; }
.tool-gate-check{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink-soft); }
.tool-gate-error{ margin:0; min-height:1.2em; color:#B3261E; font-size:.9rem; }
.tool-gate-error:empty{ display:none; }
.tool-gate-card .btn{ justify-content:center; }
.tool-gate-card .btn[disabled]{ opacity:.6; cursor:default; }
.tool-gate-foot{ margin:4px 0 0; font-size:.85rem; color:var(--ink-soft); }

/* Tools menu, added to the header of every tool page. */
.tool-menu{ position:relative; flex:none; }
.tool-menu > summary{
  list-style:none; cursor:pointer; user-select:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--white); color:var(--plum-ink); font-weight:600; font-size:.85rem;
}
.tool-menu > summary::-webkit-details-marker{ display:none; }
.tool-menu > summary::after{ content:""; width:7px; height:7px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.tool-menu[open] > summary::after{ margin-top:3px; transform:rotate(-135deg); }
.tool-menu-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  width:max-content; min-width:240px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; padding:8px;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 40px rgba(34,27,46,.14);
}
.tool-menu-panel a, .tool-menu-lock{
  display:block; padding:9px 12px; border-radius:8px; text-align:left;
  color:var(--ink); text-decoration:none; font:inherit; font-size:.92rem;
}
.tool-menu-panel a:hover, .tool-menu-lock:hover{ background:var(--plum-tint); }
.tool-menu-panel a[aria-current="page"]{ font-weight:700; color:var(--plum-ink); }
.tool-menu-panel hr{ border:0; border-top:1px solid var(--line); margin:6px 4px; }
.tool-menu-lock{ border:0; background:none; cursor:pointer; color:var(--ink-soft); }