/* Extras for the hard pages; the base look comes from ../style.css. */
.icon { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.icon svg, .icon img { width: 18px; height: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.tile { cursor: pointer; background: #fff; border: 1px solid #c9ced9; border-radius: 10px; padding: 12px 16px; }
.tile small { display: block; color: #6b7280; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #eef1f6; }
.link-ish { color: #2f6fed; text-decoration: underline; }
iframe { width: 100%; border: 1px solid #c9ced9; border-radius: 8px; background: #fff; }
.backdrop { position: fixed; inset: 0; background: rgba(15, 18, 25, .45); z-index: 100; }
.modal { position: fixed; z-index: 101; left: 50%; top: 22%; transform: translateX(-50%); width: 420px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.portal-menu { position: fixed; z-index: 200; background: #fff; border: 1px solid #c9ced9; border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: grid; }
.portal-menu button { border: 0; text-align: left; }
.topbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e3e6ec; margin: -28px -36px 18px; padding: 10px 36px; }
.menubar { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.menubar > li { position: relative; padding: 6px 0; }
.menubar .menu-label { font-weight: 600; }
.menubar .sub { display: none; position: absolute; top: 100%; left: 0; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid #c9ced9; border-radius: 10px; min-width: 160px; }
.menubar > li:hover .sub { display: block; }
.menubar.closed .sub { display: none !important; }
.menubar .sub a { display: block; padding: 6px 10px; color: inherit; text-decoration: none; }
.cookie { position: fixed; left: 220px; right: 0; bottom: 0; height: 75vh; z-index: 60; background: #1f2430; color: #fff; padding: 28px 36px; }
.cookie button { margin-right: 8px; }
.viewport { height: 420px; overflow: auto; position: relative; background: #fff; border-radius: 10px; max-width: 640px; }
.viewport .rowbtn { position: absolute; left: 8px; right: 8px; height: 34px; text-align: left; }
.skeleton { background: linear-gradient(90deg, #e9ecf1, #f5f6f8, #e9ecf1); background-size: 200% 100%; animation: shimmer 1.2s infinite; height: 18px; border-radius: 6px; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
[role=listbox] { list-style: none; margin: 4px 0 0; padding: 6px; border: 1px solid #c9ced9; border-radius: 8px; background: #fff; max-width: 220px; }
[role=option] { padding: 4px 8px; cursor: pointer; }
[role=combobox], [role=switch] { display: inline-block; padding: 8px 12px; border: 1px solid #c9ced9; border-radius: 8px; background: #fff; cursor: pointer; }
.cases li { margin: 6px 0; }