/* dyndns.subgenius.vip
   Mimeographed church bulletin: manila duplicator stock, aniline ditto
   purple, rubber-stamp red. Type is monospace throughout the chrome --
   a church newsletter run off on a spirit duplicator, not a SaaS dashboard.
   No web fonts: everything here ships with the browser. */

:root {
  --paper:     #E6E4D9;
  --card:      #F1F0E8;
  --ditto:     #4B3A8F;
  --ditto-pale:#8E7FC4;
  --stamp:     #A8342A;
  --ink:       #23211C;
  --ink-soft:  #6A665A;
  --rule:      #B9B6A6;
  --mono: "Courier New", ui-monospace, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--paper);
  /* faint duplicator grain */
  background-image:
    repeating-linear-gradient(0deg, rgba(75,58,143,.025) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}

.sheet { max-width: 640px; margin: 0 auto; }

/* ---- masthead ---- */
.masthead { border-bottom: 3px double var(--ditto); padding-bottom: .9rem; margin-bottom: 2rem; }
.masthead h1 {
  margin: 0;
  /* Sized for the full name, not the old six-letter one. Wide monospace
     tracking plus twenty characters overflows a phone at a fixed size, so
     it scales with the viewport and stops growing at the desktop value. */
  font: 700 clamp(.92rem, 4.4vw, 1.42rem)/1.15 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ditto);
  overflow-wrap: anywhere;
}
.masthead p {
  margin: .55rem 0 0;
  font: .75rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead .who { float: right; text-align: right; }
.masthead .who a { color: var(--ditto); }

h2 {
  font: 700 .78rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.5rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}

/* ---- registry card: the signature ---- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem 1rem;
  margin-bottom: 1.1rem;
  box-shadow: 1px 1px 0 rgba(35,33,28,.14);
}
/* perforated top edge */
.card::before {
  content: "";
  position: absolute; inset: -1px 0 auto 0; height: 5px;
  background: radial-gradient(circle at 4px 0, transparent 0 3px, var(--rule) 3px 3.6px, transparent 3.6px) repeat-x;
  background-size: 8px 5px;
}
.card .fqdn { font: 700 1.06rem/1.3 var(--mono); color: var(--ink); word-break: break-all; }
.card .meta { font: .72rem/1.6 var(--mono); letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; margin-top: .3rem; }
.card .actions { margin-top: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* the stamp */
.stamp {
  position: absolute; top: .8rem; right: .9rem;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  border: 2px solid var(--stamp);
  border-radius: 3px;
  padding: .3rem .55rem;
  text-align: center;
  color: var(--stamp);
  opacity: .82;
  pointer-events: none;
  max-width: 45%;
}
.stamp b { display: block; font: 700 .82rem/1.15 var(--mono); letter-spacing: .04em; word-break: break-all; }
.stamp span { display: block; font: .58rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.stamp.unset { color: var(--ink-soft); border-color: var(--ink-soft); border-style: dashed; }

/* ---- forms ---- */
label { display: block; font: .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
input[type=text], input[type=password] {
  width: 100%; padding: .6rem .7rem;
  font: 1rem var(--mono);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ditto); outline-offset: 2px;
}
.field { margin-bottom: 1.1rem; }
.suffix { display: flex; align-items: stretch; }
.suffix input { border-right: 0; }
.suffix span {
  display: flex; align-items: center; padding: 0 .7rem;
  font: .95rem var(--mono); color: var(--ink-soft);
  background: rgba(75,58,143,.07); border: 1px solid var(--rule);
}

button, .btn {
  font: 700 .7rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  padding: .62rem .95rem;
  border: 1px solid var(--ditto);
  background: var(--ditto); color: var(--paper);
  cursor: pointer; border-radius: 0;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: #3B2D73; }
button.ghost, .btn.ghost { background: transparent; color: var(--ditto); }
button.ghost:hover, .btn.ghost:hover { background: rgba(75,58,143,.1); }
button.danger, .btn.danger { background: transparent; color: var(--stamp); border-color: var(--stamp); }
button.danger:hover { background: rgba(168,52,43,.1); }

/* ---- notices ---- */
.note { padding: .75rem .9rem; margin-bottom: 1.2rem; font: .85rem/1.5 var(--sans); border-left: 4px solid; }
.note.bad  { border-color: var(--stamp); background: rgba(168,52,43,.09); color: #7A241C; }
.note.good { border-color: var(--ditto); background: rgba(75,58,143,.09); }
.note code { font: .9em var(--mono); }

.token {
  display: block; margin: .6rem 0 .3rem; padding: .7rem;
  background: var(--card); border: 1px dashed var(--ditto);
  font: .95rem var(--mono); word-break: break-all; color: var(--ditto);
}

.hint { font: .74rem/1.5 var(--mono); color: var(--ink-soft); margin-top: .45rem; letter-spacing: .04em; }
.hint.bad { color: var(--stamp); }
.hint.ok  { color: var(--ditto); }

.empty { font: .85rem/1.6 var(--sans); color: var(--ink-soft); padding: 1.4rem 0; border-top: 1px solid var(--rule); }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
         font: .68rem/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 520px) {
  .stamp { position: static; transform: none; max-width: none; margin-bottom: .7rem; display: inline-block; }
  .masthead .who { float: none; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- setup page ---- */
.tabs { display: flex; flex-wrap: wrap; gap: -1px; margin-bottom: -1px; }
.tabs button {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); border-bottom-color: var(--rule);
  margin-right: -1px; letter-spacing: .12em;
}
.tabs button:hover { background: rgba(75,58,143,.07); color: var(--ditto); }
.tabs button[aria-selected="true"] {
  background: var(--card); color: var(--ditto);
  border-color: var(--rule); border-bottom-color: var(--card);
  position: relative; z-index: 1;
}
.panel { border: 1px solid var(--rule); background: var(--card); padding: 1.2rem; }
.panel h3 { margin: 0 0 .3rem; font: 700 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.panel p  { margin: .3rem 0 1rem; font-size: .87rem; }
.panel dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .45rem .9rem; align-items: start; }
.panel dt { font: .68rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.panel dd { margin: 0; font: .87rem/1.5 var(--mono); word-break: break-all; }
pre.conf {
  margin: 0; padding: .85rem; overflow-x: auto;
  background: var(--paper); border: 1px solid var(--rule);
  font: .82rem/1.6 var(--mono); color: var(--ink);
}
.copy { margin-top: .6rem; }
.copy.done { background: var(--ditto-pale); border-color: var(--ditto-pale); }
select {
  padding: .55rem .6rem; font: .9rem var(--mono);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
}
.keyword { color: var(--stamp); }

/* ---- login ----
   Same manila stock and ditto purple as the rest of the registry. The panel
   reuses the perforated top edge from the hostname cards so the sign-in door
   and the thing behind it read as one system. */
.login-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }

.signin {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.2rem;
  box-shadow: 1px 1px 0 rgba(35,33,28,.14);
}
.signin::before {
  content: "";
  position: absolute; inset: -1px 0 auto 0; height: 5px;
  background: radial-gradient(circle at 4px 0, transparent 0 3px, var(--rule) 3px 3.6px, transparent 3.6px) repeat-x;
  background-size: 8px 5px;
}
.signin .sig-brand {
  font: 700 .8rem/1.35 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ditto);
  word-break: break-word;
}
.signin hr { border: 0; border-top: 1px solid var(--rule); margin: .85rem 0 1rem; }
.signin .sig-login {
  font: 700 .74rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.signin button { width: 100%; margin-top: 1.1rem; padding: .75rem; }
.signin .sig-err {
  border-left: 4px solid var(--stamp);
  background: rgba(168,52,43,.09);
  color: #7A241C;
  padding: .6rem .75rem; margin-bottom: 1rem;
  font: .84rem/1.5 var(--sans);
}
.signin .sig-note {
  margin-top: 1rem;
  font: .68rem/1.7 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-soft);
  /* Justified to square off the bottom of the panel. Monospace justifies
     badly without help -- every space is the same width, so short lines
     pull apart into rivers. Hyphenation gives it somewhere to break. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.aside h3 { margin: 0 0 .5rem; font: 700 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.aside p  { font-size: .87rem; margin: .3rem 0 1.1rem; }
.aside .btn { margin-bottom: .5rem; }
.aside hr { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0; }

@media (max-width: 620px) {
  .login-cols { grid-template-columns: 1fr; }
  .aside { order: 2; }
}