/*
  Tasks. Stationery on a desk: a project is an index card, a ticket is a claim check whose stub carries the Claude Code
  session you come back with, and what an agent is working on right now is marked with a highlighter.

  System fonts only (the page's security policy allows no other source). Colour is kept for meaning: cobalt ink is for
  what you can press, the pink marker is for "in progress", everything else is paper and ink.
*/

:root {
  color-scheme: light dark;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --desk: #e9eaf0;
  --card: #ffffff;
  --ink: #161d42;
  --ink-2: #565e83;
  --ink-3: #8a91ae;
  --rule: #e0e4ef;
  --edge: #c4cadd;
  --perf: #8f98bd;
  --cobalt: #2b44d4;
  --cobalt-deep: #1f33b0;
  --on-cobalt: #ffffff;
  --stub: #ecf0ff;
  --marker: #ffb3d6;
  --danger: #b3261e;
  --on-danger: #ffffff;

  --gutter: clamp(16px, 4vw, 32px);
  --radius: 7px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #0f1329;
    --card: #1a2041;
    --ink: #e8ebfa;
    --ink-2: #a4abcb;
    --ink-3: #6f7699;
    --rule: #272e55;
    --edge: #38406d;
    --perf: #5d6696;
    --cobalt: #93a5ff;
    --cobalt-deep: #b7c3ff;
    --on-cobalt: #0d1230;
    --stub: #202851;
    --marker: rgb(255 122 190 / 0.42);
    --danger: #ff8f86;
    --on-danger: #2b0b08;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
pre,
form {
  margin: 0;
}

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

img {
  display: block;
}

a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

button {
  cursor: pointer;
}

code,
pre {
  font-family: var(--mono);
}

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

[hidden] {
  display: none !important;
}

.nb {
  white-space: nowrap;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.quiet {
  color: var(--ink-2);
}

/* -- the bar and the page ------------------------------------------------------------------------------------- */

/* as wide as the page below it (main has the same gutters and .wide the same limit), so their edges line up */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  width: min(100% - 2 * var(--gutter), 74rem);
  margin: 0 auto;
  padding: 16px 0 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.bar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 14px;
}

.bar-nav a {
  color: var(--ink-2);
}

.bar-nav a:hover {
  color: var(--ink);
}

.bar-nav form {
  display: inline;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link-button:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

main {
  padding: 0 var(--gutter) 72px;
}

main:focus {
  outline: none;
}

.wide {
  max-width: 74rem;
  margin: 0 auto;
}

/* narrower pages keep to the left edge, under the name at the top, rather than floating in the middle */
.page {
  max-width: 54rem;
  margin: 0 auto 0 0;
}

.page.claim-page {
  max-width: 64rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 13px;
}

.crumbs a {
  color: var(--ink-2);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs [aria-hidden] {
  color: var(--ink-3);
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 24px;
  margin: 24px 0 22px;
}

.head .grow {
  flex: 1 1 18rem;
  min-width: 0;
}

.head h1,
.title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.summary {
  padding-bottom: 5px;
  color: var(--ink-2);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.where {
  display: grid;
  gap: 1px;
  margin-top: 6px;
  color: var(--ink-2);
  font: 12px/1.45 var(--mono);
  overflow-wrap: anywhere;
}

/* -- buttons and fields --------------------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:not(:disabled):hover {
  background: var(--ink);
  color: var(--card);
}

.button.primary {
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: var(--on-cobalt);
}

.button.primary:not(:disabled):hover {
  border-color: var(--cobalt-deep);
  background: var(--cobalt-deep);
  color: var(--on-cobalt);
}

.button.small {
  min-height: 30px;
  padding: 0 11px;
  border-width: 1px;
  font-size: 13px;
}

.button.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.button.danger:not(:disabled):hover,
.button.danger.sure {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-danger);
}

.button.copied {
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: var(--on-cobalt);
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

.field {
  display: grid;
  gap: 5px;
}

.field > label {
  font-size: 13px;
  font-weight: 600;
}

.input {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

.input::placeholder {
  color: var(--ink-2);
}

.input:focus {
  outline: 2px solid transparent;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 28%, transparent);
}

textarea.input {
  min-height: 8rem;
  line-height: 1.5;
  resize: vertical;
}

.hint {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.problem {
  color: var(--danger);
  font-weight: 500;
}

.form {
  display: grid;
  gap: 14px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel {
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--card);
}

.panel .form {
  max-width: 34rem;
}

/* -- marks: where a ticket stands ----------------------------------------------------------------------------- */

.mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.75px solid var(--ink-2);
  border-radius: 50%;
}

.mark-doing {
  border-color: var(--ink);
  background: conic-gradient(var(--ink) 0 50%, transparent 0 100%);
}

.mark-done {
  border-color: var(--ink);
  background: var(--ink);
}

.mark-dropped {
  border-color: var(--ink-3);
}

.mark-done::after,
.tick:not(:disabled):hover .mark::after {
  content: "";
  position: absolute;
  left: 3.1px;
  top: 0.4px;
  width: 3.4px;
  height: 6.6px;
  border: solid var(--card);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(40deg);
}

.mark-dropped::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.75px;
  background: var(--ink-3);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* a circle to press: it fills in as a preview of "done" */
.tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -5px 0 -5px -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.tick:not(:disabled):hover .mark {
  border-color: var(--ink);
  background: var(--ink);
}

.tick:disabled {
  cursor: default;
  opacity: 0.5;
}

/* the highlighter: a ticket that is being worked on right now */
.row[data-status="doing"] .hl,
.title .hl {
  background: linear-gradient(to bottom, transparent 14%, var(--marker) 14%, var(--marker) 90%, transparent 90%);
  border-radius: 0.2em;
  padding: 0 0.2em;
  margin: 0 -0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.row[data-status="done"] .hl,
.row[data-status="dropped"] .hl {
  color: var(--ink-2);
}

.row[data-status="done"] .hl {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.row[data-status="dropped"] .hl {
  text-decoration: line-through;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
}

/* -- rows: tickets in a list ---------------------------------------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 11px;
  padding: 10px 14px 10px 16px;
  border-top: 1px solid var(--rule);
}

.row:first-child {
  border-top: 0;
}

.lead {
  display: grid;
  place-items: center;
  height: 21px;
}

.row-main {
  min-width: 0;
}

.row-title {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.row-title:hover .hl {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.row-note {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 13px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--stub);
  color: var(--cobalt);
  font: 600 12px/1 var(--mono);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--cobalt);
}

.chip.copied {
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: var(--on-cobalt);
}

/* -- the board: one index card per project -------------------------------------------------------------------- */

/* Columns are made by the script (cards go to the shortest one), so a short card leaves no hole under it. */
.grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.lane {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.card {
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--card);
}

.card-head {
  padding: 15px 16px 11px;
  border-bottom: 2px solid var(--ink);
}

.card-name {
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.card-name a {
  color: var(--ink);
  text-decoration: none;
}

.card-name a:hover {
  color: var(--cobalt);
}

.card-empty {
  padding: 12px 16px;
  color: var(--ink-2);
}

.more {
  display: block;
  padding: 9px 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
}

.add {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  padding: 5px 14px 5px 16px;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 5px 5px;
}

.add::before {
  content: "+";
  color: var(--ink-2);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.add:focus-within {
  background: var(--stub);
}

.add-input {
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.add-input::placeholder {
  color: var(--ink-2);
}

.shelf {
  margin-top: 28px;
  color: var(--ink-2);
}

.shelf summary {
  cursor: pointer;
}

.shelf ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
}

.empty {
  max-width: 36rem;
  padding: 8px 0 0;
}

.empty h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.empty p {
  margin-top: 10px;
  color: var(--ink-2);
}

.empty .tools {
  margin: 18px 0 0;
}

/* -- a project's page ----------------------------------------------------------------------------------------- */

.compose {
  display: grid;
  gap: 10px;
}

.compose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compose-row .input {
  flex: 1 1 16rem;
  width: auto;
}

.group {
  margin-top: 30px;
}

.group > h2,
.group > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.group > summary {
  cursor: pointer;
  list-style: none;
}

.group > summary::-webkit-details-marker {
  display: none;
}

/* a closed group says it opens: a chevron that turns down when it does */
.group > summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  margin: 0 3px 2px 1px;
  border: solid var(--ink-2);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(-45deg);
  transition: transform 0.12s;
}

.group[open] > summary::before {
  transform: rotate(45deg);
}

.count {
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.list {
  margin-top: 10px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--card);
}

/* -- a ticket: a claim check ---------------------------------------------------------------------------------- */

.claim {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  margin-top: 16px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--card);
}

.claim-main {
  min-width: 0;
  padding: 26px 30px 28px;
}

.claim-stub {
  position: relative;
  min-width: 0;
  padding: 26px 24px 28px;
  border-left: 2px dashed var(--perf);
  border-radius: 0 11px 11px 0;
  background: var(--stub);
}

/* the notches where the stub tears off: half circles cut out of the card's edge */
.claim-stub::before,
.claim-stub::after {
  content: "";
  position: absolute;
  left: -12px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--desk);
}

.claim-stub::before {
  top: -12px;
  clip-path: inset(50% 0 0 0);
}

.claim-stub::after {
  bottom: -12px;
  clip-path: inset(0 0 50% 0);
}

.serial {
  color: var(--ink-2);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.06em;
}

.claim .title {
  margin-top: 12px;
}

.state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 18px;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-left: 1.5px solid var(--ink);
  background: transparent;
  font-weight: 600;
}

.seg button:first-child {
  border-left: 0;
}

.seg button:hover {
  background: var(--stub);
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--card);
}

.seg button[aria-pressed="true"][data-status="doing"] {
  background: var(--marker);
  color: var(--ink);
}

.seg button:focus-visible {
  outline-offset: -4px;
}

.prose {
  margin-top: 22px;
  max-width: 44rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 13px;
}

.claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.stub-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.stub-lead {
  margin-top: 4px;
}

.session {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--perf);
}

.session-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.session-id {
  font: 700 15px/1.3 var(--mono);
}

.session-label {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.session-cwd {
  margin-top: 4px;
  color: var(--ink-2);
  font: 12px/1.45 var(--mono);
  overflow-wrap: anywhere;
}

.cmd {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--card);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.cmd code {
  font: inherit;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.session-when {
  margin-top: 8px;
}

.bind {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--perf);
}

.bind summary {
  cursor: pointer;
  font-weight: 600;
}

.bind .form {
  margin-top: 14px;
}

.bind .input {
  min-height: 36px;
  font-size: 14px;
}

/* -- connecting an agent -------------------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 28px;
  margin-top: 8px;
}

.steps h2 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.steps p {
  margin-top: 6px;
  color: var(--ink-2);
  max-width: 40rem;
}

.snippet {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 12px;
}

.snippet .cmd {
  width: 100%;
  margin-top: 0;
  font-size: 13px;
}

/* -- a message at the bottom of the screen -------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 34rem);
  padding: 11px 16px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--card);
  opacity: 0;
  transform: translate(-50%, 10px);
  visibility: hidden;
  transition:
    opacity 0.16s,
    transform 0.16s,
    visibility 0.16s;
}

.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.toast[data-kind="error"] {
  background: var(--danger);
  color: var(--on-danger);
}

.toast-action {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -- the pages the server writes itself: signing in, refusals, the consent screen ----------------------------- */

body.plain {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px var(--gutter);
}

.notice {
  position: relative;
  width: min(100%, 31rem);
  padding: 32px 34px 30px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--card);
}

/* the same notches as a ticket, at the sides */
.notice::before,
.notice::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--desk);
}

