/* resume.useace.dev: the Ace desk system (desk.css tokens), plus the few parts a resume tool adds. */
.split{flex:1;min-height:0;display:flex;gap:var(--gap)}
.left{flex:0 0 340px;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--card);border-radius:var(--r-in)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--card);border-radius:var(--r-in)}
.lefth,.mainh{height:var(--bar);flex:none;display:flex;align-items:center;gap:8px;padding:0 var(--inset) 0 var(--text)}
.lefth h2,.mainh h2{font:500 14px/1.2 Geist}
.body{flex:1;min-height:0;display:flex;gap:var(--gap);padding:0 var(--pad) var(--pad)}
.surface{flex:1;background:var(--page);border-radius:4px;min-height:0;min-width:0;overflow:auto}

/* settings */
.ctl{flex:1;overflow:auto;padding:0 var(--pad) var(--pad)}
.sect{height:32px;display:flex;align-items:center;padding:0 var(--text);color:var(--muted);font:500 12px/1 Geist}
.row{height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--inset) 0 var(--text);border-radius:4px}
.row:hover{background:var(--raised)}
.row label{flex:1;cursor:default}
.swatches{display:flex;gap:8px;padding:4px var(--text) 12px}
.sw{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;color:var(--muted);font:500 12px/1 Geist;cursor:pointer;text-align:left}
.sw i{display:block;height:48px;border-radius:var(--r-in);background-size:cover;background-position:center}
.sw[aria-pressed=true]{color:var(--ink)}
.sw[aria-pressed=true] i{outline:1.5px solid var(--ink);outline-offset:2px}
.sw:focus-visible i{outline:1.5px solid var(--ink);outline-offset:2px}
.opts{display:inline-flex;background:var(--page);border-radius:var(--r-in);padding:2px;gap:2px}
.opts button{height:24px;padding:0 10px;border:0;border-radius:4px;background:none;color:var(--muted);font:500 12px/1 Geist;cursor:pointer}
.opts button:hover{color:var(--ink)}
.opts button[aria-pressed=true]{background:var(--tint2);color:var(--ink)}
.opts button:focus-visible,.sw:focus-visible,.tog:focus-visible,.btn:focus-visible{outline:1.5px solid var(--ink);outline-offset:1px}
.tog{width:32px;height:18px;flex:none;border:0;border-radius:9px;background:var(--tint2);position:relative;cursor:pointer;padding:0}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform var(--tint-t) var(--tint-ease),background var(--tint-t) var(--tint-ease)}
.tog[aria-checked=true]{background:var(--ink)}
.tog[aria-checked=true]::after{transform:translateX(14px);background:var(--page)}
@media (prefers-reduced-motion:reduce){.tog::after{transition:none}}

/* preview */
.pages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px}
.pages img{display:block;width:100%;max-width:760px;height:auto;border-radius:4px}

/* import */
.center{flex:1;overflow:auto;display:flex;justify-content:center;padding:32px var(--text)}
.col{width:100%;max-width:620px;display:flex;flex-direction:column;gap:20px}
.col h2{font:500 20px/1.25 Geist}
.col p{color:var(--muted)}
.drop{height:176px;border-radius:var(--r-in);background:var(--page);outline:1.5px dashed var(--tint2);outline-offset:-1.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;cursor:pointer}
.drop:hover{outline-color:var(--faint)}
.drop .ico{width:20px;height:20px;color:var(--muted)}
.steps{list-style:decimal;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.steps b{color:var(--ink);font-weight:500}
.reading{display:flex;align-items:center;gap:10px;color:var(--muted);height:176px;justify-content:center;background:var(--page);border-radius:var(--r-in)}
.reading .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.reading .ico{animation:none}}
.found{display:flex;flex-direction:column;gap:2px}
.job{display:flex;align-items:center;gap:10px;height:40px;padding:0 var(--inset) 0 var(--text);border-radius:4px;background:var(--page)}
.job img{width:16px;height:16px;border-radius:3px;flex:none;object-fit:cover}
.job .nm{font-weight:500}
.job .rl{color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job .dt{color:var(--muted);font-size:12px;white-space:nowrap}
.actions{display:flex;gap:8px}
[data-state]>[data-show]{display:none}
[data-state=idle]>[data-show~=idle],[data-state=reading]>[data-show~=reading],[data-state=review]>[data-show~=review]{display:flex}

/* plans */
.plans{flex:1;overflow:auto;padding:32px var(--text);display:flex;flex-direction:column;align-items:center;gap:24px}
.plans h2{font:500 20px/1.25 Geist;text-align:center}
.plans > p{color:var(--muted);text-align:center;margin-top:-16px}
.tiers{display:flex;gap:2px;width:100%;max-width:880px}
.tier{flex:1;min-width:0;background:var(--page);border-radius:var(--r-in);padding:var(--text);display:flex;flex-direction:column;gap:16px}
.tier h3{font:500 14px/1 Geist}
.price{font:500 32px/1 Geist;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.price small{font:400 14px/1.3 Geist;color:var(--muted)}
.tier ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--muted);flex:1}
.tier li{display:flex;gap:8px;align-items:flex-start}
.tier li .ico{width:14px;height:14px;margin-top:3px;color:var(--ink)}
.tier .btn{justify-content:center;height:36px}
button.btn{border:0;cursor:pointer}

/* server pages */
.note{color:var(--muted);font-size:12px;text-align:center}
#err:empty,#status:empty{display:none}
#err,#status{color:var(--ink)}
a.btn{text-decoration:none}