/* ==========================================================================
   SHANTHA HI TECH — APPLICATIONS
   css/applications.css

   Light/paper register (website.html's), deliberately alternating against
   solutions.html's dark shell so the two newest nav destinations read as
   distinct places, not the same page twice.

   Four sections, three "platform" (Android, iOS, Journals) and one
   "bespoke" (Customizable) set visually apart — see section 07. No brand
   colour borrowed from Android or iOS; this site runs on contrast, the way
   marketing.css and services.css already state outright.

   Contents
     01. Tokens          02. Base            03. Layout shell
     04. Section nav      05. Section chrome  06. Placeholders
     07. Android — device grid
     08. iOS — pointer-tilt device
     09. Journals — self-drawing pipeline
     10. Customizable — module assembly
     11. Footer           12. Responsive      13. Motion preferences
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  --paper: #ffffff;
  --paper-2: #f8f7f5;
  --paper-3: #f1efeb;
  --line: #e3e1dc;

  --ink: #1a1a1a;
  --muted: #6f6f6f;
  --muted-2: #a3a3a3;

  /* Bespoke tier inverts to this, rather than a paper tone — see §10 */
  --deep: #131313;
  --on-deep: #ffffff;
  --on-deep-muted: rgba(255, 255, 255, 0.62);

  --accent: #1a1a1a;

  --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: clamp(17px, 0.3vw + 16px, 19px);
  --t-xl: clamp(20px, 0.9vw + 17px, 26px);
  --t-2xl: clamp(26px, 2.2vw + 18px, 44px);
  --t-hero: clamp(34px, 4.4vw + 16px, 60px);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  --gutter: 24px;
  --container: 1280px;
  --nav-w: 220px;

  --r-btn: 4px;
  --r-card: 10px;
  --r-media: 14px;

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --mid: 380ms;
}

@media (min-width: 768px)  { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }


/* ==========================================================================
   02. BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: -0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--s2);
  z-index: 300;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
}

.skip-link:focus { top: var(--s2); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

.alink {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--ink);
  font-size: var(--t-base);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color var(--fast) var(--ease);
}

.alink:hover { border-bottom-color: var(--ink); }
.alink .arw { transition: transform var(--fast) var(--ease); }
.alink:hover .arw { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 14px 28px;
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.001em;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn--solid { background-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background-color: #000000; }


/* ==========================================================================
   03. LAYOUT SHELL
   ========================================================================== */

.apps-intro {
  padding: var(--s7) 0 var(--s5);
  border-bottom: 1px solid var(--line);
}

.apps-intro__title { font-size: var(--t-hero); max-width: 18ch; }

.apps-intro__sub {
  margin-top: var(--s3);
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--t-lg);
}

.apps-body {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  gap: var(--s6);
  align-items: start;
}

.apps-body > * { min-width: 0; }


/* ==========================================================================
   04. SECTION NAV
   Sticky index; highlights via IntersectionObserver (js/applications.js).
   Plain <a href="#anchor"> list, not a tab pattern — every section is
   already in the flow and indexable, this is purely a wayfinder.
   ========================================================================== */

.apps-nav {
  position: sticky;
  top: var(--s5);
  padding-top: var(--s6);
}

.apps-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--line);
}

.apps-nav__link {
  display: block;
  padding: 8px 0 8px 18px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: var(--t-sm);
  letter-spacing: -0.001em;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.apps-nav__link:hover { color: var(--ink); }

.apps-nav__link.is-active {
  color: var(--ink);
  font-weight: 500;
  border-left-color: var(--ink);
}

.apps-nav__tag {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   05. SECTION CHROME
   ========================================================================== */

.apps-stage { padding-block: var(--s6) var(--s7); }

.section {
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--s4);
}

.section:last-child { border-bottom: 0; }

.section__tier {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: var(--s3);
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section__head { max-width: 640px; margin-bottom: var(--s5); }

.section__title { font-size: var(--t-2xl); max-width: 16ch; }

.section__sub {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--t-lg);
}

.section__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s5);
  margin-top: var(--s4);
}

