/* The free tools (/schengen-calculator/, /plug-adapter/; the owner, 2026-10-27): the support
   page's reading column on the paper, the tool itself as a toy card, the answer as a big line,
   then plain copy for how it works. Light and dark through styles.css's tokens. */
body.tool{background:var(--paper);color:var(--text-dark)}
.tool .col{max-width:820px;margin:0 auto;padding:calc(var(--nav-h) + clamp(36px,7vh,70px)) var(--pad) clamp(50px,8vh,80px)}
/* the app at the top: right under the intro (the owner, 2026-10-27) */
.tool .col > .app-card{margin:24px 0 0}
.tool .kicker{margin:0 0 12px}
.tool h1{font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0}
.tool .intro{margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--text-mid);max-width:60ch}
.tool h2{font-size:22px;letter-spacing:-.015em;font-weight:800;margin:48px 0 0}
.tool .copy p,.tool .copy li{font-size:16.5px;line-height:1.62;color:var(--text-dark);opacity:.86}
.tool .copy p{margin:12px 0 0}
.tool .copy ul{margin:12px 0 0;padding-left:22px}
.tool .copy li{margin:6px 0}
.tool .col a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* the tool: a card with a lip-less edge, as the app's read-only cards */
.panel{margin:28px 0 0;padding:clamp(18px,3vw,26px);border-radius:26px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset}
.panel + .panel{margin-top:14px}
.panel h2{margin:0;font-size:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mid)}
.field input,.field select{font:inherit;font-size:17px;font-weight:700;color:var(--text-dark);background:var(--paper);border:0;border-radius:14px;
  padding:12px 14px;min-height:48px;width:100%;box-shadow:0 0 0 1.5px var(--card-edge) inset;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-mid) 50%),linear-gradient(135deg,var(--text-mid) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.field input[aria-invalid="true"]{box-shadow:0 0 0 2px #e5484d inset}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.pick{grid-template-columns:1fr}}

/* toy buttons: a lip means press me */
.toy-btn{font:inherit;font-size:15px;font-weight:800;border:0;cursor:pointer;border-radius:999px;padding:11px 18px 10px;display:inline-flex;align-items:center;gap:8px;
  background:var(--card);color:var(--text-dark);box-shadow:0 0 0 1.5px var(--card-edge) inset,0 3px 0 var(--card-lip);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.toy-btn:active{transform:translateY(3px);box-shadow:0 0 0 1.5px var(--card-edge) inset,0 0 0 var(--card-lip)}
.toy-btn.prominent{background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-deep)}
.toy-btn.prominent:active{box-shadow:0 0 0 var(--accent-deep)}
.toy-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.icon-btn{width:44px;height:44px;padding:0;justify-content:center;flex:none;font-size:20px;line-height:1}

/* the answer */
.answer{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.answer .big{font-size:clamp(26px,4vw,34px);line-height:1.1;letter-spacing:-.02em;font-weight:900;margin:0}
.answer .line{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--text-mid)}
.answer .ok{color:#2f9a3f}
.answer .warn{color:#c77a00}
.answer .bad{color:#e5484d}
@media (prefers-color-scheme:dark){.answer .ok{color:#5cc24e}.answer .warn{color:#f7b931}.answer .bad{color:#ff6b6b}}
.facts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.facts-list li{padding:14px 16px;border-radius:18px;background:var(--paper)}
.facts-list b{display:block;font-size:22px;font-weight:900;letter-spacing:-.01em}
.facts-list span{display:block;margin-top:2px;font-size:14px;color:var(--text-mid);line-height:1.4}

/* the app, once, at the foot */
.app-card{margin:44px 0 0;padding:22px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.app-card img{flex:none;width:56px;height:56px;border-radius:13px;box-shadow:0 6px 14px rgba(20,60,140,.22)}
.app-card div{flex:1;min-width:220px}
.app-card b{display:block;font-size:18px;font-weight:800}
.app-card span{display:block;margin-top:3px;font-size:15px;color:var(--text-mid);line-height:1.45}
.tool .col .app-card a.toy-btn{color:#fff;text-decoration:none}
.tool .other{margin:22px 0 0;font-size:15.5px;color:var(--text-mid)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* /compare/<app>/: a checkbox table (the owner, 2026-10-27), Peregrino's column lit */
.ck-table{width:100%;margin:22px 0 0;border-collapse:separate;border-spacing:0;border-radius:22px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset;overflow:hidden}
.ck-table th,.ck-table td{padding:12px 14px;border-top:1.5px solid var(--card-edge);text-align:left;vertical-align:middle}
.ck-table thead th{border-top:0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mid);text-align:center}
.ck-table thead th.us{color:var(--accent)}
.ck-table tbody th{font-size:15.5px;font-weight:700;line-height:1.35;width:46%}
.ck-table td{text-align:center;width:27%}
.ck-table .us{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ck-table td svg{width:26px;height:26px;padding:4px;border-radius:50%;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ck.yes svg{background:#2f9a3f;stroke:#fff}
.ck.no svg{background:var(--card-edge);stroke:var(--text-mid)}
.ck.part svg{background:#f2a60c;stroke:#fff}
.ck small{display:block;margin-top:4px;font-size:12.5px;line-height:1.3;color:var(--text-mid)}
.tool .both{margin:18px 0 0;padding:14px 18px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset;font-size:16px;line-height:1.5}
.tool .checked{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-mid)}
.tool .checked a{color:var(--text-mid)}
@media (max-width:560px){.ck-table th,.ck-table td{padding:10px 8px}.ck-table tbody th{font-size:14.5px}.ck small{font-size:11.5px}}
.cmp-cards{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cmp-cards a{display:block;padding:18px 20px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1.5px var(--card-edge) inset,0 4px 0 var(--card-lip);
  color:var(--text-dark)!important;text-decoration:none!important;transition:transform .12s var(--ease)}
.cmp-cards a:active{transform:translateY(3px)}
.cmp-cards b{display:block;font-size:19px;font-weight:800}
.cmp-cards span{display:block;margin-top:4px;font-size:15px;line-height:1.45;color:var(--text-mid)}