/* Shared styles for yaks.app. Layers separate colour and spacing tokens,
   element defaults, reusable components, and page layouts. Later layers
   take precedence. /style-guide demonstrates the same stylesheet. */

@layer tokens, base, components, sections;

@import url('controls.css');

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  p,
  ul {
    margin: 0;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  a {
    color: var(--accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
  }

  [id] {
    scroll-margin-block-start: 1.5rem;
  }

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

@layer components {
  /* The yak: one transparent raster drawing, sized for the small page mark or
     the home page hero. */
  .Yak {
    display: block;
    height: auto;
  }

  .Yak-small {
    width: 2.25rem;
  }

  .Yak-big {
    width: min(11rem, 55vw);
    margin-inline: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .Yak-big {
      animation: breathe 6s ease-in-out infinite;
    }
  }

  @keyframes breathe {
    50% {
      transform: translateY(-3px);
    }
  }

  /* Headings. One vocabulary, sized by variant: a section's heading is the
     plain one, a page's title is -page, the home page's opening line is
     -hero. */
  .Title {
    font-size: var(--title-size, 1.5rem);
    font-weight: 800;
    line-height: var(--title-leading, 1.6);
    text-wrap: balance;
  }

  .Title-hero {
    --title-size: clamp(2rem, 5vw + 1rem, 2.75rem);
    --title-leading: 1.15;
  }

  .Title-page {
    --title-size: clamp(1.75rem, 4vw + 1rem, 2.25rem);
    --title-leading: 1.2;
  }

  /* The quiet line next to the loud one: a lead, an aside, a caption. */
  .Note {
    color: var(--soft-ink);
    font-size: var(--note-size, inherit);
    text-wrap: pretty;
  }

  .Note-lead {
    --note-size: var(--lead);
  }

  .Note-small {
    --note-size: var(--small);
  }

  /* A conversation. The frame is the point: it says at a glance that these
     words were spoken, by two people, as an example — not that the thing
     being described is what this page is selling. Who says what is a
     modifier: -you leans right in blush, -them leans left in sky. The tail
     is a rotated corner, one square, no extra markup. */
  .Chat {
    display: grid;
    gap: 0.75rem;
    padding: 1.125rem;
    border: 1px solid var(--line);
    border-radius: var(--big-radius);
    background: var(--paper);
  }

  .Chat_Who {
    color: var(--soft-ink);
    font-size: var(--small);
    font-weight: 700;
    text-align: var(--who-side, start);
  }

  .Chat_Who-you {
    --who-side: end;
  }

  .Chat_Bubble {
    --fill: var(--ground);
    position: relative;
    width: fit-content;
    max-width: 88%;
    padding: 0.875rem 1.125rem;
    background: var(--fill);
    border-radius: var(--radius);
    text-wrap: pretty;
  }

  .Chat_Bubble::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    width: 1rem;
    height: 1rem;
    background: var(--fill);
    border-radius: 0.2rem;
    transform: rotate(45deg);
  }

  .Chat_Bubble-you {
    --fill: var(--mine);
    margin-inline-start: auto;
    border-end-end-radius: 0.4rem;
  }

  .Chat_Bubble-you::after {
    right: 0.6rem;
  }

  .Chat_Bubble-them {
    --fill: var(--theirs);
    border-end-start-radius: 0.4rem;
  }

  .Chat_Bubble-them::after {
    left: 0.6rem;
  }

  /* The same voice, inside a running sentence: something a person says out
     loud to their assistant, mid-paragraph. It takes the fill of your own
     bubble and keeps it on every fragment when the line wraps
     (box-decoration-break), which is the whole difficulty of an inline box.
     It drops the quotation marks a <q> would otherwise draw, because the fill
     already says these are your words — with the stylesheet gone, the marks
     come back and the sentence still reads. */
  .Said {
    padding: 0.1rem 0.4rem;
    border-radius: var(--small-radius);
    background: var(--mine);
    color: var(--ink);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .Said::before,
  .Said::after {
    content: none;
  }

  /* A little window: something finished, at its own address. */
  .Window {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
  }

  .Window_Bar {
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .Window_Body {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem 1.25rem 1.25rem;
  }

  .Window_Heading {
    font-size: 1.25rem;
    font-weight: 800;
  }

  .Window_List {
    display: grid;
    gap: 0.375rem;
  }

  .Window_List li {
    padding: 0.5rem 0.875rem;
    border-radius: var(--small-radius);
    background: var(--ground);
  }

  .Window_On {
    color: var(--accent);
    font-weight: 700;
  }

  /* The body, when it holds the live app instead of a drawing: a browser's
     viewport, so the frame fills it edge to edge with no inset. */
  .Window_Body-frame {
    padding: 0;
  }

  /* Match the embedded app's background while it loads. */
  .Window_Frame {
    display: block;
    width: 100%;
    height: 26rem;
    border: 0;
    background: var(--preview);
  }

  /* A page of plain prose — help, and the legal pages: the same column and
     voice, nothing boxed. Prose dresses the elements you did NOT name; a
     list that carries a component class keeps its component. They are read
     on a phone more often than not, so nothing is wider than the column and
     a long link breaks rather than scrolls. */
  .Prose {
    display: grid;
    gap: 2rem;
    overflow-wrap: break-word;
  }

  .Prose_Head {
    display: grid;
    gap: var(--half-gap);
  }

  .Prose_When {
    color: var(--soft-ink);
    font-size: var(--small);
  }

  .Prose section {
    display: grid;
    gap: 0.75rem;
  }

  .Prose h2 {
    font-size: 1.25rem;
    font-weight: 800;
    text-wrap: balance;
  }

  .Prose p,
  .Prose li {
    color: var(--soft-ink);
    text-wrap: pretty;
  }

  .Prose ul:not([class]) {
    display: grid;
    gap: var(--half-gap);
    padding-inline-start: 1.25rem;
    list-style: disc;
  }

  .Prose a {
    color: var(--accent);
  }

  .Prose address {
    font-style: normal;
    color: var(--soft-ink);
  }

  .Prose code {
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    background: var(--paper);
    font-family: var(--mono);
    font-size: var(--small);
  }
}

@layer sections {
  /* The header: the mark and the name, and the four places worth going
     (T-33643). The name IS "home" — it carries the label — so the nav names
     the other four and nothing else. Wider than the letter column on
     purpose: the header spans the page, the reading does not.

     Centred and stacked on a phone, and only spread apart once there is room
     for both on one line. */
  .Top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--half-gap) var(--gap);
    width: min(100% - 2 * var(--gap), 52rem);
    margin-inline: auto;
    padding: 1.25rem 0;
  }

  @media (min-width: 40rem) {
    .Top {
      justify-content: space-between;
    }
  }

  .Top_Name {
    display: inline-flex;
    align-items: center;
    gap: var(--half-gap);
    color: var(--ink);
    font-weight: 800;
    font-size: var(--lead);
    text-decoration: none;
  }

  /* The nav itself: quiet words, not buttons — a row of links that wraps
     rather than scrolls, since a phone is the first screen this is read on.
     The page you are already on goes to full ink; nothing else marks it. */
  .Nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--half-gap) var(--gap);
    font-size: var(--small);
    font-weight: 700;
  }

  .Nav a {
    color: var(--soft-ink);
    text-decoration: none;
  }

  .Nav a:hover,
  .Nav a[aria-current='page'] {
    color: var(--ink);
  }

  /* One column, a letter's width. The column says how WIDE, never how far
     apart: what fills it — .Home, .Prose, .Guide — owns its own rhythm. A
     page that needs more room re-points --measure on itself. */
  .Page {
    display: grid;
    width: min(100% - 2 * var(--gap), var(--measure));
    margin-inline: auto;
    padding-block: var(--wide-gap) 3rem;
  }

  /* Wider grids on the homepage; prose pages retain their reading width. */
  .Top-home {
    width: min(100% - 2 * var(--gap), var(--wide-measure));
  }

  .Home {
    --measure: var(--wide-measure);
    gap: clamp(3rem, 6vw, 5rem);
  }

  .Hello {
    display: grid;
    gap: 1.25rem;
    text-align: center;
  }

  .Home .Hello {
    gap: 2.5rem;
    align-items: center;
    text-align: start;
  }

  .Hello_Copy {
    display: grid;
    gap: var(--gap);
    max-width: 36rem;
  }

  .Hello_Yak {
    width: 4rem;
  }

  .Home .Title-hero {
    --title-size: clamp(2rem, 4vw + 1rem, 2.75rem);
  }

  .Hello_Doors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    font-weight: 700;
  }

  .Demo {
    display: grid;
    gap: var(--gap);
    min-width: 0;
  }

  .Demo_Title {
    font-size: var(--body);
    font-weight: 700;
  }

  .Demo .Window_Frame {
    height: 24rem;
  }

  @media (min-width: 60rem) {
    .Home .Hello {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 5vw, 4rem);
    }

    .Hello_Copy {
      gap: 1.25rem;
    }

    .Hello_Yak {
      width: 6rem;
    }

    .Hello .Title-hero {
      --title-size: 3rem;
    }
  }

  .How {
    display: grid;
    gap: 1.5rem;
  }

  .Step_Name {
    color: var(--accent);
    font-size: var(--lead);
    font-weight: 700;
  }

  /* Keep setup order in an ordered list, including without styles. */
  .Steps {
    display: grid;
    gap: var(--wide-gap);
    margin: 0;
    padding: 0;
    counter-reset: step;
  }

  .Steps li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--quarter-gap) 0.875rem;
    counter-increment: step;
  }

  .Steps li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--small);
    font-weight: 800;
  }

  /* Pricing stays narrower than the examples: there are only two plans. */
  .Cost {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 52rem);
    justify-self: center;
  }

  .Make {
    display: grid;
    gap: 1.25rem;
  }

  .Make_Intro {
    display: grid;
    gap: var(--half-gap);
  }

  .Make_List {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--gap);
  }

  .Make_Link {
    display: grid;
    gap: var(--half-gap);
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    text-decoration: none;
  }

  .Make_Link:hover {
    border-color: var(--accent);
  }

  .Make_Link:hover .Make_Name {
    text-decoration: underline;
  }

  .Make_Name {
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    font-weight: 800;
  }

  /* A gallery entry (gallery.ts): the card is the app's own link, and the line
     under it is the one to copy, so it sits OUTSIDE the anchor — a link
     swallows the selection. */
  .Make_Card {
    display: grid;
    gap: var(--half-gap);
  }

  /* The app's own share card where it has one, and the platform tile where it
     does not. A picture from somebody else's app is any shape it likes, so the
     box is what fixes the row: cropped to fill, never stretched. */
  .Make_Shot {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: calc(var(--radius) / 2);
    background: var(--ground);
  }

  .Make_Shot-none {
    object-fit: contain;
    padding: 1rem;
  }

  .Make_Line {
    margin: 0;
  }

  .Make_Line summary {
    color: var(--meadow);
    cursor: pointer;
  }

  .Make_Line .Said {
    user-select: all;
    overflow-wrap: anywhere;
  }

  .Yours {
    display: grid;
    gap: 1.5rem;
    padding-block: 2rem;
    border-block: 1px solid var(--line);
  }

  .Yours_List {
    display: grid;
    gap: var(--wide-gap);
    margin: 0;
  }

  .Yours_List dt {
    color: var(--accent);
    font-weight: 700;
  }

  .Yours_List dd {
    margin: var(--quarter-gap) 0 0;
    color: var(--soft-ink);
    text-wrap: pretty;
  }

  @media (min-width: 48rem) {
    .Home .Yours_List,
    .Steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  .Join {
    display: grid;
    gap: var(--gap);
    text-align: center;
    width: min(100%, 52rem);
    justify-self: center;
    justify-items: center;
  }

  .Join > .Note {
    max-width: 40rem;
  }

  .Join_Doors {
    margin-top: var(--quarter-gap);
  }

  /* The pricing page (pricing.html, D-32751): two plans side by side on a
     laptop, stacked on a phone. A wider column than a letter, because two
     columns of numbers is the one thing here that is not prose — and no
     wider, because there are only two. */
  .Pricing {
    --measure: 44rem;
    gap: 3rem;
  }

  .Plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--gap);
    align-items: start;
  }

  /* The paid one wears the accent hairline. It is a variant of a section,
     not of the Card component: what is emphasised on this page is this
     page's business. */
  .Plan {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--plan-line, transparent);
    text-align: left;
  }

  .Plan-plus {
    --plan-line: var(--accent);
  }

  .Plan_Price {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
  }

  .Plan_Per {
    color: var(--soft-ink);
    font-size: var(--body);
    font-weight: 400;
  }

  .Plan_List {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--soft-ink);
    list-style: disc;
    text-wrap: pretty;
  }

  .Plan_List li::marker {
    color: var(--accent);
  }

  .Foot {
    display: grid;
    gap: 0.75rem;
    padding: var(--wide-gap) var(--gap) 3rem;
    color: var(--soft-ink);
    font-size: var(--small);
    text-align: center;
    text-wrap: pretty;
  }

  .Foot_Links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--half-gap) 1.25rem;
  }

  .Foot_Links a {
    color: var(--soft-ink);
  }

  /* The style guide itself (style-guide.html): a wider column, because a
     row of swatches is the one thing here that is not a letter. */
  .Guide {
    --measure: 52rem;
    gap: 3rem;
  }

  .Guide_Part {
    display: grid;
    gap: var(--gap);
  }

  .Guide_Rules {
    display: grid;
    gap: 0.75rem;
    padding-inline-start: 1.25rem;
    color: var(--soft-ink);
    list-style: disc;
    text-wrap: pretty;
  }

  .Guide_SideNav {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    background: var(--paper);
  }
  .Guide_SideNav .SideNav {
    align-self: start;
  }
  .Guide_SidePanel {
    padding: 1rem;
  }
  .Guide_Choices {
    display: grid;
    gap: .25rem;
    margin: .75rem 0;
    padding: .75rem;
    border: 1px solid var(--edge);
    border-radius: .45rem;
  }
  @media (max-width: 700px) {
    .Guide_SideNav {
      display: block;
    }
  }

  .Guide_Demo {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
  }

  .Guide_Name {
    color: var(--soft-ink);
    font-family: var(--mono);
    font-size: var(--small);
    font-weight: 400;
  }

  .Guide_Swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
  }

  .Guide_Swatch {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 0.75rem;
  }

  .Guide_Chip {
    grid-row: span 2;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line);
    border-radius: var(--small-radius);
    background: var(--swatch);
  }

  .Guide_Value {
    color: var(--soft-ink);
    font-family: var(--mono);
    font-size: 0.8125rem;
  }

  .Guide_Sizes {
    display: grid;
    gap: 0.5rem;
    overflow-x: auto; /* --measure is wider than a phone, on purpose */
  }

  .Guide_Size {
    display: grid;
    grid-template-columns: 12rem auto;
    align-items: center;
    gap: 0.75rem;
  }

  .Guide_Bar {
    height: 0.75rem;
    width: var(--size);
    border-radius: var(--pill);
    background: var(--accent);
  }
}