/* WeiTA Room Portal: colours, type and the few shared pieces every screen uses.
   WeiTA screens use these colours exactly. Client screens set --client and
   --on-client from the client's brand colour (see brand.js). */

:root {
  --terracotta: #C86D51;
  --ink: #1E242B;
  --sand: #F3C096;
  --stone: #827B75;
  --bone: #F8F6F3;
  --light-ink: #3A3F46;
  --burnt-stone: #5A544E;
  --white: #FFFFFF;
  --line: rgba(30, 36, 43, 0.08);
  --line-strong: rgba(30, 36, 43, 0.16);

  --client: var(--ink);
  --on-client: var(--white);

  --serif: Newsreader, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

.tn { font-variant-numeric: tabular-nums lining-nums; }
.cap { font-size: 13px; line-height: 18px; color: var(--burnt-stone); }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }

input, textarea {
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 48px;
  width: 100%;
}

.btn {
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn:disabled { opacity: 0.5; cursor: default; }

.btn-quiet {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--stone);
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.notice { font-size: 13px; line-height: 20px; padding: 10px 14px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.notice[data-tone="attention"] { background: var(--sand); box-shadow: none; }
.notice[role="alert"] { background: #FBEFEA; box-shadow: inset 0 0 0 1px rgba(200, 109, 81, 0.35); color: var(--ink); }

[hidden] { display: none !important; }

/* Every press shows ---------------------------------------------------------------
   A hover, a press, and a spinner while the work runs. db.js marks the pressed
   button with data-busy while its request is out. The hover lightens whatever
   colour the button wears, so client colours keep working. */

.btn, .pill-btn, .ic-btn, .icon-btn { transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.08s ease; }
.btn { position: relative; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
  box-shadow: 0 10px 20px -12px rgba(30, 36, 43, 0.6);
}
.btn-quiet:hover:not(:disabled):not([aria-disabled="true"]) { background-image: none; background-color: var(--bone); box-shadow: inset 0 0 0 1px var(--ink); }
.pill-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn:active:not(:disabled), .pill-btn:active, .ic-btn:active, .icon-btn:active { transform: scale(0.97); }
.link-btn:hover, a:hover { text-decoration-color: var(--terracotta); }

[data-busy] { cursor: progress; }
[data-busy]:not(.btn) { opacity: 0.6; }
.btn[data-busy] { padding-left: 46px; }
.btn[data-busy] > .ic:first-child { display: none; }
.btn[data-busy]::before {
  content: ''; position: absolute; left: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* While a page loads: three dots, like a conversation starting. */
.wait { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--burnt-stone); font-size: 13px; }
.wait-dots { display: inline-flex; gap: 8px; }
.wait-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--client, var(--ink)); opacity: 0.2; animation: talk 1.2s ease-in-out infinite; }
.wait-dots i:nth-child(2) { animation-delay: 0.15s; }
.wait-dots i:nth-child(3) { animation-delay: 0.3s; background: var(--terracotta); }
.is-client-page .wait-dots i:nth-child(3) { background: var(--client); }
@keyframes talk { 0%, 100% { opacity: 0.2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .btn, .pill-btn, .ic-btn, .icon-btn { transition: none; }
  .btn:active:not(:disabled), .pill-btn:active, .ic-btn:active, .icon-btn:active { transform: none; }
  .btn[data-busy]::before { animation-duration: 2s; }
  .wait-dots i { animation: none; opacity: 0.6; }
}