/* ===========================================================================
   pendingdelete.net — the public design (deploy 40)

   Loaded after site.css, on public pages and, since deploy 42, on the sign-in
   screen (templates/layout.php puts the class "pd" on <html> there). The admin
   pages behind the sign-in never load this file and keep their own look.

   The design is the mockups of 6 Oct 2026, measured:
     type     Roboto for everything a person reads — the face the mockups are
              drawn in — and Roboto Mono for what a machine counts (countdowns).
              Both are served by this site (assets/fonts), no request to anyone
              else. Inter is here too, for Look and feel → Interface font.
     colour   black on white, one blue for what you can press, one orange for
              the mark and the one big button. The status colours are the
              site's own and keep their meaning.
     shape    white cards on a pale grey page: a grey edge, a soft shadow
              underneath, grey heading bands, hairlines.

   SIZES. Every size below is a size in the mockups, which were drawn for a
   window 1694 px wide: a table line is 22.5 px, a card title 27, the headline
   51. On a desktop the page is then scaled as a whole (zoom, the steps at the
   end of this file) to the window it is in, in those same proportions: a 4K
   monitor shows the mockup, larger; a laptop shows it, smaller. How much of
   that scale a page takes is Look and feel → Page size (--s, deploy 41): at
   100% it fills the window; under that it is drawn smaller and sits in the
   middle, so every band here keeps its own width (--measure, --narrow) and
   nothing is sized by the window. Because of the scaling nothing in here may
   use vw or vh for a size (zoom multiplies them) — percentages only. Under
   760 px wide (a phone) there is no scaling: the phone layout near the end
   has its own sizes, in real pixels.

   WIDTH OF THE LETTERS. The mockups set their small text a little narrower
   than Roboto's normal width and their headlines at full width. Roboto has a
   width axis for exactly that, so every element's letters are drawn at the
   width --w says (88% unless a rule sets another): see "base" below.

   Contrast (WCAG): #111 on white 18.9, #333 12.6, #666 5.7, blue 5.7 both ways,
   status orange #C2410C 5.2. The brand orange carries white only in bold
   capitals of 21px or more (3.0, the large-text mark), never as small text.
   =========================================================================== */

@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-stretch: 75% 100%; font-display: swap;
  src: url(/assets/fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-stretch: 75% 100%; font-display: swap;
  src: url(/assets/fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/assets/fonts/roboto-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/assets/fonts/roboto-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* only fetched when Look and feel → Interface font is set to Inter */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------- tokens ---- */
:root {
  --z: 1;                     /* the window's scale; set by the steps at the end of this file */
  --z-min: .72;               /* the smallest scale a desktop page is ever drawn at (those steps' first one) */

  --blue:        #0067C1;
  --blue-hover:  #00539C;
  --navy:        #0B2E4F;
  --heading:     #111111;
  --ink:         #333333;
  --muted:       #555555;
  --faint:       #666666;

  --ground:      #F6F7F9;     /* the page */
  --panel:       #FFFFFF;     /* cards, the header, the footer */
  --tint:        #F1F6FB;     /* a pale blue: hover, the open menu */
  --line:        #CDCED3;     /* a card's edge, a band's lower edge */
  --line-soft:   #E4E5E9;     /* hairlines inside a card */
  --shadow:      0 3px 7px rgba(0, 0, 0, .13);

  --focus:       #0067C1;
  --radius:      8px;
  --radius-lg:   18px;

  --sans: "Roboto", Arial, "Liberation Sans", Helvetica, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* this file's own */
  --orange:       #F46820;    /* the mark, the one big button. The mockups' orange measures #F76B26 (give or take the
                                 JPEG); this is a hair darker, the first shade where the button's white letters reach 3 : 1 */
  --orange-hover: #E25A15;
  --thead:        #ECECEE;    /* table and card heading bands */
  --zebra:        #F7F8F9;
  --filter:       #D8EAF8;    /* the filter panel */
  --record:       #F3F3F4;    /* the box a registry's record is printed in */
  --measure:      1386px;     /* the width of a list's card in the mockups */
  --narrow:       1338px;     /* the width of the header's contents and of a name's page */
  --gutter:       24px;
}

/* -------------------------------------------------------------- base ---- */
html.pd { background: var(--ground); }
.pd body {
  /* How large the page is drawn. --z is the scale that would fill the window. --s is Look and
     feel → Page size, the share of it the page takes (.85 = 85%; templates/layout.php sets it):
     the page keeps its own widths and sits in the middle, with the ground either side. It never
     goes under --z-min, the size the design has in the smallest desktop window, so a small
     laptop loses nothing. --t is Look and feel → Text size (the steps at the end). */
  --scale: calc(max(var(--z-min), var(--z) * var(--s, 1)) * var(--t, 1));
  zoom: var(--scale);
  min-height: 100%;                     /* of the window (html is as tall as it is). Not 100vh: Chrome multiplies vh by the
                                           zoom and Safari does not, so "100vh / the scale" was the window in one and up to
                                           39% more than the window in the other: a short page scrolled over nothing there */
  background: var(--ground);
  color: var(--ink);
  font: 450 22px/1.5 var(--sans);
  text-rendering: optimizeLegibility;
  --w: 88%;                             /* how wide the letters are drawn; a rule that wants another width sets --w */
}
/* One rule draws every element's letters at its --w. It has to be this blunt:
   the "font:" shorthand, used all through these files, puts the width back to
   normal on whatever it styles. (Only Roboto has the axis; another font just
   ignores this.) */
.pd body, .pd body *, .pd body *::before, .pd body *::after { font-stretch: var(--w) !important; }
.pd ::selection { background: #CFE4F8; color: #111; }
.pd a { color: var(--blue); }
.pd :focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
.pd h1, .pd h2, .pd h3 { color: var(--heading); }
.pd.pd h1 { letter-spacing: 0; }
.pd .mono { font-family: var(--mono); font-size: .95em; }
.pd .faint { color: var(--faint); }
.pd code { font-family: var(--mono); font-size: .92em; }
/* figures that sit in columns line up */
.pd table, .pd .stats b, .pd .day-n, .pd time { font-variant-numeric: tabular-nums; }
/* the small pictures (lib/view.php pd_icon): as tall as the text they sit in */
.pd-i { display: inline-block; flex: 0 0 auto; width: auto; height: 1em; vertical-align: -.125em; }

/* ------------------------------------------------------------ header ---- */
.pd .masthead {
  background: var(--panel);
  border-bottom: 1px solid #DDDEE2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
}
/* its contents are as wide as a name's page: the mark at the left end, the button at the right */
.pd .masthead-inner {
  max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%);
  min-height: 92px;
  padding: 0 var(--gutter);
  gap: 0;
  flex-wrap: nowrap;
}

/* the mark: a clock that is already moving, and the name in two lines */
.pd-logo {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  text-decoration: none; color: var(--heading); border-radius: 6px;
}
.pd-logo-mark { width: 69px; height: 52px; color: var(--orange); flex: 0 0 auto; }
.pd-logo-text { --w: 100%; font: 800 30.5px/1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading); }

/* the menu: plain words, to the right */
.pd .site-nav { flex: 0 1 auto; margin-left: auto; }
.pd .nav-top { gap: 0; flex-wrap: nowrap; }
.pd .masthead .nav-link {
  --w: 92%;
  padding: 14px 24px; border-radius: 8px;
  font: 450 24.4px/1 var(--sans); color: var(--heading);
}
.pd .masthead .nav-link:hover, .pd .nav-item.open > .nav-link { color: var(--blue); background: none; }
.pd .nav-item.open > .nav-link::after,
.pd .masthead .nav-link:hover::after { left: 24px; right: 24px; bottom: -21px; height: 4px; background: var(--blue); }

.pd .nav-panel { border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(17, 17, 17, .10); }
.pd .nav-panel-inner {
  max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); padding: 26px var(--gutter) 32px; gap: 8px 28px;
  grid-template-columns: repeat(3, minmax(300px, 400px));
}
.pd .masthead .nav-card { padding: 16px 18px; border-radius: 10px; }
.pd .masthead .nav-card:hover { background: var(--tint); }
.pd .nav-card-t { font: 700 22px/1.3 var(--sans); color: var(--heading); }
.pd .masthead .nav-card:hover .nav-card-t { color: var(--blue); }
.pd .nav-card-b { margin-top: 5px; font: 400 19.5px/1.45 var(--sans); color: var(--faint); }

/* the right-hand slot: the search box (not on a page with its own search), then Login / Register (49) */
.pd .hsearch { margin-left: 25px; border: 3px solid var(--blue); border-radius: 9px; }
.pd .hsearch input {
  width: 232px; height: 42px; padding: 0 14px;
  font: 400 20.5px/1 var(--sans); color: var(--heading);
}
.pd .hsearch input::placeholder { color: var(--faint); opacity: 1; }
.pd .hsearch button {
  height: 42px; padding: 0 16px; gap: 8px;
  font: 600 20.5px/1 var(--sans); letter-spacing: 0; text-transform: none;
}
.pd .hsearch button svg { width: 19px; height: 19px; }
.pd .hsearch button span { display: inline; }
.pd .own-search .hsearch { display: none; }
/* With Login / Register beside it (49) the search gives up width before the menu does: the menu never
   shrinks, the field narrows (about 150 px of it is left beside the button). */
