/* =========================================================
   Plinth — "Figma canvas inside a device" waitlist concept
   Standalone stylesheet for plinth-canvas.html
   ========================================================= */

:root {
    --blue: #0d99ff;          /* Figma selection blue */
    --orange: #f5a623;        /* measurement guides     */
    --canvas: #ffffff;        /* app canvas / page bg   */
    --ink: #1a1a1a;
    --bezel: #1d1d1f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    color: var(--ink);
    overflow-x: hidden;
}

/* --- Full-bleed environment behind the device --- */
.scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 24px;
    background: #f5f5f7;
}

/* Equal flexible gaps above and below the device. The brand is pinned at
   the top and the switcher at the bottom; the device fills between them. */
.vspace {
    flex: 1 1 0;
    min-height: 20px;
}

.scene-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 48%, #fff 0%, #f5f5f7 70%);
    pointer-events: none;
}

/* Brand lockup: app icon above the wordmark, centered */
.brand {
    position: relative;
    z-index: 6;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.brand-name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
}

/* --- Device + flanking arrows --- */
.stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.device-arrow {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.device-arrow:hover {
    opacity: 0.55;
    transform: scale(1.15);
}

/* =========================================================
   The device
   ========================================================= */
.device {
    position: relative;
    filter: drop-shadow(0 28px 32px rgba(29, 29, 31, 0.12));
}

/* Height-driven: the device fills the vertical space between the brand and
   the switcher (so the gaps are the same at every browser width), capped so
   it never grows absurdly tall or wider than the viewport. */
.device[data-device="ipad"] {
    --h: min(760px, calc(100svh - 200px), calc((100vw - 160px) * 4 / 3));
    --ar: 3 / 4;
    --pad: 15px;
    --radius: 34px;
}

.device[data-device="iphone"] {
    --h: min(780px, calc(100svh - 200px), calc(90vw * 19 / 9));
    --ar: 9 / 19;
    --pad: 13px;
    --radius: 48px;
}

.device {
    height: var(--h);
    aspect-ratio: var(--ar);
}

/* Dark bezel */
.bezel {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #454548, #1d1d1f 30%, #303033);
    box-shadow: inset 0 0 0 1px #737377, inset 0 0 0 3px #252527;
    border-radius: var(--radius);
}

/* The screen is a size container so inner type scales with the device */
.screen {
    position: absolute;
    inset: var(--pad);
    border-radius: calc(var(--radius) - 9px);
    overflow: hidden;
    background: var(--canvas);
    container-type: inline-size;
    container-name: screen;
}

/* iPhone dynamic island */
.island {
    display: none;
    position: absolute;
    top: 2.6cqi;
    left: 50%;
    transform: translateX(-50%);
    width: 32cqi;
    height: 7.5cqi;
    background: #0a0a0b;
    border-radius: 50px;
    z-index: 5;
}

.device[data-device="iphone"] .island {
    display: block;
}

/* =========================================================
   Inside the screen: a faux Figma "app" canvas
   ========================================================= */
.canvas {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* faint dot grid like a design canvas */
    background-image: radial-gradient(rgba(26, 26, 26, 0.07) 1px, transparent 1.4px);
    background-size: 5cqi 5cqi;
}

/* Centered content area = the artboard the user "designs" on */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6cqi 7cqi;
    gap: 3.2cqi;
}

.device[data-device="iphone"] .content {
    padding-top: 13cqi; /* clear the island */
}

.canvas-title {
    font-size: 8.4cqi;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.canvas-sub {
    font-size: 3.4cqi;
    line-height: 1.45;
    color: #4a4a4a;
    max-width: 88%;
}

.canvas-sub strong { font-weight: 700; }

/* =========================================================
   The Figma text box (the email field)
   ========================================================= */
.figma-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11cqi; /* clears the size pill below the text box */
    width: 100%;
    margin-top: 15cqi; /* clears the rotate handle above the text box */
}

