/* The design, as classes.
 *
 * NoZapretDNS.dc.html styles every element inline, which a strict
 * Content-Security-Policy does not allow. Every declaration here is copied from
 * it unchanged; what changed is where it lives. When the two disagree the
 * design is right and this file is wrong.
 *
 * The tokens themselves are in app.css and already match the design exactly. */

/* app.css styles bare elements -- every button is a pill, every h2 is an
   eyebrow -- which the screens ported from the design do not want. Until the
   last screen is ported and that file goes away, the new components say what
   they mean rather than relying on order. */
.nav-item,
.nav-profile,
.tick,
.drop,
.linkish {
  justify-content: flex-start;
  white-space: normal;
  gap: 0;
}

.nav-profile,
.tick,
.linkish { height: auto; }

.tick, .prof .drop { justify-content: center; }

.pane h2,
.prof h2,
.auth-card h2 {
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg);
}

.pane h2 { font: 700 20px/1.2 Manrope; letter-spacing: -.01em; }

@keyframes nzPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes nzSheet { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------- shell */

.app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  position: relative;
  overflow: hidden;
  font-family: Manrope, system-ui, sans-serif;
}

.app > .glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow i {
  position: absolute;
  border-radius: 50%;
  display: block;
}

.glow i:first-child {
  width: 56vw;
  height: 56vw;
  left: -14vw;
  top: -18vw;
  background: var(--blob1);
  filter: blur(90px);
  animation: nzBlob 22s ease-in-out infinite;
}

.glow i:last-child {
  width: 48vw;
  height: 48vw;
  right: -12vw;
  bottom: -16vw;
  background: var(--blob2);
  filter: blur(100px);
  animation: nzBlob 26s ease-in-out infinite -9s;
}

/* The banner sits above everything and says why the service is not itself
   today. It pulses, because a state somebody has to notice should not look
   like decoration. */
.notice {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  font: 500 13px/1.4 Manrope;
  animation: nzPop .4s ease both;
}

.notice .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: nzPulse 2s ease-in-out infinite;
}

.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice.info { background: var(--accent-soft); color: var(--accent); }

.frame-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.frame {
  width: 100%;
  max-width: 1240px;
  display: flex;
  gap: 20px;
  min-height: 100vh;
  padding: 20px;
}

.frame > main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: nzIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

/* The phone header replaces the side navigation rather than shrinking it: a
   list of eighteen sections is not a thing to scroll past on every screen. */
.phone-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 0;
}

.phone-head .brand { font: 800 15px/1 Manrope; }
.phone-head .brand span { color: var(--accent); }
.phone-head .where { font: 500 12px/1 Manrope; color: var(--fg2); }

@media (max-width: 860px) {
  .frame { padding: 28px 16px; gap: 0; }
  .phone-head { display: flex; }
}

/* -------------------------------------------------------------- navigation */

.nav {
  flex: none;
  width: 236px;
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  border-radius: 24px;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

@media (max-width: 860px) { .nav { display: none; } }

/* The profile switcher. It is the first thing in the navigation because on an
   account with several profiles, "which one am I looking at" comes before
   every other question. */
.nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--code);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
  transition: background .2s;
}

.nav-profile { gap: 10px; }
.nav-profile:hover { background: var(--accent-soft); }
.nav-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-profile .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.nav-profile .dot.warn { background: var(--warn); }
.nav-profile .dot.bad { background: var(--bad); }
.nav-profile .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-profile .name { display: block; font: 700 13px/1.2 Manrope; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-profile .meta { display: block; font: 500 11px/1.3 "JetBrains Mono", monospace; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-profile .swap { font: 600 14px/1 Manrope; color: var(--fg3); }

.nav-group {
  font: 700 10.5px/1 Manrope;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
  padding: 16px 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: 600 13.5px/1 Manrope;
  transition: background .2s, color .2s, transform .15s;
  background: transparent;
  color: var(--fg);
  width: 100%;
}

.nav-item { gap: 10px; }

.nav-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg3);
  flex: none;
  transition: background .2s;
}

