/*
 * Prismwise base styles and components (ADR 0011). Semantic and component tokens only – no raw
 * colour values here (stylelint). Calm, list-first, few boxes (R10.5, UIF-31).
 */

@import url("tokens.css");

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

html {
  font-family: var(--pw-font-family);
  font-size: 100%;
  line-height: var(--pw-line-height);
  color: var(--pw-color-text);
  background: var(--pw-color-bg);
  font-feature-settings: "cv11", "tnum";

  /* The vertical scrollbar is always there, so the page never shifts sideways when content grows. */
  overflow-y: scroll;
}

body {
  margin: 0;
  font-size: var(--pw-font-size-md);
  min-height: 100vh;
}

/* Headings in bold slate (R72.13): a section's heading 20px on a 28px line, as in Stripe. */
h1,
h2,
h3 {
  margin: 0;
  color: var(--pw-color-heading);
  font-weight: var(--pw-font-weight-bold);
  line-height: 1.25;
}

h1 {
  font-size: var(--pw-font-size-2xl);
}

h2 {
  font-size: var(--pw-font-size-xl);
  line-height: 1.75rem;
}

h3 {
  font-size: var(--pw-font-size-md);
  line-height: 1.25rem;
}

p {
  margin: 0;
}

a {
  color: var(--pw-color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* Headings and other non-controls get focus programmatically after a navigation (FocusOnNavigate) so
   screen readers announce the new page; Safari would draw a focus ring around them. */
[tabindex="-1"]:focus {
  outline: none;
}

.pw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pw-muted {
  color: var(--pw-color-text-muted);
}

.pw-icon {
  flex-shrink: 0;
  width: var(--pw-icon-size);
  height: var(--pw-icon-size);

  /* A button sets --pw-icon-color so its icon is slate while its text keeps its own colour (R72.13). */
  color: var(--pw-icon-color, currentcolor);
}

/* The pencil in an edit link (R72.17). */
.pw-icon--tiny {
  width: 12px;
  height: 12px;
}

.pw-icon--small {
  width: 0.875rem;
  height: 0.875rem;
}

.pw-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pw-font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Workspace shell ---- */
.pw-shell {
  display: grid;
  grid-template-columns: var(--pw-sidebar-width) 1fr;
  min-height: 100vh;
}

.pw-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
  height: 100vh;
  padding: var(--pw-space-4) var(--pw-space-3);
  background: var(--pw-sidebar-bg);
  border-right: 1px solid var(--pw-color-border);
}

.pw-brand {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: 0 var(--pw-space-2);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-primary);
  color: var(--pw-color-on-primary);
  font-size: var(--pw-font-size-xs);
}

.pw-context {
  display: grid;
  gap: var(--pw-space-1);
}

.pw-context label {
  padding: 0 var(--pw-space-2);
  font-size: var(--pw-font-size-xs);
  color: var(--pw-color-text-muted);
}

.pw-nav {
  display: grid;
  gap: 2px;
}

.pw-nav a {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-1) var(--pw-space-2);
  border-radius: var(--pw-radius-md);
  color: var(--pw-color-text);
  transition: background-color var(--pw-motion-fast);
}

.pw-nav a:hover {
  background: var(--pw-color-hover-sunken);
  text-decoration: none;
}

/* The current item is marked in the link itself (text and icon in the primary colour), no background. */
.pw-nav a[aria-current="page"],
.pw-nav a.active {
  color: var(--pw-color-primary);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-banner {
  padding: var(--pw-space-2) var(--pw-space-8);
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
  font-size: var(--pw-font-size-sm);
}

.pw-workspace {
  width: 100%;
  max-width: var(--pw-content-max-width);
  margin-inline: auto;
  padding: var(--pw-space-8);
}

/* A wide list (e.g. Ansökningar) takes the whole width (FullWidthPage). */
.pw-workspace:has(.pw-full-width-page) {
  max-width: none;
}

/* Groups in the workspace menu, each with a small heading. */
.pw-nav-group {
  display: grid;
  gap: 2px;
}

.pw-nav-group + .pw-nav-group {
  margin-top: var(--pw-space-4);
}

.pw-nav-heading {
  padding: 0 var(--pw-space-2) var(--pw-space-1);
  font-size: var(--pw-font-size-xs);
  font-weight: var(--pw-font-weight-medium);
  color: var(--pw-color-text-muted);
}

/* The menu button and the backdrop only exist on narrow screens. */
.pw-topbar .pw-nav-toggle,
.pw-nav-backdrop {
  display: none;
}

/* On a narrow screen the menu folds away and slides in over the page from the menu button. */
@media (width <= 64rem) {
  .pw-shell {
    grid-template-columns: 1fr;
  }

  .pw-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--pw-z-overlay);
    width: min(var(--pw-sidebar-width), 85vw);
    overflow-y: auto;
    box-shadow: var(--pw-shadow-overlay);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--pw-motion-fast), visibility var(--pw-motion-fast);
  }

  /* Visible at once when opening (so focus can move into it), hidden only after sliding out. */
  .pw-sidebar--open {
    transform: none;
    visibility: visible;
    transition: transform var(--pw-motion-fast);
  }

  .pw-topbar .pw-nav-toggle {
    display: inline-flex;
    align-self: center;
  }

  .pw-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--pw-z-overlay);
    background: var(--pw-color-backdrop);
  }
}

@media (width <= 40rem) {
  .pw-workspace {
    padding: var(--pw-space-4);
  }
}

/* ---- Page structure ---- */
.pw-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pw-space-1) var(--pw-space-4);
  margin-bottom: var(--pw-space-6);
}

.pw-page-header-text {
  display: grid;
  gap: var(--pw-space-1);
}

/* The description runs under the heading and its actions, on a row of its own. */
.pw-page-header-description {
  flex-basis: 100%;
  margin: 0;
}

.pw-eyebrow {
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-page-actions {
  display: flex;
  gap: var(--pw-space-2);
}

/* 48px between rows of sections (R72.15), as in Stripe. */
.pw-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* its content keeps to the section's width, however wide a table or a word (R76.5) */
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-12);
}

.pw-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  padding-bottom: var(--pw-space-2);

  /* A faint rule under a section's heading (R72.17). */
  border-bottom: 1px solid var(--pw-color-border-faint);
}

.pw-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--pw-space-8);
}

@media (width <= 60rem) {
  .pw-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Buttons ---- */
.pw-button {
  --pw-icon-color: var(--pw-color-icon);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pw-space-2);
  min-height: var(--pw-button-height);
  padding: 0 var(--pw-space-3);
  border: 1px solid var(--pw-color-border-button);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface);
  color: var(--pw-color-text);
  font: inherit;
  font-weight: var(--pw-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
}

.pw-button:hover {
  background: var(--pw-color-hover);
  text-decoration: none;
}

.pw-button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.pw-button--primary {
  --pw-icon-color: currentcolor;

  border-color: var(--pw-color-primary);
  background: var(--pw-color-primary);
  color: var(--pw-color-on-primary);
}

.pw-button--primary:hover {
  border-color: var(--pw-color-primary-hover);
  background: var(--pw-color-primary-hover);
}

.pw-button--quiet {
  border-color: transparent;
  background: transparent;
}

/* Every button in a page or section header has the grey frame, whatever its variant (the owner, R84.10). */
.pw-page-actions .pw-button--quiet,
.pw-section-header .pw-button--quiet {
  border-color: var(--pw-color-border-button);
  background: var(--pw-color-surface);
}

.pw-page-actions .pw-button--quiet:hover,
.pw-section-header .pw-button--quiet:hover {
  background: var(--pw-color-hover);
}

.pw-button--danger {
  --pw-icon-color: currentcolor;

  border-color: var(--pw-color-danger);
  color: var(--pw-color-danger);
}

.pw-button--small {
  min-height: var(--pw-button-height);
  padding: 0 var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

/* ---- Lists ---- */
.pw-table {
  width: 100%;
  border-collapse: collapse;
}

/* Column headings in bold, in the heading colour (R72.12). */
.pw-table th {
  padding: var(--pw-space-2) var(--pw-space-3);
  border-bottom: 1px solid var(--pw-color-border);
  color: var(--pw-color-heading);
  font-size: var(--pw-font-size-sm);
  font-weight: var(--pw-font-weight-semibold);
  text-align: left;
}

/* A heading over a column of amounts lines up with them on the right. */
.pw-table th.pw-num {
  text-align: right;
}

/* DataTable: the header stays in view under the open-items bar while the page scrolls. */
.pw-table--stack thead th {
  position: sticky;
  top: var(--pw-table-sticky-top);
  z-index: 1;
  background: var(--pw-color-bg);
}

.pw-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  color: inherit;
  text-decoration: none;
}

.pw-sort:hover {
  color: var(--pw-color-text);
  text-decoration: none;
}

.pw-sort-icon {
  opacity: 0.5;
}

th[aria-sort="ascending"] .pw-sort,
th[aria-sort="descending"] .pw-sort {
  color: var(--pw-color-text);
}

th[aria-sort="ascending"] .pw-sort-icon,
th[aria-sort="descending"] .pw-sort-icon {
  opacity: 1;
}

.pw-table td {
  padding: calc(var(--pw-space-1) * 1.5) var(--pw-space-3);
  border-bottom: 1px solid var(--pw-color-border);
  vertical-align: top;
}

/* A dense table in a narrow part of a tab: smaller text and padding, totals in the footer. */
.pw-table--compact thead th,
.pw-table--compact tbody td,
.pw-table--compact tfoot th,
.pw-table--compact tfoot td {
  padding: var(--pw-space-1) var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

.pw-table--compact tfoot th,
.pw-table--compact tfoot td {
  border-top: 1px solid var(--pw-color-border);
  border-bottom: 0;
  font-weight: var(--pw-font-weight-medium);
}

.pw-table tbody tr:hover {
  background: var(--pw-color-hover);
}

/* A row with a link opens its entity when clicked anywhere (prismwise.installRowLinks), so its links
   look like the rest of the row. */
.pw-table tbody tr:has(a[href]) {
  cursor: pointer;
}

.pw-table tbody tr:has(a[href]) a {
  color: inherit;
}

.pw-table tbody tr:has(a[href]) a:hover {
  text-decoration: none;
}

.pw-loading {
  height: 2px;
  overflow: hidden;
  background: var(--pw-color-border);
}

.pw-loading::after {
  display: block;
  width: 30%;
  height: 100%;
  background: var(--pw-color-primary);
  animation: pw-loading 1s ease-in-out infinite;
  content: "";
}

@keyframes pw-loading {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(340%);
  }
}

.pw-empty {
  display: grid;
  gap: var(--pw-space-2);
  justify-items: start;
  padding: var(--pw-space-10) 0;
}

.pw-empty-title {
  font-weight: var(--pw-font-weight-semibold);
}

/* An empty list in a box with a dashed frame, like .pw-empty-box (R72.10). */
.pw-empty--boxed {
  justify-items: center;
  padding: var(--pw-space-6) var(--pw-space-4);
  border: 1px dashed var(--pw-color-border-strong);
  border-radius: var(--pw-radius-lg);
  text-align: center;
}

.pw-empty--boxed p {
  margin: 0;
}

/* ---- Facts ---- */
.pw-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pw-space-2) var(--pw-space-6);
  margin: 0;
}

.pw-facts-item {
  display: contents;
}

/* A label and its value side by side (R72.18): the label grey, the value darker. */
.pw-facts dt {
  color: var(--pw-color-fact-label);
}

.pw-facts dd {
  color: var(--pw-color-fact-value);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- Badges and callouts ---- */
.pw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pw-space-2);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-neutral-bg);
  color: var(--pw-color-neutral-text);
  font-size: var(--pw-font-size-xs);
  font-weight: var(--pw-font-weight-medium);
  line-height: 1.5rem;
  white-space: nowrap;
}

.pw-badge--info {
  background: var(--pw-color-info-bg);
  color: var(--pw-color-info-text);
}

.pw-badge--success {
  background: var(--pw-color-success-bg);
  color: var(--pw-color-success-text);
}

.pw-badge--warning {
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-badge--danger {
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

.pw-callout {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-3) var(--pw-space-4);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-info-bg);
  color: var(--pw-color-info-text);
}

.pw-callout--success {
  background: var(--pw-color-success-bg);
  color: var(--pw-color-success-text);
}

