/* =====================================================================
   REG FED assets v1 — Registration path (path select and profile setup)
   Transcribed from: Registration path dialogs v1 (design), 12 Nov 2026
   Styles checked against: ISP stylesheet v7
   Prefix: reg-  ·  Mobile first: xs is the default, sm (576px) and up
   override. No global selectors: every rule starts with a reg- class.
   ===================================================================== */

:root {
  /* type */
  --reg-font: proxima-nova, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;

  /* ink and text */
  --reg-ink: #20262B;               /* titles, labels, body text, typed values */
  --reg-text-secondary: #6E6863;    /* step label, read-only value, field icon */
  --reg-text-note: #44403C;         /* path select footnote (as the design) */
  --reg-option-muted: #57534E;      /* the two fixed options in the organisation list */
  --reg-placeholder: #A8A29E;       /* italic placeholder, same size as typed text */
  --reg-disabled-text: #A8A29E;     /* label of a greyed-out button */
  --reg-white: #FFFFFF;

  /* actions */
  --reg-action: #066D72;            /* Dark teal: primary fill, secondary edge and label, links */
  --reg-action-hover: #00959C;      /* Bright teal: primary hover (fill and edge) */
  --reg-action-tint: #D7E9EA;       /* Teal tint: secondary hover */
  --reg-link-line: 1px;             /* link underline at rest */
  --reg-link-line-hover: 2px;       /* link underline on hover (the colour stays Dark teal) */

  /* states */
  --reg-required: #C0201F;          /* the * after required labels */
  --reg-error: #DD0707;             /* error message and invalid field border */
  --reg-focus-edge: #1B767D;        /* focused text field, unticked checkbox edge */
  --reg-hover-layer: linear-gradient(rgba(87, 83, 78, .06), rgba(87, 83, 78, .06)); /* 6% stone */
  --reg-link-focus-shade: rgba(87, 83, 78, .10);
  --reg-focus-shadow: 0 0 0 3px rgba(32, 38, 43, .18), 0 2px 8px rgba(32, 38, 43, .22);
  --reg-focus-inset: inset 0 0 0 3px rgba(32, 38, 43, .18);

  /* surfaces and lines */
  --reg-page: #FCFAF6;
  --reg-disabled: #EDEBE7;          /* greyed-out button fill; read-only and locked fields */
  --reg-line: #E4E1DC;              /* dialog edge, list edge, list divider, confirm panel */
  --reg-field-line: #C6C2BD;        /* field, checkbox and topic list border */
  --reg-shadow-popup: 0 12px 30px rgba(50, 59, 66, .16); /* dialogs and the organisation list */
  --reg-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.7 8L6.6 10.8L12.3 4.9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* layout */
  --reg-dialog-w: 468px;            /* the Microsoft sign-in width */
  --reg-list-gap: 4px;              /* space between the organisation field and its list */
  --reg-topics-reserved: 300px;     /* logo, title, intro and buttons: the topic list takes the rest of the screen */
  --reg-topics-min: 220px;
  --reg-topics-max: 349px;
  --reg-topics-reserved-phone: 260px; /* phones: no logo, so the topic list takes the rest of the screen */
  --reg-topics-min-phone: 200px;          /* never taller than this, so Your interests fits a 13-inch laptop */

  /* breakpoints: the only place they are defined (reg.js reads these) */
  --reg-bp-sm: 576px;
  --reg-bp-md: 768px;
  --reg-bp-lg: 992px;
  --reg-bp-xl: 1200px;
  --reg-bp-xxl: 1400px;
}

/* ---------- page ---------- */

.reg-page-body {
  margin: 0;
  background: var(--reg-page);
  font-family: var(--reg-font);
  color: var(--reg-ink);
}

.reg-app,
.reg-app * {
  box-sizing: border-box;
}

.reg-app {
  min-height: 100vh;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--reg-font);
  line-height: 1.5;            /* as the design page: labels and other text without their own line height */
  color: var(--reg-ink);
}

/* one section per dialog, in flow order; each opens centred on the screen */
.reg-step {
  width: 100%;
  max-width: var(--reg-dialog-w);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 0;
}

/* ---------- dialog ---------- */

.reg-dialog {
  width: 100%;
  max-width: var(--reg-dialog-w);
  margin: 0;
  background: var(--reg-white);
  border: 1px solid var(--reg-line);
  border-radius: 10px;
  box-shadow: var(--reg-shadow-popup);
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reg-dialog--path-select {
  align-items: center;
}

.reg-step-label {
  align-self: flex-start;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--reg-text-secondary);
  white-space: nowrap;
  margin: -8px 0 -6px;
}