.pd .site-nav { flex-shrink: 0; }
.pd .hsearch { flex: 0 1 auto; min-width: 0; }
.pd .hsearch input { flex: 0 1 232px; min-width: 70px; }
.pd-cta {
  --w: 90%;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 193.5px; height: 48.7px;
  margin-left: 25px; padding: 0 22px;
  font: 560 22.4px/1 var(--sans); color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--blue); border-radius: 8px; box-shadow: 0 2px 7px rgba(0, 103, 193, .30);
  transition: background .14s ease;
}
.pd a.pd-cta { color: #fff; }
.pd-cta:hover { background: var(--blue-hover); }
.pd .nav-burger { width: 56px; height: 52px; padding: 14px 11px; border: 0; border-radius: 8px; }
.pd .nav-burger span { height: 3px; background: var(--heading); }
.pd .nav-burger span + span { margin-top: 7px; }
.pd .nav-burger[aria-expanded="true"] { background: var(--tint); }

/* ------------------------------------------------------------ footer ---- */
.pd footer { background: var(--panel); border-top: 1px solid #DDDEE2; }
.pd .footer-inner {
  max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); padding: 30px var(--gutter) 36px;
  font-size: 20.5px; color: var(--faint); align-items: center; gap: 12px 30px;
}
.pd .footer-inner a { color: var(--ink); font-weight: 500; }
.pd .footer-inner a:hover { color: var(--blue); }
.pd .footer-note { font-family: var(--sans); font-size: 19.5px; }
/* the owner's old door at the end of the footer: gone in 49, kept styled for pages cached before it */
.pd-signin { display: inline-flex; vertical-align: -5px; margin-left: 18px; padding: 4px; color: #8A8F98; border-radius: 6px; }
.pd .footer-inner a.pd-signin { color: #8A8F98; }
.pd .footer-inner a.pd-signin:hover { color: var(--blue); }
.pd-signin svg { width: 22px; height: 22px; }

/* ------------------------------------------------------ shared pieces ---- */
/* a section's heading: the mockup's black capitals */
.pd .eyebrow {
  --w: 98%;
  font: 800 25.5px/1.2 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}

/* cards: white on the grey page */
.pd-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.pd-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  margin: 0; padding: 20.8px 35px 17.5px 23px;
}
.pd .pd-card-head .eyebrow, .pd .pd-card-title {
  --w: 98%;
  margin: 0; font: 800 27.4px/1.18 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}
/* a card whose heading sits in a grey band (a name's page) */
.pd .pd-band {
  --w: 84%;
  margin: 0; padding: 12.7px 20px 10.3px; background: var(--thead); border-bottom: 1px solid var(--line);
  font: 720 25.5px/1.18 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}
.pd-card-body { padding: 8.2px 20px 14.8px; }

/* tables: a grey heading band, hairlines, a faint stripe */
.pd table.pd-table, .pd table.droplist, .pd table.obs {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); font-size: 22.5px;
}
.pd table.pd-table th, .pd table.droplist th, .pd table.obs th {
  padding: 12.8px 18px 11.5px; text-align: left; background: var(--thead);
  font: 750 22.8px/1.1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pd table.pd-table td, .pd table.droplist td, .pd table.obs td {
  padding: 12px 18px 11px; font-size: 22.5px; font-weight: 450; line-height: 1.29; color: var(--heading); border-top: 1px solid var(--line-soft);
  vertical-align: middle;
}
.pd table.pd-table th:first-child, .pd table.pd-table td:first-child,
.pd table.droplist th:first-child, .pd table.droplist td:first-child { padding-left: 33.5px; }
.pd table.pd-table th:last-child, .pd table.pd-table td:last-child,
.pd table.droplist th:last-child, .pd table.droplist td:last-child { padding-right: 35px; }
.pd table.pd-table tbody tr:first-child td, .pd table.droplist tbody tr:first-child td, .pd table.obs tbody tr:first-child td { border-top: 0; }
.pd table.pd-table tbody tr:nth-child(even) td, .pd table.droplist tbody tr:nth-child(even) td { background: var(--zebra); }
.pd table.pd-table tbody tr:hover td, .pd table.droplist tbody tr:hover td { background: var(--tint); }
.pd table.pd-table th.r, .pd table.pd-table td.r, .pd table.droplist th.r, .pd table.droplist td.r, .pd table.obs th.r, .pd table.obs td.r { text-align: right; }
/* the name: what the row is about */
.pd table.pd-table td.n a, .pd table.droplist td.n a, .pd .drops-table td.n a, .pd .drops-table td.mono a {
  font: 450 22.5px/1.29 var(--sans); color: var(--heading); text-decoration: none; border: 0;
}
.pd table.pd-table td.n a:hover, .pd table.droplist td.n a:hover, .pd .drops-table td.n a:hover, .pd .drops-table td.mono a:hover { color: var(--blue); text-decoration: underline; }
/* T-minus: the countdown, in the counting face */
.pd table td.c, .pd td.c { font: 430 21.5px/1.3 var(--mono); color: var(--heading); white-space: nowrap; }
.pd table td.c.now, .pd td.c.now { font: 450 21px/1.3 var(--sans); }     /* the count is over: words ("releasing now"), in the text face */
.pd td.t { white-space: nowrap; }
/* the row's button */
.pd-act {
  --w: 94%;
  display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 33px; padding: 0 14px;
  font: 700 20.5px/1 var(--sans); color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--blue); border-radius: 5px;
}
.pd a.pd-act, .pd table a.pd-act, .pd .drops-table a.pd-act { color: #fff; }   /* white on the blue, whatever the table makes of its other links */
.pd-act:hover { background: var(--blue-hover); }

/* buttons */
.pd .btn-fill, .pd .btn-primary {
  --w: 92%;
  font: 600 22px/1 var(--sans); letter-spacing: 0; text-transform: none;
  color: #fff; background: var(--blue); border: 1px solid var(--blue); border-radius: 8px;
}
.pd a.btn-fill { color: #fff; }
.pd .btn-fill:hover, .pd .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.pd .btn-fill { padding: 13px 24px; }
.pd .btn-primary { height: 56px; padding: 0 30px; }
.pd .btn-outline {
  --w: 96%;
  font: 500 20px/1 var(--sans); color: var(--heading); background: var(--panel);
  border: 1.5px solid #111; border-radius: 10px; padding: 11px 20px;
}
.pd .btn-outline:hover { background: var(--panel); color: var(--blue); border-color: var(--blue); }
.pd .btn-small {
  font: 700 20px/1 var(--sans); padding: 9px 16px; color: #fff; background: var(--blue);
  border: 1px solid var(--blue); border-radius: 6px;
}
.pd .btn-small:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
/* the mockup's white button with a black line round it (a name's page, the pages of a list) */
.pd .pd-obtn {
  --w: 96%;
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 40px; padding: 0 14px;
  font: 500 19.7px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); text-decoration: none; white-space: nowrap;
  background: var(--panel); border: 1.5px solid #111; border-radius: 10px; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.pd a.pd-obtn { color: var(--heading); }
.pd .pd-obtn:hover { color: var(--blue); border-color: var(--blue); }
.pd .pd-obtn .pd-i { height: 17px; }

/* small labels on a value */
.pd .pill { --w: 92%; font: 700 17px/1 var(--sans); letter-spacing: .02em; padding: 6px 10px; border-radius: 6px; }
.pd .chip { font: 500 20px/1 var(--mono); color: var(--heading); background: var(--zebra); border-color: var(--line); border-radius: 7px; padding: 8px 12px; }
.pd .chip-ns { font-weight: 400; color: var(--dropped); background: var(--dropped-bg); border-color: color-mix(in srgb, var(--dropped) 30%, transparent); }

/* -------------------------------------------------------------- home ---- */
.pd main { padding: 40.4px var(--gutter) 0; justify-content: flex-start; flex: 0 0 auto; }
.pd .hero { max-width: min(883px, 100%); gap: 0; }
.pd .hero h1 {
  --w: 100%;
  font: 800 50.6px/1.16 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}

/* the search: one box, the field and its button inside the blue line */
.pd .search {
  margin-top: 18.7px; gap: 8px; padding: 5.7px 7.2px 5.7px 5.7px; align-items: stretch;
  background: var(--panel); border: 7px solid var(--blue); border-radius: 16px;
  box-shadow: 0 3px 12px rgba(0, 103, 193, .16);
}
.pd .search:focus-within { box-shadow: 0 3px 14px rgba(0, 103, 193, .26); }
.pd .search input {
  --w: 100%;
  height: 50.9px; padding: 0 12px 0 11.5px; font: 400 22px/1 var(--sans); color: var(--heading);
  background: transparent; border: 0; border-radius: 8px; box-shadow: none;
}
.pd .search input::placeholder { font-family: var(--sans); color: #6B6B6B; opacity: 1; }
.pd .search input:focus { border: 0; box-shadow: none; outline: none; }
.pd .search button {
  --w: 98%;
  min-width: 196px; height: 50.9px; padding: 0 24px; font: 550 21.6px/1 var(--sans); letter-spacing: 0; text-transform: uppercase;
  color: #fff; background: var(--orange); border: 0; border-radius: 9px;
  box-shadow: 0 2px 7px rgba(247, 107, 38, .32);
}
.pd .search button:hover { background: var(--orange-hover); }
.pd .hint { min-height: 0; margin: 10px 0 0; font-size: 20.5px; color: var(--faint); text-align: left; padding-left: 6px; }
.pd .hint:empty { display: none; }
.pd .hint.error { color: var(--pending); font-weight: 600; }

/* dropping next: the card with the table, then three ways in */
.pd .next-drops { border: 0; background: none; }
.pd .next-drops-inner { max-width: min(calc(var(--measure) + 2 * var(--gutter)), 100%); padding: 42.6px var(--gutter) 0; }
.pd .next-drops .sec-head { margin: 0; }
.pd .sec-link { font: 500 22px/1.2 var(--sans); color: var(--blue); text-decoration: none; }
.pd .sec-link:hover { text-decoration: underline; }
.pd .sec-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 30px; }      /* 56: Advanced Search, then the day's link */
.pd .ip-meta .adv-link { white-space: nowrap; }
.pd .pd-filter-more { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font: 600 19px/1.3 var(--sans); }
.pd .pd-filter-more a { color: var(--blue); text-decoration: none; }
.pd .pd-filter-more a:hover { text-decoration: underline; }
.pd .next-drops .drops-table { border: 0; border-radius: 0; table-layout: fixed; }
/* the columns beside the name, each as wide as what it holds (the name takes the rest; under 1000 px of window
   the narrower ones go, further down). Rank and Linking Domains are a name's two link figures (deploy 44). */
.pd .next-drops .drops-table th.t, .pd .next-drops .drops-table td.t { width: 226px; }      /* "Wed 12:00 PM est.", in the widest of the Look and feel fonts too */
.pd .next-drops .drops-table th.c, .pd .next-drops .drops-table td.c { width: 166px; }
.pd .next-drops .drops-table th.rk, .pd .next-drops .drops-table td.rk { width: 146px; }
.pd .next-drops .drops-table th.ld, .pd .next-drops .drops-table td.ld { width: 204px; }
.pd .next-drops .drops-table th.len, .pd .next-drops .drops-table td.len { width: 110px; }
.pd .next-drops .drops-table th.act, .pd .next-drops .drops-table td.act { width: 150px; text-align: right; }
.pd table td.act { padding-top: 9px; padding-bottom: 9px; }
.pd .next-drops .drops-table td.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .next-drops-inner > .doors:first-child { margin-top: 0; }
.pd .doors { gap: 24px; margin-top: 24px; }
.pd .door { padding: 22px 35px 24px; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pd .door b { --w: 98%; font: 800 25.5px/1.2 var(--sans); text-transform: uppercase; color: var(--heading); }
.pd .door span { font-size: 21.5px; line-height: 1.4; color: var(--ink); }
.pd .door:hover { border-color: var(--blue); }
.pd .door:hover b { color: var(--blue); }

/* what the site does, in a sentence and four numbers */
.pd-facts-inner { max-width: min(calc(var(--measure) + 2 * var(--gutter)), 100%); margin: 0 auto; padding: 46px var(--gutter) 64px; }
.pd-facts + .pd-extra .pd-facts-inner, .next-drops + .pd-extra .pd-facts-inner { padding-top: 0; margin-top: -30px; }
/* Since 47 the sentence and the numbers sit right under the search box and "Dropping next" comes after them (his
   picture of 7 Oct: the sentence 35 px under the box, the card 41 px under the numbers). The two rules are written
   for that order of the page's sections, so a page from 46 that a cache still holds keeps the spacing it had. */
.pd main + .pd-facts .pd-facts-inner { padding-top: 35px; padding-bottom: 0; }
.pd .pd-facts + .next-drops .next-drops-inner { padding-top: 41px; padding-bottom: 64px; }
.pd .standfirst { margin: 0 auto; max-width: 1040px; font-size: 23px; line-height: 1.5; color: var(--ink); text-align: center; text-wrap: balance; }
.pd .stats { margin: 26px 0 0; gap: 24px; }
.pd .stats li { flex: 1 1 220px; max-width: none; }
.pd .stats a, .pd .stats div { padding: 24px 16px 22px; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pd .stats a:hover { border-color: var(--blue); }
.pd .stats b { --w: 98%; font: 800 40px/1 var(--sans); letter-spacing: 0; color: var(--heading); }
.pd .stats span { font-size: 20.5px; line-height: 1.3; color: var(--faint); }
.pd .trust { margin: 22px 0 0; font-size: 21.5px; color: var(--muted); gap: 10px 34px; }
.pd .trust li::before { width: 10px; height: 10px; }

/* a block of questions and answers under a page (what's my IP) */
.pd .legend { border: 0; background: none; }
.pd .legend-inner { max-width: min(calc(var(--measure) + 2 * var(--gutter)), 100%); padding: 46px var(--gutter) 64px; gap: 18px; }

/* ------------------------------------------------------- inner pages ---- */
.pd .page-main { padding: 32px var(--gutter) 70px; }
/* the archive (69), blank until the first day's picks: its empty middle takes the window's height, so the footer sits at the foot */
.pd .archive-main { flex: 1 0 auto; }
/* 92: the Daily 10 Traffic Picks' archive: the heading at the top, one card a day in the homepage's own card and
   table, the two page buttons at the foot. Nothing of the homepage's table changes. */
.pd .archive-main.has-picks { padding: 32px 0 0; }
.pd .archive-head, .pd .archive-nav { box-sizing: border-box; width: 100%; max-width: min(calc(var(--measure) + 2 * var(--gutter)), 100%); margin: 0 auto; padding: 0 var(--gutter); }
.pd .archive-day { width: 100%; }
.pd .archive-head .ip-head { margin-bottom: 0; }
.pd .archive-intro { margin: 10px 0 0; }
.pd .archive-day .next-drops-inner { padding-top: 32px; padding-bottom: 0; }
.pd .archive-day .pd-card-head .eyebrow a { color: inherit; text-decoration: none; }
.pd .archive-day .pd-card-head .eyebrow a:hover { text-decoration: underline; }
.pd .archive-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; margin-bottom: 70px; }
.pd .archive-nav .pd-obtn { width: auto; display: inline-flex; font-size: 20px; }
.pd .page, .pd .page-wide, .pd .page-full, .pd .drops { max-width: min(var(--measure), 100%); }
.pd .page:not(.page-wide):not(.page-full) { max-width: min(1000px, 100%); }
/* the page's name: black capitals, the note beside it */
.pd .ip-head { align-items: flex-end; gap: 8px 30px; margin-bottom: 24px; }
.pd .ip-title, .pd .page h1 {
  --w: 95%;
  margin: 0; font: 800 39.25px/1.14 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}
.pd .ip-title .mono { font-family: var(--sans); font-weight: 800; font-size: inherit; }
.pd .ip-meta { font-size: 22px; line-height: 1.4; color: var(--ink); padding-bottom: 3px; }
.pd .ip-meta a, .pd .dl-bar a, .pd .drops-sub a { color: var(--blue); font-weight: 450; text-decoration: none; }
.pd .ip-meta a:hover, .pd .dl-bar a:hover, .pd .drops-sub a:hover { text-decoration: underline; }
.pd .ip-foot { margin: 20px 0 0; font-size: 21.5px; line-height: 1.55; color: var(--muted); }
.pd .page .ip-foot a { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
.pd .drops-sub { margin: 0 0 16px; font-size: 22px; line-height: 1.5; color: var(--ink); }
.pd .drops-sub b { font-weight: 700; }
.pd .drops-sub.download { margin: 20px 0 0; }
.pd .drops-sec { margin: 0 0 40px; }
.pd .drops-sec .eyebrow { margin: 0 0 12px; }
.pd .drops-empty {
  margin: 0; padding: 24px 28px; font-size: 22px; line-height: 1.5; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pd .drops-empty em { font-family: var(--mono); font-size: .92em; }

/* a list and its filters: the list, and a panel to its right */
.pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 0 24px; align-items: start; }
.pd-cols-one { grid-template-columns: minmax(0, 1fr); }
.pd-main { min-width: 0; grid-column: 1; grid-row: 1; }
.pd-side { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }

/* the filter panel: pale blue, narrow letters, a heading, a list of choices under each kind */
.pd-filters {
  --w: 75%;
  padding: 19px 18px 12px; background: var(--filter); border: 1px solid #B9D1E8; border-radius: 16px;
}
.pd-filters-head { margin: 0 0 6px; }
.pd .pd-filters .pd-filters-title { margin: 0; font: 720 24px/1.2 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading); }
.pd-filters-on { font-weight: 400; text-transform: none; color: #0057A8; }
.pd .pd-filters a.pd-filters-clear { display: inline-block; margin-top: 8px; font: 650 21px/1.2 var(--sans); color: #0057A8; text-decoration: underline; text-underline-offset: 3px; border: 0; }
.pd-filter { margin: 0; padding: 14px 0 12px; border-top: 1px solid #A9C4DE; }
.pd-filters-head + .pd-filter { margin-top: 14px; }
.pd .pd-filters .pd-filter h3 { margin: 0 0 8px; font: 720 19.6px/1.2 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading); }
.pd .pd-filter h3 label { font: inherit; color: inherit; }
/* a choice: a box, the word, how many */
.pd-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px 12px; }
.pd-opts li { min-width: 0; }
.pd-opts li[hidden] { display: none; }
.pd .pd-opts a, .pd .pd-opts .off {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; margin: 0 -6px;
  font: 420 20.4px/1.2 var(--sans); color: var(--heading); text-decoration: none; border: 0; border-radius: 7px;
}
.pd .pd-opts a::before, .pd .pd-opts .off::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: #fff; border: 2px solid #7B8CA0; border-radius: 5px;
}
.pd .pd-opts a > span, .pd .pd-opts .off > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .pd-opts a b, .pd .pd-opts .off b { --w: 88%; margin-left: auto; font: 450 19px/1 var(--sans); font-variant-numeric: tabular-nums; color: #4A5563; }
.pd .pd-opts a:hover { background: rgba(255, 255, 255, .7); }
.pd .pd-opts a:hover::before { border-color: var(--blue); }
.pd .pd-opts a.on { font-weight: 650; }
.pd .pd-opts a.on::before {
  border-color: var(--blue);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
/* a choice that can't be chosen, the rest of a long list, and the search inside the panel */
.pd .pd-opts .off { color: #5A6573; }
.pd .pd-opts .off::before { background: #E9F0F7; border-color: #AEBCCB; }
.pd .pd-opts-more {
  margin: 8px 0 2px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 650 20.4px/1.2 var(--sans); color: #0057A8; text-decoration: underline; text-underline-offset: 3px;
}
.pd-filters-toggle { display: none; }
.pd .syl-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; align-items: center; }
.pd .syl-search input[type=search] {
  flex: 1 1 100%; min-width: 0; max-width: none; box-sizing: border-box; height: 48px; padding: 0 14px; font: 420 21px/1.2 var(--sans); color: var(--heading);
  background: #fff; border: 2px solid #7B8CA0; border-radius: 8px;
}
.pd .syl-search input[type=search]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 103, 193, .16); }
.pd .syl-search .btn-outline { padding: 11px 20px; font-size: 20.4px; }
.pd .syl-clear { font-size: 20.4px; color: #0057A8; }

/* the bigger choices (a day of releases): a label over its number */
.pd .day-strip { gap: 10px; margin: 0 0 24px; padding: 0 0 2px; }
.pd .day-strip .day { min-width: 104px; padding: 13px 10px 12px; gap: 5px; border: 1.5px solid #B9C6D4; border-radius: 10px; background: var(--panel); color: var(--heading); }
.pd .day-strip .day-l { font: 500 19.5px/1 var(--sans); letter-spacing: 0; color: var(--ink); }
.pd .day-strip .day-n { font: 800 27px/1.1 var(--sans); color: var(--heading); }
.pd .day-strip .day:hover { border-color: var(--blue); }
.pd .day-strip .day.on { background: var(--blue); border-color: var(--blue); box-shadow: none; }
.pd .day-strip .day.on .day-l, .pd .day-strip .day.on .day-n, .pd .day-strip .day.today.on .day-l { color: #fff; }
.pd .day-strip .day.today .day-l { color: var(--blue); font-weight: 700; }
.pd .day-strip .day.off { opacity: .5; }
.pd .day-strip .day-arrow { padding: 0 18px; font-size: 30px; border: 1.5px solid #B9C6D4; border-radius: 10px; background: var(--panel); color: var(--heading); }

/* the list itself: the count line, the table, the pages */
.pd-list .dl-bar { margin: 0; padding: 19px 23px 18px; }
.pd .dl-bar { font-size: 21.5px; line-height: 1.35; color: var(--ink); gap: 6px 24px; margin: 0 0 12px; }
.pd table.droplist { border: 0; border-radius: 0; margin: 0; table-layout: fixed; }
.pd table.droplist th a { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; border: 0; }
.pd .page table.droplist th a, .pd .page table.droplist th.on a { color: var(--heading); }
.pd .page table.droplist th a:hover { color: var(--blue); }
.pd table.droplist td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd table.droplist td:nth-child(even), .pd table.droplist th:nth-child(even) { box-shadow: none; }
/* The columns beside the name. The list is 1040 px wide beside its filter panel: the name and four columns.
   Since deploy 44 two of them are a name's link figures (lib/links.php): its rank, and how many domains link
   to it. Their headings may run to two lines, so each column is as narrow as its figures and the name keeps
   its room. */
.pd table.droplist th.t, .pd table.droplist td.t { width: 178px; }      /* "Tomorrow est.", in the widest of the Look and feel fonts too (82; 270 px when it read "Wed Oct 28, 12:00 PM est.") */
.pd table.droplist th.c, .pd table.droplist td.c { width: 166px; }
.pd table.droplist th.rk, .pd table.droplist td.rk { width: 148px; }      /* "top 0.042%" */
.pd table.droplist th.ld, .pd table.droplist td.ld { width: 164px; }      /* "1,234,567", and "Domains" with its sort arrows */
.pd table.droplist th.rk, .pd table.droplist th.ld { white-space: normal; }
/* A date, a countdown and a rank may run to their cell's own edge before they are cut: the next cell's padding
   is gap enough. That is the room the longest date with "est." after it needs, and the room a rank such as
   "top 0.004%" needs in the widest of the Look and feel fonts. */
.pd table.droplist td.t, .pd table.droplist td.c, .pd table.droplist td.rk { padding-right: 0; }
.pd table.droplist td.st { overflow: visible; }
/* the two small arrows on a heading you can sort by; the one in use is blue */
.pd-sort { position: relative; display: inline-block; width: 12px; height: 19px; flex: 0 0 auto; }
.pd-sort::before, .pd-sort::after { content: ""; position: absolute; left: 0; border: 6px solid transparent; }
.pd-sort::before { top: -4px; border-bottom: 7px solid #9AA1AB; }
.pd-sort::after { bottom: -4px; border-top: 7px solid #9AA1AB; }
.pd-sort.asc::before { border-bottom-color: var(--blue); }
.pd-sort.desc::after { border-top-color: var(--blue); }
/* the page buttons under a list (54, his picture of 9 Oct): [< Previous] [1] … [4] [5] [6] … [20] [Next >], outlined
   boxes in a centred row (lib/view.php pager_html); the page shown is the blue one and is not a link */
.pd .dl-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 0; padding: 18px 23px;
                font-size: 22px; color: var(--ink); border-top: 1px solid var(--line); }
.pd .dl-pages a, .pd .dl-pages .pg-cur {
  --w: 96%;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 46px; height: 46px; padding: 0 13px;
  font: 450 22px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--heading); text-decoration: none;
  background: var(--panel); border: 1.5px solid #4A4A4F; border-radius: 8px;
}
.pd .dl-pages a:hover, .pd .page .dl-pages a:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.pd .dl-pages .pg-cur { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 650; }
.pd .dl-pages .pg-gap { min-width: 24px; text-align: center; color: var(--muted); }
.pd .dl-pages .pg-of { display: none; }
/* the columns of the syllable names and the short names */
.pd table.droplist.syl td.n { white-space: normal; }
.pd table.droplist.syl td.n a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .syl-words { display: block; margin: 2px 0 0; font: 400 18.5px/1.2 var(--sans); letter-spacing: 0; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .syl-intro { max-width: 1000px; margin: -6px 0 22px; font-size: 22px; line-height: 1.5; color: var(--ink); }
/* the syllable names: the stage is in what the date says; the word itself is for a phone, where a row has room for it */
.pd table.droplist.syl th.st, .pd table.droplist.syl td.st { display: none; }
.pd table.droplist.short th.st, .pd table.droplist.short td.st { width: 234px; }      /* "Pending Delete" with its icon (82: the tables' short words; 262 px for "Redemption Period") */
.pd table.droplist.short th.t, .pd table.droplist.short td.t { width: 234px; }      /* the day and its confidence: "Tomorrow medium" (82; 290 px with the hour) */
.pd table.droplist.syl th.t, .pd table.droplist.syl td.t { width: 230px; }      /* "released Yesterday" (82) */
/* a name's stage, as a word on a colour (the site's own status colours) */
.pd .pill.dropped    { background: var(--dropped-bg); color: var(--dropped); }
.pd .pill.pending    { background: #FFF1D6; color: #7A5200; }
.pd .pill.redemption { background: var(--redemption-bg); color: #9A4A00; }
.pd .pill.registered { background: #FDECEC; color: #B42B2B; }
.pd .pill.neutral    { background: var(--line-soft); color: var(--muted); }

/* a list inside a box that scrolls (dropping today, a name's history) */
.pd .history-scroll { max-height: 330px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.pd .history-scroll.tall { max-height: 760px; }
.pd table.obs th { position: sticky; top: 0; z-index: 1; border-top: 0; }
.pd table.obs.drops-table { border: 0; border-radius: 0; }
.pd table.obs th:nth-child(1), .pd table.obs td:nth-child(1) { width: 270px; padding-left: 23px; }
.pd table.obs th:nth-child(2), .pd table.obs td:nth-child(2) { width: 420px; }
.pd table.obs.drops-table th:nth-child(1), .pd table.obs.drops-table td:nth-child(1),
.pd table.obs.drops-table th:nth-child(2), .pd table.obs.drops-table td:nth-child(2),
.pd table.obs.ns-hist th:nth-child(1), .pd table.obs.ns-hist td:nth-child(1),
.pd table.obs.ns-hist th:nth-child(2), .pd table.obs.ns-hist td:nth-child(2) { width: auto; }
.pd .drops-table td.ellip { max-width: 380px; }
/* dropping today's table, six columns since deploy 44: the two link figures as narrow as on the lists (the
   heading "Linking Domains" on two lines), so the registrar keeps the room for its longest names */
.pd table.pd-today th.rk, .pd table.pd-today td.rk { width: 146px; white-space: nowrap; }
.pd table.pd-today th.ld, .pd table.pd-today td.ld { width: 150px; }
.pd table.pd-today th.ld { white-space: normal; }
@media (min-width: 900px) { .pd .drops-table.pd-today td.ellip { max-width: 470px; } }      /* under 900 px the table is the four columns it was */
.pd .drops-table a { color: var(--heading); }
.pd .drops-table .mini { font: 700 18.5px/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 8px 14px; color: #fff; background: var(--blue); border: 0; border-radius: 5px; }
.pd .name-grid { font: 450 21.5px/2 var(--sans); column-width: 300px; column-gap: 28px; }
.pd .name-grid a { color: var(--heading); }
.pd .name-grid a:hover { color: var(--blue); text-decoration: underline; }
.pd .more-btn { font: 600 21.5px/1 var(--sans); color: var(--blue); background: var(--zebra); border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 19px; }
.pd .more-btn:hover { background: var(--tint); }

/* ------------------------------------------------------ a name's page ---- */
/* The mockup's WHOIS record page, to the pixel: the lookup box; the name and
   its status; then three columns — the registrar, the dates and the name
   servers (422 wide); the registry's record as text; and on the right (317)
   when it drops, the registry status and the way to the history. The record
   is exactly as tall as the columns beside it and scrolls inside.
   Since deploy 45 (his picture of 7 Oct) the five stops of the lifecycle are
   a card of the page's full width right under the lookup box, above the name:
   a page that has it (.has-life) starts its columns one row further down. */

/* the lookup box on top, with the name in it: the field, and a blue button that fills its right end */
.pd-lookup { padding: 26px var(--gutter) 0; }
.pd .pd-lookup .search {
  max-width: min(800.5px, 100%); margin: 0 auto; padding: 4.25px 4.9px 4.25px 4.25px; gap: 6px; border-width: 7px; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 103, 193, .12);
}
.pd .pd-lookup .search input { --w: 96%; height: 47px; padding: 0 11px; font-size: 24.2px; font-weight: 420; }
.pd .pd-lookup .search button {
  --w: 93%;
  min-width: 192px; height: 47px; padding: 0 22px; font: 600 22px/1 var(--sans); text-transform: none;
  background: var(--blue); border-radius: 7px; box-shadow: none;
}
.pd .pd-lookup .search button:hover { background: var(--blue-hover); }

.pd .result-main { padding: 26px var(--gutter) 70px; }
.pd .result {
  max-width: min(var(--narrow), 100%); display: grid; grid-template-columns: 422px minmax(0, 1fr) 317px; grid-template-rows: auto 1fr;
  gap: 17px 18px; align-items: start;
}
.pd-r-title { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.pd .result.has-cards .pd-r-title { grid-column: 1 / 3; }
.pd-r-left { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.pd-r-rec { grid-column: 2; grid-row: 2; align-self: stretch; position: relative; min-width: 0; min-height: 430px; }
.pd-r-right { grid-column: 3; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.pd-r-left > :last-child, .pd-r-right > :last-child { flex: 1 0 auto; }      /* the three columns end on one line */
.pd-r-below, .pd .result > .wm-extra { grid-column: 1 / -1; min-width: 0; }
/* the lifecycle on top: one more row, and everything else a row down */
.pd .result.has-life { grid-template-rows: auto auto 1fr; }
.pd-r-life { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.pd .result.has-life .pd-r-title { grid-row: 2; }
.pd .result.has-life .pd-r-left, .pd .result.has-life .pd-r-rec { grid-row: 3; }
.pd .result.has-life .pd-r-right { grid-row: 2 / 4; }

/* the name, and under it what state it is in */
.pd-r-title { padding: 17.3px 20px 17.3px; }
.pd .head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 9.5px; }
.pd .pd-kicker, .pd .domain {
  --w: 95%;
  margin: 0; flex: 0 1 auto; font: 800 39.25px/1.15 var(--sans); letter-spacing: 0; color: var(--heading);
}
.pd .domain { word-break: break-all; min-width: 0; }
.pd .pd-status { --w: 92%; margin: 6px 0 0; font-size: 22.5px; line-height: 1.4; color: var(--heading); }
.pd .pd-status .badge {
  display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 450 22.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lc-ink, var(--muted));
}
/* since 54 (his picture of 9 Oct): the state's icon before the word, in the state's bright colour, the word in its
   darker one; Title Case ("Pending Delete"), except "…not tracked", which keeps its extension as it is */
.pd .pd-status .badge .pd-i { height: .95em; margin-right: .3em; color: var(--lc, var(--muted)); }
.pd .pd-status .badge:not(.asis) .pd-st-w { text-transform: capitalize; }
/* the name's two link figures and where they are from (deploy 44), a line under its status */
.pd .pd-links { --w: 92%; margin: 2px 0 0; font-size: 22.5px; line-height: 1.4; color: var(--heading); }
.pd .pd-links-src, .pd .pd-links-src a { color: var(--faint); }
.pd .pd-links-src a { text-decoration: underline; text-underline-offset: 3px; }
.pd .pd-links-src a:hover { color: var(--blue); }
.pd .blurb { margin: 0; font-size: 22px; line-height: 1.45; color: var(--ink); max-width: none; }
.pd .pd-r-title p.blurb { margin-top: 6px; }
.pd .blurb code { font-size: .92em; color: var(--heading); background: var(--zebra); padding: 2px 6px; border-radius: 5px; }
.pd .wm-extra { margin: 10px 0 0; font-size: 22px; line-height: 1.5; color: var(--ink); max-width: none; }
.pd .hero .wm-extra { margin: 14px auto 0; font-size: 22px; color: var(--ink); }
.pd .page .wm-extra { margin: 0 0 18px; }
/* a name being looked up right now, or waiting on the bot check */
.pd .checking {
  margin-top: 16px; gap: 14px; padding: 16px 18px; font-size: 22px; line-height: 1.4; color: var(--heading);
  background: var(--tint); border: 1px solid #C6D9EE; border-radius: 10px; box-shadow: none;
}
.pd .checking-paused { border-left: 6px solid #D9A400; background: #FFF9E8; border-color: #EAD9A0; }
.pd .checking-person { border-left: 6px solid #B9C6D4; color: var(--ink); }
.pd .checking-human .hc-lead { font-weight: 700; }
.pd .spinner { width: 22px; height: 22px; border-width: 3px; }
.pd .hc-note { font-size: 19.5px; }
/* the bot check's popup */
.pd .bc-box { width: min(620px, 100%); padding: 36px 32px 20px; border-radius: 16px; }
.pd .bc-text { margin: 0 0 24px; font-size: 26px; font-weight: 800; line-height: 1.3; }
.pd .bc-close { margin-top: 16px; font-size: 20.5px; color: var(--faint); }
.pd .bc-slot altcha-widget { max-width: 400px; }

/* left: three cards, each a grey band and its lines */
.pd-r-left .pd-card { border-radius: 16px; }
.pd .pd-lines p { margin: 0 0 6.4px; font-size: 22px; line-height: 26.2px; color: var(--heading); overflow-wrap: anywhere; }
.pd .pd-lines p:last-child { margin-bottom: 0; }
.pd .pd-lines b, .pd .pd-confirmed b { --w: 84%; font-weight: 650; }
/* the three dates, each behind its picture: a calendar, an hourglass, two arrows */
.pd .pd-dates p { display: flex; align-items: flex-start; gap: 14px; padding-left: 2.5px; }
.pd .pd-dates .pd-i { width: 21.5px; height: 23px; margin-top: 1.3px; color: #000; vertical-align: 0; }
.pd .pd-dates .pd-i-clock { display: none; }          /* the phone's picture for "expires" (see the phone layout) */
.pd .record .eyebrow { margin: 0; }
.pd .chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 22px; }
.pd .pd-c-ns .pd-card-body { padding: 9.3px 20px 16.2px; }
.pd #f-ns.pd-ns { display: block; font-size: 22px; line-height: 23.7px; color: var(--heading); }
.pd #f-ns.pd-ns .chip {
  display: block; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal; overflow-wrap: anywhere;
  font: 450 22px/23.7px var(--sans); color: var(--heading);
}

/* middle: the registry's record, as text, in a box that scrolls both ways */
.pd-r-rec { background: var(--record); border-radius: 15px; }
.pd .pd-record {
  position: absolute; inset: 0; margin: 0; padding: 16.5px 18.5px 14px; overflow: scroll;
  font: 450 22px/23.55px var(--sans); color: var(--heading); white-space: pre; tab-size: 4;
  background: none; border: 0; border-radius: 0;
}
.pd .pd-record:focus-visible { outline-offset: -4px; }
.pd .pd-record::-webkit-scrollbar { width: 17px; height: 17px; }
.pd .pd-record::-webkit-scrollbar-track:vertical { border-left: 1px solid #E1E2E3; }
.pd .pd-record::-webkit-scrollbar-track:horizontal { border-top: 1px solid #E1E2E3; }
.pd .pd-record::-webkit-scrollbar-thumb { background: #C3C3C5; background-clip: padding-box; border: 4.5px solid transparent; border-radius: 9px; }
.pd .pd-record::-webkit-scrollbar-thumb:hover { background-color: #A9A9AC; }
.pd .pd-record::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .pd .pd-record { scrollbar-width: thin; scrollbar-color: #C3C3C5 transparent; }
}

/* right: white cards with a black heading, and the mockup's buttons */
.pd .pd-tool { padding: 16px 20px 18px; }
.pd .pd-tool-t {
  --w: 86%;
  margin: 0 0 13px; font: 750 25px/1.18 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading);
}
/* when it drops: the time, the countdown, and what that means */
.pd .drop-when { margin: 0; font: 700 22px/1.3 var(--sans); color: var(--heading); }
.pd .drop-when .faint { font-weight: 450; }
.pd .countdown { margin: 4px 0 0; font: 500 29px/1.2 var(--mono); letter-spacing: -.01em; color: var(--lc-ink, var(--pending)); white-space: nowrap; }
.pd .countdown.opened { font: 700 22px/1.3 var(--sans); letter-spacing: 0; white-space: normal; }   /* the count is over: a sentence, which may take two lines */
.pd .confidence, .pd .cta .cta-text p { margin: 8px 0 0; font-size: 19.5px; line-height: 1.42; color: var(--ink); max-width: none; }
.pd .confidence.conf-high { color: var(--dropped); }
.pd .confidence.conf-low, .pd .confidence.conf-none { color: var(--pending); }
/* the registry's own words for the name's state, when that was last confirmed, and the button that asks again */
.pd #f-status.chips { display: block; font-size: 21px; line-height: 1.3; color: var(--heading); }
.pd #f-status .chip {
  display: block; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal;
  font: 450 21px/1.3 var(--sans); color: var(--heading);
}
.pd .pd-confirmed { margin: 10px 0 13px; font-size: 19.5px; line-height: 1.35; color: var(--heading); }
.pd .pd-confirmed .faint { font-size: 17.5px; }
.pd .refresh-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 100%; }
.pd .refresh.pd-obtn { width: 100%; height: 40px; color: var(--heading); border: 1.5px solid #111; border-radius: 10px; }
.pd .refresh.pd-obtn:hover { color: var(--blue); border-color: var(--blue); }
.pd .refresh svg { width: 17px; height: 17px; }
.pd .refresh-cap { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.pd .refresh-note { min-height: 0; width: auto; text-align: center; font: 500 19px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--pending); }
.pd .refresh-note:empty { display: none; }
/* the way to the history underneath, and the record as a file */
.pd-r-more { display: flex; flex-direction: column; gap: 13px; }
.pd .pd-r-more .pd-tool-t { margin-bottom: 0; }
.pd .pd-save { width: auto; align-self: flex-start; margin-top: auto; padding: 0 15px; }
/* want it? */
.pd .cta { display: block; background: var(--panel); }
.pd .cta .cta-text p:first-child { margin-top: 0; }
.pd .cta-actions { display: grid; gap: 10px; margin-top: 13px; }
.pd .cta .pd-obtn.btn-fill { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 600; }
.pd .cta .pd-obtn.btn-fill:hover { color: #fff; background: var(--blue-hover); border-color: var(--blue-hover); }
.pd .cta .pd-obtn { padding: 0 14px; font-size: 19.7px; }

/* underneath: what was seen and when */
.pd-r-below { display: grid; grid-template-columns: minmax(0, 1fr) 317px; gap: 17px 18px; align-items: start; margin-top: 6px; scroll-margin-top: 16px; }
.pd-r-below.no-zone, .pd-r-below.no-obs { grid-template-columns: minmax(0, 1fr); }
/* on top: where the name is on its way out, and (when it has one) the state's sentence under the stops */
.pd .pd-r-life .lifecycle { padding: 30px 16px 26px; border: 0; border-radius: 0; box-shadow: none; background: none; }
.pd .pd-r-life .blurb { margin: 0; padding: 16px 20px 18px; border-top: 1px solid var(--line-soft); text-align: center; color: var(--heading); }
.pd .step + .step::before { top: 14px; height: 3px; }
.pd .step.done + .step::before, .pd .step.done + .step.now::before { background: var(--muted); }
.pd .step-dot { width: 30px; height: 30px; border-width: 3px; }
.pd .step-dot svg { width: 17px; height: 17px; }
.pd .step-l { margin-top: 13px; font: 700 22px/1.2 var(--sans); }
.pd .step-s { margin-top: 4px; font: 450 19.5px/1.25 var(--sans); }
/* what the registry said each time it was asked */
.pd .history .history-scroll, .pd .ns-block .history-scroll { max-height: 380px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.pd .history table.obs th, .pd .history table.obs td, .pd .ns-block table.obs th, .pd .ns-block table.obs td { font-size: 20.5px; padding: 11px 12px 10px; }
.pd .history table.obs td { line-height: 1.35; vertical-align: top; }
.pd .history table.obs th:nth-child(1), .pd .history table.obs td:nth-child(1) { width: 210px; padding-left: 20px; white-space: nowrap; }
.pd .history table.obs th:nth-child(2), .pd .history table.obs td:nth-child(2) { width: 30%; }
.pd .history table.obs td.mono { font-family: var(--sans); font-size: 20.5px; }
/* the zone file: has the name been in it, and which nameservers it had before */
.pd .ns-block .ip-foot { margin: 0; padding: 14px 20px 18px; font-size: 19.5px; line-height: 1.45; border-top: 1px solid var(--line-soft); }
.pd .ns-block .pd-card-body .faint { color: var(--muted); }
/* the earlier nameservers, in a box this narrow: the table's first heading is the caption, and
   each row is the host with its two dates under it, each date behind its own column's heading
   (the words are the table's headings, so they follow the Wording page) */
.pd .ns-block table.obs.ns-hist, .pd .ns-block table.obs.ns-hist thead, .pd .ns-block table.obs.ns-hist tbody,
.pd .ns-block table.obs.ns-hist tr { display: block; }
.pd .ns-block table.obs.ns-hist thead tr { padding: 12px 20px 0; border-top: 1px solid var(--line-soft); }
.pd .ns-block table.obs.ns-hist thead th { display: none; }
.pd .ns-block table.obs.ns-hist thead th:first-child {
  display: block; position: static; width: auto; padding: 0; background: none; border: 0;
  font: 650 19.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading);
}
.pd .ns-block table.obs.ns-hist tbody tr { padding: 9px 20px 10px; border-top: 1px solid var(--line-soft); }
.pd .ns-block table.obs.ns-hist tbody tr:first-child { padding-top: 5px; border-top: 0; }
.pd .ns-block table.obs.ns-hist td { display: block; width: auto; padding: 0; border: 0; font-size: 19.5px; line-height: 1.35; white-space: normal; color: var(--muted); }
.pd .ns-block table.obs.ns-hist td:first-child { color: var(--heading); overflow-wrap: anywhere; }
.pd .ns-block table.obs.ns-hist td[data-l]::before { content: attr(data-l) " "; }
@media (prefers-reduced-motion: no-preference) { html.pd { scroll-behavior: smooth; } }

/* -------------------------------------------- reading pages and forms ---- */
/* About, How it works, API, Data, Privacy, Contact: the text in a white card */
.pd .page:not(.page-wide):not(.page-full) {
  padding: 38px 48px 44px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pd .page:not(.page-wide):not(.page-full) .ip-head { margin-bottom: 18px; }
.pd .page .eyebrow { --w: 92%; margin: 0 0 12px; font: 700 19.5px/1.2 var(--sans); letter-spacing: .04em; color: var(--blue); }
.pd .drops .eyebrow, .pd .page-wide .eyebrow, .pd .page-full .eyebrow { --w: 98%; font: 800 25.5px/1.2 var(--sans); letter-spacing: 0; color: var(--heading); }
.pd .page h1 { margin: 0 0 20px; }
.pd .page .ip-head h1 { margin: 0; }
.pd .page .lede, .pd .prose .lede { margin: 0 0 30px; font-size: 25px; line-height: 1.5; color: var(--heading); }
.pd .page h2, .pd .prose h2 { --w: 96%; margin: 40px 0 12px; font: 800 27.4px/1.25 var(--sans); letter-spacing: 0; color: var(--heading); }
.pd .prose h3 { --w: 94%; margin: 28px 0 10px; font: 750 23.5px/1.3 var(--sans); color: var(--heading); }
.pd .page p, .pd .prose p { margin: 0 0 18px; font-size: 22px; line-height: 1.6; color: var(--ink); }
.pd .page strong, .pd .page b { font-weight: 700; color: var(--heading); }
/* a link in running text is blue and underlined; the links that are buttons, pills or rows keep their own look */
.pd .page a { border-bottom: 0; }
.pd .page p a, .pd .page li a, .pd .prose a, .pd .page td:not(.n):not(.mono) > a:not([class]) {
  color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent); text-underline-offset: 3px;
}
.pd .page p a:hover, .pd .page li a:hover, .pd .prose a:hover { text-decoration-color: var(--blue); }
.pd .page .pd-opts a, .pd .page .dl-pages a, .pd .page a.pd-act, .pd .page a.btn-fill, .pd .page a.btn-outline { text-decoration: none; }
.pd .page .pd-opts a { color: var(--heading); }
.pd .page .dl-pages a { color: var(--heading); }
.pd .page a.pd-act, .pd .page a.btn-fill { color: #fff; }
.pd .prose ul, .pd .page ul { margin: 0 0 18px; padding-left: 28px; }
.pd .prose li, .pd .page li { margin: 0 0 9px; font-size: 22px; line-height: 1.55; color: var(--ink); }
.pd .page .pd-opts { margin: 0; padding: 0; }
.pd .page .pd-opts li { margin: 0; }
.pd .prose code, .pd .page code { font-family: var(--mono); font-size: .88em; background: var(--zebra); border: 1px solid var(--line-soft); padding: 2px 7px; border-radius: 5px; color: var(--heading); }
.pd .prose pre { margin: 0 0 18px; padding: 18px 20px; font: 400 19.5px/1.6 var(--mono); color: var(--heading); background: var(--zebra); border: 1px solid var(--line); border-radius: 10px; }
.pd .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.pd .prose table.obs { margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pd .prose table.obs th, .pd .prose table.obs td { font-size: 20.5px; padding: 12px 16px; line-height: 1.45; vertical-align: top; }
.pd .prose table.obs th:first-child, .pd .prose table.obs td:first-child { padding-left: 16px; }
.pd table.obs.cols { display: table; }          /* "cols" is also the admin's two-column grid: a table stays a table */
.pd table.obs.cols th:nth-child(1), .pd table.obs.cols td:nth-child(1) { width: 300px; }
.pd table.obs.cols th:nth-child(2), .pd table.obs.cols td:nth-child(2) { width: auto; }
.pd .ip-foot.faint, .pd .page .faint { color: var(--faint); }
/* how it works: the steps */
.pd .life { gap: 14px; margin: 0 0 26px; }
.pd .life-step { grid-template-columns: 170px 1fr; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; }
.pd .life-when { --w: 92%; font: 700 19.5px/1.4 var(--sans); letter-spacing: .01em; color: var(--blue); }
.pd .life-what { font-size: 21.5px; line-height: 1.55; color: var(--ink); }
/* a message after a form, or instead of one */
.pd .flash, .pd .notice { display: block; margin: 0 0 22px; padding: 18px 22px; font-size: 22px; line-height: 1.5; border-radius: 10px; border: 1px solid var(--line); background: var(--zebra); color: var(--heading); }
.pd .flash.ok { background: var(--dropped-bg); border-color: color-mix(in srgb, var(--dropped) 35%, transparent); color: #0B5C34; }
.pd .flash.err { background: #FDECEC; border-color: #F1B5B5; color: #8F1F1F; }
/* the contact form */
.pd .contact .prose { margin-bottom: 30px; }
.pd .contact-form { max-width: none; }
.pd .f-row { gap: 22px; }
.pd .f-field { margin-bottom: 22px; }
.pd .f-field label { --w: 92%; margin-bottom: 9px; font: 650 21.5px/1.2 var(--sans); color: var(--heading); }
.pd .f-field input, .pd .f-field textarea {
  padding: 14px 16px; font: 450 22px/1.45 var(--sans); color: var(--heading); background: var(--panel);
  border: 2px solid #9AA5B1; border-radius: 9px;
}
.pd .f-field textarea { min-height: 220px; }
.pd .f-field input:focus, .pd .f-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 103, 193, .16); }
.pd .f-field.bad input, .pd .f-field.bad textarea { border-color: var(--pending); }
.pd .f-err { margin: 8px 0 0; font-size: 19.5px; color: var(--pending); font-weight: 600; }
.pd .f-actions { gap: 24px; margin-top: 8px; }
.pd .f-actions .btn-primary { height: 58px; padding: 0 34px; }
.pd .page .f-actions .f-note { margin: 0; max-width: 52ch; font-size: 19.5px; line-height: 1.45; color: var(--faint); }
.pd .contact-again { margin-top: 22px; font-size: 22px; }
.pd .pd-back { margin: 18px 0 0; font-size: 22px; }

/* -------------------------------------------- the registries' pages ---- */
/* the extension finder on /tlds */
.pd .tld-filter { gap: 16px; margin: 0 0 22px; }
.pd .tld-filter input { flex: 0 1 520px; height: 54px; padding: 0 16px; font: 450 22px/1 var(--sans); color: var(--heading); background: var(--panel); border: 2px solid #9AA5B1; border-radius: 9px; }
.pd .tld-filter input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 103, 193, .16); }
.pd .tld-count { font-size: 20.5px; color: var(--muted); }
.pd .tld-ascii { font-size: 17.5px; margin-left: 6px; }
.pd .zone-summary .pill { margin-left: 8px; }
.pd .row-link { font-size: 19.5px; color: var(--blue); text-decoration: none; }
.pd .row-link:hover { text-decoration: underline; }
/* drop times: the sheet of registries */
.pd table.sheet { margin: 0 0 18px; font: 450 20.5px/1.4 var(--sans); color: var(--heading); border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.pd table.sheet th, .pd table.sheet td { padding: 12px 14px; border-right: 1px solid var(--line-soft); }
.pd table.sheet thead th { font: 750 19.5px/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); background: var(--thead); border-bottom: 1px solid var(--line); }
.pd table.sheet thead th:hover { background: #E2E4E8; }
.pd table.sheet thead th.sorted-asc::after, .pd table.sheet thead th.sorted-desc::after { font-size: 13px; color: var(--blue); opacity: 1; }
.pd table.sheet td.mono { font: 500 19px/1.4 var(--mono); color: var(--heading); }
.pd table.sheet tbody tr.dt-row.odd { background: var(--panel); }
.pd table.sheet tbody tr.dt-row.even { background: var(--zebra); }
.pd table.sheet tbody tr.dt-row td { border-top: 1px solid var(--line-soft); }
.pd table.sheet tbody tr.dt-row.has-note:hover, .pd table.sheet tbody tr.dt-row.open { background: var(--tint); }
.pd table.sheet .dt-caret { font-size: 15px; margin-left: 6px; }
.pd table.sheet tr.dt-note td { background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); padding: 16px 20px 16px 34px; }
.pd table.sheet tr.dt-note p { margin: 0 0 8px; font-size: 20.5px; line-height: 1.55; max-width: 110ch; }
.pd table.sheet tr.dt-note p:last-child { font-size: 19px; }
.pd .sheet-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--panel); margin: 0 0 18px; }
.pd .sheet-scroll table.sheet { margin: 0; border: 0; }
.pd .sheet-scroll table.obs { border: 0; }
.pd .dt-note { font-size: 20.5px; }

/* --------------------------------------------- IP pages, what's my IP ---- */
.pd .pd-lookup + .page-main { padding-top: 26px; }
.pd .pd-ip .pd-r-title { margin: 0 0 17px; }
.pd .pd-ip .pd-r-title .ip-head { margin-bottom: 0; }
.pd .pd-ip .pd-r-title .lede { margin: 12px 0 0; font-size: 23px; color: var(--ink); }
.pd .pd-ip .pd-r-title .checking { margin-top: 16px; }
.pd .pd-ip .ip-title { text-transform: none; }
.pd .pd-ip .ip-title .mono { font-family: var(--sans); }
/* The note under the IP record. It drew at 22px (a page's paragraph size); 88 halved it at his word, and 89 (his word
   of 12 Oct: "too small make it somewhere in the middle and center it also") sets it between the two and centres it
   under the record. Only on the IP page: the lists use .ip-foot too. Phones keep the 17px they drew (the rule further
   down) and are centred with it */
.pd .pd-ip .ip-foot { font-size: 16.5px; text-align: center; }
.pd .ip-sum { margin: 0 0 17px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pd .ip-sum > div { padding: 16px 21px 17px; border-right: 1px solid var(--line-soft); }
.pd .ip-sum dt { --w: 92%; margin-bottom: 7px; font: 700 17.5px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pd .ip-sum dd { font-size: 22px; line-height: 1.35; color: var(--heading); }
/* 87 (his word of 12 Oct, after 86's reworked record: "I am not liking that style, can we revert and just shrink the
   text 25%"): the registry's own text as it comes, in the typewriter face, a quarter smaller than the 19.5px it was.
   The phone's size below (13.5px) is left: a quarter off that is too small to read */
.pd pre.whois { padding: 22px 24px; font: 400 14.6px/1.55 var(--mono); color: var(--heading); background: var(--record); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.pd .warn-text { color: var(--pending); font-weight: 600; }
/* What's my IP (deploy 46), laid out as his picture of 7 Oct: the page's name; one card, a grey band and under
   it the address, large, with what kind it is before it and the Copy button after it; two grey boxes of facts
   side by side, each with its picture in the corner; the time. Everything is as wide as the header's contents,
   so the cards start under the mark. The cards, the band, the box headings and the lines are a name's page's
   own (.pd-card, .pd-band, .pd-tool-t, .pd-lines); only the address and its row are drawn here.
   --ip is the address's size, and the word before it is sized from it. The address and that word are always
   Roboto, whatever Look and feel → Interface font says (as a countdown is always Roboto Mono): the sizes are
   what Roboto's narrow figures fit on one line, and no other of the four fonts has figures that narrow. */
.pd .myip-main { padding: 26px var(--gutter) 0; }
.pd .myip { width: 100%; max-width: min(var(--narrow), 100%); margin: 0 auto; }
.pd .myip-h1 { --w: 95%; margin: 0 0 20px; font: 800 39.25px/1.14 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .myip-card { margin: 0 0 23px; }
.pd .myip-rows { display: grid; row-gap: 14px; padding: 22px 28px 19px; }        /* 42 px of white above and below the figures, as in the picture */
.pd .myip-row { --ip: 94px; display: flex; align-items: baseline; gap: 22px; }
.pd .myip-row.v6 { --ip: 56px; }               /* the longest address there is (39 characters) on one line */
/* The word, then the address in the middle of what is left, then the button right after it: the room left over is
   two equal margins, one after the word and one after the button. (Not a grid with 1fr either side: Safari's
   engine gave the spare room to the address's column instead, and the button ended at the card's edge.) */
.pd .myip-fam { --w: 80%; flex: 0 0 auto; margin-right: auto; font: 400 calc(var(--ip) * .66)/1.172 "Roboto", var(--sans); color: var(--heading); white-space: nowrap; }
.pd .myip-ip {
  --w: 78%; flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; text-align: center; overflow-wrap: anywhere;
  font: 800 var(--ip)/1.172 "Roboto", var(--sans); letter-spacing: 0; color: var(--heading); background: none; border: 0;
}
.pd .myip-copy { flex: 0 0 auto; align-self: center; margin-right: auto; }
.pd.no-js .myip-copy { display: none; }        /* it needs scripting to do anything */
.pd .myip-boxes { display: flex; align-items: stretch; gap: 21px; margin: 0 0 20px; }
.pd .myip-box { position: relative; flex: 1 1 0; min-width: 0; background: var(--thead); }
.pd .myip-box .pd-tool-t { padding-right: 56px; }
.pd .myip-box > .pd-i { position: absolute; top: 15px; right: 20px; height: 34px; color: var(--blue); }
.pd .myip-box .faint { color: var(--muted); }  /* on the grey of the box */
.pd .myip-seen { --w: 92%; margin: 0 0 30px; text-align: center; font-size: 21px; line-height: 1.3; color: var(--heading); }
.pd .myip-note { max-width: 1000px; margin: 0 auto 12px; text-align: center; font-size: 22px; line-height: 1.5; color: var(--ink); }
.pd .myip .wm-extra { margin: 0 auto 12px; text-align: center; }
.pd .myip-links { margin: 0; font-size: 22px; gap: 8px 24px; }
.pd .myip-links .faint { font-size: 20.5px; }
.pd .pg-whatsmyip .legend-inner { max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); column-gap: 24px; }
@media (min-width: 760px) { .pd .pg-whatsmyip .faq code { font-size: 18px; } }     /* "pendingdelete.net/whatsmyip" on one line in a column this wide */
.pd .faq { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 32px; padding-top: 50px; }
.pd .faq .eyebrow { --w: 98%; font: 800 25.5px/1.2 var(--sans); color: var(--heading); }
.pd .faq h3 { --w: 94%; margin: 0 0 8px; font: 750 22.5px/1.3 var(--sans); color: var(--heading); }
.pd .faq p { margin: 0; font-size: 20.5px; line-height: 1.55; color: var(--ink); }
.pd .faq code { font: 400 18.5px/1 var(--mono); padding: 3px 7px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line-soft);
  /* a command longer than its column goes on to the next line instead of out of the column */
  white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ==== below: the narrow layouts and the scale steps ====================== */

/* ---------------------------------------- between a laptop and a phone ---- */
/* From 760 to 1219 px the page is drawn at 0.72 and narrows instead of
   shrinking further; these are the points where its columns no longer fit
   side by side. */
@media (max-width: 1099px) {
  /* a name's page: the right-hand cards move under the other two columns, side by side */
  .pd .result { grid-template-columns: 422px minmax(0, 1fr); grid-template-rows: auto auto; }
  .pd .result.has-cards .pd-r-title { grid-column: 1 / -1; }
  .pd-r-right { grid-column: 1 / -1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .pd .result.has-life .pd-r-right { grid-row: auto; }
  .pd-r-right > * { flex: 1 1 300px; }
  .pd-r-below { grid-template-columns: minmax(0, 1fr); }
  /* what's my IP: the four answers, two by two */
  .pd .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* what's my IP: an IPv6 address stays on one line as the card narrows */
@media (max-width: 999px) { .pd .myip-row.v6 { --ip: 50px; } }
@media (max-width: 899px) { .pd .myip-row.v6 { --ip: 40px; } }
@media (min-width: 900px) and (max-width: 999px) {
  .pd .hsearch button span { display: none; }     /* the header is full here: the search button is its icon */
  /* …and beside Login / Register (49) the menu closes up, for the field (a page cached before 49 has no button: unchanged) */
  .pd .masthead-inner:has(> .pd-acct, > .pd-me) .nav-link { padding-left: 14px; padding-right: 14px; }
  .pd .masthead-inner:has(> .pd-acct, > .pd-me) .nav-item.open > .nav-link::after,
  .pd .masthead-inner:has(> .pd-acct, > .pd-me) .nav-link:hover::after { left: 14px; right: 14px; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  /* a list beside its filter panel is at its narrowest here (995 px of the design): the name and three columns.
     The rank makes room for the name; the linking domains stay, and under 1000 px, where the panel goes on top,
     the rank is back. */
  .pd table.droplist th.rk, .pd table.droplist td.rk { display: none; }
}
@media (max-width: 999px) {
  /* the homepage's table: the length, which the name shows, makes room for the name */
  .pd .next-drops .drops-table th.len, .pd .next-drops .drops-table td.len { display: none; }
  /* dropping today's table: the rank makes room for the registrar */
  .pd table.pd-today th.rk, .pd table.pd-today td.rk { display: none; }
  /* a list: the filter panel goes on top, its choices side by side */
  .pd-cols { grid-template-columns: minmax(0, 1fr); }
  .pd-side { grid-column: 1; grid-row: 1; position: static; margin: 0 0 20px; }
  .pd-main { grid-row: 2; }
  .pd-filters { padding: 18px 20px 8px; }
  .pd-opts { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px 26px; }
  .pd .syl-search input[type=search] { flex: 1 1 320px; }
}

/* ------------------------------------------- a narrow desktop, a tablet ---- */
/* Under 900 px of window the menu folds behind the burger (the page is drawn at
   0.72 there, so this is the design at about 1250 px of its own width). */
@media (max-width: 899px) {
  /* the homepage's table: the rank goes next; the linking domains stay */
  .pd .next-drops .drops-table th.rk, .pd .next-drops .drops-table td.rk { display: none; }
  /* dropping today's table is the four columns it was: the linking domains go too (the drop list has both) */
  .pd table.pd-today th.ld, .pd table.pd-today td.ld { display: none; }
  .pd .masthead-inner { flex-wrap: wrap; min-height: 84px; padding: 10px var(--gutter); }
  .pd .nav-burger { display: block; order: 2; margin-left: auto; }
  .pd-cta { display: none; }
  .pd .masthead .site-nav { display: none; order: 5; width: 100%; margin: 12px 0 0; }
  .pd .masthead .site-nav.open { display: block; }
  .pd .hsearch, .pd .own-search .hsearch { display: none; order: 4; width: 100%; margin: 14px 0 2px; }
  .pd .site-nav.open ~ .hsearch { display: flex; }
  /* Without scripting the burger has nothing to open with: the menu is simply there (as it was
     before this design), and so is the search on a page that has no search box of its own. */
  .pd.no-js .nav-burger { display: none; }
  .pd.no-js .masthead .site-nav { display: block; }
  .pd.no-js body:not(.own-search) .hsearch { display: flex; }
  .pd .hsearch input { flex: 1 1 auto; width: auto; height: 54px; font-size: 23px; }
  .pd .hsearch button { height: 54px; padding: 0 22px; font-size: 21.5px; }
  .pd .nav-top { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line-soft); flex-wrap: nowrap; }
  .pd .nav-item { border-bottom: 1px solid var(--line-soft); }
  .pd .masthead .nav-link { width: 100%; justify-content: space-between; padding: 20px 4px; border-radius: 0; font-size: 25px; font-weight: 600; }
  .pd .masthead .nav-item.has-panel > .nav-link::before {
    content: ""; order: 2; width: 12px; height: 12px; margin-right: 8px;
    border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
    transform: rotate(45deg) translate(-3px, -3px); opacity: .55;
  }
  .pd .masthead .nav-item.open > .nav-link::before { transform: rotate(225deg) translate(-3px, -3px); opacity: 1; }
  .pd .masthead .nav-link:hover::after, .pd .nav-item.on > .nav-link::after, .pd .nav-item.open > .nav-link::after { display: none; }
  .pd .nav-item.on > .nav-link { color: var(--blue); }
  .pd .nav-panel { position: static; box-shadow: none; border: 0; background: var(--tint); border-radius: 10px; margin: 0 0 14px; }
  .pd .nav-panel-inner { display: block; padding: 8px 8px 10px; }
  .pd .masthead .nav-card { padding: 15px 16px; }
  .pd .nav-card-t { font-size: 23px; font-weight: 600; }
  .pd .nav-card-b { display: none; }
  .pd .doors { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .pd .door { padding: 20px 22px 22px; }
}

/* ------------------------------------------------------------- phones ---- */
/* Under 760 px there is no scaling: these are real pixels, sized for a thumb
   and for reading at arm's length. The layouts are the mockups' phones: the
   mark and the burger; a list as a card with the name and one figure a row; a
   name's page as a stack of cards, the name in a grey band on top. */
@media (max-width: 759px) {
  :root { --gutter: 14px; --radius-lg: 14px; }
  .pd body { zoom: var(--t, 1); min-height: 100%; font-size: 17px; }

  /* header: the mark in the middle, the burger at the right, as on the mockups' phones */
  .pd .masthead-inner { position: relative; justify-content: center; min-height: 64px; padding: 8px 14px; }
  .pd .nav-burger { position: absolute; top: 9px; right: 10px; margin: 0; }
  .pd-logo { gap: 8px; }
  .pd-logo-mark { width: 46px; height: 35px; }
  .pd-logo-text { font-size: 20.5px; }
  .pd .nav-burger { width: 48px; height: 46px; padding: 12px 9px; }
  .pd .nav-burger span { height: 2.5px; }
  .pd .nav-burger span + span { margin-top: 6px; }
  .pd .masthead .site-nav { margin-top: 8px; }
  .pd .hsearch, .pd .own-search .hsearch { margin: 10px 0 2px; border-width: 2px; }
  .pd .hsearch input { height: 46px; font-size: 17px; }
  .pd .hsearch button { height: 46px; padding: 0 16px; font-size: 16.5px; }
  .pd .hsearch button svg { width: 16px; height: 16px; }
  .pd .masthead .nav-link { padding: 15px 4px; font-size: 18.5px; }
  .pd .masthead .nav-item.has-panel > .nav-link::before { width: 9px; height: 9px; border-width: 2px; margin-right: 6px; transform: rotate(45deg) translate(-2px, -2px); }
  .pd .masthead .nav-item.open > .nav-link::before { transform: rotate(225deg) translate(-2px, -2px); }
  .pd .nav-panel { border-radius: 8px; margin-bottom: 10px; }
  .pd .nav-panel-inner { padding: 6px; }
  .pd .masthead .nav-card { padding: 12px; }
  .pd .nav-card-t { font-size: 17.5px; }

  /* footer */
  .pd .footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 14px 28px; font-size: 16px; }
  .pd .footer-note { font-size: 15.5px; }
  .pd-signin svg { width: 19px; height: 19px; }
  .pd-signin { margin-left: 12px; vertical-align: -4px; }

  /* shared pieces */
  .pd .eyebrow, .pd .drops .eyebrow, .pd .page-wide .eyebrow, .pd .page-full .eyebrow { font-size: 19.5px; }
  .pd-card-head { padding: 16px 16px 15px; }
  .pd .pd-card-head .eyebrow, .pd .pd-card-title { font-size: 20.5px; }
  .pd .pd-band { padding: 12px 16px 11px; font-size: 19.5px; }
  .pd-card-body { padding: 13px 16px 15px; }
  .pd table.pd-table, .pd table.droplist, .pd table.obs { font-size: 17px; }
  .pd table.pd-table th, .pd table.droplist th, .pd table.obs th { padding: 12px 12px 11px; font-size: 16px; }
  .pd table.pd-table td, .pd table.droplist td, .pd table.obs td { padding: 13px 12px 12px; font-size: 17px; }
  .pd table.pd-table th:first-child, .pd table.pd-table td:first-child, .pd table.droplist th:first-child, .pd table.droplist td:first-child { padding-left: 16px; }
  .pd table.pd-table th:last-child, .pd table.pd-table td:last-child, .pd table.droplist th:last-child, .pd table.droplist td:last-child { padding-right: 16px; }
  .pd table.pd-table td.n a, .pd table.droplist td.n a, .pd .drops-table td.n a, .pd .drops-table td.mono a { font-size: 17px; }
  .pd table td.c, .pd td.c, .pd table td.c.now, .pd td.c.now { font-size: 15.5px; }
  .pd-act { min-width: 0; height: 34px; font-size: 15.5px; }
  .pd .btn-fill, .pd .btn-primary { font-size: 17px; }
  .pd .btn-fill { padding: 13px 18px; }
  .pd .btn-primary { height: 50px; padding: 0 24px; }
  .pd .btn-outline { font-size: 16.5px; padding: 11px 16px; }
  .pd .btn-small { font-size: 15.5px; padding: 9px 13px; }
  .pd .pd-obtn { height: 44px; font-size: 16.5px; }
  .pd .pd-obtn .pd-i { height: 15px; }
  .pd .pill { font-size: 12.5px; padding: 5px 8px; }
  .pd .chip { font-size: 14.5px; padding: 6px 9px; }

  /* home */
  .pd main { padding: 26px 14px 0; }
  .pd .hero h1 { font-size: 32px; line-height: 1.14; }
  /* the field keeps the blue line; the button drops under it, full width */
  .pd .search { margin-top: 18px; flex-direction: column; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pd .search:focus-within { box-shadow: none; }
  .pd .search .field { background: var(--panel); border: 4px solid var(--blue); border-radius: 12px; }
  .pd .search input { height: 50px; padding: 0 12px; font-size: 18px; }
  .pd .search button { width: 100%; min-width: 0; height: 54px; font-size: 19px; font-weight: 700; }
  .pd .hint { font-size: 15.5px; margin-top: 8px; }
  .pd .next-drops-inner { padding: 26px 14px 0; }
  .pd .sec-link { font-size: 16.5px; }
  .pd .next-drops .drops-table .hide-sm, .pd .next-drops .drops-table .act, .pd .next-drops .drops-table .t { display: none; }
  .pd .next-drops .drops-table th.c, .pd .next-drops .drops-table td.c { width: 112px; text-align: right; }
  .pd .doors { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .pd .door { padding: 16px 16px 17px; gap: 4px; }
  .pd .door b { font-size: 19.5px; }
  .pd .door span { font-size: 16.5px; }
  .pd-facts-inner { padding: 30px 14px 40px; }
  .pd main + .pd-facts .pd-facts-inner { padding-top: 22px; padding-bottom: 0; }
  .pd .pd-facts + .next-drops .next-drops-inner { padding-top: 26px; padding-bottom: 40px; }
  .pd .standfirst { font-size: 17px; }
  .pd .stats { margin-top: 18px; gap: 12px; }
  .pd .stats li { flex: 1 1 calc(50% - 6px); }
  .pd .stats a, .pd .stats div { padding: 16px 10px 14px; gap: 5px; }
  .pd .stats b { font-size: 27px; }
  .pd .stats span { font-size: 15px; }
  .pd .trust { font-size: 16.5px; }
  .pd .trust li { white-space: normal; text-align: left; }
  .pd .legend-inner { padding: 30px 14px 44px; gap: 14px; }

  /* inner pages */
  .pd .page-main { padding: 22px 14px 44px; }
  .pd .ip-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .pd .ip-title, .pd .page h1 { font-size: 27px; }
  .pd .ip-meta { font-size: 16.5px; padding-bottom: 0; }
  .pd .ip-foot { margin-top: 16px; font-size: 16px; }
  .pd .drops-sub, .pd .syl-intro { font-size: 17px; }
  .pd .syl-intro { margin: 0 0 16px; }
  .pd .drops-sec { margin-bottom: 28px; }
  .pd .drops-empty { padding: 16px; font-size: 17px; }
  /* the filters fold behind a button */
  .pd-side { margin-bottom: 14px; }
  .pd-filters-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
    font: 700 16.5px/1 var(--sans); color: var(--heading); background: var(--panel);
    border: 1.5px solid #111; border-radius: 10px; cursor: pointer;
  }
  .pd-filters-toggle[aria-expanded="true"] { background: var(--filter); border-color: var(--blue); color: #0057A8; }
  .pd-filters-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; font: 700 14px/1 var(--sans); color: #fff; background: var(--blue); border-radius: 999px; }
  .pd-filters { display: none; margin-top: 12px; padding: 16px 16px 6px; border-radius: 14px; }
  .pd-filters.open, .no-js .pd-filters { display: block; }
  .no-js .pd-filters-toggle { display: none; }
  .pd .pd-filters .pd-filters-title { font-size: 20px; }
  .pd .pd-filters a.pd-filters-clear { font-size: 17px; }
  .pd .pd-filters .pd-filter h3 { font-size: 16px; }
  .pd-opts { grid-template-columns: 1fr; gap: 0; }
  .pd .pd-opts a, .pd .pd-opts .off { min-height: 44px; font-size: 17.5px; gap: 9px; }
  .pd .pd-opts a::before, .pd .pd-opts .off::before { width: 21px; height: 21px; }
  .pd .pd-opts a b, .pd .pd-opts .off b { font-size: 15.5px; }
  .pd .pd-opts-more { font-size: 17px; }
  .pd .syl-search input[type=search] { height: 48px; font-size: 17.5px; }
  .pd .syl-search .btn-outline { font-size: 17px; }
  .pd .syl-clear { font-size: 17px; }
  .pd .day-strip { gap: 7px; margin-bottom: 18px; }
  .pd .day-strip .day { min-width: 68px; padding: 9px 6px 8px; gap: 3px; }
  .pd .day-strip .day-l { font-size: 14px; }
  .pd .day-strip .day-n { font-size: 19.5px; }
  .pd .day-strip .day-arrow { display: none; }
  /* a row of a list: the name, its drop time under it, the countdown at the right */
  .pd-list .dl-bar { padding: 14px 16px 13px; }
  .pd .dl-bar { font-size: 15.5px; }
  .pd table.droplist, .pd table.droplist thead, .pd table.droplist tbody { display: block; }
  .pd table.droplist tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line-soft); }
  .pd table.droplist thead tr { background: var(--thead); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 12px; }
  .pd table.droplist tbody tr:first-child { border-top: 0; }
  .pd table.droplist tbody tr:nth-child(even) { background: var(--zebra); }
  .pd table.droplist th, .pd table.droplist td { display: block; width: auto; min-width: 0; }
  .pd table.droplist tr > th, .pd table.droplist tr > td { width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
  .pd table.droplist tr > th.t, .pd table.droplist tr > th.st, .pd table.droplist tr > th.rk, .pd table.droplist tr > th.ld { display: none !important; }
  .pd table.droplist td.n { grid-column: 1; grid-row: 1; }
  .pd table.droplist td.t { grid-column: 1; grid-row: 2; width: auto; font-size: 15px; line-height: 1.35; color: var(--faint); white-space: normal; }
  /* the two link figures: a third line, only in the rows of names that have them. The count says what it is
     (its column's heading, from the cell); the rank sits at the right, under the countdown. */
  .pd table.droplist tr > td.none { display: none !important; }
  .pd table.droplist td.ld, .pd table.droplist td.rk { grid-row: 3; margin-top: 1px; font-size: 15px; line-height: 1.35; color: var(--faint); white-space: normal; }
  .pd table.droplist td.ld { grid-column: 1; }
  .pd table.droplist td.rk { grid-column: 2; text-align: right; white-space: nowrap; }
  .pd table.droplist td.ld[data-l]::before { content: attr(data-l) ": "; }
  .pd table.droplist td.c, .pd table.droplist th.c { grid-column: 2; grid-row: 1 / span 2; width: auto; text-align: right; }
  .pd table.droplist td.st { grid-column: 2; grid-row: 1 / span 2; width: auto; text-align: right; }
  .pd table.droplist.syl tr > td.st, .pd table.droplist.syl tr > td.c, .pd table.droplist.syl .syl-words { display: block !important; }
  .pd table.droplist.syl td.st { grid-row: 2; }
  .pd table.droplist.syl td.c { grid-row: 1; }
  .pd table.droplist.syl tr > th.c { display: block !important; }
  .pd .syl-words { font-size: 14.5px; }
  /* a phone: [< Previous]  Page 3 of 12  [Next >] on one line; the numbers are for a desktop */
  .pd .dl-pages { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding: 13px 14px; font-size: 16px; }
  .pd .dl-pages a { min-width: 40px; height: 42px; padding: 0 12px; font-size: 16px; white-space: nowrap; }
  .pd .dl-pages .pg-n, .pd .dl-pages .pg-gap { display: none; }
  .pd .dl-pages .pg-of { display: block; flex: 1 1 auto; text-align: center; white-space: nowrap; color: var(--ink); }
  .pd-sort { width: 9px; height: 15px; }
  .pd-sort::before, .pd-sort::after { border-width: 4.5px; }
  .pd-sort::before { top: -3px; border-bottom-width: 5.5px; }
  .pd-sort::after { bottom: -3px; border-top-width: 5.5px; }
  /* boxes that scroll: sideways too, so a wide table never widens the page */
  .pd .history-scroll { max-height: 300px; overflow-x: auto; }
  .pd .history-scroll.tall { max-height: 560px; }
  .pd table.obs { min-width: 0; }
  .pd table.obs th:nth-child(1), .pd table.obs td:nth-child(1) { width: auto; padding-left: 16px; }
  .pd table.obs th:nth-child(2), .pd table.obs td:nth-child(2) { width: auto; }
  .pd .drops-table td.ellip { max-width: 200px; }
  /* dropping today: the name and its time; the confidence and the registrar are on the name's page */
  .pd table.pd-today th:nth-child(n+3), .pd table.pd-today td:nth-child(n+3) { display: none; }
  .pd table.pd-today th:nth-child(2), .pd table.pd-today td:nth-child(2) { text-align: right; padding-right: 16px; white-space: nowrap; }
  .pd table.pd-today td:first-child { white-space: normal; word-break: break-all; }
  .pd .name-grid { font-size: 16.5px; column-width: 180px; column-gap: 16px; }
  .pd .more-btn { font-size: 16.5px; padding: 15px; }

  /* a name's page, as the mockup's phone: the name in a grey band with the
     dates right under it, then the name servers, then the record; the search
     is in the menu. The lifecycle comes right under the name and its dates,
     then the countdown card of a name about to drop. */
  .pd-lookup { display: none; }
  .pd .result-main { padding: 18px 14px 44px; }
  .pd .result, .pd .result.has-cards { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .pd-r-left, .pd-r-right { display: contents; }
  .pd-r-left > :last-child, .pd-r-right > :last-child, .pd-r-right > * { flex: 0 0 auto; }
  .pd-r-title { order: 0; }
  .pd-c-dates { order: 1; }
  .pd .result > .pd-r-life { order: 2; }
  .pd-r-state.soon { order: 3; }
  .pd-c-ns { order: 4; }
  .pd-r-rec { order: 5; }
  .pd-c-registrar { order: 6; }
  .pd-r-state { order: 7; }
  .pd .cta { order: 8; }
  .pd-r-status { order: 9; }
  .pd-r-more { order: 10; }
  .pd-r-below { order: 11; }
  .pd .result > .wm-extra { order: 12; }
  .pd-r-left .pd-card, .pd-r-rec { border-radius: var(--radius-lg); }
  .pd-r-title { padding: 0 0 2px; }
  .pd .head { display: block; padding: 14px 16px 13px; background: var(--thead); border-bottom: 1px solid var(--line); }
  .pd .pd-kicker { display: block; }
  .pd .pd-kicker, .pd .domain { font-size: 24px; line-height: 1.24; }
  .pd .pd-status { margin: 0; padding: 12px 16px 11px; font-size: 17px; line-height: 1.45; }
  .pd .pd-status .badge { font-size: 17px; line-height: 1.45; }
  .pd .pd-links { margin: -5px 16px 11px; font-size: 17px; line-height: 1.45; }
  .pd .pd-links > span { display: block; }      /* each figure, then where they are from, on a line of its own */
  .pd .pd-links > .pd-dot { display: none; }
  .pd .pd-r-title p.blurb, .pd .pd-r-title .wm-extra, .pd .pd-r-title .checking { margin: 0 16px 13px; }
  .pd .blurb { font-size: 17px; }
  .pd .wm-extra, .pd .hero .wm-extra { font-size: 17px; }
  .pd .checking { padding: 13px 14px; font-size: 17px; gap: 10px; }
  .pd .spinner { width: 17px; height: 17px; border-width: 2px; }
  .pd .bc-box { padding: 26px 20px 14px; border-radius: 14px; }
  .pd .bc-text { font-size: 19.5px; margin-bottom: 18px; }
  .pd .bc-close { font-size: 16px; }
  /* the name's card and the dates' card read as one, as on the mockup's phone */
  .pd .has-cards .pd-when { display: none; }
  .pd .has-cards .pd-r-title { margin-bottom: -14px; padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
  .pd .has-cards .pd-c-dates { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .pd .has-cards .pd-c-dates .pd-band { display: none; }
  .pd .has-cards .pd-c-dates .pd-card-body { padding-top: 3px; }
  .pd .pd-lines p { margin-bottom: 7px; font-size: 17px; line-height: 1.4; }
  .pd .pd-dates p { gap: 10px; padding-left: 0; }
  .pd .pd-dates .pd-i { width: 17px; height: 18px; margin-top: 3px; }
  .pd .pd-dates .pd-i-hourglass { display: none; }
  .pd .pd-dates .pd-i-clock { display: inline-block; }
  .pd .chips { font-size: 17px; gap: 6px; }
  .pd .pd-c-ns .pd-card-body { padding: 12px 16px 14px; }
  .pd #f-ns.pd-ns, .pd #f-ns.pd-ns .chip { font-size: 17px; line-height: 1.3; }
  .pd-r-rec { min-height: 0; }
  .pd .pd-record { position: static; max-height: 420px; padding: 13px 16px 14px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16.5px; line-height: 1.28; }
  .pd .pd-tool { padding: 14px 16px 16px; }
  .pd .pd-tool-t { margin-bottom: 10px; font-size: 19.5px; }
  .pd .drop-when { font-size: 18.5px; }
  .pd .countdown { font-size: 27px; }
  .pd .countdown.opened { font-size: 18.5px; }
  .pd .confidence, .pd .cta .cta-text p { font-size: 16.5px; }
  .pd .pd-r-life .blurb { padding: 12px 16px 14px; text-align: left; }
  .pd #f-status.chips, .pd #f-status .chip { font-size: 17px; }
  .pd .pd-confirmed { margin: 9px 0 12px; font-size: 16.5px; }
  .pd .pd-confirmed .faint { font-size: 15.5px; }
  .pd .refresh.pd-obtn { height: 44px; }
  .pd .refresh svg { width: 15px; height: 15px; }
  .pd .refresh-note { font-size: 15px; }
  .pd-r-more { gap: 11px; }
  .pd .pd-save { margin-top: 0; }
  .pd .cta .pd-obtn { font-size: 16.5px; }
  .pd-r-below, .pd-r-below.no-zone, .pd-r-below.no-obs { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 0; }
  .pd .pd-r-life .lifecycle { padding: 18px 4px 14px; }
  .pd .step + .step::before { top: 10px; height: 2px; }
  .pd .step-dot { width: 22px; height: 22px; border-width: 2px; }
  .pd .step-dot svg { width: 12px; height: 12px; }
  .pd .step-l { margin-top: 8px; font-size: 12px; }
  .pd .step-s { display: none; }
  /* the registry history, stacked: when it was asked and what it answered on one line, the
     registry's status words under them — nothing to push sideways with a thumb */
  .pd .history table.obs, .pd .history table.obs tbody { display: block; min-width: 0; }
  .pd .history table.obs thead { display: none; }
  .pd .history table.obs tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; padding: 10px 16px 11px; border-top: 1px solid var(--line-soft); }
  .pd .history table.obs tbody tr:first-child { border-top: 0; }
  .pd .history table.obs td, .pd .history table.obs td:nth-child(1), .pd .history table.obs td:nth-child(2) {
    display: block; width: auto; padding: 0; border: 0; font-size: 15.5px; line-height: 1.35; white-space: normal;
  }
  .pd .history table.obs td:nth-child(1) { font-weight: 600; color: var(--heading); }
  .pd .history table.obs td:nth-child(2) { text-align: right; }
  .pd .history table.obs td:nth-child(3) { grid-column: 1 / -1; font-size: 15px; color: var(--muted); }
  .pd .ns-block .ip-foot { padding: 12px 16px 14px; font-size: 15px; }
  .pd .ns-block table.obs.ns-hist thead tr { padding: 11px 16px 0; }
  .pd .ns-block table.obs.ns-hist thead th:first-child { font-size: 15.5px; }
  .pd .ns-block table.obs.ns-hist tbody tr { padding: 8px 16px 9px; }
  .pd .ns-block table.obs.ns-hist tbody tr:first-child { padding-top: 4px; }
  .pd .ns-block table.obs.ns-hist td { font-size: 15.5px; }
  .pd .pd-back { font-size: 17px; }
  .pd .pd-r-title .pd-back { margin: 0 16px 14px; }      /* inside the title card, with the card's own side space */
  /* an address or a command inside a sentence may break across lines on a phone rather than push the card wider */
  .pd .blurb code, .pd .prose code, .pd .page code { white-space: normal; overflow-wrap: anywhere; }

  /* reading pages and forms */
  .pd .page:not(.page-wide):not(.page-full) { padding: 22px 18px 26px; }
  .pd .page .eyebrow { font-size: 14.5px; }
  .pd .page .lede, .pd .prose .lede { margin-bottom: 22px; font-size: 19px; }
  .pd .page h2, .pd .prose h2 { margin: 30px 0 10px; font-size: 21.5px; }
  .pd .prose h3 { margin: 22px 0 8px; font-size: 18.5px; }
  .pd .page p, .pd .prose p, .pd .prose li, .pd .page li { font-size: 17px; }
  .pd .prose ul, .pd .page ul { padding-left: 22px; }
  .pd .page .pd-opts { padding: 0; }
  .pd .prose pre { padding: 14px; font-size: 14.5px; }
  .pd .prose table.obs th, .pd .prose table.obs td { font-size: 16px; padding: 10px 12px; }
  .pd table.obs.cols, .pd table.obs.cols tbody, .pd table.obs.cols tr, .pd table.obs.cols td { display: block; width: auto; }
  .pd table.obs.cols thead { display: none; }
  .pd table.obs.cols tr { border-top: 1px solid var(--line-soft); padding: 10px 12px 12px; }
  .pd table.obs.cols tr:first-child { border-top: 0; }
  .pd table.obs.cols td, .pd .prose table.obs.cols td { border: 0; padding: 2px 0; white-space: normal; word-break: break-word; }
  .pd table.obs.cols td:nth-child(1), .pd table.obs.cols td:nth-child(2) { width: auto; }   /* stacked: no column widths left */
  .pd table.obs.cols td:first-child { font-weight: 650; }
  .pd .life-step { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .pd .life-when { font-size: 15px; }
  .pd .life-what { font-size: 17px; }
  .pd .flash, .pd .notice { padding: 14px 16px; font-size: 17px; }
  .pd .f-row { grid-template-columns: 1fr; gap: 0; }
  .pd .f-field { margin-bottom: 16px; }
  .pd .f-field label { font-size: 16.5px; margin-bottom: 7px; }
  .pd .f-field input, .pd .f-field textarea { padding: 12px 13px; font-size: 17px; border-width: 1.5px; }
  .pd .f-field textarea { min-height: 170px; }
  .pd .f-err { font-size: 15.5px; }
  .pd .f-actions { gap: 14px; }
  .pd .f-actions .btn-primary { height: 52px; width: 100%; }
  .pd .page .f-actions .f-note { font-size: 15px; }
  .pd .contact-again { font-size: 17px; }

  /* the registries' pages */
  .pd .tld-filter { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .pd .tld-filter input { flex: 1 1 100%; height: 48px; font-size: 17px; border-width: 1.5px; }
  .pd .tld-count { font-size: 15.5px; }
  .pd .tld-ascii { font-size: 13.5px; }
  .pd .row-link { font-size: 15px; }
  .pd table.sheet { font-size: 15.5px; }
  .pd table.sheet th, .pd table.sheet td { padding: 10px 10px; }
  .pd table.sheet thead th { font-size: 14.5px; }
  .pd table.sheet td.mono { font-size: 14.5px; }
  .pd table.sheet tr.dt-note td { padding: 12px 14px 12px 20px; }
  .pd table.sheet tr.dt-note p { font-size: 15.5px; }
  .pd table.sheet tr.dt-note p:last-child { font-size: 14.5px; }

  /* IP pages, what's my IP */
  .pd .ip-sum { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
  .pd .ip-sum > div { padding: 12px 14px 13px; border-bottom: 1px solid var(--line-soft); }
  .pd .ip-sum dt { font-size: 13px; margin-bottom: 5px; }
  .pd .ip-sum dd { font-size: 17px; }
  .pd pre.whois { padding: 14px; font-size: 13.5px; border-radius: var(--radius-lg); }
  .pd .pd-ip .ip-foot { font-size: 17px; }
  .pd .pd-ip .pd-r-title { margin-bottom: 14px; padding: 16px 16px 16px; }
  .pd .pd-ip .pd-r-title .lede { font-size: 17px; }
  /* what's my IP: the kind of address and the Copy button on one line, the address under them */
  .pd .myip-main { padding: 22px 14px 0; }
  .pd .myip-h1 { margin-bottom: 14px; font-size: 27px; }
  .pd .myip-card { margin-bottom: 14px; }
  .pd .myip-rows { row-gap: 14px; padding: 14px 16px 12px; }
  /* The address is as large as a 320-px page can hold on one line, and Text size (--t) is taken back out of it:
     a larger Text size makes the page narrower in its own pixels (down to 320), so the address stays as it is
     and the words around it grow. */
  .pd .myip-row { --ip: calc(42px / var(--t, 1)); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fam copy" "ip ip"; align-items: center; gap: 10px 12px; }
  .pd .myip-row.v6 { --ip: calc(26px / var(--t, 1)); }      /* two lines, broken after a colon */
  .pd .myip-fam { grid-area: fam; margin: 0; font-size: 21px; }
  .pd .myip-ip { grid-area: ip; text-align: left; }
  .pd .myip-copy { grid-area: copy; justify-self: end; margin: 0; }
  .pd .myip-boxes { flex-direction: column; gap: 14px; margin-bottom: 16px; }
  .pd .myip-box { flex: 0 0 auto; }
  .pd .myip-box .pd-tool-t { padding-right: 40px; }
  .pd .myip-box > .pd-i { top: 13px; right: 16px; height: 25px; }
  .pd .myip-seen { margin-bottom: 20px; font-size: 16px; }
  .pd .myip-note { font-size: 17px; }
  .pd .myip-links { font-size: 17px; }
  .pd .myip-links .faint { font-size: 15px; }
  .pd .faq { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
  .pd .faq .eyebrow { font-size: 19.5px; }
  .pd .faq h3 { font-size: 18px; }
  .pd .faq p { font-size: 17px; }
  .pd .faq code { font-size: 14.5px; }
}

/* ----------------------------------------------------------- sign-in ---- */
/* /v2 with nobody signed in (templates/v2/login.php, deploy 42). The site's
   header and footer, and between them one card in the middle of what is left
   of the window: a grey band with its title, as the cards on a name's page
   have, and the form drawn like the contact form. site.css still carries the
   old screen's rules for these classes; each one that mattered is answered
   here. (main is a column there, so justify-content is up and down.) */
.pd .login-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 56px var(--gutter) 76px; }
.pd .login-card {
  display: block; width: 100%; max-width: 560px; padding: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pd .login-head {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 13px; text-align: left;
  padding: 16px 26px 14px; background: var(--thead); border-bottom: 1px solid var(--line); color: var(--heading);
}
.pd .login-head .pd-i { font-size: 24px; vertical-align: 0; }
.pd.pd .login-card h1 { --w: 100%; margin: 0; font: 800 27px/1.25 var(--sans); text-transform: uppercase; color: var(--heading); }
.pd .login-body { padding: 26px 26px 28px; }
.pd .login-card .flash { margin: 0 0 22px; padding: 14px 18px; font-size: 21px; }
.pd .login-form { display: block; }
.pd .login-form label {
  --w: 92%; display: block; margin: 0 0 9px;
  font: 650 21.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading);
}
.pd .login-form input {
  display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0 0 22px; padding: 14px 16px;
  font: 450 22px/1.45 var(--sans); color: var(--heading); background: var(--panel);
  border: 2px solid #9AA5B1; border-radius: 9px;
}
.pd .login-form input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent); }
.pd .login-form .btn-primary { display: block; width: 100%; height: 58px; margin: 6px 0 0; cursor: pointer; }
.pd .login-note { margin: 18px 0 0; text-align: center; font-size: 19.5px; line-height: 1.45; color: var(--faint); }
/* the emails' pages (deploy 51): /forgot, /reset, /confirm in the same card, and the link on /login */
.pd .login-forgot + .login-note { margin-top: 8px; }
.pd .login-intro { margin: 0 0 22px; font-size: 21px; line-height: 1.5; color: var(--ink); }
.pd .login-intro b { color: var(--heading); word-break: break-word; }
.pd .login-card .flash b { word-break: break-word; }
.pd .login-small { margin: -10px 0 22px; font-size: 18px; line-height: 1.4; color: var(--faint); }
.pd .login-form .login-err { margin: -14px 0 18px; }
.pd .login-human { margin: -4px 0 22px; }
.pd .login-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; box-sizing: border-box; text-decoration: none; }
/* the dashboard's box while the address waits to be confirmed */
.pd .acct-confirm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin: 0 0 22px; padding: 16px 22px; background: #FFF6DB; border: 1px solid #E9C76A; border-radius: 10px;
}
.pd .acct-confirm p { flex: 1 1 420px; margin: 0; font-size: 22px; line-height: 1.45; color: var(--heading); }
.pd .acct-confirm b { word-break: break-word; }
.pd .acct-confirm form { margin: 0; }
.pd .acct-confirm .pd-obtn { width: auto; padding: 0 20px; }
@media (max-width: 759px) {
  .pd .login-main { justify-content: flex-start; padding: 26px 14px 40px; }   /* under the header, not in the middle: it stays put when the keyboard opens */
  .pd .login-card { border-radius: 14px; }
  .pd .login-head { gap: 10px; padding: 14px 16px 13px; }
  .pd .login-head .pd-i { font-size: 18px; }
  .pd.pd .login-card h1 { font-size: 20px; }
  .pd .login-body { padding: 18px 16px 20px; }
  .pd .login-card .flash { margin-bottom: 16px; padding: 11px 14px; font-size: 16px; }
  .pd .login-form label { margin-bottom: 7px; font-size: 16px; }
  .pd .login-form input { margin-bottom: 16px; padding: 11px 13px; font-size: 17px; }
  .pd .login-form .btn-primary { height: 50px; }
  .pd .login-note { margin-top: 14px; font-size: 14.5px; }
  .pd .login-intro { margin-bottom: 16px; font-size: 16px; }
  .pd .login-small { margin: -6px 0 16px; font-size: 14.5px; }
  .pd .login-form .login-err { margin: -10px 0 14px; }
  .pd .login-human { margin: -2px 0 16px; }
  .pd .login-go { height: 50px; }
  .pd .acct-confirm { padding: 12px 14px; gap: 10px; }
  .pd .acct-confirm p { flex-basis: 100%; font-size: 16px; }
}

/* the smallest phones (320 px): five lifecycle labels in a row need one size down */
@media (max-width: 345px) {
  .pd .step-l { font-size: 11px; }
}
/* what's my IP on the narrower phones: the address one size down, so an IPv4 address stays on one line */
@media (max-width: 377px) {
  .pd .myip-row { --ip: calc(35px / var(--t, 1)); }
  .pd .myip-row.v6 { --ip: calc(24px / var(--t, 1)); }
}

/* ---------------------------------------------------------- accounts ---- */
/* Deploy 49 (lib/members.php). The header: "Login / Register" is the .pd-cta
   button the drop list had, now on every public page; for a signed-in member the
   script in templates/layout.php puts .pd-me in its place: the initials in a
   circle (since 62 the member's Gravatar picture when they turned it on), the
   first name (63, his word: "remove the JM part and | that line so all we have is
   the avatar and First name"; 49 to 62 showed "JD | John D.") and a caret, with
   the account menu under it. Under 900 px both live in the burger's menu. */
.pd .pd-me { position: relative; flex: 0 0 auto; margin-left: 25px; }
.pd .pd-me-btn {
  --w: 92%;
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 4px 0 0;
  font: 600 23px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); white-space: nowrap;
  background: none; border: 0; border-radius: 28px; box-shadow: none; cursor: pointer;
}
.pd .pd-me-btn:hover, .pd .pd-me.open .pd-me-btn { color: var(--blue); background: none; }
.pd .pd-me-av {
  --w: 100%;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 47px; height: 47px;
  font: 500 20px/1 var(--sans); letter-spacing: .02em; color: #fff; background: #647082; border-radius: 50%;
}
.pd .pd-me-av.pic { background: none; overflow: hidden; }          /* 62: the member's Gravatar picture in the circle */
.pd .pd-me-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pd .pd-me-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pd .pd-me-caret {
  flex: 0 0 auto; width: 10px; height: 10px; margin: 0 6px 0 2px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-3px, -3px);
}
.pd .pd-me.open .pd-me-caret { transform: rotate(225deg) translate(-3px, -3px); }
.pd .pd-me-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 14px); z-index: 60; min-width: 250px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px rgba(17, 17, 17, .12);
}
.pd .pd-me.open .pd-me-menu { display: block; }
.pd .pd-me-menu a, .pd .pd-me-menu button {
  --w: 92%;
  display: block; width: 100%; padding: 13px 16px; font: 500 21.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--heading); text-align: left; text-decoration: none; background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.pd .pd-me-menu a:hover, .pd .pd-me-menu button:hover { color: var(--blue); background: var(--tint); }
.pd .pd-me-menu form { margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line-soft); }

/* The account pages: /register, /dashboard, /dashboard/profile (sign in is the
   card above). As wide as a name's page; the site's own cards, bands, fields and
   buttons in the layout of his pictures: two boxes side by side, a wide box under
   them, one wide button. */
.pd .acct-main { justify-content: flex-start; padding: 40px var(--gutter) 70px; }
.pd .acct { width: 100%; max-width: min(var(--narrow), 100%); margin: 0 auto; }
.pd .acct-title { --w: 95%; margin: 0 0 24px; font: 800 39.25px/1.14 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--heading); }
.pd .acct-title-mixed { text-transform: none; }
.pd .acct .flash { margin: 0 0 22px; }
.pd .acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pd .acct-wide { grid-column: 1 / -1; }
.pd .acct-box { display: flex; flex-direction: column; }
.pd .acct-body { display: block; flex: 1 1 auto; padding: 22px 22px 0; }
.pd .acct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.pd .acct .f-field { margin-bottom: 22px; }
.pd .acct .f-field input { display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0; }
.pd .acct .f-field input::placeholder { color: #6B6B6B; opacity: 1; }
.pd .acct .f-field input:focus { outline: none; }
.pd .acct .f-note, .pd .acct p.f-note { margin: 9px 0 0; font-size: 19.5px; line-height: 1.4; color: var(--faint); }
.pd .acct .acct-body > .f-note { margin: -10px 0 22px; }
.pd .acct .f-err a { color: inherit; text-decoration: underline; }
.pd .pw-meter { height: 9px; margin: 12px 0 0; background: #E1E1E4; border-radius: 5px; overflow: hidden; }
.pd .pw-meter span { display: block; width: 0; height: 100%; background: var(--blue); border-radius: 5px; transition: width .15s ease; }
.pd .pw-meter span.s1 { background: #C2410C; }
.pd .acct-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: start; padding: 2px 0 24px; }
.pd .acct-check { --w: 92%; display: inline-flex; align-items: center; gap: 14px; font: 450 23px/1.35 var(--sans); color: var(--heading); cursor: pointer; }
.pd .acct-check input { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.pd .acct-check a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.pd .acct-check a:hover { color: var(--blue); }
.pd .acct-check-wrap .f-err { margin: 8px 0 0 44px; }
.pd .acct-human { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 24px; }
.pd .acct-human-l { font: 450 21px/1.35 var(--sans); color: var(--ink); }
.pd .acct-human .hc-slot { min-width: 0; }
.pd .acct-human .f-err { flex: 1 0 100%; margin: 0; }
.pd .acct-human altcha-widget { max-width: 400px; }
.pd .acct-submit {
  --w: 92%;
  display: block; width: 100%; height: 72px; margin: 22px 0 0; padding: 0 20px;
  font: 800 28px/1 var(--sans); letter-spacing: .01em; text-transform: uppercase; color: #fff;
  background: var(--blue); border: 0; border-radius: 10px; box-shadow: 0 2px 7px rgba(0, 103, 193, .30); cursor: pointer;
}
.pd .acct-submit:hover { background: var(--blue-hover); }
.pd .acct-alt { margin: 22px 0 0; text-align: center; font-size: 23px; line-height: 1.4; color: var(--heading); }
.pd .acct-alt a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.pd .acct-alt a:hover { color: var(--blue); }
.pd .acct-back { text-align: left; }
.pd .acct .acct-form .acct-check { margin: 0 0 22px; }
.pd .acct-save { display: block; margin: 0 0 22px; cursor: pointer; }
.pd .acct .acct-owner-pw { margin: 0 0 22px; font-size: 20.5px; color: var(--ink); }
.pd .acct .acct-owner-pw a { color: var(--blue); }
/* the dashboard: the heading, then the account box at the width of a name's left-hand cards */
.pd .acct-cards { display: grid; grid-template-columns: minmax(0, 422px); gap: 20px; }
.pd .acct-account .pd-card-body { padding: 14px 20px 4px; }
.pd .acct-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 20px 20px; }
.pd .acct-actions form { margin: 0; }
.pd .acct-actions .pd-obtn { width: auto; padding: 0 18px; }

@media (max-width: 899px) {
  /* in the burger's menu, under the menu itself */
  .pd .site-nav.open ~ .pd-acct, .pd.no-js .pd-acct { display: flex; order: 6; width: 100%; margin: 14px 0 4px; }
  .pd .pd-me { display: none; order: 6; width: 100%; margin: 12px 0 4px; }
  .pd .site-nav.open ~ .pd-me { display: block; }
  .pd .pd-me-btn { cursor: default; }
  .pd .pd-me-btn:hover { color: var(--heading); }
  .pd .pd-me-caret { display: none; }
  .pd .pd-me-menu, .pd .pd-me.open .pd-me-menu { display: block; position: static; margin: 10px 0 0; border: 0; box-shadow: none; background: var(--tint); }
}
@media (max-width: 759px) {
  .pd .site-nav.open ~ .pd-acct, .pd.no-js .pd-acct { height: 46px; margin: 10px 0 2px; font-size: 17px; }
  .pd .pd-me-btn { height: 44px; gap: 10px; font-size: 17px; }
  .pd .pd-me-av { width: 38px; height: 38px; font-size: 15.5px; }
  .pd .pd-me-menu a, .pd .pd-me-menu button { padding: 11px 12px; font-size: 17px; }
  .pd .acct-main { padding: 22px 14px 40px; }
  .pd .acct-title { margin-bottom: 16px; font-size: 25px; line-height: 1.2; }
  .pd .acct .flash { margin-bottom: 16px; padding: 13px 15px; font-size: 16px; }
  .pd .acct-grid, .pd .acct-two, .pd .acct-checks, .pd .acct-cards { grid-template-columns: minmax(0, 1fr); }
  .pd .acct-grid { gap: 14px; }
  .pd .acct-body { padding: 16px 14px 0; }
  .pd .acct .f-field { margin-bottom: 14px; }
  .pd .acct .f-field input { padding: 11px 13px; font-size: 17px; }
  .pd .acct .f-note, .pd .acct p.f-note { margin-top: 7px; font-size: 14.5px; }
  .pd .acct .acct-body > .f-note { margin: -6px 0 14px; }
  .pd .acct .f-err { font-size: 14.5px; }
  .pd .acct-checks { gap: 12px; padding-bottom: 16px; }
  .pd .acct-check { gap: 10px; font-size: 17px; }
  .pd .acct-check input { width: 24px; height: 24px; }
  .pd .acct-check-wrap .f-err { margin-left: 34px; }
  .pd .acct-human { gap: 8px 12px; margin-bottom: 16px; }
  .pd .acct-human-l { font-size: 16px; }
  .pd .acct-human altcha-widget { max-width: 100%; }
  .pd .acct-submit { height: 54px; margin-top: 16px; font-size: 19px; }
  .pd .acct-alt { margin-top: 16px; font-size: 16px; }
  .pd .acct .acct-form .acct-check, .pd .acct-save, .pd .acct .acct-owner-pw { margin-bottom: 14px; }
  .pd .acct .acct-owner-pw { font-size: 15.5px; }
  .pd .acct-account .pd-card-body { padding: 12px 14px 2px; }
  .pd .acct-actions { gap: 10px; padding: 12px 14px 16px; }
}

/* ----------------------------------------------------------- tools ---- */
/* /tools/dns-lookup and /tools/spf-dmarc-checker (deploy 53), after his picture of 9 Oct (Gemini's draft): the
   page's name, the search box (the name page's lookup box, at the page's width), then cards two by two in What's
   my IP's grey boxes with the picture's icon at the top right, and the time of the answer under them. */
.pd .tool-main { padding: 26px var(--gutter) 0; }
.pd .tool { width: 100%; max-width: min(var(--narrow), 100%); margin: 0 auto; }
.pd .tool-h1 { --w: 95%; margin: 0 0 20px; font: 800 39.25px/1.14 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .tool-search { margin: 0; }
.pd .tool-search button { text-transform: none; background: var(--blue); box-shadow: none; }
.pd .tool-search button:hover { background: var(--blue-hover); }
@media (min-width: 760px) {      /* a phone keeps the site's own stacked search (the field over the button) */
  .pd .tool-search { padding: 4.25px 4.9px 4.25px 4.25px; gap: 6px; border-width: 7px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 103, 193, .12); }
  .pd .tool-search input { --w: 96%; height: 47px; padding: 0 11px; font-size: 24.2px; font-weight: 420; }
  .pd .tool-search button { --w: 93%; min-width: 230px; height: 47px; padding: 0 22px; font: 600 22px/1 var(--sans); border-radius: 7px; }
}
.pd .tool-hint { margin: 10px 0 22px; padding-left: 6px; font-size: 20.5px; line-height: 1.4; color: var(--faint); }
.pd .tool-hint.error { color: var(--pending); font-weight: 600; }
.pd .tool-hint code, .pd .tool-intro code { font: 400 .9em var(--mono); }
.pd .tool-intro { max-width: 1100px; margin: 0 0 30px; font-size: 22px; line-height: 1.55; color: var(--ink); }
.pd .tool-note { margin: 0 0 16px; font-size: 21px; line-height: 1.45; color: var(--heading); overflow-wrap: anywhere; }
.pd .tool-out { margin: 0 0 30px; padding: 20px 24px; font-size: 22px; line-height: 1.5; color: var(--heading); }
.pd .tool-out p { margin: 0; overflow-wrap: anywhere; }
.pd .tool-out p + p { margin-top: 10px; }
.pd .tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; margin: 0 0 20px; }
.pd .tool-box { position: relative; min-width: 0; background: var(--thead); }
.pd .tool-box .pd-tool-t { padding-right: 56px; text-transform: none; }
.pd .tool-box > .pd-i { position: absolute; top: 15px; right: 20px; height: 34px; color: var(--blue); }
.pd .tool-box .faint { color: var(--muted); }
.pd .tool-recs p { margin: 0 0 7px; font-size: 22px; line-height: 1.3; color: var(--heading); overflow-wrap: anywhere; }
.pd .tool-recs p:last-child { margin-bottom: 0; }
.pd .tool-a { display: flex; align-items: center; gap: 12px; }
.pd .tool-a a { color: var(--heading); text-decoration: none; font-size: 21px; }
.pd .tool-a a:hover { color: var(--blue); text-decoration: underline; }
.pd .tool-copy {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  color: var(--heading); background: var(--panel); border: 1.5px solid #8A8A8E; border-radius: 7px; cursor: pointer;
}
.pd .tool-copy .pd-i { height: 17px; }
.pd .tool-copy:hover { color: var(--blue); border-color: var(--blue); }
.pd .tool-copy.done { color: #fff; background: var(--dropped); border-color: var(--dropped); }
.pd.no-js .tool-copy { display: none; }
.pd .tool-pref { display: inline-block; min-width: 2.6em; margin-right: 6px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pd .tool-txt { font: 400 18.5px/1.45 var(--mono) !important; word-break: break-all; }
.pd .tool-more { margin-top: 14px !important; font-size: 19.5px !important; }
.pd .tool-seen { --w: 92%; margin: 0 0 30px; text-align: center; font-size: 21px; line-height: 1.3; color: var(--heading); }
/* the checker: a verdict on each card, the record, its notes; the detail tables under the cards */
.pd .tool-say { line-height: 1.4 !important; }
.pd .tool-verdict { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; padding: 3px 11px 3px 9px; border-radius: 999px;
                    font: 700 18px/1.3 var(--sans); vertical-align: 1px; }
.pd .tool-verdict .pd-i { height: 17px; }
.pd .tool-verdict.v-good { color: #0B5C34; background: var(--dropped-bg); }
.pd .tool-verdict.v-warn { color: #7A4A00; background: #FFF1CC; }
.pd .tool-verdict.v-bad  { color: #8F1F1F; background: #FDECEC; }
.pd .tool-mail.v-good { box-shadow: inset 5px 0 0 var(--dropped), var(--shadow); }
.pd .tool-mail.v-warn { box-shadow: inset 5px 0 0 #D49A00, var(--shadow); }
.pd .tool-mail.v-bad  { box-shadow: inset 5px 0 0 #C62828, var(--shadow); }
.pd .tool-code { margin-top: 12px !important; padding: 10px 12px; font: 400 18px/1.5 var(--mono) !important; background: var(--panel);
                 border: 1px solid var(--line); border-radius: 8px; word-break: break-all; }
.pd .tool-count { font-size: 20px !important; }
.pd .tool-count.over b { color: #B42B2B; }
.pd .tool-notes { margin: 10px 0 0; padding-left: 22px; font-size: 19.5px; line-height: 1.45; color: var(--heading); overflow-wrap: anywhere; }
.pd .tool-notes li + li { margin-top: 4px; }
.pd .tool-detail { margin: 0 0 20px; overflow: hidden; }
.pd .tool-table { width: 100%; border-collapse: collapse; font-size: 19.5px; line-height: 1.45; color: var(--heading); }
.pd .tool-table td { padding: 9px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
.pd .tool-table tr:first-child td { border-top: 0; }
.pd .tool-table td.mono { width: 34%; font: 400 17.5px/1.5 var(--mono); }
.pd .tool-table td.r { width: 1%; white-space: nowrap; text-align: right; color: var(--muted); }
.pd .tool-tree td.mono.faint { width: auto; color: var(--faint); }
.pd .tool-bad { color: #B42B2B; font-weight: 600; }
.pd .pg-tools-dns .legend-inner, .pd .pg-tools-mail .legend-inner { max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); column-gap: 24px; }
@media (max-width: 759px) {
  .pd .tool-main { padding: 22px 14px 0; }
  .pd .tool-h1 { margin-bottom: 14px; font-size: 27px; }
  .pd .tool-hint { margin: 8px 0 16px; font-size: 15.5px; }
  .pd .tool-intro, .pd .tool-out { font-size: 17px; }
  .pd .tool-out { padding: 14px 16px; }
  .pd .tool-note { font-size: 16px; }
  .pd .tool-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
  .pd .tool-box .pd-tool-t { padding-right: 40px; }
  .pd .tool-box > .pd-i { top: 13px; right: 16px; height: 25px; }
  .pd .tool-recs p { font-size: 17px; }
  .pd .tool-a a { font-size: 17px; }
  .pd .tool-copy { width: 30px; height: 30px; }
  .pd .tool-txt, .pd .tool-code { font-size: 14.5px !important; }
  .pd .tool-more, .pd .tool-count { font-size: 15.5px !important; }
  .pd .tool-verdict { font-size: 14.5px; }
  .pd .tool-notes { font-size: 15.5px; }
  .pd .tool-table { font-size: 15px; }
  .pd .tool-table td { padding: 8px 10px; }
  .pd .tool-table td.mono { width: 40%; font-size: 14px; }
  .pd .tool-seen { margin-bottom: 20px; font-size: 16px; }
}

/* ------------------------------------------------------- bulk check ---- */
/* /tools/bulk-domain-check (deploy 54), after his picture of 9 Oct: the box with its line numbers in a grey card,
   the count under it, the big blue button and its line; then the results card (its band with the Export button,
   a count of each status, the table) and the time zone line. The DNS tools' page name, width and questions. */
.pd .bulk-form { margin: 0 0 18px; padding: 18px 22px 20px; background: var(--thead); }
.pd .bulk-label { display: block; margin: 0 0 10px; font: 700 21px/1.3 var(--sans); color: var(--heading); }
.pd .bulk-box { display: flex; background: var(--panel); border: 2px solid #B9BCC3; border-radius: 10px; overflow: hidden; }
.pd .bulk-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 193, .15); }
.pd .bulk-nums {
  /* contain: size — the numbers never make the box taller than the box's own rows; they scroll with it instead */
  flex: 0 0 auto; width: 3.2em; contain: size; margin: 0; padding: 12px 10px 48px 12px; overflow: hidden; white-space: pre; text-align: right;
  font: 400 19px/1.5 var(--mono); color: var(--muted); background: var(--zebra); border-right: 1px solid var(--line); user-select: none;
}
.pd .bulk-box textarea {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 12px 14px; border: 0; outline: 0; resize: vertical; overflow: auto; white-space: pre;
  font: 400 19px/1.5 var(--mono); color: var(--heading); background: transparent;
}
.pd .bulk-box textarea::placeholder { color: var(--faint); opacity: 1; }
.pd .bulk-count { margin: 10px 0 14px; font-size: 20px; line-height: 1.3; color: var(--heading); }
.pd .bulk-count b, .pd .bulk-count strong { font-weight: 700; }
.pd .bulk-count.over b, .pd .bulk-count.over strong { color: #B42B2B; }
.pd .bulk-go {
  --w: 93%;
  display: block; width: 100%; height: 62px; padding: 0 20px; font: 700 25px/1 var(--sans); letter-spacing: .01em; color: #fff;
  background: var(--blue); border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 103, 193, .18); cursor: pointer;
}
.pd .bulk-go:hover { background: var(--blue-hover); }
.pd .bulk-note { margin: 12px 0 0; text-align: center; font-size: 19px; line-height: 1.4; color: var(--muted); }
.pd .bulk-error { margin-top: -6px; }
.pd .bulk-msg { margin-bottom: 10px; color: var(--muted); }
.pd .bulk-results { margin: 6px 0 16px; }
.pd .bulk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  padding: 11px 20px 11px 33.5px; background: var(--thead); border-bottom: 1px solid var(--line);
}
.pd .bulk-band { --w: 84%; margin: 0; font: 720 25.5px/1.18 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .bulk-export { margin: 0; }
.pd .bulk-export button {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; font: 600 19px/1 var(--sans);
  color: var(--heading); background: var(--panel); border: 1.5px solid #8A8A8E; border-radius: 8px; cursor: pointer;
}
.pd .bulk-export button:hover { color: var(--blue); border-color: var(--blue); }
.pd .bulk-export .pd-i { height: 20px; }
.pd .bulk-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px 14px 33.5px; font-size: 20px; color: var(--heading); }
.pd .bulk-total { margin-right: 6px; font-weight: 650; }
.pd table.bulk-table { table-layout: fixed; }
.pd table.bulk-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd table.bulk-table th.i, .pd table.bulk-table td.i { width: 96px; font-variant-numeric: tabular-nums; }
.pd table.bulk-table td.i { color: var(--muted); }
.pd table.bulk-table th.st, .pd table.bulk-table td.st { width: 268px; }
.pd table.bulk-table th.t, .pd table.bulk-table td.t { width: 380px; }
.pd table.bulk-table th.u, .pd table.bulk-table td.u { width: 236px; }
.pd table.bulk-table td.t { white-space: normal; font-size: 20px; line-height: 1.3; }
.pd table.bulk-table td.n a { display: block; overflow: hidden; text-overflow: ellipsis; }
.pd .bulk-table td.u { color: var(--heading); }
.pd .bulk-times { margin-bottom: 30px; }
.pd .pg-tools-bulk .legend-inner { max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); column-gap: 24px; }
@media (min-width: 760px) and (max-width: 1219px) {
  /* 760 to 1219 px draws the page at 0.72 and narrows it (about 1,000 px of the design at its narrowest): the name and
     the drop time share what the number, the status and the date leave, and the date's heading may take two lines */
  .pd table.bulk-table th.i, .pd table.bulk-table td.i { width: 84px; padding-left: 20px; }
  .pd table.bulk-table th.st, .pd table.bulk-table td.st { width: 250px; }
  .pd table.bulk-table th.t, .pd table.bulk-table td.t { width: auto; }
  .pd table.bulk-table th.u, .pd table.bulk-table td.u { width: 170px; white-space: normal; }
  .pd .bulk-head, .pd .bulk-sum { padding-left: 20px; }
}
@media (max-width: 759px) {
  .pd .bulk-form { padding: 14px 14px 16px; }
  .pd .bulk-label { font-size: 16px; }
  .pd .bulk-nums, .pd .bulk-box textarea { font-size: 15px; }
  .pd .bulk-nums { width: 2.8em; padding: 10px 8px 40px 8px; }
  .pd .bulk-box textarea { padding: 10px; }
  .pd .bulk-count { margin: 8px 0 12px; font-size: 15.5px; }
  .pd .bulk-go { height: 52px; font-size: 19px; }
  .pd .bulk-note { font-size: 14.5px; }
  .pd .bulk-head { padding: 10px 14px; }
  .pd .bulk-band { font-size: 18px; }
  .pd .bulk-export button { height: 38px; padding: 0 12px; font-size: 15.5px; }
  .pd .bulk-export .pd-i { height: 17px; }
  .pd .bulk-sum { gap: 6px 8px; padding: 12px 14px; font-size: 15.5px; }
  /* the table as one block per name: the number and the name, then its status, what we know, and when */
  .pd table.bulk-table, .pd table.bulk-table tbody { display: block; }
  .pd table.bulk-table thead { display: none; }
  .pd table.bulk-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: center;
                            padding: 11px 14px; border-top: 1px solid var(--line-soft); }
  .pd table.bulk-table tbody tr:first-child { border-top: 0; }
  .pd table.bulk-table tbody tr:nth-child(even) { background: var(--zebra); }
  .pd table.bulk-table tr > td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15.5px; }
  .pd table.bulk-table td.i { grid-column: 1; grid-row: 1; min-width: 1.6em; font-size: 14px; }
  .pd table.bulk-table td.n { grid-column: 2; grid-row: 1; }
  .pd table.bulk-table td.n a { font-size: 16.5px; }
  .pd table.bulk-table td.st { grid-column: 2; grid-row: 2; }
  .pd table.bulk-table td.t { grid-column: 2; grid-row: 3; font-size: 14.5px; color: var(--muted); }
  .pd table.bulk-table td.u { grid-column: 2; grid-row: 4; font-size: 14px; color: var(--muted); }
  .pd table.bulk-table td.u[data-l]::before { content: attr(data-l) ": "; }
  .pd table.bulk-table td.t:empty { display: none; }
}

/* ---------------------------------------------------- advanced search ---- */
/* /tools/advanced-search (56), after his picture of 9 Oct (Gemini's draft): grey cards with bold headings, white
   fields, iOS-style rocker switches, blue range sliders with white knobs, blue / outlined / orange buttons, and the
   table in the lists' style. The page is as wide as the header's contents. */
.pd .srch-wrap { width: 100%; max-width: min(var(--narrow), 100%); margin: 0 auto; }
.pd .srch-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin: 0 0 16px; }
.pd .srch-top .tool-h1 { margin: 0; }
.pd .srch-rockers { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; }
.pd .srch-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 0 0 20px; }
.pd .srch-card { min-width: 0; margin: 0 0 20px; padding: 18px 22px 20px; background: #EDEEF1; border: 1px solid #D5D7DC; border-radius: 16px;
                 box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.pd .srch-row > .srch-card { margin: 0; }
.pd .srch-h { margin: 0 0 14px; font: 750 26px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .srch-sub { display: block; margin: 0 0 8px; font: 700 21px/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .srch-note { margin: 8px 0 0; font-size: 17.5px; line-height: 1.4; color: var(--muted); }
.pd .srch-in, .pd .srch-sel {
  box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; font: 400 21px/1.2 var(--sans); color: var(--heading);
  background: var(--panel); border: 1.5px solid #C3C6CC; border-radius: 9px; outline: 0;
}
.pd .srch-sel { width: auto; padding-right: 34px; cursor: pointer; }
.pd .srch-in:focus, .pd .srch-sel:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 193, .15); }
.pd .srch-in::placeholder { color: #767A80; opacity: 1; }
.pd.no-js .js-only { display: none; }
/* Keywords: the text and its options beside the length slider; words left out and the pattern under them */
.pd .srch-kw-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.pd .srch-kw-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.pd .srch-kw-opts .srch-sel { max-width: 100%; min-width: 0; }
.pd .srch-kw-opts .srch-pick { flex: 1 1 220px; width: 100%; }
/* the TLD matrix: two columns of tick boxes, each in two, and a box for any other */
.pd .srch-tld-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.pd .srch-tld-more { margin-top: 14px; }
.pd .srch-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; }
.pd .srch-checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd .srch-tld .srch-check-l { flex: 0 0 auto; }
.pd .srch-check { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 21px; line-height: 1.3; color: var(--heading); cursor: pointer; }
.pd .srch-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.pd .srch-check-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .srch-n { flex: 0 0 auto; margin-left: auto; font-size: 17px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd .srch-hc { margin-top: 12px; }
/* Drop Specifics & Metrics: four columns, a hairline between the last three */
.pd .srch-drop-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, 1.25fr); gap: 0 26px; }
.pd .srch-drop-cols > div + div { padding-left: 26px; border-left: 1px solid #CDD0D6; }
.pd .srch-date { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 10px; font-size: 19px; color: var(--ink); }
.pd .srch-date .srch-in { height: 46px; font-size: 19px; }
.pd .srch-regs .srch-check { font-size: 19px; }
.pd .srch-step { margin: 0 0 16px; }
.pd .srch-step-l { font: 650 19.5px/1.3 var(--sans); color: var(--heading); }
.pd .srch-step .srch-val { margin-left: 8px; }
/* Words & Age */
.pd .srch-words-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.pd .srch-wd .srch-rocker { margin: 2px 0 16px; }
.pd .srch-wd .srch-sel { min-width: 140px; }
/* the values the sliders show, and the sliders: a grey track, the chosen part blue, white knobs ringed in blue */
.pd .srch-val { display: inline-block; font-size: 20px; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd .srch-range { position: relative; height: 30px; margin: 8px 4px 0; }
.pd .srch-range::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 7px; border-radius: 4px; background: #D3D6DB; }
.pd .srch-fill { position: absolute; top: 12px; height: 7px; border-radius: 4px; background: var(--blue); }
.pd .srch-range input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.pd .srch-range.one input[type=range] { pointer-events: auto; }
.pd .srch-range input[type=range]::-webkit-slider-runnable-track { height: 30px; background: none; border: 0; }
.pd .srch-range input[type=range]::-moz-range-track { height: 30px; background: none; border: 0; }
.pd .srch-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer;
}
.pd .srch-range input[type=range]::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer;
}
.pd .srch-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 103, 193, .3); }
.pd .srch-range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(0, 103, 193, .3); }
.pd.no-js .srch-fill { display: none; }
/* the rocker switches: grey when off, blue when on, a white knob that slides */
.pd .srch-rocker { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 600 22px/1.2 var(--sans); color: var(--heading); }
.pd .srch-rocker input[type=checkbox] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pd .srch-rk { position: relative; flex: 0 0 auto; width: 58px; height: 32px; border-radius: 16px; background: #C4C8CE; transition: background .15s; order: 2; }
.pd .srch-rk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
                      box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.pd .srch-rocker input:checked + .srch-rk { background: var(--blue); }
.pd .srch-rocker input:checked + .srch-rk::after { transform: translateX(26px); }
.pd .srch-rocker input:focus-visible + .srch-rk { box-shadow: 0 0 0 4px rgba(0, 103, 193, .3); }
.pd .srch-rk-l { order: 1; }
/* the buttons: Apply (blue), Clear all (outlined), Export (the site's orange) */
.pd .srch-actions { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 22px; background: #EDEEF1;
                    border: 1px solid #D5D7DC; border-radius: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.pd .srch-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.pd .srch-go, .pd .srch-clear, .pd .srch-csv {
  --w: 93%;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 56px; padding: 0 26px;
  font: 700 22px/1 var(--sans); letter-spacing: .01em; text-decoration: none; border-radius: 9px; cursor: pointer;
}
.pd .srch-go { color: #fff; background: var(--blue); border: 0; box-shadow: 0 2px 6px rgba(0, 103, 193, .25); }
.pd .srch-go:hover { background: var(--blue-hover); }
.pd .srch-clear { color: var(--heading); background: var(--panel); border: 1.5px solid #3A3A3F; }
.pd .srch-clear:hover { color: var(--blue); border-color: var(--blue); }
.pd .srch-csv { flex: 1 1 auto; color: #fff; background: var(--orange); border: 0; box-shadow: 0 2px 6px rgba(244, 104, 32, .25); }
.pd .srch-csv:hover { background: var(--orange-hover); }
.pd .srch-intro { margin-top: 4px; }
/* 83: once a search has found names the filters step aside (form.is-shut, drawn by the server) and this bar stands
   in their place: what is applied, the button that opens them again where they are, Clear all and Export. The
   fields stay in the form while they are out of sight. Shut, the button is the page's blue one ("Change filters");
   open, it is the quiet outlined one ("Hide filters") and Apply is the blue one. Without JavaScript nothing is shut. */
.pd .srch.is-shut .srch-body, .pd .srch.is-shut .srch-rockers { display: none; }
.pd.no-js .srch.is-shut .srch-body { display: block; }
.pd.no-js .srch.is-shut .srch-rockers { display: flex; }
.pd.no-js .srch-tog, .pd.no-js .srch-hide { display: none; }
.pd .srch-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 20px; padding: 13px 14px 13px 22px;
                background: #EDEEF1; border: 1px solid #D5D7DC; border-radius: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.pd .srch-bar-what { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; flex: 1 1 380px; min-width: 0; }
.pd .srch-bar-t { margin-right: 4px; font: 750 23px/1.2 var(--sans); color: var(--heading); }
.pd .srch-chip { box-sizing: border-box; max-width: 100%; padding: 6px 14px 7px; font: 500 19.5px/1.25 var(--sans); color: var(--heading); background: var(--panel);
                 border: 1px solid #C6C9CF; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .srch-chip.none { color: var(--muted); }
.pd .srch-bar-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; flex: 0 0 auto; }
.pd .srch-tog {
  --w: 93%;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px; box-sizing: border-box; height: 52px; padding: 0 20px 0 18px;
  font: 700 21.5px/1 var(--sans); letter-spacing: .01em; color: #fff; background: var(--blue); border: 1.5px solid var(--blue); border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0, 103, 193, .25); cursor: pointer;
}
.pd .srch-tog:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.pd .srch-tog .pd-i { flex: 0 0 auto; height: 18px; width: 18px; }
.pd .srch-tog-c { flex: 0 0 auto; width: 9px; height: 9px; margin: -5px 2px 0 1px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pd .srch:not(.is-shut) .srch-tog { color: var(--heading); background: var(--panel); border-color: #3A3A3F; box-shadow: none; }
.pd .srch:not(.is-shut) .srch-tog:hover { color: var(--blue); border-color: var(--blue); }
.pd .srch:not(.is-shut) .srch-tog-c { margin-top: 5px; transform: rotate(-135deg); }
.pd .srch:not(.is-shut) .srch-bar-x { display: none; }
.pd .srch-bar .srch-clear, .pd .srch-bar .srch-csv { flex: 0 0 auto; height: 52px; padding: 0 18px; font-size: 19.5px; }
.pd .srch-hide { align-self: flex-start; margin: 2px 0 0; padding: 0; font: 600 19.5px/1.3 var(--sans); color: var(--blue); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pd .srch-hide:hover { color: var(--blue-hover); }
.pd .srch-tog:focus-visible, .pd .srch-hide:focus-visible { outline: 3px solid rgba(0, 103, 193, .45); outline-offset: 2px; }
/* 84: /drop-list is this page set to a view; under its table, the drop list's own lines — the extensions with a
   list of their own (links, the one shown in bold), the files, the small print */
.pd .srch-exts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 22px 0 0; }
.pd .srch-exts .on { font-weight: 700; color: var(--heading); }
.pd .srch-wrap > .drops-sub.download { margin-top: 14px; }
.pd .srch-wrap > .ip-foot { margin-bottom: 8px; }
/* the results: the count over the table, the table in the lists' style */
.pd .srch-results { margin: 0 0 18px; }
.pd .srch-res-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding: 16px 23px 14px 33.5px; }
.pd .srch-res-t { margin: 0; font: 750 25px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); }
.pd .srch-res-meta { margin: 0; font-size: 19.5px; color: var(--ink); }
.pd table.srch-table { table-layout: fixed; }
.pd table.srch-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd table.srch-table th a { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.pd table.srch-table th a:hover { color: var(--blue); }
.pd table.srch-table th.i, .pd table.srch-table td.i { width: 104px; padding-right: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }      /* up to "10,000" */
.pd table.srch-table th.st, .pd table.srch-table td.st { width: 234px; }      /* "Pending Delete" with its icon (82: the tables' short words; 262 px for "Redemption Period") */
.pd table.srch-table th.t, .pd table.srch-table td.t { width: 194px; }      /* "Tomorrow est." (82; 250 px for "Oct 10, 12:20 PM est.") */
.pd table.srch-table th.age, .pd table.srch-table td.age { width: 150px; }      /* "Registered" with its arrows */
.pd table.srch-table th.rk, .pd table.srch-table td.rk { width: 150px; }      /* "top 0.042%" */
.pd table.srch-table th.ld, .pd table.srch-table td.ld { width: 158px; }      /* "1,234,567" */
.pd table.srch-table th.rk, .pd table.srch-table th.ld { white-space: normal; }
.pd table.srch-table td.n a { display: block; overflow: hidden; text-overflow: ellipsis; }
.pd table.srch-table td.age, .pd table.srch-table td.ld { font-variant-numeric: tabular-nums; }
.pd .pg-tools-search .legend-inner { max-width: min(calc(var(--narrow) + 2 * var(--gutter)), 100%); column-gap: 24px; }
@media (min-width: 760px) and (max-width: 1219px) {
  /* 760 to 1219 px: the page is drawn at 0.72 and narrows (about 1,000 px of the design at its narrowest) */
  .pd .srch-kw-grid, .pd .srch-words-cols { grid-template-columns: minmax(0, 1fr); }
  .pd .srch-drop-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
  .pd .srch-drop-cols > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .pd table.srch-table th.i, .pd table.srch-table td.i { width: 70px; padding-left: 20px; }
  .pd table.srch-table th.age, .pd table.srch-table td.age { display: none; }
  .pd .srch-res-head { padding-left: 20px; }
}
@media (max-width: 759px) {
  .pd .srch-top { margin-bottom: 12px; }
  .pd .srch-bar { gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 14px; }
  .pd .srch-bar-what { flex-basis: 100%; gap: 6px 7px; }
  .pd .srch-bar-t { font-size: 17px; }
  .pd .srch-chip { padding: 4px 10px 5px; font-size: 14.5px; }
  .pd .srch-bar-acts { flex: 1 1 100%; gap: 8px; }
  .pd .srch-tog { flex: 1 1 100%; height: 48px; font-size: 17px; }
  .pd .srch-tog .pd-i { height: 15px; width: 15px; }
  .pd .srch-bar .srch-clear, .pd .srch-bar .srch-csv { flex: 1 1 auto; height: 46px; padding: 0 12px; font-size: 15px; }
  .pd .srch-hide { font-size: 16px; }
  .pd .srch-rockers { gap: 10px 18px; }
  .pd .srch-rocker { gap: 8px; font-size: 16px; }
  .pd .srch-rk { width: 46px; height: 26px; }
  .pd .srch-rk::after { width: 20px; height: 20px; }
  .pd .srch-rocker input:checked + .srch-rk::after { transform: translateX(20px); }
  .pd .srch-row { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
  .pd .srch-card { margin-bottom: 14px; padding: 14px 14px 16px; border-radius: 14px; }
  .pd .srch-h { margin-bottom: 10px; font-size: 19px; }
  .pd .srch-sub { font-size: 16px; }
  .pd .srch-note { font-size: 14px; }
  .pd .srch-in, .pd .srch-sel { height: 44px; font-size: 16px; }
  .pd .srch-kw-grid, .pd .srch-tld-cols, .pd .srch-words-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pd .srch-drop-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pd .srch-drop-cols > div + div { padding: 14px 0 0; border-left: 0; border-top: 1px solid #CDD0D6; }
  .pd .srch-check { font-size: 16px; }
  .pd .srch-check input { width: 20px; height: 20px; }
  .pd .srch-n { font-size: 14px; }
  .pd .srch-regs .srch-check, .pd .srch-date { font-size: 16px; }
  .pd .srch-date .srch-in { font-size: 16px; }
  .pd .srch-step-l, .pd .srch-val { font-size: 16px; }
  .pd .srch-actions { padding: 14px; }
  .pd .srch-go, .pd .srch-clear, .pd .srch-csv { flex: 1 1 auto; height: 50px; padding: 0 16px; font-size: 17px; }
  .pd .srch-res-head { padding: 12px 14px; }
  .pd .srch-res-t { font-size: 18px; }
  .pd .srch-res-meta { font-size: 14px; }
  /* the table as one block per name: the number and the name, then its status and drop date, then the figures */
  .pd table.srch-table, .pd table.srch-table tbody { display: block; }
  .pd table.srch-table thead { display: none; }
  .pd table.srch-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center;
                            padding: 11px 14px; border-top: 1px solid var(--line-soft); }
  .pd table.srch-table tbody tr:first-child { border-top: 0; }
  .pd table.srch-table tbody tr:nth-child(even) { background: var(--zebra); }
  .pd table.srch-table tr > td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px; }
  .pd table.srch-table td.i { grid-column: 1; grid-row: 1; font-size: 14px; }
  .pd table.srch-table td.n { grid-column: 2 / span 2; grid-row: 1; }
  .pd table.srch-table td.n a { font-size: 16.5px; }
  .pd table.srch-table td.st { grid-column: 2; grid-row: 2; }
  .pd table.srch-table td.t { grid-column: 3; grid-row: 2; font-size: 14.5px; color: var(--muted); text-align: right; }
  .pd table.srch-table td.age, .pd table.srch-table td.rk, .pd table.srch-table td.ld { display: inline-block; font-size: 14px; color: var(--muted); }
  .pd table.srch-table td.age { grid-column: 2; grid-row: 3; }
  .pd table.srch-table td.rk { grid-column: 3; grid-row: 3; text-align: right; }
  .pd table.srch-table td.ld { grid-column: 2; grid-row: 4; }
  .pd table.srch-table td[data-l]::before { content: attr(data-l) ": "; }
  .pd table.srch-table td.none { display: none !important; }
}

/* ------------------------------------------- the profile's picture (62) ---- */
/* Edit profile, box 1: the picture (or the initials, in the header's grey circle) beside its switch and note. */
.pd .acct-grav { display: flex; align-items: flex-start; gap: 16px; margin: 16px 0 18px; }
.pd .acct-grav-av {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden;
  font: 500 22px/1 var(--sans); color: #fff; background: #647082; border-radius: 50%;
}
.pd .acct-grav-av.pic { background: none; }
.pd .acct-grav-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd .acct-grav .acct-grav-check { margin: 4px 0 6px; }
.pd .acct-grav .f-note { margin: 0; }
@media (max-width: 759px) {
  .pd .acct-grav { gap: 12px; }
  .pd .acct-grav-av { width: 44px; height: 44px; font-size: 17px; }
}

/* ------------------------------------------------ the Rank scale (61) ---- */
/* How it works: the table of places and their 0–10 scores, under the Rank paragraph. */
.pd table.obs.rank-scale { width: auto; max-width: 100%; margin: 4px 0 22px; }
.pd table.obs.rank-scale th:nth-child(1), .pd table.obs.rank-scale td:nth-child(1) { width: 380px; }
.pd table.obs.rank-scale th:nth-child(2), .pd table.obs.rank-scale td:nth-child(2) { width: 260px; }
.pd table.obs.rank-scale th.r, .pd table.obs.rank-scale td.r { width: 110px; padding-right: 23px; font-variant-numeric: tabular-nums; }
.pd table.obs.rank-scale td { font-variant-numeric: tabular-nums; }
@media (max-width: 759px) {
  /* a phone: three narrow columns that wrap, rather than the stacked rows other tables become */
  .pd table.obs.rank-scale { width: 100%; table-layout: fixed; }
  .pd table.obs.rank-scale th, .pd table.obs.rank-scale td { white-space: normal; overflow-wrap: anywhere; padding: 10px 8px; font-size: 15px; }
  .pd table.obs.rank-scale th:nth-child(1), .pd table.obs.rank-scale td:nth-child(1) { width: 42%; padding-left: 12px; }
  .pd table.obs.rank-scale th:nth-child(2), .pd table.obs.rank-scale td:nth-child(2) { width: 36%; }
  .pd table.obs.rank-scale th.r, .pd table.obs.rank-scale td.r { width: 22%; padding-right: 12px; }
}

/* -------------------------------------------------- domain extractor ---- */
/* /tools/domain-extractor (57): the bulk check's grey card and box (no line numbers: a paste wraps), its big blue
   button, and under it the advanced search's buttons — Copy list and Clear box outlined, Download .txt in the
   export's orange — with the advanced search's rocker for "Keep subdomains" beside the line over the box. */
.pd .xt-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 10px; }
.pd .xt-top .xt-label { margin: 0; }
.pd .xt-subs { font-size: 20px; }
.pd .xt-box textarea { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 200px; }
.pd .xt-count { min-height: 1.3em; }
.pd .xt-count:empty { margin-bottom: 0; }
.pd .xt-btns { display: flex; gap: 14px; margin: 14px 0 0; }
.pd .xt-btns > button { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.pd .xt-nojs { display: none; margin: 14px 0 0; color: var(--muted); }
.pd.no-js .xt-nojs { display: block; }
.pd.no-js .xt-go, .pd.no-js .xt-btns, .pd.no-js .xt-note, .pd.no-js .xt-subs, .pd.no-js .xt-count { display: none; }
@media (max-width: 759px) {
  .pd .xt-subs { font-size: 16px; }
  .pd .xt-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy clear" "dl dl"; gap: 10px; margin-top: 10px; }
  .pd .xt-copy { grid-area: copy; }
  .pd .xt-clear { grid-area: clear; }
  .pd .xt-dl { grid-area: dl; }
}

/* ------------------------------------------------------------ statuses ---- */
/* A status in a list or a table (54, his picture of 9 Oct): the icon and the word in the state's colours, nothing
   behind them (lib/wording.php status_tag). The colours are the lifecycle's, as on a name's page (site.css
   .result.st-*): the icon the bright one, the word the darker one that reads on white. */
.pd .pd-st { display: inline-flex; align-items: center; gap: .38em; max-width: 100%; white-space: nowrap; vertical-align: middle;
             font-weight: 450; color: var(--st-ink, var(--muted)); }
.pd .pd-st .pd-i { flex: 0 0 auto; height: 1em; vertical-align: 0; color: var(--st, var(--muted)); }
.pd .pd-st-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd .pd-st:not([data-asis]) .pd-st-w { text-transform: capitalize; }
.pd .pd-st.s-dropped    { --st: #12A150; --st-ink: #0F7A45; }
.pd .pd-st.s-pending    { --st: #F2B807; --st-ink: #8A6400; }
.pd .pd-st.s-redemption { --st: #E8730C; --st-ink: #A84E00; }
.pd .pd-st.s-registered { --st: #D93A3A; --st-ink: #B42B2B; }
.pd .pd-st.s-neutral    { --st: #6B7A8B; --st-ink: #3D4A57; }
.pd .bulk-sum .pd-st { margin-right: 6px; }

/* -------------------------------------------- Table text size (66) ---- */
/* Look and feel → Table text size, one slider per page with a list of names (lib/content.php theme_table): the
   layout prints that page's value as --tz, and the class "tz" on <body>, when it is under 100. `zoom` draws the list's
   text, rows, icons and padding that much smaller together; the table keeps its width (width: 100% is the card's, in
   Chrome and Safari alike). Desktop windows only: under 760 px the lists have their own phone layouts. On Dropping
   today only the names' table, not the extensions' summary under it.
   The room that frees goes to the words (his word: "make sure … the content in the rows take advantage of that extra
   space"): below 100 every column but the name's is as wide as its own words (width: 1% in an auto layout, so a
   status, a date or a figure is never cut), the countdown keeps its steady width (it ticks), and the name takes all
   the rest (width: 100% with max-width: 0, cut with "…" only when even that is too short). At 100 the designed widths
   stand. Bulk check's note column wraps, so it keeps its width. */
@media (min-width: 760px) {
  .pd table.droplist, .pd table.pd-table, .pd table.pd-today { zoom: var(--tz, 1); }
  /* body.wb (70): the WB Captures column is on — one column more than the designed widths were drawn for, so the
     lists share the room the same way at 100 (every column as wide as its words, the name takes the rest). */
  .pd body:is(.tz, .wb) table.droplist, .pd body:is(.tz, .wb) table.srch-table, .pd body:is(.tz, .wb) table.drops-table.pd-table, .pd body.tz table.bulk-table { table-layout: auto; }
  .pd body:is(.tz, .wb) table.droplist :is(th, td):not(.n):not(.c),
  .pd body:is(.tz, .wb) table.srch-table :is(th, td):not(.n),
  .pd body:is(.tz, .wb) table.drops-table.pd-table :is(th, td):not(.n):not(:first-child):not(.c),
  .pd body.tz table.bulk-table :is(th, td):not(.n):not(.t) { width: 1%; }
  .pd body:is(.tz, .wb) table.droplist td.n, .pd body:is(.tz, .wb) table.srch-table td.n, .pd body:is(.tz, .wb) table.drops-table.pd-table td.n,
  .pd body.tz table.bulk-table td.n { width: 100%; max-width: 0; }
  .pd body:is(.tz, .wb) table.droplist th.c, .pd body:is(.tz, .wb) table.drops-table.pd-table th.c { min-width: 166px; }      /* the countdown ticks: a steady width */
}

/* --------------------------------------------- a list swapped in place (67) ---- */
/* assets/listnav.js: while a sort or a page button is fetching, the list it will replace fades a little. */
.pd [data-ajax-list][aria-busy="true"] { opacity: .55; transition: opacity .15s ease; cursor: progress; }

/* -------------------------------------------------------- scale steps ---- */
/* Generated (devtools/zoombands.py — its header says how and why). The design above is
   drawn for a window 1694 px wide. From 1220 px up the page is scaled to the window, a step
   every 4%, so it keeps the mockups' proportions on any monitor; from 760 to 1219 px it is
   drawn at 0.72 and narrows instead. In a window more than twice as wide as it is tall, the
   height sets the scale. (Look and feel → Page size takes a share of this scale and never
   goes under the first step: --s and --z-min, at .pd body.) */
@media (min-width: 760px) { :root { --z: 0.72; } }
@media (min-width: 1220px) { :root { --z: 0.734; } }
@media (min-width: 1269px) { :root { --z: 0.764; } }
@media (min-width: 1320px) { :root { --z: 0.794; } }
@media (min-width: 1373px) { :root { --z: 0.826; } }
@media (min-width: 1428px) { :root { --z: 0.859; } }
@media (min-width: 1485px) { :root { --z: 0.894; } }
@media (min-width: 1544px) { :root { --z: 0.929; } }
@media (min-width: 1606px) { :root { --z: 0.966; } }
@media (min-width: 1670px) { :root { --z: 1.005; } }
@media (min-width: 1737px) { :root { --z: 1.045; } }
@media (min-width: 1806px) { :root { --z: 1.087; } }
@media (min-width: 1878px) { :root { --z: 1.130; } }
@media (min-width: 1953px) { :root { --z: 1.175; } }
@media (min-width: 2031px) { :root { --z: 1.222; } }
@media (min-width: 2112px) { :root { --z: 1.271; } }
@media (min-width: 2196px) { :root { --z: 1.322; } }
@media (min-width: 2284px) { :root { --z: 1.375; } }
@media (min-width: 2375px) { :root { --z: 1.429; } }
@media (min-width: 2470px) { :root { --z: 1.487; } }
@media (min-width: 2569px) { :root { --z: 1.546; } }
@media (min-width: 2672px) { :root { --z: 1.608; } }
@media (min-width: 2779px) { :root { --z: 1.673; } }
@media (min-width: 2890px) { :root { --z: 1.740; } }
@media (min-width: 3006px) { :root { --z: 1.809; } }
@media (min-width: 3126px) { :root { --z: 1.882; } }
@media (min-width: 3251px) { :root { --z: 1.957; } }
@media (min-width: 3381px) { :root { --z: 2.035; } }
@media (min-width: 3516px) { :root { --z: 2.116; } }
@media (min-width: 3657px) { :root { --z: 2.201; } }
@media (min-width: 3803px) { :root { --z: 2.289; } }
@media (min-width: 3955px) { :root { --z: 2.381; } }
@media (min-width: 4113px) { :root { --z: 2.476; } }
@media (min-width: 4278px) { :root { --z: 2.575; } }
@media (min-width: 4449px) { :root { --z: 2.678; } }
@media (min-width: 4627px) { :root { --z: 2.785; } }
@media (min-width: 4812px) { :root { --z: 2.896; } }
@media (min-width: 5004px) { :root { --z: 3.012; } }
@media (min-width: 5204px) { :root { --z: 3.133; } }
@media (min-width: 5412px) { :root { --z: 3.258; } }
@media (min-width: 5628px) { :root { --z: 3.388; } }
@media (min-width: 5853px) { :root { --z: 3.523; } }
@media (min-width: 6087px) { :root { --z: 3.664; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) { :root { --z: 0.72; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 610px) { :root { --z: 0.734; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 634px) { :root { --z: 0.763; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 659px) { :root { --z: 0.793; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 685px) { :root { --z: 0.824; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 712px) { :root { --z: 0.856; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 740px) { :root { --z: 0.891; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 770px) { :root { --z: 0.927; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 801px) { :root { --z: 0.964; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 833px) { :root { --z: 1.002; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 866px) { :root { --z: 1.042; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 901px) { :root { --z: 1.084; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 937px) { :root { --z: 1.127; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 974px) { :root { --z: 1.172; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1013px) { :root { --z: 1.219; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1054px) { :root { --z: 1.268; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1096px) { :root { --z: 1.319; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1140px) { :root { --z: 1.372; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1186px) { :root { --z: 1.427; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1233px) { :root { --z: 1.484; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1282px) { :root { --z: 1.543; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1333px) { :root { --z: 1.604; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1386px) { :root { --z: 1.668; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1441px) { :root { --z: 1.735; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1499px) { :root { --z: 1.804; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1559px) { :root { --z: 1.876; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1621px) { :root { --z: 1.951; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1686px) { :root { --z: 2.029; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1753px) { :root { --z: 2.110; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1823px) { :root { --z: 2.194; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1896px) { :root { --z: 2.282; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 1972px) { :root { --z: 2.374; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2051px) { :root { --z: 2.469; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2133px) { :root { --z: 2.567; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2218px) { :root { --z: 2.670; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2307px) { :root { --z: 2.777; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2399px) { :root { --z: 2.888; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2495px) { :root { --z: 3.004; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2595px) { :root { --z: 3.124; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2699px) { :root { --z: 3.249; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2807px) { :root { --z: 3.379; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 2919px) { :root { --z: 3.514; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 3036px) { :root { --z: 3.655; } }
@media (min-width: 1220px) and (min-aspect-ratio: 2/1) and (min-height: 3157px) { :root { --z: 3.800; } }

/* Look and feel → Text size: the scale times --t, by a class on <html>. Given in full where
   the layout has room for it and as much as fits where it has not, in steps of 2%. */
.pd-t106 { --t: 1.06; }
@media (max-width: 339px) { .pd-t106 { --t: 1.04; } }
@media (max-width: 332px) { .pd-t106 { --t: 1.02; } }
@media (max-width: 326px) { .pd-t106 { --t: 1.00; } }
@media (min-width: 760px) and (max-width: 805px) { .pd-t106 { --t: 1.04; } }
@media (min-width: 760px) and (max-width: 790px) { .pd-t106 { --t: 1.02; } }
@media (min-width: 760px) and (max-width: 775px) { .pd-t106 { --t: 1.00; } }
@media (min-width: 900px) and (max-width: 953px) { .pd-t106 { --t: 1.04; } }
@media (min-width: 900px) and (max-width: 935px) { .pd-t106 { --t: 1.02; } }
@media (min-width: 900px) and (max-width: 917px) { .pd-t106 { --t: 1.00; } }
@media (min-width: 1000px) and (max-width: 1059px) { .pd-t106 { --t: 1.04; } }
@media (min-width: 1000px) and (max-width: 1039px) { .pd-t106 { --t: 1.02; } }
@media (min-width: 1000px) and (max-width: 1019px) { .pd-t106 { --t: 1.00; } }
.pd-t112 { --t: 1.12; }
@media (max-width: 358px) { .pd-t112 { --t: 1.10; } }
@media (max-width: 351px) { .pd-t112 { --t: 1.08; } }
@media (max-width: 345px) { .pd-t112 { --t: 1.06; } }
@media (max-width: 339px) { .pd-t112 { --t: 1.04; } }
@media (max-width: 332px) { .pd-t112 { --t: 1.02; } }
@media (max-width: 326px) { .pd-t112 { --t: 1.00; } }
@media (min-width: 760px) and (max-width: 851px) { .pd-t112 { --t: 1.10; } }
@media (min-width: 760px) and (max-width: 836px) { .pd-t112 { --t: 1.08; } }
@media (min-width: 760px) and (max-width: 820px) { .pd-t112 { --t: 1.06; } }
@media (min-width: 760px) and (max-width: 805px) { .pd-t112 { --t: 1.04; } }
@media (min-width: 760px) and (max-width: 790px) { .pd-t112 { --t: 1.02; } }
@media (min-width: 760px) and (max-width: 775px) { .pd-t112 { --t: 1.00; } }
@media (min-width: 900px) and (max-width: 999px) { .pd-t112 { --t: 1.10; } }
@media (min-width: 900px) and (max-width: 990px) { .pd-t112 { --t: 1.08; } }
@media (min-width: 900px) and (max-width: 972px) { .pd-t112 { --t: 1.06; } }
@media (min-width: 900px) and (max-width: 953px) { .pd-t112 { --t: 1.04; } }
@media (min-width: 900px) and (max-width: 935px) { .pd-t112 { --t: 1.02; } }
@media (min-width: 900px) and (max-width: 917px) { .pd-t112 { --t: 1.00; } }
@media (min-width: 1000px) and (max-width: 1099px) { .pd-t112 { --t: 1.08; } }
@media (min-width: 1000px) and (max-width: 1079px) { .pd-t112 { --t: 1.06; } }
@media (min-width: 1000px) and (max-width: 1059px) { .pd-t112 { --t: 1.04; } }
@media (min-width: 1000px) and (max-width: 1039px) { .pd-t112 { --t: 1.02; } }
@media (min-width: 1000px) and (max-width: 1019px) { .pd-t112 { --t: 1.00; } }
@media (min-width: 1100px) and (max-width: 1156px) { .pd-t112 { --t: 1.10; } }
@media (min-width: 1100px) and (max-width: 1135px) { .pd-t112 { --t: 1.08; } }
@media (min-width: 1100px) and (max-width: 1115px) { .pd-t112 { --t: 1.06; } }
.pd-t118 { --t: 1.18; }
@media (max-width: 377px) { .pd-t118 { --t: 1.16; } }
@media (max-width: 371px) { .pd-t118 { --t: 1.14; } }
@media (max-width: 364px) { .pd-t118 { --t: 1.12; } }
@media (max-width: 358px) { .pd-t118 { --t: 1.10; } }
@media (max-width: 351px) { .pd-t118 { --t: 1.08; } }
@media (max-width: 345px) { .pd-t118 { --t: 1.06; } }
@media (max-width: 339px) { .pd-t118 { --t: 1.04; } }
@media (max-width: 332px) { .pd-t118 { --t: 1.02; } }
@media (max-width: 326px) { .pd-t118 { --t: 1.00; } }
@media (min-width: 760px) and (max-width: 896px) { .pd-t118 { --t: 1.16; } }
@media (min-width: 760px) and (max-width: 881px) { .pd-t118 { --t: 1.14; } }
@media (min-width: 760px) and (max-width: 866px) { .pd-t118 { --t: 1.12; } }
@media (min-width: 760px) and (max-width: 851px) { .pd-t118 { --t: 1.10; } }
@media (min-width: 760px) and (max-width: 836px) { .pd-t118 { --t: 1.08; } }
@media (min-width: 760px) and (max-width: 820px) { .pd-t118 { --t: 1.06; } }
@media (min-width: 760px) and (max-width: 805px) { .pd-t118 { --t: 1.04; } }
@media (min-width: 760px) and (max-width: 790px) { .pd-t118 { --t: 1.02; } }
@media (min-width: 760px) and (max-width: 775px) { .pd-t118 { --t: 1.00; } }
@media (min-width: 900px) and (max-width: 999px) { .pd-t118 { --t: 1.10; } }
@media (min-width: 900px) and (max-width: 990px) { .pd-t118 { --t: 1.08; } }
@media (min-width: 900px) and (max-width: 972px) { .pd-t118 { --t: 1.06; } }
@media (min-width: 900px) and (max-width: 953px) { .pd-t118 { --t: 1.04; } }
@media (min-width: 900px) and (max-width: 935px) { .pd-t118 { --t: 1.02; } }
@media (min-width: 900px) and (max-width: 917px) { .pd-t118 { --t: 1.00; } }
@media (min-width: 1000px) and (max-width: 1099px) { .pd-t118 { --t: 1.08; } }
@media (min-width: 1000px) and (max-width: 1079px) { .pd-t118 { --t: 1.06; } }
@media (min-width: 1000px) and (max-width: 1059px) { .pd-t118 { --t: 1.04; } }
@media (min-width: 1000px) and (max-width: 1039px) { .pd-t118 { --t: 1.02; } }
@media (min-width: 1000px) and (max-width: 1019px) { .pd-t118 { --t: 1.00; } }
@media (min-width: 1100px) and (max-width: 1218px) { .pd-t118 { --t: 1.16; } }
@media (min-width: 1100px) and (max-width: 1197px) { .pd-t118 { --t: 1.14; } }
@media (min-width: 1100px) and (max-width: 1177px) { .pd-t118 { --t: 1.12; } }
@media (min-width: 1100px) and (max-width: 1156px) { .pd-t118 { --t: 1.10; } }
@media (min-width: 1100px) and (max-width: 1135px) { .pd-t118 { --t: 1.08; } }
@media (min-width: 1100px) and (max-width: 1115px) { .pd-t118 { --t: 1.06; } }

/* ---- WB Captures (deploy 70, lib/wayback.php): the Wayback Machine's capture history as a small graph ----
   The last ten years (Config), one bar a month, a pixel a bar, the same window on every row so age reads left to
   right — karma.domains' graph, his picture. The bars in a hairline box the table's grey (77; 72–76 had no border). The hover
   (assets/wayback.js) marks the month under the pointer with a thin line and says its count in a tip. */
.pd .wb-box { display: inline-block; position: relative; box-sizing: border-box; width: 122px; height: 28px; padding: 0;
              background: transparent; border: 1px solid var(--line); border-radius: 3px; vertical-align: middle; }   /* 77: the hairline back, the table's own grey */
.pd .wb-box.wb-hover { z-index: 6; }
.pd .wb-box svg { display: block; width: 100%; height: 100%; }
.pd .wb-box path { fill: #1C1C1A; }   /* 74: near-black, two px a bar — "twice as dark and heavy", karma's weight */
.pd .wb-box.wb-hover::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--wb-x, 50%); width: 1px;
                              background: var(--blue); opacity: .55; pointer-events: none; }
.pd .wb-box.wb-none { font: inherit; line-height: 26px; color: var(--heading); text-align: center; letter-spacing: 0;
                      white-space: nowrap; }   /* 73/74: was 11px light grey — he could barely read it; now the cell's own type */
.pd .wb-tip { position: absolute; z-index: 60; padding: 7px 10px; background: var(--heading); color: #FFFFFF;
              font: 12.5px/1.45 var(--sans); border-radius: 6px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; text-align: left; }
.pd .wb-tip .faint { color: #C8CBD0; }
.pd .wb-tip b { color: #FFFFFF; font-weight: 700; }   /* the panel's own "td b" rule paints bold ink-dark: unreadable on the tip */
/* the column: as wide as the box under the shared layout (body.wb above); the heading wraps like Rank's; the cell
   never clips the box with an ellipsis */
.pd table.droplist th.wb, .pd table.srch-table th.wb, .pd table.pd-today th.wb { white-space: normal; min-width: 150px; }
.pd table.droplist td.wb, .pd table.srch-table td.wb, .pd table.pd-today td.wb, .pd .next-drops .drops-table td.wb { padding-top: 4px; padding-bottom: 4px; overflow: visible; text-overflow: clip; min-width: 150px; }
/* Age and Snaps (75): two figures right of the graph, in the row's own type; as wide as their words under the
   shared layout (body.wb above). Where the graph makes room for the name, they go with it. The three cells before
   them give up their right padding (the next cell's left padding is the gap — 44's rule for the date, the countdown
   and the rank), and a list too wide for its card scrolls sideways rather than losing its last columns; the
   Table text size slider (Look and feel, 66) is the way to fit all of them at once. */
.pd td.wba, .pd td.wbs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd th.wba, .pd th.wbs { white-space: nowrap; }
.pd body.wb :is(table.droplist, table.srch-table, table.pd-today) :is(th, td):is(.ld, .wba, .wb) { padding-right: 0; }   /* Age | WB | Snaps since 76 */
.pd .wb-box.wb-blank { cursor: default; }   /* 76: captured, but not in the window — blank, the hover says why */
.pd body.wb table.srch-table :is(th, td):is(.age, .wbs) { padding-right: 0; }     /* the search has two more columns after Snaps */
.pd body.wb .pd-card.pd-list, .pd body.wb .pd-card.srch-results { overflow-x: auto; }
@media (min-width: 1000px) and (max-width: 1099px) {
  .pd table.droplist th.wba, .pd table.droplist td.wba, .pd table.droplist th.wbs, .pd table.droplist td.wbs { display: none; }
}
@media (min-width: 760px) and (max-width: 999px) {
  /* a narrow list beside its filter panel: the graph makes room for the name, as the rank does */
  .pd table.droplist th.wb, .pd table.droplist td.wb, .pd table.pd-today th.wb, .pd table.pd-today td.wb,
  .pd table.droplist th.wba, .pd table.droplist td.wba, .pd table.pd-today th.wba, .pd table.pd-today td.wba,
  .pd table.droplist th.wbs, .pd table.droplist td.wbs, .pd table.pd-today th.wbs, .pd table.pd-today td.wbs { display: none; }
}
/* on a phone the lists are stacked rows (their own layouts above): the graph is a line of its own under the name's
   details, only in the rows of names that have one; dropping today's and the homepage's tables already drop
   everything past their first columns there */
@media (max-width: 759px) {
  .pd table.droplist tr > th.wb, .pd table.droplist tr > th.wba, .pd table.droplist tr > th.wbs { display: none !important; }
  .pd table.droplist td.wb { grid-column: 1 / span 2; grid-row: 4; margin-top: 4px; }
  .pd table.droplist.syl td.wb { grid-row: 4; }
  .pd table.srch-table td.wb { grid-column: 2 / span 2; grid-row: 5; display: block; margin-top: 4px; }
  /* Age and Snaps (75): a line under the graph, "Age: 22" left, "Snaps: 1,240" right, in the link figures' style */
  .pd table.droplist td.wba, .pd table.droplist td.wbs { grid-row: 5; margin-top: 1px; font-size: 15px; line-height: 1.35; color: var(--faint); }
  .pd table.droplist td.wba { grid-column: 1; }
  .pd table.droplist td.wbs { grid-column: 2; text-align: right; }
  .pd table.droplist td.wba[data-l]::before, .pd table.droplist td.wbs[data-l]::before { content: attr(data-l) ": "; }
  .pd table.srch-table td.wba, .pd table.srch-table td.wbs { display: inline-block; font-size: 14px; color: var(--muted); grid-row: 6; }
  .pd table.srch-table td.wba { grid-column: 2; }
  .pd table.srch-table td.wbs { grid-column: 3; text-align: right; }
}

/* ---- Table columns (deploy 80, lib/columns.php): a page whose table he changed under Look and feel ----
   Another order, a column added or taken off, or room changed: the table carries "tcol" and every cell a class —
   ck-<column>, ck-last on the last one drawn, xc on a column he added, xh on one of the page's own that he took off.
   A page nobody changed has none of these, and none of the rules below touch it.
   The room he sets on a column's left is printed in the page's <head> (cols_css), not here. */
.pd th.xc, .pd td.xc { white-space: nowrap; }
.pd td.x-len, .pd td.x-syl, .pd td.x-reg { font-variant-numeric: tabular-nums; }
.pd td.x-registrar { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.pd td.xc.wb { padding-top: 4px; padding-bottom: 4px; overflow: visible; text-overflow: clip; min-width: 150px; }     /* the graph on a page that never had it */
@media (min-width: 760px) {
  /* 66's layout whatever the Table text size says: every column as wide as its words, the name takes the rest
     (the countdown keeps its steady width, the bulk check's note its own: it wraps). Dropping today's table was
     never a fixed one and stays as it is. */
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) { table-layout: auto; }
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) :is(th, td) { width: 1%; }
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) th.ck-name { width: auto; }
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) td.ck-name { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) th.ck-in { min-width: 166px; }
  .pd table.tcol.tcol.tcol.bulk-table :is(th, td).ck-info { width: 380px; }
  /* the last cell drawn keeps the table's edge room, whichever column it is now */
  .pd table.tcol.tcol.tcol:is(.droplist, .pd-table) :is(th, td).ck-last { padding-right: 35px; }
  .pd table.tcol.tcol.tcol.pd-today :is(th, td).ck-last { padding-right: 18px; }
  /* one of the page's own columns he took off: still in the row, for a phone */
  .pd table.tcol :is(th, td).xh { display: none; }
  /* a table wider than its card scrolls sideways inside it (the card is the frame of everything in it, so a
     heading's screen-reader words, which are placed out of the flow, scroll with the table and not with the page) */
  .pd .pd-card:has(> table.tcol) { position: relative; overflow-x: auto; }
}
@media (max-width: 759px) {
  /* a phone keeps each list's own stacked row: a column he added is not part of it */
  .pd table.tcol.tcol.tcol.tcol :is(th, td).xc { display: none !important; }
  /* the homepage's table on a phone is the name and the countdown, Dropping today's the name and its time, as
     before: found by what they are, not by where they stand… */
  .pd .next-drops table.tcol.tcol :is(th, td):not(.ck-name):not(.ck-in) { display: none; }
  .pd table.pd-today.tcol.tcol :is(th, td) { display: none; }
  .pd table.pd-today.tcol.tcol :is(th, td):is(.ck-name, .ck-date) { display: table-cell; }
  .pd table.pd-today.tcol.tcol :is(th, td).ck-date { text-align: right; padding-left: 12px; padding-right: 16px; white-space: nowrap; }
  .pd table.pd-today.tcol.tcol :is(th, td).ck-name { text-align: left; padding-left: 16px; padding-right: 12px; }
  .pd table.pd-today.tcol.tcol td.ck-name { white-space: normal; word-break: break-all; }
  .pd table.pd-today.tcol.tcol th.ck-name { white-space: nowrap; }
  /* …and name first when he has put the other one first on a desktop ("tcol-po"): the two columns are laid from
     the right, the words inside them as ever */
  .pd .next-drops table.tcol-po.tcol, .pd table.pd-today.tcol-po.tcol { direction: rtl; }
  .pd .next-drops table.tcol-po.tcol :is(th, td), .pd table.pd-today.tcol-po.tcol :is(th, td) { direction: ltr; }
}
/* Locked columns (deploy 81; his pictures of 12 Oct: the advanced search sorted two ways, its columns in two places).
   A layout saved by the editor carries "tlock" beside "tcol": the table is a fixed one, every column but the name
   has the width he set (printed in the page's <head> with the table's least width, cols_css), and no row's words can
   move a column. Words longer than their column are cut ("…" where the browser can), a heading too, so a column
   made narrower than its heading never writes over the next one; the editor starts every column at least as wide
   as its heading with its sort arrows. A heading still wraps where it did (Rank's and Linking Domains' may take
   two lines). The Wayback graph is a picture and is not cut; the bulk check's note wraps as it always did. The
   name takes what the others leave. Desktop windows only. */
@media (min-width: 760px) {
  .pd table.tcol.tlock.tlock.tlock { table-layout: fixed !important; }
  .pd table.tcol.tlock.tlock.tlock :is(th, td) { box-sizing: border-box; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; }
  .pd table.tcol.tlock.tlock.tlock td { white-space: nowrap; }
  .pd table.tcol.tlock.tlock.tlock :is(th, td).ck-name { width: auto !important; max-width: none !important; }
  .pd table.tcol.tlock.tlock.tlock td.wb { overflow: visible; text-overflow: clip; }
  .pd table.tcol.tlock.tlock.tlock.bulk-table td.ck-info, .pd table.tcol.tlock.tlock.tlock.syl td.ck-name { white-space: normal; }
}