/* base.css — Base page, manuscript frame, header, layout, colophon, city dropdown
   Extracted from the single-file UI; loaded by index.html in order. */
  /* ============================ BASE ============================ */
  * { box-sizing:border-box; }
  html, body { height:100%; }
  body {
    margin:0;
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"liga" 1,"kern" 1;
    font-size:22px;
    line-height:1.5;
  }
  /* layered parchment: woven palm-leaf grain + soft warm vignette + faint fibre flecks (pure CSS, no images) */
  body::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% -10%, #fdf7ec 0%, transparent 60%),
      radial-gradient(120% 120% at 50% 120%, color-mix(in srgb,var(--gold) 7%, transparent) 0%, transparent 55%),
      repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb,var(--line) 7%, transparent) 7px 8px),
      repeating-linear-gradient(0deg, transparent 0 26px, color-mix(in srgb,var(--line) 4%, transparent) 26px 27px);
    opacity:.7;
  }
  /* extremely faint speckle of fibre flecks for paper tooth */
  body::after {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
    background:
      radial-gradient(circle at 18% 32%, color-mix(in srgb,var(--faint) 22%, transparent) 0 1px, transparent 1.5px),
      radial-gradient(circle at 73% 18%, color-mix(in srgb,var(--faint) 18%, transparent) 0 1px, transparent 1.5px),
      radial-gradient(circle at 41% 78%, color-mix(in srgb,var(--faint) 16%, transparent) 0 1px, transparent 1.5px),
      radial-gradient(circle at 88% 64%, color-mix(in srgb,var(--faint) 14%, transparent) 0 1px, transparent 1.5px),
      radial-gradient(circle at 9% 88%, color-mix(in srgb,var(--faint) 16%, transparent) 0 1px, transparent 1.5px);
    background-size:340px 340px,300px 300px,420px 420px,380px 380px,260px 260px;
  }
  ::selection { background:var(--gold); color:var(--accent-ink); }
  ::-webkit-scrollbar { width:11px; height:11px; }
  ::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
  ::-webkit-scrollbar-thumb:hover { background:var(--faint); background-clip:padding-box; }

  h1,h2,h3,h4 { font-family:var(--head); font-weight:600; }

  /* tabular mono numerals everywhere they matter */
  .num, td .num, .deg, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

  /* ============================ MANUSCRIPT FRAME ============================ */
  .pothi-frame {
    max-width:1320px; margin:26px auto; padding:0;
    position:relative;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow:
      var(--shadow),
      inset 0 0 0 5px var(--bg),
      inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%, var(--line)),
      inset 0 0 0 7px var(--bg),
      inset 0 1px 0 #ffffff80;
    border-radius:var(--radius-lg);
  }
  /* hairline gilt keyline just inside the bound frame */
  .pothi-frame::before {
    content:""; position:absolute; inset:14px; pointer-events:none; z-index:0;
    border:1px solid color-mix(in srgb,var(--gold) 32%, transparent);
    border-radius:7px;
  }
  .corner { position:absolute; width:34px; height:34px; color:var(--gold); opacity:.95; pointer-events:none; z-index:2; }
  .corner.tl { top:10px; left:10px; }
  .corner.tr { top:10px; right:10px; transform:scaleX(-1); }
  .corner.bl { bottom:10px; left:10px; transform:scaleY(-1); }
  .corner.br { bottom:10px; right:10px; transform:scale(-1,-1); }

  /* ============================ HEADER ============================ */
  header {
    display:flex; align-items:center; gap:16px;
    padding:24px 36px 22px;
    border-bottom:1px solid var(--line);
    position:relative; z-index:1;
    background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 6%, transparent), transparent 70%);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  header::after {
    content:""; position:absolute; left:36px; right:36px; bottom:-1px; height:2px;
    background:linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
    opacity:.6;
  }
  .brand { display:flex; align-items:center; gap:16px; }
  .mark {
    width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; color:var(--accent);
    background:var(--paper-deep); border:1px solid color-mix(in srgb,var(--gold) 45%, var(--line));
    border-radius:50%; box-shadow:var(--shadow-sm), inset 0 0 0 1px #ffffff60;
  }
  .mark svg { display:block; }
  .brand .title h1 {
    font-size:27px; margin:0; letter-spacing:6px; color:var(--accent);
    font-variant:small-caps; font-weight:600;
    text-shadow:0 1px 0 #ffffff80;
  }
  .brand .title .sub { color:var(--muted); font-size:13px; letter-spacing:1.4px; margin-top:3px; font-variant:small-caps; }
  .brand .title .deva { font-family:var(--deva); color:var(--gold); font-size:15px; margin-left:9px; }
  .head-spacer { flex:1; }

  /* ============================ LAYOUT ============================ */
  .wrap { display:grid; grid-template-columns:1fr; }
  .results { padding:22px 30px 56px; min-width:0; }

  /* ============================ COLOPHON (birth particulars) ============================ */
  .colophon {
    border:1px solid var(--line); background:var(--paper-deep);
    border-radius:var(--radius-lg); padding:26px 30px; margin:30px 36px 10px;
    position:relative; z-index:1;
    box-shadow:var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), inset 0 0 0 4px #ffffff40;
  }
  .colophon::before {
    content:""; position:absolute; inset:6px; border-radius:8px; pointer-events:none;
    border:1px solid color-mix(in srgb,var(--gold) 24%, transparent);
  }
  .colophon .eyebrow { display:flex; align-items:baseline; gap:11px; margin-bottom:5px; }
  .colophon .eyebrow .en { font-variant:small-caps; letter-spacing:2.4px; color:var(--accent); font-size:15px; font-family:var(--head); }
  .colophon .eyebrow .deva { font-family:var(--deva); color:var(--gold); font-size:15px; }
  .colophon .hint { color:var(--muted); font-size:14px; margin:0 0 18px; }
  .colophon .field-hint { color:var(--faint); font-size:12.5px; margin:6px 0 0; line-height:1.45; font-style:italic; }

  .colophon label { display:block; font-size:11.5px; color:var(--muted); margin:15px 0 6px; font-variant:small-caps; letter-spacing:1.2px; font-weight:600; }
  .colophon input, .colophon select {
    width:100%; padding:12px 13px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    border-radius:var(--radius-sm); font-size:16px; font-family:var(--sans);
    transition:border-color .15s, box-shadow .15s;
    box-shadow:inset 0 1px 2px #5c3a1012;
  }
  .colophon input[type="date"], .colophon input[type="time"], .colophon input[type="number"] { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .colophon input::placeholder { color:var(--faint); }
  .colophon input:focus, .colophon select:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
  .colophon select { cursor:pointer; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 16px) center, calc(100% - 11px) center;
    background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
  .col-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 16px; align-items:start; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .colophon details { margin-top:14px; border:1px dashed var(--line); border-radius:5px; padding:0 12px; }
  .colophon details[open] { padding-bottom:10px; }
  .colophon details summary { cursor:pointer; padding:11px 0; font-size:12px; color:var(--muted); list-style:none; display:flex; align-items:center; gap:7px; font-variant:small-caps; letter-spacing:.6px; }
  .colophon details summary::-webkit-details-marker { display:none; }
  .colophon details summary::before { content:"❖"; color:var(--gold); font-size:11px; }

  button.go {
    margin-top:22px; width:100%; max-width:340px; padding:15px 20px;
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%, #fff 12%), var(--accent));
    color:var(--accent-ink); border:0; border-radius:var(--radius-sm);
    font-family:var(--head); font-weight:600; font-size:17px; letter-spacing:1.2px; cursor:pointer;
    box-shadow:0 1px 0 #ffffff40 inset, 0 10px 24px -14px var(--accent), 0 2px 6px -2px #5c3a1040; transition:.16s;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-variant:small-caps;
  }
  button.go:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 1px 0 #ffffff50 inset, 0 14px 30px -14px var(--accent), 0 3px 8px -2px #5c3a1050; }
  button.go:active { transform:translateY(0); }
  button.go:disabled { opacity:.7; cursor:wait; transform:none; }
  .spinner { width:14px; height:14px; border:2px solid var(--accent-ink); border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; display:none; }
  button.go.loading .spinner { display:inline-block; }
  @keyframes spin { to { transform:rotate(360deg); } }

  #status { margin-top:13px; font-size:14px; color:var(--muted); min-height:18px; font-style:italic; }
  #placeResolved { margin:9px 0 0; font-size:13.5px; color:var(--accent-2); line-height:1.5; font-family:var(--mono); font-variant-numeric:tabular-nums; }

  /* collapsed colophon summary line (after a chart is cast) */
  .colophon.cast .col-body { display:none; }
  .colophon.cast { padding:14px 24px; }
  .col-summary { display:none; align-items:center; gap:14px; flex-wrap:wrap; }
  .colophon.cast .col-summary { display:flex; }
  .col-summary .insc { font-family:var(--head); font-size:18px; color:var(--ink); }
  .col-summary .insc .sep { color:var(--gold); margin:0 9px; }
  .col-summary .insc .mn { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:15.5px; color:var(--muted); }
  .col-summary .edit {
    margin-left:auto; background:var(--paper); border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line)); color:var(--muted);
    border-radius:20px; padding:7px 16px; font-size:13.5px; cursor:pointer; font-family:var(--sans);
    font-variant:small-caps; letter-spacing:.6px; transition:.15s; box-shadow:var(--shadow-sm);
  }
  .col-summary .edit:hover { color:var(--accent); border-color:var(--gold); }

  /* ============================ CITY DROPDOWN ============================ */
  .city-wrap { position:relative; }
  .dropdown {
    position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:var(--surface); border:1px solid var(--line);
    border-radius:5px; max-height:260px; overflow:auto; z-index:60;
    display:none; box-shadow:var(--shadow); padding:5px;
  }
  .dropdown.open { display:block; }
  .dropdown div { padding:11px 13px; cursor:pointer; font-size:15px; border-radius:var(--radius-sm); transition:background .1s; }
  .dropdown div:hover { background:var(--surface-2); }
  .dropdown .ct { color:var(--faint); font-size:12.5px; font-family:var(--mono); }

  /* ============================ CHART HEAD ============================ */
  .chart-head {
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
    margin:6px 0 4px; padding-bottom:12px;
  }
  .chart-head h2 { margin:0; font-size:32px; font-weight:600; letter-spacing:.4px; color:var(--accent); text-shadow:0 1px 0 #ffffff70; }
  .chart-head .meta { color:var(--muted); font-size:15.5px; }
  .chart-head .meta .deva { font-family:var(--deva); color:var(--gold); }