/* SLHJ's own page styles — only what Wave's app.css doesn't have. Values come from app.css + slhj-theme.css. */
.pt { display: grid; gap: 16px; }
.pt > .panel { min-width: 0; }
.panel h2 { font-size: var(--fs-lg); margin: 0 0 12px; }
.panel-head { margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.muted { color: var(--muted); }
small.muted { font-size: var(--fs-xs); }
.toolbar .grow { flex: 1 1 auto; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table th.num, .grid-table td.num { text-align: right; padding-right: 14px; }
/* computers: every column as narrow as its content, the 내용 column (td.wrap) takes the rest — no sideways scroll at 1024 */
.grid-table th, .grid-table td { width: 1px; }   /* (1px, not 1%: a % on every column makes the browser size the whole table from them) */
.grid-table th.wrap, .grid-table td.wrap { width: auto; }
.grid-table td.wrap { white-space: normal; min-width: 9em; }
/* (Wave's app.css lets a link or a bold number in a table wrap — for long job names; here they are names and amounts: one line) */
.grid-table td > a, .grid-table td b, .grid-table td .flag { white-space: nowrap; }
.grid-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.grid-table tfoot td { font-weight: 600; border-bottom: 0; padding-top: 10px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--amber); white-space: nowrap; }
.flag--ok { color: var(--green); }
.flag--red { color: var(--red); }
.flag svg { width: 14px; height: 14px; }
.space-chip { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--orange-soft); color: var(--orange); white-space: nowrap; }
.space-chip--cf { background: color-mix(in srgb, #4f8a6b 16%, var(--surface)); color: #3d7a5a; }
:root:not([data-theme="light"]) .space-chip--cf { color: #8cc7a8; }
.kpis { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 12px; }
.kpis div { display: grid; }
.kpis b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.kpis span { color: var(--muted); font-size: var(--fs-sm); }
.pick-list { display: grid; gap: 4px; max-height: none; margin-top: 6px; }
.pick-list button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.pick-list button[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); font-weight: 600; }
.calc { margin: 8px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-md); display: grid; gap: 2px; }
.calc b { font-variant-numeric: tabular-nums; }
.msgbox { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; font-size: var(--fs-md); margin: 8px 0 0; user-select: all; }
dialog.dlg--wide { width: min(760px, calc(100vw - 32px)); }
/* 내 정보 › 기억한 기기: the name may wrap */
.kv--device > :first-child { white-space: normal; flex: 1 1 auto; min-width: 0; }
.secret { font-family: var(--code); letter-spacing: .02em; }
.import-table td.wrap { max-width: 22em; }
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px 16px; text-align: center; color: var(--muted); }
.drop.is-over { border-color: var(--orange); background: var(--orange-soft); }

/* the job split (job.js) */
.ded { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ded__item { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); white-space: nowrap; }
.ded__item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange); }
/* the job page's shares: two lines per person — the second (deductions · fixed · transport) under the first, no line between */
.job-shares tr.share-main td { border-bottom: 0; padding-bottom: 4px; }
.job-shares tr.share-more td { padding-top: 0; }
.share-more__box { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; background: var(--bg-soft, color-mix(in srgb, var(--line) 35%, transparent)); }
.share-field { display: grid; gap: 4px; font-size: var(--fs-sm); }
.share-field small, .share-field__title + * { display: block; }
.share-field small { font-weight: 400; }
.share-field .input { width: 150px; }
.share-field__title { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.ded.is-off { opacity: .45; }   /* (a fixed amount is set: the deductions are not used) */
.seg--sm button { padding: 2px 8px; min-height: 28px; font-size: var(--fs-sm); }
.seg.is-off { opacity: .45; pointer-events: none; }
.input.input--pct { width: 4.2em; min-height: var(--control-h-sm); padding: 4px 6px; text-align: right; }
.input.input--short { width: 7em; min-height: var(--control-h-sm); padding: 4px 8px; }
.job-shares .input--money { width: 9em; }
.job-shares select.input { min-width: 9em; }

/* the login and setup pages (no frame) */
body.plain { background: var(--bg); }
.plain__main { max-width: 420px; margin: 0 auto; padding: 56px 16px 40px; display: grid; gap: 16px; }
.plain__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: .06em; }
.plain__brand img { width: 30px; height: 30px; }
.plain .panel { display: grid; gap: 12px; }
.plain .panel h1 { font-size: var(--fs-xl); margin: 0; }
.qr { display: grid; justify-items: center; gap: 6px; }
.qr img { width: 200px; height: 200px; border-radius: 8px; background: #fff; padding: 6px; }
.check { display: flex; gap: 10px; align-items: center; font-size: var(--fs-md); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }
@media (max-width: 700px) {   /* (the width where Wave's .grid-table--cards turn into cards — app.css) */
  .table-scroll { overflow: visible; }
  .grid-table th, .grid-table td { width: auto; }
  .grid-table--cards td { overflow-wrap: normal; }   /* (numbers break at a space only — never inside 860517-5••••••) */
  .grid-table--cards td.secret, .grid-table--cards td.num { white-space: nowrap; }
  /* a cell with a second line (an email under a name, a note under an amount): the second line goes under, never beside */
  .grid-table--cards td { flex-wrap: wrap; }
  .grid-table--cards td > div, .grid-table--cards td > small { flex-basis: 100%; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  .grid-table--cards td .flag, .grid-table--cards td b { white-space: normal; }
  .ded { justify-content: flex-end; }
  .grid-table--cards td:empty { display: none; }
  .job-shares tr.share-more { display: block; border-bottom: 1px solid var(--line); padding: 0 4px 10px; }
  .job-shares tr.share-main { border-bottom: 0; }
  .job-shares tr.share-more td { display: block; text-align: left; font-weight: 400; }
  .share-more__box { flex-direction: column; }
  .share-more__box, .share-more__box > div, .share-more__box .ded { text-align: left; justify-content: flex-start; }   /* (a cell with nothing in it — Julian's row in a job — gets no empty label line) */
  .job-shares .input--money { width: 8em; }
}
@media (max-width: 600px) {
  .row-actions { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .kpis b { font-size: var(--fs-lg); }
}

/* a KPI that waits for something (협회에 송금 전) */
.kpis b.kpi--warn { color: var(--amber, #b45309); }
.jobs-list td .flag { font-size: var(--fs-sm); }
b.neg { color: var(--red, #b91c1c); }
/* 🏷 tags (people) */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: var(--fs-xs, 12px); line-height: 1.6; background: var(--orange-soft); color: var(--orange); white-space: nowrap; }
.tag__x { border: 0; background: none; padding: 0 0 0 2px; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
.tag--pick { border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.tag--pick:hover, .tag--on { background: var(--orange-soft); color: var(--orange); border-style: solid; }
.tags-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tags-picks { margin-top: 6px; }
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 4px 0 10px; }
.tags-edit .input { width: 190px; min-width: 0; }