/* The Sales, Activity and Publishing AI pages' own parts, and the sign-in page, built on dashboard.css's tokens and
   components (cards, tables, badges, pills, chips): no colour, size or spacing of their own. Type: 12 / 13 / 14 / 20 /
   36 px, weights 400 / 500 / 600. */

/* ---- Shared ---- */
.card-foot { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5) 12px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.card-foot .small { margin-left: auto; }
.head-note { font-size: 13px; font-weight: 400; color: var(--muted); }
.stat-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.stat .label { display: flex; flex-direction: column; }
.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px var(--s5); font-size: 14px; font-weight: 600; color: var(--ink); border-radius: var(--radius-lg); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { background: var(--surface-2); }
.fold-body { padding: 0 var(--s5) var(--s4); color: var(--ink-2); font-size: 13px; }
.fold-body p { margin: 0 0 8px; max-width: 76ch; }
.fold.inner { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; }
.fold.inner > summary { font-size: 13px; font-weight: 500; color: var(--accent); border-radius: 0; padding: 12px var(--s5); }
.fold.inner > summary::before { border-color: var(--accent); }
.fold .stack.fold-body { padding-top: 4px; }

/* ---- Sales: where the money came from ---- */
.share-bar { display: block; height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.share-bar span { display: block; height: 100%; border-radius: 2px; background: var(--chart); }
.share-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* By funnel: one tile each, side by side */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tiles > li { border-left: 1px solid var(--line-soft); min-width: 0; }
.tiles > li:first-child { border-left: 0; }
/* Each tile opens Sales for that funnel. */
.tile { display: flex; flex-direction: column; gap: 6px; padding: 14px var(--s5) 16px; min-width: 0; height: 100%; color: inherit; }
.tile:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.tile:hover .tile-name { color: var(--accent); }
.tiles > li:last-child .tile { border-radius: 0 0 var(--radius-lg) 0; }
.tiles > li:first-child .tile { border-radius: 0 0 0 var(--radius-lg); }
.tile-name { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tile-value { display: flex; align-items: baseline; gap: 8px; }
.tile-amount { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-share { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tile-detail { font-size: 12px; color: var(--muted); }
/* By product: self-describing cells in aligned columns */
.product-group + .product-group { border-top: 1px solid var(--line); }
.group-title { margin: 0; padding: 12px var(--s5) 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.group-title .muted { font-weight: 400; }
.products { list-style: none; margin: 0; padding: 0 0 6px; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) 84px 136px 88px 150px; column-gap: var(--s4); align-items: baseline; padding: 9px var(--s5); font-size: 13px;
  font-variant-numeric: tabular-nums; }
.product-meta { display: none; }
.product + .product { border-top: 1px solid var(--line-soft); }
.product-name { font-size: 14px; color: var(--ink); min-width: 0; }
.product-name small { display: block; font-size: 12px; color: var(--muted); }
.product-sold, .product-taken { color: var(--muted); text-align: right; white-space: nowrap; }
.product-amount { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.product-share { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; align-self: center; }
.product-share .share-pct { text-align: right; }

/* The latest orders */
.table.orders td, .table.orders th[scope="row"] { vertical-align: top; }
.table.orders td.when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.table.orders th[scope="row"] { min-width: 240px; white-space: normal; }
.table.orders .named strong { font-weight: 500; }
.table.orders td.num { white-space: nowrap; }
.table.orders .phone-meta { display: none; }
.amount-note { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.table.data td.right .amount-note { text-align: right; }

/* Data notes: one small folded area */
.notes { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 13px; }
.notes > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px var(--s5); color: var(--ink-2); border-radius: var(--radius-lg); }
.notes > summary::-webkit-details-marker { display: none; }
.notes > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s; }
.notes[open] > summary::before { transform: rotate(45deg); }
.notes > summary:hover { background: var(--surface-2); }
.notes-title { font-weight: 600; }
.notes > summary .badge { margin-left: 4px; }
.notes.attention { border-color: var(--bad-line); }
.notes-list { list-style: none; margin: 0; padding: 0 var(--s5) 4px 38px; }
.notes-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.notes-list li.bad strong { color: var(--bad-ink); }
.notes-line strong { font-weight: 500; }
.notes-foot { margin: 0; padding: 4px var(--s5) 12px 38px; }

/* ---- Activity: one compact row per change, grouped by day ---- */
.activity { list-style: none; margin: 0; padding: 0; }
.day + .day { border-top: 1px solid var(--line); }
.day-title { margin: 0; padding: 12px var(--s5) 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.change { display: grid; grid-template-columns: 72px minmax(0, 1fr) 112px 72px; column-gap: var(--s4); align-items: start; padding: 12px var(--s5); }
.change + .change { border-top: 1px solid var(--line-soft); }
.change-time { font-size: 13px; color: var(--muted); padding-top: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.change-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.change-title { font-size: 14px; font-weight: 500; color: var(--ink); }
a.change-title { color: var(--ink); }
a.change-title:hover { color: var(--accent); }
.change-meta { font-size: 13px; color: var(--muted); }
.change-note { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.change-note.bad { color: var(--bad-ink); }
.change-state { display: flex; justify-content: flex-start; padding-top: 1px; }
.change-state .done { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.change-state .done svg { width: 14px; height: 14px; fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.change-go { display: flex; justify-content: flex-end; color: var(--faint); padding-top: 2px; }
.change-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.change > .button { justify-self: end; }

/* ---- Publishing AI: its two bands of numbers in one card at every width above a phone (dashboard.css's layout below
   1180 px), why no change is shown, the review point, the versions ---- */
@media (min-width: 641px) {
  .stats.row { flex-direction: row; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 14px 0 12px; }
  .stats.row .stat-group { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 var(--s5); display: grid; column-gap: var(--s4); align-content: start;
    flex: 3 1 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats.row .stat-group + .stat-group { border-left: 1px solid var(--line-soft); }
  .stats.row .stat-group:first-child { border-left: 0; }
  .stats.row .stat-group h2 { grid-column: 1 / -1; margin-bottom: 6px; }
  .stats.row .stat { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; border-top: 0; padding: 0; min-height: 0; }
  .stats.row .stat:has(> p.stat-sub) { grid-template-columns: minmax(0, 1fr); }
  .stats.row .stat-value { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.compare-note { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
.review { display: flex; align-items: center; gap: var(--s4); padding: 12px var(--s5); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; font-size: 13px; }
.review-text { flex: 1 1 320px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.review-text strong { font-weight: 500; color: var(--ink); }
.meter { flex: 0 1 220px; height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--chart-soft); border-radius: 3px; }
.table .rate { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.table tfoot th, .table tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: var(--surface-2); font-weight: 500; color: var(--ink-2); padding: 10px 14px; }
.table.data tfoot th[scope="row"] { background: var(--surface-2); font-size: 13px; font-weight: 500; }
.table.data td.strong { font-weight: 600; color: var(--ink); }
.versions-table th[scope="row"] { min-width: 220px; }

/* ---- Sign in: the dashboard's light surface ---- */
.login-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--s6) var(--s4); background: var(--bg); }
.login-card { width: min(100%, 400px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 32px; }
.login-card .brand { padding: 0 0 24px; }
.login-card h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 20px; }
.login-form { display: grid; gap: var(--s4); }
.login-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.login-form input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%; }
.login-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.login-form .button { width: 100%; min-height: 44px; font-size: 14px; margin-top: 4px; }
.login-form .button:disabled { opacity: .6; cursor: progress; }
.login-card .error-state { margin-bottom: var(--s4); font-size: 13px; }
.login-note { margin: 20px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---- A phone (640 px and below, as dashboard.css's cards and tables) ---- */
/* Sales' two groups of numbers in one card below 1180 px, as the Funnels page's (dashboard.css) */
@media (max-width: 1180px) {
  .stat-group.two.second { border-left: 1px solid var(--line-soft); }
}
@media (max-width: 1080px) {
  .product { grid-template-columns: minmax(0, 1fr) 76px 128px 80px 110px; }
}
@media (max-width: 640px) {
  .stat-group.two.second { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 4px; }
  .group-title, .card-foot, .fold > summary, .notes > summary { padding-left: var(--s4); padding-right: var(--s4); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles > li { border-left: 0; }
  .tiles > li + li { border-top: 1px solid var(--line-soft); }
  .tiles > li .tile { border-radius: 0; }
  .tile { padding: 12px var(--s4); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 4px; }
  .tile-name { font-size: 14px; color: var(--ink); grid-column: 1; grid-row: 1; }
  .tile-detail { grid-column: 1; grid-row: 2; }
  .tile-value { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; gap: 0; }
  .tile-amount { font-size: 14px; }
  .tile-share { font-size: 12px; }
  .tile .share-bar { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .product { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 10px var(--s4); }
  .product-name { grid-column: 1; grid-row: 1; }
  .product-amount { grid-column: 2; grid-row: 1; }
  .product-sold, .product-taken { display: none; }
  .product-meta { display: block; grid-column: 1; grid-row: 2; font-size: 12px; color: var(--muted); }
  .product-share { grid-column: 2; grid-row: 2; grid-template-columns: 44px; justify-items: end; align-self: baseline; }
  .product-share .share-bar { display: none; }
  .fold-body { padding: 0 var(--s4) var(--s4); }
  .notes-list, .notes-foot { padding-left: var(--s4); padding-right: var(--s4); }
  .change { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 12px var(--s4); }
  .change-time { grid-column: 1; grid-row: 2; font-size: 12px; }
  .change-main { grid-column: 1 / -1; grid-row: 1; }
  .change-state { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .change-go { display: none; }
  .change > .button { grid-column: 2; grid-row: 2; justify-self: end; }
  .activity.waiting .change-state { display: none; }
  .day-title { padding: 10px var(--s4) 6px; }
  .review { padding: 12px var(--s4); }
  .meter { flex-basis: 100%; }
  .table.orders tr { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
  .table.orders th[scope="row"] { grid-column: 1; grid-row: 1; }
  .table.orders td.amount { grid-column: 2; grid-row: 1; text-align: right; }
  .table.orders td.when, .table.orders td.funnel, .table.orders td.source { display: none; }
  .table.orders .phone-meta { display: block; margin-top: 2px; }
  .table.data tfoot { display: block; }
  .table.data.compact tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table.data.compact td .rate { display: inline; margin-left: 6px; }
  .table.data td.strong::before { font-weight: 400; }
  .table.data tfoot tr { background: var(--surface-2); }
  .login-card { padding: 24px 20px; }
}