/* gravitatech.app brand standard: colours, type, shape and shared components.
   Every App and Presentation session links this file and builds from these tokens.
   Tosca and green are Shade 1 until the Project Director chooses. */

@font-face { font-family: Carlito; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/carlito-400.woff2") format("woff2"); }
@font-face { font-family: Carlito; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/carlito-700.woff2") format("woff2"); }

:root {
  --white: #FFFFFF;
  --navy: #0C1844;
  --navy-deep: #080D26;
  --navy-raised: #16245F;
  --orange: #E07B00;
  --orange-hover: #C96E00;
  --on-orange: #0C1844;
  --tosca: #0FA3A3;
  --green: #2FA35A;
  --on-tosca: #0C1844;
  --on-green: #0C1844;

  --bg: #FFFFFF;
  --surface: #F4F7FB;
  --text: #0C1844;
  --muted: #46506B;
  --line: rgba(12, 24, 68, .14);
  --focus: #0B7F7F;
  --mark-open: #0C1844;
  --mark-soon: #8089A3;
  --panel: #0C1844;
  --show-light: block;
  --show-dark: none;

  --font: Carlito, Calibri, "Segoe UI", Arial, sans-serif;
  --t-hero: clamp(38px, 4.5vw, 66px);
  --t-h2: 28px;
  --t-h3: 22px;
  --t-name: 18px;
  --t-body: 17px;
  --t-small: 15px;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --cut: 18px;
  --cut-small: 10px;
  --page: 1376px;
  --slant: 28deg;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080D26; --surface: #0E163D; --text: #EEF1FA; --muted: #B4BED8;
    --line: rgba(238, 241, 250, .16); --focus: #5FD6D0; --mark-open: #EEF1FA; --mark-soon: #8D97B5; --panel: #16245F;
    --show-light: none; --show-dark: block; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #080D26; --surface: #0E163D; --text: #EEF1FA; --muted: #B4BED8;
  --line: rgba(238, 241, 250, .16); --focus: #5FD6D0; --mark-open: #EEF1FA; --mark-soon: #8D97B5; --panel: #16245F;
  --show-light: none; --show-dark: block; color-scheme: dark;
}

.t-light { display: var(--show-light); }
.t-dark { display: var(--show-dark); }

.gx { font-family: var(--font); font-size: var(--t-body); line-height: 1.45; color: var(--text); background: var(--bg); }
.gx *, .gx *::before, .gx *::after { box-sizing: border-box; }
.gx h1, .gx h2, .gx h3 { margin: 0; font-weight: 700; line-height: 1.12; text-wrap: balance; }
.gx a { color: inherit; }
.gx :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gx-wrap { width: 100%; max-width: calc(var(--page) + 64px); margin-inline: auto;
  padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }

/* Header: gravitatech.app uses no logo */
.gx-header { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); min-height: 80px; }
.gx-nav { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-body); }
.gx-nav a { text-decoration: none; padding-block: var(--s1); border-bottom: 2px solid transparent; }
.gx-nav a:hover { border-bottom-color: currentColor; }
.gx-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--text); background: var(--surface); border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%); }

/* Button: the only place orange appears */
.gx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s3); font: 700 var(--t-name) var(--font); text-decoration: none; cursor: pointer;
  color: var(--on-orange); background: var(--orange); border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-small)), calc(100% - var(--cut-small)) 100%, 0 100%); }
.gx-btn:hover { background: var(--orange-hover); }

/* The two galleries */
.gx-apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4) 20px; margin: 0; padding: 0; list-style: none; }
.gx-decks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gx-tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--s1); min-width: 0; }
.gx-apps .gx-tile > a, .gx-decks .gx-tile > a, .gx-tile-body { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--s1); text-decoration: none; color: inherit; min-width: 0; }
.gx-decks .gx-tile, .gx-decks .gx-tile > a, .gx-decks .gx-tile-body { grid-row: span 2; }

