/* Presence tune: the palette, top bar, buttons and forms of ~/work/portfolio's style.css, plus tables and the time-axis lanes. */

:root {
  color-scheme: light dark;
  --bg:        #f0f0f0;
  --line:      #a9c2dd;
  --line-dim:  #d3e0ee;
  --cyan:      #0e6fbf;
  --cyan-br:   #0a5697;
  --amber:     #c47f12;
  --ink:       #12293f;
  --ink-dim:   #4c667f;
  --ink-faint: #556e88;
  --board:     #f7f8fa;
  --topbar-bg: #f7f8fa;
  --panel-fill: #ffffff;
  --tag-bg:    rgba(14, 111, 191, 0.05);
  --md-fill:   rgba(16, 40, 78, 0.04);
  --btn-primary-fg: #ffffff;
  --danger:    #c62828;
  --ok:        #2e7d32;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK KR", D2Coding, monospace;
  --maxw: 1400px;
  --r: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0a1626;
    --line:      #2b5680;
    --line-dim:  #1d3f60;
    --cyan:      #5cc8ff;
    --cyan-br:   #93e0ff;
    --amber:     #ffce7a;
    --ink:       #d7e6f4;
    --ink-dim:   #90a9c2;
    --ink-faint: #7e9ab4;
    --board:     #0d1f38;
    --topbar-bg: #0d1f38;
    --panel-fill: #12263f;
    --tag-bg:    rgba(92, 200, 255, 0.04);
    --md-fill:   rgba(120, 175, 225, 0.07);
    --btn-primary-fg: #062033;
    --danger:    #ff8a80;
    --ok:        #81c784;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-br); }
code, .mono { font-family: var(--mono); font-size: .85em; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 4vw, 3rem); background: var(--topbar-bg); border-bottom: 1px solid var(--line-dim);
}
.brand { display: flex; align-items: center; gap: .7rem; color: var(--cyan); }
.brand-mark { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: .02em; }
.brand-sub  { font-size: .58rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-faint); }
.mainnav { margin-left: auto; display: flex; gap: 1.6rem; }
.mainnav a { font-size: .82rem; letter-spacing: .05em; color: var(--ink-dim); border-bottom: 1px solid transparent; }
.mainnav a:hover { color: var(--cyan); border-color: var(--cyan); }
.lang-toggle {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; color: var(--ink-dim); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r); padding: .34rem .6rem; cursor: pointer;
}
.lang-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.lang-toggle { display: inline-flex; align-items: center; gap: .15em; }
.lang-toggle button.lang-opt { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.lang-toggle button.lang-opt:hover { color: var(--cyan); }
.lang-sep { color: var(--ink-faint); margin: 0 .1em; }
.lang-ko .lang-opt-ko, .lang-en .lang-opt-en { color: var(--cyan); font-weight: 700; }

/* page */
.page { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; display: grid; gap: 1.4rem; }
.panel { background: var(--board); border: 1px solid var(--line-dim); border-radius: var(--r); padding: 1.2rem 1.4rem; }
.panel.narrow { max-width: 26rem; margin: 3rem auto 0; width: 100%; }
h1 { font-size: 1.35rem; margin-bottom: .8rem; }
h2 { font-size: 1.02rem; margin-bottom: .7rem; }
.dim { color: var(--ink-faint); font-size: .85rem; }
.note { margin-top: .6rem; }
.gap-top { margin-top: 1rem; }
.foot { text-align: center; color: var(--ink-faint); font-size: .75rem; padding: 1.5rem 0 2rem; }
.head-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.head-row .spacer { flex: 1; }

/* messages and forms */
.messages { list-style: none; display: grid; gap: .5rem; }
.msg { padding: .7rem 1rem; border-radius: var(--r); font-size: .9rem; border: 1px solid var(--line); background: var(--panel-fill); }
.msg.success { border-color: var(--cyan); }
.msg.warning { border-color: var(--amber); word-break: break-all; }
.msg.error { border-color: var(--danger); }
.stack { display: grid; gap: 1rem; }
.form-row { display: grid; gap: .35rem; }
.form-row label { font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel-fill); border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .6rem; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--cyan); }
.form-err { color: var(--danger); font-size: .78rem; display: block; }
.btn {
  font-family: var(--sans); font-size: .88rem; letter-spacing: .04em; padding: .6rem 1.1rem; border-radius: var(--r);
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: .5em;
}
.btn-primary { background: var(--cyan); color: var(--btn-primary-fg); border-color: var(--cyan); font-weight: 700; }
.btn-primary:hover { background: var(--cyan-br); border-color: var(--cyan-br); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
/* Apply & Reboot once the form differs from the values in force; disabled while it does not. */
.btn-apply-ready { background: var(--danger); color: #ffffff; border-color: var(--danger); font-weight: 700; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.btn-small { padding: .2rem .6rem; font-size: .78rem; }
.inline-form { display: inline; }

/* tables */
.table-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: .86rem; }
table.grid th, table.grid td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-dim); text-align: left; vertical-align: top; white-space: nowrap; }
table.grid thead th { font-size: .72rem; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
table.grid tbody th { font-weight: 600; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.devices tbody tr.device-row:hover { background: var(--tag-bg); }
.tune-grid input { width: 7rem; }
.tune-grid select { width: auto; min-width: 7rem; }
.want { color: var(--amber); font-weight: 700; }

/* badges */
.badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: .08rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.badge.on { color: var(--cyan); border-color: var(--cyan); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--danger); border-color: var(--danger); }
.badge.wait { color: var(--amber); border-color: var(--amber); }

/* key-value lists */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; font-size: .86rem; }
dl.kv dt { color: var(--ink-faint); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.4rem; }