.pw-callout--warning {
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-callout--danger {
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

.pw-callout-title {
  font-weight: var(--pw-font-weight-semibold);
}

/* A callout the user can put away (R78.6): the close button in the top right corner, the text clear of it. */
.pw-callout--dismissible {
  position: relative;
  padding-right: calc(var(--pw-space-4) + var(--pw-button-height) + var(--pw-space-2));
}

/* Qualified so it wins over the icon button's own position and colour, defined later. */
.pw-callout .pw-callout-dismiss {
  position: absolute;
  top: var(--pw-space-2);
  right: var(--pw-space-2);
  color: inherit;
}

/* Messages above a page's or tab's parts (R78.5): spaced from each other and from the part under them like the parts are. */
.pw-page-callouts {
  display: grid;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-12);
}

.pw-page-callouts ul {
  margin: 0;
  padding-left: var(--pw-space-5);
}

/* ---- Forms ---- */
.pw-form {
  display: grid;
  gap: var(--pw-space-4);
  max-width: 36rem;
}

/* A long form with several parts on the wide workspace (R66): its sections in two columns once the form itself is wide
   enough, one column below; a part that needs the whole width (the loan rows) spans both. */
.pw-form--columns {
  max-width: 88rem;
  container-type: inline-size;
}

.pw-form-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--pw-space-8);
  align-items: start;
}

/* Repeated groups in the columns (the guarantors) keep apart when they stack or wrap to a new row. */
.pw-form-columns--spaced {
  row-gap: var(--pw-space-6);
}

/* The applicant and the co-applicant side by side (R67.4–R67.5): each column a subgrid of the same rows, so a field and
   its twin line up even when a help text or a wrapped label makes one taller; the page sets --pw-party-rows. */
.pw-party-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--pw-space-8);
}

/* One column of a pw-form-columns grid holding fields under each other. */
.pw-form-column {
  display: grid;
  gap: var(--pw-space-4);
  align-content: start;
}

/* Two fields on one row of a party column (R68.2); one under the other in a narrow form. */
.pw-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-3);
  align-items: start;
}

/* The loan's own fields kept narrow, with the sums of the existing loans beside them (R68.1). */
.pw-loan-terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-4) var(--pw-space-8);
  align-items: start;
}

.pw-loan-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 10rem));
  gap: var(--pw-space-3);
}

.pw-loan-summary {
  display: grid;
  gap: var(--pw-space-3);
}

/* Brand and product as a row of radio buttons under the page header (R67.1). */
.pw-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2) var(--pw-space-6);
  padding: 0;
  margin: 0;
  border: 0;
}

.pw-radio-row > legend {
  width: 100%;
  padding: 0;
  margin-bottom: var(--pw-space-2);
  font-weight: var(--pw-font-weight-semibold);
}

@container (min-width: 56rem) {
  .pw-form-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pw-form-columns > .pw-form-span {
    grid-column: 1 / -1;
  }

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

  /* Each column measures itself, so its pairs fall to one field per row when the column is narrow (R68.2). */
  .pw-party-columns > .pw-section {
    grid-row: span var(--pw-party-rows, 1);
    grid-template-rows: subgrid;
    align-content: start;
    container-type: inline-size;
  }

  .pw-loan-terms {
    grid-template-columns: max-content minmax(16rem, 1fr);
  }

  .pw-loan-fields {
    grid-template-columns: repeat(3, 10rem);
  }

  /* The business loan's purposes are longer than the personal loan's. */
  .pw-loan-fields--wide-purpose {
    grid-template-columns: 10rem 10rem 20rem;
  }
}

@container (max-width: 36rem) {
  .pw-loan-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The pairs follow their column when it is a container (two columns) and the form otherwise. */
@container (max-width: 26rem) {
  .pw-field-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pw-fieldset {
  display: grid;
  gap: var(--pw-space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.pw-fieldset legend {
  margin-bottom: var(--pw-space-2);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-field {
  display: grid;
  align-content: start; /* a taller neighbour in a form grid must not stretch the input */
  gap: var(--pw-space-1);
}

.pw-field label {
  font-weight: var(--pw-font-weight-medium);
}

.pw-field-help {
  color: var(--pw-color-text-muted);
  font-size: var(--pw-font-size-sm);
}

.pw-field-error,
.validation-message {
  color: var(--pw-color-danger-text);
  font-size: var(--pw-font-size-sm);
}

.pw-required {
  color: var(--pw-color-danger);
}

/* Every text-like control, select and textarea looks the same in every browser: Safari otherwise draws
   small grey native selects and date fields. Selects get their own chevron (drawn with the text
   colour), date and time fields their full height. */
.pw-input,
select,
textarea,
input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]) {
  min-height: var(--pw-control-height);
  padding: var(--pw-control-padding-block) var(--pw-space-3);
  border: 1px solid var(--pw-color-border-control);
  border-radius: var(--pw-radius-md);
  background-color: var(--pw-color-surface);
  color: var(--pw-color-text);
  font: inherit;
  font-size: var(--pw-control-font-size);
  font-weight: 400;
  line-height: var(--pw-control-line-height);
}

select:not([multiple]) {
  appearance: none;
  padding-right: var(--pw-space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position:
    calc(100% - 1.125rem) 50%,
    calc(100% - 0.8125rem) 50%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}

select:disabled,
input:disabled,
textarea:disabled {
  background-color: var(--pw-color-surface-sunken);
  color: var(--pw-color-text-muted);
  cursor: not-allowed;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
}

input::-webkit-datetime-edit,
input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  line-height: var(--pw-control-line-height); /* a date field as high as a text field (R76.7) */
}

input::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: left;
}

.pw-input,
.pw-field input,
.pw-field select,
.pw-field textarea {
  width: 100%;
}

.pw-field input[type="checkbox"],
.pw-field input[type="radio"] {
  width: auto;
}

.pw-check {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-weight: var(--pw-font-weight-regular);
}

.pw-field .invalid {
  border-color: var(--pw-color-danger);
}

.pw-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
}

/* Buttons keep their label on one line; a status text beside them wraps instead. */
.pw-form-actions > :is(button, a) {
  flex-shrink: 0;
  white-space: nowrap;
}

.pw-secret {
  display: grid;
  gap: var(--pw-space-2);
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-color-border-strong);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-sunken);
}

.pw-secret code {
  overflow-wrap: anywhere;
}

/* ---- Raw message (message archive) ---- */
.pw-code-block {
  max-height: 24rem;
  margin: 0;
  overflow: auto;
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface-sunken);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pw-font-size-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Segmented control ---- */
.pw-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface);
}

.pw-segmented button {
  flex: 1;
  padding: var(--pw-space-1) var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-sm);
  background: transparent;
  color: var(--pw-color-text-muted);
  font: inherit;
  font-size: var(--pw-font-size-xs);
  cursor: pointer;
}

.pw-segmented--icons {
  justify-self: start;
  width: max-content;
}

.pw-segmented--icons button {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: var(--pw-space-1);
  font-size: var(--pw-font-size-sm);
}

.pw-segmented button[aria-pressed="true"] {
  background: var(--pw-color-selected);
  color: var(--pw-color-link);
}

/* ---- Full-page messages (sign-in, invitations) ---- */
.pw-centered {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--pw-space-6);
  background: var(--pw-color-surface-sunken);
}

.pw-card {
  display: grid;
  gap: var(--pw-space-4);
  width: 100%;
  max-width: 28rem;
  padding: var(--pw-space-8);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface);
}

/* ---- Filter row above a list ---- */
.pw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--pw-space-4);
  margin-bottom: var(--pw-space-4);
}

.pw-filters .pw-field {
  min-width: 12rem;
}

/* ---- Tenant menu (spec 17 §1) ---- */
.pw-tenant-menu {
  position: relative;
}

.pw-tenant-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  width: 100%;
  padding: var(--pw-space-2);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface);
  color: var(--pw-color-text);
  font: inherit;
  font-weight: var(--pw-font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.pw-tenant-menu-trigger:hover,
.pw-tenant-menu-trigger[aria-expanded="true"] {
  background: var(--pw-color-selected);
}

.pw-tenant-menu-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-tenant-menu-chevron {
  color: var(--pw-color-text-muted);
  transition: transform var(--pw-motion-fast);
}

.pw-tenant-menu-chevron--open {
  transform: rotate(180deg);
}

.pw-brand-mark--large {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--pw-font-size-md);
}

/* An uploaded logo shown on *Organisation och varumärken* (R102.3). */
.pw-logo-preview {
  display: block;
  max-width: 16rem;
  max-height: 4rem;
  margin-block: var(--pw-space-2);
  object-fit: contain;
}

/* The platform's own symbol (docs/brand) where a tenant would show its initials. */
.pw-brand-mark--logo {
  padding: 3px;
  object-fit: contain;
  background: transparent;
}

.pw-brand-mark--neutral {
  background: var(--pw-color-neutral-bg);
  color: var(--pw-color-neutral-text);
}

.pw-brand-mark--sandbox {
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--pw-z-overlay);
}

/* The Menu popover (UIF-34): in the top layer, placed by prismwise.menu.place; hidden until opened. */
.pw-menu {
  position: fixed;
  inset: auto;
  width: max-content;
  height: max-content;
  max-height: calc(100dvh - var(--pw-space-4));
  margin: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 17rem;
  padding: var(--pw-space-2);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-menu:not(:popover-open) {
  display: none;
}

.pw-menu::backdrop {
  background: transparent;
}

.pw-menu-anchor {
  position: relative;
}

/* A submenu's item (R60.4): an ordinary menu item with a chevron at the end, marked while its list is open. */
.pw-submenu-trigger[aria-expanded="true"] {
  background: var(--pw-color-hover);
}

.pw-submenu-trigger > .pw-submenu-chevron {
  margin-inline-start: auto;
}

.pw-menu-heading {
  display: grid;
  justify-items: center;
  gap: var(--pw-space-1);
  padding: var(--pw-space-3) var(--pw-space-2) var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

.pw-menu-heading-name {
  font-weight: var(--pw-font-weight-semibold);
  font-size: var(--pw-font-size-md);
}

.pw-menu-item {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  width: 100%;
  padding: var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-menu-item--nested {
  padding-inline-start: var(--pw-space-8);
}

.pw-menu-item:hover,
.pw-menu-item:focus-visible {
  background: var(--pw-color-hover);
  text-decoration: none;
}

.pw-menu-item:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: -2px;
}

.pw-menu-item--danger,
.pw-menu-item--danger > .pw-icon {
  color: var(--pw-color-danger-text);
}

.pw-menu-item--disabled {
  color: var(--pw-color-text-muted);
  cursor: not-allowed;
}

.pw-menu-item > .pw-icon {
  color: var(--pw-color-text-muted);
}

.pw-menu-item-text {
  display: grid;
  flex-grow: 1;
  min-width: 0;
}

.pw-menu-item-text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-menu-item-text .pw-muted {
  font-size: var(--pw-font-size-xs);
}

.pw-menu-item > .pw-menu-item-check {
  color: var(--pw-color-primary);
}

/* Icons in filter pills (R60.3): small and muted; placed before the workspace menu's for the specificity order. */
.pw-filter-pill button > .pw-icon,
button.pw-filter-pill > .pw-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--pw-color-text-muted);
}

/* Icons in the workspace menu: muted, the current item's in its colour. */
.pw-nav a .pw-icon {
  color: var(--pw-color-text-muted);
}

.pw-nav a[aria-current="page"] .pw-icon,
.pw-nav a.active .pw-icon {
  color: inherit;
}

.pw-menu-divider {
  margin: var(--pw-space-1) 0;
  border-top: 1px solid var(--pw-color-border);
}

.pw-menu-label {
  display: flex;
  align-items: center;
  gap: var(--pw-space-1);
  padding: var(--pw-space-1) var(--pw-space-2) 0;
  font-size: var(--pw-font-size-xs);
  color: var(--pw-color-text-muted);
}

.pw-nav-later {
  display: flex;
  justify-content: space-between;
  padding: var(--pw-space-1) var(--pw-space-2);
  color: var(--pw-color-text-muted);
}

.pw-nav-later small {
  font-size: var(--pw-font-size-xs);
}

/* ---- Open items bar (spec 17 §1) ---- */
.pw-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The bar stays at the top while the page scrolls and has a fixed height so opening or closing a tab
   never moves the page. The bottom line is an
   inset shadow, so the active tab can cover it without overflowing (no scrollbar), and only the tab
   strip scrolls: the search and the bell's popover sit outside the scroll container. */
.pw-topbar {
  position: sticky;
  top: 0;
  z-index: var(--pw-z-sticky);
  display: flex;
  align-items: stretch;
  gap: var(--pw-space-3);
  height: var(--pw-topbar-height);
  padding: 0 var(--pw-space-4);
  background: var(--pw-sidebar-bg);
  box-shadow: inset 0 -1px 0 var(--pw-color-border);
}