.gx-shot { position: relative; aspect-ratio: 8 / 5; max-width: 100%; overflow: hidden; background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.gx-decks .gx-shot { aspect-ratio: 4 / 3; }
.gx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
a:hover .gx-shot img { transform: scale(calc(var(--z, 1) * 1.03)); }
.gx-name { font-size: var(--t-name); font-weight: 700; line-height: 1.2; margin-top: 4px; }
.gx-status { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: var(--s1); font-size: var(--t-small); line-height: 1.3; color: var(--muted); }
.gx-mark { width: 10px; height: 10px; margin-top: 4px; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.gx-mark.beta { background: var(--tosca); }
.gx-mark.link { background: var(--green); }
.gx-mark.dev { background: var(--mark-open); }
.gx-mark.soon { background: var(--mark-soon); }

/* Panel used where no real image exists yet: the address is the picture */
.gx-address { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s2); color: #FFFFFF; background: var(--panel); }
.gx-address::before { content: ""; position: absolute; top: 0; bottom: 0; right: -12%; width: 52%; background: var(--tosca); transform: skewX(calc(var(--slant) * -1)); transform-origin: bottom; }
.gx-address::after { content: ""; position: absolute; top: 0; bottom: 0; right: -30%; width: 44%; background: var(--green); transform: skewX(calc(var(--slant) * -1)); transform-origin: bottom; }
.gx-address span { position: relative; z-index: 1; font-size: var(--t-small); }
.gx-address b { position: relative; z-index: 1; font-size: 22px; line-height: 1.1; }

/* Presentation covers: the title is real text */
.gx-cover { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: var(--s2) var(--s2) var(--s2) var(--s2); overflow: hidden; }
.gx-cover h3 { position: relative; z-index: 1; font-size: 20px; line-height: 1.16; max-width: 80%; }
.gx-cover::before, .gx-cover::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 16%; transform: skewX(calc(var(--slant) * -1)); }
.gx-cover::before { right: 12%; }
.gx-cover::after { right: -8%; }
.gx-cover.c1 { color: #FFFFFF; background: var(--navy-raised); }
.gx-cover.c1::before { background: var(--tosca); }
.gx-cover.c1::after { background: var(--green); }
.gx-cover.c2 { color: var(--on-tosca); background: var(--tosca); }
.gx-cover.c2::before { background: var(--navy); }
.gx-cover.c2::after { background: var(--green); }
.gx-cover.c3 { color: var(--on-green); background: var(--green); }
.gx-cover.c3::before { background: var(--white); }
.gx-cover.c3::after { background: var(--navy); }
.gx-cover.c4 { color: var(--navy); background: var(--white); box-shadow: inset 0 0 0 1px rgba(12, 24, 68, .22); }
.gx-cover.c4::before { background: var(--tosca); }
.gx-cover.c4::after { background: var(--green); }

/* Ask Grace, placed as Ask Vera is on gravitatech.com */
.gx-grace-open { position: fixed; z-index: 60; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.gx-grace { position: fixed; z-index: 61; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); color: var(--text); background: var(--bg); box-shadow: 0 18px 44px rgba(8, 13, 38, .34); border: 1px solid var(--line); }
.gx-grace-head { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--s2); color: #FFFFFF; background: var(--navy); }
.gx-grace-head b { font-size: 22px; }
.gx-grace-head button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
.gx-grace-sub { padding: var(--s1) var(--s2); font-size: var(--t-small); color: var(--muted); border-bottom: 1px solid var(--line); }
.gx-grace-talk { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); }
.gx-grace-talk p { margin: 0; }
.gx-grace-ask { display: block; width: 100%; padding: 10px var(--s2); font: var(--t-body) var(--font); color: var(--text); text-align: left; background: none; border: 1px solid var(--tosca); cursor: pointer; }
.gx-grace-ask:hover { background: var(--surface); }
.gx-grace-line { max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; }
.gx-grace-line.you { align-self: flex-end; padding: 8px 12px; background: var(--surface); }
.gx-grace-line[aria-busy="true"]:empty::after { content: "..."; color: var(--muted); }
.gx-grace-about { width: 100%; padding: var(--s1) var(--s2); font: var(--t-small) var(--font); color: var(--muted); text-align: left; background: none; border: 0; cursor: pointer; }
.gx-grace-about-text { margin: 0; padding: 0 var(--s2) var(--s1); font-size: var(--t-small); color: var(--muted); }
.gx-grace-asks { display: grid; gap: var(--s1); }
.gx-btn:disabled { opacity: .55; cursor: default; }
.gx-grace-foot { display: flex; gap: var(--s1); padding: var(--s2); border-top: 1px solid var(--line); }
.gx-grace-foot input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; font: 16px var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); }

@media (max-width: 1099px) {
  .gx-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-decks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gx-decks .gx-tile:nth-child(-n+2) { grid-column: span 3; }
  .gx-decks .gx-tile:nth-child(n+3) { grid-column: span 2; }
}
@media (max-width: 700px) {
  .gx-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .gx-apps { gap: var(--s3) 12px; }
  .gx-nav a { display: none; }
  .gx-decks { grid-template-columns: minmax(0, 1fr); }
  .gx-decks .gx-tile:nth-child(n) { grid-column: auto; }
  .gx-decks .gx-shot { aspect-ratio: 21 / 9; }
  .gx-address b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gx-shot img { transition: none; } }