.nav-item:hover { background: var(--accent-soft); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-item[aria-current="page"] { background: var(--accent); color: var(--accent-fg); }
.nav-item[aria-current="page"] .dot { background: var(--accent-fg); }
.nav-item .soon { margin-left: auto; font: 500 10px/1 Manrope; color: var(--fg3); }

/* ---------------------------------------------------------------- surfaces */

.pane {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pane.tight { padding: 20px; gap: 12px; }
.pane.flat { padding: 14px; gap: 6px; }

.pane.sketch {
  border: 1px dashed var(--line);
  box-shadow: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-items: start;
}

.cols.narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols .span { grid-column: 1 / -1; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.page-head h1 {
  margin: 0 0 4px;
  font: 800 clamp(22px, 3vw, 30px)/1.1 Manrope;
  letter-spacing: -.02em;
}

.page-head .sub { font: 500 13px/1.3 Manrope; color: var(--fg2); }

.eyebrow {
  font: 700 11px/1 Manrope;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow.live { color: var(--accent); }
.eyebrow.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: nzPulse 2s ease-in-out infinite; }

.lede { margin: 0; font: 500 14px/1.5 Manrope; color: var(--fg2); text-wrap: pretty; }
.said { font: 500 13px/1.45 Manrope; color: var(--fg2); }
.aside { font: 500 12.5px/1.4 Manrope; color: var(--fg3); }
.tt { font-family: "JetBrains Mono", monospace; }

/* ---------------------------------------------------------------- controls */

.act {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--accent-fg);
  font: 600 14px/1 Manrope;
  cursor: pointer;
  transition: transform .2s, filter .2s;
}

.act:hover { filter: brightness(1.08); }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.act[disabled] { opacity: .4; cursor: default; }

.act.tall { height: 48px; font-size: 15px; padding: 0 22px; }
.act.small { height: 40px; padding: 0 18px; font-size: 13.5px; }

.act.line {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
}

.act.line:hover { background: var(--accent-soft); filter: none; }

/* Inverted rather than accent: on a screen that is already asking for a
   decision, the safe way out should not look like the loud one. */
.act.calm { background: var(--fg); color: var(--bg); }
.act.calm:focus-visible { outline-color: var(--fg); }

.act.quiet { background: transparent; color: var(--fg2); }
.act.quiet:hover { color: var(--fg); filter: none; }

.act.danger { background: var(--bad); color: #fff; }

.linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: 600 13.5px/1 Manrope;
  cursor: pointer;
}

.linkish:hover { text-decoration: underline; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.linkish.tiny { font-size: 12.5px; }

.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 600 13px/1.3 Manrope;
}

.fld input,
.fld select,
.fld textarea {
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--code);
  color: var(--fg);
  font: 500 15px/1 Manrope;
  outline: none;
  width: 100%;
}

.fld input:focus,
.fld select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fld.bad input { border-color: var(--bad); }
.fld .label-row { display: flex; justify-content: space-between; align-items: baseline; }

.alert {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bad-soft);
  color: var(--bad);
  font: 500 13px/1.45 Manrope;
  animation: nzPop .3s ease both;
}

.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }

/* A checkbox drawn as a button, because a native one cannot be made to match
   the rest and a label that is hard to hit is a form people abandon. */
.tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  font: 800 13px/1 Manrope;
  transition: all .2s;
}

.tick[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 500 13px/1.45 Manrope;
  color: var(--fg2);
  cursor: pointer;
}

/* The strength meter. Three states rather than a number, because the number
   would be a guess dressed up as a measurement. */
.pw { display: flex; align-items: center; gap: 10px; }
.pw .track { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pw .fill { height: 100%; border-radius: 999px; transition: width .3s, background .3s; width: 0; }
.pw .word { font: 500 11.5px/1 Manrope; min-width: 64px; text-align: right; }

.pw.weak .fill { width: 33%; background: var(--bad); }
.pw.weak .word { color: var(--bad); }
.pw.fair .fill { width: 66%; background: var(--warn); }
.pw.fair .word { color: var(--warn); }
.pw.good .fill { width: 100%; background: var(--ok); }
.pw.good .word { color: var(--ok); }

/* -------------------------------------------------------------------- auth */

.auth {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 12px 0;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.mark .badge {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent);
  display: grid;
  place-items: center;
}

.mark .badge i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent-fg); display: block; }
.mark .word { font: 800 19px/1 Manrope; letter-spacing: -.01em; }
.mark .word span { color: var(--accent); }

