/* chikutik: shared styles for sign-in, account and privacy pages. Same tokens as the landing page. */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
:root {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
  --paper: #ffffff; --wash: #f5f5f5; --line: #e7e7e7; --faint: #c9c9c9; --mute: #6b6b6b;
  --ink-2: #2b2b2b; --ink: #000000; --on-ink: #ffffff; --gold: #a8843a; --gold-text: #7f6128; --red: #b2301f; --on-red: #ffffff;
  --font: Poppins, 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(.2,.7,.1,1); --ease-settle: cubic-bezier(.3,1.25,.5,1); --ease-lume: cubic-bezier(.3,1.3,.5,1);
}
/* dark and the other themes: /app/themes.css, loaded after this file on every page */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
code { font: 500 13px ui-monospace, Menlo, monospace; }

.btn {
  font: 500 14px/20px var(--font); height: 44px; padding: 0 20px; border-radius: 0; border: 1.5px solid var(--ink); color: var(--ink);
  background: var(--paper) linear-gradient(var(--ink), var(--ink)) no-repeat left / 0% 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none;
  transition: background-size .32s var(--ease-out), color .2s, transform .12s;
}
.btn:hover { background-size: 100% 100%; color: var(--on-ink); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.primary { background-color: var(--ink); color: var(--on-ink); background-image: linear-gradient(var(--ink-2), var(--ink-2)); }
.btn.ghost { border-color: transparent; background-color: transparent; background-image: linear-gradient(var(--wash), var(--wash)); }
.btn.ghost:hover { color: var(--ink); }
.btn.danger { color: var(--red); border-color: var(--red); background-image: linear-gradient(var(--red), var(--red)); }
.btn.danger:hover { color: var(--on-red); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--mute); }
.field input, .field select { border: 0; border-bottom: 1.5px solid var(--faint); border-radius: 0; padding: 9px 0; font-size: 16px; background-color: transparent; color: var(--ink); min-width: 0; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); }
.field .row-l { display: flex; justify-content: space-between; align-items: baseline; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.check input { margin-top: 4px; accent-color: var(--ink); }
.hint { font-size: 13px; color: var(--mute); }
.err { font-size: 14px; color: var(--red); }
.ok { font-size: 14px; color: var(--ink); border-left: 3px solid var(--gold); padding-left: 10px; }
.or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mute); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* top strip shared by auth, account and privacy */
.strip { display: flex; align-items: center; gap: 16px; padding: 18px max(16px, 4vw); }
.strip .brand { display: inline-flex; color: var(--ink); }
.strip .brand svg { height: 22px; width: auto; display: block; }
.strip .tag { font-size: 12px; font-weight: 500; color: var(--gold-text); border: 1px solid currentColor; padding: 1px 7px; }
.strip .sp { flex: 1; }
.lang { display: flex; }
.lang button { background: none; border: 0; padding: 6px; font-size: 13px; color: var(--mute); }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.foot { padding: 28px max(16px, 4vw) 36px; font-size: 13px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--mute); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* the name, in one line, in every footer; hover or focus shows who made it */
.ck-mean { position: relative; display: inline-flex; align-items: baseline; gap: 8px; flex-basis: 100%; color: var(--mute); cursor: default; outline: none; }
.ck-mean > i { align-self: center; flex: none; width: 16px; height: 4px; background: var(--gold); transform-origin: left center; animation: ck-tick 2s steps(1) infinite; }
.ck-mean b { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.ck-mean .jp { color: var(--gold-text); font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; font-weight: 500; letter-spacing: .04em; }
.ck-mean .ck-maker { position: absolute; left: 24px; bottom: calc(100% + 8px); padding: 6px 10px; background: var(--ink); color: var(--on-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.ck-mean .ck-maker::after { content: ''; position: absolute; left: 14px; top: 100%; border: 5px solid transparent; border-top-color: var(--ink); }
.ck-mean:hover .ck-maker, .ck-mean:focus-visible .ck-maker, .ck-mean.show .ck-maker { opacity: 1; transform: none; }
.ck-mean:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@keyframes ck-tick { 0% { transform: scaleX(1); } 50% { transform: scaleX(.5); } }
@media (prefers-reduced-motion: reduce) { .ck-mean > i { animation: none; } }

/* dropdowns: one look everywhere (the list itself is public/select.js on computers, the native picker on phones) */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 26px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 2px center; background-size: 15px 15px; cursor: pointer; text-overflow: ellipsis; }
select:not([multiple]):not([size]):hover { border-bottom-color: var(--mute); }
select:not([multiple]):not([size])[aria-expanded="true"] { border-bottom-color: var(--ink); }
select option, select optgroup { background: var(--paper); color: var(--ink); }
select:disabled { opacity: .55; cursor: default; }

/* page messages (team, invoice): the same card as the app's toasts, bar on the left */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; align-items: flex-start; gap: 12px;
  width: max-content; max-width: min(460px, calc(100vw - 32px)); padding: 12px 16px 12px 0; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; animation: ck-toast-in .3s cubic-bezier(.2,.7,.1,1); }
.toast::before { content: ''; flex: none; width: 22px; height: 6px; margin-top: 7px; background: var(--bar, var(--ink)); }
.toast[hidden] { display: none; }
@keyframes ck-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }