/* codehub, direction D "Keycap": screens S1, S2 and S5-S10, and the a-*
   components they use. Built only from system.css tokens and primitives;
   nothing here restyles a shared component outside an a-* scope.
   Dark-first console: surfaces step canvas < surface < recessed < raised,
   depth is the keycap stack, one filled action per view, green only as the
   Working/Active dot, Geist Mono only for code or data. */

/* ------------------------------------------------- sign in, finish setup */

.a-auth { padding-bottom: 0; }
.a-plainbar { position: static; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.a-auth__main {
  max-width: 440px;
  align-content: start;
  padding-top: var(--s6);
  gap: var(--s5);
  padding-bottom: var(--s9);
}
.a-auth__head { display: grid; gap: var(--s2); }
.a-auth__card { gap: var(--s5); }
.a-auth__card > .btn { margin-top: var(--s2); }
.a-auth__foot {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: var(--t-s); color: var(--text-2); text-align: center;
}
.a-auth__foot .lucide { width: 16px; height: 16px; color: var(--mark); }
@media (min-width: 768px) {
  .a-auth__main { min-height: calc(100dvh - 64px); align-content: center; padding-top: 0; padding-bottom: 14vh; }
}

/* A field filled in for you (the invited email): a flat well, no ring. */
.a-readonly,
.a-readonly:hover,
.a-readonly:focus { box-shadow: none; color: var(--text-2); cursor: default; }
.a-readonly:focus-visible { box-shadow: inset 0 0 0 1px var(--line); }

/* Password with Show at its end (components/a-password.html). */
.a-reveal .input { padding-inline-end: 96px; }
.a-reveal__btn { position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%; min-height: 32px; }
.a-reveal__btn::after { inset: -6px 0; }
/* A left-to-right password inside a right-to-left page: Show sits at the input's own end,
   where its padding is, not over the start of the typed text. */
[dir="rtl"] .a-reveal:has(> .input[dir="ltr"]) > .a-reveal__btn { inset-inline-end: auto; inset-inline-start: 6px; }

/* -------------------------------------------- values to copy (a-copy-field) */

.a-copy__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.a-copy__value {
  flex: 1 1 16rem; min-width: 0;
  display: flex; align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  background: var(--recessed);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-s);
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.a-copy__btn { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .a-copy__btn:not(.btn--small) { flex: 1 1 100%; }
  /* Links and addresses fill each line instead of breaking at a hyphen. */
  .a-copy__value { font-size: var(--t-xs); word-break: break-all; }
}

/* ------------------------------------------------------- S5 link ready */

.a-share-head { display: grid; gap: var(--s2); }
.a-share { display: grid; gap: var(--s6); }
.a-share__label { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; }
/* The message as Omar will read it: a recessed chat bubble. */
.a-bubble {
  max-width: 52ch;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  border-end-start-radius: var(--r-badge);
  background: var(--recessed);
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.a-share__send { display: grid; gap: var(--s2); }
.a-why { display: grid; gap: var(--s2); }
.a-why__title { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-m); font-weight: 500; }
.a-why__title .lucide { width: 18px; height: 18px; color: var(--text-2); }
.a-why p { color: var(--text-2); font-size: var(--t-s); max-width: 62ch; }
.a-share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }

/* ------------------------------------------------ detail pages (S6, S10) */

.a-head { align-items: flex-start; }
.a-head__actions { margin-top: calc(var(--s5) + var(--s1)); }
.a-head__main { display: grid; gap: var(--s2); min-width: 0; }
.a-head__main .back { justify-self: start; margin-bottom: var(--s1); }
.a-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.a-head__title h1 { overflow-wrap: anywhere; }
.a-head__sub { color: var(--text-2); font-size: var(--t-s); }
/* Routine keys grouped together; the stopping action set apart at the end. */
.a-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.a-head__group { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* A POST action among the head's keys keeps its place in the row. */
.a-head__actions form, .a-head__group form { display: contents; }
.a-head__apart { display: flex; padding-inline-start: var(--s4); border-inline-start: 1px solid var(--line-soft); }
@media (max-width: 767.98px) {
  .a-head__title h1 { font-size: var(--t-2xl); }
  .a-head__actions { width: 100%; }
  .a-head__actions .btn--small { --btn-h: 44px; }
  .a-head__apart { padding-inline-start: 0; border-inline-start: 0; }
}

.a-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
.a-detail > * { min-width: 0; }
@media (min-width: 1024px) {
  .a-detail {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas: "lead side" "more side";
  }
  .a-detail__lead { grid-area: lead; }
  .a-detail__side { grid-area: side; }
  .a-detail__more { grid-area: more; }
}

/* A list card with its own small heading. */
.a-panel__title {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-s); font-weight: 500; color: var(--text-2);
}
.a-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.a-section-head .section-title { margin: 0; }
.a-section-head--stack { display: grid; justify-content: start; gap: var(--s1); }