.pw-open-items {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: var(--pw-space-1);
  min-width: 0;
  overflow: auto hidden;
  scrollbar-width: thin;
}

.pw-topbar-tools {
  display: flex;
  flex-shrink: 0;

  /* Stays at the right end also where the tabs are left out (the settings, R84.1). */
  margin-inline-start: auto;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-open-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: calc(var(--pw-topbar-height) - var(--pw-space-2));
  max-width: 16rem;
  border: 1px solid var(--pw-color-border);
  border-bottom: 0;
  border-radius: var(--pw-radius-lg) var(--pw-radius-lg) 0 0;
  background: var(--pw-color-surface);
  white-space: nowrap;
}

.pw-open-item-link {
  display: grid;
  gap: 1px;
  padding: var(--pw-space-1) var(--pw-space-3);
  color: var(--pw-color-text);
  line-height: 1.2;
  overflow: hidden;
}

.pw-open-item-link:hover {
  text-decoration: none;
}

.pw-open-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--pw-font-weight-medium);
}

.pw-open-item-subtitle {
  font-size: var(--pw-font-size-xs);
  color: var(--pw-color-text-muted);
}

.pw-open-item--list {
  flex-shrink: 0;
  align-self: center;
  padding: var(--pw-space-1) var(--pw-space-3);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-text-muted);
}

.pw-open-item--list[aria-selected="true"] {
  background: var(--pw-color-selected);
  color: var(--pw-color-link);
  font-weight: var(--pw-font-weight-medium);
}

/* Only the active tab joins the page; the others keep the bar's bottom line under them. */
.pw-open-item:not(.pw-open-item--active, .pw-open-item--list) {
  box-shadow: inset 0 -1px 0 var(--pw-color-border);
}

.pw-open-item--active {
  box-shadow: inset 0 2px 0 var(--pw-color-primary);
}

.pw-open-item--active .pw-open-item-title {
  font-weight: var(--pw-font-weight-semibold);
}

.pw-open-item--problem .pw-open-item-subtitle {
  color: var(--pw-color-danger-text);
}

/* A draft tab with unsaved changes (R47): the subtitle says so and a dot marks the title. */
.pw-open-item--unsaved .pw-open-item-subtitle {
  color: var(--pw-color-warning-text);
}

.pw-open-item--unsaved .pw-open-item-title::after {
  content: " •";
  color: var(--pw-color-warning-text);
}

.pw-open-item-close {
  display: inline-grid;
  place-items: center;
  margin-right: var(--pw-space-1);
  padding: var(--pw-space-1);
  border: 0;
  border-radius: var(--pw-radius-sm);
  background: none;
  color: var(--pw-color-text-muted);
  font: inherit;
  cursor: pointer;
}

.pw-open-item-close:hover {
  background: var(--pw-color-hover);
  color: var(--pw-color-text);
}

.pw-open-item-add {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2rem;
  height: 2rem;
  border: 1px dashed var(--pw-color-border-strong);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface);
  color: var(--pw-color-text-muted);
  font: inherit;
  text-decoration: none;
}

.pw-open-item-add:hover {
  background: var(--pw-color-hover);
  color: var(--pw-color-text);
}

/* The consent script read to the customer on the phone (UI-22). */
.pw-script {
  margin: var(--pw-space-2) 0 var(--pw-space-3);
  padding-left: var(--pw-space-5);
  display: grid;
  gap: var(--pw-space-2);
}

/* Global search in the top bar: the field widens when focused and the results drop down below it. */
.pw-search {
  position: relative;
  align-self: center;
}

.pw-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-search-icon {
  position: absolute;
  left: var(--pw-space-3);
  color: var(--pw-color-text-muted);
  pointer-events: none;
}

.pw-search-field kbd {
  position: absolute;
  right: var(--pw-space-2);
  padding: 0 var(--pw-space-1);
  border: 1px solid var(--pw-color-border-strong);
  border-radius: var(--pw-radius-sm);
  color: var(--pw-color-text-muted);
  font: inherit;
  font-size: var(--pw-font-size-xs);
  pointer-events: none;
}

/* Qualified so it wins over the generic control rule's padding. */
.pw-search-field .pw-search-input {
  width: 18rem;
  min-height: 2rem;
  padding: var(--pw-space-1) var(--pw-space-8);
  border-color: var(--pw-color-border);
  font-size: var(--pw-font-size-sm);
  line-height: var(--pw-line-height); /* the header's search keeps its own size (R76.7) */
  transition: width var(--pw-motion-fast);
}

.pw-search--open .pw-search-field .pw-search-input {
  width: min(32rem, 60vw);
  border-color: var(--pw-color-focus);
}

.pw-search-input::-webkit-search-cancel-button {
  display: none;
}

.pw-search-panel {
  position: absolute;
  top: calc(100% + var(--pw-space-1));
  right: 0;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-search--open .pw-search-field,
.pw-search--open .pw-search-panel {
  z-index: calc(var(--pw-z-overlay) + 1);
}

@media (width <= 40rem) {
  .pw-search {
    display: none;
  }
}

/* ---- Directory and queue cards ---- */
.pw-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--pw-space-3);
}

.pw-directory-item {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  color: var(--pw-color-text);
}

a.pw-directory-item:hover {
  background: var(--pw-color-hover);
  text-decoration: none;
}

/* A settings card: icon, title link and description; the link covers the whole card. */
.pw-settings-item {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--pw-space-3);
}

.pw-settings-item:hover {
  background: var(--pw-color-hover);
}

.pw-settings-item-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-selected);
  color: var(--pw-color-link);
}

.pw-settings-item-text {
  display: grid;
  gap: var(--pw-space-1);
}

.pw-settings-item-link {
  color: var(--pw-color-text);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-settings-item-link::after {
  position: absolute;
  inset: 0;
  border-radius: var(--pw-radius-lg);
  content: "";
}

.pw-settings-item-link:hover {
  text-decoration: none;
}

.pw-settings-item-link:focus-visible {
  outline: none;
}

.pw-settings-item-link:focus-visible::after {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 2px;
}

.pw-directory-item--later {
  color: var(--pw-color-text-muted);
}

.pw-queue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--pw-space-3);
}

.pw-queue-card {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  color: var(--pw-color-text);
}

.pw-queue-card:hover {
  background: var(--pw-color-hover);
  text-decoration: none;
}

.pw-queue-card--attention {
  border-color: var(--pw-color-warning-text);
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-queue-card-label {
  font-size: var(--pw-font-size-sm);
}

.pw-queue-card-count {
  font-size: var(--pw-font-size-2xl);
  font-weight: var(--pw-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pw-plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pw-space-2);
}

/* A setting's value at a brand or product level (Allmänt): what and where on the left, its action on the right. */
.pw-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-2);
}

/* The start page's latest events (R83): the application on one line, what happened under it. */
.pw-recent-events li {
  display: grid;
  gap: var(--pw-space-1);
}

/* ---- Filter cards (queue tabs, UIF-5) and pagination ---- */
.pw-filter-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-4);
}

/* A callout over the filter cards (Löneuppgifter) keeps the same space to them as the cards keep to the list. */
.pw-callout + .pw-filter-cards {
  margin-top: var(--pw-space-4);
}

/* A callout over a section (Provision → Avstämning: payouts without an agreement over the month's lenders) keeps space to
   its heading instead of sitting flush against it: more than over filter cards, since a section heading starts a new part
   of the page while the cards belong to the list right under them. */
.pw-callout + .pw-section {
  margin-top: var(--pw-space-6);
}

/* A search field over a list, under its filter cards (Användare): an icon inside a field of the usual height. */
.pw-list-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 24rem;
  margin-bottom: var(--pw-space-4);
}

.pw-list-search-icon {
  position: absolute;
  left: var(--pw-space-2);
  color: var(--pw-color-text-muted);
  pointer-events: none;
}

.pw-list-search input[type="search"] {
  width: 100%;
  padding-left: var(--pw-space-8);
}

.pw-filter-card {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  min-height: 2.5rem;
  padding: 0 var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface);
  color: var(--pw-color-text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.pw-filter-card:hover {
  background: var(--pw-color-hover);
  text-decoration: none;
}

.pw-filter-card[aria-current="true"] {
  border-color: var(--pw-color-link);
  background: var(--pw-color-selected);
  color: var(--pw-color-link);
  font-weight: var(--pw-font-weight-medium);
}

.pw-filter-card-count {
  color: var(--pw-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pw-filter-card[aria-current="true"] .pw-filter-card-count {
  color: inherit;
}

.pw-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  margin-top: var(--pw-space-4);
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-pagination-links {
  display: flex;
  gap: var(--pw-space-2);
}

.pw-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-4);
}

/* ---- Detail pages: header, tabs, facts rail (spec 17 §2.2) ---- */
.pw-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pw-space-4);
  margin-bottom: var(--pw-space-4);
}

.pw-detail-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-3);
}

.pw-tabs {
  display: flex;
  gap: var(--pw-space-1);
  margin-bottom: var(--pw-space-6);
  box-shadow: inset 0 -1px 0 var(--pw-color-border);
  overflow: auto hidden;
  scrollbar-width: thin;
}

.pw-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-2) var(--pw-space-3);
  border-bottom: 2px solid transparent;
  color: var(--pw-color-text-muted);
  white-space: nowrap;
}

.pw-tab:hover {
  color: var(--pw-color-text);
  text-decoration: none;
}

.pw-tab[aria-current="page"] {
  border-bottom-color: var(--pw-color-primary);
  color: var(--pw-color-text);
  font-weight: var(--pw-font-weight-medium);
}

.pw-tab-count {
  min-width: 1.25rem;
  padding: 0 var(--pw-space-1);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-neutral-bg);
  color: var(--pw-color-neutral-text);
  font-size: var(--pw-font-size-xs);
  line-height: 1.25rem;
  text-align: center;
}

.pw-tab-count--attention {
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

.pw-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--pw-space-8);
  align-items: start;
}

.pw-facts-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-4);
  padding-left: var(--pw-space-5);
  border-left: 1px solid var(--pw-color-border);
}

/* Long badges wrap inside the narrow rail instead of widening it. */
.pw-facts-rail .pw-badge {
  padding-block: 2px;
  line-height: 1.4;
  white-space: normal;
}

.pw-facts-rail-person {
  display: grid;
  gap: var(--pw-space-1);
}

.pw-facts-rail-actions {
  display: flex;
  gap: var(--pw-space-2);
  margin-top: var(--pw-space-2);
}

.pw-facts-rail-actions > * {
  flex-grow: 1;
}

@media (width <= 60rem) {
  .pw-detail {
    grid-template-columns: 1fr;
  }

  .pw-facts-rail {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--pw-color-border);
    padding-top: var(--pw-space-4);
  }
}

/* The application page (R72.1, R72.7): a centred 1280px workspace; the header with its actions and the tabs span it, and
   under them the tab (948px) and the facts rail (284px) share the row with 48px between them. Lists elsewhere keep the
   full width. The rail stays in view while the tab scrolls. A page without tabs or rail in the same centred width is a
   centred (the shell's .pw-workspace); only a wide list opts out with FullWidthPage. */
.pw-detail-page {
  max-width: 1280px;
  margin-inline: auto;
}

.pw-detail--rail {
  --pw-rail-bottom: 0px;

  grid-template-columns: minmax(0, 1fr) 284px;
  gap: 48px;
}

.pw-detail-main {
  min-width: 0;
  container: pw-tab / inline-size;
}

/* The workbench bar (R62) covers the bottom of the window where it is shown; the rail ends above it. */
.pw-shell:has(> .pw-workbench) .pw-detail--rail {
  --pw-rail-bottom: var(--pw-workbench-bar-height);
}

.pw-detail--rail > .pw-facts-rail {
  position: sticky;
  top: calc(var(--pw-topbar-height) + var(--pw-space-4));
  align-content: start;
  max-height: calc(100dvh - var(--pw-topbar-height) - var(--pw-space-4) - var(--pw-rail-bottom));
  padding-left: 0;
  border-left: 0;
  overflow-y: auto;
}

/* A rail that runs with the page instead of staying in view (settings pages, R84.11): no scrollbar of its own, the page
   grows with it, and its column runs the page's full height so the main column's content keeps beside it. */
.pw-detail--rail-static {
  align-items: stretch;
}

.pw-detail--rail.pw-detail--rail-static > .pw-facts-rail {
  position: static;
  max-height: none;
  overflow: visible;
}

@media (width <= 60rem) {
  .pw-detail--rail {
    grid-template-columns: 1fr;
  }

  .pw-detail--rail > .pw-facts-rail {
    position: static;
    max-height: none;
    padding: var(--pw-space-4) 0 0;
    overflow: visible;
  }
}

