/* User design preference: one continuous corner curve across the product.
 * Keep this named layer authoritative over legacy, unlayered component rules.
 * Important declarations in a named layer outrank unlayered important rules.
 */
@layer design-shape {
  :root {
    --shape-curve: superellipse(1.585);
    --shape-control: 18px;
    --shape-item: 14px;
    --shape-panel-gap: 10px;
    --shape-dialog-gap: 8px;
    --shape-panel: calc(var(--shape-control) + var(--shape-panel-gap));
    --shape-dialog: calc(var(--shape-panel) + var(--shape-dialog-gap));
    --action-optical-inset: 3px;
    --action-feedback-time: 140ms;
    --radius-card: var(--shape-panel) !important;
    --radius-control: var(--shape-control) !important;
  }

  :where(*, *::before, *::after) {
    corner-shape: var(--shape-curve) !important;
  }

  input[type="radio"], [role="radio"], .application-success-icon,
  [role="progressbar"], .loading-spinner__spinner {
    corner-shape: round !important;
  }

  /* The TPAC curtain is animated artwork: its round curve must deform just
   * like the reference. Controls and nested surfaces retain the shared curve. */
  .home-shell .site-header::before, .oa-app-nav::before {
    corner-shape: round !important;
  }

  /* All actions, including portal dialogs and lazy-loaded admin/OA screens. */
  button,
  input[type="file"]::file-selector-button,
  .button,
  [role="button"],
  input:is([type="button"], [type="submit"], [type="reset"]),
  .hero-action-button,
  .header-icon-action,
  .status-edit-link,
  .programmes-index-button,
  .file-input-button {
    border-radius: var(--shape-control) !important;
    corner-shape: var(--shape-curve) !important;
  }

  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
  textarea,
  select,
  .application-select-list,
  .application-guide,
  .application-load-error,
  .status-result-note,
  .form-submit,
  .form-feedback,
  .status-query-controls {
    border-radius: var(--shape-control) !important;
    corner-shape: var(--shape-curve) !important;
  }

  .application-guide-nav a,
  .site-nav a,
  .admin-sidebar a,
  .application-select-option,
  .status-result-label {
    border-radius: var(--shape-item) !important;
    corner-shape: var(--shape-curve) !important;
  }

  .application-form,
  .status-query-panel,
  .status-result,
  .lock-preview,
  .ask-panel,
  .faq-list details,
  .programme-index-card,
  .admin-module,
  .admin-card {
    border-radius: var(--shape-panel) !important;
    corner-shape: var(--shape-curve) !important;
  }

  [role="dialog"] {
    border-radius: var(--shape-dialog) !important;
    corner-shape: var(--shape-curve) !important;
  }

  .interview-session-dialog .date-time-field {
    padding: calc(var(--shape-panel-gap) - 1px);
    border-radius: var(--shape-panel) !important;
  }
  .interview-session-dialog .date-time-control {
    border-radius: var(--shape-control) !important;
  }

  /* A padded frame owns both its gap and radius. Include its border in the
   * distance from the outside edge to the rounded inner surface. */
  .shape-frame,
  .status-confirmation-card,
  .application-select-list,
  .oa-team-options,
  .oa-calendar-popover,
  .oa-collab-dialog,
  .oa-inventory-dialog,
  .oa-leaves-dialog,
  .oa-signature-dialog,
  .oa-activity-ui .oa-project-sheet {
    --shape-frame-inset: 14px;
    --shape-frame-border: 1px;
    --shape-frame-inner: var(--shape-control);
    padding: var(--shape-frame-inset) !important;
    border-radius: calc(var(--shape-frame-inner) + var(--shape-frame-inset) + var(--shape-frame-border)) !important;
  }

  .application-select-list {
    --shape-frame-inset: 6px;
    --shape-frame-inner: var(--shape-item);
  }
  .oa-team-options {
    --shape-frame-inset: 8px;
    --shape-frame-inner: var(--shape-item);
  }
  .oa-team-options > label { border-radius: var(--shape-item) !important; }

  .oa-annual-window {
    --shape-team-inset: 14px;
    --shape-team-border: 1px;
    --shape-team-radius: calc(var(--shape-control) + var(--shape-team-inset) + var(--shape-team-border));
    --shape-frame-inset: 18px;
    --shape-frame-border: 1px;
    padding: var(--shape-frame-inset) !important;
    border-radius: calc(var(--shape-team-radius) + var(--shape-frame-inset) + var(--shape-frame-border)) !important;
  }
  .oa-annual-team-card {
    padding: var(--shape-team-inset) !important;
    border-radius: var(--shape-team-radius) !important;
    corner-shape: var(--shape-curve) !important;
  }
  @media (max-width: 600px) {
    .oa-annual-window { --shape-frame-inset: 14px; }
  }

  .oa-collab-dialog, .oa-inventory-dialog, .oa-leaves-dialog, .oa-signature-dialog {
    --shape-frame-inset: 24px;
  }

  .application-form {
    --shape-frame-inline: clamp(34px, 5vw, 58px);
    --shape-frame-block: var(--shape-frame-inline);
    --shape-frame-end: var(--shape-frame-block);
    border-radius: calc(var(--shape-control) + var(--shape-frame-inline) + 1px) /
      calc(var(--shape-control) + var(--shape-frame-block) + 1px) !important;
  }
  .application-form { --shape-frame-inline: clamp(30px, 3.8vw, 48px); }
  .application-form .form-section { padding: var(--shape-frame-block) var(--shape-frame-inline) var(--shape-frame-end) !important; }
  @media (max-width: 780px) {
    .application-form { --shape-frame-inline: 22px; --shape-frame-block: 28px; --shape-frame-end: 32px; }
    .application-form { border-bottom-left-radius: calc(var(--shape-control) + var(--shape-frame-inline) + 1px) calc(var(--shape-control) + var(--shape-frame-end) + 1px) !important;
      border-bottom-right-radius: calc(var(--shape-control) + var(--shape-frame-inline) + 1px) calc(var(--shape-control) + var(--shape-frame-end) + 1px) !important; }
  }

  .shape-frame > .shape-frame-inner,
  .oa-activity-ui .oa-project-sheet > :is(.oa-project-row-form, .oa-programme-form, .oa-project-wide-table) {
    border-radius: var(--shape-frame-inner, var(--shape-control)) !important;
  }
  .oa-activity-ui .oa-project-sheet > :is(.oa-project-row-form, .oa-programme-form) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Text and an icon have different visual weight. Reduce the icon-side
   * space without shifting icon-only actions or disturbing absolute icons. */
  :is(button, .button, a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link)):has(> svg:first-child):not(:has(> svg:only-child)) > svg:first-child {
    margin-inline-start: calc(-1 * var(--action-optical-inset)) !important;
  }
  :is(button, .button, a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link)):has(> svg:last-child):not(:has(> svg:only-child)) > svg:last-child {
    margin-inline-end: calc(-1 * var(--action-optical-inset)) !important;
  }

  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]) {
    touch-action: manipulation;
    transition: background-color var(--action-feedback-time) ease, color var(--action-feedback-time) ease,
      border-color var(--action-feedback-time) ease, opacity var(--action-feedback-time) ease,
      filter var(--action-feedback-time) ease, scale var(--action-feedback-time) ease !important;
  }
  @media (hover: hover) {
    :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
      filter: brightness(.94) !important;
    }
  }
  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    filter: brightness(.87) !important;
    scale: .98 !important;
  }
  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]):focus-visible {
    outline: 2px solid var(--oa-accent, var(--accent, #37468c)) !important;
    outline-offset: 3px !important;
  }
  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]):is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
    opacity: .48 !important;
    cursor: not-allowed !important;
    filter: none !important;
    scale: 1 !important;
  }
  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link))[aria-busy="true"] {
    opacity: 1 !important;
    cursor: progress !important;
    pointer-events: none !important;
    filter: none !important;
    scale: 1 !important;
  }
  :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link))[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .85em;
    height: .85em;
    margin-inline-start: .5em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50% !important;
    corner-shape: round !important;
    vertical-align: -.1em;
    animation: action-loading-spin .7s linear infinite;
  }
  @keyframes action-loading-spin { to { transform: rotate(360deg); } }
  input[type="file"]::file-selector-button {
    cursor: pointer;
    transition: filter var(--action-feedback-time) ease, opacity var(--action-feedback-time) ease, scale var(--action-feedback-time) ease;
  }
  @media (hover: hover) {
    input[type="file"]:not(:disabled)::file-selector-button:hover { filter: brightness(.94); }
  }
  input[type="file"]:not(:disabled)::file-selector-button:active { filter: brightness(.87); scale: .98; }
  input[type="file"]:disabled::file-selector-button { opacity: .48; cursor: not-allowed; }
  @media (prefers-reduced-motion: reduce) {
    :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link), input[type="submit"], input[type="button"]) { transition: none !important; }
    :is(button, .button, [role="button"], a:is([class*="button"], [class*="primary"], [class*="action"], .status-edit-link))[aria-busy="true"]::after { animation: none; }
    input[type="file"]::file-selector-button { transition: none; }
  }

  /* The shared paragraph rule adds justification and indentation on mobile. */
  .form-intro > p {
    text-align: center !important;
    text-align-last: center !important;
    text-indent: 0 !important;
    margin-inline: auto !important;
  }
}

@layer design-shape {
 :root { --shape-checkbox:6px; }
 .oa-shell input[type="checkbox"] { border-radius:var(--shape-checkbox) !important; }
 .oa-project-create-form .oa-collab-check { border-radius:var(--shape-item) !important; }
 .oa-project-create-form .oa-project-period {
   --shape-frame-inset:12px; --shape-frame-border:1px; --shape-frame-inner:var(--shape-control);
   padding:var(--shape-frame-inset) !important;
   border-radius:calc(var(--shape-frame-inner) + var(--shape-frame-inset) + var(--shape-frame-border)) !important;
 }
 .oa-project-create-form .oa-project-period:has(.oa-programme-switches) { --shape-frame-inner:var(--shape-item); }
}

@layer design-shape {
 .oa-programme-decision { --shape-frame-inset:10px; --shape-frame-border:1px; padding:var(--shape-frame-inset) !important; border-radius:calc(var(--shape-control) + var(--shape-frame-inset) + var(--shape-frame-border)) !important; }
}