/* anubsinha.com — home page: the table of fields and the field panel. Tokens come from site.css. */
:root{
  --f-ma:#8c2f1f; --f-co:#2c4a72; --f-mi:#8a6314; --f-ie:#9c4f2a;
  --f-ph:#3d3f87; --f-nu:#a8731c; --f-ch:#25736d; --f-ae:#4a5b70; --f-sp:#2f6b8f;
  --f-bi:#3f7a3c; --f-bt:#6e8a2a; --f-nn:#5a5a66; --f-mu:#6a2d5c; --f-st:#a33d4f;
  --f-hf:#c2185b; --f-pp:#1d2f6f; --f-it:#5b2a86; --f-ro:#0b7285;
  --rule:#c9c1ae;
}
[data-theme="dark"]{
  --f-ma:#d98a6a; --f-co:#88aadd; --f-mi:#d9b25a; --f-ie:#d99a6a;
  --f-ph:#9b9ce0; --f-nu:#e0b45a; --f-ch:#6fc2ba; --f-ae:#a3b3c8; --f-sp:#7fb6d9;
  --f-bi:#8ccb86; --f-bt:#b8cf6a; --f-nn:#b0b0bc; --f-mu:#cf8ac0; --f-st:#e08a98;
  --f-hf:#f08cb4; --f-pp:#93a3e8; --f-it:#b48ae0; --f-ro:#6fc7d9;
  --rule:#4a4752;
}

main.home{max-width:1040px; margin:0 auto; padding:64px clamp(16px,5vw,48px) 90px;}

.mast{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px; padding-bottom:14px; border-bottom:1px solid var(--rule);}
.mast h1{font-size:1.35rem; letter-spacing:-.01em; margin:0;}
.mast .links{font-family:var(--sans); font-size:.78rem; color:var(--muted); display:flex; gap:16px;}
.mast .links a{color:var(--muted); text-decoration:none;}
.mast .links a:hover{color:var(--accent);}

.table{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:12px;}
@media (max-width:820px){ .table{grid-template-columns:repeat(4, minmax(0,1fr));} }
@media (max-width:560px){ .table{grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px;} .el .sym{font-size:1.9rem;} }
@media (max-width:380px){ .table{grid-template-columns:repeat(2, minmax(0,1fr));} }

.el{position:relative; display:grid; text-decoration:none; grid-template-rows:auto 1fr auto; min-height:clamp(118px,11.5vw,150px); padding:9px 10px 9px; background:var(--surface); border:1.5px solid var(--border); border-radius:6px; text-align:left; color:inherit; cursor:pointer; font:inherit; transition:transform .15s, border-color .15s, box-shadow .15s; min-width:0;}
.el:hover{transform:translateY(-2px); border-color:var(--c); box-shadow:0 12px 30px -20px rgba(0,0,0,.5);}
.el[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb, var(--c) 9%, var(--surface)); box-shadow:inset 0 0 0 1.5px var(--c);}
.el:focus-visible{outline:2px solid var(--c); outline-offset:3px;}
.el .top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--faint); font-variant-numeric:tabular-nums;}
.el .top .mass{color:var(--c); font-weight:500;}
.el .sym{font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,4.2vw,2.9rem); line-height:1; color:var(--c); letter-spacing:-.03em; align-self:center;}
.el .name{font-family:var(--sans); font-weight:600; font-size:.7rem; line-height:1.2; color:var(--ink); min-height:2.4em; hyphens:auto; overflow-wrap:break-word; letter-spacing:-.01em;}
.el .name small{display:block; font-weight:400; color:var(--muted); font-size:.68rem; margin-top:2px;}
.el.empty .sym{opacity:.55;}
.key{font-family:var(--sans); font-size:.72rem; color:var(--faint); margin-top:14px; display:flex; gap:18px; flex-wrap:wrap;}
.key .mono{font-family:var(--mono);}

main.home footer{margin-top:80px; padding-top:20px;}