/* A tab's content in four columns (R70.1): parts span one to four; the grid follows the main area's own width, two
   columns below 64rem (a part of three or four takes the full width, one or two a column each) and one below 40rem. */
.pw-tab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--pw-space-8);
  align-items: start;
}

.pw-tab-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pw-span-1 {
  grid-column: span 1;
}

.pw-span-2 {
  grid-column: span 2;
}

.pw-span-3 {
  grid-column: span 3;
}

.pw-span-4 {
  grid-column: 1 / -1;
}

/* Buttons and a menu side by side in a section's header (R70.4). */
.pw-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-section-actions .pw-button,
.pw-facts-rail-actions .pw-button {
  gap: var(--pw-space-1);
}

/* A smaller heading inside a section, with an action at its right (the existing loans on Sökande). */
.pw-section-subheader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  margin-top: var(--pw-space-4);
}

.pw-section-subheader--first {
  margin-top: 0;
  margin-bottom: var(--pw-space-2);
}

.pw-section-subheader h3 {
  margin: 0;
  font-size: var(--pw-font-size-md);
}

.pw-small {
  font-size: var(--pw-font-size-sm);
}

/* The customer's documents as a compact list in one column (R70.8): name, then what it is and when, actions in a menu. */
.pw-document-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-document {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pw-space-2);
  padding-block: var(--pw-space-2);
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-document-main {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow-wrap: anywhere;
}

.pw-document-main .pw-muted {
  font-size: var(--pw-font-size-sm);
}

@container pw-tab (width < 64rem) {
  .pw-tab-grid,
  .pw-tab-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pw-tab-grid > .pw-span-1,
  .pw-tab-grid > .pw-span-2 {
    grid-column: span 1;
  }

  .pw-tab-grid > .pw-span-3 {
    grid-column: 1 / -1;
  }
}

@container pw-tab (width < 40rem) {
  .pw-tab-grid,
  .pw-tab-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .pw-tab-grid > [class*="pw-span-"] {
    grid-column: 1 / -1;
  }
}

.pw-state-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--pw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pw-font-size-xs);
}

.pw-state-step {
  display: grid;
  gap: 2px;
  padding-top: var(--pw-space-2);
  border-top: 3px solid var(--pw-color-border);
  color: var(--pw-color-text-muted);
}

.pw-state-step--done {
  border-top-color: var(--pw-color-primary);
  color: var(--pw-color-text);
}

.pw-state-step--current {
  border-top-color: var(--pw-color-primary);
  color: var(--pw-color-primary);
  font-weight: var(--pw-font-weight-medium);
}

.pw-state-step-detail {
  font-weight: var(--pw-font-weight-regular);
  color: var(--pw-color-text-muted);
}

/* ---- One card per lender on the application (R79.1, R79.17), as Stripe's payment methods: the figures sit in columns
   that line up with the column headings above the cards; a click opens the card's details in a sunken panel ---- */
.pw-lender-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 4.5rem 5.5rem 5.5rem 7rem;
  column-gap: var(--pw-space-4);
  align-items: center;
}

.pw-lender-columns {
  /* The card's border, the summary's padding, and on the right the "…" column with its gaps. */
  padding: 0 calc(var(--pw-space-4) + var(--pw-space-2) + 2rem + var(--pw-space-3) + 1px) var(--pw-space-2) calc(var(--pw-space-4) + 1px);
  color: var(--pw-color-text-muted);
  font-size: var(--pw-font-size-sm);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-lender-column-num {
  text-align: right;
}

.pw-lender-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-3);
}

.pw-lender-card {
  min-width: 0;
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface);
}

.pw-lender-card:hover {
  border-color: var(--pw-color-border-strong);
}

.pw-lender-card--open {
  box-shadow: var(--pw-shadow-overlay);
}

.pw-lender-card-head {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding-right: var(--pw-space-3);
}

.pw-lender-card-summary {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pw-space-4);
  border: 0;
  border-radius: var(--pw-radius-lg);
  background: none;
  color: var(--pw-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-lender-card-summary:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: -2px;
}

.pw-lender-card-actions {
  display: flex;
  flex: none;
  justify-content: center;
  width: 2rem;
}

.pw-lender-cell-name {
  display: grid;
  gap: var(--pw-space-1);
  min-width: 0;
}

.pw-lender-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Read with the figure; shown beside it only on a narrow screen, where the column headings are hidden. */
.pw-lender-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A wide table of other offers scrolls inside the panel instead of widening the card on a phone. */
.pw-lender-card-details {
  overflow-x: auto;
  margin: 0 var(--pw-space-3) var(--pw-space-3);
  padding: var(--pw-space-4);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface-sunken);
}

/* As in Stripe's details panel: two columns of facts, each with its label above its value. */
.pw-facts.pw-lender-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-4) var(--pw-space-8);
}

.pw-lender-facts .pw-facts-item {
  display: grid;
  gap: var(--pw-space-1);
  align-content: start;
}

/* The usual fact label is too light on the sunken panel (4.45:1); the muted text keeps WCAG AA there. */
.pw-lender-facts dt {
  color: var(--pw-color-text-muted);
}

.pw-lender-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-1) var(--pw-space-3);
}

.pw-lender-row-name {
  font-weight: var(--pw-font-weight-semibold);
}

.pw-lender-history {
  display: grid;
  gap: var(--pw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-lender-history li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--pw-space-3);
}

/* What the lender asks for (R79.11): a read-only checklist, the open items in the warning colour. */
.pw-lender-requirements {
  display: grid;
  gap: var(--pw-space-2);
  margin: 0 0 var(--pw-space-3);
  padding: 0;
  list-style: none;
}

.pw-lender-requirement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pw-space-2);
  color: var(--pw-color-warning-text);
}

.pw-lender-requirement > span {
  color: var(--pw-color-text);
}

.pw-lender-requirement--done {
  color: var(--pw-color-success-text);
}

.pw-lender-message {
  margin-bottom: var(--pw-space-3);
}

.pw-lender-message p {
  margin: var(--pw-space-1) 0 0;
  white-space: pre-line;
}

/* The text the customer signs, as the staff see it before preparing the acceptance (R79.7). */
.pw-accept-content {
  display: grid;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-3);
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface-sunken);
}

.pw-accept-content p {
  margin: 0;
}

@container pw-tab (width < 44rem) {
  .pw-lender-columns {
    display: none;
  }

  .pw-lender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--pw-space-2);
  }

  .pw-lender-cell-name {
    grid-column: 1 / -1;
  }

  .pw-lender-cell {
    display: grid;
    text-align: left;
  }

  .pw-lender-cell-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--pw-color-text-muted);
    font-size: var(--pw-font-size-sm);
  }

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

  .pw-lender-history li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.pw-lender-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-3);
}

.pw-lender-choice {
  display: grid;
  gap: var(--pw-space-2);
  margin: 0 0 var(--pw-space-5);
  padding: 0;
  border: 0;
}

.pw-lender-choice legend {
  margin-bottom: var(--pw-space-2);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-lender-choice-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pw-space-2) var(--pw-space-3);
  padding: var(--pw-space-2) 0;
  border-bottom: 1px solid var(--pw-color-border);
}

/* ---- Dialog ---- */
.pw-dialog {
  width: min(48rem, 92vw);
  padding: 0;
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
  color: var(--pw-color-text);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-dialog::backdrop {
  background: var(--pw-color-backdrop);
}

.pw-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  padding: var(--pw-space-4) var(--pw-space-5) 0;
}

.pw-dialog-close {
  padding: var(--pw-space-1);
  border: 0;
  border-radius: var(--pw-radius-sm);
  background: none;
  color: var(--pw-color-text-muted);
  font: inherit;
  cursor: pointer;
}

.pw-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-3);
  padding: var(--pw-space-3) var(--pw-space-5);
}

.pw-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pw-space-2);
  padding: 0 var(--pw-space-5) var(--pw-space-4);
}

/* A role row on Roller (R84): the whole row opens its permissions; the chevron in front of the name shows which. */
.pw-role-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  font-weight: 600;
}

.pw-role-permissions {
  margin: var(--pw-space-2) 0 0;
  padding-inline-start: var(--pw-space-5);
}

/* A permission in the role editor: the checkbox, then its scope and window when it has them. */
.pw-permission-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-1) 0;
}

.pw-permission-row .pw-check {
  flex: 1 1 14rem;
}

.pw-input-short {
  width: 7rem;
}

/* ---- Flyout (R49.5): from the right, over the page ---- */
.pw-flyout {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(36rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--pw-color-border);
  background: var(--pw-color-surface-raised);
  color: var(--pw-color-text);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-flyout--wide {
  width: min(60rem, 100vw);
}

.pw-flyout[open] {
  display: flex;
  flex-direction: column;
  animation: pw-flyout-in 160ms ease-out;
}

.pw-flyout::backdrop {
  background: var(--pw-color-backdrop);
}

@keyframes pw-flyout-in {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-flyout[open] {
    animation: none;
  }
}

.pw-flyout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pw-space-3);
  padding: var(--pw-space-5) var(--pw-space-5) var(--pw-space-3);
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-flyout-header h2 {
  margin: 0;
}

.pw-flyout-eyebrow {
  margin: 0 0 var(--pw-space-1);
  color: var(--pw-color-text-muted);
}

.pw-flyout-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--pw-space-3);
  padding: var(--pw-space-4) var(--pw-space-5);
  overflow-y: auto;
}

.pw-flyout-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pw-space-2);
  padding: var(--pw-space-3) var(--pw-space-5);
  border-top: 1px solid var(--pw-color-border);
}

.pw-subviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-4);
}

/* ---- Daily work (spec 10): "Varför nu", tasks, notes, chips ---- */

/* "Varför nu" has the status badge's shape and size, so the two read as one kind of label (round 4). */
.pw-why-now {
  display: inline-block;
  padding: 0 var(--pw-space-2);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-info-bg);
  color: var(--pw-color-info-text);
  font-size: var(--pw-font-size-xs);
  line-height: 1.5rem;
  white-space: nowrap;
  font-weight: var(--pw-font-weight-medium);
}

.pw-why-now--urgent {
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-why-now-detail {
  display: block;
  font-size: var(--pw-font-size-sm);
}

.pw-task-list,
.pw-note-list,
.pw-chip-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pw-space-2);
}

.pw-chip-list {
  display: flex;
  flex-wrap: wrap;
}

.pw-task {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-left: 4px solid var(--pw-color-info-text);
  border-radius: var(--pw-radius-md);
}

.pw-task--overdue {
  border-left-color: var(--pw-color-warning-text);
}

.pw-task--closed {
  border-left-color: var(--pw-color-border);
  color: var(--pw-color-text-muted);
}

/* A task card that opens its task when clicked anywhere (the task page, R80.5): the heading's link stretches over the card,
   and the buttons and the outcome form sit above it so they keep working. */
.pw-task--link {
  position: relative;
}

.pw-task--link:hover {
  background: var(--pw-color-hover);
}

.pw-task-title,
.pw-task-title:hover {
  color: var(--pw-color-text);
  font-size: var(--pw-font-size-lg);
  font-weight: var(--pw-font-weight-semibold);
  text-decoration: none;
}

.pw-task--link .pw-task-title::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.pw-task--link :is(.pw-row-actions, .pw-inline-form) {
  position: relative;
  z-index: 1;
}

.pw-task-due {
  font-size: var(--pw-font-size-sm);
  font-weight: var(--pw-font-weight-medium);
}

.pw-task-description {
  white-space: pre-wrap;
}

.pw-task-actions,
.pw-inline-form,
.pw-mention-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-note {
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface-raised);
}

.pw-note-header {
  display: flex;
  gap: var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

.pw-note-body {
  margin: var(--pw-space-2) 0 0;
  white-space: pre-wrap;
}

.pw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  padding: 0 var(--pw-space-2);
  border: 1px solid var(--pw-color-border);
  border-radius: 999px;
  font-size: var(--pw-font-size-sm);
}

.pw-chip button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.pw-form--boxed {
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  margin-bottom: var(--pw-space-3);
}

.pw-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--pw-space-3);
}

.pw-row-actions {
  white-space: nowrap;
}

/* The condition rows of a rule (lender rule sets, insurance conditions, risk classes): the table and its buttons. */
.pw-condition-editor {
  display: grid;
  gap: var(--pw-space-3);
}

.pw-condition-editor select {
  max-width: 100%;
}

