/* ② サロン管理・詳細. Colors come from the shell tokens in app-shell.css. */
.salon-heading { font-size: 18px; margin: 0 0 16px; overflow-wrap: anywhere; }
.salon-back { display: inline-block; margin-bottom: 16px; color: var(--brand); }
.salon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.salon-list-link { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--fg); text-decoration: none; }
.salon-list-link:hover { border-color: var(--brand); background: #f7fafc; }
.salon-list-name { font-weight: 600; overflow-wrap: anywhere; }
.salon-list-detail { color: var(--muted); font-size: 13px; }
.salon-open { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.salon-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.salon-open-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.salon-open-form label { display: block; }
.salon-open-form input, .text-field 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-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 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-table { width: min(100%, 720px); border-collapse: separate; border-spacing: 0; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 8px; }
.recruitment-table th, .recruitment-table td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.recruitment-table thead th { color: var(--muted); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.recruitment-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.recruitment-role-name { font-weight: 600; white-space: nowrap; }
.recruitment-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.recruitment-cell select { padding: 6px 8px; border: 1px solid #c5c7d0; border-radius: 4px; font: inherit; color: var(--fg); background: white; }
/* Narrow screens: one block per role, each cell labelled with its employment type. */
@media (max-width: 800px) {
  .recruitment-table, .recruitment-table tbody, .recruitment-table tr, .recruitment-table th, .recruitment-table td { display: block; width: auto; }
  .recruitment-table thead { display: none; }
  .recruitment-table tbody tr + tr > * { border-top: 0; }
  .recruitment-table tbody tr + tr { border-top: 1px solid var(--line); }
  .recruitment-table td { padding-top: 4px; }
  .recruitment-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
}
.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 button:disabled { opacity: .6; cursor: wait; }

/* Multi-line text fields (text-field.js): name, optional input example, textarea, count. */
.text-field { margin-top: 16px; }
.text-field > label { display: block; }
.text-field textarea { width: min(100%, 720px); resize: vertical; }
.text-field .salon-counter { margin: 4px 0 16px; }
.input-example { width: min(100%, 720px); box-sizing: border-box; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fc; }
.input-example summary { cursor: pointer; padding: 8px 12px; color: var(--brand); font-size: 14px; }
.input-example summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.input-example-text { margin: 0; padding: 0 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--fg); }