/* Public flow and portal layout (spec 08): narrow, mobile-first column on the brand host. */
.pw-public {
  /* The customer's site keeps buttons as high as its fields; the 28px buttons are the staff app's (R72.8). */
  --pw-control-height: 2.25rem;
  --pw-control-padding-block: var(--pw-space-1);
  --pw-control-font-size: 1em;
  --pw-control-line-height: var(--pw-line-height);
  --pw-button-height: var(--pw-control-height);

  /* The labels sit on the sunken page here, where #6a7384 falls under 4.5:1; a darker grey keeps them AA. */
  --pw-color-fact-label: light-dark(var(--pw-gray-600), var(--pw-gray-400));

  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: var(--pw-color-surface-sunken);
}

.pw-public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-4);
  padding: var(--pw-space-4) var(--pw-space-6);
  background: var(--pw-color-surface);
  border-bottom: 1px solid var(--pw-color-border);
}

.pw-public-header nav {
  display: flex;
  align-items: center;
  gap: var(--pw-space-4);
}

.pw-public-brand {
  font-size: var(--pw-font-size-lg);
  font-weight: var(--pw-font-weight-semibold);
  color: var(--pw-color-text);
  text-decoration: none;
}

/* The brand's or the organisation's logo in place of the name (R102.3); the name is its alt text. */
.pw-public-logo {
  display: block;
  max-width: 12rem;
  max-height: 2.5rem;
  width: auto;
  height: auto;
}

.pw-public-main {
  display: grid;
  align-content: start;
  gap: var(--pw-space-6);
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--pw-space-8) var(--pw-space-4);
}

.pw-public-footer {
  padding: var(--pw-space-6);
  text-align: center;
  font-size: var(--pw-font-size-sm);
}

.pw-inline-form {
  display: inline;
}

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

.pw-example {
  padding: var(--pw-space-4);
  background: var(--pw-color-surface);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  font-size: var(--pw-font-size-sm);
}

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

/* The test persons of development and the demo, in a native popover (R52.4). */
.pw-test-persons {
  width: min(48rem, 94vw);
  max-height: 85vh;
  overflow: auto;
  padding: var(--pw-space-4);
  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-test-persons-header {
  display: flex;
  gap: var(--pw-space-2);
  align-items: center;
  justify-content: space-between;
}

.pw-test-persons-header h2 {
  margin: 0;
  font-size: var(--pw-font-size-lg);
}

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

/* The compact flow (R65): the fields of a step in a grid, two columns where there is room, not wider than they need to be.
   Each field spans three rows of the grid (label, input, help) through subgrid, so the inputs of a row line up even when one
   label takes two lines. */
.pw-public-main .pw-form {
  max-width: none;
}

/* The flow is narrow so it fits when embedded on another site (R65.9); only the loan rows get more room. */
.pw-public-main:has(.pw-loans) {
  max-width: 52rem;
}

.pw-public-main .pw-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  grid-auto-rows: auto;
  gap: var(--pw-space-1) var(--pw-space-4);
}

.pw-public-main .pw-form-grid > .pw-field {
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: normal;
  gap: var(--pw-space-1);
  margin-bottom: var(--pw-space-3);
}

.pw-field--slider input[type="range"] {
  width: 100%;
  max-width: 100%;
  margin: var(--pw-space-2) 0 0;
  accent-color: var(--pw-color-primary);
}

.pw-public-main select,
.pw-public-main input[type="date"] {
  max-width: 100%;
}

.pw-js .pw-no-js,
.pw-public-main .pw-button[hidden] {
  display: none;
}

.pw-field--check {
  align-self: end;
}

.pw-estimate {
  margin: 0;
  font-size: var(--pw-font-size-lg);
}

/* Om dig: the fields and labels the employment needs, without script. Employed is the default; the rest swap in. */
.pw-about .pw-for-self,
.pw-about .pw-for-retired,
.pw-about .pw-for-other {
  display: none;
}

.pw-about:has(#employment option:is([value="SelfEmployed"], [value="Retired"], [value="EarlyRetired"], [value="SicknessPension"], [value="Student"], [value="Unemployed"]):checked) .pw-for-employed {
  display: none;
}

.pw-about:has(#employment option[value="SelfEmployed"]:checked) .pw-for-self,
.pw-about:has(#employment option:is([value="Retired"], [value="EarlyRetired"], [value="SicknessPension"]):checked) .pw-for-retired,
.pw-about:has(#employment option:is([value="Student"], [value="Unemployed"]):checked) .pw-for-other {
  display: inline;
}

.pw-about:has(#employment option:is([value="Retired"], [value="EarlyRetired"], [value="SicknessPension"], [value="Student"], [value="Unemployed"]):checked) .pw-if-employer,
.pw-about:has(#employment option:is([value="Student"], [value="Unemployed"]):checked) .pw-if-since {
  display: none;
}

.pw-about:not(:has(#employment option[value="Temporary"]:checked)) .pw-if-until,
.pw-about:not(:has(#with-co:checked)) .pw-co-section {
  display: none;
}

/* Ditt företag (R96.1): a question's follow-up field shows only when the answer asks for it. */
.pw-company:not(:has(#kyc-foreign option[value="OutsideEuEea"]:checked)) .pw-if-foreign-country,
.pw-company:not(:has(#kyc-pep-connection:checked)) .pw-if-pep,
.pw-company:not(:has(#kyc-tax-abroad:checked)) .pw-if-tax-abroad,
.pw-guarantors:not(:has(#self-guarantee:checked)) .pw-if-self {
  display: none;
}

/* Dina lån: the loan rows and the amount inputs live in prismwise.css (shared with the staff app); here the remove button,
   a pw-button, keeps a little padding. */
.pw-icon-button {
  padding-inline: var(--pw-space-2);
}

/* Granska: the parts of the application in one card, two columns where there is room. */
.pw-review-wrap {
  container-type: inline-size;
}

.pw-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-4) var(--pw-space-6);
  padding: var(--pw-space-4);
  background: var(--pw-color-surface);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
}

.pw-review-part {
  display: grid;
  gap: var(--pw-space-1);
  align-content: start;
}

.pw-review-part h2 {
  display: flex;
  justify-content: space-between;
  gap: var(--pw-space-2);
  margin: 0;
  font-size: var(--pw-font-size-lg);
}

.pw-review-part + .pw-review-part {
  padding-top: var(--pw-space-4);
  border-top: 1px solid var(--pw-color-border);
}

.pw-review-part p {
  margin: 0;
}

.pw-review-change {
  font-size: var(--pw-font-size-sm);
  font-weight: var(--pw-font-weight-regular);
}

/* The labels of a form grid sit at the bottom of their row, so the inputs line up (see the subgrid above). */
.pw-public-main .pw-form-grid > .pw-field > label {
  align-self: end;
}

/* A pending identification or signing order (plan K step K5): BankID's QR code, never inverted, and the same-device link. */
.pw-order {
  display: grid;
  gap: var(--pw-space-4);
  justify-items: start;
}

.pw-order-qr {
  width: min(15rem, 70vw);
  height: auto;
  padding: var(--pw-space-2);
  background: var(--pw-color-surface);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
}

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