/*
pincerweb's look. Everything is served from here: no fonts, icons or frameworks from anyone else's servers.

Design tokens first (colour, type, space), with dark mode and high contrast. Text colours meet WCAG 2.2 AA against
their backgrounds (4.5:1, checked when they were chosen); the brand coral itself is only used for decoration.

Layout and looks then follow the tree: elements are named by their compound keys (#root-pincer, #root-settings) and by
design (data-design, see designs.ts), so this stylesheet reads like the tree.
*/

:root {
  color-scheme: light dark;

  --brand:          #e2705f;  /* the crab: decoration only */
  --accent:         #b3412e;  /* text and buttons on light */
  --on-accent:      #ffffff;
  --text:           #2b2b2b;
  --muted:          #5f5f5f;
  --problem:        #a8211b;
  --background:     #ffffff;
  --surface:        #f8f3f1;
  --border:         #e6dcd8;
  --focus:          #1a5fb4;

  --font:           system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size:      1rem;
  --small:          0.875rem;
  --large:          1.25rem;
  --huge:           1.75rem;

  --space:          1rem;
  --gap:            0.5rem;
  --radius:         0.75rem;
  --shadow:         0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:       #f08a78;
    --on-accent:    #1c1a19;
    --text:         #f1ece9;
    --muted:        #b9b0ac;
    --problem:      #ff8a80;
    --background:   #1c1a19;
    --surface:      #272321;
    --border:       #3b3533;
    --focus:        #78aeed;
    --shadow:       none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted:        var(--text);
    --border:       var(--text);
    --shadow:       none;
  }
}

/* The page */

* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--font-size)/1.5 var(--font);
  color: var(--text);
  background: var(--background);
}

#app {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space);
}

footer {
  display: flex;
  gap: var(--space);
  justify-content: center;
  padding: calc(var(--space) * 2) var(--space);
  font-size: var(--small);
}

a { color: var(--accent); }
footer a { color: var(--muted); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 1em; line-height: 1.3; }
p { margin: 0; }

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

.node { margin: 0; }
.nodeChildren { display: flex; flex-direction: column; gap: var(--gap); }
.nodeChildren:empty { display: none; }
.muted, .summary, .nodeHelpText { color: var(--muted); font-size: var(--small); }
.nodeProblem > .nodeMain, .nodeProblem > .nodeMain p { color: var(--problem); }
.nodeLoading > .nodeMain { color: var(--muted); }
.starting { color: var(--muted); }

/* Controls */

button, input, select, textarea { font: inherit; color: inherit; }

button {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 999px;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}

button.small { padding: 0.1rem 0.7rem; font-size: var(--small); }

input[type=text], input[type=date], input[type=time], input[type=datetime-local], textarea, select {
  width: 100%;
  max-width: 32rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
}

input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--problem); }

form.field { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
form.field > input, form.field > textarea { flex: 1 1 14rem; }

button.toggle { color: var(--text); background: none; border-radius: 0; padding: 0; }

/* The layout: your pincers beside the pincer, settings at the end */

#root-children { gap: calc(var(--space) * 1.5); }

@media (min-width: 52rem) {
  #root-children:has(> #root-summaries) {
    display: grid;
    grid-template-columns: 17rem 1fr;
    align-items: start;
  }
  #root-children > #root-summaries { grid-column: 1; grid-row: 1 / span 2; }
  #root-children > #root-pincer { grid-column: 2; }
  #root-children > #root-settings { grid-column: 1 / -1; }
}

/* The brand */

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: var(--space);
  font-size: var(--large);
  font-weight: 800;
  letter-spacing: 0.35em;
  text-transform: lowercase;
}

/* Signed out: the shopfront */

[data-design=getStarted] > .nodeMain .hero {
  text-align: center;
  padding: calc(var(--space) * 2) var(--space);
}

.tagline { font-size: var(--huge); font-weight: 700; max-width: 30rem; margin: var(--space) auto 0; }