/* S6: the link's facts, in the words his own page uses. */
.a-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: 0; }
.a-facts__item { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.a-facts__item--wide { grid-column: 1 / -1; padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.a-facts dt { font-size: var(--t-s); color: var(--text-2); }
.a-facts dd { margin: 0; display: grid; gap: var(--s1); }
.a-facts dd .muted { font-size: var(--t-s); }
.a-facts__balance { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.a-facts__big { font-size: var(--t-xl); font-weight: 500; line-height: 1.2; }
.a-facts .timeline { margin-top: var(--s1); }
@media (max-width: 479.98px) {
  .a-facts__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .a-facts__item--wide { padding-top: var(--s4); }
}

/* Events (S6 recent activity, S10 codes received): time first, then what happened. */
.a-events { display: grid; }
.a-event {
  position: relative;
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4);
  min-height: 64px;
}
.a-event + .a-event { border-top: 1px solid var(--line-soft); }
.a-event__time { font-size: var(--t-s); font-weight: 500; color: var(--text-2); }
.a-event__text { display: grid; gap: 2px; min-width: 0; }
.a-event > .lucide { width: 16px; height: 16px; color: var(--mark); align-self: center; }
/* Events with a date as well as a time (the app's detail pages). */
.a-events--dated .a-event { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.a-events--dated .a-event__time { white-space: nowrap; }
@media (max-width: 479.98px) {
  .a-events--dated .a-event { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time icon" "text text"; gap: var(--s1) var(--s3); }
  .a-events--dated .a-event__time { grid-area: time; }
  .a-events--dated .a-event__text { grid-area: text; }
  .a-events--dated .a-event > .lucide { grid-area: icon; }
}
/* The add-account choice as its own page (no menu around it). */
.a-kinds { display: grid; gap: 2px; padding: var(--s2); }

/* The More page's signed-in member (phones). */
.more-me { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); }
.more-me .row__text > span:first-child { overflow-wrap: break-word; }

/* ------------------------------------------------------- S7 accounts */

/* Add account: a small keycap menu under the button (components/a-add-account.html). */
.a-menu { position: relative; flex-shrink: 0; }
.a-menu > summary { list-style: none; }
.a-menu > summary::-webkit-details-marker { display: none; }
.a-menu__panel {
  position: absolute; z-index: 30;
  inset-inline-end: 0; top: calc(100% + var(--s2));
  width: min(360px, calc(100vw - 32px));
  display: grid; gap: 2px;
  padding: var(--s2);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--key-strong);
  transform-origin: top left;
  animation: a-pop var(--t-med) var(--ease-out);
}
.a-menu__title { padding: var(--s2) var(--s3); font-size: var(--t-s); color: var(--text-2); }
.a-choice {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r);
  color: var(--text); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .a-choice:hover { background: var(--recessed); color: var(--text); } }
.a-choice:focus-visible { outline-offset: -2px; }
.a-choice__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--raised);
  box-shadow: var(--key);
}
.a-choice__icon .lucide { width: 18px; height: 18px; }
.a-choice__text { display: grid; gap: 2px; min-width: 0; }
.a-choice__name { font-size: var(--t-m); font-weight: 500; }
.a-choice > :is(.lucide, .icon-directional):last-child { width: 16px; height: 16px; color: var(--mark); }
@keyframes a-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 767.98px) {
  .a-menu__panel { inset-inline: 0 auto; transform-origin: top right; }
}

/* Account rows: five columns on desktop, four on tablets (the source folds
   under the name), two lines on phones. */
