/* ===========================================================================
   machado.group — RuledForm
   ---------------------------------------------------------------------------
   O campo é uma CAIXA MEDIDA, não uma linha. Duas fieiras horizontais de borda
   a borda + quatro ESQUADROS de canto (só um pedaço da vertical) — o retângulo
   fica implícito. Foco/erro fecham os esquadros até se tocarem no meio: a
   moldura completa-se em vez de mudar de cor. Nada de fundo, nada de sombra.

   EXCEPÇÃO DECLARADA à regra "forms are borderless" do readme: aquela regra
   assume um card tonal por trás (ver a precondição em `input.css`). Em papel
   editorial — página lisa, sem card — não há degrau tonal nenhum, e o campo
   passa a desenhar-se com régua. `Input` continua o default dentro de cards;
   `RuledForm` é o campo da página aberta.

   Geometria medida da referência (`refs/ref-ruled-form.png`), em px 1:1:
     cabeça 83 · inset 16 · vão 30 · área 237 · esquadro 17 · rótulo 16 mono caps
   O rótulo repousa CENTRADO na cabeça (41,5 px) e sobe para 22 px quando o
   campo enche ou ganha foco — o repouso é exactamente o print.

   As fieiras são border-top/bottom; os esquadros são ::before/::after (um por
   lado, dois gradientes cada) pintados em `currentColor`. Estado mexe em
   `border-color`, `color` e `background-size` — nunca redeclara variáveis, para
   os knobs geométricos viverem só no `.rform`.
   =========================================================================== */

.rform{--rf-head:83px;--rf-inset:16px;--rf-gap:30px;--rf-area:237px;--rf-tick:17px;--rf-tick-hover:28px;--rf-tick-shut:calc(50% + 0.5px); /* @kind other */--rf-label-fs:var(--fs-body);--rf-label-up:11px;--rf-label-up-y:22px;--rf-shift:9px;display:grid;gap:var(--rf-gap);width:100%;max-width:1051px}

/* ---- a caixa: duas fieiras + quatro esquadros ---------------------------- */
.rfield{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:var(--rf-head);padding-inline:var(--rf-inset);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:border-color var(--dur-base) var(--ease-standard)}
.rfield::before,.rfield::after{content:'';position:absolute;inset-block:-1px;width:1px;color:var(--line-strong);background:linear-gradient(currentColor,currentColor) top left/1px var(--rf-tick) no-repeat,linear-gradient(currentColor,currentColor) bottom left/1px var(--rf-tick) no-repeat;transition:background-size var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);pointer-events:none}
.rfield::before{left:0}
.rfield::after{right:0}
/* hover: os esquadros crescem meio caminho */
.rfield:hover::before,.rfield:hover::after{background-size:1px var(--rf-tick-hover),1px var(--rf-tick-hover)}
/* foco: crescem até se tocarem — a moldura fecha-se */
.rfield:focus-within{border-color:var(--line-strong)}
.rfield:focus-within::before,.rfield:focus-within::after{color:var(--ink);background-size:1px var(--rf-tick-shut),1px var(--rf-tick-shut)}

/* ---- rótulo ------------------------------------------------------------- */
.rfield__label{position:absolute;left:var(--rf-inset);top:calc(var(--rf-head)/2);translate:0 -50%;pointer-events:none;font-family:var(--font-mono);font-size:var(--rf-label-fs);line-height:1.4;font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink);transition:top var(--dur-base) var(--ease-out),font-size var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-standard)}

/* ---- controlo ----------------------------------------------------------- */
.rfield__control{width:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.4;color:var(--ink);appearance:none;transition:translate var(--dur-base) var(--ease-out)}
.rfield__control:focus{outline:none}
.rfield__control::placeholder{color:transparent}
.rfield__control:disabled{color:var(--ink-disabled);cursor:not-allowed}

/* preenchido ou em foco: o rótulo sobe, o valor desce para o lugar dele */
.rfield__control:focus~.rfield__label,.rfield__control:not(:placeholder-shown)~.rfield__label{top:var(--rf-label-up-y);font-size:var(--rf-label-up);letter-spacing:var(--tracking-wider);color:var(--ink-secondary)}
.rfield:has(.rfield__control:focus) .rfield__control,.rfield:has(.rfield__control:not(:placeholder-shown)) .rfield__control{translate:0 var(--rf-shift)}

/* ---- área de texto: a mesma cabeça, a caixa cresce para baixo ----------- */
.rfield--area{display:block;min-height:var(--rf-area)}
.rfield--area .rfield__control{position:absolute;left:var(--rf-inset);right:var(--rf-inset);top:calc(var(--rf-head)/2 - 0.7em);bottom:30px;width:auto;resize:none}

/* ---- caixa de aceite ---------------------------------------------------- */
.rfield--check{gap:var(--rf-inset);cursor:pointer}
.rfield--check .rfield__label{position:static;translate:none;top:auto;left:auto;pointer-events:auto}
.rfield__box{flex:none;width:16px;height:16px;margin:0;border:1px solid var(--line);border-radius:0;background:transparent;appearance:none;cursor:pointer;transition:var(--transition-colors)}
.rfield--check:hover .rfield__box{border-color:var(--line-strong)}
.rfield__box:checked{background:var(--ink);border-color:var(--ink)}
.rfield__box:checked::after{content:'';display:block;width:100%;height:100%;background:var(--surface-page);clip-path:polygon(20% 52%,32% 40%,44% 56%,72% 24%,84% 36%,44% 80%)}
.rfield__box:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- erro: a moldura fecha e ganha a única hue que o sistema deixa entrar */
.rfield--error{border-color:var(--status-offline)}
.rfield--error::before,.rfield--error::after{color:var(--status-offline);background-size:1px var(--rf-tick-shut),1px var(--rf-tick-shut)}
.rfield--error .rfield__label{color:var(--status-offline)}
.rform__error{margin:calc(8px - var(--rf-gap)) 0 0 var(--rf-inset);font-family:var(--font-mono);font-size:var(--fs-label);line-height:var(--lh-label);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--status-offline)}

/* ---- acção: o vão até ao botão é maior que o vão entre campos ----------- */
.rform__actions{display:flex;align-items:center;gap:var(--space-4);padding-top:45px}

@media (max-width:560px){.rform{--rf-head:72px;--rf-area:200px;--rf-label-fs:var(--fs-body-sm);--rf-gap:24px}.rform__actions{padding-top:32px}}
@media (prefers-reduced-motion:reduce){.rfield,.rfield::before,.rfield::after,.rfield__label,.rfield__control{transition:none}}