/* My Details (Figma 22316:135528 … 137079) and its forms (135675, 135714, 140939, 140978, 141047, 141076, 141722, 141105). */

/* ---------- My Details shell ---------- */
.screen.md { display: flex; flex-direction: column; overflow: hidden; background: var(--goku); }
.md-top { flex: none; padding-top: var(--sb-dash); background: var(--goku); }
.md-head { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px 20px; }
.md-head h1 { flex: 1; min-width: 0; }
.md-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.md-back img { transform: rotate(180deg); }
.md-back:hover { background: var(--heles); }
.md-tabs { display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto; scrollbar-width: none; }
.md-tabs::-webkit-scrollbar { display: none; }
.md-tab { flex: none; height: 40px; padding: 0 12px; border-radius: var(--radius-s-sm); font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap; }
.md-tab:hover { color: var(--bulma); }
.md-tab.is-on { background: var(--gohan); color: var(--bulma); }
.md-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 40px; }
.md-body::-webkit-scrollbar { display: none; }

/* Sections, cards, label/value rows */
.md-sec { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; }
.md-sec-title { padding: 0 16px; font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zeno); }
.md-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.md-card > * { position: relative; }
.md-card > :not(.md-colhead) + :not(.md-colhead)::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--beerus); pointer-events: none;
}
.md-row { display: flex; align-items: center; gap: 24px; padding: 8px 16px; background: var(--gohan); font: 400 16px/24px var(--font); }
.md-row.tight { gap: 8px; }
.md-label { flex: 1; min-width: 0; color: var(--trunks); }
.md-val { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bulma); }
.md-val.is-accent { color: var(--piccolo); }
.md-val.is-muted { color: var(--trunks); }
.md-val.is-large { font-size: 18px; line-height: 28px; }
.md-row.stack { flex-direction: column; align-items: flex-start; gap: 0; }
.md-row.stack .md-label { flex: none; }
.md-row.stack .md-val { max-width: none; white-space: normal; }
.md-edit { flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding-left: 1px; border-radius: 6px; }
.md-edit:hover { background: var(--jiren); }
.md-colhead {
  display: flex; align-items: center; gap: 24px; padding: 4px 16px;
  background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); font: 400 14px/24px var(--font); color: var(--trunks);
}
.md-colhead span:first-child { flex: 1; min-width: 0; }
.md-colhead span:last-child:not(:first-child) { text-align: right; }

