/* Retorno app styles. Direction: exact, unhurried, bilingual; customs paperwork. unslop by @heydamir (CC BY 4.0) guided this pass. */
:root{
  --bg:#fafafb;--side:#f4f5f7;--card:#fff;--raised:#f1f2f4;
  --line:rgba(28,29,31,.08);--line2:rgba(28,29,31,.12);
  --t1:#1c1d1f;--t2:#4b5260;--t3:#687080;
  --accent:#245bc2;--accent-soft:#e8f0ff;
  --pos:#15803d;--warn:#a85a00;--warn-soft:#fff4e5;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t1);font-family:Inter,-apple-system,system-ui,sans-serif;font-optical-sizing:auto;font-size:14px;line-height:20px;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tn{font-variant-numeric:tabular-nums}

/* signature: document codes */
.doc{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:var(--raised);font-family:var(--mono);font-size:12px;line-height:16px;color:var(--t1);white-space:nowrap}

/* plain-language explanations on hover, focus or tap */
[data-tip]{position:relative;cursor:help}
[data-tip]::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:max-content;max-width:280px;padding:8px 10px;border-radius:8px;background:#1c1d1f;color:#f5f6f7;font-family:Inter,-apple-system,system-ui,sans-serif;font-size:12px;line-height:17px;font-weight:400;white-space:normal;text-align:left;box-shadow:0 8px 24px -8px rgba(0,0,0,.35);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s var(--ease),transform .15s var(--ease)}
[data-tip].tip-down::after{bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)}
[data-tip].tip-end::after{left:auto;right:0}
[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip]:focus::after{opacity:1;transform:none}
.info{display:inline-flex;align-items:center;gap:4px}
.info svg{width:14px;height:14px;color:var(--t3)}

/* shell */
.shell{display:flex;min-height:100vh}
.side{flex:0 0 248px;background:var(--side);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;margin-bottom:16px;color:var(--t1);text-decoration:none;font-size:16px;font-weight:600;letter-spacing:-.01em}
.brand::before{content:'';flex:none;width:26px;height:26px;margin-left:-4px;background:url(/logo-mark.svg) center/contain no-repeat}
.side-label{padding:0 8px;margin:24px 0 8px;font-size:12px;line-height:16px;color:var(--t3)}
.side-label:first-of-type{margin-top:8px}
.nav-row{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:8px;color:var(--t2);text-decoration:none;font-weight:500;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav-row svg{flex:none;color:var(--t3)}
.nav-row:hover{background:rgba(28,29,31,.05);color:var(--t1)}
.nav-row[aria-current=page]{background:var(--card);color:var(--t1);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04)}
.queue-row{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:8px;color:var(--t2);text-decoration:none}
.queue-row b{font-weight:500;color:var(--t1)}
.queue-row span{font-size:12px;line-height:16px;color:var(--t3)}
.queue-row[aria-current=page]{background:var(--card);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04)}
.side-foot{margin-top:auto;padding:8px;font-size:12px;line-height:16px;color:var(--t3)}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.top{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;border-bottom:1px solid var(--line);background:var(--card)}
.crumb{color:var(--t3)}.crumb b{font-weight:500;color:var(--t1)}
.page{width:100%;max-width:1200px;padding:40px 32px 80px;display:flex;flex-direction:column;gap:32px}
.head{display:flex;flex-direction:column;gap:8px}
h1{margin:0;font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.02em}
.lead{margin:0;font-size:15px;line-height:22px;color:var(--t2);max-width:60ch}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-p{background:#202124;color:#f5f6f7;border-color:#202124}.btn-p:hover{background:#34363b;color:#f5f6f7}
.btn-s{background:var(--card);color:var(--t1);border-color:var(--line2)}.btn-s:hover{background:var(--raised);color:var(--t1)}
.btn[disabled]{background:var(--raised);color:var(--t3);border-color:var(--line);cursor:not-allowed;transform:none}
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--raised);border-radius:8px}
.seg button{height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.seg button:hover{color:var(--t1)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--t1);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06)}

/* surfaces */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 16px;border-bottom:1px solid var(--line)}
.card-h h2{margin:0;font-size:14px;line-height:20px;font-weight:500}
.meta{font-size:12px;line-height:16px;color:var(--t3)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--t2);white-space:nowrap}
.state i{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.state.warn{color:var(--warn)}.state.warn i{background:var(--warn)}
.state.off i{background:var(--t3)}

/* tables and lists */
.tbl{width:100%;border-collapse:collapse}
.tbl th{height:36px;padding:0 16px;text-align:left;font-size:12px;line-height:16px;font-weight:500;color:var(--t3);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{height:44px;padding:0 16px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.scroll-x{overflow-x:auto}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 16px;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.ico{flex:none;width:16px;height:16px;color:var(--t3)}

/* forms and file drops */
.field{display:flex;flex-direction:column;gap:8px}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field > label,.field > legend{font-weight:500;padding:0}
.field .hint{font-size:12px;line-height:16px;color:var(--t3)}
.input{height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--card);font:inherit;font-size:15px;color:var(--t1);transition:border-color .15s var(--ease)}
.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.input[aria-invalid=true]{border-color:var(--warn)}
.err-text{font-size:12px;line-height:16px;color:var(--warn)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.choice{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--card);cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.choice:hover{background:var(--raised)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{accent-color:var(--accent);margin:0}
.drop{display:flex;align-items:center;gap:16px;padding:20px;border:1px dashed var(--line2);border-radius:12px;background:var(--card);transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ico-box{flex:none;width:40px;height:40px;border-radius:8px;background:var(--raised);display:flex;align-items:center;justify-content:center;color:var(--t2)}
.drop p{margin:0}
.sr-file{position:absolute;width:1px;height:1px;opacity:0}
.steps-how{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px;color:var(--t2)}
.steps-how b{color:var(--t1);font-weight:500}
details.how{border-top:1px solid var(--line)}
details.how summary{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;cursor:pointer;color:var(--accent);font-weight:500;list-style:none}
details.how summary::-webkit-details-marker{display:none}
details.how summary svg{transition:transform .15s var(--ease)}
details.how[open] summary svg{transform:rotate(90deg)}
details.how .how-body{padding:0 16px 16px}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.link-btn:hover{text-decoration:underline}

/* entrance: one fade and rise for the main content */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .in{animation:rise .4s var(--ease) both}
  .in:nth-child(2){animation-delay:50ms}.in:nth-child(3){animation-delay:100ms}.in:nth-child(4){animation-delay:150ms}.in:nth-child(5){animation-delay:200ms}
}

@media (max-width:860px){
  .shell{flex-direction:column}
  .side{flex:none;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 12px}
  .brand{margin:0 8px 0 0}
  .side-label,.side-foot{display:none}
  .queue-row{padding:6px 8px}
  .top{padding:0 20px}
  .page{padding:24px 20px 64px}
}