.a-arow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.6fr) 7.5rem 80px;
  gap: var(--s4);
  align-items: center;
}
.a-arow { min-height: 72px; }
.a-arow > * { min-width: 0; }
.a-arow__who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.a-arow__name { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.a-arow__name .row__link, .a-arow__name .small { white-space: normal; overflow: visible; overflow-wrap: break-word; } /* names wrap whole; never cut a Latin name from its start */
.a-arow__source { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-s); color: var(--text-2); }
.a-arow__source span { min-width: 0; overflow-wrap: break-word; } /* wraps whole words; an ellipsis cut the source short */
.a-arow__source .lucide { width: 16px; height: 16px; color: var(--mark); }
.a-arow__status { display: grid; gap: var(--s1); justify-items: start; }
.a-arow__note { color: var(--text-2); }
.a-arow__last { color: var(--text-2); }
.a-arow__count { text-align: end; }
/* Paused: the monogram drops to an empty edged ring. */
.a-arow.is-paused .mono { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.a-arow.is-paused .row__link { color: var(--text-2); }
/* The app's second line under the status (source and customers) for narrower layouts. */
.a-arow__more, .a-arow__more-last { display: none; }
.a-arow__last { white-space: nowrap; }
@media (max-width: 1279.98px) { .a-arow__more { display: block; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .a-arow-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 7.5rem 72px; }
  .a-arow-grid > :nth-child(2) { display: none; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .a-arow__name .only-narrow { display: inline !important; }
}
/* Below 1024px (phones, and tablets beside the sidebar) a row is two lines. */
@media (max-width: 1023.98px) {
  .a-arow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who chev" "status status";
    gap: var(--s2) var(--s3);
    padding-block: var(--s3) var(--s4);
  }
  .a-arow__who { grid-area: who; }
  .a-arow > .row__chev { grid-area: chev; }
  .a-arow__status { grid-area: status; padding-inline-start: 52px; }
  .a-arow__source, .a-arow__last, .a-arow__count { display: none; }
  .a-arow__more-last { display: inline; } /* the last-code column folds into the second line */
  .list__head.a-arow-grid { display: none; }
}

/* ------------------------------------------ S8, S9 add account: steps */

.a-form-head { display: grid; gap: var(--s2); }
.a-form-head .back { justify-self: start; margin-bottom: var(--s1); }
.a-form-head .page-title { min-width: 0; overflow-wrap: anywhere; }
.a-form-head__kind { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); font-size: var(--t-s); }
.a-form-head__kind .lucide { width: 16px; height: 16px; }

.a-steps { gap: 0; }
.a-step { --pad: var(--s6); --pad-top: var(--pad); position: relative; display: grid; gap: var(--s4); padding-block: var(--pad-top) var(--pad); min-width: 0; }
.a-step:first-child { --pad-top: 0px; }
.a-step__head { display: flex; align-items: center; gap: var(--s3); min-height: 28px; }
/* Each step is a small round key on a soft rail. Now: a brighter ring with a
   lit dot. Done: a full-ink tick, because the app checked it. */
.a-step__mark {
  position: relative;
  display: grid; place-items: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--recessed);
  box-shadow: var(--key);
}
.a-step__mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }
.a-step__head.is-now .a-step__mark { background: var(--surface); box-shadow: var(--key-strong); }
.a-step__head.is-now .a-step__mark::after { width: 8px; height: 8px; background: var(--text); }
.a-step__head.is-done .a-step__mark { color: var(--text); }
.a-step__head.is-done .a-step__mark::after { display: none; }
.a-step__mark .lucide { width: 16px; height: 16px; stroke-width: 2.25; }
.a-step__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); min-width: 0; }
.a-step__title { font-size: var(--t-l); font-weight: 500; }
.a-step__note { font-size: var(--t-s); color: var(--text-2); }
.a-step__body { display: grid; gap: var(--s5); min-width: 0; }
.a-step__lede { font-size: var(--t-s); color: var(--text-2); max-width: 62ch; }
.a-steps .form-actions { margin-top: var(--s2); }
/* The setup key is data: it reads in mono. */
.a-key .input { font-family: var(--mono); font-size: var(--t-s); }
@media (max-width: 767.98px) {
  .a-step + .a-step { border-top: 1px solid var(--line-soft); }
  .a-steps .form-actions { margin-top: 0; }
}
@media (min-width: 768px) {
  .a-step__head { gap: var(--s4); }
  .a-step__body { padding-inline-start: 44px; }
  /* A soft rail joins each mark to the next one. */
  .a-step:not(:last-of-type)::before {
    content: ""; position: absolute;
    inset-inline-start: 13.5px; width: 1px;
    top: calc(var(--pad-top) + 36px); bottom: calc(8px - var(--pad));
    background: var(--line-soft);
  }
}