#root-getStarted > .nodeMain h2 { font-size: var(--large); margin-top: var(--space); }

#root-getStarted {
  max-width: 34rem;
  margin: 0 auto;
}

/* Cards: your pincers, suggestions */

.card {
  display: flex;
  gap: var(--gap);
  align-items: center;
  width: 100%;
  padding: 0.75rem;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card.current { border-color: var(--brand); }
.cardText { display: flex; flex-direction: column; min-width: 0; }

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: var(--small);
  font-weight: 700;
  color: #fff;
  background: hsl(var(--avatar-hue, 10) 40% 30%);
}

#root-summaries > .nodeMain h2 { margin-bottom: var(--gap); }

/* The pincer */

.title { font-size: var(--huge); }
[data-design=description] > .nodeMain p { font-size: var(--large); color: var(--muted); }
#root-pincer > .nodeChildren { gap: calc(var(--space) * 1.25); }

.banner {
  padding: var(--space);
  text-align: center;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
}

.banner .when { font-size: var(--large); font-weight: 700; }

[data-design=suggestions] > .nodeMain h3 { font-size: var(--large); }
[data-design=suggestions] > .nodeChildren { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.suggestion { flex-direction: column; align-items: stretch; height: 100%; }
.suggestion .time { font-size: var(--large); }
.suggestion button { align-self: start; margin-top: auto; }

table.grid { border-collapse: collapse; margin: var(--gap) 0 var(--space); font-size: var(--small); }
table.grid caption { text-align: left; color: var(--muted); }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 0.25rem; }
table.grid button { border-radius: 0.4rem; padding: 0.25rem 0.5rem; }

/* Chat */

[data-design=chats] > .nodeMain h3 { font-size: var(--large); }
.message { display: flex; gap: var(--gap); align-items: flex-start; }
.bubble {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.8rem;
  background: var(--surface);
  border-radius: var(--radius);
  border-top-left-radius: 0.2rem;
}
.who { font-size: var(--small); font-weight: 700; }
[data-design=earlier] > .nodeChildren { margin-top: var(--gap); }
[data-design=composer] > .nodeMain { display: none; }
[data-design=composer] > .nodeChildren, [data-design=newPincer] > .nodeChildren { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Fields: "Label: value", with a way to change it */

[data-design=field] { padding: var(--gap) 0; border-bottom: 1px solid var(--border); }
[data-design=field] > .nodeMain { font-weight: 700; }
[data-design=change] button.toggle { font-weight: normal; font-size: var(--small); color: var(--accent); }
.link { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; word-break: break-all; }

/* Asked for: the person's name, a code */

[data-design=ask] {
  padding: var(--space);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
}
[data-design=ask] > .nodeMain { font-weight: 700; }
[data-design=ask] > .nodeChildren { padding-left: 0; }

[data-design=boxAndButton] { flex: 1 1 14rem; }
[data-design=boxAndButton] input { max-width: none; }

/* People */

.person { display: flex; gap: var(--gap); align-items: center; }
[data-design=participant] > .nodeChildren { padding-left: 2.75rem; font-size: var(--small); }

/* Settings, at the edges */

[data-design=settings] {
  padding: var(--space);
  background: var(--surface);
  border-radius: var(--radius);
}
[data-design=settings] > .nodeChildren { margin-top: var(--space); gap: var(--space); }
.prominenceSecondary > .nodeMain { color: var(--muted); }
.prominenceSecondary > .nodeMain button.toggle { color: var(--muted); }

/* Generic nodes inside designed ones: a little structure until they get a design */

[data-design=generic] > .nodeChildren { padding-left: var(--space); }
[data-design=generic] > .nodeMain h3, [data-design=generic] > .nodeMain h4 { margin-top: var(--gap); }

@media (forced-colors: active) {
  .card, .bubble, [data-design=settings] { border: 1px solid CanvasText; }
  button { border: 1px solid ButtonText; }
}