/* Shivraj Singh Art Gallery — page components */

/* ---------- section heads ---------- */

.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.sechead p { max-width: 58ch; }

/* ---------- forms ---------- */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(26px, 3.4vw, 40px);
  flex-wrap: wrap;
}

.tabs button {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-500);
  padding: 15px 20px;
  min-height: 48px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.tabs button .hi { font-family: var(--deva); text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
.tabs button:hover { color: var(--green-700); }
.tabs button[aria-selected="true"] { color: var(--green-800); border-bottom-color: var(--gold-500); }

fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: clamp(20px, 2.6vw, 28px) 0 0;
}

legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding: 0;
  margin-bottom: 4px;
}

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.field > label, .fieldlabel {
  font-family: var(--sans);
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field > label .hi, .fieldlabel .hi { text-transform: none; letter-spacing: 0; color: var(--ink-500); }
.field .hint { font-family: var(--sans); font-size: 0.79rem; color: var(--ink-500); letter-spacing: 0.02em; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], select, textarea {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: 2px;
  padding: 12px 13px;
  min-height: 48px;
  width: 100%;
}

textarea { min-height: 116px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus { border-color: var(--green-600); outline: 2px solid rgba(184, 145, 47, 0.35); outline-offset: 1px; }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #a3341f; background: #fff8f6; }

.err { font-family: var(--sans); font-size: 0.78rem; color: #94301c; min-height: 0; }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--ink-700);
  padding: 13px 15px;
  border: 1px solid var(--ivory-300);
  background: var(--ivory-000);
  cursor: pointer;
}

.check input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--green-700); }

.formcard {
  background: var(--ivory-000);
  border: 1px solid var(--ivory-300);
  box-shadow: var(--shadow-lift);
  padding: clamp(22px, 3.2vw, 40px);
}

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }

/* ---------- uploader ---------- */

.drop {
  border: 2px dashed var(--gold-400);
  background: #fffdf7;
  border-radius: 3px;
  padding: clamp(22px, 3vw, 34px);
  text-align: center;
  cursor: pointer;
}

.drop.over { background: #fff6e0; border-color: var(--gold-600); }
.drop strong { display: block; font-size: 1.06rem; margin-bottom: 5px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 13px; margin-top: 17px; }

.thumb { border: 1px solid var(--ivory-300); background: #fff; padding: 7px; position: relative; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ivory-200); }
.thumb.is-hero { border-color: var(--gold-500); box-shadow: inset 0 0 0 2px var(--gold-400); }

.thumb__name {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--ink-500);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb__bar { display: flex; gap: 5px; margin-top: 6px; }

.thumb__bar button {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink-300);
  background: #fff;
  color: var(--ink-700);
  min-height: 32px;
  border-radius: 2px;
  cursor: pointer;
}

.thumb__bar button:hover { border-color: var(--green-700); color: var(--green-700); }
.thumb__bar button.on { background: var(--gold-500); border-color: var(--gold-500); color: #21180a; }

.herobadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold-500);
  color: #21180a;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 6px;
}

/* ---------- summary rail ---------- */

.withrail { display: grid; grid-template-columns: 1.55fr 0.95fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; }
@media (max-width: 900px) { .withrail { grid-template-columns: 1fr; } }

.rail {
  position: sticky;
  top: 96px;
  background: var(--green-800);
  color: var(--ivory-100);
  padding: clamp(20px, 2.6vw, 28px);
  border-top: 3px solid var(--gold-500);
}

.rail h3 { color: var(--ivory-000); font-size: 1.2rem; }
.rail dl { margin: 0; font-family: var(--sans); font-size: 0.87rem; }
.rail dt { color: var(--gold-300); letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.7rem; margin-top: 13px; }
.rail dd { margin: 3px 0 0; color: #e7e1d4; font-family: var(--serif); font-size: 1rem; }

.notice {
  border-left: 3px solid var(--gold-500);
  background: #fffaee;
  padding: 15px 18px;
  font-size: 0.95rem;
  color: var(--ink-700);
}

/* ---------- process / timeline ---------- */

.tl { list-style: none; margin: 0; padding: 0; counter-reset: s; }

.tl li {
  position: relative;
  padding: 0 0 clamp(26px, 3.4vw, 40px) clamp(52px, 6vw, 74px);
  border-left: 1px solid var(--rule);
  margin-left: 16px;
  counter-increment: s;
}

.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }

