/* ============================================================
   Abushaikha Hospitality Consultancy — Investment Studio v3.0
   css/studio.css — styles for the 4-tab calculator.
   Everything is scoped under .studio (calculator card grid) or
   .calc-gate (form gate) so it cannot leak into style.css pages.
   Brand: Verde #0B3624 · Merlot #3E1526 · Gold #C6A55C ·
          Gold-text #7A5F22
   ============================================================ */

/* ---- Card grid: inputs left, results right (auto-flips RTL) ---- */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 22px;
  align-items: start;
  --s-good: #1E7A46;
  --s-mid: #B07C00;
  --s-bad: #A3231F;
}
@media (max-width: 980px) {
  .studio { grid-template-columns: 1fr; }
}
.studio .calc-card { min-width: 0; }

/* ---- Inputs (safe base; style.css may add more) ---- */
.studio .calc-field { display: grid; gap: 5px; margin: 0 0 12px; }
.studio .calc-field label { font-size: .8rem; font-weight: 600; line-height: 1.35; }
.studio .calc-field input,
.studio .calc-field select {
  width: 100%; padding: 9px 11px;
  border: 1px solid rgba(11, 54, 36, .28); border-radius: 8px;
  font: inherit; font-size: .92rem; background: #fff; color: #12241c;
}
.studio .calc-field input:focus,
.studio .calc-field select:focus {
  outline: 2px solid rgba(198, 165, 92, .55); outline-offset: 1px;
}
.studio .calc-field small { font-size: .72rem; line-height: 1.45; opacity: .72; }

/* ---- Collapsible input groups ---- */
.studio details { border-top: 1px solid rgba(11, 54, 36, .12); margin-top: 12px; padding: 10px 0 2px; }
.studio summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: #0B3624; }
.studio details > div { margin-top: 12px; }
.studio .calc-mini { font-size: .74rem; line-height: 1.55; margin-top: 14px; color: var(--mut); } /* no opacity: keeps 4.5:1+ contrast at small size */

/* ---- Tabs ---- */
.studio .tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 2px solid rgba(11, 54, 36, .14);
  margin-bottom: 18px;
}
.studio .tabs [role="tab"] {
  appearance: none; background: transparent; border: 1px solid transparent;
  font: inherit; font-size: .85rem; padding: 8px 12px;
  border-radius: 8px 8px 0 0; cursor: pointer;
  color: #3E1526; opacity: .68; margin-bottom: -2px;
}
.studio .tabs [role="tab"]:hover { opacity: 1; }
.studio .tabs [role="tab"][aria-selected="true"] {
  opacity: 1; font-weight: 600; color: #0B3624;
  background: #fff; border-color: rgba(11, 54, 36, .16);
  border-bottom-color: #fff;
}
.studio .tabpanel[hidden] { display: none; }

