/* Canteen pipeline tracker.
   Design language borrowed from ~/site-arc-canteen-dev: system font, thin grey
   rules, monospace accents, one blue, light and dark from the same sheet. */

:root {
  color-scheme: light dark;

  --bg: #fafafa;
  --fg: #1a1a1a;
  --muted: #666;
  --faint: #bbb;
  --rule: #e3e3e3;
  --panel: #fff;
  --sunken: #efefef;
  --link: #0a58ca;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ok: #1a7f4b;
  --warn: #9a6700;
  --off: #8a8a8a;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  padding: 0 0 4rem;
}

a { color: var(--link); }
.mono { font-family: var(--mono); font-size: .9em; }

/* Content spans the page rather than sitting in a narrow left-hand measure,
   with one shared gutter so the header, the board columns and the company
   page all share an edge. */
:root { --gutter: 1.5rem; }

/* --------------------------------------------------------------- head */

.head { margin: 2.5rem auto 0; padding: 0 var(--gutter); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.tag { color: var(--muted); margin: 0 0 1.25rem; font-size: .95rem; }

.toc {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 2;
  margin: 0;
  white-space: nowrap;
  overflow-x: auto;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc b { font-weight: 600; }
.toc .sep { color: var(--faint); margin: 0 .45rem; }
.toc .n { color: var(--muted); }

.loading { color: var(--muted); padding: 2rem 1.25rem; }

/* -------------------------------------------------------------- board */

main { padding: 0; }

.board {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 2rem var(--gutter) 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.col {
  flex: 1 0 250px;
  min-width: 250px;
  max-width: 340px;
  border-radius: 10px;
  padding: .1rem .35rem .35rem;
  transition: background .12s;
  /* A column is a drop target over its whole height, not just the stack of
     cards in it, so dropping into a short or empty column is not fiddly. */
  min-height: 65vh;
}
.col.over { background: rgba(10, 88, 202, .07); outline: 1px dashed var(--link); }

.col h2 {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.col h2 .n { color: var(--faint); font-weight: 400; }

.card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .7rem .85rem .75rem;
  margin: 0 0 .55rem;
  cursor: grab;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  /* Cards are links so they can be opened in a tab, but they must not read
     as body-text links. */
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--link); }
.card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.card.dragging { opacity: .4; cursor: grabbing; }
.card[aria-current="true"] { border-color: var(--link); box-shadow: inset 3px 0 0 var(--link); }

.cardhead { display: flex; align-items: baseline; gap: .35rem; }
.card .name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--fg);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.card:hover .name { text-decoration: underline; }
.card .site {
  font-size: .78rem;
  color: var(--faint);
  text-decoration: none;
  flex: 0 0 auto;
}
.card .site:hover { color: var(--link); }
.card .one { color: var(--muted); font-size: .84rem; line-height: 1.45; display: block; margin-top: .2rem; }

.col .empty {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .75rem;
  padding: .8rem .85rem;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  margin: 0;
}

pre.art {
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.2;
  color: var(--faint);
  margin: 0 0 1rem;
  overflow-x: auto;
}

/* ------------------------------------------------- company page (/c/…) */

/* One company per URL, not a slide-over. `.page` carries what `.detail` used
   to, so everything inside it keeps its styles. */
.page {
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

.crumb {
  font-family: var(--mono);
  font-size: .8rem;
  margin: 0;
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.page h2 { font-size: 1.35rem; margin: 0; }

/* The company's own links belong next to its name, not in a section at the
   foot of the record. */
.titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0 0 .1rem;
}
.titlelinks a {
  font-family: var(--mono);
  font-size: .78rem;
  white-space: nowrap;
  margin-right: .75rem;
}
.page .legal { color: var(--muted); font-size: .85rem; font-family: var(--mono); margin: 0 0 .75rem; }
.page .one { font-size: 1rem; color: var(--fg); margin: 0 0 1.25rem; }

.stagepick { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.stagepick label { font-family: var(--mono); font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stagepick select {
  font: inherit;
  font-size: .9rem;
  padding: .25rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.stagepick .saved { font-family: var(--mono); font-size: .72rem; color: var(--ok); }

.page h3 {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule);
}

.page p { margin: .6rem 0; }
.page .prose { white-space: pre-wrap; }
.page .none { color: var(--faint); font-style: italic; }

.founder { margin: 1rem 0 1.25rem; padding-left: .85rem; border-left: 2px solid var(--rule); }

/* Name, role and any remaining links on one line. */
.founder .fhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.founder .fname { font-weight: 600; }
/* A linked name has to look linked — underlined, with an arrow, and it goes
   full link colour on hover. A name with nothing to point at stays plain. */
a.fname {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .18em;
}
a.fname:hover { text-decoration-color: currentColor; }
a.fname .fmark { font-size: .7em; vertical-align: .15em; }
.founder .frole { color: var(--muted); font-size: .88rem; }
.founder .fbio { white-space: pre-wrap; font-size: .93rem; margin: .35rem 0 .4rem; }
.founder .flinks a { font-family: var(--mono); font-size: .78rem; margin-left: .5rem; white-space: nowrap; }


/* Product checklist, drawn as a dendrogram.
   Three branches side by side in a grid — Arc, Circle, out of scope — each
   with its products hanging off a spine. The spine and the ticks are borders
   rather than box-drawing characters, so they stretch with a leaf whose note
   runs to several lines. */
.ptree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem 2.5rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.proot {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 .1rem;
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.proot .n { color: var(--faint); font-weight: 400; }
.oosgroup .proot { color: var(--muted); }

.pleaves {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.15rem;
}

.pleaf {
  position: relative;
  padding: .3rem 0 .3rem .85rem;
}

/* the spine */
.pleaf::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 1px solid var(--rule);
}
/* the spine stops at the last tick rather than running past it */
.pleaf:last-child::before { bottom: auto; height: 1.05em; }

/* the tick out to the leaf */
.pleaf::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: .7rem;
  border-top: 1px solid var(--rule);
}

.pline { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }

.pleaf .pname { font-size: .93rem; }
.pleaf.off .pname { color: var(--faint); }
.pleaf.oos .pname { color: var(--muted); }

.pnotewrap { padding-left: 1.9rem; }
.pnote { font-size: .87rem; color: var(--muted); margin: .15rem 0 0; white-space: pre-wrap; }
.pnote.none { font-style: italic; color: var(--faint); }
.pmeta { font-family: var(--mono); font-size: .7rem; color: var(--faint); margin: .2rem 0 0; }

/* The checkbox is a real control — toggling a product on or off for a team. */
.ptree .box {
  font: inherit;
  font-family: var(--mono);
  color: var(--faint);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: pre;
}
.pleaf.on .box { color: var(--ok); }
.ptree .box:hover { color: var(--link); }

.ptree .ilevel {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .05rem .3rem;
  vertical-align: .1em;
}

.pill {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .05rem .4rem;
  margin-left: .4rem;
  vertical-align: .1em;
  white-space: nowrap;
}
.pill.confirmed { color: var(--ok); }
.pill.high { color: var(--link); }
.pill.exploring { color: var(--warn); }
.pill.mentioned { color: var(--off); }
.pill.out-of-scope { color: var(--off); }


/* --------------------------------------------------------------- login */

.loginpage { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1.25rem; }
.loginbox { max-width: 30rem; }
.loginbox h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.loginbox .art { margin: 0 0 1.25rem; }

.gbtn {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  text-decoration: none;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .55rem 1.1rem;
  margin: .5rem 0;
}
.gbtn:hover { border-color: var(--link); color: var(--link); }

.msg {
  font-size: .9rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted);
  border-radius: 0 6px 6px 0;
  padding: .6rem .8rem;
  background: var(--sunken);
}
.msg.bad { border-left-color: #c0392b; }

/* -------------------------------------------------------------- whoami */

.whoami {
  float: right;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
  padding-top: .3rem;
}
.whoami .me { margin-right: .75rem; }

/* ------------------------------------------------------- card additions */

/* Where a team builds today, and where it is heading. */
.chain {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-top: .45rem;
  white-space: nowrap;
}
.chainrow { margin: .1rem 0 .6rem; }
.chainrow .chain { margin-top: 0; font-size: .72rem; }

.card .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  margin-top: .45rem;
}

/* The Rejected column sits on the board but should not compete for the eye. */
.col.muted h2 { color: var(--faint); }
.col.muted .card { opacity: .72; }
.col.muted .card:hover { opacity: 1; }


/* -------------------------------------------------------------- thread */

.thread { margin: .75rem 0 1.25rem; }

.ev { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.ev:last-child { border-bottom: none; }

.ev.move {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
}
.ev.move .evwho { color: var(--fg); }
.ev.move .evstage { color: var(--link); }
.ev.move .evwhen { display: block; color: var(--faint); font-size: .72rem; }

.ev.comment .evhead {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .8rem;
}
.ev.comment .evwho { font-weight: 600; }
.ev.comment .evmail { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.ev.comment .evwhen { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-left: auto; }
.ev.comment .evbody { white-space: pre-wrap; font-size: .93rem; margin-top: .25rem; }

.togglehide {
  font: inherit;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  margin-left: .5rem;
  cursor: pointer;
  text-decoration: underline;
}
.togglehide:hover { color: #c0392b; }
.togglehide[data-visible="1"]:hover { color: var(--ok); }

/* Hidden entries are only ever sent to admins. Greyed and struck so it is
   obvious they are out of the thread for everyone else. */
.ev.hidden { opacity: .5; }
.ev.hidden .evbody, .ev.hidden .evnote { text-decoration: line-through; }
.hiddenby {
  font-family: var(--mono);
  font-size: .68rem;
  color: #c0392b;
  margin-left: .5rem;
}

.composer textarea {
  width: 100%;
  font: inherit;
  font-size: .93rem;
  padding: .6rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}
.composer textarea:focus { outline: none; border-color: var(--link); }

.composer-row { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.composer-msg { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

.post {
  font: inherit;
  font-size: .88rem;
  margin-left: auto;
  padding: .35rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
}
.post:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.post:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- dark */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e6e6e6;
    --muted: #999;
    --faint: #555;
    --rule: #2a2a2a;
    --panel: #191919;
    --sunken: #1f1f1f;
    --link: #6ea8fe;

    --ok: #4ec98a;
    --warn: #d9a441;
    --off: #8a8a8a;
  }
  .col.over { background: rgba(110, 168, 254, .09); }
}