/* The palette, as the Mac app draws it: values from design/tokens.json and
   sizes measured from the app's own renders (jevie/macos/checks/run.sh
   --only palette --render, graphite). 1px here is one point on the Mac. */
.jp {
  /* Graphite: the panel, the control fill a picked row and a key sit on, hairlines. */
  /* Ethereal (themes.json), as the reference Mac wears it. */
  --surface: #0d1330; --control: #252e56; --hair: rgba(201, 184, 166, .13); --edge: rgba(214, 214, 232, .28);
  --text: #ffcead; --secondary: #c9b8a6; --faint: #8f8590; --accent: #7d82d9; --code: #c89dc1;
  --ok: #3ddc84; --warn: #f5c451; --bad: #ff6b6b;
  --enter: cubic-bezier(.22, 1, .36, 1); --exit: cubic-bezier(.4, 0, 1, 1);
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  position: relative; width: 580px; font-family: var(--sys); color: var(--text); text-align: left;
  -webkit-font-smoothing: antialiased; transform-origin: 0 0;
  transition: opacity .22s var(--exit), transform .22s var(--exit)
}
.jp.away { opacity: 0; transform: translateY(-6px) scale(.98) }
.jp.away .jp-glass { pointer-events: none }

/* Jev's face sits in the field, at its left. */
.jp-jev { position: absolute; left: 17px; top: 9px; width: 32px; height: 32px; z-index: 2; pointer-events: none }

.jp-glass { position: relative; overflow: hidden; border-radius: 20px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--edge) inset, 0 0 0 .5px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35), 0 32px 80px -24px rgba(0, 0, 0, .8) }
/* A theme of the person's own ("make Jevie feel like…"): its colours under the panel. */
.jp-tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--enter); pointer-events: none;
  background: radial-gradient(60% 90% at 12% 0%, var(--t1, transparent), transparent 70%), radial-gradient(70% 90% at 90% 20%, var(--t2, transparent), transparent 70%),
    radial-gradient(80% 90% at 50% 110%, var(--t3, transparent), transparent 70%), radial-gradient(60% 90% at 88% 100%, var(--t4, transparent), transparent 70%) }
.jp.tinted .jp-tint { opacity: .55 }
.jp-glass > *:not(.jp-tint) { position: relative }

/* The field is the panel itself: no well, the sentence after Jev, + at its
   right, a hairline the width of the panel under it. */
.jp-field { display: flex; align-items: center; height: 50px; padding: 0 14px 0 58px; border-bottom: 1px solid var(--hair);
  font-size: 18px; letter-spacing: -.012em }
.jp-text { white-space: pre; overflow: hidden }
.jp-caret { width: 1.5px; height: 21px; margin-left: 1px; flex: none; background: var(--text); animation: jp-caret 1.06s steps(1) infinite }
.jp-ph { color: var(--faint); margin-left: -1.5px; white-space: nowrap }
.jp-field.has .jp-ph { display: none }
.jp-mem { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; flex: none; color: var(--secondary) }
.jp-mem svg { width: 17px; height: 17px }
@keyframes jp-caret { 50% { opacity: 0 } }
/* Thinking: a sheen along the field's hairline. */
.jp-think { height: 1px; margin: -1px 0 0; background: linear-gradient(90deg, transparent, rgba(240, 166, 189, .9), transparent) 0 0 / 40% 100% no-repeat; opacity: 0; transition: opacity .15s }
.jp.thinking .jp-think { opacity: 1; animation: jp-sheen 1.4s linear infinite }
@keyframes jp-sheen { from { background-position: -40% 0 } to { background-position: 140% 0 } }