/* ---- KPI strip ---- */
.calc-out .sk {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 2px 0 16px;
}
@media (max-width: 640px) { .calc-out .sk { grid-template-columns: repeat(2, 1fr); } }
.calc-out .sk > div {
  background: rgba(11, 54, 36, .05);
  border: 1px solid rgba(11, 54, 36, .1);
  border-radius: 10px; padding: 10px 12px;
}
.calc-out .sk b {
  display: block; font-size: 1.22rem; color: #0B3624;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.calc-out .sk span { font-size: .7rem; letter-spacing: .02em; opacity: .75; }

/* ---- Owner flags ---- */
.calc-out .fls { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.calc-out .fls li { font-size: .8rem; line-height: 1.5; padding: 8px 12px; border-radius: 8px; border: 1px solid; }
.calc-out .flag-ok   { background: rgba(30, 122, 70, .08);  border-color: rgba(30, 122, 70, .35);  color: #155A33; }
.calc-out .flag-warn { background: rgba(176, 124, 0, .09);  border-color: rgba(176, 124, 0, .4);   color: #6d4d00; }
.calc-out .flag-bad  { background: rgba(163, 35, 31, .07);  border-color: rgba(163, 35, 31, .35);  color: #7e1c19; }

/* ---- Chart ---- */
.calc-out .chartbox {
  margin: 4px 0 6px; padding: 10px 10px 6px;
  border: 1px solid rgba(11, 54, 36, .12); border-radius: 10px;
  background: rgba(11, 54, 36, .025);
}
.calc-out .chartbox svg { width: 100%; height: auto; display: block; }

/* ---- Section headings inside the output card ---- */
.calc-out .hd {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #7A5F22;
  margin: 18px 0 8px;
}

/* ---- Result rows (idempotent with style.css) ---- */
.calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed rgba(11, 54, 36, .14);
  font-size: .86rem;
}
.calc-row b { color: #0B3624; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.calc-row.calc-gold b { color: #7A5F22; }

/* ---- Tables: sensitivity, cap grid, comparison ---- */
.studio .tw { overflow-x: auto; margin: 10px 0 8px; }
.studio .tw table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .8rem; }
.studio .tw th, .studio .tw td {
  border: 1px solid rgba(11, 54, 36, .14); padding: 7px 9px;
  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.studio .tw th { background: rgba(11, 54, 36, .06); font-weight: 600; color: #0B3624; }
.studio .tw .rowh { text-align: start; font-weight: 600; color: #3E1526; background: rgba(11, 54, 36, .035); }
.studio .tw td.c-good { background: rgba(30, 122, 70, .16); color: #14532e; font-weight: 600; }
.studio .tw td.c-mid  { background: rgba(176, 124, 0, .14); color: #6d4d00; }
.studio .tw td.c-bad  { background: rgba(163, 35, 31, .11); color: #7e1c19; }

/* ---- Two-column input groups (Compare / Redevelopment) ---- */
.studio .g2i { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0; }
@media (max-width: 640px) { .studio .g2i { grid-template-columns: 1fr; } }

/* ---- Share box + actions ---- */
.calc-out .li-box {
  background: rgba(198, 165, 92, .12);
  border: 1px solid rgba(198, 165, 92, .5);
  border-radius: 10px; padding: 12px 14px;
  font-size: .82rem; line-height: 1.6; color: #3E1526;
  white-space: pre-line; overflow-wrap: break-word;
}
.calc-out .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.calc-out .note { font-size: .74rem; line-height: 1.55; opacity: .75; margin-top: 12px; }

/* ---- Consent checkbox (calculator gate; booking page uses the
       standalone snippet with inline styles) ---- */
.calc-gate .consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0; font-size: .8rem; line-height: 1.5;
}
.calc-gate .consent input {
  margin-top: 3px; width: 16px; height: 16px;
  flex: 0 0 auto; accent-color: #0B3624;
}
.calc-gate .field { margin: 0 0 12px; }
.calc-gate .field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; }
.calc-gate .field input {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(11, 54, 36, .28); border-radius: 8px;
  font: inherit; font-size: .92rem; background: #fff;
}

/* ---- Methodology page ---- */
.meth h2 { font-size: 1.05rem; color: #0B3624; margin: 26px 0 8px; }
.meth p { font-size: .9rem; line-height: 1.7; margin: 0 0 10px; }

/* ---- Print: results only, inputs expanded ---- */
@media print {
  #hd, #ft, #mm, .wa, .tools, .calc-gate, .band, .seo-sec,
  .acts, .tabs, #lang, #burger { display: none !important; }
  body { background: #fff; }
  .studio { display: block; }
  .calc-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .tabpanel[hidden] { display: none !important; }
  .studio .tw { overflow: visible; }
  a[href^="http"]::after { content: ""; }
}

/* ---- v3.1: presets, what-must-be-true, outcome CTA ---- */
.studio .g2i { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .studio .g2i { grid-template-columns: 1fr; } }
.studio select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .92rem;
  border: 1px solid rgba(11, 54, 36, .28); border-radius: 8px; background: #fff; color: #14231c;
}
.wmt {
  background: rgba(11, 54, 36, .045); border: 1px solid rgba(11, 54, 36, .14);
  border-inline-start: 3px solid #C6A55C; border-radius: 8px;
  padding: 12px 14px; margin: 14px 0;
}
.wmt-h {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #0B3624;
}
.wmt ul { margin: 0; padding: 0; list-style: none; }
.wmt li {
  font-size: .86rem; line-height: 1.55; color: #23342b;
  padding: 5px 0; padding-inline-start: 18px; position: relative;
}
.wmt li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: #C6A55C;
}
.cta-outbox {
  border: 1px solid rgba(198, 165, 92, .5); border-radius: 10px;
  padding: 14px 16px; margin: 14px 0;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: linear-gradient(0deg, rgba(198, 165, 92, .07), rgba(198, 165, 92, .07)), #fff;
}
.cta-line { flex: 1 1 260px; margin: 0; font-size: .9rem; line-height: 1.55; }
.cta-line.weak { color: #7A1F2B; }
.cta-line.strong { color: #0B3624; }
.cta-outbox .btn { flex: 0 0 auto; max-width: 100%; }
@media print { .wmt, .cta-outbox { break-inside: avoid; } }

/* ---- v3.1: HMA red-flag scorecard ---- */
.hma-out { max-width: 860px; margin-inline: auto; }
.hma-scorebox {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: 6px;
}
.hma-scorebox > div { display: flex; flex-direction: column; gap: 4px; }
.hma-scorebox b { font-size: 2rem; line-height: 1.1; color: #0B3624; font-variant-numeric: tabular-nums; }
.hma-band {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; width: fit-content;
  border: 1px solid rgba(11, 54, 36, .2); color: #23342b;
}
.hma-band.ok  { background: rgba(11, 54, 36, .08);  border-color: rgba(11, 54, 36, .3);  color: #0B3624; }
.hma-band.warn{ background: rgba(198, 165, 92, .16); border-color: rgba(198, 165, 92, .5); color: #6d5417; }
.hma-band.bad { background: rgba(122, 31, 43, .09);  border-color: rgba(122, 31, 43, .4);  color: #7A1F2B; }
.hma-group { margin: 18px 0 6px; }
.hma-group h4 {
  margin: 0 0 8px; font-size: .95rem; color: #3E1526;
  border-bottom: 1px solid rgba(198, 165, 92, .4); padding-bottom: 5px;
}
.hma-item {
  padding: 10px 0; border-bottom: 1px dashed rgba(11, 54, 36, .12);
}
.hma-item p { margin: 0 0 8px; font-size: .9rem; line-height: 1.55; }
.hma-opts { display: flex; gap: 14px; flex-wrap: wrap; }
.hma-opts label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; color: #23342b; cursor: pointer;
}
.hma-opts input { accent-color: #0B3624; width: 16px; height: 16px; }
#hma-actions li { padding-inline-start: 18px; position: relative; margin: 0 0 9px; }
#hma-actions li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: #7A1F2B;
}
#hma-actions b { display: block; font-size: .88rem; color: #3E1526; }
#hma-actions span { font-size: .84rem; line-height: 1.55; color: #42544a; }
@media print {
  .hma-scorebox, .hma-group, .wmt { break-inside: avoid; }
  .hma-opts { display: none; }
  .hma-item { border-bottom: 1px solid #ddd; }
}

/* ---- v3.1: glossary ---- */
.gloss h2 {
  font-size: 1.08rem; color: #0B3624; margin: 34px 0 6px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(198, 165, 92, .35);
}
.gloss dt { font-weight: 700; color: #3E1526; margin-top: 18px; font-size: .95rem; }
.gloss dd { margin: 4px 0 0 0; color: #42544a; line-height: 1.7; font-size: .92rem; }
.gloss dd a, .gloss dd a:visited { color: #0B3624; text-decoration: underline; }
html { scroll-behavior: smooth; }
@media print { .gloss h2 { break-after: avoid; } .gloss dt { break-after: avoid; } }