/* time-axis lanes */
.lanes-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.lanes-controls select, .lanes-controls input[type=date] { width: auto; }
.lanes-controls label { display: inline-flex; align-items: center; gap: .35rem; }
.lanes-controls input[type="checkbox"] { width: auto; }
.lanes { position: relative; margin: .4rem 0 .8rem; }
.lanes-legend { margin: .6rem 0 .4rem; font-size: .8rem; color: var(--ink-dim); }
.lanes-sync { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .3rem; font-size: .8rem; color: var(--ink-dim); cursor: pointer; }
.lanes-legend summary { cursor: pointer; color: var(--cyan); font-weight: 600; }
.lanes-legend dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .5rem 0; }
.lanes-legend dt { font-weight: 700; color: var(--ink); }
.lanes-legend dd { line-height: 1.6; }
.sw { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; margin: 0 .3rem 0 .8rem; vertical-align: -1px; }
.sw:first-child { margin-left: 0; }
.sw-inbody { background: var(--cyan); }
.sw-outbody { background: var(--amber); }
.sw-check { background: var(--ink-faint); }
.sw-stop { background: var(--line-dim); }
.lanes canvas { display: block; width: 100%; border: 1px solid var(--line-dim); border-radius: var(--r); background: var(--panel-fill); cursor: grab; touch-action: pan-y; }
.lanes canvas.panning { cursor: grabbing; }
.lanes-note { font-size: .75rem; color: var(--ink-faint); margin-top: .25rem; }
/* The track lines up with the plot: the left gutter of lane names (96 px) and the right pad (10 px) in lanes.js. */
.lanes-scroll { position: relative; height: 12px; margin: 6px 10px 0 96px; background: var(--md-fill); border: 1px solid var(--line-dim); border-radius: 6px; cursor: pointer; }
.lanes-thumb { position: absolute; top: 0; bottom: 0; min-width: 16px; background: var(--line); border-radius: 6px; cursor: grab; touch-action: none; }
.lanes-thumb:hover, .lanes-thumb.dragging { background: var(--cyan); }
.lanes-thumb.dragging { cursor: grabbing; }
.lanes-tip {
  position: fixed; z-index: 1000; pointer-events: none; max-width: min(28rem, calc(100vw - 8px)); background: var(--panel-fill); border: 1px solid var(--line); border-radius: var(--r);
  padding: .4rem .6rem; font-family: var(--mono); font-size: .72rem; white-space: pre-wrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
tr.lanes-row > td { padding: 0 .6rem; border-bottom: 1px solid var(--line-dim); }