#share-dialog { width: min(520px, calc(100% - 24px)); padding: 22px 24px; overflow-y: auto; }
#share-dialog .dialog-header { gap: 16px; }
#share-dialog h2 { margin: 0; font-size: 21px; color: var(--ink); }
#share-dialog .close-button { flex-shrink: 0; }
#share-preview { display: block; width: 100%; min-height: 280px; resize: none; margin: 18px 0; padding: 16px; border: 1px solid #d8dfd0; border-radius: 12px; background: #f1f5eb; color: var(--ink); font: 13px/1.8 "Noto Sans Mono CJK JP", "MS Gothic", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#share-preview:focus-visible { outline: 3px solid #64823d; outline-offset: 3px; }
.share-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.share-service { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #cbd5c1; border-radius: 10px; font-size: 14px; font-weight: 700; background: white; }
.share-service:hover { background: #edf3e5; }
.share-service-x { background: var(--ink); border-color: var(--ink); color: white; }
.share-service-x:hover { background: #334c3d; }
.share-service[aria-expanded="true"] { border-color: #608843; background: #edf3e5; }
.share-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.share-tools .text-button { min-height: 44px; font-size: 13px; }
#share-status { color: var(--green-dark); font-size: 12px; line-height: 1.7; }
#share-status:not(:empty) { margin-top: 8px; }
.shared-report, .shared-error { max-width: 640px; margin: 28px auto; }
.shared-report h1, .shared-error h1 { font-size: 22px; text-align: center; margin-bottom: 24px; }
.shared-report .report-side { border: 1px solid var(--line); border-radius: 18px; }
.shared-report .distribution-heading { align-items: baseline; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.shared-report .distribution-heading > strong { margin-left: 0; }
.distribution-percentile { font-size: 12px; color: var(--muted); }
.shared-details { margin-top: 24px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.shared-details h2 { font-size: 18px; }
#shared-profile { margin: 8px 0 14px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.category-content .breakdown-row { row-gap:3px; margin-block:6px; }
.category-content { grid-template-columns:min(40%,140px) minmax(0,1fr) 4.8rem; }
.axis-result { display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:0; }
.axis-percentile { font-size:10px; line-height:1.3; font-weight:400; color:#3e5d2e; white-space:nowrap; }
.shared-details .breakdown-row { padding-block:0; }
.shared-details .axis-name { line-height:1.7; }
.axis-answer { grid-column: 1 / -1; margin:0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; color: var(--muted); }
.communication-answers { display:grid; gap:3px; }
.collection-answers { display:grid; gap:3px; }
.collection-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:baseline; }
.collection-score { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); }
.answer-lines { display:grid; gap:2px; }
.education-answer > span:first-child { color:var(--ink); }
.asset-details { grid-column:1 / -1; margin:0 0 6px; font-size:11px; line-height:1.4; color:var(--muted); }
.asset-details > div { display:grid; grid-template-columns:4em minmax(0,1fr); gap:8px; margin:3px 0; }
.asset-details dt { font-weight:600; color:var(--ink); }
.asset-details dd { margin:0; overflow-wrap:anywhere; }
.communication-answer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:12px; }
.communication-rating { white-space:nowrap; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
.shared-error p { text-align: center; font-size: 14px; line-height: 1.8; }
.shared-actions { display: flex; justify-content: center; padding-bottom: 32px; }
.shared-actions .primary-button { width: min(100%, 400px); font-size: 16px; min-height: 54px; }
@media (max-width: 900px) {
  .shared-page main { padding-bottom: 24px; }
  body.shared-page { padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
  .shared-report { margin-top: 22px; }
  .shared-report h1, .shared-error h1 { font-size: 20px; }
  .shared-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fbfcf7; border-top: 1px solid var(--line); }
  #share-dialog { margin: auto auto 0; width: 100%; max-width: 520px; padding: 12px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
  #share-dialog .dialog-header { padding: 0; }
  #share-preview { margin-block: 14px; padding: 12px; font-size: 13px; }
}
@media (max-width: 360px) {
  #share-dialog { padding-inline: 12px; }
  #share-preview { padding: 10px; font-size: 12px; }
  .share-service { font-size: 12px; }
}

/* Sharing controls */
#share-dialog { width:min(560px,calc(100% - 32px)); padding:0 24px 20px; max-height:90dvh; border-radius:20px; }
#share-dialog .dialog-header { position:sticky; top:0; z-index:2; gap:12px; padding:20px 0 16px; background:var(--surface,#fff); border-bottom:1px solid var(--line); }
#share-dialog h2 { margin-right:auto; font-size:19px; white-space:nowrap; }
#share-dialog .close-button { width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:transparent; color:var(--muted); }
#share-dialog .close-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
#share-dialog .close-button:hover { background:#ffffff0b; color:var(--ink); }
#share-dialog .share-preview-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 12px; border:1px solid #9386b8; border-radius:9px; background:#cbbaff15; color:#dfd2ff; font-size:12px; font-weight:700; white-space:nowrap; }
#share-dialog .share-preview-button:hover { background:#cbbaff28; }
.share-filter-controls { margin-top:20px; }
.share-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
#share-dialog .share-section-heading h3 { margin:0; font-size:13px; }
.share-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.share-presets button { position:relative; padding:12px 10px 12px 14px; min-height:68px; border:1px solid var(--line); border-radius:10px; text-align:left; background:var(--paper); transition:background .15s,border-color .15s; }
.share-presets button strong { display:block; padding-right:12px; font-size:12px; font-weight:600; line-height:1.6; }
.share-presets button span { display:block; margin-top:3px; font-size:10px; line-height:1.6; color:var(--muted); }
.share-presets button:hover { border-color:#8d819f; }
.share-presets button[aria-pressed=true] { background:#cbbaff12; border-color:#cbbaff; box-shadow:inset 0 0 0 1px #cbbaff28; }
.share-presets button[aria-pressed=true]::after { content:'✓'; position:absolute; right:10px; top:12px; color:#d8c8ff; font-size:12px; }
.share-disclosure { border-top:1px solid var(--line); }
.share-disclosure summary { display:flex; justify-content:space-between; align-items:center; gap:12px; list-style:none; cursor:pointer; padding:14px 0; min-height:48px; font-size:12px; font-weight:600; }
.share-disclosure summary::-webkit-details-marker { display:none; }
.share-disclosure summary > span { font-size:16px; color:var(--muted); transition:transform .15s; }
.share-disclosure[open] summary > span { transform:rotate(45deg); }
#share-item-controls { max-height:300px; overflow:auto; overscroll-behavior:contain; padding:0 3px 8px; scrollbar-width:thin; }
.share-item-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.share-item-control:last-child { border-bottom:0; }
.share-item-control > span { line-height:1.6; }
.share-item-choices { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.share-item-choices button { min-height:36px; padding:5px 7px; border-radius:5px; color:var(--muted); font-size:10px; white-space:nowrap; }
.share-item-choices button[aria-pressed=true] { background:#49434f; color:#eee5ff; }
#share-dialog #share-preview { min-height:0; height:230px; margin:0 0 16px; font-size:12px; border-color:var(--line); border-radius:10px; }
#share-dialog .share-services { padding-top:16px; border-top:1px solid var(--line); }
#share-dialog .share-service { min-height:46px; font-size:13px; }
#share-dialog .share-tools { margin-top:8px; gap:8px 24px; }
#share-dialog .share-tools .text-button { font-size:11px; min-height:36px; }
@media(max-width:600px) {
  #share-dialog { width:100%; margin:auto auto 0; max-width:560px; padding:0 18px calc(12px + env(safe-area-inset-bottom,0px)); border-radius:20px 20px 0 0; max-height:92dvh; }
  #share-dialog .dialog-header { padding:16px 0; gap:10px; }
}
@media(max-width:360px) {
  #share-dialog { padding-inline:12px; }
  #share-dialog h2 { font-size:17px; }
  #share-dialog .share-preview-button { padding-inline:8px; font-size:11px; }
  .share-presets button { padding-left:10px; }
  .share-presets button strong { font-size:11px; }
  .share-presets button span { font-size:9px; }
  .share-item-control { gap:6px; font-size:11px; }
  .share-item-choices button { padding-inline:5px; font-size:9px; }
}


#share-dialog .share-review { border-top:1px solid var(--line); padding:16px 0; }
#share-review-note { margin:0 0 12px; font-size:11px; line-height:1.8; color:var(--ink); white-space:nowrap; }
#share-dialog .share-review .share-preview-button { min-height:44px; font-size:13px; }
#share-dialog .share-review + .share-services { padding-top:0; border-top:0; }

#share-custom-toggle { display:flex; align-items:center; gap:8px; min-height:36px; padding:6px 0 6px 12px; font-size:11px; font-weight:600; white-space:nowrap; }
#share-custom-toggle > span { font-size:16px; color:var(--muted); transition:transform .15s; }
#share-custom-toggle[aria-expanded=true] > span { transform:rotate(45deg); }
#share-custom-settings { margin-top:12px; }
#share-dialog .share-review { margin-top:16px; }

@media(max-width:360px) { #share-dialog .share-services { gap:6px; } #share-dialog .share-service { font-size:11px; gap:3px; } }

@media(max-width:360px) { #share-review-note { font-size:9px; } }

#share-dialog .share-service { flex-direction:column; gap:6px; min-height:60px; min-width:0; padding:10px 4px; }
#share-dialog .share-service-label { display:block; white-space:nowrap; font-size:12px; line-height:16px; font-weight:600; }
.share-service-icon { display:block; flex-shrink:0; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:360px) { #share-dialog .share-service-label { font-size:11px; } }

.share-levels{--rating-count:10;min-width:0;border:0;padding:0;margin:16px 0 10px}
#share-dialog .share-levels .rating-points input:checked+.rating-dot{background:#b5a0ff;border-color:#b5a0ff;box-shadow:0 0 0 4px #b5a0ff26}
#share-dialog .share-levels .rating-points input:focus-visible+.rating-dot{outline-color:#b5a0ff}
#share-filter-summary{margin-bottom:14px;min-height:1.6em}

#x-post-dialog { width:min(440px,calc(100% - 32px)); max-height:90dvh; padding:24px; border-radius:20px; overflow-y:auto; }
#x-post-dialog .dialog-header { gap:12px; margin-bottom:20px; padding:0; background:transparent; }
#x-post-dialog h2 { margin:0; font-size:20px; color:var(--ink); }
#x-post-dialog .close-button { flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--muted); }
#x-post-dialog .close-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
#x-post-dialog p { font-size:14px; line-height:1.8; }
#x-post-note { color:var(--muted); }
.x-post-actions { display:grid; gap:10px; margin-top:22px; }
.x-post-actions button,.x-post-actions a { width:100%; min-height:46px; padding:10px 12px; font-size:14px; text-align:center; text-decoration:none; }
#x-post-status { margin:14px 0 0; color:var(--muted); }
#x-post-status:empty { display:none; }