/* A party's existing loans in the staff forms (R64): the table, the totals and the panel for one loan. */
.pw-loans-editor {
  display: grid;
  gap: var(--pw-space-4);
}

.pw-hours input {
  width: 8rem;
}

/* ---- The bell and its popover (spec 10 §6, UI-44) ---- */
.pw-bell-wrap {
  position: relative;
}

.pw-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--pw-button-height);
  height: var(--pw-button-height);
  padding: 0;
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-icon);
  cursor: pointer;
  font: inherit;
}

.pw-icon-button:hover,
.pw-icon-button[aria-expanded="true"] {
  background: var(--pw-color-hover-sunken);
  color: var(--pw-color-text);
}

.pw-bell-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 1.125rem;
  padding: 0 var(--pw-space-1);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-danger);
  color: var(--pw-color-on-primary);
  font-size: 0.6875rem;
  font-weight: var(--pw-font-weight-semibold);
  line-height: 1.125rem;
  text-align: center;
}

.pw-popover {
  position: absolute;
  top: calc(100% + var(--pw-space-1));
  right: 0;
  z-index: calc(var(--pw-z-overlay) + 1);
  width: min(26rem, 90vw);
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-2);
}

.pw-popover-footer {
  margin: var(--pw-space-2) 0 0;
  font-size: var(--pw-font-size-sm);
}

.pw-notification-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 24rem;
  overflow: auto;
}

.pw-notification button {
  display: grid;
  width: 100%;
  gap: var(--pw-space-1);
  padding: var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.pw-notification--unread button {
  font-weight: var(--pw-font-weight-medium);
}

.pw-notification button:hover {
  background: var(--pw-color-hover);
}

/* A colleague's message with a shared list (R61): their own words, quoted, at most three lines in the bell. */
.pw-notification-message {
  display: -webkit-box;
  overflow: hidden;
  padding-inline-start: var(--pw-space-2);
  border-inline-start: 2px solid var(--pw-color-border);
  font-weight: var(--pw-font-weight-regular);
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ---- Global search results (UI-23) ---- */
.pw-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pw-space-1);
}

.pw-search-hit {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-2);
  border-radius: var(--pw-radius-md);
  color: inherit;
}

.pw-search-hit:hover,
.pw-search-hit--active {
  background: var(--pw-color-hover);
  text-decoration: none;
}

/* The result marked with the arrow keys (R60.9): a bar at the start as well as the background. */
.pw-search-hit--active {
  box-shadow: inset 3px 0 0 var(--pw-color-primary);
}

/* ---- Conversation (spec 09 §6) and templates ---- */
.pw-columns--wide-first {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.pw-thread {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pw-space-3);
}

.pw-message {
  max-width: 85%;
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
}

.pw-message--out {
  justify-self: end;
  background: var(--pw-color-info-bg);
  border-color: transparent;
}

.pw-message--in {
  justify-self: start;
}

.pw-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

.pw-message-subject {
  font-weight: var(--pw-font-weight-medium);
}

.pw-message-body {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  overflow-wrap: anywhere; /* a long link in a message breaks instead of pushing past its column (R76.1) */
}

.pw-message-error {
  margin: var(--pw-space-2) 0 0;
  color: var(--pw-color-danger-text);
  font-size: var(--pw-font-size-sm);
}

.pw-template-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
}

/* The bar above a template text: channel tabs with the status beside them (Meddelandemallar, R85). */
.pw-template-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-3);
}

.pw-template-bar p {
  margin: 0;
}

.pw-template-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-1) var(--pw-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A text template's text in the list: one line, cut with an ellipsis (the whole text in the title). */
.pw-template-snippet {
  display: block;
  max-width: 32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An on/off switch: a checkbox with role="switch" that saves at once. */
.pw-switch {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--pw-color-border-control);
  border-radius: 999px;
  background: var(--pw-color-surface-sunken);
  cursor: pointer;
  appearance: none;
  transition: background-color 120ms ease;
}

.pw-switch::before {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--pw-color-surface);
  box-shadow: 0 0 0 1px var(--pw-color-border);
  content: "";
  transition: transform 120ms ease;
}

.pw-switch:checked {
  border-color: var(--pw-color-primary);
  background: var(--pw-color-primary);
}

.pw-switch:checked::before {
  transform: translateX(0.875rem);
}

.pw-switch:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 2px;
}

.pw-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.pw-preview {
  margin-top: var(--pw-space-3);
  padding: var(--pw-space-3);
  border: 1px dashed var(--pw-color-border);
  border-radius: var(--pw-radius-md);
}

/* Statistics (spec 13, R13.8): KPI cards and the self-built bar chart. */
.pw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--pw-space-3);
}

.pw-kpi {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
}

.pw-kpi-label {
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-kpi-value {
  font-size: var(--pw-font-size-2xl);
  font-weight: var(--pw-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pw-kpi-detail {
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-chart {
  margin: 0;
  display: grid;
  gap: var(--pw-space-2);
}

.pw-chart-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: var(--pw-font-weight-semibold);
}

.pw-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10rem;
  margin: 0;
  padding: 0 0 var(--pw-space-1);
  list-style: none;
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-bar {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: 2px;
}

.pw-bar-fill {
  display: block;
  width: 100%;
  min-height: 1px;
  background: var(--pw-color-primary);
  border-radius: var(--pw-radius-sm) var(--pw-radius-sm) 0 0;
}

.pw-bar:hover .pw-bar-fill {
  background: var(--pw-color-primary-hover);
}

.pw-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-chart-caption--switch-only {
  justify-content: flex-end;
}

/* The line chart (R63): an SVG stretched to the plot, the value axis on the right in HTML so its text never scales. */
.pw-line-chart-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pw-space-2);
}

.pw-line-chart-plot {
  position: relative;
  height: 9rem;
  border-radius: var(--pw-radius-sm);
}

.pw-line-chart-plot:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 4px;
}

.pw-line-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pw-line-chart-grid {
  stroke: var(--pw-color-border);
  stroke-width: 1;
}

.pw-line-chart-current,
.pw-line-chart-previous {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pw-line-chart-current {
  stroke: var(--pw-color-chart-current);
}

.pw-line-chart-previous {
  stroke: var(--pw-color-chart-previous);
  stroke-dasharray: 4 4;
}

.pw-line-chart-guide {
  stroke: var(--pw-color-border-strong);
  stroke-width: 1;
}

.pw-line-chart-dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-chart-current);
  box-shadow: 0 0 0 2px var(--pw-color-surface);
  pointer-events: none;
}

.pw-line-chart-dot--previous {
  background: var(--pw-color-chart-previous);
}

.pw-line-chart-tooltip {
  position: absolute;
  top: 0;
  z-index: 1;
  display: grid;
  gap: var(--pw-space-1);
  margin-left: var(--pw-space-3);
  padding: var(--pw-space-2) var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface-raised);
  box-shadow: var(--pw-shadow-overlay);
  font-size: var(--pw-font-size-sm);
  white-space: nowrap;
  pointer-events: none;
}

.pw-line-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-line-chart-tooltip--left {
  translate: calc(-100% - 2 * var(--pw-space-3)) 0;
}

.pw-line-chart-hits {
  position: absolute;
  inset: 0;
  display: flex;
}

.pw-line-chart-hits > span {
  flex: 1 1 0;
}

.pw-line-chart-ticks {
  position: relative;
  min-width: 3rem;
  font-size: var(--pw-font-size-xs);
  color: var(--pw-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pw-line-chart-tick {
  position: absolute;
  right: 0;
  translate: 0 -50%;
  white-space: nowrap;
}

.pw-line-chart-tick--top {
  top: 0;
}

.pw-line-chart-tick--middle {
  top: 50%;
}

.pw-line-chart-tick--bottom {
  top: 100%;
}

.pw-line-chart-axis {
  margin-right: calc(3rem + var(--pw-space-2));
}

.pw-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-1) var(--pw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-chart-legend > li {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-chart-legend--rows {
  display: grid;
  gap: 0;
  color: var(--pw-color-text);
}

.pw-chart-legend-row {
  padding: var(--pw-space-2) 0;
}

.pw-chart-legend-row + .pw-chart-legend-row {
  border-top: 1px solid var(--pw-color-border);
}

.pw-chart-legend-label {
  flex: 1 1 auto;
}

.pw-chart-swatch {
  flex: none;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: var(--pw-color-chart-current);
}

.pw-chart-swatch--previous {
  height: 0;
  border-top: 2px dashed var(--pw-color-chart-previous);
  border-radius: 0;
  background: none;
}

.pw-chart-color-1 { background: var(--pw-color-chart-1); }
.pw-chart-color-2 { background: var(--pw-color-chart-2); }
.pw-chart-color-3 { background: var(--pw-color-chart-3); }
.pw-chart-color-4 { background: var(--pw-color-chart-4); }
.pw-chart-color-5 { background: var(--pw-color-chart-5); }
.pw-chart-color-6 { background: var(--pw-color-chart-6); }

/* The stacked bar (R63): one rounded track, a thin gap between the parts. */
.pw-stacked-bar-track {
  display: flex;
  gap: 2px;
  height: 0.75rem;
  overflow: hidden;
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-surface-sunken);
}

.pw-stacked-bar-segment {
  display: block;
  min-width: 2px;
}

/* Stat cards (R63) in a grid: three across on a wide screen, two in the middle, one on a phone. */
.pw-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pw-space-4);
}

@media (width <= 75rem) {
  .pw-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 40rem) {
  .pw-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pw-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
  min-width: 0;
  padding: var(--pw-space-5);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface);
}

.pw-stat-card--wide {
  grid-column: span 2;
}

@media (width <= 40rem) {
  .pw-stat-card--wide {
    grid-column: auto;
  }
}

.pw-stat-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pw-space-3);
}

.pw-stat-card-title {
  margin: 0;
  font-size: var(--pw-font-size-md);
  font-weight: var(--pw-font-weight-semibold);
}

.pw-stat-card-link {
  font-size: var(--pw-font-size-sm);
  white-space: nowrap;
}

.pw-stat-card-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pw-space-2);
  margin: 0;
}

.pw-stat-card-value {
  font-size: var(--pw-font-size-2xl);
  font-weight: var(--pw-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pw-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--pw-font-size-sm);
  font-weight: var(--pw-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.pw-stat-change--up {
  color: var(--pw-color-success-text);
}

.pw-stat-change--down {
  color: var(--pw-color-danger-text);
}

.pw-stat-change--flat {
  color: var(--pw-color-text-muted);
}

.pw-stat-card-comparison,
.pw-stat-card-note {
  margin: 0;
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-stat-card-note {
  margin-top: auto;
  padding-top: var(--pw-space-2);
}

/* Equal columns (R63): the start page's lists side by side, however many the user may see, their headings level. */
.pw-columns--even {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}

.pw-columns--even > .pw-section {
  margin-bottom: 0;
}

.pw-columns--even + .pw-section {
  margin-top: var(--pw-space-8);
}

.pw-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pw-color-link);
  font: inherit;
  font-size: var(--pw-font-size-sm);
  cursor: pointer;
  text-decoration: underline;
}

.pw-funnel {
  display: grid;
  gap: var(--pw-space-2);
}

.pw-funnel-step {
  display: grid;
  grid-template-columns: 12rem 1fr 5rem;
  align-items: center;
  gap: var(--pw-space-3);
}

.pw-funnel-track {
  height: 1rem;
  background: var(--pw-color-hover);
  border-radius: var(--pw-radius-sm);
  overflow: hidden;
}

.pw-funnel-fill {
  display: block;
  height: 100%;
  background: var(--pw-color-primary);
}

.pw-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Free text (provider information, spec 15 §3). */
.pw-textarea {
  width: 100%;
  font: inherit;
  padding: var(--pw-space-2);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-sm);
  background: var(--pw-color-surface);
  color: var(--pw-color-text);
}

.pw-prose {
  max-width: 70ch;
}

.pw-prose p {
  margin: 0 0 var(--pw-space-3);
}

/* Tags (spec 15 §1): a chip with the name; the colour only accents. */

/* A tag (spec 15 §1): squarer than a status badge, with a border and its colour's tint, so the two never look alike. */
.pw-tag {
  display: inline-block;
  padding: 0 var(--pw-space-2);
  border-radius: var(--pw-radius-sm);
  border: 1px solid var(--pw-color-border-strong);
  font-size: var(--pw-font-size-xs);
  font-weight: var(--pw-font-weight-medium);
  line-height: 1.375rem;
  background: var(--pw-color-hover);
  white-space: nowrap;
}

.pw-tag--blue {
  border-color: var(--pw-color-info-text);
  background: var(--pw-color-info-bg);
  color: var(--pw-color-info-text);
}

