/* The Office. Porcelain: a white ground, ink on it, and almost nothing else.

   Colour is rationed. Oxblood carries the one thing that needs her attention
   and the one button that cannot be taken back. Gilt touches one apostrophe
   and nothing else in the room. The hairline is the edge of a control, never
   a line drawn between two things: the room separates with space, so the page
   stays quiet when it is full.

   One spacing scale: 4 8 12 16 20 36 52 72.
   One type ladder:  11 12 14 15 16 17 30 34.
   Every tap target is 44px tall.

   The phone is the first layout and the whole file up to the last block is
   written for it. At 900px the tabs become a top bar, the page becomes one
   720px column, and the one page with a preview becomes two columns.
*/

@font-face {
  font-family: "Greed Extended";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/GreedExtended-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Greed Condensed";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/GreedCondensed-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Greed Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/GreedCondensed-SemiBold.otf") format("opentype");
}

:root {
  --ground: #ffffff;
  --ink: #161210;
  --ink-soft: #4a4744;
  --muted: #6b6560;
  --oxblood: #5a211c;
  /* deep gilt. The artboard's lighter leaf reads 3.98 to 1 on white, which is
     under the floor this room holds itself to, so the leaf is darkened rather
     than excused */
  --gilt: #8a6d33;
  --hairline: #e8e3da;
  --field: #fbfaf7;

  --s0: 4px;
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 20px;
  --s5: 36px;
  --s6: 52px;
  --s7: 72px;

  --t1: 11px;
  --t2: 12px;
  --t3: 14px;
  --t4: 15px;
  --t5: 16px;
  --t6: 17px;
  --t7: 30px;
  --t8: 34px;

  --tap: 44px;
  --radius: 8px;
  --column: 720px;
  --headings: "Greed Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Greed Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

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

a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* ---------- the shell ---------- */

.room { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s4) var(--s6); }

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding: var(--s4) 0 0;
}
/* the phone puts the wordmark and whose room it is on one line, end to end,
   and lets who is signed in fall to the line under it */
.topbar-who {
  display: flex;
  flex: 1 1 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  min-width: 0;
}

/* The wordmark is a logotype. The apostrophe is the only gilt in the room. */
.wordmark {
  font-family: "Greed Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--t2);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--gilt); }

.whose { font-size: var(--t2); letter-spacing: 0.04em; color: var(--muted); text-align: right; }

.whoami { display: flex; align-items: baseline; gap: var(--s0); margin-left: auto; font-size: var(--t2); color: var(--muted); }
.whoami form { margin: 0; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s2);
}
.tabs nav { display: flex; gap: var(--s4); }
.tabs a {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding-bottom: var(--s1);
  font-size: var(--t4);
  color: var(--muted);
}
.tabs a:hover { color: var(--ink); }
/* the mark under the tab you are on states where you are, it divides nothing */
.tabs a.here { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--oxblood); }

.sheet { display: block; }

/* ---------- page furniture ---------- */

.head { padding-top: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
h1 {
  margin: 0;
  font-family: var(--headings);
  font-size: var(--t7);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* Every section label in the room is this small oxblood line. It names what is
   under it and draws nothing. */
h2 {
  margin: 0;
  font-family: var(--headings);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}
p { margin: 0; }

.lead { font-size: var(--t5); color: var(--ink-soft); }
.note { font-size: var(--t3); color: var(--ink-soft); }
.meta { font-size: var(--t2); color: var(--muted); }

.eyebrow {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.block { padding-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }

.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
/* the one thing waiting on her wears the only other oxblood in the room */
.card.wants-you { border-color: var(--oxblood); }

/* ---------- controls ---------- */

label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t3); color: var(--ink-soft); }

input, textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2);
  font-family: var(--body);
  font-size: var(--t6);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* a tick sits on the same spacing scale as everything else, so the browser's
   own three pixels come off it */
input[type="checkbox"], input[type="radio"] { margin: 0; accent-color: var(--oxblood); }

/* Two weights of button and no third. The outline one is everything she can
   undo. The filled one is the step forward and the send. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s4);
  font-family: var(--body);
  font-size: var(--t5);
  font-weight: 600;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { color: var(--oxblood); border-color: var(--oxblood); }
.btn--go {
  min-height: 52px;
  font-size: var(--t6);
  color: var(--ground);
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.btn--go:hover { color: var(--ground); background: var(--ink); border-color: var(--ink); }
.btn--quiet { color: var(--ink-soft); border-color: var(--hairline); }
.btn--quiet:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* sign out is a state change, so it is a form. It reads as the link it is. */
.btn--plain {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-family: var(--body);
  font-size: var(--t2);
  color: var(--oxblood);
  background: none;
  border: 0;
  cursor: pointer;
}
.btn--plain:hover { color: var(--ink); }

/* a button that has to read as the quiet way out, next to the loud one */
.btn--link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-family: var(--body);
  font-size: var(--t4);
  color: var(--oxblood);
  background: none;
  border: 0;
  cursor: pointer;
}
.btn--link:hover { color: var(--ink); }

/* one thing to fill in, its name above it and its note under it */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-name { font-size: var(--t3); color: var(--ink-soft); }

/* the picker behind Change who. Shut when a choice is already made, open when
   there is nothing chosen yet, and a chip either way */
