thursday-agent 0.22.0 → 0.23.0

package/skills/daily-brief/page/brief.css

@@ -1,404 +1,562 @@
-/* The brief's whole look: a morning paper on a phone first, two columns on a wide screen,
-   light and dark, and print. Nothing from the network: system fonts, pictures inlined. */
+/* The brief's own look, under the shell's head and type (artifact shell.css, put on by
+   page.mjs): one column to read in a few minutes. The day and how many stories, the brief to
+   hear as the first thing to press, today in a line and the numbers they watch as tiles, the
+   lead as the one card, the rest as rows by topic — each saying what changed since an earlier
+   brief told it and why it is this reader's — the stories they follow as a line through the
+   days, and the rest as headlines. Light, dark and print. The one colour is the maker's
+   (--sh-maker). Everything is named `b-` so the shell's names and the brief's never meet. */
 :root {
-  color-scheme: light dark;
-  --paper: #f7f4ee;
-  --card: #fffdf9;
-  --ink: #1b1a17;
-  --soft: #57534b;
-  --faint: #8b857a;
-  --rule: #e3ddd1;
-  --accent: #c2410c;
-  --up: #15803d;
-  --down: #b91c1c;
-  --tile: #ece6da;
-  --serif:
-    "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, "Noto Serif",
-    serif;
-  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Words that step back, off the app's grey ladder (app/globals.css) */
+  --b-2: #5d5d5d;
+  --b-3: #767676;
+  --b-ground: color-mix(in srgb, var(--sh-ink) 4.5%, var(--sh-paper));
+  --b-soft: color-mix(in srgb, var(--sh-maker) 12%, var(--sh-paper));
 }
 @media (prefers-color-scheme: dark) {
-  :root {
-    --paper: #131210;
-    --card: #1c1b18;
-    --ink: #f1ede4;
-    --soft: #bdb7ab;
-    --faint: #8f897d;
-    --rule: #2e2c27;
-    --accent: #fb923c;
-    --up: #4ade80;
-    --down: #f87171;
-    --tile: #26241f;
+  :root:not([data-theme="light"]) {
+    --b-2: #afafaf;
+    --b-3: #8f8f8f;
   }
 }
-* {
-  box-sizing: border-box;
+:root[data-theme="dark"] {
+  --b-2: #afafaf;
+  --b-3: #8f8f8f;
 }
-html {
-  -webkit-text-size-adjust: 100%;
-  background: var(--paper);
-}
-body {
+
+.b-page {
+  display: grid;
+  gap: 36px;
+  max-width: 42rem;
   margin: 0 auto;
-  max-width: 64rem;
-  padding: 1.75rem 1rem 4rem;
-  background: var(--paper);
-  color: var(--ink);
-  font: 16px / 1.55 var(--sans);
-  text-wrap: pretty;
-}
-a {
+  padding: 32px 16px 8px;
+  font-size: 16px;
+  line-height: 1.6;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+.b-page :is(h1, h2, h3, p) {
+  margin: 0;
+}
+.b-page a {
   color: inherit;
+  text-decoration: none;
+}
+.b-page a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--sh-maker);
+  text-underline-offset: 3px;
 }
-img {
+.b-page img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
-/* Scripts that set headlines better in their own sans than in a Latin serif */
-:lang(ko),
-:lang(ja),
-:lang(zh) {
-  --serif: var(--sans);
+.b-page svg {
+  flex: none;
 }
-
-/* The masthead: the day, the name, one line on what today is about */
-.mast {
-  padding-bottom: 1.1rem;
-  border-bottom: 2px solid var(--ink);
+.b-mono {
+  font-family: var(--sh-mono);
 }
-.mast .day {
-  margin: 0;
-  font-size: 0.85rem;
+.b-page > section > h2,
+.b-topic > h2 {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: var(--b-3);
+  font-size: 13px;
   font-weight: 600;
-  color: var(--accent);
-}
-.mast h1 {
-  margin: 0.15rem 0 0.5rem;
-  font: 700 2.4rem / 1.05 var(--serif);
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
 }
-.mast .lede {
-  margin: 0;
-  max-width: 40rem;
-  font-size: 1.08rem;
-  color: var(--soft);
+.b-topic > h2 span {
+  font: 400 12px / 1 var(--sh-mono);
 }
 
-/* The glance: weather and markets in one row that scrolls sideways on a phone */
-.glance {
+/* The day, how many stories, the day in a sentence, and the brief to hear */
+.b-mast {
+  display: grid;
+  gap: 14px;
+}
+.b-day {
+  color: var(--b-3);
+  font-size: 13.5px;
+}
+.b-lede {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.025em;
+  text-wrap: balance;
+}
+.b-daynote {
+  font-size: 15px;
+  font-weight: 600;
+}
+.b-listen {
+  display: grid;
+  gap: 8px;
+}
+.b-hear {
   display: flex;
-  gap: 0.6rem;
-  margin: 1rem -1rem 0;
-  padding: 0 1rem 0.2rem;
-  overflow-x: auto;
-  scrollbar-width: none;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 14px 10px 10px;
+  border: 0;
+  border-radius: 16px;
+  background: var(--sh-ink);
+  color: var(--sh-paper);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
-.glance::-webkit-scrollbar {
-  display: none;
+.b-hear:focus-visible {
+  outline: 2px solid var(--sh-maker);
+  outline-offset: 2px;
 }
-.chip {
+.b-hear .b-dot {
+  display: grid;
+  place-items: center;
   flex: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 7.2rem;
-  padding: 0.6rem 0.8rem;
-  border: 1px solid var(--rule);
-  border-radius: 0.8rem;
-  background: var(--card);
-  font-variant-numeric: tabular-nums;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+}
+.b-hear .b-dot svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+.b-hear .b-pause,
+.b-hear[aria-pressed="true"] .b-play {
+  display: none;
 }
-.chip .k {
-  font-size: 0.75rem;
-  color: var(--faint);
-  white-space: nowrap;
+.b-hear[aria-pressed="true"] .b-pause {
+  display: block;
 }
-.chip .v {
-  font-size: 1.02rem;
-  font-weight: 650;
-  white-space: nowrap;
+.b-hear-words {
+  display: grid;
+  line-height: 1.35;
+}
+.b-hear-words b {
+  font-size: 15px;
 }
-.chip .d {
-  font-size: 0.8rem;
+.b-hear .b-time {
+  font: 400 12.5px / 1.4 var(--sh-mono);
+  opacity: 0.7;
+}
+.b-bars {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 22px;
+  margin-left: auto;
+}
+.b-bars i {
+  width: 3px;
+  border-radius: 2px;
+  background: currentColor;
+  opacity: 0.55;
+}
+.b-said {
+  border-radius: 14px;
+  background: var(--b-ground);
+}
+.b-said summary {
+  padding: 12px 14px;
+  color: var(--sh-ink);
+  font-size: 14px;
   font-weight: 600;
-  white-space: nowrap;
+  cursor: pointer;
 }
-.chip .d.up {
-  color: var(--up);
+.b-said p {
+  padding: 0 14px 14px;
+  color: var(--b-2);
+  font-size: 14.5px;
 }
-.chip .d.down {
-  color: var(--down);
+
+/* Today: the weather as what to do about it, and the numbers they watch, a tile each */
+.b-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
+  gap: 8px;
 }
-.chip.sky {
-  flex-direction: row;
-  align-items: center;
-  gap: 0.65rem;
+.b-tile {
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  min-width: 0;
+  padding: 12px;
+  border-radius: 14px;
+  background: var(--b-ground);
+}
+.b-tile b {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
 }
-.chip.sky svg {
-  flex: none;
-  width: 2rem;
-  height: 2rem;
-  color: var(--accent);
+.b-tile .b-mono {
+  color: var(--b-3);
+  font-size: 12px;
 }
-.chip.sky .v {
-  font-size: 1.35rem;
-  line-height: 1.1;
+.b-tile .b-up {
+  color: var(--sh-good);
 }
-
-/* Listen, and the words it reads */
-.listen {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.6rem 1rem;
-  margin-top: 1rem;
+.b-tile .b-down {
+  color: var(--sh-bad);
 }
-.listen audio {
-  width: min(100%, 22rem);
-  height: 2.4rem;
+.b-sky {
+  grid-column: 1 / -1;
+  grid-template-columns: 22px minmax(0, 1fr);
+  column-gap: 10px;
 }
-.listen details {
-  flex: 1 1 16rem;
+.b-sky svg {
+  grid-row: 1 / 3;
+  width: 22px;
+  height: 22px;
+  margin-top: 2px;
 }
-.listen summary {
-  cursor: pointer;
-  font-size: 0.9rem;
+.b-sky p {
+  grid-column: 2;
+  margin-top: 4px;
+  font-size: 14px;
   font-weight: 600;
-  color: var(--soft);
-}
-.listen details p {
-  margin: 0.6rem 0 0;
-  padding: 0.8rem 1rem;
-  border-radius: 0.7rem;
-  background: var(--card);
-  border: 1px solid var(--rule);
-  white-space: pre-line;
 }
 
-/* One story: picture, topic, headline, two lines, why it matters, where it came from */
-.story {
-  position: relative;
-}
-.pic {
+/* A story's parts: its picture, its chips, what it says, what changed, why it is theirs */
+.b-pic {
   position: relative;
   overflow: hidden;
-  border-radius: 0.75rem;
-  background: var(--tile);
+  background: var(--sh-sunk);
 }
-.pic .credit {
-  position: absolute;
-  right: 0.45rem;
-  bottom: 0.45rem;
-  max-width: 80%;
-  padding: 0.1rem 0.45rem;
-  border-radius: 0.35rem;
-  background: rgb(0 0 0 / 0.55);
-  color: #fff;
-  font-size: 0.66rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.pic .none {
+.b-none {
   display: grid;
   place-items: center;
   height: 100%;
-  padding: 1rem;
-  font: 700 1.2rem / 1.2 var(--serif);
-  color: var(--faint);
+  padding: 8px;
+  color: var(--b-3);
+  font: 400 11px / 1.3 var(--sh-mono);
   text-align: center;
 }
-.story h2,
-.story h3 {
-  margin: 0;
-  font-family: var(--serif);
-  letter-spacing: -0.01em;
-  text-wrap: balance;
-}
-.story h2 a,
-.story h3 a {
-  text-decoration: none;
+.b-credit {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 50%);
+  color: #fff;
+  font: 400 10px / 1.4 var(--sh-mono);
 }
-.story h2 a:hover,
-.story h3 a:hover {
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
+.b-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.story .sum {
-  margin: 0.45rem 0 0;
-  color: var(--soft);
+.b-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: var(--b-ground);
+  color: var(--b-2);
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+.b-chip.b-on {
+  background: var(--b-soft);
+  color: var(--sh-maker-text);
+  font-weight: 650;
 }
-.story .why {
-  margin: 0.55rem 0 0;
-  font-size: 0.92rem;
+.b-sum {
+  color: var(--b-2);
+  font-size: 15px;
+  line-height: 1.6;
 }
-.story .why b {
-  color: var(--accent);
+.b-since,
+.b-yours {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.b-since svg,
+.b-yours svg {
+  width: 17px;
+  height: 17px;
+  margin-top: 2px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.b-since {
+  color: var(--sh-ink);
+}
+.b-since svg {
+  color: var(--b-3);
+}
+.b-yours {
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--b-soft);
+}
+.b-yours svg {
+  color: var(--sh-maker-text);
+}
+.b-yours b,
+.b-why b {
   font-weight: 650;
 }
-.story .src {
-  margin: 0.55rem 0 0;
-  font-size: 0.78rem;
-  color: var(--faint);
+.b-why {
+  font-size: 14px;
+  line-height: 1.55;
 }
-.story .src a {
-  font-weight: 600;
-  color: var(--soft);
+.b-src {
+  color: var(--b-3);
+  font: 400 12px / 1.4 var(--sh-mono);
 }
 
-/* The lead: the picture wide, the headline large */
-.lead {
-  margin-top: 1.5rem;
-  padding-bottom: 1.6rem;
-  border-bottom: 1px solid var(--rule);
+/* The lead: the one card on the page, its picture over its words */
+.b-card.b-lead {
+  overflow: hidden;
+  border: 1px solid var(--sh-line);
+  border-radius: 18px;
 }
-.lead .pic {
+.b-lead .b-pic {
   aspect-ratio: 16 / 9;
-  margin: 0 -1rem 1rem;
-  border-radius: 0;
 }
-.lead .kicker {
-  margin: 0 0 0.3rem;
-  font-size: 0.8rem;
-  font-weight: 650;
-  color: var(--accent);
+.b-lead .b-body {
+  display: grid;
+  gap: 12px;
+  padding: 18px 20px 20px;
 }
-.lead h2 {
-  font-size: 1.75rem;
-  line-height: 1.15;
+.b-lead h2 {
+  font-size: 24px;
+  font-weight: 750;
+  line-height: 1.25;
+  letter-spacing: -0.028em;
+  text-wrap: balance;
 }
-.lead .sum {
-  font-size: 1.05rem;
+.b-lead .b-sum {
+  font-size: 15.5px;
 }
 
-/* A topic: its name on a rule, its stories under it */
-.topic {
-  margin-top: 1.9rem;
+/* A topic: its stories as rows with a hairline between and a small picture */
+.b-topics {
+  display: grid;
+  gap: 36px;
 }
-.topic > h2 {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0 0 0.3rem;
-  font: 700 1.3rem / 1.2 var(--serif);
+.b-topic {
+  display: grid;
+  break-inside: avoid;
 }
-.topic > h2::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--rule);
+.b-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 96px;
+  gap: 18px;
+  padding: 18px 0;
+  border-top: 1px solid var(--sh-line);
 }
-.list {
+.b-row > div {
   display: grid;
+  align-content: start;
+  gap: 8px;
+}
+.b-row h3 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+}
+.b-row .b-pic {
+  width: 96px;
+  height: 96px;
+  border-radius: 12px;
+}
+.b-row .b-pic img {
+  position: absolute;
+  inset: 0;
 }
-.item {
+.b-row .b-credit {
+  display: none;
+}
+
+/* Following: where a story was in earlier briefs, and where it is today */
+.b-follow {
+  padding: 16px;
+  border: 1px solid var(--sh-line);
+  border-radius: 16px;
+}
+.b-page > .b-follow > h2 {
+  align-items: center;
+  margin-bottom: 14px;
+  color: var(--sh-ink);
+  font-size: 16px;
+  font-weight: 700;
+}
+.b-follow ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.b-follow li {
   display: grid;
-  grid-template-columns: 1fr 5.6rem;
-  grid-template-areas: "head pic" "body body";
-  column-gap: 0.9rem;
-  padding: 1rem 0;
-  border-bottom: 1px solid var(--rule);
+  grid-template-columns: 5.5rem 20px minmax(0, 1fr);
+  column-gap: 10px;
+  font-size: 14px;
+  line-height: 1.5;
 }
-.item:last-child {
-  border-bottom: 0;
+.b-follow time {
+  color: var(--b-3);
+  font: 400 12.5px / 21px var(--sh-mono);
 }
-.item .pic {
-  grid-area: pic;
-  aspect-ratio: 1;
-  border-radius: 0.6rem;
+/* The rail: a dot at each moment, a line from it down to the next one's dot */
+.b-rail {
+  position: relative;
+}
+.b-rail::before {
+  content: "";
+  position: absolute;
+  top: 6px;
+  left: 5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sh-dot);
+}
+.b-rail::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  bottom: -6px;
+  left: 9.5px;
+  width: 1px;
+  background: color-mix(in srgb, var(--sh-ink) 22%, var(--sh-paper));
 }
-.item .pic .credit {
+.b-follow li:last-child .b-rail::after {
   display: none;
 }
-.item .head {
-  grid-area: head;
-  align-self: center;
+.b-follow li > span {
+  padding-bottom: 14px;
 }
-.item .body {
-  grid-area: body;
+.b-follow li:last-child > span {
+  padding-bottom: 0;
 }
-.item h3 {
-  font-size: 1.13rem;
-  line-height: 1.25;
+.b-follow li.b-now .b-rail::before {
+  background: var(--sh-maker);
+  box-shadow: 0 0 0 3px var(--b-soft);
+}
+.b-follow li.b-now span {
+  font-weight: 650;
 }
 
-.foot {
-  margin-top: 2.5rem;
-  padding-top: 1rem;
-  border-top: 2px solid var(--ink);
-  font-size: 0.8rem;
-  color: var(--faint);
+/* The rest: a headline a line */
+.b-more ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.foot p {
-  margin: 0 0 0.4rem;
+.b-more li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: baseline;
+  padding: 12px 0;
+  border-top: 1px solid var(--sh-line);
+  font-size: 15px;
+  line-height: 1.45;
+}
+.b-more li span {
+  color: var(--b-3);
+  font: 400 11.5px / 1.4 var(--sh-mono);
+  white-space: nowrap;
 }
 
-@media (min-width: 46rem) {
-  body {
-    padding: 2.75rem 2rem 5rem;
-  }
-  .mast h1 {
-    font-size: 3.4rem;
-  }
-  .glance {
-    margin: 1.2rem 0 0;
-    padding: 0;
-    flex-wrap: wrap;
+/* The end: what it was made from, and who made it (shell .sh-sign) */
+.b-made {
+  color: var(--b-3);
+  font-size: 12px;
+  text-align: center;
+}
+
+@media (min-width: 48rem) {
+  .b-page {
+    gap: 40px;
+    padding-top: 48px;
   }
-  .lead {
-    display: grid;
-    grid-template-columns: 1.35fr 1fr;
-    gap: 1.75rem;
-    align-items: center;
+  .b-lede {
+    font-size: 28px;
+    line-height: 1.28;
   }
-  .lead .pic {
-    margin: 0;
-    border-radius: 0.9rem;
-    aspect-ratio: 4 / 3;
+  .b-lead .b-body {
+    padding: 22px 26px 26px;
   }
-  .lead h2 {
-    font-size: 2.2rem;
+  .b-lead h2 {
+    font-size: 28px;
   }
-  .list {
-    grid-template-columns: repeat(2, 1fr);
-    column-gap: 2rem;
+  .b-row {
+    grid-template-columns: minmax(0, 1fr) 128px;
+    gap: 22px;
+    padding: 22px 0;
   }
-  .item {
-    grid-template-columns: 1fr;
-    grid-template-areas: "pic" "head" "body";
-    row-gap: 0.7rem;
-    border-bottom: 0;
+  .b-row .b-pic {
+    width: 128px;
+    height: 128px;
   }
-  .item .head {
-    align-self: start;
+}
+@media (max-width: 30rem) {
+  .b-row {
+    grid-template-columns: minmax(0, 1fr) 72px;
+    gap: 14px;
+    padding: 16px 0;
   }
-  .item .pic {
-    aspect-ratio: 3 / 2;
-    border-radius: 0.75rem;
+  .b-row .b-pic {
+    width: 72px;
+    height: 72px;
   }
-  .item .pic .credit {
-    display: block;
+  .b-more li {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
   }
-  .item h3 {
-    font-size: 1.3rem;
+  .b-follow li {
+    grid-template-columns: 4rem 20px minmax(0, 1fr);
+    column-gap: 6px;
   }
 }
+
+/* Paper is the day's, as the shell prints it: the selectors match the dark ones above, so
+   being later is what wins */
 @media print {
-  body {
+  :root,
+  :root:not([data-theme="light"]),
+  :root[data-theme="dark"] {
+    --b-2: #5d5d5d;
+    --b-3: #767676;
+  }
+  .b-page {
     max-width: none;
     padding: 0;
   }
-  .glance {
-    flex-wrap: wrap;
-  }
-  .listen audio {
+  .b-listen {
     display: none;
   }
-  .story {
+  .b-lead,
+  .b-row,
+  .b-follow,
+  .b-tile {
     break-inside: avoid;
   }
+  .b-tile,
+  .b-yours,
+  .b-chip {
+    print-color-adjust: exact;
+  }
 }