/* Member workspace, scoped away from public articles, registration and staff. */
.tkl-member { background: #fcf9fa; }
.tkl-member .main__inner { max-width: 1180px; }
.tkl-member > .main__inner > .bread { max-width: none; }
.member-workspace { margin: 24px auto 64px; }
.member-workspace--signed-in { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.member-workspace .tkl-member__panel { max-width: 760px; margin: 0 auto; padding: 36px; background: #fff; border: 1px solid #e9dfe2; border-radius: 16px; overflow-wrap: anywhere; }
.member-workspace .member-auth-panel { max-width: 1050px; padding: 0; overflow: hidden; }
.member-sidebar { padding: 28px 16px; background: #fff; border: 1px solid #e9dfe2; border-radius: 14px; overflow-wrap: anywhere; }
.member-sidebar .tkl-member__tabs { display: grid; margin: 24px 0 0; overflow: visible; border: 0; mask-image: none; gap: 6px; }
.member-sidebar .tkl-member__tabs a { white-space: normal; padding: 12px; border: 0; border-radius: 8px; color: #66575e; }
.member-sidebar .tkl-member__tabs a[aria-current] { background: #fbeef2; color: #a22c43; }
.member-workspace .workspace-eyebrow { color: #a22c43; font-size: 12px; letter-spacing: .13em; font-weight: 700; margin: 0 0 12px; }
.member-workspace h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.5; }
.member-workspace .workspace-lead, .workspace-muted { color: #756770; }
.workspace-auth { display: grid; grid-template-columns: 1.1fr 1fr; }
.workspace-auth > section { padding: 44px; }
.workspace-auth-story { background: #fbeef2; padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; }
.workspace-auth-story h2 { font-family: "Yu Mincho", serif; font-size: 28px; line-height: 1.8; }
.workspace-auth-story .tkl-member__box { padding: 0; }
.workspace-section { margin-top: 28px; padding: 26px 0 0; border-top: 1px solid #e9dfe2; }
.workspace-section h2 { font-size: 20px; }
.tkl-ui .workspace-section-links { display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid #e9dfe2; padding: 12px 0; }
.workspace-section-links a { padding: 10px 0; }
.tkl-ui .workspace-password-toggle { min-height: 44px; font-size: 13px; margin-top: 8px; background: transparent; color: #67565e; border-color: #d6cbd0; }
.workspace-image-preview { margin: 16px 0; }
.workspace-image-preview img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; }
.workspace-image-preview figcaption { margin-top: 10px; color: #756770; font-size: 14px; }
@media(max-width: 800px) { .member-workspace--signed-in { grid-template-columns: 1fr; gap: 16px; } .member-sidebar { padding: 16px; } .member-sidebar > :is(p,strong) { display: none; } .member-sidebar__who { margin-bottom: 8px; } .member-sidebar .tkl-member__tabs { display: flex; flex-wrap: wrap; margin: 0; gap: 4px; } .member-sidebar .tkl-member__tabs a { font-size: 14px; padding: 8px 12px; } .workspace-auth { grid-template-columns: 1fr; } .workspace-auth > section { padding: 28px; } .workspace-auth-story { padding: 28px; } }
@media(max-width: 480px) { .member-workspace .tkl-member__panel { padding: 24px 20px; } .member-workspace .member-auth-panel { padding: 0; } }

.member-workspace--signed-in .tkl-member__panel { max-width: none; }

/* My page status and switches (2026-10-18). The switch is a submit button with role=switch on the my page (it saves at
   once) and a role=switch checkbox inside the profile form (saved with the form). Sizes are px: the theme shrinks rem. */
.tkl-member { --mw-rose: #a22c43; --mw-rose-soft: #fbeef2; --mw-rose-line: #ecd3db; --mw-line: #e9dfe2; --mw-muted: #756770; --mw-off: #8a7c83; --mw-off-ink: #5f5459; --mw-off-soft: #f3eff1; --mw-warn: #8a5300; --mw-warn-soft: #fff6e8; --mw-warn-line: #efd3a6; }
.tkl-ui button.tkl-switch, .tkl-ui input[type=checkbox].tkl-switch-input { -webkit-appearance: none; appearance: none; position: relative; flex: none; box-sizing: border-box; width: 52px; min-width: 52px; height: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--mw-off); cursor: pointer; transition: background-color .2s ease; }
.tkl-ui button.tkl-switch:hover, .tkl-ui input[type=checkbox].tkl-switch-input:hover { background: var(--mw-off-ink); }
.tkl-ui button.tkl-switch[aria-checked=true], .tkl-ui input[type=checkbox].tkl-switch-input:checked { background: var(--mw-rose); }
.tkl-ui button.tkl-switch[aria-checked=true]:hover, .tkl-ui input[type=checkbox].tkl-switch-input:checked:hover { background: #8a2438; }
.tkl-switch::after { content: ""; position: absolute; inset: -6px -4px; }
.tkl-switch__thumb, .tkl-switch-input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .2s ease; }
.tkl-switch[aria-checked=true] .tkl-switch__thumb, .tkl-switch-input:checked::before { transform: translateX(20px); }
.tkl-ui button.tkl-switch[aria-busy=true] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .tkl-ui button.tkl-switch, .tkl-ui input[type=checkbox].tkl-switch-input, .tkl-switch__thumb, .tkl-switch-input::before { transition: none; } }
@media (forced-colors: active) { .tkl-ui button.tkl-switch, .tkl-ui input[type=checkbox].tkl-switch-input { border: 2px solid ButtonText; } .tkl-switch__thumb, .tkl-switch-input::before { background: ButtonText; } }

.member-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; box-sizing: border-box; margin: 0; padding: 2px 12px 2px 10px; border-radius: 999px; background: var(--mw-off-soft); color: var(--mw-off-ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.member-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.member-status--on { background: var(--mw-rose-soft); color: var(--mw-rose); }
.member-status--on::before { background: currentColor; }
.member-status--todo { background: var(--mw-warn-soft); color: var(--mw-warn); }
.member-status--todo::before { background: currentColor; }
.workspace-privacy { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 6px; border-radius: 999px; background: var(--mw-off-soft); color: var(--mw-off-ink); font-size: 12px; font-weight: 700; line-height: 1.7; vertical-align: middle; }
.workspace-privacy .tkl-icon { width: 14px; height: 14px; flex-basis: 14px; }
.workspace-privacy--public { background: var(--mw-rose-soft); color: var(--mw-rose); }

.member-sidebar__who { display: flex; align-items: center; gap: 12px; }
.member-sidebar__who img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--mw-rose-line); }
.member-sidebar__who p { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.5; }
.member-workspace .member-sidebar__who .workspace-eyebrow { margin: 0; font-size: 10px; }
.tkl-member__tabs a { gap: 10px; }
.tkl-member__tabs .tkl-icon { width: 20px; height: 20px; flex-basis: 20px; color: #a8979f; }
.tkl-member__tabs a[aria-current] .tkl-icon { color: var(--mw-rose); }
.member-sidebar .tkl-member__tabs a { display: flex; }

.member-pass { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 24px; padding: 24px 28px; border: 1px solid var(--mw-rose-line); border-radius: 16px; background: linear-gradient(115deg, #fbeef2 0%, #fdf5f7 48%, #fff 100%); }
.member-pass__avatar { width: 88px; height: 88px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--mw-rose-line), 0 6px 16px rgba(162, 44, 67, .14); }
.member-pass__body { min-width: 0; }
.member-workspace .member-pass .workspace-eyebrow { margin-bottom: 4px; }
.member-workspace .member-pass h1 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; }
.member-pass__meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 8px 0 0; color: var(--mw-muted); font-size: 14px; }
.member-pass__meta strong { color: var(--tkl-ink); letter-spacing: .06em; }
.tkl-ui .member-pass__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 14px; padding: 0 18px; border: 1px solid var(--mw-rose-line); border-radius: 999px; background: #fff; color: var(--mw-rose); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tkl-ui .member-pass__link:hover { border-color: var(--mw-rose); }
.member-pass__link .tkl-icon { width: 18px; height: 18px; flex-basis: 18px; }

.tkl-ui .member-alert[role=status] { margin: 24px 0 0; padding: 16px 18px; border: 1px solid var(--mw-warn-line); border-inline-start: 4px solid #d08a1e; border-radius: 12px; background: var(--mw-warn-soft); }
.member-alert__title { display: flex; align-items: center; gap: 8px; color: var(--mw-warn); font-weight: 700; }
.tkl-ui .member-alert ul { margin: 8px 0 8px 1.4em; list-style: disc; }

.tkl-ui .member-pass { margin: 0; }
.tkl-ui .member-block { margin: 32px 0 0; }
.member-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 12px; }
.tkl-ui .member-block__head h2 { margin: 0; font-size: 19px; }
.member-block__head p { margin: 0; color: var(--mw-muted); font-size: 13px; }
.member-settings__list { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--mw-line); border-radius: 14px; background: #fff; list-style: none; }
.member-settings__list > li + li { border-top: 1px solid var(--mw-line); }
.member-setting { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin: 0; padding: 18px 20px; }
.member-setting__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mw-off-soft); color: var(--mw-off-ink); transition: background-color .2s, color .2s; }
.member-setting:has([aria-checked=true]) .member-setting__icon { background: var(--mw-rose-soft); color: var(--mw-rose); }
.member-setting__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member-setting__label { font-weight: 700; line-height: 1.55; }
.member-setting__note { color: var(--mw-muted); font-size: 13px; line-height: 1.65; }
.tkl-ui .member-setting__link { align-self: flex-start; margin-top: 2px; color: var(--mw-rose); font-size: 13px; text-decoration: underline; text-underline-offset: .2em; }
.member-setting__control { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; }
.member-setting__state { color: var(--mw-off-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.member-setting:has([aria-checked=true]) .member-setting__state { color: var(--mw-rose); }
.member-settings__live { margin: 10px 0 0; color: var(--mw-muted); font-size: 13px; }
.member-settings__live:empty { display: none; }
.member-settings__live.is-error { color: var(--tkl-error); }

/* Japanese labels break between phrases where the browser supports it, not inside a word. */
.member-pass h1, .member-setting__label, .member-switch-row__label, .member-tile__title, .member-tile__text, .member-block__head h2, .member-field-head h2, .member-image-card__head h2 { word-break: auto-phrase; }
.member-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tkl-ui .member-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 14px; min-height: 92px; box-sizing: border-box; padding: 16px; border: 1px solid var(--mw-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tkl-ui .member-tile:hover { border-color: #d9a9b5; box-shadow: 0 4px 14px rgba(162, 44, 67, .08); }
.member-tile__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mw-rose-soft); color: var(--mw-rose); }
.member-tile__body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.member-tile__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; }
.member-tile__text { color: var(--mw-muted); font-size: 13px; line-height: 1.6; }
.member-tile .member-status { margin-top: 6px; }
.member-tile__go { width: 20px; height: 20px; flex-basis: 20px; color: #b9a9b0; }

.tkl-ui .member-benefits { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin: 32px 0 0; padding: 24px; border-radius: 14px; background: #fcf4f6; }
.member-benefits__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--mw-rose); }
.member-workspace .member-benefits .workspace-eyebrow { margin-bottom: 6px; }
.tkl-ui .member-benefits h2 { margin: 0 0 8px; font-size: 18px; }
.member-benefits p { margin: 0; }
.tkl-ui .member-benefits .tkl-button { margin: 16px 0 0; }
.member-benefits .workspace-muted { margin-top: 10px; font-size: 14px; }

.member-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.member-workspace .member-page-head h1 { margin: 0; }
.tkl-ui.tkl-member__panel .member-page-head__action { margin: 0; }
.member-identity { display: flex; align-items: center; gap: 14px; margin: 20px 0; padding: 14px 16px; border-radius: 12px; background: #fcf6f8; }
.member-identity img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--mw-rose-line); }
.member-identity p { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.5; }
.member-identity span { color: var(--mw-muted); font-size: 13px; letter-spacing: .04em; }
.member-privacy-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--mw-off-soft); color: var(--mw-off-ink); font-size: 14px; }
.member-privacy-note .tkl-icon { width: 20px; height: 20px; flex-basis: 20px; margin-top: 2px; }
.member-field-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--mw-line); }
.tkl-ui .member-field-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; }
.member-field-head h2 .tkl-icon { color: var(--mw-rose); }
.member-field-head + p { margin-top: 10px; }
.tkl-ui .member-profile dl.is-empty dd { color: #a0939a; }
.tkl-ui .member-profile dl:has(+ .member-field-head) { border-bottom: 0; }
.member-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; padding: 14px 16px; border: 1px solid var(--mw-line); border-radius: 12px; background: #fff; }
.member-switch-row:has(:checked) { border-color: #e4bcc7; background: #fffafb; }
.member-switch-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkl-ui .member-switch-row label.member-switch-row__label { display: block; min-height: 0; margin: 0; font-weight: 700; line-height: 1.55; cursor: pointer; }
.tkl-ui .member-switch-row .member-switch-row__note { margin: 0; padding: 0; color: var(--mw-muted); font-size: 13px; line-height: 1.65; }
.tkl-ui .member-switches { margin: 36px 0 0; padding: 0; border: 0; }
.tkl-ui .member-switches legend { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; margin-bottom: 4px; padding: 24px 0 0; border-top: 1px solid var(--mw-line); font-size: 19px; font-weight: 700; }
.member-switches legend .tkl-icon { color: var(--mw-rose); }
.member-state-list { margin: 12px 0 0; padding: 0; list-style: none; }
.member-state-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.member-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.tkl-ui .member-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mw-rose); text-decoration: underline; text-underline-offset: .2em; }
.member-links .tkl-icon { width: 18px; height: 18px; flex-basis: 18px; }
.member-bio { padding: 12px 14px; border-inline-start: 3px solid var(--mw-rose-line); background: #fffafb; white-space: pre-wrap; }
.member-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.member-chip { padding: 2px 10px; border: 1px solid var(--mw-rose-line); border-radius: 999px; font-size: 13px; }
.member-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.tkl-ui .member-form-actions button { margin: 0; }

.member-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.tkl-ui .member-image-card { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--mw-line); border-radius: 14px; background: #fff; }
.member-image-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tkl-ui .member-image-card__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.member-image-card__head h2 .tkl-icon { color: var(--mw-rose); }
.member-image-card__current { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 0; padding: 20px; border-radius: 12px; background: #fcf6f8; }
.member-image-card__current img { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; }
.member-image-card--avatar .member-image-card__current img, .member-image-card--avatar .member-image-card__empty { border-radius: 50%; }
.member-image-card__empty { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; box-sizing: border-box; border: 2px dashed #e0cfd5; border-radius: 12px; color: #c9b5bd; }
.member-image-card__empty .tkl-icon { width: 40px; height: 40px; flex-basis: 40px; }
.tkl-ui .member-image-card form label { display: block; font-size: 14px; }
.tkl-ui .member-image-card [data-image-status]:empty { display: none; }
.tkl-ui .workspace-section-links a { display: inline-flex; align-items: center; gap: 6px; }
.workspace-section-links .tkl-icon { width: 18px; height: 18px; flex-basis: 18px; color: var(--mw-rose); }
.tkl-ui .workspace-section-links + .workspace-section { padding-top: 4px; border-top: 0; }
.member-current-value { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 10px; background: #fcf6f8; }
.member-current-value span { color: var(--mw-muted); font-size: 13px; }

@media (max-width: 800px) { .member-sidebar .tkl-member__tabs .tkl-icon { width: 18px; height: 18px; flex-basis: 18px; } .member-sidebar .tkl-member__tabs a { gap: 6px; } }
@media (max-width: 700px) { .member-image-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .member-pass { align-items: start; gap: 16px; padding: 20px; }
    .member-pass__avatar { width: 64px; height: 64px; }
    .member-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .member-workspace .tkl-member__panel { padding: 24px 16px; }
    /* The member card restacks: the avatar sits beside the eyebrow and the ID, the greeting and the link take the full width. */
    .member-pass { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "avatar eyebrow" "avatar meta" "title title" "link link"; gap: 0 14px; }
    .member-pass__body { display: contents; }
    .member-pass__avatar { grid-area: avatar; width: 56px; height: 56px; }
    .member-workspace .member-pass .workspace-eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
    .member-pass__meta { grid-area: meta; align-self: start; margin-top: 2px; font-size: 13px; }
    .member-workspace .member-pass h1 { grid-area: title; margin-top: 14px; font-size: 20px; }
    .tkl-ui .member-pass__link { grid-area: link; justify-self: start; }
    /* The label shares its row with the icon; the note takes the full width, and the state and switch close the row under it. */
    .member-setting { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "icon label label" "note note note" "link link control"; gap: 6px 12px; padding: 16px 14px; }
    .member-setting__text { display: contents; }
    .member-setting__icon { grid-area: icon; width: 32px; height: 32px; border-radius: 9px; }
    .member-setting__icon .tkl-icon { width: 20px; height: 20px; flex-basis: 20px; }
    .member-setting__label { grid-area: label; align-self: center; }
    .member-setting__note { grid-area: note; }
    .tkl-ui .member-setting__link { grid-area: link; }
    .tkl-ui .member-setting__link { align-self: center; }
    .member-setting__control { grid-area: control; flex-direction: row-reverse; gap: 10px; min-width: 0; margin-top: 4px; }
    .tkl-ui .member-benefits { grid-template-columns: 1fr; padding: 20px; }
}