.tl li::before {
  content: counter(s);
  position: absolute;
  left: -17px; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ivory-000);
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
  font-family: var(--sans);
  font-size: 0.82rem;
  display: grid; place-items: center;
}

.tl h3 { margin-bottom: 0.3em; }

/* ---------- visit ---------- */

.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li { padding: 13px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.factlist dt, .factlist .k { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500); padding-top: 3px; }
@media (max-width: 560px) { .factlist li { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- what families have said ----------
   Ivory cards on the green band, ruled in gold. Every card carries its own
   Sample tag, because none of these is a real customer yet. */

/* Large, quiet type rather than a boxed review card: a gold hairline over each
   column, the words set big enough to be read across a room. */
.tribute {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px) 0 0;
  border-top: 1px solid rgba(200, 162, 74, 0.42);
}

.tribute .tag { align-self: flex-start; }

.tribute blockquote { margin: 0; }

.tribute blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ivory-100);
}

.tribute figcaption {
  margin-top: auto;
  padding-top: 15px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.tribute figcaption span { color: #b6ae9d; }
/* Fixed spaces: ordinary ones collapse around generated content. */
.tribute figcaption span::before { content: "\00A0\00B7\00A0"; }

/* ---------- fixed docks ----------
   Two corners pinned to the viewport, both fixed so scrolling never moves
   them: the WhatsApp badge at bottom-left, the studio-desk launcher at
   bottom-right. Keeping them apart means neither can cover the other. */

/* ---- the row at the foot of every page ----
   Two stations on one baseline at every width: WhatsApp on the left, the
   studio desk on the right. The two round badges share a diameter, and the
   band is as tall as they are. */
.dock {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--badge);
  gap: 10px;
  pointer-events: none;
}

.dock--wa { left: var(--dock-gut, 16px); }
.dock--right { right: var(--dock-gut, 16px); justify-content: flex-end; }

.dock > * { pointer-events: auto; }

/* ---- the WhatsApp badge ----
   The studio's own number, as reachable as the desk and the same size as it,
   on the same baseline and clear of the home indicator. */
.wa-dock {
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1f8a4c;
  color: #fff;
  border: 1px solid rgba(200, 162, 74, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.wa-dock svg { width: 44%; height: 44%; fill: currentColor; display: block; }
.wa-dock:hover, .wa-dock:focus-visible { background: #22a05a; }

/* The row stands over the page, so the page is given a foot of its own: nothing
   at the end of the scroll is ever read from under it. */
body { padding-bottom: calc(var(--badge) + 46px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 380px) {
  .dock { --dock-gut: 10px; }
}

/* ---------- studio desk widget ---------- */

/* The launcher carries the studio's own mark and keeps a soft gold aura that
   breathes, so the family can find it without it shouting. */
/* A round badge rather than a bar of words: the studio's mark fills the circle,
   a small light shows the desk is manned, and the name only appears if you hover
   or tab to it. The accessible name lives on the button itself. */
.desk-launch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  background: var(--green-900);
  color: var(--ivory-000);
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  /* The aura is cast by layered shadows, which paint outside the pill rather
     than over it: a close green halo and a wider gold bloom. */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 5px rgba(31, 92, 63, 0.34),
    0 0 20px 6px rgba(200, 162, 74, 0.22);
  animation: deskPulse 2s ease-in-out infinite;
  will-change: transform;
}

/* Held to one line: the label must never stack or turn on its side. */
/* The name, kept off the badge until it is wanted. */
.desk-launch__t {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  padding: 7px 13px;
  border-radius: 40px;
  background: var(--green-900);
  border: 1px solid rgba(200, 162, 74, 0.5);
  color: var(--ivory-100);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.desk-launch:hover .desk-launch__t,
.desk-launch:focus-visible .desk-launch__t { opacity: 1; }

/* The mark fills the badge. The ground is already transparent in the file, so
   nothing needs blending and no black tile can appear. */
.desk-launch__mark {
  width: 78%;
  height: 78%;
  display: grid;
  place-items: center;
}

/* The cut-out was made by reading brightness into alpha, so its mid-tones come
   out soft. Lifting them makes the mark read as ivory at badge size. */
.desk-launch__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.55) contrast(1.15);
}

/* The small light at the foot of the badge: the desk takes word at any hour. */
.desk-launch__dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #35c46f;
  border: 2px solid var(--green-900);
}

/* Under the pointer it settles, so the thing you are about to click is still. */
.desk-launch:hover,
.desk-launch:focus-visible {
  background: var(--green-700);
  animation-play-state: paused;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 6px rgba(31, 92, 63, 0.42),
    0 0 26px 9px rgba(200, 162, 74, 0.34);
}

@keyframes deskPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 4px rgba(31, 92, 63, 0.28),
      0 0 16px 4px rgba(200, 162, 74, 0.18);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 8px rgba(31, 92, 63, 0.42),
      0 0 30px 12px rgba(200, 162, 74, 0.38);
  }
}

