/*
 * Lens
 *
 * The brand's own boards. A board reads as a report sheet: its name, a line
 * on what it is for and the days every card counts, then cards in rows on a
 * four-column grid — figures side by side, charts and tables under them,
 * notes as section heads between. Editing happens on the same sheet.
 *
 * The cards are the dashboard's panels (paper on a 1px line, 14px corners)
 * and their charts the dashboard's (SalesChart's violet line and wash, the
 * reports' bars, the receipts' ring). Series take Kairo's three hues every
 * reader tells apart — violet, coral, deep blue — in that order, and grey
 * for what is folded or earlier (DESIGN.md, Lens). Neo's alone: no other
 * app draws a board.
 */

/* Boards */

.lens-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--k-color-line);
}

.lens-tabs .page-tabs {
  flex: 1;
  min-width: 0;
  margin: 0;
  border-bottom: 0;
  overflow-x: auto;
}

.lens-tabs__new {
  position: relative;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.lens-tabs__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-violet-deep);
  background: none;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.lens-tabs__button:hover,
.lens-tabs__button[aria-expanded="true"] {
  background: var(--k-color-lavender-soft);
}

.lens-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

html[dir="rtl"] .lens-icon--flip {
  transform: scaleX(-1);
}

/* A panel hung under the control that opened it, raised: it has left the
   page and can be dismissed. */
.lens-popover {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(300px, calc(100vw - 24px));
  padding: 14px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
  box-shadow: var(--k-shadow-raised);
}

.lens-popover--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.lens-popover[hidden] {
  display: none;
}

.lens-popover__form {
  display: grid;
  gap: 10px;
}

.lens-popover__form .report-field input {
  min-height: 44px;
}

/* The reports' fields, at the width of the panel they are in, padding
   inside it, and labelled in the label voice, as a form's fields are: the
   meta voice is for a control in a report's head. */
:is(.lens-popover, .lens-start, .lens-settings, .lens-window) .report-field :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  font-weight: 400;
}

:is(.lens-popover, .lens-start, .lens-settings, .lens-window) .report-field {
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--k-color-ink);
}

/* Named only on paper, where the crumbs are not. */
.lens-sheet__store {
  display: none;
}

.lens-popover__aside {
  padding-top: 12px;
  border-top: 1px solid var(--k-color-line);
}

.lens-popover__link {
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-violet-deep);
  background: none;
  border: 0;
  cursor: pointer;
}

.lens-popover__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The sheet */

.lens-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 30px;
  margin-bottom: 26px;
}

.lens-sheet__heading {
  min-width: 0;
}

.lens-sheet__heading h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.lens-sheet__lede {
  max-width: 70ch;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--k-color-muted);
}

/* The basis of every card on the sheet, under its name: the days counted,
   who last changed it. */
.lens-sheet__basis {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--k-color-muted);
}

.lens-sheet__controls {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.lens-sheet__controls .button {
  margin-top: 0;
}

.lens-sheet__edit .lens-icon {
  width: 15px;
  height: 15px;
}

.lens-sheet__empty .panel-empty + .panel-empty__actions {
  margin-top: -44px;
}

/* The window. One control for every card under it, as the dashboard's
   reporting window is: the dates now counted on the button, the presets as
   rows behind it, the custom pair under a rule at the foot. */

.lens-window {
  position: relative;
}

.lens-window__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  font: inherit;
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.lens-window__button:hover,
.lens-window__button[aria-expanded="true"] {
  background: var(--k-color-lavender-soft);
}

.lens-window__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-ink-soft);
}

.lens-window__dates {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-window__button[aria-expanded="true"] .lens-icon {
  transform: rotate(180deg);
}

.lens-window__panel {
  width: min(320px, calc(100vw - 24px));
  padding: 6px;
  gap: 0;
}

.lens-window__presets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lens-window__preset {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-color-ink-soft);
  text-decoration: none;
  border-radius: 6px;
}

