/* One card, two opaque faces, one box. The front and opening share geometry;
   filing moves the original card behind the front without replacing it. */
.contact-invitation { display:flex; align-items:center; gap:13px; position:relative; border:0; background:transparent; padding:0; margin:-10px 0 -4px; color:var(--ink); text-align:left; cursor:pointer; letter-spacing:0; }
.contact-invitation[hidden],[hidden] { display:none !important; }
.invitation-title { display:block; font-size:13px; font-weight:600; }
.invitation-action { display:block; font-size:11px; margin-top:2px; }
.invitation-action>span { margin-left:5px; }
.invitation-object { position:relative; display:block; width:63px; height:51px; flex:none; }
.invitation-object i { position:absolute; width:43px; height:32px; top:7px; left:10px; background:#fff7e3; border:1px solid #b9aa8b; border-radius:3px 3px 0 0; transition:transform 240ms ease; }
.invitation-object i:nth-child(2) { left:7px; top:11px; background:#e4d6ed; }
.invitation-object i:nth-child(3) { left:12px; top:15px; background:#fffaf0; }
.invitation-object i:nth-child(3)::before { content:'DU'; position:absolute; top:4px; left:7px; color:#5c4667; font-size:8px; font-style:normal; letter-spacing:1px; }
.invitation-object b { position:absolute; inset:27px 0 0; border:1px solid #9377a5; border-top:2px solid #dbc8e7; border-bottom:3px solid #9476a4; border-radius:2px 2px 5px 5px; background:#baa0cc; box-shadow:0 3px 3px #365b5820; }
.invitation-object b::after { content:''; position:absolute; left:22px; top:6px; width:20px; height:7px; border:1px solid #a7998a; background:#fff5dc; }
.contact-invitation:hover i:nth-child(3),.contact-invitation:focus-visible i:nth-child(3) { transform:translateY(-9px) rotate(3deg); }
.contact-invitation:focus-visible,.contact-dialog button:focus-visible { outline:2px solid var(--petrol); outline-offset:4px; }
.contact-dialog { --card-width:318px; --card-height:254px; position:fixed; inset:0; width:min(920px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #b6c7b9; border-radius:7px; background:#e2eade; color:var(--ink); overflow:auto; box-shadow:0 25px 90px #0a252a55; scrollbar-width:thin; scrollbar-color:#a0b5a4 #e2eade; overscroll-behavior:contain; }
.contact-dialog::backdrop { background:#173532a6; backdrop-filter:blur(5px); }
.contact-workbench { position:relative; padding:29px 30px 19px; }
.contact-close { position:absolute; right:15px; top:10px; width:40px; height:40px; border:0; background:transparent; font-size:29px; font-weight:300; cursor:pointer; }
.contact-heading { margin:0 0 9px; padding-right:28px; }
.contact-eyebrow { font-size:10px; letter-spacing:.15em; color:#597267; margin:0 0 8px; }
.contact-heading h2 { font-size:32px; line-height:1.15; letter-spacing:-.04em; font-weight:600; margin:0; }
.contact-heading #contact-description { font-size:13px; line-height:1.5; color:#52665c; margin:10px 0 0; }
.contact-permission { font-size:10px; color:#667969; line-height:1.4; margin:7px 0 0; }
.contact-stage { --box-x:calc(100% - 360px); --box-y:20px; --box-width:350px; --box-front-y:178px; --box-height:384px; position:relative; height:419px; isolation:isolate; }
.card-home { position:absolute; left:10px; top:67px; width:var(--card-width); height:var(--card-height); pointer-events:none; }
.card-mover { position:absolute; top:0; left:0; width:var(--card-width); height:var(--card-height); z-index:7; will-change:transform; perspective:1000px; }
.contact-card { position:absolute; inset:0; transform-style:preserve-3d; }
.card-face { position:absolute; inset:0; background:#fffbef; border:1px solid #b9ad96; border-bottom:3px solid #c9bba0; border-radius:5px; box-shadow:0 4px 6px #374d4226; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; cursor:grab; user-select:none; }
.card-back { transform:rotateY(180deg); background:#f9f2df; }
/* Only the exposed card surface owns touch dragging. Editable controls are
   siblings, so their native text selection and touch gestures remain available. */
.card-drag-surface { position:absolute; inset:0; z-index:0; touch-action:none; }
.card-label,.card-fields { position:relative; z-index:1; pointer-events:none; }
.card-foot { z-index:1; pointer-events:none; }
.card-fields input,.card-fields label,.card-foot button { pointer-events:auto; }
.card-fields input { user-select:text; }
.card-fields label { cursor:default; }

.card-label { display:flex; align-items:center; gap:8px; height:48px; padding:0 18px 0 20px; border-bottom:1px solid #cebea265; background:#f6ecd7; color:#5d5260; font-size:11px; }
.card-grip { display:flex; align-items:center; gap:6px; min-height:36px; padding:3px 5px; margin-left:-5px; border:0; background:transparent; color:#526b5e; font-size:10px; cursor:grab; user-select:none; touch-action:none; }
.card-grip:focus-visible { outline-offset:-4px !important; }
.grip-dots { color:#8c8779; font-size:20px; line-height:1; }
.card-monogram { font:bold italic 25px Georgia,serif; margin-left:auto; color:#725481; }
.card-fields { padding:13px 20px 0; display:grid; gap:14px; }
.write-line { display:flex; flex-direction:column; gap:2px; }
.write-line label,.position-field legend { font-size:11px; line-height:1.3; font-weight:600; }
.write-line label>span,.position-field legend>span { font-weight:400; font-size:9px; margin-left:5px; color:#776f65; }
.write-line input { width:100%; min-width:0; border:0; border-bottom:1px solid #b9ad96; border-radius:0; padding:5px 0 6px; height:33px; background:transparent; color:var(--ink); font:16px/1.3 Arial,sans-serif; }
.write-line input::placeholder { color:#938878; font-size:13px; }
.write-line input:focus { outline:none; border-bottom:2px solid var(--petrol); padding-bottom:5px; background:#d5e1d830; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; position:absolute; left:20px; right:14px; bottom:9px; height:32px; }
.card-foot>span { font-size:9px; letter-spacing:.06em; color:#8b806e; }
.card-turn { border:0; padding:6px; background:transparent; font-size:11px; color:#526b5e; cursor:pointer; }
.card-turn>span { display:inline-block; font-size:24px; vertical-align:middle; line-height:1; margin-left:3px; }
.position-field { border:0; padding:0; margin:0; min-width:0; }
.position-field legend { padding:0; margin-bottom:5px; }
.position-options { display:grid; grid-template-columns:1fr 1fr; gap:3px 7px; }
.position-options label { display:flex; align-items:center; position:relative; cursor:pointer; min-height:27px; }
.position-options input { appearance:none; width:13px; height:13px; border:1px solid #9b9a86; border-radius:50%; margin:0 6px 0 0; flex:none; }
.position-options input:checked { border:4px solid var(--petrol); background:#fffaf0; }
.position-options input:focus-visible { outline:2px solid var(--petrol); outline-offset:3px; }
.position-options span { font-size:11px; }
.position-options input:checked+span { font-weight:600; }
.file-box { position:absolute; left:var(--box-x); top:var(--box-y); width:var(--box-width); height:var(--box-height); z-index:1; pointer-events:none; }
.file-lid { position:absolute; left:7px; right:7px; top:0; height:151px; border:2px solid #967aaa; border-radius:8px 8px 3px 3px; background:#d6c5df; box-shadow:inset 0 0 0 4px #e6d8ed; transform:perspective(900px) rotateX(-9deg); transform-origin:bottom; }
.file-lid>span { display:block; padding:24px 23px; font-size:12px; line-height:1.5; color:#7b6687; }
.file-lid i { position:absolute; bottom:-2px; left:24px; width:18px; height:6px; background:#af98bd; border:1px solid #887391; border-radius:2px; }
.file-lid i:last-child { left:auto; right:24px; }
.file-interior { position:absolute; inset:131px 0 0; border:2px solid #806589; border-top:2px solid #d4bcdf; border-radius:3px 3px 6px 6px; background:#9e85ad; box-shadow:inset 7px 0 #8e759d,inset -7px 0 #c1a9ce,2px 6px 7px #365b5826; }
.file-divider { position:absolute; left:17px; right:17px; top:116px; height:200px; border:1px solid #b4aa8e; background:#eee2c4; border-radius:3px; transition:transform 300ms ease; }
.file-divider>span { position:absolute; left:9px; top:-20px; min-width:61px; height:21px; padding:3px 9px; border:1px solid #b4aa8e; border-bottom:0; border-radius:4px 4px 0 0; background:inherit; font-size:10px; }
.divider-near { top:129px; left:13px; right:13px; background:#f8efdc; }
.divider-near>span { left:87px; }
.file-opening { position:absolute; left:calc(var(--box-x) + 10px); top:calc(var(--box-y) + 136px); width:calc(var(--box-width) - 20px); height:42px; z-index:4; background:#655073; border:1px solid #7f688a; border-top:3px solid #8f779c; box-shadow:inset 0 5px 7px #34223f33; color:#f2e6f7; padding:0; cursor:pointer; transition:background 180ms,box-shadow 180ms; }
.file-opening>span { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; gap:14px; font-size:11px; letter-spacing:.015em; }
.file-opening b { font-size:21px; font-weight:400; }
.file-front { position:absolute; left:var(--box-x); top:calc(var(--box-y) + var(--box-front-y)); width:var(--box-width); height:calc(var(--box-height) - var(--box-front-y)); z-index:6; border:2px solid #90709e; border-top:2px solid #eadbf0; border-bottom:5px solid #9d7caf; border-radius:2px 2px 6px 6px; background:#bba0cf; box-shadow:inset 3px 0 #c9b1da,inset -3px 0 #ac8dbf; pointer-events:none; }
.file-sign { position:absolute; left:50%; top:27px; transform:translateX(-50%); white-space:nowrap; padding:7px 23px; border:1px solid #968c7a; border-bottom:2px solid #a3977e; border-radius:2px; background:#fff4d5; color:#503955; font-size:13px; box-shadow:0 2px 2px #69577822; }
.file-sign::before,.file-sign::after { content:''; position:absolute; top:50%; width:3px; height:3px; border-radius:50%; background:#9a9482; }
.file-sign::before { left:6px; }.file-sign::after { right:6px; }
.file-handle { position:absolute; left:calc(50% - 24px); top:83px; width:48px; height:10px; border:1px solid #887792; border-bottom:3px solid #7f7187; border-radius:2px 2px 4px 4px; background:#d2cbd5; box-shadow:0 3px 0 #9a80ad; }
.file-number { position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:8px; letter-spacing:.16em; color:#715680; }
.card-guidance { position:absolute; top:326px; left:90px; display:flex; gap:15px; align-items:center; font-size:10px; line-height:1.45; color:#6a7c70; }
.card-guidance svg { width:95px; height:46px; fill:none; stroke:#90a497; stroke-width:1.5; stroke-linecap:round; }
.is-dragging .card-face,.is-dragging .card-grip { cursor:grabbing; }
.is-dragging .file-opening { box-shadow:inset 0 4px 5px #34223f33,0 0 0 3px #c4ad6e; }
.is-over .file-opening { background:#365b58; box-shadow:inset 0 4px 5px #203a3722,0 0 0 3px #365b58; }
.is-over .divider-back { transform:translateY(-8px); }
.is-over .divider-near { transform:translateY(-4px); }
.is-busy .card-face,.is-busy .card-grip { cursor:wait; }
.is-inserting .card-mover { z-index:5; }
.is-filed .card-face,.is-filed .card-grip { cursor:default; }
.is-filed .file-opening>span { visibility:hidden; }
.filed-stamp { position:absolute; right:15px; top:4px; width:82px; padding:4px; border:2px solid #587561; border-radius:3px; text-align:center; color:#587561; background:#f8f4e9; transform:rotate(-9deg) scale(1.3); font:600 20px/.8 Georgia,serif; opacity:0; pointer-events:none; }
.filed-stamp small { display:block; font:7px/1.3 Arial,sans-serif; text-transform:uppercase; margin-top:4px; letter-spacing:.04em; }
.is-filed .filed-stamp { opacity:1; transform:rotate(-9deg); transition:transform 240ms cubic-bezier(.2,1.8,.5,1),opacity 100ms; }
.contact-receipt { position:absolute; left:12px; top:77px; width:310px; z-index:8; }
.receipt-index { color:#5e7f67; font-size:10px; letter-spacing:.11em; }
.contact-receipt:focus-visible { outline:1px solid #76967f; outline-offset:7px; border-radius:2px; }
.contact-receipt h3 { font-size:28px; line-height:1.18; font-weight:500; letter-spacing:-.035em; margin:17px 0 15px; }
.contact-receipt h3 em { color:#365b58; font-family:Georgia,serif; font-size:31px; }
.contact-receipt p { font-size:12px; line-height:1.5; color:#536459; }
.contact-receipt .receipt-aside { font-size:10px; margin-top:18px; }
.receipt-close,.receipt-replay { border:0; background:transparent; color:#365b58; border-bottom:1px solid #92a596; padding:6px 0; margin:10px 18px 0 0; font-size:11px; cursor:pointer; }
.is-filed + .contact-bottom .contact-actions { visibility:hidden; }
.contact-status { margin:0 0 11px; min-height:18px; color:#536459; font-size:11px; }
.contact-actions { display:flex; align-items:center; gap:25px; justify-content:space-between; padding-top:13px; border-top:1px solid #b1c0ad; }
.contact-purpose { margin:0; color:#6a786b; font-size:10px; line-height:1.45; max-width:47ch; }
.contact-submit { border:1px solid #7f9787; border-bottom:3px solid #698775; background:#d2e0cd; padding:11px 15px 9px; white-space:nowrap; border-radius:3px; color:#365b58; font-size:12px; cursor:pointer; }
.contact-submit:hover { background:#c4d6bf; }
.contact-submit span { margin-left:16px; font-size:16px; }
.contact-submit:disabled { opacity:.6; cursor:wait; }
.contact-preview { margin:12px 0 0; font-size:10px; line-height:1.4; color:#836d49; }
.contact-error { font-size:12px; line-height:1.5; color:#933d46; margin:0 0 10px; }
.address-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
@media (max-width:800px) and (min-width:641px) { .contact-dialog { --card-width:280px; }.contact-workbench { padding-inline:21px; }.contact-stage { --box-width:302px; --box-x:calc(100% - 308px); }.card-home { left:0; }.card-fields { padding-inline:15px; }.card-label { padding-inline:15px; }.card-guidance { left:20px; }.contact-receipt { width:260px; left:0; } }
@media (max-width:640px) { .contact-dialog { --card-width: min(302px,calc(100vw - 58px)); --card-height:254px; width:calc(100vw - 18px); max-height:calc(100dvh - 18px); }.contact-workbench { padding:27px 16px 17px; }.contact-heading { padding-right:20px; }.contact-eyebrow { font-size:9px; }.contact-heading h2 { font-size:27px; }.contact-heading #contact-description { font-size:12px; max-width:30ch; }.contact-stage { --box-width:calc(var(--card-width) + 16px); --box-x:calc((100% - var(--box-width)) / 2); --box-y:304px; --box-front-y:146px; --box-height:354px; height:672px; }.card-home { left:calc((100% - var(--card-width)) / 2); top:25px; }.file-lid { height:135px; }.file-lid>span { padding-top:15px; }.file-interior { top:107px; }.file-divider { top:88px; }.divider-near { top:101px; }.file-opening { top:calc(var(--box-y) + 104px); }.card-guidance { top:277px; left:0; width:100%; justify-content:center; }.card-guidance svg { display:none; }.card-guidance br { display:none; }.card-guidance { font-size:9px; }.contact-actions { flex-direction:column-reverse; gap:13px; align-items:stretch; }.contact-submit { min-height:45px; }.contact-purpose { max-width:none; }.contact-status { font-size:10px; }.contact-receipt { left:10px; top:34px; width:calc(100% - 20px); }.contact-receipt h3 { margin-block:13px; }.contact-receipt .receipt-aside { margin-top:12px; }.card-foot { left:15px; right:10px; }.card-fields { padding-inline:16px; } }
@media (prefers-reduced-motion:reduce) { .contact-dialog *, .invitation-object i { transition:none !important; } }