.section__point b {
  display: block;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.section__point p { color: var(--muted); font-size: var(--t-sm); }

.section__cta { margin-top: var(--s5); }


/* ==========================================================================
   06. PLACEHOLDERS
   Swap each .ph for an <img> when artwork arrives — see
   prompts_sw/applications-prompts.md.
   ========================================================================== */

.ph {
  display: grid;
  place-items: center;
  padding: var(--s3);
  border-radius: var(--r-media);
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.03) 0 10px, transparent 10px 20px);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--9x19 { aspect-ratio: 9 / 19.5; }

.ph--media { padding: 0; }
.ph--media .wall__shot { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   07. ANDROID — STAGGERED DEVICE GRID
   A spread of device frames that lift + fade in on entry, staggered by
   js/applications.js toggling .is-visible per item (IntersectionObserver,
   fires once). Neutral outline frames — no borrowed hardware silhouette.
   ========================================================================== */

.device-grid {
  display: grid;
  /* Compact/Standard/Large columns are graduated (not repeat(3, 1fr)) so the
     three phone frames actually differ in size on screen — roughly matching
     real 1080 / 1170 / 1284px device-width ratios — since the section's whole
     point is "every Android size", not three identically-sized boxes with
     different labels. The tablet card is a landscape 16:9 placeholder; giving
     it the same column width as the phones made it render tiny and squat, so
     its column gets the most width instead. */
  grid-template-columns: 0.86fr 1fr 1.12fr 2fr;
  gap: var(--s4);
  align-items: end;
}

.device-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background-color: var(--paper);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--mid) var(--ease-out), transform var(--mid) var(--ease-out);
}

.device-frame.is-visible { opacity: 1; transform: translateY(0); }

.device-frame .ph { border-radius: 10px; }

.device-frame__label {
  margin-top: var(--s2);
  text-align: center;
  color: var(--muted);
  font-size: var(--t-xs);
}

/* Stagger via nth-child delay, capped so a long grid doesn't feel laggy */
.device-frame:nth-child(1) { transition-delay: 0ms; }
.device-frame:nth-child(2) { transition-delay: 90ms; }
.device-frame:nth-child(3) { transition-delay: 180ms; }
.device-frame:nth-child(4) { transition-delay: 270ms; }


/* ==========================================================================
   08. iOS — POINTER-TILT DEVICE
   One large device that tilts toward the cursor (3D, --rx/--ry set by
   js/applications.js on pointermove) with its screen layer parallaxed a few
   px further than the frame for depth. Resting flat with no listener
   attached when unsupported/reduced-motion — see §13.
   ========================================================================== */

.tilt-stage {
  display: flex;
  justify-content: center;
  padding-block: var(--s4);
  perspective: 1200px;
}

.tilt-device {
  position: relative;
  width: min(300px, 70vw);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 14px;
  background-color: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms var(--ease-out);
  will-change: transform;
}

.tilt-device .ph {
  border-radius: 22px;
  transform: translateZ(24px);
}

.tilt-device__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  z-index: 1;
}


/* ==========================================================================
   09. JOURNALS — SELF-DRAWING PIPELINE
   SVG path from Submitted -> Indexed; stroke-dashoffset tied to scroll
   progress through the section (js/applications.js), each stage lighting up
   as the line reaches it.
   ========================================================================== */

.pipeline { position: relative; padding-block: var(--s4); }

.pipeline__svg { width: 100%; height: auto; overflow: visible; }