.lens-window__preset:hover {
  color: var(--k-color-ink);
  background: var(--k-color-lavender-soft);
}

.lens-window__preset.current {
  font-weight: 700;
  color: var(--k-color-violet-deep);
}

.lens-window__preset small {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--k-color-muted);
}

.lens-window__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.lens-window__check .lens-icon {
  stroke-width: 2.4;
}

.lens-window__custom {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 8px 8px;
  border-top: 1px solid var(--k-color-line);
}

.lens-window__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lens-window__fields input {
  min-width: 0;
  min-height: 40px;
}

.lens-window__note {
  margin: 0;
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-window__custom .button {
  justify-self: end;
}

/* The board itself, while edited: a tray in the system's soft lavender,
   above the cards it names. */
.lens-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--k-color-lavender-soft);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.lens-settings__form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.lens-settings__form .report-field input,
.lens-settings__form .report-field select {
  min-height: 40px;
}

.lens-settings__name {
  width: min(220px, 100%);
}

.lens-settings__description {
  flex: 1;
  min-width: min(260px, 100%);
}

.lens-settings__description input {
  width: 100%;
  box-sizing: border-box;
}

.lens-settings .button {
  margin-top: 0;
}

/* Cards */

.lens-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lens-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px 20px 14px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
  container: lens-card / inline-size;
  scroll-margin-top: calc(var(--topbar) + 20px);
}

.lens-card--w1 { grid-column: span 1; }
.lens-card--w2 { grid-column: span 2; }
.lens-card--w3 { grid-column: span 3; }
.lens-card--w4 { grid-column: span 4; }

/* A card just saved in the editor, or a copy just made. */
.lens-card:target,
.lens-card--fresh {
  border-color: var(--k-color-violet-deep);
}

.lens-card--fresh:focus {
  outline: none;
}

.lens-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--k-color-ink-soft);
  text-wrap: pretty;
}

.lens-card__frame {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.lens-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The card is near the screen and being read; the space it will take is
   held so the sheet does not jump when it arrives. */
.lens-card__waiting {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 96px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

:is(.lens-card--line, .lens-card--bar, .lens-card--pie) .lens-card__waiting {
  min-height: 248px;
}

.lens-card--table .lens-card__waiting {
  min-height: 160px;
}

/* In place of a figure, the reason there is none. */
.lens-card__problem {
  flex: 1;
  max-width: 75ch;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--k-color-muted);
}

.lens-card__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

/* What the card read, over which days: the basis under every figure. */
.lens-card__basis {
  margin: auto 0 0;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

/* A note is the sheet's own words, not a panel: a section's heading and a
   remark under it, set on the page. */
.lens-card--note {
  padding: 22px 0 0;
  background: none;
  border-color: transparent;
}

.lens-note__title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lens-note__body {
  max-width: 75ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--k-color-muted);
}

.lens-note__body p {
  margin: 6px 0 0;
}

/* Number */

.lens-figure {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

.lens-figure__value {
  font-family: var(--display);
  font-size: clamp(28px, 11cqi, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lens-figure__change {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--k-color-muted);
}

/* Charts over time: an axis, a plot, a row of dates. Time runs left to
   right in every language, as the sales trend does. */

.lens-chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 12px 0 0;
}

.lens-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lens-legend__line {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 2px;
  background: var(--k-color-violet);
}

.lens-legend__line--2 { background: var(--k-color-coral); }
.lens-legend__line--3 { background: var(--k-color-blue-deep); }

.lens-legend__line--previous {
  background: repeating-linear-gradient(90deg, var(--k-color-muted) 0 4px, #0000 4px 7px);
}

.lens-legend__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--k-color-violet);
  border-radius: 2px;
}

.lens-legend__swatch--previous {
  background: var(--k-color-control-border);
}

.lens-plot-wrap {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: 0 10px;
  direction: ltr;
}

.lens-axis {
  position: relative;
  min-width: 34px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--k-color-muted);
  text-align: end;
}

