/* ============================================================
   Swiss layer — Websites (desk monitor) + Branding (pinboard)
   + the App Development monitor stand. See BRAND.md.
   Loaded after the inline <style> in index.html, so equal-specificity rules here win.
   Client logos, colour bands and note colours set inline stay untouched.
   ============================================================ */

/* ------------------------------------------------------------
   1. Device chrome — one flat monitor language for both mockups.
      The device is a solid figure in --text-primary (black on white,
      white on black). Neck = trapezoid, base = bar, camera = a true
      circle in the code fill (the "live" light).
   ------------------------------------------------------------ */

/* Websites monitor */
.monitor-bezel,
[data-theme="light"] .monitor-bezel {
    background: var(--text-primary);
    border-radius: 0;
    box-shadow: none;
    padding: 12px;
}

.webcam-dot,
[data-theme="light"] .webcam-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: var(--fill-code);
    margin: 0 auto 8px;
    transition: transform 0.4s var(--ease-spring);
}

/* the camera wakes up while a site is open on screen */
.monitor-bezel:has(.iframe-state.visible) .webcam-dot { transform: scale(1.5); }

.monitor-screen,
[data-theme="light"] .monitor-screen {
    background: var(--bg-elevated);
    border-radius: 0;
    box-shadow: none;
}

.monitor-neck,
[data-theme="light"] .monitor-neck {
    background: var(--text-primary);
}

.monitor-base,
[data-theme="light"] .monitor-base {
    background: var(--text-primary);
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* App Development monitor (Core Banking card) — same language, smaller */
.monitor-mockup-outer { filter: none; }

.monitor-frame {
    background: var(--text-primary);
    border: 0;
    border-radius: 0;
    padding: 10px 10px 8px;
}

.monitor-frame::before { display: none; }

.monitor-cam {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fill-code);
    box-shadow: none;
}

.monitor-display { border-radius: 0; }

.monitor-mockup-outer .monitor-neck {
    width: 48px;
    height: 26px;
    margin: 0 auto;
    clip-path: polygon(22% 0%, 78% 0%, 100% 100%, 0% 100%);
}

.monitor-mockup-outer .monitor-base {
    width: 128px;
    height: 8px;
    margin: 0 auto;
}

.monitor-foot { display: none; }

/* ------------------------------------------------------------
   2. Websites — what's on the screen
   ------------------------------------------------------------ */

.screen-state { transition: opacity 0.35s var(--ease-out); }

/* Cards state: a flat page, left-aligned label over a row of five */
.cards-state,
[data-theme="light"] .cards-state {
    background: var(--bg-elevated);
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
}

.screen-prompt,
[data-theme="light"] .screen-prompt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--text-tertiary);
}

/* a square marker — the Websites glyph — in front of the prompt */
.screen-prompt::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--fill-code);
    align-self: center;
}

.cards-row { gap: 10px; }

.site-card,
[data-theme="light"] .site-card {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--bg);
    box-shadow: none;
    transition:
        transform 0.35s var(--ease-spring),
        border-color 0.2s var(--ease-out);
}

.site-card:hover,
[data-theme="light"] .site-card:hover {
    transform: translateY(-6px);
    border-color: var(--text-primary);
    box-shadow: none;
}

.site-card:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.site-card.hint-glow {
    animation: none;
    border-color: var(--fill-code);
}

/* client logo tiles keep their own white ground; only the frame changes */
.card-preview { border-radius: 0; }

.card-info,
[data-theme="light"] .card-info {
    gap: 3px;
    padding: 8px 9px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    text-align: left;
    transition: background-color 0.2s var(--ease-out);
}

/* hover: the caption floods with the code fill, a tiny poster */
.site-card:hover .card-info { background: var(--fill-code); border-top-color: var(--fill-code); }

.card-number,
[data-theme="light"] .card-number {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}

.card-title,
[data-theme="light"] .card-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.card-desc,
[data-theme="light"] .card-desc {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-secondary);
}

.site-card:hover .card-number,
.site-card:hover .card-title,
.site-card:hover .card-desc,
.site-card:hover .card-cta { color: var(--on-fill); }

/* Iframe state: a plain browser bar */
.iframe-state,
[data-theme="light"] .iframe-state { background: var(--bg-elevated); }

.iframe-toolbar,
[data-theme="light"] .iframe-toolbar {
    height: 32px;
    padding: 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--text-primary);
}

.iframe-back-btn,
[data-theme="light"] .iframe-back-btn {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--text-primary);
    border-radius: 0;
    padding: 2px 8px;
    transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.iframe-back-btn:hover,
[data-theme="light"] .iframe-back-btn:hover {
    background: var(--text-primary);
    color: var(--bg);
}