.pipeline__path {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

.pipeline__path-fill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  /* Normalised to a 0-1 length by the pathLength="1" SVG attribute on the
     element itself (applications.html) — pathLength is not a CSS property,
     it has to be set as an attribute or the browser silently ignores it and
     these two values are measured against the path's real length (1200
     units) instead, so the line never visibly draws. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pipeline__stages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}

.pipeline__stage {
  padding: var(--s2) 0;
  border-top: 2px solid var(--line);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.pipeline__stage b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--fast) var(--ease);
}

.pipeline__stage.is-active { border-top-color: var(--ink); }
.pipeline__stage.is-active b { color: var(--ink); }


/* ==========================================================================
   10. CUSTOMIZABLE — MODULE ASSEMBLY
   The bespoke tier, inverted to the dark surface used elsewhere on the
   site's black sections, so it visually breaks from the three platform
   sections above it. Toggle chips are real <button aria-pressed>; the
   preview grid re-renders from js/applications.js state, not CSS alone —
   this is the one genuinely interactive (not just reactive) treatment.
   ========================================================================== */

.custom-section {
  background-color: var(--deep);
  background-image: linear-gradient(180deg, rgba(10, 10, 12, 0.82), rgba(10, 10, 12, 0.94)), url("../images/custom-applications-bg.jpg");
  background-size: cover;
  background-position: center;
  color: var(--on-deep);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-bottom: 0;
}

.custom-section .section__tier { border-color: rgba(255,255,255,0.18); color: var(--on-deep-muted); }
.custom-section .section__title,
.custom-section .section__point b { color: var(--on-deep); }
.custom-section .section__sub,
.custom-section .section__point p { color: var(--on-deep-muted); }

.module-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s4);
}

.module-chip {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--on-deep-muted);
  font-size: var(--t-sm);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.module-chip:hover { border-color: rgba(255, 255, 255, 0.4); }

.module-chip[aria-pressed="true"] {
  background-color: var(--on-deep);
  border-color: var(--on-deep);
  color: var(--deep);
}

.module-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  min-height: 96px;
}

.module-tile {
  padding: var(--s3);
  border-radius: var(--r-card);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-sm);
  color: var(--on-deep);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}

.module-tile.is-active { opacity: 1; transform: scale(1); }

.module-preview__empty {
  grid-column: 1 / -1;
  padding: var(--s4);
  text-align: center;
  color: var(--on-deep-muted);
  font-size: var(--t-sm);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-card);
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s4) var(--s3);
}

.foot__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--s3);
}

/* Footer sits on the light .paper body background; invert the white-ink
   logo artwork to near-black so it's visible here (this page's footer has
   no dark ground, unlike company.css/website.css's). */
.foot__logo { height: 48px; width: auto; filter: invert(1); }
.foot__tag { margin-top: var(--s2); color: var(--muted); font-size: var(--t-sm); }

.foot__t {
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}

.foot__list { display: grid; gap: 0; }
.foot__list a { font-size: var(--t-sm); color: var(--muted); transition: color var(--fast) var(--ease); display: inline-flex; align-items: center; min-height: 32px; }
.foot__list a:hover { color: var(--ink); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-top: 36px;
  padding-top: var(--s1);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
}

.foot__base a {
  /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics
     can't leave it a pixel short — matches .foot__list a's treatment. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.foot__base a:hover { color: var(--ink); }


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .apps-body { grid-template-columns: 1fr; gap: var(--s5); }

  .apps-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: var(--s2);
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .apps-nav__list {
    flex-direction: row;
    gap: var(--s3);
    border-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .apps-nav__list::-webkit-scrollbar { display: none; }

  .apps-nav__link {
    padding: 6px 0;
    margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .apps-nav__link.is-active { border-left: 0; border-bottom-color: var(--ink); }
  .apps-nav__tag { display: none; }

  .section__points { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .device-grid > .device-frame:last-child { grid-column: 1 / -1; }
  .pipeline__stages { grid-template-columns: repeat(3, 1fr); }
  .module-preview { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

@media (max-width: 600px) {
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .device-grid > .device-frame:last-child { grid-column: 1 / -1; }
  .pipeline__stages { grid-template-columns: repeat(2, 1fr); }
  .module-preview { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   13. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.001ms !important;
  }

  .device-frame { opacity: 1; transform: none; }
  .tilt-device { transform: none !important; }
  .pipeline__path-fill { stroke-dashoffset: 0; }
  .module-tile { opacity: 1; transform: none; }
}