/* S1 core components. Every selector starts with .s1- ; nothing here styles an element or a legacy class.
 * Tokens live in s1-tokens.css. Reference: docs/design/1.0-mockups/s1-components.html */

.s1-panel { background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-panel-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s1-space-3) 18px; border-bottom: 1px solid var(--s1-line-soft); background: var(--s1-panel-head); border-radius: var(--s1-radius-panel) var(--s1-radius-panel) 0 0; font: 700 15.5px var(--s1-font-display); }
.s1-panel-head a, .s1-panel-link { font: 600 var(--s1-text-small) var(--s1-font-ui); color: var(--s1-mute); text-decoration: none; }
.s1-panel-body { padding: 14px 18px; }

.s1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--s1-radius-control); padding: 9px 16px; background: var(--s1-ink); color: var(--s1-on-ink); font: 700 14px var(--s1-font-ui); cursor: pointer; }
.s1-btn:hover { background: var(--s1-ink-hover); }
.s1-btn:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-btn[disabled] { opacity: .5; cursor: default; }
.s1-btn--ghost { background: var(--s1-panel); color: var(--s1-ink); border: 1px solid var(--s1-line); padding: 8px 14px; font-weight: 600; }
.s1-btn--ghost:hover { background: var(--s1-panel-head); }
.s1-btn--small { padding: 6px 12px; font-size: var(--s1-text-small); }

.s1-status-line { display: flex; align-items: center; gap: var(--s1-space-3); background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); padding: var(--s1-space-3) var(--s1-space-4); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-status-line-title { font-weight: 700; }
.s1-status-line-detail { font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1-status-line--late { box-shadow: inset 4px 0 0 var(--s1-late); }
.s1-status-line--wait { box-shadow: inset 4px 0 0 var(--s1-wait); }
.s1-status-line--wait .s1-status-line-title { color: var(--s1-wait); }
.s1-status-line--soon { box-shadow: inset 4px 0 0 var(--s1-soon); }
.s1-status-line--new .s1-status-line-title { color: var(--s1-ink); }
.s1-status-line--clear .s1-status-line-title { color: var(--s1-mute); font-weight: 600; }

.s1-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1-space-1); margin: 20px 0 6px; padding: 0; list-style: none; font: var(--s1-text-micro) var(--s1-font-ui); }
.s1-stepper > li { color: var(--s1-mute); }
.s1-stepper > li::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--s1-track); margin-bottom: 6px; }
.s1-stepper > .is-done { color: var(--s1-ink-2); }
.s1-stepper > .is-done::before, .s1-stepper > .is-current::before { background: var(--s1-ink); }
.s1-stepper > .is-current { color: var(--s1-ink); font-weight: 700; }

.s1-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s1-avatar); color: var(--s1-ink-2); font: 700 12.5px var(--s1-font-ui); flex: none; }
.s1-avatar--you { background: var(--s1-ink); color: var(--s1-on-ink); }

.s1-empty { display: flex; justify-content: space-between; align-items: center; gap: var(--s1-space-3); border: 1.5px dashed var(--s1-line); border-radius: var(--s1-radius-empty); padding: var(--s1-space-3) 14px; color: var(--s1-ink-2); font: var(--s1-text-base)/1.45 var(--s1-font-ui); }

.s1-table { width: 100%; border-collapse: collapse; background: var(--s1-panel); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-table th { text-align: left; padding: 10px 14px; background: var(--s1-panel-head); border-bottom: 1px solid var(--s1-line); font: 700 var(--s1-text-micro) var(--s1-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--s1-mute); }
.s1-table td { padding: 11px 14px; border-top: 1px solid var(--s1-line-soft); vertical-align: middle; }
.s1-table tbody tr:first-child td { border-top: 0; }
.s1-table-group td { background: var(--s1-panel-head); font-weight: 700; color: var(--s1-ink-2); }

@media (max-width: 640px) {
  .s1-status-line { flex-wrap: wrap; }
  .s1-stepper { grid-auto-flow: row; grid-auto-columns: auto; }
  .s1-table { display: block; overflow-x: auto; }
}