/* smallbiz-it OS. Tokens and surfaces carried over from The Coil OS prototype. */
:root { --color-obsidian: #fdfdfd; --color-glass: rgba(255,255,255,.75); }
.dark { --color-obsidian: #050505; --color-glass: rgba(10,10,10,.78); }
:root { --font-display: 'Cinzel', serif; --r: 12px; }
:root[data-theme="prestige"] { --color-gold: #D4AF37; --color-oxblood: #5A0A0A; --color-crimson: #8B1A1A; --glow: 212,175,55; }

/* Per-trade skins: palette, display face and finish all change with the business. */
:root.dark[data-theme="atelier"] { --color-obsidian: #0E090C; --color-glass: rgba(22,12,17,.8); }
:root[data-theme="atelier"] { --color-gold: #E3A99B; --color-oxblood: #3B1C2E; --color-crimson: #A23E6B; --glow: 227,169,155;
  --font-display: 'Cormorant Garamond', serif; --r: 22px; }
:root.dark[data-theme="carbon"] { --color-obsidian: #08090A; --color-glass: rgba(14,16,19,.85); }
:root[data-theme="carbon"] { --color-gold: #F2C230; --color-oxblood: #1C2026; --color-crimson: #C1121F; --glow: 242,194,48;
  --font-display: 'Chakra Petch', sans-serif; --r: 3px; }
:root.dark[data-theme="iron"] { --color-obsidian: #0A0A0A; --color-glass: rgba(16,16,16,.92); }
:root[data-theme="iron"] { --color-gold: #FF5A1F; --color-oxblood: #1A1A1A; --color-crimson: #D9480F; --glow: 255,90,31;
  --font-display: 'Anton', sans-serif; --r: 0px; }
:root.dark[data-theme="meadow"] { --color-obsidian: #0B0F0C; --color-glass: rgba(16,24,19,.82); }
:root[data-theme="meadow"] { --color-gold: #9CCB9A; --color-oxblood: #1F2A24; --color-crimson: #C8553D; --glow: 156,203,154;
  --font-display: 'Fraunces', serif; --r: 18px; }

/* finish: corner radius follows the skin */
body .rounded-xl, body .rounded-2xl { border-radius: var(--r); }
[data-theme="iron"] .rounded, [data-theme="iron"] .rounded-lg, [data-theme="iron"] .rounded-full:not(.w-1\.5) { border-radius: 0; }
[data-theme="carbon"] .rounded-lg { border-radius: 3px; }
/* finish: surface texture and edges */
[data-theme="carbon"] .glass-panel { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px); }
[data-theme="iron"] .glass-panel { border: 2px solid #2b2b2b; box-shadow: none; backdrop-filter: none; }
[data-theme="iron"] .font-display { text-transform: uppercase; letter-spacing: .01em; }
[data-theme="atelier"] .font-display { font-style: italic; letter-spacing: 0; }
[data-theme="atelier"] .glass-panel { border-color: rgba(227,169,155,.18); }
[data-theme="meadow"] .glass-panel { border-color: rgba(156,203,154,.16); }
/* the top rule changes with the trade: pole stripes, a rose hairline, a checkered flag, a solid bar, a soft dash */
[data-theme="atelier"] .pole-line { background: linear-gradient(90deg, transparent, var(--color-gold), transparent); opacity: .7; height: 2px; }
[data-theme="carbon"] .pole-line { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 6px 6px; opacity: .55; height: 6px; }
[data-theme="iron"] .pole-line { background: var(--color-gold); opacity: 1; height: 4px; }
[data-theme="meadow"] .pole-line { background: repeating-linear-gradient(90deg, var(--color-gold) 0 10px, transparent 10px 16px); opacity: .6; }
:root[data-theme="coil"]     { --color-gold: #C23616; --color-oxblood: #1A1A1A; --color-crimson: #E03D1A; --glow: 194,54,22; }
:root[data-theme="terminal"] { --color-gold: #00ff00; --color-oxblood: #003300; --color-crimson: #00aa00; --glow: 0,255,0; }
:root[data-theme="minimal"]  { --color-gold: #9a9a9a; --color-oxblood: #222222; --color-crimson: #444444; --glow: 150,150,150; }
:root[data-theme="ocean"]    { --color-gold: #0ea5e9; --color-oxblood: #082f49; --color-crimson: #0369a1; --glow: 14,165,233; }

html, body { background: var(--color-obsidian); }
body { transition: background-color .3s; }
.bg-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(var(--glow), .07), transparent 55%), radial-gradient(circle at 50% 40%, transparent 10%, var(--color-obsidian) 95%); }
.skip { position: absolute; left: -999px; top: 6px; background: var(--color-gold); color: #000; padding: 6px 10px; z-index: 60; }
.skip:focus { left: 6px; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.glass-panel { background: var(--color-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(150,150,150,.15); box-shadow: 0 10px 30px rgba(0,0,0,.5); position: relative; }
.pole-line { background: repeating-linear-gradient(45deg, #000, #000 10px, #fff 10px, #fff 20px); height: 3px; width: 100%; opacity: .5; }
.shadow-glow-sm { box-shadow: 0 0 10px rgba(var(--glow), .3); }
.shadow-glow { box-shadow: 0 0 20px rgba(var(--glow), .4); }

.btn-gold { display: inline-block; background: linear-gradient(90deg, var(--color-gold), #ca8a04); color: #050505; font-weight: 800;
  text-transform: uppercase; letter-spacing: .15em; box-shadow: 0 0 20px rgba(var(--glow), .4); transition: transform .15s; }
.btn-gold:active { transform: scale(.96); }
.btn-ghost { display: inline-block; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 800;
  text-transform: uppercase; letter-spacing: .15em; }
.btn-ghost:hover { background: rgba(255,255,255,.05); }

.trade-btn { font: 700 10px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.5); color: #d1d5db; border-radius: 4px; }
.trade-btn[aria-pressed="true"] { border-color: var(--color-gold); color: var(--color-gold); box-shadow: 0 0 12px rgba(var(--glow), .25); }

/* ---------- phone ---------- */
.device-phone { position: relative; width: 100%; max-width: 380px; margin: 0 auto; height: 760px; display: flex; flex-direction: column;
  background: var(--color-obsidian); border: 1px solid rgba(255,255,255,.08); border-radius: 44px; overflow: hidden;
  box-shadow: 0 0 0 8px #0b0b0b, 0 0 0 9px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.7), 0 10px 60px rgba(var(--glow), .08); }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font: 700 11px 'Manrope', sans-serif; color: #e5e7eb; }
.phone-status .notch { width: 96px; height: 24px; background: #000; border-radius: 14px; }
.phone-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-radius: 0 0 14px 14px; z-index: 2; }
.phone-screen { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: 12px; }
.phone-screen::-webkit-scrollbar { display: none; }
.phone-nav, .op-mobile-nav { display: flex; justify-content: space-around; padding: 8px 6px 18px; background: rgba(0,0,0,.85);
  border-top: 1px solid rgba(255,255,255,.08); }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #6b7280; font: 700 9px 'Manrope', sans-serif;
  text-transform: uppercase; letter-spacing: .1em; padding: 4px 6px; background: none; border: 0; cursor: pointer; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn[aria-current="page"] { color: var(--color-gold); }
.nav-btn[aria-current="page"] svg { filter: drop-shadow(0 0 5px rgba(var(--glow), .5)); }

.tab-anim { animation: fadeIn .3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- web console ---------- */
.device-web { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: #070707;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 10px 60px rgba(var(--glow), .06); }
.web-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #111; border-bottom: 1px solid rgba(255,255,255,.08); }
.web-bar .dots { display: flex; gap: 6px; } .web-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; display: block; }
.web-bar .url { flex: 1; font: 400 11px 'JetBrains Mono', monospace; color: #9ca3af; background: #0a0a0a; border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 4px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.web-body { display: grid; grid-template-columns: 190px 1fr; min-height: 760px; }
.web-nav { border-right: 1px solid rgba(255,255,255,.07); padding: 18px 10px; background: rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 4px; }
.web-nav .nav-btn { flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 10px; padding: 10px 12px; border-radius: 6px; text-align: left; }
.web-nav .nav-btn[aria-current="page"] { background: rgba(var(--glow), .08); border: 1px solid rgba(var(--glow), .25); }
.web-nav .nav-btn small { display: block; font: 400 9px 'Manrope', sans-serif; text-transform: none; letter-spacing: 0; color: #6b7280; margin-top: 1px; }
.web-main { padding: 24px; overflow: auto; max-height: 760px; }

/* toggles */
.toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #4b5563; border: 0; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle[aria-checked="true"] { background: var(--color-gold); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); }

/* segment chips */
.seg { font: 700 9px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 7px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); color: #9ca3af; background: rgba(0,0,0,.4); cursor: pointer; }
.seg[aria-pressed="true"] { border-color: var(--color-gold); color: var(--color-gold); background: rgba(var(--glow), .08); }

/* the waterline: tomorrow's slots fill as bookings land */
.day-strip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.slot { position: relative; height: 64px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.slot .water { position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, rgba(var(--glow), .95), rgba(var(--glow), .45)); }
.slot.gap { border: 1px dashed rgba(248,113,113,.7); background: rgba(139,26,26,.12); }
.slot.gap .water { height: 0; }
.slot.just-filled .water { animation: rise 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { from { height: 0; } to { height: 100%; } }
.slot .lbl { position: absolute; inset: auto 0 4px 0; text-align: center; font: 700 8px 'JetBrains Mono', monospace; color: #000; z-index: 1; }
.slot.gap .lbl { color: #fca5a5; }
.slot-time { font: 400 8px 'JetBrains Mono', monospace; color: #6b7280; text-align: center; margin-top: 4px; }

[data-theme="iron"] .ai-dot, [data-theme="carbon"] .ai-dot { border-radius: 2px; }
.ai-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--color-gold);
  background: radial-gradient(circle at 35% 30%, rgba(var(--glow), .9), #1a1405 70%); box-shadow: inset 0 0 10px rgba(0,0,0,.8); }
.pending { opacity: 0; transform: translateY(6px); }
.msg-in { transition: opacity .35s, transform .35s; }

@media (max-width: 1023px) {
  .web-body { grid-template-columns: 1fr; min-height: 0; }
  .web-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); padding: 8px; scrollbar-width: none; }
  .web-nav .nav-btn { flex-shrink: 0; }
  .web-nav .nav-btn small { display: none; }
  .web-nav .web-brand { display: none; }
  .web-main { max-height: none; padding: 16px; }
  .device-phone { height: 700px; }
}
@media (max-width: 480px) {
  .day-strip { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-anim, .slot.just-filled .water { animation: none; }
  .msg-in { transition: none; }
  .animate-pulse { animation: none; }
}