.lens-axis span {
  position: absolute;
  inset-inline-end: 0;
  bottom: var(--at);
  transform: translateY(50%);
  white-space: nowrap;
}

/* The widest tick, unseen and in the flow, holds the column open so the
   plot starts where the labels end. */
.lens-axis .lens-axis__sizer {
  position: static;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transform: none;
}

.lens-plot {
  position: relative;
  min-width: 0;
  border-radius: 2px;
  touch-action: pan-y;
}

.lens-plot:focus-visible {
  outline-offset: 6px;
}

.lens-plot__grid {
  position: absolute;
  inset-inline: 0;
  bottom: var(--at);
  height: 1px;
  background: var(--k-color-line);
}

.lens-plot__grid--zero {
  background: var(--k-color-control-border);
}

.lens-plot svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lens-area {
  stroke: none;
}

.lens-wash {
  stop-color: var(--k-color-violet);
}

.lens-line {
  fill: none;
  stroke: var(--k-color-violet);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lens-line--2 { stroke: var(--k-color-coral); }
.lens-line--3 { stroke: var(--k-color-blue-deep); }

.lens-line--previous {
  stroke: var(--k-color-muted);
  stroke-width: 1.75;
  stroke-dasharray: 5 5;
}

/* Into a period the window cuts short, as a partial day is drawn: at 35%. */
.lens-line--faint {
  stroke-opacity: 0.35;
}

/* A point with no neighbour to draw a line to, ringed in paper so it reads
   where it crosses another line. */
.lens-plot__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  background: var(--k-color-violet);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--k-color-paper);
  transform: translate(-50%, -50%);
}

.lens-plot__dot--2 { background: var(--k-color-coral); }
.lens-plot__dot--3 { background: var(--k-color-blue-deep); }

.lens-plot__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 1px;
  background: var(--k-color-control-border);
  pointer-events: none;
}

.lens-plot__cursor[hidden] {
  display: none;
}

.lens-tooltip {
  position: absolute;
  top: 4px;
  left: calc(var(--x) + 12px);
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 120px;
  padding: 8px 10px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  box-shadow: var(--k-shadow-raised);
  pointer-events: none;
}

.lens-tooltip--flip {
  left: auto;
  right: calc(100% - var(--x) + 12px);
}

.lens-tooltip[hidden] {
  display: none;
}

.lens-tooltip p {
  margin: 0;
}

