/* LinkTiles dashboard mockup, used on the Work page's LinkTiles card.

   Copied verbatim from the LinkTiles landing page (LinkTiles repo,
   netlify/index.html, the "HERO SHOT" styles; commit 9046b0d8, 2026-11-08).
   When that mockup changes, copy the block between the two markers below
   again, then keep the card overrides at the end of this file. */

.mock {
  --hairline-soft: #E5E5E5;
  --shadow-card: 0 12px 32px rgba(18, 32, 43, 0.12);
}

/* ---- start of copied LinkTiles styles ---- */
.mock { margin: 0; }
.mock-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mock-desktop {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--hairline-soft);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.mock-phone { display: none; }

.md, .mp {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #1A1A1A;
  line-height: 1.3;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.md { --u: calc(100cqw / 1280); }
.mp { --u: calc(100cqw / 375); height: 100%; }
.md .ic, .mp .ic {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.md .fav, .mp .fav { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

/* Browser chrome: says "web app" without competing with it. */
.md-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(38 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: #F1F0EC;
  border-bottom: 1px solid #E3E1D9;
}
.md-dots { display: flex; gap: calc(7 * var(--u)); }
.md-dots i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #DCD9D0; }
.md-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: calc(380 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #FBFAF7;
  font-size: calc(12 * var(--u));
  color: #7A7689;
}
.md-url .ic { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.4; }

.md-app {
  display: grid;
  grid-template-columns: calc(285 * var(--u)) 1fr;
  grid-template-rows: calc(56 * var(--u)) calc(744 * var(--u));
  overflow: hidden;
}
.md-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u));
  background: #FAFAF8;
  border-bottom: 1px solid #E5E5E5;
}
.md-brand { display: flex; align-items: center; gap: calc(4 * var(--u)); width: calc(269 * var(--u)); }
.md-brand img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.md-brand span, .mp-brand span { font-family: 'Newsreader', Georgia, serif; }
.md-brand span { font-size: calc(19 * var(--u)); }
.md-search {
  display: flex;
  align-items: center;
  width: calc(400 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid #E5E5E5;
  border-radius: calc(6 * var(--u));
  background: #fff;
  font-size: calc(14 * var(--u));
  color: #6B6B6B;
}
.md-actions { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-left: auto; }
.md-bell { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.md-bell .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.md-new {
  display: flex;
  height: calc(28 * var(--u));
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #1F77CC;
  color: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(60, 64, 67, 0.3);
}
.md-new-main {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.md-new-main .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.md-new-arrow { display: grid; place-items: center; width: calc(26 * var(--u)); }
.md-new-arrow .ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2.5; }

/* Sidebar */
.md-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #FAFAF8;
  border-right: 1px solid #E5E5E5;
}
.md-list { flex: 1; padding-top: calc(6 * var(--u)); }
.md-item {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(44 * var(--u));
  margin: calc(1 * var(--u)) calc(8 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  color: #5F5E59;
}
.md-item.is-selected { background: rgba(31, 119, 204, 0.14); color: #1A1A1A; }
.md-item.is-selected .md-label { font-weight: 600; }
.md-glyph { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.md-glyph .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.md-caret { display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #6B6B6B; }
.md-caret .ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.md-chip, .mp-chip {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  color: #5F5E59;
}
.md-chip { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(5 * var(--u)); }
.md-chip .ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.md-label {
  flex: 1;
  min-width: 0;
  padding-left: calc(4 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-count {
  min-width: calc(24 * var(--u));
  font-size: calc(12 * var(--u));
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #6B6B6B;
}
.md-count.is-pill { padding: calc(2 * var(--u)) 0; border-radius: calc(10 * var(--u)); background: rgba(44, 42, 38, 0.10); }
.md-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(8 * var(--u)) 0;
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.5 * var(--u));
  text-transform: uppercase;
  color: #6B6B6B;
}
.md-section b { padding: 0 calc(6 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 400; line-height: 1; }
.md-proj {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(31.5 * var(--u));
  margin: 0 calc(8 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(30 * var(--u));
  font-size: calc(13 * var(--u));
  color: #1A1A1A;
}
.md-proj .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #6B6B6B; }
.md-proj .md-label { padding-left: 0; }
.md-views { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
.md-views-switch {
  display: flex;
  padding: calc(5 * var(--u));
  border: 1px solid #E5E5E5;
  border-radius: calc(14 * var(--u));
  background: #FAFAF8;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(60, 64, 67, 0.12);
}
.md-view {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  min-height: calc(58 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 650;
  color: #6B6B6B;
}
.md-view .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.md-account {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(60 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(4 * var(--u)) calc(28 * var(--u));
  background: rgba(44, 42, 38, 0.07);
  box-shadow: 0 calc(-8 * var(--u)) calc(12 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.06);
  font-size: calc(14 * var(--u));
  font-weight: 500;
  color: #5F5E59;
}
.md-avatar {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: #1F77CC;
  color: #fff;
  font-size: calc(10 * var(--u));
  font-weight: 600;
}

/* Main */
.md-main { padding: calc(18 * var(--u)) calc(30 * var(--u)) 0; overflow: hidden; }
.md-head { display: flex; align-items: flex-start; margin-bottom: calc(30 * var(--u)); }
.md-title-row { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(33 * var(--u)); }
.md-title { font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1.5; }
.md-subtitle {
  display: flex;
  gap: calc(10 * var(--u));
  margin-top: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: calc(15 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ABABAB;
}
.md-head-actions { display: flex; gap: calc(2 * var(--u)); margin-left: auto; color: #5F5E59; }
.md-head-actions span { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.md-head-actions .ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.md-project { padding: calc(20 * var(--u)) 0 calc(22 * var(--u)); }
.md-project + .md-project { margin-top: calc(16 * var(--u)); border-top: 1px solid #E5E5E5; }
.md-phead { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(35 * var(--u)); }
.md-grip { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.md-grip::before {
  content: "";
  width: calc(8 * var(--u));
  height: calc(12 * var(--u));
  background-image: radial-gradient(circle, #6B6B6B calc(1.2 * var(--u)), transparent calc(1.3 * var(--u)));
  background-size: calc(4 * var(--u)) calc(4 * var(--u));
}
.md-folder { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #6B6B6B; }
.md-ptitle { padding: calc(2 * var(--u)) calc(3 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; }
.md-spacer { flex: 1; }
.md-details {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: #6B6B6B;
}
.md-details .ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.4; }
.md-more { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: #6B6B6B; }
.md-more .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.md-rule { height: 1px; margin: calc(10 * var(--u)) 0 calc(14 * var(--u)); background: #E5E5E5; }
.md-tiles {
  display: grid;
  grid-template-columns: repeat(7, calc(110 * var(--u)));
  gap: calc(12 * var(--u));
  align-items: start;
}
.md-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(108 * var(--u));
  height: calc(130 * var(--u));
  padding: calc(16 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));
  border: 1px solid #E5E5E5;
  border-radius: calc(6 * var(--u));
  background: #F8F8F8;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.md-fav { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.md-tname {
  width: 100%;
  margin-top: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  text-align: center;
  overflow-wrap: break-word;
}
.md-tile.is-add {
  justify-content: center;
  width: calc(98 * var(--u));
  height: calc(112 * var(--u));
  padding: 0;
  border-color: transparent;
  background: rgba(44, 42, 38, 0.03);
  color: #C2C2C2;
}
.md-tile.is-add .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
@media (hover: hover) {
  .md-tile:not(.is-add):hover {
    border-color: #CCC;
    background: #E8E6E0;
    box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.12);
  }
}

/* Phone: the app's own phone layout, in a plain device frame. */
.mock-phone {
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 9px;
  border-radius: 46px;
  background: #1C1B22;
  box-shadow: var(--shadow-card);
}
.mock-phone-screen {
  container-type: inline-size;
  aspect-ratio: 375 / 760;
  overflow: hidden;
  border-radius: 37px;
  background: #F4F4F2;
}
.mp-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(46 * var(--u));
  padding: calc(6 * var(--u)) calc(28 * var(--u)) 0 calc(34 * var(--u));
  background: #FAFAF8;
  font-size: calc(15 * var(--u));
  font-weight: 600;
}
.mp-status-icons { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.mp-status-icons svg { height: calc(11 * var(--u)); width: auto; fill: currentColor; }
.mp-toolbar {
  display: flex;
  align-items: center;
  height: calc(56 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 0;
  background: #FAFAF8;
  border-bottom: 1px solid #E5E5E5;
}
.mp-btn { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.mp-btn .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.mp-brand { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.mp-brand img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.mp-brand span { font-size: calc(20 * var(--u)); }
.mp-spacer { flex: 1; }
.mp-new {
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  margin-left: calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #1F77CC;
  color: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(60, 64, 67, 0.3);
}
.mp-new .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.mp-body { padding: calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.mp-head { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(36 * var(--u)); }
.mp-chip { width: calc(31 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(6 * var(--u)); }
.mp-chip .ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.mp-title { flex: 1; font-size: calc(24 * var(--u)); font-weight: 500; }
.mp-head .mp-btn { width: calc(40 * var(--u)); height: calc(36 * var(--u)); color: #5F5E59; }
.mp-head .mp-btn .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.mp-subtitle {
  margin: calc(4 * var(--u)) 0 calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6B6B;
}
.mp-card { padding: calc(8 * var(--u)) 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; }
.mp-phead { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(13 * var(--u)); }
.mp-phead .md-folder { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.mp-ptitle { font-size: calc(18 * var(--u)); font-weight: 600; }
.mp-chev { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #6B6B6B; }
.mp-more { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: auto; color: #5F5E59; }
.mp-more .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.mp-count { padding: 0 calc(13 * var(--u)) calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #6B6B6B; }
.mp-rows { margin-left: calc(13 * var(--u)); }
.mp-row {
  display: grid;
  grid-template-columns: calc(28 * var(--u)) 1fr calc(32 * var(--u));
  align-items: center;
  column-gap: calc(12 * var(--u));
  height: calc(57 * var(--u));
  padding-left: calc(4 * var(--u));
  border-bottom: 1px solid #E5E5E5;
}
.mp-name { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.mp-host { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #6B6B6B; }
.mp-row .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #5F5E59; }
.mp-add { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(52 * var(--u)); padding-left: calc(8 * var(--u)); font-size: calc(16 * var(--u)); color: #6B6B6B; }
.mp-add .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.6; }

@media (max-width: 760px) {
  .mock-desktop { display: none; }
  .mock-phone { display: block; }
}
/* ---- end of copied LinkTiles styles ---- */

/* Card overrides: the mockup sits flush at the top of the app card
   (the shared .app-mock frame is in site.css). */
.app-mock .mock-desktop { border: 0; border-radius: 0; box-shadow: none; }
.app-mock .mock-phone { width: min(260px, 100%); }