/* ============================================================
   มุหูรตนิรณยะ — Theme "รักดำ–ทองคำเปลว" (Lacquer & Gold)
   Loaded after app.css. Restyles the app chrome only.
   The tuned #zodiacChart / drekkana SVG typography is untouched.
   ============================================================ */

:root{
  /* palette */
  --lacquer:#231013;          /* deep maroon-black, like lacquered smud khoi covers */
  --lacquer-2:#3a1b18;
  --gold:#c2933a;
  --gold-bright:#e6bd63;
  --gold-hairline:rgba(194,147,58,.42);
  --parchment:#f2ecdf;        /* page */
  --paper:#fdfaf2;            /* cards */
  --paper-deep:#f6efe1;       /* summaries, table heads */
  --ink:#292019;
  --muted:#7c7163;
  --line:#e2d7c3;
  --vermillion:#96301f;       /* primary action */
  --vermillion-deep:#7c2417;
  --indigo:#31517e;           /* transit / secondary tabs */
  --indigo-deep:#26406a;

  /* re-point legacy tokens used throughout app.css */
  --bg:var(--parchment);
  --card:var(--paper);
  --accent:var(--vermillion);
  --accent2:#a44c3f;
  --blue:var(--indigo);

  /* type */
  --font-display:"Trirong","Sarabun",Tahoma,"Leelawadee UI",serif;
  --font-body:"Sarabun",Tahoma,"Leelawadee UI",system-ui,sans-serif;

  --radius:14px;
  --shadow-card:0 1px 2px rgba(52,32,18,.05),0 10px 28px rgba(52,32,18,.07);
}

