/* Staffly Link: the space theme as a modern workspace. Cyan is Link's colour. Loaded after link.css and workspace.css. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=display=swap');

:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Inter", system-ui, sans-serif;
  --bg: #f5f5f8; --surface: #ffffff; --panel: #ffffff; --panel2: #f6f7ff; --hover: #eceefd; --hover2: #dfe3fb;
  --line: #e3e3ea; --line2: #c9cff0; --ink: #14173a; --muted: #5b6188; --dim-fg: #3b4170;
  --accent: #0a7f97; --accent-ink: #ffffff; --accent-soft: #dcf6fb; --blue-fg: #075f73; --blue-bg: #dcf6fb; --sel-bg: #e4e7fd;
  --mine-bg: #f0fbfd; --mine-line: #a8e3ee; --vio-bg: #ebe7ff; --vio-fg: #4a3db5;
  --r: 12px;
}
:root[data-theme="dark"] {
  --bg: #07070d; --surface: #0d0d16; --panel: #0d0d16; --panel2: #12121d; --hover: #181826; --hover2: #20202f;
  --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .17); --ink: #eef0ff; --muted: #9a9cb4; --dim-fg: #c2c4d8;
  --accent: #3ed8f2; --accent-ink: #04202a; --accent-soft: rgba(62, 216, 242, .14); --red-2: #7be6f7; --blue-fg: #8be9f9; --blue-bg: rgba(62, 216, 242, .16); --sel-bg: rgba(139, 124, 255, .2);
  --mine-bg: rgba(62, 216, 242, .08); --mine-line: rgba(62, 216, 242, .35); --vio-bg: rgba(139, 124, 255, .2); --vio-fg: #c9c2ff; --chip-me: rgba(62, 216, 242, .25);
}
body.link-page { font-family: var(--sans); background: var(--bg); }
:root[data-theme="dark"] body.link-page {
  background: radial-gradient(900px 420px at 50% -120px, rgba(62, 216, 242, .1), transparent 70%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 56px 56px, #07070d; background-attachment: fixed;
}
:root:not([data-theme="dark"]) body.link-page { background: #f5f5f8; }

/* Three floating panels */
.lk { padding: 12px; gap: 12px; height: 100vh; box-sizing: border-box; grid-template-columns: 68px 272px minmax(0, 1fr); }
.lk.collapsed { grid-template-columns: 68px 0 minmax(0, 1fr); }
.lk.collapsed { gap: 12px 0; } .lk.collapsed .lk-main { margin-left: 12px; }
.lk-rail, .lk-sub, .lk-main { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
:root[data-theme="dark"] .lk-rail, :root[data-theme="dark"] .lk-sub, :root[data-theme="dark"] .lk-main { background: #0b0b14;  }
.lk-main { border-left: 1px solid var(--line); padding: 30px 38px 60px; }
.lk-collapse { left: 66px; top: 82px; }
.lk-rail { padding: 16px 0; }
.lk-rail .lk-logo, .lk-rail .lk-logo img { border-radius: 10px; }
.lk-rail a.ri { border-radius: 10px; }
.lk-rail a.ri[aria-current="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--mine-line); }
.lk-rail a.ri[aria-current="true"]::before { display: none; }
.lk-subtitle { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; padding: 6px 10px 18px; }
.lk-group { border-bottom-color: var(--line); }
.lk-group h4 { letter-spacing: .1em; font-size: 11px; }
.lk-group a { border-radius: 8px; padding: 9px 14px; font-size: 15px; color: var(--dim-fg); }
.lk-group a:hover { background: var(--hover); color: var(--ink); }
.lk-group a[aria-current="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--mine-line); }

/* Headings, cards, rows */
.lk-head h1, .lk-main > div > .lk-head h1 { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.lk-head p { color: var(--muted); }
.lk-head { border-bottom: 0; padding-bottom: 8px; }
.lk-card, .ws-tile, .ws-row { border-radius: var(--r); border-color: var(--line); }
.lk-card { padding: 22px; background: var(--surface); }
:root[data-theme="dark"] .lk-card, :root[data-theme="dark"] .ws-tile, :root[data-theme="dark"] .ws-row { background: rgba(255, 255, 255, .025); }
.lk-card h3 { font-family: var(--display); font-size: 17px; }
.ws-tile { padding: 18px 20px; transition: transform .15s, border-color .15s; }
a.ws-tile:hover { border-color: var(--mine-line); text-decoration: none; }
.ws-big { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; }
.ws-row { padding: 14px 18px; }
.lk-main a { color: var(--accent); }
.lk-main .ws-row b a { color: var(--ink); }

/* Buttons, pills, inputs */
.lk-btn, .lk-main button { border-radius: 8px; }
.lk-btn { padding: 9px 18px; }
.lk-btn.primary, .lk-main button.primary { background: var(--accent); color: var(--accent-ink); }
.lk-btn.primary:hover { background: var(--blue-fg); color: var(--accent-ink); }
.lk-pill { border-radius: 6px; padding: 3px 11px; }
.lk-main input, .lk-main select, .lk-main textarea { border-radius: 10px; border-color: var(--line2); padding: 10px 14px; }
:root[data-theme="dark"] .lk-main input, :root[data-theme="dark"] .lk-main select, :root[data-theme="dark"] .lk-main textarea { background: rgba(255, 255, 255, .04); }
.lk-main input:focus, .lk-main select:focus, .lk-main textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lk-theme { border-radius: 8px; }

/* Start, picker and sign-in screens */
.lk-center, .lk-home { background: transparent; }
.lk-top { border-radius: 8px; }
.ws-modal { border-radius: 12px; }

@media (max-width: 860px) {
  .lk, .lk.collapsed { padding: 8px; gap: 8px; grid-template-columns: 56px minmax(0, 1fr); height: auto; min-height: 100vh; }
  .lk.collapsed .lk-main { margin-left: 0; }
  .lk-rail { position: sticky; top: 8px; height: calc(100vh - 16px); }
  .lk-sub { position: fixed; left: 72px; top: 8px; bottom: 8px; width: 260px; z-index: 20; display: none; background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .lk:not(.collapsed) .lk-sub { display: block; }
  .lk-main { grid-column: 2; }
  .lk-collapse { top: 20px; left: 56px; }
  .lk-rail, .lk-sub, .lk-main { border-radius: 12px; }
  .lk-main { padding: 22px 18px 50px; }
}
.lk-main:focus, .lk-main:focus-visible, .lk-main > *:focus:not(input):not(select):not(textarea):not(button):not(a) { outline: none; }

/* Beta badge beside the workspace name */
.lk-subtitle::after { content: "Beta"; display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; font: 600 11px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--mine-line); vertical-align: middle; }