.reg-logo {
  height: 48px;
  width: auto;
  display: block;
  align-self: center;
  margin: 0 0 2px;
}

.reg-logo--path-select {
  margin: 0 0 6px;
}

/* phones: the logo shows on path select only */
.reg-logo:not(.reg-logo--path-select) {
  display: none;
}

.reg-title {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--reg-ink);
}

.reg-title:focus {
  outline: none;               /* focus is moved here by the script when the step changes */
}

.reg-intro {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.reg-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;            /* no single-word last line; the top line stays longer */
  color: var(--reg-text-note);
}

/* ---------- fields ---------- */

.reg-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reg-field--combobox {
  position: relative;
}

.reg-label {
  font-size: 12.5px;
}

.reg-label--path-select {
  font-weight: 700;
  text-align: center;
}

.reg-required {
  color: var(--reg-required);
}

.reg-input {
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  background: var(--reg-white);
  border: 1.5px solid var(--reg-field-line);
  border-radius: 6px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--reg-ink);
}

/* path select email: centred, as the Microsoft sign-in */
.reg-input--centred {
  text-align: center;
}

.reg-input--readonly {
  border-color: var(--reg-line);
  background: var(--reg-disabled);
  color: var(--reg-text-secondary);
}

.reg-input::placeholder {
  font-style: italic;
  color: var(--reg-placeholder);
  opacity: 1;
}

.reg-input.is-invalid {
  border-color: var(--reg-error);
}

/* text fields show focus on click too: browsers treat every text-field focus as keyboard focus */
.reg-input:focus {
  outline: none;
  border-color: var(--reg-focus-edge);
  box-shadow: var(--reg-focus-shadow);
}

.reg-input--readonly:focus {
  border-color: var(--reg-line);
  box-shadow: none;
}

.reg-error {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--reg-error);
}

.reg-error[hidden] {
  display: none;
}

/* ---------- checkboxes ---------- */

.reg-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}

.reg-check--terms {
  margin-top: 8px;
  cursor: default;
}

.reg-checkbox {
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--reg-field-line);
  background: var(--reg-white);
  cursor: pointer;
  flex: none;
}

.reg-checkbox:checked {
  border-color: var(--reg-action);
  background: var(--reg-action) var(--reg-tick) center / 16px 16px no-repeat;
}

.reg-checkbox:focus-visible {
  outline: none;
  border-color: var(--reg-focus-edge);
  box-shadow: var(--reg-focus-shadow);
}

.reg-checkbox:checked:focus-visible {
  border-color: var(--reg-action);
}

/* ---------- links ---------- */

.reg-link {
  color: var(--reg-action);
  text-decoration-line: underline;
  text-decoration-thickness: var(--reg-link-line);
  text-underline-offset: 2px;
  transition: text-decoration-thickness .15s ease-out;
}

/* hover: the colour stays, the underline thickens */
.reg-link:hover {
  text-decoration-thickness: var(--reg-link-line-hover);
}

.reg-link:focus-visible {
  outline: none;
  border-radius: 4px;
  padding: 1px 3px;
  margin: 0 -3px;
  background-color: var(--reg-link-focus-shade);
  box-shadow: var(--reg-focus-shadow);
}

/* ---------- organisation type-ahead ---------- */

.reg-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  border: 1.5px solid var(--reg-field-line);
  border-radius: 6px;
  padding: 0 4px 0 12px;
  background: var(--reg-disabled);
  font-size: 13px;
}

.reg-locked[hidden],
.reg-input[hidden],
.reg-field[hidden],
.reg-confirm[hidden] {
  display: none;
}

.reg-change {
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--reg-action);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  text-decoration: underline;
}

.reg-change:hover {
  background-image: var(--reg-hover-layer);
}

.reg-change:focus-visible {
  outline: none;
  background-image: var(--reg-hover-layer);
  box-shadow: var(--reg-focus-shadow);
}

/* the list opens fixed to the window: the script sets top, left and width from the field */
/* the list is moved to the end of the page, outside .reg-app, so it sets its own box model */
.reg-listbox,
.reg-listbox * {
  box-sizing: border-box;
}

.reg-listbox {
  position: fixed;
  z-index: 1000;
  background: var(--reg-white);
  border: 1px solid var(--reg-line);
  border-radius: 8px;
  padding: 4px 0 6px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--reg-shadow-popup);
  overflow: hidden;
}

.reg-listbox[hidden] {
  display: none;
}

/* state example only: the open list drawn in place under its field */
.reg-listbox--example {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--reg-list-gap);
}

.reg-option {
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  color: var(--reg-ink);
  background-color: var(--reg-white);
}

.reg-option--fixed {
  color: var(--reg-option-muted);
}