.pw-tag--green {
  border-color: var(--pw-color-success-text);
  background: var(--pw-color-success-bg);
  color: var(--pw-color-success-text);
}

.pw-tag--yellow {
  border-color: var(--pw-color-warning-text);
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

.pw-tag--red {
  border-color: var(--pw-color-danger-text);
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

.pw-tag--purple {
  border-color: var(--pw-color-purple-text);
  background: var(--pw-color-purple-bg);
  color: var(--pw-color-purple-text);
}

.pw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-1);
}

.pw-filters-panel > summary {
  cursor: pointer;
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
  margin: var(--pw-space-2) 0;
}

/* ---- Component gallery (UIF-6): each component in the light and the dark theme side by side ---- */
.pw-gallery-section {
  display: grid;
  gap: var(--pw-space-3);
  margin-block: var(--pw-space-8);
}

.pw-gallery-section > h2 {
  margin: 0;
  font-size: var(--pw-font-size-lg);
}

.pw-gallery-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--pw-space-4);
}

.pw-gallery-panel {
  display: grid;
  gap: var(--pw-space-3);
  align-content: start;
  min-width: 0;
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-bg);
  color: var(--pw-color-text);
}

/* The lender cards fold by the width of the application tab they live in (.pw-detail-main); their panel stands in for
   that tab here, so they show as in a tab of the panel's width instead of running past its edge. */
.pw-gallery-panel:has(> .pw-lender-card) {
  container: pw-tab / inline-size;
}

.pw-gallery-panel--light {
  color-scheme: light;
}

.pw-gallery-panel--dark {
  color-scheme: dark;
}

.pw-gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;
}

/* ---- Masked values (UIF-48) ---- */
.pw-masked {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;

  /* On the line's top, not its baseline, so the row is exactly as high as its text, masked or shown (R75.3). */
  vertical-align: top;
}

.pw-masked .pw-mono {
  line-height: 1.25rem;
}

/* The Visa button does not make the row taller than its text, so the row keeps its height when the value is shown (R75.3). */
.pw-masked > .pw-button {
  margin-block: calc((1.25rem - var(--pw-button-height)) / 2); /* the 20px text line (R72.13) */
}

/* The 28px "…" button takes no more height than a line of text, so a row with it is as high as one without. */
.pw-table-actions .pw-icon-button {
  margin-block: calc((var(--pw-control-line-height) - var(--pw-button-height)) / 2);
}

/* An icon button with a frame, like a button (R72.6): edit actions in a section's header. */
.pw-icon-button--outlined,
.pw-page-actions .pw-icon-button,
.pw-section-header .pw-icon-button {
  border: 1px solid var(--pw-color-border-button);
  color: var(--pw-color-icon);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-surface);
}

/* The framed header icon buttons keep the hover of every icon button (R84.10). */
.pw-page-actions .pw-icon-button:hover,
.pw-page-actions .pw-icon-button[aria-expanded="true"],
.pw-section-header .pw-icon-button:hover,
.pw-section-header .pw-icon-button[aria-expanded="true"] {
  background: var(--pw-color-hover-sunken);
}

.pw-icon-button--small {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---- Skeletons (UIF-45): placeholders shaped like the content ---- */
.pw-skeleton {
  display: grid;
  gap: var(--pw-space-3);
  padding-block: var(--pw-space-2);
}

.pw-skeleton-line {
  display: block;
  height: 0.75rem;
  border-radius: var(--pw-radius-sm);
  background: linear-gradient(90deg, var(--pw-color-border) 0%, var(--pw-color-hover-sunken) 50%, var(--pw-color-border) 100%);
  background-size: 200% 100%;
  animation: pw-skeleton-shimmer 1.4s ease-in-out infinite;
}

.pw-skeleton-line--title {
  width: 40%;
  height: 1.5rem;
}

.pw-skeleton-line--short {
  width: 60%;
}

.pw-skeleton-line--term {
  width: 8rem;
}

.pw-skeleton-row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--pw-space-4);
  padding-block: var(--pw-space-2);
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-skeleton-row--head .pw-skeleton-line {
  width: 50%;
  height: 0.625rem;
}

.pw-skeleton-pair {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--pw-space-6);
}

@keyframes pw-skeleton-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-skeleton-line {
    animation: none;
  }
}

/* ---- Filter chips (UIF-48) ---- */
.pw-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;
  margin-bottom: var(--pw-space-3);
}

/* A filter pill (R60.3, as in Stripe): dashed while unused, solid with the value in the primary colour when set. */
.pw-filter-pill {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  border: 1px dashed var(--pw-color-border-dashed);
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-surface);
  font-size: var(--pw-font-size-xs);
}

.pw-filter-pill--active {
  border-style: solid;
  border-color: var(--pw-color-border-control);
}

.pw-filter-pill:hover {
  border-color: var(--pw-color-primary);
}

.pw-filter-pill-trigger,
.pw-filter-pill-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  height: 100%;
  padding: 0 var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-full);
  background: none;
  color: var(--pw-color-text-muted);
  font: inherit;
  font-weight: var(--pw-font-weight-regular);
  cursor: pointer;
}

.pw-filter-pill--active .pw-filter-pill-trigger {
  color: var(--pw-color-text);
}

.pw-filter-pill-remove {
  padding-inline-end: 0;
}

.pw-filter-pill-trigger:focus-visible,
.pw-filter-pill-remove:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 1px;
}

/* A menu shown as a pill at the end of the filters, e.g. *Mina filter* (R60.1). */
.pw-filter-pill--menu {
  gap: var(--pw-space-1);
  padding: 0 var(--pw-space-2);
  color: var(--pw-color-text-muted);
  font: inherit;
  font-size: var(--pw-font-size-xs);
  font-weight: var(--pw-font-weight-regular);
  cursor: pointer;
}

.pw-filter-pill--menu:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 1px;
}

/* The user's saved filters in the *Mina filter* flyout: the name and a bin per row. */
.pw-saved-filters li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-2);
}

/* The row menu's column (R60.10): as narrow as the button. */
.pw-table-actions {
  width: 1%;
  text-align: end;
  white-space: nowrap;
}

.pw-filter-pill-value {
  padding-inline-start: var(--pw-space-2);
  border-inline-start: 1px solid var(--pw-color-border);
  color: var(--pw-color-link);
}

.pw-filter-panel {
  min-width: 16rem;
  padding: var(--pw-space-3);
}

.pw-filter-panel-form {
  display: grid;
  gap: var(--pw-space-3);
}

.pw-filter-panel-title {
  margin: 0;
  font-weight: var(--pw-font-weight-semibold);
}

.pw-filter-panel-row {
  display: flex;
  gap: var(--pw-space-2);
  align-items: center;
}

.pw-filter-panel-checks {
  display: grid;
  gap: var(--pw-space-2);
  max-height: 16rem;
  overflow-y: auto;
}

.pw-filter-panel-checks label {
  display: flex;
  gap: var(--pw-space-2);
  align-items: center;
}

.pw-filter-bar-clear {
  margin-inline-start: var(--pw-space-1);
}

.pw-filter-bar-actions {
  display: flex;
  gap: var(--pw-space-2);
  margin-inline-start: auto;
}

/* ---- DataTable on a narrow screen: each row as label and value (UIF-30, R57.8) ---- */
@media (width <= 48rem) {
  .pw-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pw-table--stack,
  .pw-table--stack tbody,
  .pw-table--stack tr,
  .pw-table--stack td {
    display: block;
  }

  .pw-table--stack tr {
    padding-block: var(--pw-space-2);
    border-bottom: 1px solid var(--pw-color-border);
  }

  .pw-table--stack td {
    display: grid;
    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
    gap: var(--pw-space-3);
    padding: var(--pw-space-1) 0;
    border-bottom: 0;
  }

  .pw-table--stack td.pw-num {
    text-align: left;
  }

  .pw-table--stack td::before {
    content: attr(data-label);
    color: var(--pw-color-text-muted);
    font-size: var(--pw-font-size-sm);
  }
}

/* ---- Toasts (UIF-43, R57.5): bottom right, bottom centre on a phone ---- */
.pw-toasts {
  position: fixed;
  right: var(--pw-space-4);
  bottom: var(--pw-space-4);
  z-index: calc(var(--pw-z-overlay) + 2);
  display: grid;
  gap: var(--pw-space-2);
  max-width: min(24rem, calc(100vw - 2 * var(--pw-space-4)));
}

.pw-toast {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-2) var(--pw-space-2) var(--pw-space-2) var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
  color: var(--pw-color-text);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-toast--success .pw-toast-icon {
  color: var(--pw-color-success-text);
}

.pw-toast-message {
  flex-grow: 1;
}

@media (width <= 40rem) {
  .pw-toasts {
    right: 50%;
    transform: translateX(50%);
  }
}

/* ---- Error bar (UIF-49) and the live-connection marker (UIF-86) ---- */
.pw-error-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  align-items: center;
  padding: var(--pw-space-3) var(--pw-space-4);
  border: 1px solid var(--pw-color-danger);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

#blazor-error-ui {
  display: none;
}

.pw-error-bar--fixed {
  position: fixed;
  right: var(--pw-space-4);
  bottom: var(--pw-space-4);
  left: var(--pw-space-4);
  z-index: calc(var(--pw-z-overlay) + 3);
}

.pw-connection {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  align-self: center;
  color: var(--pw-color-warning-text);
  font-size: var(--pw-font-size-sm);
  white-space: nowrap;
}

.pw-banner--info {
  display: flex;
  background: var(--pw-color-info-bg);
  color: var(--pw-color-info-text);
  gap: var(--pw-space-3);
  align-items: center;
  justify-content: space-between;
}

/* ---- Open tabs on a narrow screen: one menu instead of the strip (R57.8) ---- */
.pw-open-items-menu {
  display: none;
  align-self: center;
}

@media (width <= 48rem) {
  .pw-open-items .pw-open-item:not(.pw-open-item--list) {
    display: none;
  }

  .pw-open-items-menu {
    display: block;
  }
}

/* ---- Keyboard shortcut overview (UIF-47) ---- */
.pw-shortcuts-area {
  margin: var(--pw-space-4) 0 var(--pw-space-2);
  font-size: var(--pw-font-size-md);
}

.pw-shortcuts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pw-space-2) var(--pw-space-6);
  margin: 0;
}

.pw-shortcuts dd {
  margin: 0;
}

.pw-shortcuts kbd {
  display: inline-block;
  min-width: 1.5rem;
  margin-right: var(--pw-space-1);
  padding: 0 var(--pw-space-1);
  border: 1px solid var(--pw-color-border-strong);
  border-radius: var(--pw-radius-sm);
  font: inherit;
  font-size: var(--pw-font-size-sm);
  text-align: center;
}

/* ---- Workbench (R62): a bar along the bottom of the window that opens upwards into a panel ---- */
.pw-shell:has(> .pw-workbench) {
  padding-bottom: var(--pw-workbench-bar-height);
}

/* The wrapper holds only fixed elements, so it takes no place in the shell's grid. */
.pw-workbench:not(.pw-workbench--inline) {
  display: contents;
}

@media (width > 64rem) {
  .pw-shell:has(> .pw-workbench) .pw-sidebar {
    height: calc(100vh - var(--pw-workbench-bar-height));
  }
}

.pw-shell:has(> .pw-workbench) .pw-toasts {
  bottom: calc(var(--pw-workbench-bar-height) + var(--pw-space-4));
}

.pw-workbench-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--pw-z-workbench);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  height: var(--pw-workbench-bar-height);
  padding: 0 var(--pw-space-3);
  background: var(--pw-sidebar-bg);
  box-shadow: inset 0 1px 0 var(--pw-color-border);
}

.pw-workbench-label {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  height: calc(var(--pw-workbench-bar-height) - var(--pw-space-2));
  padding: 0 var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--pw-font-size-sm);
}

.pw-workbench-label:hover {
  background: var(--pw-color-hover-sunken);
}

.pw-workbench-tools {
  display: flex;
  align-items: center;
  gap: var(--pw-space-1);
}

.pw-workbench-toggle {
  margin-left: var(--pw-space-3);
}

.pw-workbench-tool[aria-pressed="true"] {
  background: var(--pw-color-hover-sunken);
  color: var(--pw-color-text);
}

.pw-workbench-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 1.125rem;
  padding: 0 var(--pw-space-1);
  border-radius: var(--pw-radius-full);
  font-size: var(--pw-font-size-xs);
  font-weight: var(--pw-font-weight-semibold);
  line-height: 1.125rem;
  text-align: center;
}

