/* The home page at delve.bill.computer. Builds on style.css's colours and fonts. */

body.home { display: block; overflow-y: auto; }
.home-wrap { max-width: 980px; margin: 0 auto; padding: 48px 20px 32px; }
.home-head { display: block; text-align: center; margin-bottom: 32px; padding: 0; border: none; }
.home-head h1 { font-size: 56px; color: var(--gold); letter-spacing: .02em; }
.home-head p { color: var(--dim); font-family: var(--serif); font-size: 18px; margin: 8px 0 0; }

.home-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.home-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.home-card h2 { margin: 0; }
.home-card label { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: 13px; }
.home-card textarea, .home-card input, .home-card select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--edge); border-radius: 5px;
  padding: 9px 10px; font: 15px/1.4 var(--serif);
}
.home-card textarea { resize: vertical; }
.home-card textarea:focus, .home-card input:focus, .home-card select:focus { outline: none; border-color: var(--gold); }
.home-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-row select { font-family: var(--sans); font-size: 14px; }
.home-note { color: var(--dim); font-size: 12.5px; margin: 0; }

.home-card button, .button {
  font: 600 14px var(--sans); padding: 10px 16px; border-radius: 5px; cursor: pointer;
  background: var(--panel); color: var(--ink); border: 1px solid var(--edge); text-decoration: none; display: inline-block; text-align: center;
}
.home-card button:hover, .button:hover { border-color: var(--gold); }
.primary { background: var(--gold) !important; color: var(--bg) !important; border-color: var(--gold) !important; }
.primary:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: wait; }
button.link { background: none; border: none; padding: 0; color: var(--gold); font-weight: 400; font-size: 12.5px; }

.mine-title { margin-top: 8px !important; }
#mine-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
#mine-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
#mine-list a { color: var(--ink); font-family: var(--serif); }

#hosting { max-width: 680px; margin: 0 auto; }
#hosting h2 #room-code { color: var(--gold); font-family: var(--mono); letter-spacing: .1em; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.steps li { display: flex; flex-direction: column; gap: 8px; }
.steps p { margin: 0; }
.steps li::marker { color: var(--gold); font-weight: 600; }
.home-actions { display: flex; gap: 10px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; font: 12.5px var(--mono) !important; }
.no-client { color: var(--dim); font-size: 13px; }
.no-client summary { cursor: pointer; }
.no-client p { margin: 8px 0; }

.waiting { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--edge); border-radius: 6px; color: var(--dim); }
.waiting.ready { border-color: var(--green); color: var(--green); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); border-top-color: var(--gold); animation: spin 1s linear infinite; }
.waiting.ready .spinner { border-color: var(--green); animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.home-foot { text-align: center; color: var(--dim); font-size: 12px; margin-top: 40px; }

@media (max-width: 760px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-row { grid-template-columns: 1fr; }
  .home-head h1 { font-size: 42px; }
}