.notice::before {
  left: -11px;
  clip-path: inset(0 0 0 50%);
}

.notice::after {
  right: -11px;
  clip-path: inset(0 50% 0 0);
}

.notice .logo {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 10px;
}

.notice h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.notice p {
  margin-top: 12px;
  color: var(--ink-2);
}

.notice p strong {
  color: var(--ink);
}

.notice code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--stub);
  color: var(--ink);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.notice .facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 18px;
  margin-top: 20px;
  padding: 14px 0;
  border-block: 1px dashed var(--perf);
}

.notice .facts dt {
  color: var(--ink-2);
}

.notice .facts dd {
  overflow-wrap: anywhere;
}

/* on a phone the label sits above its value: the address a person is about to be sent to must not break mid-number */
@media (max-width: 480px) {
  .notice .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .notice .facts dt {
    margin-top: 10px;
    font-size: 0.875rem;
  }

  .notice .facts dt:first-child {
    margin-top: 0;
  }
}

.notice .warning {
  padding: 10px 14px;
  border-left: 4px solid var(--marker);
  background: color-mix(in srgb, var(--marker) 30%, transparent);
  color: var(--ink);
}

.notice .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.notice p > .button {
  margin-top: 6px;
}

/* -- small screens -------------------------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .input,
  .add-input {
    font-size: 16px;
  }

  .claim {
    grid-template-columns: minmax(0, 1fr);
  }

  .claim-main {
    padding: 22px 20px 24px;
  }

  /* the stub hangs below instead of beside: the tear line runs across, and the notches sit at its two ends */
  .claim-stub {
    padding: 24px 20px 26px;
    border-left: 0;
    border-top: 2px dashed var(--perf);
    border-radius: 0 0 11px 11px;
  }

  .claim-stub::before,
  .claim-stub::after {
    top: -12px;
    bottom: auto;
  }

  .claim-stub::before {
    left: -12px;
    clip-path: inset(0 0 0 50%);
  }

  .claim-stub::after {
    left: auto;
    right: -12px;
    clip-path: inset(0 50% 0 0);
  }

  .notice {
    padding: 28px 22px 26px;
  }

  .tools {
    margin-left: 0;
  }

  .seg button {
    padding: 0 11px;
  }
}

/* four statuses do not fit in a row on a phone: two by two, with the rules drawn between the cells */
@media (max-width: 520px) {
  .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .seg button {
    border-left: 0;
    border-top: 1.5px solid var(--ink);
  }

  .seg button:nth-child(-n + 2) {
    border-top: 0;
  }

  .seg button:nth-child(even) {
    border-left: 1.5px solid var(--ink);
  }
}

@media (pointer: coarse) {
  .tick {
    width: 40px;
    height: 40px;
    margin: -10px 0 -10px -11px;
  }

  .chip {
    height: 32px;
  }

  .seg button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}