.figma-textbox {
    position: relative;
    width: calc(90% - 4px);
    display: flex;
    align-items: center;
    padding: 4cqi 4cqi;
    border: 1px solid var(--blue);
    background: rgba(255, 255, 255, 0.55);
    cursor: text;
}

.figma-textbox input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 3.8cqi;
    line-height: 1;
    color: var(--ink);
    caret-color: var(--blue);
    padding-left: 1.6cqi; /* sit just right of the fake caret */
}

.figma-textbox input::placeholder {
    color: #9a958c;
}

/* Blinking insertion cursor shown until the field is focused/typed-in */
.fake-caret {
    position: absolute;
    left: 4cqi;
    top: 50%;
    width: 1.6px;
    height: 5cqi;
    transform: translateY(-50%);
    background: var(--blue);
    animation: blink 1.06s steps(1, start) infinite;
    pointer-events: none;
}

.figma-textbox.editing .fake-caret {
    display: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Figma selection handles: white square, blue 1px border */
.handle {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #ffffff;
    border: 1px solid var(--blue);
    border-radius: 1px;
    pointer-events: none;
}

.handle.tl { top: -4px; left: -4px; }
.handle.tr { top: -4px; right: -4px; }
.handle.bl { bottom: -4px; left: -4px; }
.handle.br { bottom: -4px; right: -4px; }
.handle.tm { top: -4px; left: 50%; transform: translateX(-50%); }
.handle.bm { bottom: -4px; left: 50%; transform: translateX(-50%); }
.handle.ml { top: 50%; left: -4px; transform: translateY(-50%); }
.handle.mr { top: 50%; right: -4px; transform: translateY(-50%); }

/* Rotate handle, centered above the selection */
.rotate-handle {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5cqi);
    transform: translateX(-50%);
    width: 8.5cqi;
    height: 8.5cqi;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid var(--blue);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1cqi 2.5cqi rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.rotate-handle svg { width: 4.6cqi; height: 4.6cqi; }

/* Blue size pill, centered below the selection */
.size-pill {
    position: absolute;
    left: 50%;
    top: calc(100% + 3.5cqi);
    transform: translateX(-50%);
    background: var(--blue);
    color: #fff;
    font-size: 3cqi;
    font-weight: 600;
    line-height: 1;
    padding: 1.6cqi 3cqi;
    border-radius: 50px;
    white-space: nowrap;
    pointer-events: none;
}

/* Orange measurement guides extending to the screen edges */
.measure-v {
    position: absolute;
    left: -1px;
    bottom: 100%;
    width: 0;
    height: 1000px;
    border-left: 1.5px dashed var(--orange);
    pointer-events: none;
}

.measure-h {
    position: absolute;
    top: -1px;
    right: 100%;
    height: 0;
    width: 1000px;
    border-top: 1.5px dashed var(--orange);
    pointer-events: none;
}

.measure-pill {
    position: absolute;
    background: var(--orange);
    color: #fff;
    font-size: 2.8cqi;
    font-weight: 600;
    line-height: 1;
    padding: 1.4cqi 2.6cqi;
    border-radius: 50px;
    white-space: nowrap;
    pointer-events: none;
}

.measure-pill.top {
    left: 0;
    bottom: calc(100% + 16cqi);
    transform: translateX(-50%);
}

.measure-pill.left {
    top: 0;
    right: calc(100% + 1cqi);
    transform: translateY(-50%);
}

/* Floating reposition / resize controls, bottom-right of the screen */
.fab-stack {
    position: absolute;
    right: 2cqi;
    bottom: 4.5cqi;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 3cqi;
}

.fab {
    width: 8.5cqi;
    height: 8.5cqi;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, 0.22);
}

.fab svg { width: 4.2cqi; height: 4.2cqi; }