/* "or Upload QR picture": a real file input inside an edged key. */
.a-or { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: calc(var(--s2) * -1); }
.a-or__word { font-size: var(--t-s); color: var(--text-2); }
.a-file { cursor: pointer; }
.a-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* S8's one moment: the live code arrives as keys, over the draining bar. */
.a-live { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r); background: var(--recessed); min-width: 0; }
.a-live__code { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s4); }
.a-live .digits__cell { animation: key-in 360ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 50ms); }
.a-live__time { font-size: var(--t-s); color: var(--text-2); }
@media (max-width: 479.98px) { .a-live { padding: var(--s4); } }

/* S9: Gmail's three steps, numbered because the order matters. */
.a-howto { display: grid; gap: var(--s3); counter-reset: a-howto; }
.a-howto li { position: relative; padding-inline-start: var(--s5); counter-increment: a-howto; max-width: 62ch; }
.a-howto li::before {
  content: counter(a-howto) ".";
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.a-result__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* --------------------------------------------------- S10 account */

/* A card made of a few parts, split by soft dividers (never cards in cards). */
.a-parts { display: grid; }
.a-parts__part { display: grid; gap: var(--s3); padding-block: var(--s5); min-width: 0; }
.a-parts__part:first-child { padding-top: 0; }
.a-parts__part:last-child { padding-bottom: 0; }
.a-parts__part + .a-parts__part { border-top: 1px solid var(--line-soft); }
.a-parts__title { font-size: var(--t-s); font-weight: 500; color: var(--text-2); }
.a-parts__part--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.a-parts .details__row > .lucide { width: 16px; height: 16px; color: var(--mark); }
.a-parts .details__value.is-code { font-size: var(--t-s); }
@media (max-width: 479.98px) { .card.a-parts { padding: var(--s4); } }

/* The 7-day chart: thin neutral bars on soft gridlines, today labelled,
   numbers on hover. */
.a-bars { margin: 0; display: grid; gap: var(--s3); }
.a-bars__title { font-size: var(--t-s); font-weight: 500; color: var(--text-2); }
.a-bars__plot {
  position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: var(--s1);
  height: 148px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  /* Half and full rules behind the bars. */
  background:
    linear-gradient(var(--line-soft), var(--line-soft)) 0 24px / 100% 1px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) 0 calc(24px + (100% - 24px) * 0.5) / 100% 1px no-repeat;
}
.a-bars__col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.a-bars__bar {
  width: min(8px, 40%);
  min-height: 2px;
  height: calc((100% - 24px) * var(--h) / 100);
  border-radius: 2px 2px 0 0;
  background: var(--text-2);
  transition: opacity var(--t-fast) var(--ease-out);
}
.a-bars__value { font-size: var(--t-xs); color: var(--text-2); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.a-bars__col.is-today .a-bars__value,
.a-bars__col.is-peak .a-bars__value { opacity: 1; }
.a-bars__col.is-today .a-bars__value { color: var(--text); font-weight: 500; }
@media (hover: hover) {
  .a-bars__plot:hover .a-bars__bar { opacity: 0.5; }
  .a-bars__plot .a-bars__col:hover .a-bars__bar { opacity: 1; }
  .a-bars__col:hover .a-bars__value { opacity: 1; }
}
.a-bars__axis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); font-size: var(--t-xs); color: var(--text-2); }
.a-bars__axis span { text-align: center; white-space: nowrap; }
.a-bars__axis span:last-child { grid-column: 7; color: var(--text); font-weight: 500; }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .a-menu__panel { animation: none; }
  .a-live .digits__cell { animation: fade 150ms ease-out both; }
  .a-choice, .a-bars__bar, .a-bars__value { transition: none; }
}

/* Today's bar in full ink; the rest stay quiet. Green is reserved for the Working dot. */
.a-bars__col.is-today .a-bars__bar { background: var(--text); }

.a-choice > .icon-directional .lucide { width: 16px; height: 16px; }