/* Siddhanta web client.
   The same tokens as the Flutter app, so the two do not look like different
   products: warm cream ground, coral accent, serif for display. */

:root {
  --canvas: #faf9f5;
  --surface: #f5f0e8;
  --card: #efe9de;
  --hairline: #e6dfd8;
  --ink: #141413;
  --body: #3d3d3a;
  --muted: #6c6a64;
  --primary: #cc785c;
  --primary-active: #a9583e;
  --on-primary: #ffffff;
  --error: #c64545;
  --success: #5db872;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #181715;
    --surface: #1f1e1b;
    --card: #252320;
    --hairline: #34312c;
    --ink: #faf9f5;
    --body: #d8d5ce;
    --muted: #a09d96;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 10;
}
.bar h1 {
  margin: 0; font: 400 24px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -0.3px; color: var(--ink);
}
.pill {
  font: 500 12px/1 system-ui; padding: 6px 10px; border-radius: 999px;
  background: var(--card); color: var(--muted);
}
.pill.ok { color: var(--success); }
.pill.bad { color: var(--error); }

main { max-width: 1080px; margin: 0 auto; padding: 20px; }

.panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 18px;
}
.panel h2 {
  margin: 0 0 12px; font: 500 16px/1.4 system-ui; color: var(--ink);
}

form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.wide { grid-column: 1 / -1; }
.field > span { font-size: 12px; color: var(--muted); }
.field small { font-size: 11px; color: var(--muted); }
input, select {
  font: inherit; padding: 9px 10px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
button {
  font: 500 14px/1 system-ui; padding: 10px 16px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
button:hover { border-color: var(--primary); }
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
button.primary:hover { background: var(--primary-active); }

.tabs, .style-switch { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button, .style-switch button { padding: 8px 14px; border-radius: 999px; }
.tabs button.on, .style-switch button.on {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.style-switch { margin-bottom: 16px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chips button { padding: 6px 12px; font-size: 13px; border-radius: 999px; }
.chips button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.card {
  background: var(--card); border-radius: var(--r-md);
  padding: 12px; margin-bottom: 12px;
}
.card h3 { margin: 0 0 8px; font: 500 14px/1.4 system-ui; color: var(--ink); }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--hairline); }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
td.num, td.mono { font-family: var(--mono); }
.scroll { overflow-x: auto; }

dl.kv { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 0; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
dl.kv dd { margin: 0; padding: 7px 0; font-family: var(--mono); font-size: 13px;
           color: var(--ink); border-bottom: 1px solid var(--hairline); }

/* South Indian: signs fixed to cells, Pisces top-left, running clockwise. */
.south { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
         max-width: 460px; margin: 0 auto; aspect-ratio: 1; }
.south .cell, .north .cell {
  border: 1px solid var(--hairline); padding: 4px; min-height: 0;
  position: relative; font-size: 12px; overflow: hidden;
}
.south .cell.hollow { border: none; }
.south .cell .sign { position: absolute; top: 3px; left: 5px; font-size: 10px; color: var(--muted); }
.south .cell .house { position: absolute; top: 3px; right: 5px; font-size: 10px; color: var(--muted); opacity: .6; }
.south .cell .bodies { display: flex; align-items: center; justify-content: center;
                       height: 100%; flex-wrap: wrap; gap: 4px; font-family: var(--mono); }
.cell.lagna { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.cell .as { color: var(--primary); font-weight: 600; }
.centre { display: flex; align-items: center; justify-content: center;
          color: var(--muted); font: 400 15px/1.3 Georgia, serif; text-align: center; }

/* North Indian: the classical diamond, drawn as SVG. */
.north-wrap { max-width: 460px; margin: 0 auto; }
.north-wrap svg { width: 100%; height: auto; display: block; }
/* No font-size here on purpose. Inside a viewBox a CSS size is in *user
   units*, so `font-size: 11px` meant 11% of the chart -- which is what made
   every label overflow its region. The markup sets a size per house, computed
   from the room that house actually has. */
.north-wrap text { font-family: var(--mono); fill: var(--ink); }
.north-wrap text.sign { fill: var(--muted); }
.north-wrap text.as { fill: var(--primary); font-weight: 600; }
.north-wrap rect, .north-wrap path, .north-wrap line {
  stroke: var(--hairline); fill: none; stroke-width: .4;
}
.north-wrap polygon.lagna-fill {
  fill: color-mix(in srgb, var(--primary) 16%, transparent); stroke: none;
}

.muted { color: var(--muted); font-size: 13px; }
.error { color: var(--error); font-size: 13px; margin: 10px 0 0; }
.crumbs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.crumbs button { padding: 5px 11px; font-size: 12px; border-radius: 999px; }
.crumbs span { color: var(--muted); }
.level { font: 500 11px/1 system-ui; letter-spacing: 1px; color: var(--muted);
         text-transform: uppercase; margin: 10px 0 6px; }
tr.running { background: color-mix(in srgb, var(--primary) 14%, transparent); }
tr.click { cursor: pointer; }
tr.click:hover { background: var(--card); }

footer { max-width: 1080px; margin: 0 auto; padding: 0 20px 30px; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  form { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 130px 1fr; }
}

/* Key sign-in ------------------------------------------------------------ */
/* Hidden until a call comes back 401. A keyed server the visitor has no key
   for is a normal state, not an error, so it reads as a prompt rather than a
   failure. */
.keybar {
  background: var(--panel, #16181d);
  border-bottom: 1px solid var(--rule, #2a2d35);
  padding: 10px 16px;
}
.keybar form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.keybar label { font-size: 13px; color: var(--muted, #9aa1ad); }
.keybar input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}
#keynote { font-size: 12px; color: var(--muted, #9aa1ad); }