.pick > summary {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s2);
  font-size: var(--t3);
  color: var(--ink-soft);
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.pick > summary::-webkit-details-marker { display: none; }
.pick > summary:hover { color: var(--oxblood); border-color: var(--oxblood); }
.pick[open] > summary { margin-bottom: var(--s2); }

.row-link { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); font-size: var(--t4); }

.trouble { font-size: var(--t3); color: var(--oxblood); }

.back { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); font-size: var(--t3); }

.buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.buttons form { margin: 0; }

/* ---------- lists ---------- */
/* A row is a title, a line about it, and the way in. Nothing here draws a line
   between two rows: the gap is the separator, which is the whole rule. */

.rows { display: flex; flex-direction: column; gap: var(--s2); }
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s1) 0;
}
.row-words { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.row-title { font-size: var(--t6); font-weight: 600; overflow-wrap: anywhere; }
.row .row-link { flex: 0 0 auto; }

/* a whole row that is a link still reads as a row: the title stays ink and
   the edge is what answers when you touch it */
.card--row { gap: var(--s1); color: var(--ink); }
.card > .chip { align-self: flex-start; }
.card--row .row-title, .card--person .row-title { font-size: var(--t5); }
.card--row:hover { border-color: var(--oxblood); }

.card--person { gap: var(--s1); padding: var(--s1) var(--s3) var(--s2); }
.person-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.person-top .row-title { overflow-wrap: anywhere; }
/* somebody who said no stays visible and stays readable: 5.7 to 1 on white */
.card--person.is-off .row-title,
.card--person.is-off .note { color: var(--muted); }
.card--person.is-off .meta { color: var(--oxblood); }

.row-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); }
.row-form label { flex: 1 1 200px; }
.row-form input, .row-form select { min-width: 0; }
.row-form .btn, .row-form button { flex: 0 0 auto; }

/* ---------- tags ---------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s2);
  font-size: var(--t3);
  color: var(--ink-soft);
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.chip b { font-weight: 600; color: var(--ink); }
a.chip:hover { color: var(--ink); border-color: var(--oxblood); }
a.chip.chip--here { color: var(--ink); border-color: var(--oxblood); font-weight: 600; }
/* the chip that states a choice already made, the way the artboard fills it */
.chip--said { color: var(--ground); background: var(--ink); border-color: var(--ink); }

/* ---------- ticks and taps ---------- */

.tick { flex-direction: row; align-items: center; gap: var(--s2); min-width: var(--tap); min-height: var(--tap); color: var(--ink); }
.tick input { width: 22px; height: 22px; min-height: 22px; flex: 0 0 auto; padding: 0; }

.taps { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; border: 0; }
.taps legend { padding: 0 0 var(--s1); font-size: var(--t3); color: var(--ink-soft); }
.tap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s1);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s2);
  font-size: var(--t3);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}
.tap input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 auto; padding: 0; }
.tap:has(input:checked) { border-color: var(--oxblood); font-weight: 600; }

input[type="file"] { padding: var(--s1); font-size: var(--t3); }

textarea { min-height: 160px; line-height: 1.5; resize: vertical; }

/* The words exactly as they will be read, so they wrap like a message and not
   like code. The box is a field, not a divider: it is the edge of the thing. */
.draft {
  margin: 0;
  padding: var(--s2);
  font-family: var(--body);
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--ink);
  background: var(--field);
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* one letter, in a box of its own, with the subject line above it */
.letter { gap: var(--s1); }
.letter .subject { font-size: var(--t2); color: var(--muted); overflow-wrap: anywhere; }
.letter .draft { background: none; padding: 0; font-size: var(--t4); }

/* ---------- the door ---------- */

.door { max-width: 360px; margin: 0 auto; padding: var(--s7) var(--s4) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.door form { display: flex; flex-direction: column; gap: var(--s3); margin: 0; }
.door input { font-size: var(--t7); letter-spacing: 0.08em; text-align: center; }

/* the doors */
.door input { font-size: var(--t6); letter-spacing: 0; text-align: left; }
/* what a password needs, under its field. Grey until she has typed it, ink once she has */
.pw-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t2); color: var(--muted); }
.pw-checks li { display: inline-flex; align-items: center; gap: var(--s1); }
.pw-checks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; }
.pw-checks li.met { color: var(--ink); }
.pw-checks li.met::before { background: var(--ink); }
/* a door stands in the middle of a wide screen, not on the page column's left edge */
@media (min-width: 900px) {
  .sheet:has(> .door) { max-width: none; }
}

/* ---------- the same room at a desk ---------- */

@media (min-width: 900px) {
  /* the room narrows to a page: the bar, the tabs and the column all stand on
     the same left edge, and the column is the width of a page rather than the
     width of a screen */
  .room { max-width: 1120px; padding: 0 var(--s6) var(--s7); }
  .sheet { max-width: var(--column); }
  .topbar-who { flex: 0 1 auto; justify-content: flex-start; }
  .head { padding-top: var(--s6); }
  h1 { font-size: var(--t8); }
  .lead { font-size: var(--t6); }
  .note { font-size: var(--t4); }

  /* the one page that is two columns: the words on the left, and how they will
     be read on the right, where the artboard puts it */
  .sheet--split {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
  }
  .sheet--split .aside { display: block; padding-top: var(--s7); }
}

/* the preview column belongs to the desk. The phone gets it on the next page,
   which is where the phone artboard puts it */
.aside { display: none; }