.reg-option--divider {
  margin-top: 6px;
  border-top: 1px solid var(--reg-line);
}

/* arrowed-to or hovered: the hover shading only (focus stays in the field) */
.reg-option:hover,
.reg-option.is-active {
  background-image: var(--reg-hover-layer);
}

/* ---------- Unaffiliated confirm panel ---------- */

.reg-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--reg-line);
  border-radius: 8px;
  padding: 14px 16px;
}

.reg-confirm.is-invalid {
  border-color: var(--reg-error);
}

.reg-confirm-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- topics ---------- */

.reg-topics {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.reg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.reg-topic-list {
  border: 1.5px solid var(--reg-field-line);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: max(var(--reg-topics-min-phone), calc(100dvh - var(--reg-topics-reserved-phone)));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reg-topic {
  display: flex;
  flex: none;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}

.reg-topic .reg-checkbox {
  margin-top: 1px;
}

.reg-topic-label {
  flex: 1;
  min-width: 0;
}

/* ---------- buttons ---------- */

.reg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.reg-actions--next-only {
  justify-content: flex-end;
}

.reg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}

.reg-btn--full {
  width: 100%;
  margin: 4px 0;               /* path select Continue: extra space above and below */
}

.reg-btn--primary {
  color: var(--reg-white);
  background: var(--reg-action);
  border: 1.5px solid var(--reg-action);
}

.reg-btn--primary:hover {
  background: var(--reg-action-hover);
  border-color: var(--reg-action-hover);
}

/* keyboard focus: the hover fill, the Dark teal edge kept, plus the focus shadow */
.reg-btn--primary:focus-visible {
  outline: none;
  background: var(--reg-action-hover);
  border-color: var(--reg-action);
  box-shadow: var(--reg-focus-shadow);
}

.reg-btn--secondary {
  color: var(--reg-action);
  background: var(--reg-white);
  border: 1.5px solid var(--reg-action);
}

.reg-btn--secondary:hover {
  background: var(--reg-action-tint);
}

.reg-btn--secondary:focus-visible {
  outline: none;
  background: var(--reg-action-tint);
  box-shadow: var(--reg-focus-shadow);
}

.reg-btn:disabled,
.reg-btn:disabled:hover {
  color: var(--reg-disabled-text);
  background: var(--reg-disabled);
  border-color: var(--reg-disabled);
  cursor: not-allowed;
}

/* button chevron (stylesheet v7, 3b): 16px SVG, stroke 2.5 */
.reg-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

.reg-btn-icon--back {
  margin-left: -5px;
}

.reg-btn-icon--next {
  margin-right: -5px;
}

/* ---------- state examples (sample page only) ---------- */

.reg-examples {
  width: 100%;
  max-width: var(--reg-dialog-w);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--reg-line);
}

.reg-examples-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reg-text-secondary);
}

/* a fixed line break in a centred intro, so the top line is the longer one; off on phones */
.reg-intro-break {
  display: none;
}

/* ---------- iPhone 8 state set (reg-states-iphone8.html, sample only) ---------- */

.reg-device-set {
  padding: 32px 24px 48px;
  font-family: var(--reg-font);
  color: var(--reg-ink);
}

.reg-device-set-title {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
}

.reg-device-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
}

.reg-device {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 375px;
}

.reg-device-screen {
  display: block;
  width: 375px;
  height: 667px;
  border: 1px solid var(--reg-line);
  border-radius: 12px;
  background: var(--reg-page);
  box-shadow: var(--reg-shadow-popup);
}

.reg-device-caption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--reg-text-secondary);
}

/* ---------- sm and up (576px): laptop and desktop sizes (the dialog stays 468px) ---------- */

@media (min-width: 576px) {
  .reg-dialog {
    padding: 24px 32px 28px;
  }

  .reg-dialog--path-select {
    padding: 32px 36px;
    gap: 16px;
  }

  .reg-step-label {
    font-size: 12px;
  }

  .reg-logo,
  .reg-logo:not(.reg-logo--path-select) {
    display: block;
    height: 64px;
  }

  .reg-title {
    font-size: 24px;
  }

  .reg-intro {
    font-size: 13.5px;
  }

  .reg-intro-break {
    display: inline;
  }

  .reg-input {
    height: 36px;
  }

  .reg-locked {
    min-height: 36px;
  }

  .reg-label,
  .reg-error,
  .reg-check,
  .reg-confirm-note,
  .reg-topic {
    font-size: 13px;
  }

  .reg-btn {
    font-size: 12.5px;
  }

  .reg-topic-list {
    gap: 12px;
    max-height: min(var(--reg-topics-max), max(var(--reg-topics-min), calc(100dvh - var(--reg-topics-reserved))));
  }
}