.iframe-site-name,
[data-theme="light"] .iframe-site-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.iframe-ext-link,
[data-theme="light"] .iframe-ext-link {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.iframe-ext-link:hover,
[data-theme="light"] .iframe-ext-link:hover { color: var(--ink-code); }

/* Phone: the monitor is scaled down to ~0.65 by JS, so the type inside
   the screen is set larger to land near label size on the glass. */
@media (max-width: 768px) {
    .cards-state,
    [data-theme="light"] .cards-state { padding: 14px 14px; gap: 14px; }
    .cards-row { gap: 8px; }
    .screen-prompt,
    [data-theme="light"] .screen-prompt { font-size: 15px; }
    .screen-prompt::before { width: 10px; height: 10px; }
    .card-info,
    [data-theme="light"] .card-info { padding: 8px 7px 10px; gap: 4px; }
    .card-number,
    [data-theme="light"] .card-number { font-size: 12px; }
    .card-title,
    [data-theme="light"] .card-title { font-size: 14px; }
    .card-desc,
    [data-theme="light"] .card-desc { font-size: 12px; }

    .card-cta,
    [data-theme="light"] .card-cta {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        text-transform: none;
        color: var(--ink-code);
    }
}

/* ------------------------------------------------------------
   3. Branding — the pinboard, flattened
      Flat stage with a rule on top, notes on a 3 × 2 grid.
      Notes stay paper (the brightest neutral of each theme) because
      the client logos on them are drawn for a light ground.
   ------------------------------------------------------------ */

.branding-board,
[data-theme="light"] .branding-board {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 230px));
    justify-content: center;
    align-items: start;
    gap: 4.5rem clamp(2rem, 5vw, 5rem);
    padding: 5rem var(--gutter) 4.5rem;
    background: var(--bg-elevated);
    border: 0;
    border-top: 1px solid var(--text-primary);
    border-radius: 0;
}

.branding-board::before,
[data-theme="light"] .branding-board::before { display: none; }

.sticky-note {
    --paper: var(--text-primary);       /* white in dark theme */
    --paper-ink: var(--bg);             /* black in dark theme */
    width: 100%;
    background-color: var(--paper);
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.45s var(--ease-spring);
}

[data-theme="light"] .sticky-note {
    --paper: var(--bg);
    --paper-ink: var(--text-primary);
    outline: 1px solid var(--border);
}

.sticky-note:hover {
    box-shadow: none;
}

.sticky-note:focus-visible {
    outline: 2px solid var(--ink-design);
    outline-offset: 4px;
}

/* the curled corner was a shading trick; drop it */
.sticky-note::after { display: none; }

/* Pins: flat discs in the Branding fill instead of photo thumbtacks */
.sticky-pin {
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fill-design);
    filter: none;
    transition: transform 0.45s var(--ease-spring);
}

.sticky-pin img { display: none; }

.sticky-note:hover .sticky-pin { transform: translateX(-50%) scale(1.45); }

.sticky-colour-band { border-radius: 0; height: 8px; }

.sticky-body { padding: 1.25rem 1.1rem 1.25rem; }

.sticky-project-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--paper-ink);
    margin-bottom: 0.4rem;
}

.sticky-desc {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    line-height: 1.45;
    color: color-mix(in srgb, var(--paper-ink) 64%, transparent);
}

.sticky-arrow {
    margin-top: 0.9rem;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .branding-board,
    [data-theme="light"] .branding-board {
        grid-template-columns: repeat(2, minmax(0, 230px));
    }
}

@media (max-width: 640px) {
    .branding-board,
    [data-theme="light"] .branding-board {
        grid-template-columns: minmax(0, 280px);
        gap: 3.25rem;
        margin-top: 2rem;
        padding: 3.5rem 1rem 3rem;
    }

    .sticky-note,
    .sticky-note:nth-child(n) { margin-top: 0; }

    .sticky-desc,
    .sticky-arrow { font-size: var(--fs-small); }
}

@media (prefers-reduced-motion: reduce) {
    .site-card,
    .sticky-note,
    .sticky-pin,
    .webcam-dot { transition: none; }
}

/* A lone note on the last row sits in the middle: centre column on desktop, full row on tablet. */
@media (min-width: 1025px) {
    .sticky-note:last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .sticky-note:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(1rem, 2.5vw, 2.5rem)); }
}

/* Two notes on the last row: shift both by half a column so the pair sits centred. */
@media (min-width: 1025px) {
    .sticky-note:nth-child(3n+1):nth-last-child(2),
    .sticky-note:nth-child(3n+1):nth-last-child(2) + .sticky-note {
        position: relative;
        left: calc((100% + clamp(2rem, 5vw, 5rem)) / 2);
    }
}