/* The share page's own chrome. Every colour here is one of the kit's variables, so the skin the
   reader picks in the drawer paints the page as well as the widgets: a bar in a fixed palette
   over a terminal green book would look like a bug, and the setting has to be believable to be
   worth having. Layout, spacing and type are the only things this file decides. */

* { box-sizing: border-box; }

/* The page hides its own sections with the hidden attribute, and every one of them carries a
   display rule of its own, which beats the browser's [hidden] rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--clobber-bg);
  color: var(--clobber-fg);
  font-family: var(--clobber-font);
  font-size: var(--clobber-font-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ the bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--clobber-panel);
  border-bottom: var(--clobber-border, 1px) solid var(--clobber-grid);
}

.logo {
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  font-size: 15px;
}
.logo .dot { color: var(--clobber-accent); }

.pickwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

select, input[type="text"] {
  font: inherit;
  color: var(--clobber-fg);
  background: var(--clobber-sunken);
  border: 1px solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  padding: 5px 8px;
  max-width: 100%;
}
select { font-family: var(--clobber-mono); }

.dot-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--clobber-muted);
}
.dot-status[data-status="live"] { background: var(--clobber-bid); }
.dot-status[data-status="connecting"], .dot-status[data-status="resyncing"] { background: var(--clobber-badge); }
.dot-status[data-status="closed"] { background: var(--clobber-ask); }

.tools { display: flex; gap: 6px; flex: none; }

.btn {
  font: inherit;
  font-weight: var(--clobber-label-weight, 600);
  color: var(--clobber-fg);
  background: var(--clobber-sunken);
  border: 1px solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  padding: 6px 11px;
  cursor: pointer;
}
.btn:hover { border-color: var(--clobber-accent); }
.btn.primary {
  background: var(--clobber-accent);
  color: var(--clobber-accent-fg);
  border-color: var(--clobber-accent);
}
.btn.ghost { background: transparent; }

/* ------------------------------------------------------------------ the page */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strip[hidden] { display: none; }

.foot {
  margin: 4px 0 24px;
  color: var(--clobber-muted);
  font-size: .92em;
  max-width: 70ch;
}

.notice {
  margin: 0;
  padding: 9px 14px;
  background: var(--clobber-ask-wash);
  color: var(--clobber-fg);
  border-bottom: 1px solid var(--clobber-grid);
  font-size: .95em;
}
.notice[data-kind="wait"] { background: var(--clobber-bid-wash); }

/* ------------------------------------------------------------------ the gate */

.gate {
  max-width: 640px;
  margin: 48px auto;
  padding: 22px;
  background: var(--clobber-panel);
  border: 1px solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
}
.gate h1 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.01em; }
.lede { margin: 0 0 20px; color: var(--clobber-muted); }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.field > span {
  font-size: 11px;
  font-weight: var(--clobber-label-weight, 600);
  text-transform: var(--clobber-label-transform, uppercase);
  letter-spacing: var(--clobber-label-track, .08em);
  color: var(--clobber-muted);
}
.field > span i { font-style: normal; opacity: .7; text-transform: none; letter-spacing: 0; }
.field em { font-style: normal; font-size: .88em; color: var(--clobber-muted); }
.field code, .fine code { font-family: var(--clobber-mono); font-size: .92em; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row .field[hidden] { display: none; }

.err { color: var(--clobber-ask); margin: 0 0 12px; }

.fine {
  margin: 20px 0 0;
  padding: 16px 0 0 18px;
  border-top: 1px solid var(--clobber-grid-soft);
  color: var(--clobber-muted);
  font-size: .9em;
}
.fine li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ the drawer */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 30;
  width: 290px;
  max-width: 88vw;
  overflow-y: auto;
  padding: 14px;
  background: var(--clobber-panel);
  border-left: 1px solid var(--clobber-grid);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .12);
}
.drawerhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.gl {
  font-size: 11px;
  font-weight: var(--clobber-label-weight, 600);
  text-transform: var(--clobber-label-transform, uppercase);
  letter-spacing: var(--clobber-label-track, .08em);
  color: var(--clobber-muted);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit;
  font-family: var(--clobber-mono);
  padding: 5px 9px;
  cursor: pointer;
  color: var(--clobber-fg);
  background: var(--clobber-sunken);
  border: 1px solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
}
.chip[aria-pressed="true"] {
  background: var(--clobber-accent);
  color: var(--clobber-accent-fg);
  border-color: var(--clobber-accent);
}

.checks { display: flex; flex-direction: column; gap: 5px; }
.check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.check input { accent-color: var(--clobber-accent); }

.fineprint { color: var(--clobber-muted); font-size: .85em; margin: 18px 0 0; }

@media (max-width: 720px) {
  .bar { flex-wrap: wrap; }
  .pickwrap { order: 3; width: 100%; }
  .row { grid-template-columns: 1fr; }
  .gate { margin: 20px 10px; padding: 16px; }
  main { padding: 10px; }
}