.jp-body { overflow: hidden; transition: height .32s var(--enter) }
.jp-inner { padding: 0 }
.jp-inner:not(:empty) { padding: 12px 0 12px }
/* The foot: each action's name and its key, right-aligned behind a hairline. */
.jp-hints { display: flex; justify-content: flex-end; align-items: center; gap: 0; height: 43px; padding: 0 22px; border-top: 1px solid var(--hair);
  font-size: 12.5px; font-weight: 500; color: #d6d6da }
.jp-hints:empty { display: none }
.jp-hints span { display: inline-flex; align-items: center; gap: 6px }
.jp-hints span + span::before { content: ""; width: 1px; height: 11px; margin: 0 14px 0 8px; background: rgba(236, 236, 238, .18) }
.jp-key { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: var(--control);
  font: 600 10.5px/1 var(--sys); color: var(--secondary); transition: background .15s, color .15s }
.jp-key.down { background: var(--text); color: var(--surface) }

/* Rows: 40 high, inset 14 from the panel; an 18 icon, the name, its detail
   in secondary, what it is at the right in tertiary. */
.jp-rows { padding: 0 }
.jp-row { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; margin: 0 14px; padding: 0 14px 0 13px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap;
  animation: jp-arrive .15s var(--enter) both; transition: background .15s }
.jp-row.go { cursor: pointer }
.jp-row.go:hover { background: rgba(236, 236, 238, .05) }
.jp-row .ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--secondary) }
.jp-row .ic svg { width: 17px; height: 17px }
.jp-row .ic .face { width: 26px; height: 26px; margin: -3px; flex: none }
.jp-row .ic .face svg { width: 26px; height: 26px; display: block }
.jp-row .t { overflow: hidden; text-overflow: ellipsis }
.jp-row .d { color: var(--secondary); font-weight: 400; overflow: hidden; text-overflow: ellipsis }
.jp-row .k { margin-left: auto; color: var(--faint); font-weight: 400; font-size: 13px }
.jp-row .jp-chip { margin-left: auto }
/* The picked row: the control fill, and ↵ in a key at its end. */
.jp-row.on { background: var(--control) }
.jp-row.on::after { content: "↵"; display: grid; place-items: center; min-width: 17px; height: 17px; margin: 0 -2px 0 12px; border-radius: 5px; background: rgba(236, 236, 238, .08); color: var(--secondary); font-size: 10.5px; flex: none }
.jp-row.on:not(:has(.jp-chip, .k))::after { margin-left: auto }
/* A section's heading: its name in secondary, sentence case; a count or a hint at its right. */
.jp-sec { display: flex; align-items: center; height: 34px; margin-top: 2px; padding: 0 28px 0 27px; font-size: 12.5px; font-weight: 600; color: var(--secondary) }
.jp-sec .n { margin-left: auto; font-weight: 400; color: var(--faint) }
.jp-line { height: 1px; margin: 8px 28px 6px; background: var(--hair) }
@keyframes jp-arrive { from { opacity: 0; transform: translateY(4px) } }