.auth-card {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: nzIn .4s cubic-bezier(.2, .8, .2, 1) both;
}

.auth-card h1 { margin: 0; font: 800 26px/1.1 Manrope; letter-spacing: -.02em; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card form .act { margin-top: 4px; }
.auth-title { display: flex; flex-direction: column; gap: 6px; }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg3);
  font: 500 12px/1 Manrope;
}

.or::before,
.or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-foot { text-align: center; font: 500 13.5px/1.4 Manrope; color: var(--fg2); }
.auth-note { text-align: center; font: 500 12px/1.4 Manrope; color: var(--fg3); }

.done-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--ok-soft);
  color: var(--ok);
  display: grid;
  place-items: center;
  font: 800 20px/1 Manrope;
}

/* ---------------------------------------------------------------- profiles */

.prof {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s;
  animation: nzPop .35s ease both;
}

.prof.is-current { border-color: var(--accent); }
.prof .top { display: flex; align-items: flex-start; gap: 10px; }
.prof .who { flex: 1; min-width: 0; }
.prof .name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prof h2 { margin: 0; font: 700 17px/1.2 Manrope; }
.prof .meta { font: 500 12px/1.4 Manrope; color: var(--fg3); }

.prof dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.prof dl > div { display: flex; flex-direction: column; gap: 3px; }
.prof dt { font: 700 10px/1 Manrope; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.prof dd { margin: 0; font: 600 14px/1.2 Manrope; }
.prof dd.num { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }

.prof .acts { display: flex; gap: 8px; align-items: center; margin-top: auto; }

.prof .drop {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg3);
  cursor: pointer;
  font: 600 16px/1 Manrope;
}

.prof .drop:hover { background: var(--bad-soft); color: var(--bad); }
.prof .drop:focus-visible { outline: 2px solid var(--accent); }

.tag {
  font: 700 10px/1 Manrope;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
}

.tag.ok { background: var(--ok-soft); color: var(--ok); }

.state {
  font: 600 11px/1 "JetBrains Mono", monospace;
  padding: 5px 8px;
  border-radius: 999px;
  flex: none;
  background: var(--ok-soft);
  color: var(--ok);
}

.state.warn { background: var(--warn-soft); color: var(--warn); }
.state.bad { background: var(--bad-soft); color: var(--bad); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip-pick {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  font: 600 13px/1 Manrope;
  transition: all .25s;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
}

.chip-pick[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 500 14px/1.45 Manrope; }
.points span { color: var(--fg2); }
.rule { font: 500 12.5px/1.4 Manrope; color: var(--fg3); padding-top: 4px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ errors */

.lost {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 12px 0;
}

.lost-box {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.lost-code {
  font: 600 clamp(72px, 14vw, 120px)/1 "JetBrains Mono", monospace;
  letter-spacing: -.06em;
  color: var(--fg);
  opacity: .14;
}

.lost-say { display: flex; flex-direction: column; gap: 8px; margin-top: -28px; }
.lost-say h1 { margin: 0; font: 800 26px/1.1 Manrope; letter-spacing: -.02em; }

.denied {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 28px;
}

.denied .code {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--warn-soft);
  color: var(--warn);
  display: grid;
  place-items: center;
  font: 600 16px/1 "JetBrains Mono", monospace;
}

.denied .what { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.denied .what strong { font: 700 18px/1.2 Manrope; }
.denied p { margin: 0; max-width: 60ch; }

/* -------------------------------------------------------------- skeletons */

.skel {
  height: 200px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--skel) 0, var(--glass2) 40%, var(--skel) 80%);
  background-size: 800px 100%;
  animation: nzShimmer 1.4s linear infinite;
}

.skel.row { height: 64px; border-radius: 18px; }