/* MMK Residence — shared design tokens & primitives */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&family=Allura&display=swap');

:root {
  --ink: #0e171c;
  --ink-2: #16232a;
  --slate: #1f3038;
  --slate-2: #2a3f48;
  --stone: #6b7a80;
  --mist: #a9b5b9;
  --line: #e6e1d8;
  --sand: #f3eee6;
  --cream: #faf8f4;
  --white: #ffffff;
  --gold: #c39a52;
  --gold-2: #dfc28a;
  --gold-3: #f3e6c8;
  --sage: #7f9c91;
  --success: #2f9e6f;
  --warning: #d99a2b;
  --danger: #d2564b;
  --info: #3d7fd1;
  --violet: #7b6cd9;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Allura', cursive;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(14, 23, 28, .06), 0 2px 8px rgba(14, 23, 28, .04);
  --shadow: 0 10px 30px -10px rgba(14, 23, 28, .18), 0 4px 10px -4px rgba(14, 23, 28, .06);
  --shadow-lg: 0 30px 80px -20px rgba(14, 23, 28, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold-2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; }
p { margin: 0; }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }
.script { font-family: var(--font-script); font-weight: 400; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.muted { color: var(--stone); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  font-weight: 700; font-size: .92rem; letter-spacing: .01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(14, 23, 28, .45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { --bg: linear-gradient(135deg, #d8b46f, #b88a3e); --fg: #1a1206; background: var(--bg); }
.btn-gold:hover { box-shadow: 0 16px 34px -12px rgba(195, 154, 82, .7); }
.btn-light { --bg: #fff; --fg: var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: rgba(14, 23, 28, .18); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { --bg: rgba(255,255,255,.06); --fg: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(10px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .82rem; }
.btn-xs { padding: .35rem .7rem; font-size: .75rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.loading { opacity: .6; pointer-events: none; }
.btn.loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label, .label { font-size: .78rem; font-weight: 700; color: var(--slate); letter-spacing: .02em; }
.input, .select, .textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s; outline: none;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(195, 154, 82, .15); }
.input::placeholder, .textarea::placeholder { color: #a8b0b3; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236b7a80' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }
.hint { font-size: .75rem; color: var(--stone); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; font-size: .9rem; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 2px; flex: none; }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 9999; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.toast {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: 14px; background: var(--ink); color: #fff;
  box-shadow: var(--shadow-lg); font-size: .88rem; line-height: 1.45;
  animation: toastIn .5s var(--ease) both; border-left: 3px solid var(--gold);
}
.toast.out { animation: toastOut .35s var(--ease) both; }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
.toast strong { display: block; font-size: .9rem; }
.toast small { opacity: .75; }
.toast .t-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); flex: none; font-size: 1rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ---------- misc ---------- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: var(--sand); color: var(--slate); white-space: nowrap; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- architectural floor plan (shared) ---------- */
.mmk-plan { width: 100%; height: auto; display: block; overflow: visible;
  --pl-bg: #fbf9f5; --pl-line: #2a3a42; --pl-thin: #9fb0b5; --pl-unit: #ffffff; --pl-unit-h: #fff8ea; --pl-text: #6b7a80; --pl-num: #0e171c;
  --pl-av: #2fbf7f; --pl-av-fill: #e3f7ec; --pl-held: #c39a52; --pl-held-fill: #f7ecd6; --pl-occ: #8a99a0; --pl-occ-fill: #e9edee; --pl-sel: #c39a52; --pl-tint: #f6e9ef; }
.mmk-plan.gents { --pl-tint: #e7eff6; }
.mmk-plan.dark { --pl-bg: #101b21; --pl-line: #dfc28a; --pl-thin: #3d535c; --pl-unit: #15232a; --pl-unit-h: #1d2f37; --pl-text: #7f939a; --pl-num: #f3efe6;
  --pl-av: #3ddc97; --pl-av-fill: rgba(61,220,151,.16); --pl-held-fill: rgba(195,154,82,.22); --pl-occ: #4b5f67; --pl-occ-fill: #22333b; --pl-tint: #15232a; }
.mmk-plan .pl-shell { fill: var(--pl-bg); stroke: var(--pl-line); stroke-width: 14; }
.mmk-plan .pl-corridor { fill: var(--pl-bg); }
.mmk-plan .pl-text { fill: var(--pl-text); font: 700 22px var(--font-body); letter-spacing: 6px; }
.mmk-plan .pl-stairs rect { fill: var(--pl-bg); stroke: var(--pl-thin); stroke-width: 3; }
.mmk-plan .pl-stairs line { stroke: var(--pl-thin); stroke-width: 2.5; }
.mmk-plan .pl-arrow { stroke: var(--pl-text) !important; stroke-width: 3 !important; fill: none; }
.mmk-plan .pl-entry { fill: none; stroke: var(--pl-sel); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mmk-plan .pu-floor { fill: var(--pl-unit); transition: fill .3s; }
.mmk-plan .pu-outline { fill: none; stroke: var(--pl-line); stroke-width: 7; pointer-events: none; }
.mmk-plan .pu:hover .pu-floor { fill: var(--pl-unit-h); }
.mmk-plan .pu.mine .pu-floor { fill: var(--pl-held-fill); }
.mmk-plan .pu.mine .pu-outline { stroke: var(--pl-sel); stroke-width: 10; }
.mmk-plan .pu.dim { opacity: .38; }
.mmk-plan .pu.maint .pu-floor { fill: var(--pl-occ-fill); }


.mmk-plan .pu-door { fill: none; stroke: var(--pl-thin); stroke-width: 3; stroke-dasharray: 6 5; }
.mmk-plan .pu-window { stroke: var(--pl-sel); stroke-width: 10; stroke-linecap: round; }
.mmk-plan .pu-num { fill: var(--pl-num); font: 500 72px var(--font-display); }
.mmk-plan .pu-cap { fill: var(--pl-text); font: 800 15px var(--font-body); letter-spacing: 5px; }
.mmk-plan .pu-badge circle { fill: #d2564b; } .mmk-plan .pu-badge text { fill: #fff; font: 800 18px var(--font-body); }
.mmk-plan .pb .pb-frame { fill: var(--pl-occ-fill); stroke: var(--pl-occ); stroke-width: 3.5; transition: fill .25s, stroke .25s, filter .25s; }
.mmk-plan .pb .pb-pillow { fill: var(--pl-unit); stroke: var(--pl-occ); stroke-width: 2.5; }
.mmk-plan .pb .pb-fold { stroke: var(--pl-occ); stroke-width: 2; opacity: .6; }
.mmk-plan .pb .pb-label { fill: var(--pl-occ); font: 800 26px var(--font-body); pointer-events: none; }
.mmk-plan .pb.available .pb-frame { fill: var(--pl-av-fill); stroke: var(--pl-av); }
.mmk-plan .pb.available .pb-pillow, .mmk-plan .pb.available .pb-fold { stroke: var(--pl-av); }
.mmk-plan .pb.available .pb-label { fill: var(--pl-av); }
.mmk-plan .pb.held .pb-frame { fill: var(--pl-held-fill); stroke: var(--pl-held); }
.mmk-plan .pb.held .pb-pillow, .mmk-plan .pb.held .pb-fold { stroke: var(--pl-held); }
.mmk-plan .pb.held .pb-label { fill: var(--pl-held); }
.mmk-plan .pb.click { cursor: pointer; outline: none; }
.mmk-plan .pb.click:hover .pb-frame, .mmk-plan .pb.click:focus .pb-frame { filter: drop-shadow(0 0 10px var(--pl-av)); stroke-width: 6; }
.mmk-plan .pb.available.click .pb-frame { animation: plBreath 2.6s ease-in-out infinite; }
@keyframes plBreath { 50% { filter: drop-shadow(0 0 9px var(--pl-av)); } }
.mmk-plan .pb.selected .pb-frame, .mmk-plan .pb.is-mine .pb-frame { fill: var(--pl-sel); stroke: var(--pl-sel); animation: none; filter: drop-shadow(0 0 14px var(--pl-sel)); }
.mmk-plan .pb.selected .pb-label, .mmk-plan .pb.is-mine .pb-label { fill: #1a1206; }
.mmk-plan .pb.selected .pb-pillow, .mmk-plan .pb.is-mine .pb-pillow { fill: #f3e6c8; stroke: #1a1206; }
.plan-svg-wrap { position: relative; }
.plan-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 10px)); padding: .45rem .75rem; border-radius: 10px; background: #0e171c; color: #fff; font-size: .76rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.plan-tip.on { opacity: 1; }
.plan-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0e171c; }
/* Cormorant uses old-style figures by default — force lining numerals everywhere */
body, .mmk-plan .pu-num, .mmk-plan text { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* queueable (taken/reserved) beds — tappable, with a softer gold hover */
.mmk-plan .pb.queue.click:hover .pb-frame, .mmk-plan .pb.queue.click:focus .pb-frame { filter: drop-shadow(0 0 10px var(--pl-held)); stroke: var(--pl-held); }
.mmk-plan .pb.queue.click .pb-frame { animation: none; }
/* v3 plan furniture: bathroom, kitchen, wardrobes, desk */
.mmk-plan .pu-room { fill: var(--pl-tint); stroke: var(--pl-thin); stroke-width: 3; }
.mmk-plan .pu-shower { fill: var(--pl-unit); stroke: var(--pl-thin); stroke-width: 2.5; }
.mmk-plan .pu-glass { fill: none; stroke: #7fb6d9; stroke-width: 3; opacity: .8; }
.mmk-plan .pu-fix, .mmk-plan .pu-ward rect, .mmk-plan .pu-ward line, .mmk-plan .pu-desk rect, .mmk-plan .pu-desk circle { fill: var(--pl-unit); stroke: var(--pl-thin); stroke-width: 2.5; }
.mmk-plan .pu-drain { fill: var(--pl-thin); }
.mmk-plan .pu-mirror { stroke: #9cc3ef; stroke-width: 6; stroke-linecap: round; }
.mmk-plan .pu-counter { fill: var(--pl-held-fill); stroke: var(--pl-thin); stroke-width: 3; }
.mmk-plan .pu-cupboard { stroke: var(--pl-thin); stroke-width: 2; stroke-dasharray: 6 5; }
.mmk-plan .pu-fridge { fill: var(--pl-unit); stroke: var(--pl-text); stroke-width: 3; }
.mmk-plan .pu-gap { stroke: var(--pl-unit); stroke-width: 9; }
.mmk-plan .pu-tag { fill: var(--pl-text); font: 800 13px var(--font-body); letter-spacing: 3px; opacity: .85; }
.mmk-plan .pu-desk rect { fill: var(--pl-held-fill); }

/* accessibility: skip link + calmer motion for people who ask their device for it */
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 10000; padding: .7rem 1.1rem; border-radius: 12px; background: #0e171c; color: #dfc28a; font-weight: 800; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; outline: 3px solid #dfc28a; outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--gold, #c39a52); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}