/* A visitor who has asked for less movement keeps the aura, but it holds still. */
@media (prefers-reduced-motion: reduce) {
  .desk-launch {
    animation: none;
    transform: none;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 6px rgba(31, 92, 63, 0.38),
      0 0 24px 8px rgba(200, 162, 74, 0.3);
  }
}

/* Given a definite height so the transcript below can take the slack; a whole
   reply should be readable without scrolling. */
.desk {
  position: fixed;
  right: 18px;
  /* Clear of the row of badges, so the desk never covers its own launcher. */
  bottom: calc(var(--badge) + 26px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(520px, calc(100vw - 36px));
  height: clamp(420px, 70vh, 780px);
  max-height: calc(100vh - var(--badge) - 44px);
  padding: 0; /* the page's section padding must not apply to this panel */
  overscroll-behavior: contain; /* scrolling here never chains to the page */
  background: var(--ivory-000);
  border: 1px solid var(--green-700);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.desk.open { display: flex; }

.desk__hd { background: var(--green-800); color: var(--ivory-000); padding: 13px 15px; display: flex; gap: 11px; align-items: center; }
.desk__hd img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; mix-blend-mode: screen; }
.desk__hd strong { font-weight: 400; font-size: 1rem; display: block; line-height: 1.3; }
.desk__hd .st { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold-300); }
.desk__x { background: none; border: 0; color: var(--ivory-200); font-size: 1.35rem; cursor: pointer; width: 40px; height: 40px; }
.desk__x:hover { color: #fff; }

/* Puts the thread back to a clean counter without closing the panel. */
.desk__clear {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 2px;
  color: var(--ivory-200);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  min-height: 40px;
  cursor: pointer;
}

.desk__clear .hi {
  font-family: var(--deva);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-300);
}

.desk__clear:hover { border-color: var(--gold-300); color: #fff; background: rgba(200, 162, 74, 0.14); }

.desk__stub {
  background: rgba(200, 162, 74, 0.17);
  border-bottom: 1px solid var(--ivory-300);
  padding: 8px 15px;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  color: #6d4f00;
  flex: 0 0 auto;
}

/* min-height:0 lets this shrink inside the flex column and scroll itself,
   instead of pushing the input off the panel. */
.desk__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ivory-100);
}

.desk__hd, .desk__chips, .desk__form { flex: 0 0 auto; }

/* A slim visible scrollbar in the two regions that scroll, so it is plain that
   the wheel belongs to them and not to the page behind. */
.desk__log, .desk__gate {
  scrollbar-width: thin;
  scrollbar-color: var(--green-600) var(--ivory-200);
}

.msg {
  max-width: 90%;
  padding: 12px 15px;
  font-size: 0.97rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.msg p { margin: 0 0 0.7em; }
.msg p:last-child { margin-bottom: 0; }
.msg--desk { background: #fff; border: 1px solid var(--ivory-300); border-left: 3px solid var(--green-600); align-self: flex-start; }
.msg--you { background: var(--green-700); color: var(--ivory-000); align-self: flex-end; }
.msg strong { font-weight: 400; color: var(--green-800); }
.msg--you strong { color: var(--gold-300); }
.msg .q { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); display: block; margin-bottom: 4px; }

.desk__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 15px 0; background: var(--ivory-100); }

