/* Craft administration shares framework forms, buttons, cards and status badges. */
.crafts-page { padding-block: var(--space-6); }
.crafts-header { position: relative; margin-bottom: var(--space-5); }
.crafts-header-copy { padding-right: 14rem; }
.crafts-header h1 { margin: var(--space-1) 0 var(--space-2); font-size: var(--font-size-2xl); }
.crafts-header p { margin: 0; color: var(--colour-text-muted); }
.craft-create > summary { position: absolute; top: var(--space-2); right: 0; }
.craft-list { display: grid; gap: var(--space-4); }
.craft-card { position: relative; padding: var(--space-5); }
.craft-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--colour-border); }
.craft-card-header, .craft-role-heading { display: flex; align-items: center; gap: var(--space-3); padding-right: 10rem; }
.craft-card h2 { margin: 0; font-size: var(--font-size-xl); }
.craft-card h3, .craft-inline-form h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.craft-card h4 { margin: 0; font-size: var(--font-size-md); }
.craft-card-header > div, .craft-role-heading > div { min-width: 0; overflow-wrap: anywhere; }
.craft-code, .craft-role-count, .craft-empty, .craft-form-help { color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.craft-code { display: block; overflow-wrap: anywhere; }
.craft-empty { margin: 0; }
.craft-edit > summary { position: absolute; top: var(--space-5); right: var(--space-5); }
.craft-roles { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--colour-border); }
.craft-role-count { font-weight: var(--font-weight-regular); }
.craft-role-list { display: grid; gap: var(--space-2); }
.craft-role { position: relative; padding: var(--space-3); border-radius: var(--radius-md); background: var(--colour-surface-subtle); }
.craft-role-edit > summary { position: absolute; top: var(--space-3); right: var(--space-3); }
.craft-add-role { margin-top: var(--space-3); }
.craft-disclosure > summary { width: fit-content; gap: var(--space-3); list-style: none; }
.craft-disclosure > summary::-webkit-details-marker { display: none; }
.craft-disclosure > summary::after { content: ""; width: 0.45rem; height: 0.45rem; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.craft-disclosure[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.craft-disclosure > summary:hover { transform: none; }
.craft-disclosure > summary:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 3px; }
.craft-inline-form { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); }
.craft-inline-form h4 { margin-bottom: var(--space-3); }
.craft-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); }
.craft-form .form-field { margin: 0; }
.craft-form textarea { min-height: 5rem; }
.craft-form .craft-active { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; align-self: end; }
.craft-form .craft-active input { width: 1.1rem; height: 1.1rem; margin: 0; }
.craft-form-help { margin: 0; }
.craft-form .framework-form-actions { margin: 0; padding: 0; }
.craft-error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--river-danger-100); color: var(--river-danger-700); }
@media (max-width: 700px) {
  .crafts-page { padding-block: var(--space-4); }
  .crafts-header-copy { padding-right: 0; }
  .craft-create > summary, .craft-edit > summary, .craft-role-edit > summary { position: static; margin-top: var(--space-3); }
  .craft-card { padding: var(--space-4); }
  .craft-card-header, .craft-role-heading { padding-right: 0; flex-wrap: wrap; }
  .craft-form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .craft-inline-form { padding: var(--space-3); }
}