/* ---------- base ---------- */
html{background:var(--lacquer)}
body{
  background:
    radial-gradient(1200px 480px at 50% -160px, #faf5ea 0%, var(--parchment) 62%);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,
.collapsible-module>summary b,
.collapsible-input-card>summary{
  font-family:var(--font-display);
  letter-spacing:.01em;
}
h2{font-size:20px;font-weight:700;color:#3c281c}

/* ---------- topbar: the signature ---------- */
.topbar{
  background:
    linear-gradient(180deg,#2c1416 0%,var(--lacquer) 78%);
  color:#f4e9d6;
  padding:14px 24px 16px;
  box-shadow:0 6px 24px rgba(20,8,6,.35);
  border-bottom:none;
  position:sticky;
}
/* gilded rule under the bar — double gold hairline with a woven middle band */
.topbar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:5px;
  background:
    linear-gradient(90deg,transparent,var(--gold-bright) 18%,var(--gold-bright) 82%,transparent) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 7px,var(--gold-hairline) 7px 9px) center/100% 1px no-repeat,
    linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent) bottom/100% 1px no-repeat;
  pointer-events:none;
}
.topbar .brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{
  width:46px;height:46px;flex:0 0 auto;border-radius:12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.topbar .sanskrit{
  font-family:var(--font-display);
  color:var(--gold-bright);
  opacity:1;font-size:13.5px;letter-spacing:.14em;
}
.topbar h1{
  font-size:23px;font-weight:700;margin:1px 0 0;color:#fbf3e2;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.nav-btn{
  border:1px solid var(--gold-hairline);
  color:var(--gold-bright);
  border-radius:999px;padding:9px 16px;font-weight:700;
  background:rgba(230,189,99,.06);
}
.nav-btn:hover{background:rgba(230,189,99,.14)}
.nav-btn.active{background:var(--gold-bright);color:var(--lacquer);border-color:var(--gold-bright)}

/* ---------- cards ---------- */
.wrap{padding:24px 20px 40px}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:20px;
}
.card-head{margin-bottom:4px}
.card-head h2,
.planet-table-card h2{
  position:relative;padding-left:14px;
}
.card-head h2::before,
.planet-table-card h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
}
.hint{color:var(--muted)}
.subhint{color:#82725f}

/* first card of a group breathes a little */
.suri-calc-card{padding:22px}
.transit-calc-card{border-top:1px solid var(--line);position:relative}
.transit-calc-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--indigo),#5b7db1);
}
.transit-calc-card .card-head h2::before{background:linear-gradient(180deg,#6a8cc0,var(--indigo))}

/* ---------- inputs & buttons ---------- */
input,textarea,select{
  border:1px solid #d8ccb6;
  border-radius:10px;
  background:#fffdf7;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:hover,textarea:hover,select:hover{border-color:#c3b294}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(194,147,58,.22);
}
label{color:#6e6152;font-weight:600}

button{
  border-radius:10px;border:1px solid #d8ccb6;background:#fffdf7;
  font-weight:700;color:#4a3d2e;
  transition:background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
button:hover{background:#f8f1e2;border-color:#c3b294}
button:active{transform:translateY(1px)}
button:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
button.primary{
  background:linear-gradient(180deg,#a63a26,var(--vermillion) 55%,var(--vermillion-deep));
  border-color:var(--vermillion-deep);
  color:#fff6ea;letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(124,36,23,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
button.primary:hover{
  background:linear-gradient(180deg,#b24330,#a13424 55%,#83271a);
}
.current-time-button{
  background:#fbf3dd;border:1px solid var(--gold-hairline);color:#8a5a17;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.current-time-button:hover{background:#f4e6c2;border-color:var(--gold)}

/* ---------- pills, tabs & switches ---------- */
.method-switch{background:#efe6d3;border-color:#ddd0b6;border-radius:999px;padding:4px}
.method-btn{border-radius:999px}
.method-btn.active{
  background:var(--lacquer);color:var(--gold-bright);box-shadow:0 2px 8px rgba(35,16,19,.35);
}
.tab-btn,.chart-view-tab,.manual-tab{border-radius:999px}
.tab-btn.active,.chart-view-tab.active,.manual-tab.active{
  background:var(--indigo);border-color:var(--indigo-deep);color:#f2f6fc;
  box-shadow:0 2px 8px rgba(38,64,106,.28);
}

/* ---------- chips, badges, status ---------- */
.badge{border-radius:999px;padding:4px 10px;font-weight:800}
.ok{background:#e5f3e7;color:#1c6b39;border:1px solid #cfe6d3}
.bad{background:#fbe9e6;color:#9c2a1c;border:1px solid #f0d0ca}
.warn{background:#faf0d2;color:#7d5a04;border:1px solid #ecdba6}
.na{background:#eef0f2;color:#5a646e;border:1px solid #dde2e7}
.good-chip{background:#e7f2e6;color:#20603a;border:1px solid #cfe3cd;font-weight:700}
.suri-atta span{background:var(--paper-deep);border-color:#ddd0b6;border-radius:999px}
.timing{background:#f4ecdb;border:1px solid #e4d6ba;border-radius:12px}

/* ---------- collapsible modules & summaries ---------- */
.collapsible-module>summary,
.collapsible-input-card>summary,
.manual-input-panel summary{
  background:linear-gradient(180deg,#f9f2e3,var(--paper-deep));
}
.collapsible-module>summary{position:relative;padding-left:26px}
.collapsible-module>summary::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
}
.collapsible-module>summary b{font-size:20px;color:#3c281c}
.collapsible-module>summary:hover,
.collapsible-input-card>summary:hover,
.manual-input-panel summary:hover{background:#f4ead4}
.module-chevron{color:var(--gold)}
.input-box{background:#fdf8ec;border-color:#e4d8c0;border-radius:12px}
.input-box textarea{background:#fffef9}
.chart-view-note,.engine-details,.table-meta{
  background:var(--paper-deep);border:1px solid #e4d8c0;border-radius:12px;
}

/* ---------- tables ---------- */
.planet-table-wrap table{border-color:#ddd0b6 !important;background:#fffef9}
.planet-table-wrap th{
  background:linear-gradient(180deg,#f6eedb,#efe4cc) !important;
  color:#4a3520 !important;
  border-color:#ddd0b6 !important;
}
.planet-table-wrap td{border-color:#e6dcc7 !important}
.planet-table-wrap tr:nth-child(even) td{background:#fbf7ec}
th,td{border-color:#e6dcc7}
.analysis-table th{color:#5a4732}
.analysis-grid .result-item,.result-item{
  background:#fdf8ec;border:1px solid #e4d8c0;border-radius:12px;
}

/* ---------- planet entry rows ---------- */
.planet-entry-row{border:1px solid #e6dcc7;border-radius:12px;background:#fffef9}
.planet-entry-name b{color:var(--indigo)}

/* ---------- status colors ---------- */
.suri-status.ok{color:#1c6b39}
.suri-status.bad{color:#9c2a1c}

/* ---------- calendar summary chips ---------- */
.calendar-date-item{border-radius:12px}

/* ---------- chart card: quiet frame so the chart is the hero ---------- */
.chart-card-expanded{background:#fffef9}
.chart-card-expanded .chart{
  background:
    radial-gradient(closest-side, #fffef9 74%, #fbf6ea 100%);
  border-radius:12px;
}

/* ---------- scrollbars (webkit) ---------- */
.planet-table-wrap::-webkit-scrollbar,.table-scroll::-webkit-scrollbar{height:10px}
.planet-table-wrap::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb{
  background:#d5c6a8;border-radius:999px;border:2px solid var(--paper);
}

/* ---------- motion & responsiveness ---------- */
details>*{animation:none}
.collapsible-module .module-body,
.collapsible-input-body{animation:mn-fade .22s ease}
@keyframes mn-fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

@media(max-width:640px){
  .topbar{padding:12px 16px 15px}
  .topbar h1{font-size:19px}
  .brand-mark{width:38px;height:38px}
  .wrap{padding:16px 12px 32px}
  .card{padding:16px;border-radius:12px}
}

/* ---------- current-time (clock) button ---------- */
.current-time-button{
  width:auto;height:42px;padding:0 14px 0 11px;
  border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:800;line-height:1;
  color:#7d4d10;
  background:linear-gradient(180deg,#fdf4dc,#f6e7c0);
  border:1px solid var(--gold-hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 3px rgba(90,60,20,.12);
}
.current-time-button svg{display:block;flex:0 0 auto}
.current-time-button:hover{
  background:linear-gradient(180deg,#f9ecca,#f0dda9);
  border-color:var(--gold);color:#6a3f0a;
}
.current-time-button:active{transform:translateY(1px)}
.current-time-text{white-space:nowrap}
@media(max-width:600px){
  .current-time-button{padding:0 12px 0 10px}
}