.desk__chips button {
  font-family: var(--sans);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1px solid var(--green-600);
  color: var(--green-700);
  border-radius: 20px;
  padding: 8px 13px;
  min-height: 44px;
  cursor: pointer;
}

.desk__chips button:hover { background: var(--green-700); color: #fff; }

.desk__form { display: flex; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--ivory-300); background: var(--ivory-000); }
.desk__form input { min-height: 44px; font-size: 0.95rem; }
.desk__form button { min-height: 44px; padding-inline: 15px; }

@media (max-width: 520px) {
  .dock { --dock-gut: 12px; }

  /* A near full-width sheet, lifted clear of the bottom row of badges so those
     links stay tappable while the desk is open. */
  .desk {
    left: 8px;
    right: 8px;
    bottom: calc(var(--badge) + 22px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    top: 8px;
    max-height: none;
  }
}

/* On a narrow phone the three stations would meet in the middle, so the badges
   and the capsule both come in rather than overlapping. */
@media (max-width: 400px) {
  .desk-launch__dot { width: 13px; height: 13px; }
}

/* ---------- who is at the counter ----------
   The card the studio fills in before it opens a thread or takes a commission.
   It is deliberately plain: three fields, one tick, one line about why. */

.idcard {
  background: var(--ivory-000);
  border: 1px solid var(--ivory-300);
  border-top: 3px solid var(--gold-500);
  padding: clamp(18px, 2.4vw, 28px);
}

.idcard__k {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 8px;
}

.idcard__h { font-size: clamp(1.15rem, 1.7vw, 1.5rem); margin: 0 0 0.5em; }
.idcard__h .hi { color: var(--ink-500); font-size: 0.72em; }
.idcard__lede { color: var(--ink-700); margin-bottom: 1.4em; }

.idcard__privacy {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-500);
  border-left: 2px solid var(--ivory-300);
  padding-left: 12px;
  margin: 1.2em 0;
}

.idcard__done {
  margin: 1.2em 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ivory-300);
  font-size: 0.92rem;
  color: var(--ink-700);
}

/* Inside the desk panel the card sits on the panel's own ground. */
/* The gate takes the room the transcript would have had, and scrolls itself so
   the button at its foot is always in the panel. */
.desk__gate {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ivory-100);
  display: flex;
  flex-direction: column;
}

.desk .idcard {
  border: 0;
  border-top: 0;
  padding: 16px 16px 0;
  background: transparent;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.desk .idcard__lede { font-size: 0.92rem; }

/* The reason and Enter details rest on the sill of the panel when the card
   is shorter than it, and scroll with the card when it is longer, so they
   never lie over the field that has the focus. */
.desk .idcard__foot {
  margin: auto 0 0;
  padding: 10px 0 12px;
  background: var(--ivory-100);
  border-top: 1px solid var(--ivory-300);
}

.desk .idcard__privacy { margin: 0 0 10px; border-left: 0; padding-left: 0; }
.desk .idcard__foot .btn { width: 100%; }

.idcard .btnrow .btn { min-height: 44px; }

/* The identity step at the head of a commission pane. Three answers do not
   want the whole width of the pane. */
.idstep { margin-bottom: clamp(20px, 2.6vw, 32px); }
.idstep .idcard > .field,
.idstep .idcard > .check,
.idstep .idcard__lede,
.idstep .idcard__privacy,
.idstep .idcard__done { max-width: min(100%, 34rem); }
.idstep .idcard__foot { margin-top: 1.2em; }

/* ---------- the gate held over a page ----------
   A sheet, not a scroll lock: the page keeps its scrollport, so the sticky
   ribbon behind it never goes anywhere. */

.idsheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(8, 26, 20, 0.66);
}

.idsheet__box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.idsheet__x {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-500);
  cursor: pointer;
  padding: 6px 8px;
}

.idsheet__x:hover { color: var(--ink-900); }

.hidden { display: none !important; }