/* Athlete craft panels share the admin disclosure, form and status styles. */
.profile-summary { margin-bottom: var(--space-5); }
.profile-summary > article { padding: var(--space-4); box-shadow: none; }
.profile-summary .metric-value, .my-profile-metrics.profile-summary strong { margin-top: var(--space-2); font-size: var(--font-size-2xl); }
.profile-summary .metric-value-text { font-size: var(--font-size-lg); }
.profile-summary .metric-card-accent { border-color: var(--colour-border); background: var(--colour-surface); }
.profile-craft-section { margin-block: var(--space-5); }
.profile-craft-heading, .profile-craft-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.profile-craft-heading { margin-bottom: var(--space-4); flex-wrap: wrap; }
.profile-craft-heading h2 { margin: 0; font-size: var(--font-size-xl); }
.profile-craft-heading p { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--colour-text-muted); }
.profile-craft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-4); }
.profile-craft-card { min-width: 0; padding: var(--space-4); }
.profile-craft-card:hover { transform: none; border-color: var(--colour-border); box-shadow: var(--shadow-sm); }
.profile-craft-card h3, .profile-craft-empty h3 { margin: 0; font-size: var(--font-size-lg); }
.profile-craft-card-heading { flex-wrap: wrap; }
.profile-craft-card-heading > div { min-width: 0; flex: 1 1 10rem; }
.profile-craft-card h3, .profile-craft-notes, .profile-craft-full-notes { overflow-wrap: anywhere; }
.craft-level-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); max-width: 100%; overflow-wrap: anywhere; }
.profile-craft-meta { margin: var(--space-3) 0 0; color: var(--colour-text-muted); font-size: var(--font-size-xs); }
.profile-craft-notes, .profile-craft-full-notes { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); white-space: pre-wrap; }
.profile-craft-action, .profile-craft-notes-disclosure { margin-top: var(--space-4); }
.profile-craft-empty, .profile-craft-unrecorded { padding: var(--space-4); border: 1px dashed var(--colour-border-strong); border-radius: var(--radius-md); background: var(--colour-surface-subtle); }
.profile-craft-empty { margin-bottom: var(--space-3); }
.profile-craft-unrecorded { margin-top: var(--space-3); }
.profile-craft-empty p, .profile-craft-unrecorded p { margin: var(--space-1) 0 0; color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.profile-craft-unrecorded strong { font-size: var(--font-size-sm); }
.profile-craft-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-craft-actions:not(:empty) { margin-top: var(--space-4); }
@media (max-width: 700px) {
  .profile-craft-grid, .profile-summary { grid-template-columns: minmax(0, 1fr); }
  .profile-craft-heading > .button, .profile-craft-action > summary, .profile-craft-actions .button { width: 100%; }
}

/* Recorded capabilities stay horizontal on desktop and mobile. */
.experience-panel { min-width: 0; padding: var(--space-4); }
.experience-panel:hover { transform: none; border-color: var(--colour-border); box-shadow: var(--shadow-sm); }
.experience-panel .experience-heading { display: block; position: relative; min-height: 2.75rem; }
.experience-heading:has(.experience-add) h2 { padding-right: 15rem; }
.experience-heading .experience-add { margin: 0; }
.experience-heading .experience-add > summary { position: absolute; top: 0; right: 0; padding: 0.5rem 0.75rem; }
.experience-empty { margin: 0; color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.experience-list { display: flex; gap: var(--space-3); overflow-x: auto; max-width: 100%; padding-block: var(--space-1) var(--space-2); scroll-snap-type: x proximity; scrollbar-width: thin; }
.experience-list:empty { display: none; }
.experience-list:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.experience-item { position: relative; flex: 0 0 9.5rem; min-width: 0; padding: var(--space-7) var(--space-3) var(--space-3); text-align: center; background: var(--colour-surface-subtle); border: 1px solid var(--colour-border); border-radius: var(--radius-md); scroll-snap-align: start; }
.experience-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.experience-icon-slot { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: var(--space-1); }
.experience-icon-slot > .craft-icon { width: 100%; height: 100%; }
.craft-icon { display: block; width: 2.75rem; height: 2.75rem; max-width: 100%; color: var(--brand-primary, var(--river-navy-950)); --icon-accent: var(--brand-accent, var(--river-turquoise-500)); }
.craft-icon-fill { fill: currentColor; }
.craft-icon-accent { fill: var(--icon-accent); }
.craft-icon-stroke { fill: none; stroke: var(--icon-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.craft-icon.is-muted { color: var(--colour-text-muted); --icon-accent: var(--colour-border-strong); }
.experience-name { max-width: 100%; }
.experience-name h3 { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.experience-level { max-width: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--colour-surface); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.experience-notes { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.experience-notes { margin-top: var(--space-2); }
.experience-notes summary { cursor: pointer; width: fit-content; padding-block: var(--space-1); }
.experience-update > .experience-edit-link { padding: var(--space-2) 0; min-height: 2.75rem; font-size: var(--font-size-xs); color: var(--colour-primary); }
.experience-update > .experience-edit-link:hover { text-decoration: underline; }
/* Give an opened editor room while keeping closed tiles compact. */
.experience-item:has(.experience-update[open]) { flex-basis: 20rem; max-width: 100%; }
.experience-item .craft-inline-form { padding: var(--space-3); }
@media (max-width: 600px) {
  .experience-heading:has(.experience-add) h2 { padding-right: 0; }
  .experience-heading .experience-add > summary { position: static; margin-top: var(--space-2); width: fit-content; }
}

/* Shared profile rhythm: equal primary cards, with the existing responsive sidebar. */
.profile-columns { margin-top: var(--space-5); gap: var(--space-5); }
.profile-primary, .profile-sidebar { display: grid; align-content: start; gap: var(--space-5); min-width: 0; }
.profile-primary > .profile-craft-section { margin: 0; }
.profile-primary > .experience-panel,
.profile-primary > .athlete-development,
.profile-primary > .dashboard-panel,
.profile-primary > #qualifications,
.profile-sidebar > .sidebar-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}
.profile-primary > #qualifications { border: 1px solid var(--colour-border); background: var(--colour-surface); box-shadow: var(--shadow-sm); }
.profile-primary > .athlete-development > .section-heading,
.profile-primary .profile-craft-heading { margin-bottom: var(--space-4); gap: var(--space-4); }
.profile-primary > .athlete-development > .section-heading h2,
.profile-primary .profile-craft-heading h2 { margin: 0; font-size: var(--font-size-xl); }
.profile-primary > .athlete-development > .section-heading p,
.profile-primary .profile-craft-heading p { margin-top: var(--space-2); color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.profile-primary > .athlete-development > .section-heading .eyebrow { display: block; margin-bottom: var(--space-2); }
.profile-primary .river-empty-state { padding: var(--space-4); gap: var(--space-3); }
.profile-primary .river-empty-state h3 { margin: 0; font-size: var(--font-size-md); }
.profile-primary .river-empty-state p { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); }
.profile-primary > .athlete-development > .section-heading > .button { padding: 0.8rem 1.25rem; }
.profile-sidebar > .sidebar-card > h2 { margin-block: var(--space-2); }
.profile-sidebar > .sidebar-card > p { margin: var(--space-2) 0 var(--space-4); }
.profile-sidebar > .sidebar-card > .button + .button { margin-top: var(--space-3); }
@media (max-width: 720px) {
  .profile-primary > .experience-panel,
  .profile-primary > .athlete-development,
  .profile-primary > .dashboard-panel,
  .profile-primary > #qualifications,
  .profile-sidebar > .sidebar-card { padding: var(--space-4); }
}

/* Native disclosures provide Enter/Space operation and announced expanded state. */
.experience-options > summary { position: absolute; top: var(--space-1); right: var(--space-1); width: 2.75rem; min-height: 2.75rem; padding: 0; list-style: none; color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.experience-options > summary::-webkit-details-marker { display: none; }
.experience-options > summary:hover { transform: none; background: var(--colour-surface); color: var(--colour-primary); }
.experience-options > summary:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: 1px; }
.experience-options-content { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--colour-border); text-align: left; }
.experience-options-content .experience-notes summary { min-height: 2.75rem; display: flex; align-items: center; }