/* Answers as components (GenUI), as the app draws them. */
/* An answer starts where the sentence does, 58 in; a done line's tick sits under Jev. */
.jp-ans { padding: 2px 28px 6px 58px; animation: jp-arrive .15s var(--enter) both }
.jp-ans > * + * { margin-top: 12px }
.jp-lead { font-size: 15px }
.jp-lead b { font-weight: 700 }
.jp-gauge { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; font-size: 13px }
.jp-gauge b { font-weight: 600 }
.jp-gauge span { color: var(--secondary) }
.jp-gauge i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #26262b; overflow: hidden }
.jp-gauge i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: 3px; background: var(--c); transition: width .9s var(--enter) }
.jp-gauge + .jp-gauge { margin-top: 14px }
.jp-proc { display: flex; align-items: center; gap: 12px; font-size: 13px }
.jp-proc svg { width: 15px; height: 15px; color: var(--secondary) }
.jp-proc b { font-weight: 600 }
.jp-proc span { color: var(--secondary) }
/* A state, said in words: its tone as a small dot, the word in tertiary. */
.jp-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--faint); font-size: 13px; font-weight: 400 }
.jp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--faint)) }
.jp-q { font-size: 15px; font-weight: 600 }
.jp-btns { display: flex; gap: 8px }
.jp-btn { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: var(--control); transition: transform .12s, filter .12s }
.jp-btn.primary { background: #e9e9ec; color: #111; box-shadow: none }
.jp-btn.primary::after { content: "↵"; font-size: 9px; opacity: .45 }
.jp-btn.pressed { transform: scale(.96); filter: brightness(.9) }
.jp-eyebrow { font-size: 13px; font-weight: 500; color: var(--secondary) }
.jp-title { margin-top: 4px !important; font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.jp-steps { display: grid; gap: 7px; padding-left: 8px }
.jp-steps div { display: flex; gap: 14px; font-size: 14px }
.jp-steps em { width: 8px; font-style: normal; color: var(--secondary); text-align: right }
.jp-change { margin-top: 16px !important; padding: 12px 12px 8px; border-radius: 10px; box-shadow: 0 0 0 1px #34343a inset; background: rgba(255, 255, 255, .02) }
.jp-change p { margin: 0 0 18px; font-size: 14px; color: var(--faint) }
.jp-change div { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--secondary) }
.jp-prog { display: grid; gap: 9px }
.jp-prog div { display: flex; align-items: center; gap: 12px; font-size: 14px; transition: color .3s }
.jp-prog div.wait { color: var(--secondary) }
.jp-prog i { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center }
.jp-prog .done i { background: var(--ok) }
.jp-prog .done i::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid #0b2a17; border-width: 0 0 2px 2px; transform: rotate(-45deg) }
.jp-prog .run i { box-shadow: 0 0 0 1.5px var(--warn) inset; -webkit-mask: repeating-conic-gradient(#000 0 18deg, transparent 18deg 36deg); mask: repeating-conic-gradient(#000 0 18deg, transparent 18deg 36deg); animation: jp-spin 2.4s linear infinite }
.jp-prog .wait i { box-shadow: 0 0 0 1.5px var(--faint) inset }
.jp-prog .you i { box-shadow: 0 0 0 1.5px var(--warn) inset }
.jp-prog .you i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn) }
@keyframes jp-spin { to { transform: rotate(360deg) } }
.jp-doc { padding: 14px 58px 20px; font-size: 15px; line-height: 1.65; animation: jp-arrive .22s var(--enter) both }
.jp-doc p { margin: 0 0 12px }
.jp-doc code { font: 13.5px var(--mono); color: var(--code) }
.jp-done { display: flex; align-items: center; gap: 17px; margin-left: -33px; font-size: 15px }
.jp-done svg { width: 16px; height: 16px; color: var(--ok) }
.jp-done span { color: var(--faint) }
.jp-done .undo { margin-left: auto }

/* My day: what needs you, then the day's shape. */
.jp-day > * + * { margin-top: 10px }
.jp-need { display: flex; align-items: center; gap: 10px; font-size: 13px }
.jp-need > b { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: #2c2c31; color: var(--secondary); font-size: 11px }
.jp-need div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.jp-need strong { font-weight: 600 }
.jp-need span { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.jp-need em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-style: normal; color: var(--faint); white-space: nowrap }
.jp-need em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c) }
.jp-tl { position: relative; height: 34px; margin-top: 16px !important; border-top: 1px solid var(--sep); display: flex; justify-content: space-between; padding-top: 4px; font-size: 10px; color: var(--faint) }
.jp-tl i { position: absolute; top: 20px; left: var(--a); width: var(--b); height: 10px; border-radius: 3px }
.jp-tl .m { background: #3a3a40 } .jp-tl .c { background: rgba(245, 196, 81, .55); box-shadow: 0 0 0 1px var(--warn) inset } .jp-tl .f { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px dashed }
.jp-tl .f { box-shadow: none; outline: 1px dashed rgba(255, 255, 255, .15); outline-offset: -1px }
.jp-tl .now { top: 14px; width: 1.5px; height: 20px; background: var(--text); border-radius: 1px }
.jp-dayfoot { font-size: 11.5px; color: var(--faint) }

/* A list beside its preview (⌘P). */
.jp-split { display: grid; grid-template-columns: 52% 48%; animation: jp-arrive .22s var(--enter) both }
.jp-split .jp-rows { padding-right: 4px }
.jp-preview { padding: 6px 22px 14px; border-left: 1px solid var(--hair); font-size: 13px; line-height: 1.6; animation: jp-arrive .22s var(--enter) both }
.jp-preview b { display: block; font-size: 15px; font-weight: 600 }
.jp-preview span { display: block; margin: 2px 0 10px; font-size: 11.5px; color: var(--faint) }
.jp-preview p { margin: 0 0 8px; color: var(--secondary) }
.jp-preview code { font: 12px var(--mono); color: var(--code) }
/* A question from a job, answered where it is asked. */
.jp-ask { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; padding: 10px 10px 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent) inset; font-size: 14px }
.jp-ask span { margin-right: auto }
button.jp-btn { border: 0; color: var(--text); font-family: var(--sys); cursor: pointer }
button.jp-btn.primary { color: #111 }
button.jp-btn:hover { filter: brightness(1.12) }