/* Growth */
.md-gsec { gap: 8px; }
.md-ghead { display: flex; align-items: center; gap: 10px; min-height: 24px; padding-left: 16px; }
.md-ghead .md-sec-title { flex: 1; padding: 0; }
.md-addnew { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 4px; font: 700 12px/16px var(--font); color: var(--piccolo); }
.md-addnew:hover { background: var(--jiren); }
.md-glist { display: flex; flex-direction: column; gap: 4px; }
.md-gcard { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; border-radius: var(--radius-i-md); background: var(--gohan); }
.md-gbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.md-gtop { display: flex; flex-direction: column; gap: 4px; }
.md-gtitle { font: 400 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-metas { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.md-meta { display: flex; align-items: center; gap: 4px; min-height: 16px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.md-meta img { flex: none; }
.md-gfoot { font: 400 12px/16px var(--font); color: var(--trunks); }
.md-gfoot b { font-weight: 700; }
.md-chip { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 4px; background: var(--goku); font: 700 12px/16px var(--font); color: var(--piccolo); }
.md-chip.stack { display: block; padding: 4px 8px; text-align: center; }
.md-chip:hover { background: var(--jiren); }
.md-done { flex: none; padding: 4px 8px; font: 700 12px/16px var(--font); color: var(--roshi); text-align: center; }
.md-empty { padding: 12px 16px; border-radius: 12px; background: var(--gohan); font: 400 14px/20px var(--font); color: var(--trunks); }
.md-contrib-head span:first-child, .md-contrib-main span:first-child { flex: none; width: 80px; }
.md-contrib-head span:nth-child(2), .md-contrib-main span:nth-child(2) { flex: 1; min-width: 0; }
.md-contrib-head span:last-child { flex: none; }
.md-contrib { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px; background: var(--gohan); color: var(--trunks); }
.md-contrib-main { display: flex; align-items: center; gap: 24px; font: 400 16px/24px var(--font); }
.md-contrib-main span:first-child, .md-contrib-main span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-contrib-main span:last-child { flex: none; width: 40px; text-align: right; }
.md-contrib p { font: 400 12px/16px var(--font); }

/* Documents */
.md-docs { display: flex; flex-direction: column; gap: 8px; }
.md-doc { display: flex; align-items: center; gap: 24px; padding: 12px 16px; border-radius: 8px; background: var(--gohan); }
.md-doc-name { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-doc-acts { flex: none; display: flex; align-items: center; gap: 12px; }
.md-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.md-icon:hover { background: var(--heles); }
.md-upload {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 16px 8px 8px;
  border-radius: var(--radius-i-sm); background: var(--beerus); font: 700 14px/24px var(--font); color: var(--bulma);
}
.md-upload:hover { background: #D6D6D6; }
.md-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px; border-radius: 12px; background: var(--goku); text-align: center; }
.md-preview img { border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 8px; object-fit: cover; margin-bottom: 8px; }
.md-preview-name { font: 700 16px/24px var(--font); overflow-wrap: anywhere; }
.md-preview-meta { font: 400 12px/16px var(--font); color: var(--trunks); }

/* ---------- Form pages ---------- */
.screen.pf { display: flex; flex-direction: column; overflow: hidden; background: var(--gohan); }
.screen.pf.is-grey { background: var(--goku); }
.pf-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 24px; }
.pf-scroll::-webkit-scrollbar { display: none; }
.pf.is-grey .pf-scroll { padding-top: var(--sb-dash); }
.pf-white { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb) + 24px) 20px 32px; }
.pf-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.pf-head h1 { flex: 1; min-width: 0; }
.pf-back { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.pf-back:hover { background: var(--heles); }
.pf-form { display: flex; flex-direction: column; gap: 24px; }
.pf-form > .input-info { margin-top: -16px; }

.pf-foot { flex: none; padding: 16px 20px 0; background: var(--gohan); border-top: 1px solid var(--beerus); filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.08)); }
.pf-foot .home-indicator { height: 34px; }
.pf-foot-row { display: flex; gap: 16px; }
.pf-btn { flex: 1; min-width: 0; padding: 16px 24px; border-radius: var(--radius-i-sm); font: 600 16px/24px var(--font); text-align: center; }
.pf-btn.primary { background: var(--piccolo); color: var(--goten); }
.pf-btn.primary:disabled { background: var(--beerus); cursor: default; }
.pf-btn.primary:not(:disabled):hover { filter: brightness(1.08); }
.pf-btn.secondary { background: var(--goku); color: var(--piccolo); }
.pf-btn.secondary:hover { background: #EDEDED; }

/* Floating-label text input / select (MDS-Public-TW-Text input) */
.pf-field {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 15px;
  border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); text-align: left; cursor: text;
}
label.pf-field, .pf-field.is-readonly { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
.pf-field.is-filled { padding: 11px 15px 7px; gap: 16px; }
label.pf-field.is-filled, .pf-field.is-readonly { gap: 0; }
.pf-field:focus-within { border-color: var(--piccolo); }
.pf-field-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-label { display: none; font: 400 12px/12px var(--font); color: var(--trunks); }
.pf-field.is-filled .pf-label { display: block; }
.pf-field input, .pf-field textarea { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/24px var(--font); color: var(--bulma); }
.pf-field input::placeholder, .pf-field textarea::placeholder { color: var(--trunks); }
.pf-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pf-field input::-webkit-outer-spin-button, .pf-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-value { font: 400 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-select { cursor: pointer; }
.pf-select:not(.is-filled) .pf-value { color: var(--trunks); }
.pf-select:not(:disabled):hover { border-color: #CFCFCF; }
.pf-select img { flex: none; }
.pf-field.is-disabled, .pf-field.is-readonly { background: var(--beerus); border-color: var(--beerus); cursor: default; }
.pf-area, .pf-area.is-filled { display: block; padding: 0; min-height: 88px; }
.pf-area textarea { display: block; min-height: 86px; padding: 15px; resize: vertical; }
.pf-hours { gap: 16px; }
.pf-stepper { position: relative; flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.pf-stepper button { position: absolute; left: 0; width: 24px; height: 12px; border-radius: 4px; }
.pf-stepper button:first-of-type { top: 0; }
.pf-stepper button:last-of-type { bottom: 0; }
.pf-stepper button:hover { background: var(--heles); }

/* Starts / Ends date rows */
.pf-dates { display: flex; flex-direction: column; gap: 16px; padding: 15px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); }
.pf-date-row { display: flex; align-items: center; gap: 10px; }
.pf-date-label { flex: 1; font: 400 16px/24px var(--font); color: rgba(0, 0, 0, 0.25); }
.pf-chip { position: relative; flex: none; padding: 4px 8px; border-radius: 4px; background: var(--heles); font: 400 16px/24px var(--font); color: var(--piccolo); cursor: pointer; }
.pf-chip:hover { background: var(--jiren); }
.pf-chip.is-error { color: var(--dodoria); }
.pf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pf-divider { display: block; height: 1px; background: var(--beerus); }

/* Attachment card */
.pf-attach { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding: 15px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); }
.pf-attach-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.pf-attach-title { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: var(--trunks); }
.pf-attach-title small { font-size: 14px; }
.pf-icon-btn { flex: none; display: grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 6px; }
.pf-icon-btn:hover { background: var(--heles); }
.pf-files { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--beerus); border-radius: 8px; }
.pf-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; }
.pf-file + .pf-file { border-top: 1px solid var(--beerus); }
.pf-thumb { flex: none; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; object-fit: cover; }
.pf-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-file-name { font: 400 14px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-file-meta { font: 400 12px/16px var(--font); color: var(--trunks); }
.pf-file-acts { flex: none; display: flex; gap: 4px; }
.pf-file-acts .pf-icon-btn { width: 32px; height: 32px; }
.pf-add { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--radius-i-sm); background: var(--piccolo); font: 700 14px/24px var(--font); color: var(--goten); }
.pf-add:hover { filter: brightness(1.08); }

