/* Loaded only by the partners page. Text remains HTML at every viewport. */
.hsp-diagram { margin: 28px 0; padding: 24px; border: 1px solid #c7dce6; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); scroll-margin-top: 100px; }
.hsp-diagram * { min-width: 0; }
.hsp-diagram p { margin: 0; }
.hsp-diagram h3, .hsp-diagram h4 { margin: 0; }
.hsp-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hsp-arrow { display: block; width: 48px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hsp-blue { --hsp-color: #086998; --hsp-pale: #eef7fd; }
.hsp-amber { --hsp-color: #946016; --hsp-pale: #fff8eb; }
.hsp-green { --hsp-color: #08776a; --hsp-pale: #edf9f5; }
.hsp-rel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr) 64px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.hsp-panel { border: 2px solid var(--hsp-color); border-radius: 16px; background: var(--hsp-pale); overflow: hidden; }
.hsp-panel-title { display: flex; align-items: center; gap: 10px; padding: 16px; background: var(--hsp-color); color: #fff; font-size: 21px; line-height: 1.5; }
.hsp-panel-title .hsp-icon { width: 28px; height: 28px; }
.hsp-panel-body { padding: 18px 16px; }
.hsp-place-owner { display: grid; gap: 6px; text-align: center; color: #164861; font-size: 16px; line-height: 1.6; }
.hsp-place-owner span { font-size: 15px; }
.hsp-place-tree { margin-top: 16px; }
.hsp-node { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px 8px; border: 1px solid #afcfdf; border-radius: 10px; background: #fff; color: #164861; font-size: 17px; line-height: 1.5; }
.hsp-tree-arrow { display: block; width: 0; height: 18px; margin: 0 auto; border-left: 2px solid #086998; position: relative; }
.hsp-tree-arrow::after { content: ''; position: absolute; bottom: 1px; left: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #086998; }
.hsp-rel-link { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; color: #0b637c; text-align: center; font-size: 15px; line-height: 1.6; font-weight: 700; }
.hsp-example { display: inline-block; font-size: 14px; color: #795014; background: #f8ecd2; border-radius: 999px; padding: 4px 10px; }
.hsp-diagram .hsp-case-title { color: #513a16; font-size: 23px; font-weight: 800; line-height: 1.5; margin: 12px 0 16px; }
.hsp-case-title span { display: inline-block; }
.hsp-case-fields { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px 8px; margin: 0; color: #513a16; font-size: 16px; line-height: 1.7; }
.hsp-case-fields dt { font-weight: 700; }
.hsp-case-fields dd { margin: 0; }
.hsp-state { display: inline-block; padding: 2px 12px; border-radius: 999px; color: #795014; background: #f8e7b7; font-weight: 700; }
.hsp-case-records { display: flex; flex-wrap: wrap; gap: 10px 16px; border-top: 1px solid #e2cc9f; padding-top: 18px; margin-top: 18px; color: #795014; font-size: 16px; }
.hsp-case-records span { display: flex; gap: 6px; align-items: center; }
.hsp-company-label { color: #0e5f54; font-size: 15px; line-height: 1.7; text-align: center; }
.hsp-company-list { display: grid; gap: 12px; margin-top: 16px; }
.hsp-company { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border: 1px solid #b8d8ce; border-radius: 10px; color: #155e55; background: #fff; font-size: 18px; line-height: 1.5; }
.hsp-company.is-assigned { border: 2px solid #08776a; background: #e0f3ea; }
.hsp-company > span { margin-left: auto; font-size: 14px; border-radius: 999px; background: #08776a; color: #fff; padding: 3px 8px; }
.hsp-return-flow { display: grid; grid-template-columns: 1fr 180px 1fr; grid-template-areas: 'confirm link report'; gap: 16px; margin-top: 22px; padding: 18px; border-radius: 14px; background: #edf7f7; color: #0e5f54; }
.hsp-return-report { grid-area: report; }
.hsp-return-confirm { grid-area: confirm; }
.hsp-return-report, .hsp-return-confirm { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 18px; line-height: 1.7; }
.hsp-return-link { grid-area: link; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; font-size: 15px; line-height: 1.6; font-weight: 700; }
.hsp-return-link .hsp-arrow { transform: rotate(180deg); }
.hsp-diagram figcaption { color: #52677b; font-size: 15px; line-height: 1.85; margin-top: 18px; }
.hsp-manager-scope { border: 2px solid #086998; background: #eef7fd; border-radius: 18px; padding: 18px; }
.hsp-manager-node { display: flex; gap: 14px; align-items: center; justify-content: center; max-width: 600px; margin: auto; padding: 12px 20px; border: 2px solid #086998; border-radius: 12px; background: #fff; color: #07567c; }
.hsp-manager-label, .hsp-actor-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.hsp-manager-label strong span { display: inline-block; }
.hsp-manager-node > .hsp-icon { width: 36px; height: 36px; }
.hsp-manager-node h3 { font-size: 23px; line-height: 1.4; }
.hsp-manager-node strong { font-size: 17px; line-height: 1.7; }
.hsp-manager-node p { font-size: 15px; line-height: 1.8; margin-top: 5px; }
.hsp-manager-node p, .hsp-hotel-actor p, .hsp-vendor-actor p { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hsp-manager-node p span, .hsp-hotel-actor p span, .hsp-vendor-actor p span, .hsp-legend-text > span { display: inline-block; }
.hsp-branches { position: relative; height: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hsp-branches::before { content: ''; position: absolute; left: 50%; top: 0; height: 20px; border-left: 2px solid #086998; }
.hsp-branches::after { content: ''; position: absolute; top: 20px; left: calc((100% - 32px) / 6); right: calc((100% - 32px) / 6); border-top: 2px solid #086998; }
.hsp-branches > span { position: relative; justify-self: center; top: 20px; height: 20px; border-left: 2px solid #086998; }
.hsp-branches > span::after { content: ''; position: absolute; bottom: 0; left: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #086998; }
.hsp-scope-hotels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hsp-scope-hotel { border: 1px solid #9bbfd3; background: #fff; border-radius: 12px; padding: 16px; }
.hsp-scope-hotel h3 { display: flex; gap: 10px; align-items: center; color: #07567c; font-size: 21px; line-height: 1.5; }
.hsp-hotel-data { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; color: #284e66; font-size: 16px; line-height: 1.6; }
.hsp-hotel-data > span { display: flex; align-items: center; gap: 8px; }
.hsp-scope-hotel.is-own { border: 2px solid #aa6019; background: #fff8ee; }
.hsp-scope-hotel.is-own h3 { color: #8b4c15; }
.hsp-hotel-actor, .hsp-vendor-actor { display: flex; gap: 10px; padding: 14px 12px; border: 1px solid #bd7a2b; border-radius: 10px; background: #fff0d8; color: #804314; margin-top: 16px; }
.hsp-hotel-actor h4, .hsp-vendor-actor h4 { font-size: 18px; line-height: 1.5; }
.hsp-hotel-actor strong, .hsp-vendor-actor strong { font-size: 15px; line-height: 1.7; }
.hsp-hotel-actor p, .hsp-vendor-actor p { font-size: 15px; line-height: 1.8; margin-top: 8px; }
.hsp-vendor-access-flow { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.3fr); grid-template-areas: 'source . vendor' 'allowed arrow vendor' 'denied . vendor'; gap: 12px 16px; margin-top: 24px; align-items: center; }
.hsp-vendor-source { grid-area: source; }
.hsp-vendor-source h3 { display: flex; align-items: center; gap: 8px; color: #8b4c15; font-size: 19px; line-height: 1.5; margin: 0; }
.hsp-vendor-source p { color: #52677b; font-size: 14px; line-height: 1.8; margin-top: 4px; }
.hsp-allowed-case, .hsp-denied-case { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; font-size: 16px; line-height: 1.6; }
.hsp-allowed-case { grid-area: allowed; background: #e0f3ea; color: #0e5f54; border: 2px solid #08776a; }
.hsp-denied-case { grid-area: denied; background: #eef1f4; color: #52677b; border: 1px dashed #a7b9c7; }
.hsp-vendor-arrow { grid-area: arrow; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #0e5f54; font-size: 15px; line-height: 1.6; font-weight: 700; text-align: center; }
.hsp-vendor-target { grid-area: vendor; }
.hsp-vendor-actor { background: #e0f3ea; border-color: #08776a; color: #0e5f54; margin-top: 0; }
.hsp-diagram .hsp-own-records { display: flex; align-items: flex-start; gap: 6px; color: #52677b; font-size: 14px; line-height: 1.8; margin-top: 12px; }
.hsp-own-records .hsp-icon { width: 18px; height: 18px; margin-top: 3px; }
.hsp-record-note span { display: block; }
.hsp-other-lock { display: flex; gap: 8px; align-items: center; background: #eef1f4; border: 1px dashed #a7b9c7; border-radius: 8px; padding: 12px 10px; color: #52677b; font-size: 15px; line-height: 1.7; margin-top: 20px !important; }
.hsp-scope-boundary { display: flex; align-items: center; justify-content: center; gap: 8px; color: #07567c; font-size: 15px; line-height: 1.7; margin-top: 16px !important; }
@media (max-width: 1000px) {
  .hsp-diagram { padding: 18px; }
  .hsp-rel-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hsp-rel-link { flex-direction: row; min-height: 48px; gap: 20px; }
  .hsp-rel-link .hsp-arrow { transform: rotate(90deg); }
  .hsp-place-tree { max-width: 430px; margin-inline: auto; }
  .hsp-company-list { max-width: 430px; margin-inline: auto; }
  .hsp-return-flow { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'report' 'link' 'confirm'; }
  .hsp-return-link { flex-direction: row; min-height: 48px; gap: 20px; }
  .hsp-return-link .hsp-arrow { transform: rotate(90deg); }
  .hsp-scope-hotels { grid-template-columns: minmax(0, 1fr); gap: 20px; border-left: 2px solid #086998; margin-left: 10px; padding-left: 18px; }
  .hsp-scope-hotel { position: relative; }
  .hsp-scope-hotel::before { content: ''; position: absolute; left: -20px; top: 32px; width: 19px; border-top: 2px solid #086998; }
  .hsp-scope-hotel::after { content: ''; position: absolute; left: -6px; top: 28px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #086998; }
  .hsp-branches { display: block; height: 26px; }
  .hsp-branches::before { height: 14px; }
  .hsp-branches::after { top: 14px; left: 10px; right: 50%; }
  .hsp-branches > span { display: none; }
  .hsp-branches > span:first-child { display: block; position: absolute; left: 10px; top: 14px; height: 12px; }
  .hsp-branches > span::after { display: none; }
}
@media (max-width: 600px) {
  .hsp-diagram { padding: 14px; border-radius: 18px; }
  .hsp-panel-title { font-size: 21px; }
  .hsp-panel-body { padding: 16px 12px; }
  .hsp-return-flow { padding: 16px 10px; gap: 8px; }
  .hsp-return-report, .hsp-return-confirm { font-size: 17px; }
  .hsp-return-link { gap: 10px; }
  .hsp-manager-scope { padding: 14px 10px; }
  .hsp-manager-node { padding: 14px 10px; gap: 10px; }
  .hsp-manager-node > .hsp-icon { width: 26px; height: 26px; }
  .hsp-manager-node h3 { font-size: 21px; }
  .hsp-manager-node strong { font-size: 16px; }
  .hsp-manager-node p { font-size: 14px; }
  .hsp-scope-hotel { padding: 12px 10px; }
  .hsp-scope-hotels { padding-left: 14px; }
  .hsp-scope-hotel::before { left: -16px; width: 15px; }
  .hsp-hotel-actor, .hsp-vendor-actor { padding: 12px 8px; gap: 8px; }
  .hsp-hotel-actor > .hsp-icon, .hsp-vendor-actor > .hsp-icon { width: 20px; height: 20px; }
  .hsp-hotel-actor h4, .hsp-vendor-actor h4 { font-size: 18px; }
  .hsp-vendor-access-flow { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'source' 'denied' 'allowed' 'arrow' 'vendor'; gap: 14px; }
  .hsp-vendor-arrow { flex-direction: row; justify-content: center; min-height: 48px; gap: 20px; }
  .hsp-vendor-arrow .hsp-arrow { transform: rotate(90deg); }
  .hsp-scope-boundary { justify-content: flex-start; align-items: flex-start; }
}