/* Join button — lives on the canvas too */
.join-btn {
    margin-top: 4cqi;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 3.4cqi;
    color: #fff;
    background: var(--ink);
    padding: 2.8cqi 6cqi;
    border-radius: 50px;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.join-btn:hover { transform: translateY(-1px); }
.join-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Success state inside the canvas */
.canvas-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    font-size: 3.6cqi;
    font-weight: 600;
    color: #167a3a;
}

.canvas-success .check {
    width: 11cqi;
    height: 11cqi;
    border-radius: 50%;
    background: #36de5f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6cqi;
}

.canvas.done .figma-form { display: none; }
.canvas.done .canvas-success { display: flex; }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 560px) {
    .stage { gap: 8px; }
    .device-arrow { width: 42px; height: 42px; font-size: 20px; }
}

.launch-note {
    position: relative;
    z-index: 2;
    color: #86868b;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-align: center;
}
.device-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8e8ed;
    color: #6e6e73;
    font-size: 28px;
}
.device-arrow:hover { background: #dedee3; opacity: 1; transform: none; }
button:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
@media (max-width: 560px) {
    .scene { padding: 24px 16px; }
    .stage { gap: 10px; }
    .device-arrow { width: 28px; height: 28px; font-size: 22px; }
    .device[data-device="ipad"] { --h: min(760px, calc(100svh - 180px), calc((100vw - 108px) * 4 / 3)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Typography and spacing polish */
.brand-name { font-weight: 600; letter-spacing: -0.035em; }
.content { padding: 8cqi 8cqi; gap: 4cqi; }
.canvas-title { font-size: clamp(28px, 7.8cqi, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.045em; }
.canvas-sub { font-size: clamp(15px, 3.3cqi, 18px); line-height: 1.5; color: #6e6e73; max-width: 94%; }
.canvas-sub strong { font-weight: 600; }
.figma-form { margin-top: 10cqi; gap: 8cqi; }
.figma-textbox { width: 92%; padding: 3cqi; background: #fff; }
.figma-textbox input { font-size: clamp(16px, 3.4cqi, 18px); line-height: 1.4; padding-left: 0; }
.figma-textbox input::placeholder { color: #76767b; }
.fake-caret { display: none; }
.rotate-handle { width: 6.5cqi; height: 6.5cqi; bottom: calc(100% + 3cqi); box-shadow: 0 2px 8px #0000000a; }
.rotate-handle svg { width: 3.4cqi; height: 3.4cqi; }
.measure-v, .measure-h { opacity: 0.4; }
.measure-pill { font-size: 2.3cqi; padding: 1cqi 1.8cqi; background: #c88a29; }
.measure-pill.top { bottom: calc(100% + 11cqi); }
.size-pill { font-size: 2.4cqi; padding: 1.2cqi 2cqi; top: calc(100% + 2.5cqi); background: #408bc7; }
.fab { width: 6.5cqi; height: 6.5cqi; background: #408bc7; box-shadow: 0 2px 8px #00000012; }
.fab svg { width: 3.2cqi; height: 3.2cqi; }
.fab-stack { right: 1.8cqi; gap: 2cqi; }
.join-btn { font-size: clamp(15px, 3cqi, 17px); font-weight: 500; min-height: 44px; padding: 12px 26px; margin-top: 2cqi; }
.canvas-success { font-size: max(16px, 3.6cqi); }
.device-picker { position: relative; z-index: 2; display: flex; padding: 3px; margin-top: 24px; background: #e8e8ed; border-radius: 28px; }
.device-picker button { border: 0; background: transparent; color: #6e6e73; font-weight: 500; line-height: 1.2; font-family: inherit; font-size: 14px; min-height: 44px; min-width: 84px; border-radius: 24px; cursor: pointer; }
.device-picker button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px #0000000c; }
.device[data-device="ipad"] { --h: min(720px, calc(100svh - 240px), calc((100vw - 64px) * 4 / 3)); }
.device[data-device="iphone"] { --h: min(740px, calc(100svh - 240px), calc((100vw - 48px) * 19 / 9)); }
@media (max-width: 560px) {
    .scene { min-height: 100svh; padding: 24px 16px; }
    .stage { width: 100%; }
    .device[data-device="ipad"] { --h: min(720px, calc((100vw - 32px) * 4 / 3)); --pad: 10px; --radius: 26px; }
    .device[data-device="iphone"] { --h: max(600px, min(740px, calc(100svh - 220px))); }
    .content { padding: 28px 20px; gap: 16px; }
    .canvas-title { font-size: clamp(26px, 7.8cqi, 34px); }
    .canvas-sub { max-width: 100%; }
    .figma-form { margin-top: 24px; gap: 22px; }
    .figma-textbox { min-height: 48px; width: 100%; padding: 12px; }
    .measure-pill, .size-pill, .rotate-handle, .fab-stack { display: none; }
    .join-btn { margin-top: 0; width: 100%; }
    .device-picker { margin-top: 20px; }
    .launch-note { margin-top: 16px; }
}

/* Glass material for the device selector. */
.device-picker {
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(220, 223, 230, 0.35));
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(110, 115, 130, 0.08), 0 4px 12px rgba(29, 29, 31, 0.06);
}
.device-picker::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.38));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -1px 3px rgba(150, 155, 170, 0.12), 0 2px 6px rgba(29, 29, 31, 0.1);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.device-picker::before { transform: translateX(calc(var(--selection, 0) * 100%)); }
.device-picker button { transition: color 180ms ease; }
.device-picker button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.device-picker button:hover { color: #1d1d1f; }
@media (prefers-reduced-transparency: reduce) {
    .device-picker { background: #e8e8ed; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .device-picker::before { background: #fff; }
}

/* macOS preview: a wide desktop window with familiar window controls. */
.mac-toolbar { display: none; }
.device[data-device="macos"] {
    --h: min(600px, calc(100svh - 250px), calc((100vw - 64px) * 10 / 16));
    --ar: 16 / 10;
    --pad: 1px;
    --radius: 18px;
}
.device[data-device="macos"] .bezel { background: #d2d2d7; box-shadow: inset 0 0 0 1px #b8b8bf; }
.device[data-device="macos"] .screen { border-radius: 17px; }
.device[data-device="macos"] .mac-toolbar {
    position: absolute; inset: 0 0 auto; z-index: 8;
    height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
    background: linear-gradient(#fafafc, #ededf0); border-bottom: 1px solid #0000000c;
}
.mac-toolbar > span:not(.mac-title) { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px #00000012; }
.mac-toolbar > span:nth-child(2) { background: #febc2e; }
.mac-toolbar > span:nth-child(3) { background: #28c840; }
.mac-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: #6e6e73; }
.device[data-device="macos"] .canvas { top: 40px; }
.device[data-device="macos"] .content { padding: 24px 12%; gap: 16px; }
.device[data-device="macos"] .canvas-title { font-size: clamp(28px, 4.5cqi, 44px); }
.device[data-device="macos"] .canvas-sub { font-size: 16px; max-width: 580px; }
.device[data-device="macos"] .figma-form { max-width: 400px; margin-top: 28px; gap: 28px; }
.device[data-device="macos"] .figma-textbox { padding: 12px 16px; }
.device[data-device="macos"] .rotate-handle,
.device[data-device="macos"] .measure-pill,
.device[data-device="macos"] .size-pill,
.device[data-device="macos"] .fab-stack { display: none; }
.device[data-device="macos"] .join-btn { margin-top: 0; }
@media (max-width: 560px) {
    .device[data-device="macos"] { width: 100%; height: 560px; aspect-ratio: auto; }
    .device[data-device="macos"] .content { padding: 24px 20px; }
    .device[data-device="macos"] .canvas-sub { font-size: 15px; }
}