/* ② サロン管理・詳細. Colors come from the shell tokens in app-shell.css. */
.salon-start { margin-bottom: 24px; }
.salon-prompt { color: var(--muted); }
.salon-open-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.salon-open-form label, .salon-appeal-form label { display: block; }
.salon-open-form input, .salon-appeal-form textarea {
  display: block; box-sizing: border-box; margin-top: 6px; padding: 10px;
  border: 1px solid #c5c7d0; border-radius: 4px; font: inherit;
}
.salon-open-form input { width: min(100%, 240px); }
.salon-open-result:not(:empty) { margin-top: 24px; }
.salon-name { font-size: 20px; margin: 0 0 16px; overflow-wrap: anywhere; }
.salon-section { margin-bottom: 32px; }
.salon-section h3 { font-size: 16px; margin: 0 0 12px; }
.salon-basic, .salon-meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.salon-basic dt, .salon-meta dt { color: var(--muted); }
.salon-basic dd, .salon-meta dd { margin: 0; overflow-wrap: anywhere; }
.salon-note, .salon-counter { color: var(--muted); font-size: 13px; }
.salon-appeal-form textarea { width: min(100%, 720px); resize: vertical; }
.salon-appeal-form button:disabled { opacity: .6; cursor: wait; }
.salon-meta { margin-top: 16px; font-size: 14px; }
@media (max-width: 800px) {
  .salon-basic, .salon-meta { grid-template-columns: 1fr; gap: 2px; }
  .salon-basic dd, .salon-meta dd { margin-bottom: 8px; }
}

/* ③ 募集状況. Each level has a color and a bar count, so it reads without color too. */
.recruitment { --level-high: #d83a52; --level-medium: #e8912d; --level-low: #1f76c2; --level-none: #c3c6d4; }
.recruitment-role { display: grid; grid-template-columns: 7em max-content max-content 1fr; align-items: center; gap: 12px 20px;
  padding: 12px 16px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; }
.recruitment-role-name { font-weight: 600; }
.recruitment-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 9em; }
.recruitment-switch input { appearance: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: #c5c7d0; cursor: pointer; transition: background .15s; }
.recruitment-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s; }
.recruitment-switch input:checked { background: var(--brand); }
.recruitment-switch input:checked::after { transform: translateX(18px); }
.recruitment-switch input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.recruitment-level { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.recruitment-level select { padding: 6px 8px; border: 1px solid #c5c7d0; border-radius: 4px; font: inherit; color: var(--fg); background: white; }
.recruitment-level select:disabled { opacity: .5; }
@media (max-width: 800px) { .recruitment-role { grid-template-columns: 1fr 1fr; } }
.recruitment [data-level] { --level-color: var(--level-none); }
.recruitment [data-level="high"] { --level-color: var(--level-high); }
.recruitment [data-level="medium"] { --level-color: var(--level-medium); }
.recruitment [data-level="low"] { --level-color: var(--level-low); }
.temperature { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.temperature-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.temperature-meter .bar { width: 6px; background: #e6e9ef; border-radius: 2px; }
.temperature-meter .bar:nth-child(1) { height: 6px; }
.temperature-meter .bar:nth-child(2) { height: 11px; }
.temperature-meter .bar:nth-child(3) { height: 16px; }
.temperature-meter .bar.on { background: var(--level-color); }
.temperature-label { color: var(--level-color); font-weight: 600; }
.temperature[data-level="none"] .temperature-label { color: var(--muted); }
.recruitment-form > label { display: block; margin-top: 8px; }
.recruitment-form textarea { display: block; box-sizing: border-box; width: min(100%, 720px); margin: 6px 0 12px; padding: 10px; border: 1px solid #c5c7d0; border-radius: 4px; font: inherit; resize: vertical; }
.recruitment-form button:disabled { opacity: .6; cursor: wait; }