.pw-workbench-count--danger {
  background: var(--pw-color-danger-bg);
  color: var(--pw-color-danger-text);
}

.pw-workbench-count--warning {
  background: var(--pw-color-warning-bg);
  color: var(--pw-color-warning-text);
}

/* The panel lies over the bottom of the page, which keeps its scroll; the bar stays visible under it. */
.pw-workbench-panel {
  position: fixed;
  inset: auto 0 var(--pw-workbench-bar-height);
  z-index: var(--pw-z-workbench);
  display: flex;
  flex-direction: column;
  height: var(--pw-workbench-height);
  max-height: calc(100dvh - var(--pw-topbar-height) - var(--pw-workbench-bar-height));
  background: var(--pw-color-surface);
  border-radius: var(--pw-radius-lg) var(--pw-radius-lg) 0 0;
  box-shadow: var(--pw-shadow-overlay), inset 0 -1px 0 var(--pw-color-border);
}

/* The drag handle: a strip along the top edge with a short grip in the middle. */
.pw-workbench-handle {
  position: relative;
  flex-shrink: 0;
  height: var(--pw-space-3);
  cursor: ns-resize;
  touch-action: none;
}

.pw-workbench-handle::after {
  content: "";
  position: absolute;
  top: var(--pw-space-1);
  left: 50%;
  width: 3rem;
  height: 3px;
  border-radius: var(--pw-radius-full);
  background: var(--pw-color-border);
  transform: translateX(-50%);
}

.pw-workbench-handle:hover::after,
.pw-workbench-handle:focus-visible::after {
  background: var(--pw-color-primary);
}

.pw-workbench-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pw-space-3);
  padding: 0 var(--pw-space-4);
  box-shadow: inset 0 -1px 0 var(--pw-color-border);
}

.pw-workbench-title {
  display: block;
  font-weight: var(--pw-font-weight-semibold);
}

.pw-workbench-tabs {
  display: flex;
  gap: var(--pw-space-1);
  overflow: auto hidden;
  scrollbar-width: thin;
}

.pw-workbench-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-2) var(--pw-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--pw-color-text-muted);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.pw-workbench-tab:first-child {
  padding-left: 0;
}

.pw-workbench-tab:hover {
  color: var(--pw-color-text);
}

.pw-workbench-tab[aria-selected="true"] {
  border-bottom-color: var(--pw-color-primary);
  color: var(--pw-color-primary);
  font-weight: var(--pw-font-weight-medium);
}

.pw-workbench-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pw-space-4);
}

/* In place (the gallery): the panel above the bar, both in the flow of the page. */
.pw-workbench--inline {
  margin-bottom: var(--pw-space-4);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  overflow: hidden;
}

.pw-workbench--inline .pw-workbench-bar,
.pw-workbench--inline .pw-workbench-panel {
  position: static;
  box-shadow: none;
}

.pw-workbench--inline .pw-workbench-bar {
  box-shadow: inset 0 1px 0 var(--pw-color-border);
}

/* On a narrow screen the panel fills the window under the top bar and is not resized. */
@media (width <= 48rem) {
  .pw-workbench-panel {
    top: var(--pw-topbar-height);
    height: auto;
    border-radius: 0;
  }

  .pw-workbench-handle {
    display: none;
  }

  .pw-workbench-header {
    padding-top: var(--pw-space-2);
  }

  .pw-workbench--inline .pw-workbench-panel {
    height: var(--pw-workbench-height);
  }
}

/* ---- The developer footer's tabs (R62): the message simulator and the session's events ---- */
.pw-simulator,
.pw-dev-events {
  display: grid;
  gap: var(--pw-space-3);
}

.pw-simulator-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pw-space-3);
}

.pw-simulator-toolbar p {
  margin: 0;
  max-width: 60rem;
  font-size: var(--pw-font-size-sm);
}

.pw-simulator-columns {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
  gap: var(--pw-space-4);
  align-items: start;
}

.pw-simulator-list {
  border-right: 1px solid var(--pw-color-border);
  padding-right: var(--pw-space-3);
}

.pw-simulator-conversation {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--pw-space-2);
  border: 1px solid transparent;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--pw-font-size-sm);
  text-align: left;
}

.pw-simulator-conversation:hover {
  background: var(--pw-color-hover-sunken);
}

.pw-simulator-conversation[aria-current="true"] {
  border-color: var(--pw-color-primary);
}

.pw-simulator-customer {
  font-weight: var(--pw-font-weight-medium);
}

.pw-simulator-heading {
  margin: 0 0 var(--pw-space-3);
  font-size: var(--pw-font-size-md);
}

.pw-simulator-thread .pw-form {
  margin-top: var(--pw-space-4);
}

.pw-dev-event-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-dev-event {
  box-shadow: inset 0 -1px 0 var(--pw-color-border);
}

.pw-dev-event summary {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  padding: var(--pw-space-2) 0;
  cursor: pointer;
  font-size: var(--pw-font-size-sm);
}

.pw-dev-event--error .pw-dev-event-icon {
  color: var(--pw-color-danger-text);
}

.pw-dev-event--warning .pw-dev-event-icon {
  color: var(--pw-color-warning-text);
}

.pw-dev-event--info .pw-dev-event-icon {
  color: var(--pw-color-text-muted);
}

.pw-dev-event-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.pw-dev-event-title {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.pw-dev-event-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--pw-space-1) var(--pw-space-4);
  margin: 0;
  padding: 0 0 var(--pw-space-3) calc(var(--pw-icon-size) + var(--pw-space-3));
  font-size: var(--pw-font-size-sm);
}

.pw-dev-event-details dt {
  color: var(--pw-color-text-muted);
}

.pw-dev-event-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pw-dev-event-trace {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

@media (width <= 48rem) {
  .pw-simulator-columns {
    grid-template-columns: 1fr;
  }

  .pw-simulator-list {
    border-right: 0;
    padding-right: 0;
  }
}

/* The inspector in the developer footer (R77): what is inspected and the auto-inspect switch on the toolbar, the filters
   above the list, each row a status badge and the call, and the bodies with a heading row over the code block. */
.pw-inspector-inspecting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2) var(--pw-space-4);
}

.pw-inspector-target {
  font-weight: var(--pw-font-weight-medium);
}

.pw-inspector-auto {
  gap: var(--pw-space-2);
  font-size: var(--pw-font-size-sm);
}

.pw-inspector-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-3);
}

.pw-inspector-filters select {
  width: auto;
}

.pw-inspector-row-head {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  min-width: 0;
}

.pw-inspector-call {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* One column no wider than the detail's own: a long id or body line wraps or scrolls inside it instead of pushing the
   copy buttons past the panel's edge. */
.pw-inspector-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-3);
  min-width: 0;
}

.pw-inspector-note {
  margin: 0;
  font-size: var(--pw-font-size-sm);
}

.pw-inspector-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-2);
}

.pw-inspector-body-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2) var(--pw-space-3);
}

.pw-inspector-body-head h4 {
  margin: 0;
  font-size: var(--pw-font-size-md);
}

.pw-inspector-body-head .pw-button {
  margin-left: auto;
}

/* In the workbench the inspector fills the panel under its toolbar, and the list and the chosen message scroll each on
   their own (issue #52), so the list stays in view while a body is read. Stacked on a narrow screen, the panel scrolls
   as one. */
@media (width > 48rem) {
  /* Only with the columns: the empty state, an error and the loading skeleton keep the body's own scroll. */
  .pw-workbench-body:has(> .pw-inspector > .pw-simulator-columns) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pw-workbench-body > .pw-inspector {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .pw-workbench-body > .pw-inspector > .pw-simulator-columns {
    min-height: 0;
    align-items: stretch;
  }

  .pw-workbench-body > .pw-inspector .pw-simulator-list,
  .pw-workbench-body > .pw-inspector .pw-inspector-detail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Room for the rows' and buttons' focus rings, which the scrolling column would otherwise clip. */
  .pw-workbench-body > .pw-inspector .pw-simulator-list {
    padding-block: var(--pw-space-1);
    padding-left: var(--pw-space-1);
  }

  /* Rows sized to their content, so the column scrolls instead of squeezing the bodies to fit. */
  .pw-workbench-body > .pw-inspector .pw-inspector-detail {
    grid-auto-rows: max-content;
    align-content: start;
    padding: var(--pw-space-1);
  }

  /* A body shows in full: the column is the one scroll, not a scroll inside a scroll. */
  .pw-workbench-body > .pw-inspector .pw-inspector-body .pw-code-block {
    max-height: none;
  }
}

/* The tenant menu's *Lämna sandlådan* (as in Stripe): an outlined, centred button-like item above the settings. */
.pw-menu-item.pw-menu-item--exit {
  justify-content: center;
  margin-block: var(--pw-space-1);
  border: 1px solid var(--pw-color-border-strong);
  font-weight: var(--pw-font-weight-medium);
}

.pw-menu-item--exit .pw-menu-item-text {
  flex-grow: 0;
  text-align: center;
}

/* A checkable menu item's box (MenuItem Checked). */
.pw-menu-check {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--pw-color-border-control);
  border-radius: var(--pw-radius-sm);
}

.pw-menu-check--on {
  border-color: var(--pw-color-primary);
  background: var(--pw-color-primary);
  color: var(--pw-color-on-primary);
}

.pw-menu-check-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* The search field at the top of a long submenu (MenuSearch). */
.pw-menu-search {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-1);
  padding: 0 var(--pw-space-2);
  border-bottom: 1px solid var(--pw-color-border);
  color: var(--pw-color-text-muted);
}

.pw-menu-search .pw-menu-search-input {
  flex-grow: 1;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pw-color-text);
  font: inherit;
}

.pw-menu-search .pw-menu-search-input:focus {
  outline: none;
}

.pw-menu-search:focus-within {
  border-bottom: 2px solid var(--pw-color-focus);
}

/* Column widths (round 4): a drag handle at the right edge of each heading; the widths stay when paging and are
   remembered in the browser (prismwise.columns). The sticky heading cell is the handle's positioning box. */
.pw-col-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: var(--pw-space-2);
  cursor: col-resize;
  touch-action: none;
}

.pw-col-resize::after {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 50%;
  width: 1px;
  background: var(--pw-color-border-strong);
  content: "";
}

.pw-col-resize:hover::after,
.pw-col-resize:focus-visible::after {
  width: 2px;
  background: var(--pw-color-primary);
}

.pw-col-resize:focus-visible {
  outline: none;
}

.pw-table--fixed thead th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-table--fixed tbody td {
  overflow-wrap: anywhere;
}

@media (width <= 48rem) {
  .pw-col-resize {
    display: none;
  }
}

/* ---- Amounts with a unit and loan rows (R64, R65): shared by the public flow and the staff app ---- */

/* An amount or a number with its unit after it, like "150 000 kr" and "10 år". */
.pw-money,
.pw-unit-input {
  display: flex;
  align-items: stretch;
  max-width: 11rem;
}

.pw-money input,
.pw-unit-input input {
  flex: 1;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  text-align: end;
}

.pw-money-unit {
  display: flex;
  align-items: center;
  padding-inline: var(--pw-space-3);
  background: var(--pw-color-surface-sunken);
  border: 1px solid var(--pw-color-border);
  border-inline-start: 0;
  border-start-end-radius: var(--pw-radius-md);
  border-end-end-radius: var(--pw-radius-md);
  color: var(--pw-color-text-muted);
}

/* Loan rows (the public flow's Dina lån, the staff app's LoanRowsEditor): one row per loan on a wide container, each field
   labelled when a row wraps. */
.pw-loans {
  container-type: inline-size;
}

.pw-loan-rows {
  display: grid;
  gap: var(--pw-space-3);
}

.pw-loan-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-2);
  padding: var(--pw-space-3);
  background: var(--pw-color-surface);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
}

.pw-loan-row--head {
  display: none;
}

.pw-loan-cell {
  display: grid;
  gap: var(--pw-space-1);
  align-content: start;
  min-width: 0;
}

.pw-loan-cell > label:not(.pw-check) {
  font-size: var(--pw-font-size-sm);
  color: var(--pw-color-text-muted);
}