/* Request To segmented control */
.pf-seg-card { display: flex; flex-direction: column; gap: 24px; padding: 15px; border: 1px solid var(--beerus); border-radius: 8px; background: var(--gohan); }
.pf-seg-title { font: 400 16px/24px var(--font); color: var(--trunks); }
.pf-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-i-md); background: var(--goku); }
.pf-seg-btn { text-align: center; flex: 1; min-width: 0; padding: 8px 16px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--bulma); }
.pf-seg-btn:not(.is-on):hover { background: var(--heles); }
.pf-seg-btn.is-on { background: var(--piccolo); color: var(--gohan); }

/* ---------- Edit contact / email ---------- */
.ec-intro { padding: 12px 20px; font: 400 16px/24px var(--font); color: var(--trunks); }
.md-sec.ec-block { gap: 16px; align-items: center; }
.md-sec.ec-inner { width: 100%; padding: 0; }
.ec-country { display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px; background: var(--gohan); font: 400 16px/24px var(--font); color: var(--bulma); text-align: left; }
.ec-country:hover { background: #FAFAFA; }
.ec-input { display: flex; padding: 16px; background: var(--gohan); cursor: text; }
.ec-input input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/24px var(--font); color: var(--bulma); }
.ec-input input::placeholder { color: var(--trunks); }
.ec-input input:disabled { cursor: not-allowed; }
.md-card:focus-within { outline: 1px solid var(--piccolo); outline-offset: -1px; }
.ec-send { width: 320px; max-width: 100%; padding: 8px 16px; border-radius: var(--radius-i-sm); background: var(--beerus); font: 700 14px/24px var(--font); color: var(--bulma); }
.ec-send:not(:disabled):hover { background: #D6D6D6; }
.ec-send:disabled { color: rgba(0, 0, 0, 0.32); cursor: default; }
.ec-err:empty { display: none; }
.ec-err { padding: 4px 16px 0; }
.ec-note { display: flex; align-items: flex-start; gap: 8px; font: 400 14px/20px var(--font); color: var(--trunks); }
.ec-note img { flex: none; }
.ee-old { padding: 16px; background: var(--gohan); font: 400 16px/24px var(--font); color: var(--trunks); text-align: center; overflow-wrap: anywhere; }

/* ---------- Add feedback ---------- */
.fb-list { display: flex; flex-direction: column; gap: 24px; padding: 12px 20px 0; }
.fb-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; background: var(--gohan); }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-head h2 { flex: 1; font: 700 16px/24px var(--font); color: var(--bulma); }
.fb-toggle { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; transition: transform .15s; }
.fb-toggle.is-closed { transform: rotate(180deg); }
.fb-toggle:hover { background: var(--heles); }
.fb-body[hidden] { display: none; }
.fb-details { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--heles); }
.fb-kv { display: flex; align-items: flex-start; gap: 2px; font: 400 12px/16px var(--font); }
.fb-kv span { flex: 1; min-width: 0; color: var(--trunks); }
.fb-kv span:first-child { font-weight: 500; color: var(--bulma); }
.fb-table { border: 1px solid var(--beerus); border-radius: 8px; overflow: hidden; background: linear-gradient(var(--heles), var(--heles)), var(--gohan); }
.fb-th, .fb-tr { display: flex; gap: 12px; padding: 12px; font: 400 14px/24px var(--font); }
.fb-th { align-items: flex-end; background: var(--heles); color: var(--piccolo); }
.fb-rows { background: var(--goku); }
.fb-tr { align-items: center; border-bottom: 1px solid var(--beerus); color: var(--bulma); }
.fb-th > span:first-child, .fb-tr > span:first-child { flex: none; width: 30px; }
.fb-th > span:nth-child(2), .fb-tr > span:nth-child(2) { flex: 1; min-width: 0; }
.fb-th > span:last-child, .fb-tr > span:last-child { flex: none; width: 96px; display: flex; justify-content: center; }
.fb-select {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 4px 8px 4px 12px; border: 1.5px solid #55595E;
  border-radius: var(--radius-i-sm); font: 400 14px/24px var(--font); color: var(--trunks); white-space: nowrap;
}
.fb-select.has-value { color: var(--bulma); }
.fb-select:hover { background: var(--heles); }
.fb-select[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(78, 70, 180, 0.2); }