.lens-tooltip__label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.lens-tooltip__row strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lens-tooltip__name {
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-xaxis {
  display: flex;
  grid-column: 2;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-xaxis span:only-child {
  margin: 0 auto;
}

/* Columns: one per period, grown from zero, the bar radius on the end away
   from it; the earlier window's in grey beside it; a period the window cut into
   at 35%. */
.lens-columns {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lens-column {
  position: relative;
  border-radius: 6px;
}

.lens-column--current {
  background: color-mix(in srgb, var(--k-color-violet) 7%, transparent);
}

.lens-column__bar {
  position: absolute;
  bottom: var(--bottom);
  left: 50%;
  width: min(24px, 64%);
  height: var(--height);
  background: var(--k-color-violet);
  border-radius: 2px 2px 0 0;
  transform: translateX(-50%);
}

.lens-column__bar--negative {
  border-radius: 0 0 2px 2px;
}

.lens-columns--paired .lens-column__bar {
  left: calc(50% + 1px);
  width: min(12px, 34%);
  transform: none;
}

.lens-columns--paired .lens-column__bar--previous {
  left: auto;
  right: calc(50% + 1px);
  background: var(--k-color-control-border);
}

.lens-column--partial .lens-column__bar:not(.lens-column__bar--previous) {
  opacity: 0.35;
}

/* Bars by name: the reports' bars, with room for a product's title. */
.lens-bars {
  display: grid;
  grid-template-columns: minmax(84px, 36%) minmax(0, 1fr) auto;
  margin: 8px 0 0;
  padding: 0;
}

.lens-bars .report-bar {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding: 8px 0;
}

.lens-bars .report-bar__label {
  overflow-wrap: anywhere;
}

/* Pie: the receipts' ring, parted by a hairline, the total at its centre. */
.lens-pie {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(120px, 172px) minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 18px 22px;
  margin: 14px 0 0;
}

.lens-pie__ring {
  position: relative;
  margin: 0;
}

.lens-pie__ring svg {
  display: block;
  width: 100%;
  height: auto;
}

.lens-pie__track {
  fill: none;
  stroke: color-mix(in srgb, var(--k-color-violet) 12%, var(--k-color-paper));
  stroke-width: 16;
}

.lens-pie__arc {
  fill: none;
  stroke: var(--k-color-violet);
  stroke-width: 16;
}

.lens-pie__arc--2 { stroke: var(--k-color-coral); }
.lens-pie__arc--3 { stroke: var(--k-color-blue-deep); }
.lens-pie__arc--other { stroke: var(--k-color-line); }

.lens-pie__centre {
  position: absolute;
  inset: 22%;
  display: grid;
  place-content: center;
  text-align: center;
}

.lens-pie__centre strong {
  font-family: var(--display);
  font-size: clamp(16px, 7cqi, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.lens-pie__centre span {
  margin-top: 2px;
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-pie__legend {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lens-pie__legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.lens-pie__legend li:last-child {
  border-bottom: 0;
}

.lens-swatch {
  width: 10px;
  height: 10px;
  background: var(--k-color-violet);
  border-radius: 2px;
}

.lens-swatch--2 { background: var(--k-color-coral); }
.lens-swatch--3 { background: var(--k-color-blue-deep); }
.lens-swatch--other { background: var(--k-color-line); }

.lens-pie__name {
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lens-pie__share,
.lens-pie__value {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.lens-pie__share {
  color: var(--k-color-muted);
}

@container lens-card (width < 400px) {
  .lens-pie {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .lens-pie__ring {
    width: min(172px, 70%);
  }

  .lens-pie__legend {
    width: 100%;
  }
}

/* Tables: the dashboard's, denser, scrolled inside the card. */
.lens-table-scroll {
  max-height: 420px;
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
}

.lens-table {
  min-width: 0;
}

.lens-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-inline-start: 16px;
  background: var(--k-color-paper);
  white-space: normal;
}

.lens-table thead th:first-child {
  padding-inline-start: 0;
}

.lens-table tbody th,
.lens-table tbody td {
  height: 42px;
  padding-inline-start: 16px;
}

.lens-table tbody th {
  max-width: 260px;
  padding-inline-start: 0;
  white-space: normal;
}

.lens-table__figure small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.lens-table__partial {
  color: var(--k-color-muted);
}

.lens-table tfoot th,
.lens-table tfoot td {
  height: 42px;
  padding-inline-start: 16px;
  font-weight: 700;
  border-top: 1px solid var(--k-color-control-border);
}

.lens-table tfoot th {
  padding-inline-start: 0;
  font-size: 13px;
  text-align: start;
}

.lens-table tfoot td {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lens-data {
  margin: 12px 0 0;
}

/* The system's two-stroke chevron, turned when open, in place of the
   browser's filled triangle. */
.lens-data summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.lens-data summary::-webkit-details-marker {
  display: none;
}

.lens-data summary .lens-icon {
  width: 14px;
  height: 14px;
  color: var(--k-color-control-border);
  transform: rotate(-90deg);
  transition: transform var(--k-duration-fast) var(--k-ease-standard);
}

html[dir="rtl"] .lens-data summary .lens-icon {
  transform: rotate(90deg);
}

.lens-data[open] summary .lens-icon {
  transform: none;
}

.lens-data .lens-table-scroll {
  max-height: 280px;
  margin: 0;
}

/* Editing the sheet */

.lens-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: -8px -10px 12px;
  padding: 0 0 8px;
  border-bottom: 1px dashed var(--k-color-line);
}

.lens-card--note .lens-tools {
  margin: 0 0 12px;
}

.lens-tools__form {
  display: contents;
}

.lens-tools__group,
.lens-tools__widths {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lens-tools__group--end {
  margin-inline-start: auto;
}

.lens-tools__grip,
.lens-tools__button,
.lens-tools__width {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font: inherit;
  color: var(--k-color-ink-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.lens-tools__grip {
  cursor: grab;
}

.lens-tools__grip:active {
  cursor: grabbing;
}

.lens-tools__grip:hover,
.lens-tools__button:hover,
.lens-tools__width:hover {
  color: var(--k-color-ink);
  background: var(--k-color-lavender-soft);
}

.lens-tools__button--remove:hover {
  color: var(--k-color-error);
  background: var(--k-color-error-bg);
}

/* A width as a bar filling its share of four. */
.lens-tools__width i {
  display: block;
  width: 20px;
  height: 8px;
  background: linear-gradient(90deg, currentcolor calc(var(--fill) * 25%), color-mix(in srgb, currentcolor 18%, transparent) 0);
  border-radius: 2px;
}

html[dir="rtl"] .lens-tools__width i {
  transform: scaleX(-1);
}

.lens-tools__width.current {
  color: var(--k-color-violet-deep);
  border-color: color-mix(in srgb, var(--k-color-violet-deep) 45%, transparent);
}

/* On a card too narrow for one row, the actions keep the first row's end
   and the widths take a row of their own, rather than the row breaking
   wherever it runs out. */
@container lens-card (width < 360px) {
  .lens-tools__group--end {
    order: 1;
  }

  .lens-tools__widths {
    order: 2;
  }
}

.lens-sheet--editing .lens-card--note {
  padding: 14px 16px;
  border: 1px dashed var(--k-color-control-border);
}

.lens-card--dragging {
  opacity: 0.4;
}

.lens-add {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lens-add__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  min-height: 72px;
  padding: 14px 20px;
  color: var(--k-color-ink);
  text-decoration: none;
  border: 1px dashed var(--k-color-control-border);
  border-radius: var(--k-radius-panel);
}

.lens-add__choice:hover {
  background: var(--k-color-lavender-soft);
  border-style: solid;
}

.lens-add__choice .lens-icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--k-color-violet-deep);
}

.lens-add__choice strong {
  font-size: 14px;
}

.lens-add__choice span {
  font-size: 12px;
  color: var(--k-color-muted);
}

/* Starting: the overview Lens lays out, or an empty sheet. */

.lens-start h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lens-start > p {
  max-width: 70ch;
  margin: 6px 0 18px;
  font-size: 14px;
  color: var(--k-color-muted);
}

.lens-start__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 880px;
}

.lens-start__form {
  display: contents;
}

.lens-start__choice {
  display: grid;
  align-content: start;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  font: inherit;
  color: var(--k-color-ink);
  text-align: start;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.lens-start__choice--lead {
  cursor: pointer;
  transition: border-color var(--k-duration-fast) var(--k-ease-standard);
}

.lens-start__choice--lead:hover {
  border-color: var(--k-color-violet-deep);
}

.lens-start__choice strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lens-start__choice > span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

.lens-start__choice .report-field {
  margin-top: 8px;
}

.lens-start__choice .report-field input {
  min-height: 44px;
}

.lens-start__choice .button {
  justify-self: start;
  margin-top: 4px;
}

.lens-sketch {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 10px;
}

.lens-sketch__card { fill: var(--k-color-lavender-soft); stroke: var(--k-color-line); }
.lens-sketch__note { fill: var(--k-color-line); }
.lens-sketch__figure { fill: var(--k-color-ink-soft); }
.lens-sketch__line { fill: none; stroke: var(--k-color-violet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lens-sketch__ring { fill: none; stroke: var(--k-color-coral); stroke-width: 4; stroke-dasharray: 30 27; }
.lens-sketch__bar { fill: var(--k-color-violet); }
.lens-sketch__row { fill: var(--k-color-line); }

/* The card editor: its choices beside the card itself. */

/* Heading, preview, choices is the order the page is read in at every
   width: side by side, the preview takes the second column beside the
   choices it follows in the page. */
.lens-editor {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: start;
  gap: 22px 28px;
}

.lens-editor__head {
  grid-column: 1 / -1;
}

.lens-editor__form {
  grid-row: 2;
  grid-column: 1;
}

.lens-editor__head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.lens-editor__head p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--k-color-muted);
}

.lens-editor__form {
  display: grid;
  gap: 22px;
}

.lens-editor__fields {
  display: grid;
  gap: 22px;
}

.lens-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lens-field__label,
.lens-field legend {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-ink);
}

.lens-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lens-field__row > .lens-input {
  flex: 1 1 180px;
}

.lens-field__stack {
  display: grid;
  gap: 8px;
}

.lens-field__hint {
  max-width: 62ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

.lens-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
  caret-color: var(--k-color-violet-deep);
}

.lens-input:hover {
  border-color: var(--k-color-ink);
}

.lens-input:focus {
  border-color: var(--k-color-violet-deep);
}

textarea.lens-input {
  resize: vertical;
  line-height: 1.5;
}

/* The selects take the same drawn chevron as the reports' fields. */
.lens-select {
  appearance: none;
  padding-inline-end: 36px;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.75px), var(--k-color-muted) calc(50% - 0.75px), var(--k-color-muted) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to top left, transparent calc(50% - 0.75px), var(--k-color-muted) calc(50% - 0.75px), var(--k-color-muted) calc(50% + 0.75px), transparent calc(50% + 0.75px));
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

html[dir="rtl"] .lens-select {
  background-position: 14px 50%, 20px 50%;
}

.lens-input--count {
  width: 84px;
  min-height: 44px;
}

.lens-field__inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--k-color-ink-soft);
}

/* What it is drawn as: six tiles, the chosen one lit. */
.lens-charts__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lens-chart-option {
  position: relative;
  display: block;
}

.lens-chart-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lens-chart-option__face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  min-height: 60px;
  padding: 10px 12px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.lens-chart-option__face .lens-icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--k-color-ink-soft);
}

.lens-chart-option__face strong {
  font-size: 13px;
}

.lens-chart-option__face small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--k-color-muted);
}

.lens-chart-option:hover .lens-chart-option__face {
  border-color: var(--k-color-control-border);
}

.lens-chart-option input:checked + .lens-chart-option__face {
  background: var(--k-color-lavender-soft);
  border-color: var(--k-color-violet-deep);
}

.lens-chart-option input:checked + .lens-chart-option__face .lens-icon,
.lens-chart-option input:checked + .lens-chart-option__face strong {
  color: var(--k-color-violet-deep);
}

.lens-chart-option input:focus-visible + .lens-chart-option__face {
  outline: 3px solid var(--k-color-violet-deep);
  outline-offset: 3px;
}

.lens-filter {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.lens-filter__remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--k-color-muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.lens-filter__remove:hover {
  color: var(--k-color-error);
  background: var(--k-color-error-bg);
}

.lens-link-button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  margin-inline-start: -10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-violet-deep);
  background: none;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.lens-link-button:hover {
  background: var(--k-color-lavender-soft);
}

.lens-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.lens-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--k-color-violet);
}