.pw-loan-cell input,
.pw-loan-cell select {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.pw-loan-cell .pw-money {
  max-width: none;
}

.pw-loan-cell .pw-money-unit {
  padding-inline: var(--pw-space-2);
}

.pw-loan-row[data-blank] [data-loan-remove] {
  visibility: hidden;
}

.pw-loan-tick,
.pw-loan-remove {
  align-self: center;
}

.pw-loan-bank:not(:has(option[value="other"]:checked)) .pw-loan-other-bank {
  display: none;
}

.pw-loan-bank > label.pw-loan-other-bank {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pw-loan-totals {
  margin: 0;
}

@container (width >= 46rem) {
  .pw-loan-row {
    grid-template-columns: minmax(6rem, 1.1fr) minmax(6.5rem, 1.2fr) minmax(8.5rem, 1.2fr) 4rem 3.25rem minmax(7.5rem, 1fr) 3.5rem 2.5rem 2.25rem;
    align-items: start;
    padding: var(--pw-space-2) var(--pw-space-3);
  }

  .pw-loan-row--head {
    display: grid;
    padding-block: 0;
    background: none;
    border: 0;
    font-size: var(--pw-font-size-sm);
    color: var(--pw-color-text-muted);
  }

  .pw-loan-cell > label:not(.pw-check) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pw-loan-tick {
    justify-self: center;
  }

  .pw-loan-check-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* An input with a button beside it, e.g. the test-person picker (R52.4, R66). */
.pw-input-row {
  display: flex;
  gap: var(--pw-space-2);
  align-items: stretch;
}

.pw-input-row > input {
  flex: 1;
  min-width: 0;
}

/* The staff app's test-person picker (R66): the bell's popover, wide enough for the table, under the button. */
.pw-test-person-picker {
  position: relative;
}

.pw-test-person-popover {
  right: auto;
  left: 0;
  width: min(44rem, calc(100vw - 2 * var(--pw-space-4)));
  max-height: 70vh;
  overflow: auto;
}

.pw-test-person-popover--end {
  right: 0;
  left: auto;
}

.pw-test-person-table {
  overflow-x: auto;
}

/* ---- Focus on form fields (UIF-94) ----
   Focus is always visible for keyboard users (WCAG 2.4.7) but hugs the field: the border takes the focus colour with a thin
   ring, instead of the general outline two pixels outside. A field with something attached (a unit such as "kr", a button)
   sits in a pw-input-group, which gets one ring around the whole group. Checkboxes, radios and sliders keep the outline. */
input:not([type="checkbox"], [type="radio"], [type="range"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--pw-color-focus);
  box-shadow: 0 0 0 1px var(--pw-color-focus);
}

.pw-input-group input:focus-visible {
  border-color: var(--pw-color-border);
  box-shadow: none;
}

.pw-input-group:focus-within {
  border-radius: var(--pw-radius-md);
  box-shadow: 0 0 0 2px var(--pw-color-focus);
}

/* The two party headers stay the same height whether or not one of them carries a small button (Byt sökande och
   medsökande), so the headings and their lines keep lining up when the co-applicant is ticked. */
.pw-party-columns .pw-section-header h2 {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
}

/* A section heading is as high as a button in a header, so sections side by side line up whether or not they have
   actions (R84.11). */
.pw-detail--rail-static .pw-section-header h2 {
  min-height: var(--pw-button-height);
  line-height: var(--pw-button-height);
}

/* ---- Mention field (R70.7): a text area whose @ list opens at the caret ---- */
.pw-mention {
  position: relative;
}

.pw-mention textarea {
  width: 100%;
  padding-right: calc(var(--pw-button-height) + var(--pw-space-2));
}

/* A field that fills the rest of a flyout (R76.2), e.g. a note: its text area reaches the flyout's bottom, so a long note
   rarely scrolls inside the field. */
.pw-flyout-body:has(> .pw-field--fill) {
  display: flex;
  flex-direction: column;
}

.pw-field--fill {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 12rem;
}

.pw-field--fill > .pw-mention {
  display: flex;
  flex: 1;
}

.pw-field--fill textarea {
  flex: 1;
  resize: none;
}

.pw-mention-add {
  position: absolute;
  top: var(--pw-space-1);
  right: var(--pw-space-1);
}

.pw-mention-list {
  position: absolute;
  z-index: var(--pw-z-sticky);
  display: grid;
  gap: 2px;
  min-width: 14rem;
  max-width: 20rem;
  max-height: 16rem;
  margin: 0;
  padding: var(--pw-space-2);
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-color-surface-raised);
  box-shadow: var(--pw-shadow-overlay);
}

.pw-mention-list--above {
  transform: translateY(-100%);
}

.pw-mention-option {
  padding: var(--pw-space-2);
  border-radius: var(--pw-radius-md);
  cursor: pointer;
}

.pw-mention-option:hover,
.pw-mention-option[aria-selected="true"] {
  background: var(--pw-color-hover);
}

.pw-mention-option[aria-selected="true"] {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: -2px;
}

.pw-mention-empty {
  padding: var(--pw-space-2);
  color: var(--pw-color-text-muted);
}

/* A table in a part of a tab that turns into label and value rows when its own column gets narrow (R70.5), such as the
   existing loans in the two-column band; the totals row stacks the same way. */
.pw-table-fit {
  container-type: inline-size;
}

@container (width < 30rem) {
  .pw-table--fit thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pw-table--fit,
  .pw-table--fit tbody,
  .pw-table--fit tfoot {
    display: block;
  }

  .pw-table--fit tbody tr,
  .pw-table--fit tfoot tr {
    display: block;
    padding-block: var(--pw-space-2);
    border-bottom: 1px solid var(--pw-color-border);
  }

  .pw-table--fit tbody td,
  .pw-table--fit tfoot td,
  .pw-table--fit tfoot th {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr);
    gap: var(--pw-space-3);
    border: 0;
    text-align: left;
  }

  .pw-table--fit tbody td::before,
  .pw-table--fit tfoot td::before {
    content: attr(data-label);
    color: var(--pw-color-text-muted);
    font-weight: var(--pw-font-weight-regular);
  }
}

/* ---- Expandable row (R72.4): a summary row that opens its details below, as in Stripe ---- */
.pw-expandable {
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-expandable-head {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-expandable-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-expandable-row {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--pw-space-3);
  width: 100%;
  padding: var(--pw-space-3) var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: var(--pw-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-expandable-row:hover {
  background: var(--pw-color-hover);
}

.pw-expandable-row:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: -2px;
}

.pw-expandable-chevron {
  flex: none;
  color: var(--pw-color-text-muted);
  transition: transform 120ms ease-out;
}

.pw-expandable-row[aria-expanded="true"] .pw-expandable-chevron {
  transform: rotate(90deg);
}

.pw-expandable-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2) var(--pw-space-3);
  min-width: 0;
}

.pw-expandable-meta {
  margin-left: auto;
  color: var(--pw-color-text-muted);
  white-space: nowrap;
}

.pw-expandable-details {
  padding: 0 var(--pw-space-2) var(--pw-space-4) calc(var(--pw-space-2) + 1rem + var(--pw-space-3));
}

/* The details as in Stripe: a wide label column with the labels in the text colour, the values beside them. */
.pw-expandable-details .pw-facts {
  grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr);
  gap: var(--pw-space-3) var(--pw-space-6);
}

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

/* Facts with the label above the value (R72.9, R72.13), as in Stripe's details column: label and value both in the
   heading colour, the label bold, 14px on 20px lines, 16px from a value to the next label. */
.pw-facts.pw-facts--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.pw-facts.pw-facts--stacked dt {
  color: var(--pw-color-heading);
  font-weight: var(--pw-font-weight-bold);
  line-height: 1.25rem;
}

.pw-facts.pw-facts--stacked dd {
  color: var(--pw-color-heading);
  line-height: 1.25rem;
}

/* Each fact sits in a .pw-facts-item (display: contents), so the space goes on the next item's label. */
.pw-facts.pw-facts--stacked .pw-facts-item + .pw-facts-item > dt {
  margin-top: var(--pw-space-4);
}

.pw-facts-rail-heading {
  margin: 0;
}

/* An empty part of a page in a box with a dashed frame (R72.10), e.g. no offers yet. */
.pw-empty-box {
  margin: 0;
  padding: var(--pw-space-6) var(--pw-space-4);
  border: 1px dashed var(--pw-color-border-strong);
  border-radius: var(--pw-radius-lg);
  color: var(--pw-color-text-muted);
  text-align: center;
}

/* A dashed box under facts already shown, e.g. a party's name above the due diligence still to be answered. */
.pw-empty-box--after {
  margin-top: var(--pw-space-3);
}

/* An action that reads as a link (R72.16): in the facts rail instead of buttons, e.g. "Ändra ✎" beside a value. */
.pw-text-action {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pw-color-link);
  font: inherit;
  cursor: pointer;
}

.pw-text-action:hover {
  text-decoration: underline;
}

.pw-text-action:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 2px;
  border-radius: var(--pw-radius-sm);
}

.pw-text-action[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* A value with its action on the same line. */
.pw-fact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-1) var(--pw-space-3);
}

/* A heading with a status right after it (R72.19). */
.pw-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2) var(--pw-space-3);
}

/* A wide part and a narrower one side by side (R76.1), e.g. the conversation and the calls, when the tab is as wide as in the
   1280px workspace; under each other when it is narrower, where the narrow part's heading and buttons would not fit. */
.pw-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0 var(--pw-space-8);
  align-items: start;
}

@container pw-tab (width < 56rem) {
  .pw-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Two lists of facts side by side (R72.19), e.g. personal details and employment on Sökande; one column on a phone. */
.pw-fact-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-4) var(--pw-space-8);
  align-items: start;
}

@container pw-tab (width < 40rem) {
  .pw-fact-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- A value to copy (R72.20): hover shows a faint background and a hint, a click copies and ticks ---- */
.pw-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  max-width: 100%;
  margin-inline: calc(-1 * var(--pw-space-2));
  padding: 2px var(--pw-space-2);
  border: 0;
  border-radius: var(--pw-radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-copy:hover,
.pw-copy:focus-visible {
  background: var(--pw-color-hover-sunken);
}

.pw-copy:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 0;
}

.pw-copy-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pw-copy-tooltip {
  position: absolute;
  top: calc(100% + var(--pw-space-1));
  left: 50%;
  z-index: var(--pw-z-sticky);
  padding: var(--pw-space-1) var(--pw-space-2);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-tooltip-bg);
  color: var(--pw-color-tooltip-text);
  font-size: var(--pw-font-size-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--pw-motion-fast) ease-out;
}

/* In the facts rail, which scrolls, the hint opens above the value so the last rows keep it in view. */
.pw-facts-rail .pw-copy-tooltip {
  top: auto;
  bottom: calc(100% + var(--pw-space-1));
}

.pw-copy.pw-copy--tip .pw-copy-tooltip,
.pw-copy:hover .pw-copy-tooltip,
.pw-copy:focus-visible .pw-copy-tooltip {
  opacity: 1;
}

/* An identity number stays on one line when it is opened (R72.22). */
.pw-copy-value.pw-mono {
  flex: none;
  min-width: auto;
  white-space: nowrap;
  overflow-wrap: normal;
}

.pw-masked > .pw-copy {
  flex: none;
  max-width: none;

  /* Its hover padding does not make the row taller than the masked number (R75.3). */
  margin-block: -2px;
}

/* On the application page a table keeps to its column (R76.5): a long code without spaces – a request path, an
   integration's name – breaks rather than pushing the table under the facts rail; words break only between them, and times
   and buttons stay on one line. */
.pw-detail-main .pw-table td.pw-mono {
  overflow-wrap: anywhere;
}

.pw-table td.pw-nowrap,
.pw-detail-main .pw-table td .pw-button {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Notes, task descriptions and call notes break a long link the same way, so the calls column keeps to its width. */
.pw-detail-main :is(.pw-note-body, .pw-task-description) {
  overflow-wrap: anywhere;
}

/* A table whose rows do something when clicked anywhere (DataTable OnRowClick, R78.3): only those rows hover and show the
   pointer, the others stay still. A row's trigger is a plain-looking button the keyboard reaches; its click bubbles. */
.pw-table--actions tbody tr:not(.pw-row-action):hover {
  background: none;
}

.pw-table--actions tbody tr.pw-row-action {
  cursor: pointer;
}

.pw-table--actions tbody tr.pw-row-action:hover {
  background: var(--pw-color-hover);
}

.pw-row-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-row-trigger:focus-visible {
  outline: 2px solid var(--pw-color-focus);
  outline-offset: 2px;
  border-radius: var(--pw-radius-sm);
}

/* The authenticator app's QR code (P3a): the SVG brings its own white background and quiet zone. */
.pw-qr {
  width: 12rem;
  max-width: 100%;
  margin-block: var(--pw-space-3);
}

.pw-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Recovery codes, shown once (P3a): two columns of monospaced codes. */
.pw-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--pw-space-2) var(--pw-space-6);
  margin: var(--pw-space-3) 0;
  padding: 0;
  list-style: none;
}