/* Timecard Genny — shared brand layer (landing + library) */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/PlusJakarta.ttf') format('truetype');
  font-weight:200 800;font-style:normal;font-display:swap;
}

:root{
  --paper:#fbf9f4;      /* page bg */
  --card:#ffffff;       /* raised surfaces */
  --sunk:#f4efe4;       /* recessed wells */
  --ink:#2c2820;        /* headings + body */
  --ink-soft:#4f483b;
  --muted:#655d47;      /* secondary text — AA on paper (~4.6:1) */
  --green:#3f7d5c;      /* primary */
  --green-press:#336449;
  --green-soft:color-mix(in srgb,var(--green) 12%,transparent);
  --green-line:color-mix(in srgb,var(--green) 26%,transparent);
  --gold:#e6b84e;       /* accent — used sparingly */
  --gold-press:#d3a53a;
  --line:#ece4d4;
  --line2:#f3ecdd;
  --shadow-sm:0 1px 2px rgba(74,60,33,.06),0 2px 6px rgba(74,60,33,.05);
  --shadow:0 2px 6px rgba(74,60,33,.07),0 18px 44px -14px rgba(74,60,33,.24);
  --shadow-lg:0 6px 16px rgba(74,60,33,.10),0 40px 80px -24px rgba(74,60,33,.36);
  --r:18px; --r-sm:12px; --r-lg:26px;
  --wm:'assets/tg-wordmark.svg';
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#0d1117;
  --card:#161b22;
  --sunk:#1b2028;
  --ink:#f2f5fa;
  --ink-soft:#cdd4de;
  --muted:#9aa4b2;
  --green:#4e9a72;
  --green-press:#5cae82;
  --green-soft:color-mix(in srgb,var(--green) 20%,transparent);
  --gold:#e6b84e;
  --line:#242c36;
  --line2:#1e252e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.45),0 24px 60px -18px rgba(0,0,0,.7);
  --shadow-lg:0 8px 20px rgba(0,0,0,.5),0 50px 100px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background-color:var(--paper);
  /* very soft paper grain so #fbf9f4 never reads as sterile flat white */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
[data-theme="dark"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.08;}
p{margin:0;}
::selection{background:var(--green-soft);}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

/* ── top nav ── */
.nav{position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.2) blur(10px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;}
.nav-left{display:flex;align-items:center;gap:11px;}
.nav-icon{width:34px;height:34px;border-radius:9px;display:block;box-shadow:var(--shadow-sm);}
.nav-word{height:30px;display:block;}
.nav-word.dark{display:none;}
[data-theme="dark"] .nav-word.light{display:none;}
[data-theme="dark"] .nav-word.dark{display:block;}
.nav-right{display:flex;align-items:center;gap:10px;}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  font-family:inherit;font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:11px 20px;border-radius:999px;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;}
.btn:active{transform:translateY(1px);}
.btn-green{background:var(--green);color:#fbfaf5;box-shadow:0 2px 10px color-mix(in srgb,var(--green) 34%,transparent);}
.btn-green:hover{background:var(--green-press);box-shadow:0 4px 16px color-mix(in srgb,var(--green) 44%,transparent);transform:translateY(-1px);}
.btn-gold{background:var(--gold);color:#2c2820;box-shadow:0 2px 12px color-mix(in srgb,var(--gold) 45%,transparent);}
.btn-gold:hover{background:var(--gold-press);box-shadow:0 5px 20px color-mix(in srgb,var(--gold) 55%,transparent);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--sunk);border-color:var(--green-line);}
.btn-lg{padding:15px 30px;font-size:17px;}

/* theme toggle */
.theme-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-size:16px;transition:background-color .16s ease,border-color .16s ease,transform .16s ease;}
.theme-btn:hover{border-color:var(--green-line);transform:translateY(-1px);}

/* ── four-dot brand motif ── */
/* static divider: three green dots + one gold (gold is 2nd) */
.dots{display:inline-flex;gap:9px;align-items:center;}
.dots .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.dots .dot.gold{background:var(--gold);}
/* divider variant with a hairline on each side */
.dot-divider{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;}
.dot-divider::before,.dot-divider::after{content:"";height:1px;flex:1;max-width:180px;
  background:linear-gradient(to var(--d,right),transparent,var(--line));}
.dot-divider::before{--d:left;}

/* loader: gold dot travels through the four positions */
.tg-loader{display:inline-flex;gap:10px;align-items:center;}
.tg-loader .dot{width:10px;height:10px;border-radius:50%;background:var(--green);
  opacity:.35;transform:scale(.82);transition:none;
  animation:tgTravel 1.6s infinite ease-in-out;}
.tg-loader .dot:nth-child(1){animation-delay:0s;}
.tg-loader .dot:nth-child(2){animation-delay:.2s;}
.tg-loader .dot:nth-child(3){animation-delay:.4s;}
.tg-loader .dot:nth-child(4){animation-delay:.6s;}
@keyframes tgTravel{
  0%,100%{background:var(--green);opacity:.32;transform:scale(.82);}
  20%,30%{background:var(--gold);opacity:1;transform:scale(1.25);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent);}
}
@media (prefers-reduced-motion:reduce){
  .tg-loader .dot{animation:none;}
  .tg-loader .dot:nth-child(2){background:var(--gold);opacity:1;}
}

/* full-screen loading overlay */
.tg-overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px);}
.tg-overlay.on{display:grid;}
.tg-overlay .col{display:flex;flex-direction:column;align-items:center;gap:20px;}
.tg-overlay .lbl{color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.01em;}

/* ── cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);}

.muted{color:var(--muted);}

/* accessibility — visible focus on every interactive element */
a:focus-visible,button:focus-visible,.btn:focus-visible,.theme-btn:focus-visible,
.tab:focus-visible,.tc-card:focus-visible,.new-card:focus-visible,.pick-btn:focus-visible{
  outline:2.5px solid var(--green);outline-offset:2px;border-radius:8px;}
:focus:not(:focus-visible){outline:none;}