.lens-check:has(input:disabled) {
  color: var(--k-color-muted);
  cursor: default;
}

.lens-widths {
  display: flex;
  gap: 2px;
  width: fit-content;
  padding: 0;
  background: var(--k-color-lavender-soft);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
}

.lens-width {
  position: relative;
}

.lens-width input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lens-width span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-ink-soft);
  border-radius: 6px;
  cursor: pointer;
}

.lens-width i {
  display: block;
  width: 16px;
  height: 6px;
  background: linear-gradient(90deg, currentcolor calc(var(--fill) * 25%), color-mix(in srgb, currentcolor 20%, transparent) 0);
  border-radius: 2px;
}

.lens-width input:checked + span {
  color: var(--k-color-violet-deep);
  background: var(--k-color-paper);
  box-shadow: 0 1px 2px rgb(23 32 51 / 10%);
}

.lens-width input:focus-visible + span {
  outline: 3px solid var(--k-color-violet-deep);
  outline-offset: 2px;
}

.lens-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--k-color-line);
}

.lens-editor__actions .button {
  margin-top: 0;
}

.lens-editor__actions [hidden] {
  display: none;
}

.lens-editor__preview {
  position: sticky;
  top: calc(var(--topbar) + 20px);
  grid-row: 2;
  grid-column: 2;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lens-editor__preview-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lens-editor__preview-head p {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.lens-editor__card {
  display: grid;
  gap: 12px;
  transition: opacity var(--k-duration-fast) var(--k-ease-standard);
}

/* While the draft is read again, the card it replaces stays, faded, rather
   than giving way to an empty frame. */
.lens-editor__card[aria-busy="true"] {
  opacity: 0.6;
}

.lens-card--preview {
  min-height: 160px;
}

.lens-editor__errors {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
  border: 1px solid color-mix(in srgb, var(--k-color-warning) 25%, transparent);
  border-radius: var(--k-radius-control);
}

.lens-editor__errors p {
  margin: 0;
  font-weight: 700;
}

.lens-editor__errors ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

/* Narrow columns */

@container page (width <= 1080px) {
  .lens-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lens-card--w2,
  .lens-card--w3,
  .lens-card--w4 {
    grid-column: span 2;
  }

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

  .lens-editor__form,
  .lens-editor__preview {
    grid-row: auto;
    grid-column: 1;
  }

  .lens-editor__preview {
    position: static;
  }
}

@container page (width <= 780px) {
  .lens-sheet__head {
    flex-direction: column;
  }

  .lens-sheet__controls {
    justify-content: flex-start;
  }

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

@container page (width <= 656px) {
  .lens-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lens-card--w1,
  .lens-card--w2,
  .lens-card--w3,
  .lens-card--w4 {
    grid-column: span 1;
  }

  .lens-charts__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .lens-filter > :nth-child(2),
  .lens-filter > :nth-child(3) {
    grid-column: 1;
  }

  .lens-filter__remove {
    grid-row: 1;
    grid-column: 2;
  }

  .lens-window__dates {
    display: none;
  }

  /* The form takes a row of its own, the delete under it; its fields one
     to a row, full width. */
  .lens-settings__form {
    flex-basis: 100%;
  }

  .lens-settings__form .report-field {
    width: 100%;
  }

  .lens-widths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lens-editor__card,
  .lens-start__choice--lead,
  .lens-data summary .lens-icon {
    transition: none;
  }

  .lens-window__button[aria-expanded="true"] .lens-icon {
    transform: none;
  }
}

/* On paper a board is the report it reads as: no rail, no bar, no tools,
   every card whole on its page. */
@media print {
  body.dashboard {
    background: var(--k-color-paper);
  }

  .rail,
  .kairo-topbar,
  .lens-tabs,
  .lens-sheet__controls,
  .lens-settings,
  .lens-tools,
  .lens-add,
  .lens-data,
  .flash {
    display: none !important;
  }

  /* The crumbs that name the store are gone with the bar; the sheet says
     whose report it is itself. */
  .lens-sheet__store {
    display: inline;
  }

  .main {
    margin-inline-start: 0;
  }

  .page-content {
    padding: 0;
  }

  .lens-card {
    break-inside: avoid;
  }
}