/* BanRay Premium Layer — final cascade layer.
   Performance rules: only transform/opacity animate; no large backdrop-filters;
   one static noise texture; all motion disabled under prefers-reduced-motion. */
:root {
  --pl-ink: #2b221c;
  --pl-copy: #6f5e52;
  --pl-accent: #b04a24;
  --pl-accent-2: #d9875a;
  --pl-gold: #c9a46a;
  --pl-line: rgba(70, 45, 30, .10);
  --pl-hair: rgba(70, 45, 30, .16);
  --pl-glass: rgba(255, 252, 247, .72);
  --pl-ease: cubic-bezier(.22, 1, .36, 1);
  --pl-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pl-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(60, 35, 20, .05), 0 12px 32px -14px rgba(60, 35, 20, .18);
  --pl-shadow-lift: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 2px 6px rgba(60, 35, 20, .06), 0 28px 60px -22px rgba(90, 45, 20, .30);
}

::selection {
  background: rgba(176, 74, 36, .18);
  color: var(--pl-ink)
}

/* ── Ambient canvas: film grain + hairline architectural grid (static, painted once) ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main {
  position: relative;
  isolation: isolate
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(var(--pl-line) 1px, transparent 1px), linear-gradient(90deg, var(--pl-line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 70% 8%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 55% at 70% 8%, #000 0%, transparent 70%)
}

/* ── Sidebar: quiet material, precision active state ── */
.sidebar {
  background: linear-gradient(180deg, #f3ece2 0%, #efe6da 100%) !important;
  border-right: 1px solid var(--pl-hair) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6)
}

.sidebar nav button {
  position: relative;
  border-radius: 14px !important;
  transition: background .35s var(--pl-ease), color .35s var(--pl-ease), transform .35s var(--pl-ease) !important
}

.sidebar nav button:not(.active):hover {
  background: rgba(255, 255, 255, .55) !important;
  transform: translateX(2px)
}

html body .sidebar nav button.active,
html body .office-workbench-sidebar nav a.active {
  background: #a6532e !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(122, 63, 34, .22) !important
}

html body .sidebar nav button.active svg,
html body .office-workbench-sidebar nav a.active svg {
  color: #fff !important
}

html body .office-workbench-sidebar nav a small {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 21px;
  padding: 0 6px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #796b60;
  background: #d9cfc3
}

.sidebar nav button.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  transform: translateY(-50%);
  background: linear-gradient(var(--pl-accent-2), var(--pl-accent))
}

.sidebar select {
  border-radius: 14px !important;
  border: 1px solid var(--pl-hair) !important;
  background-color: rgba(255, 255, 255, .7) !important;
  box-shadow: var(--pl-shadow) !important
}

.sidebar .profile {
  border-top: 1px solid var(--pl-hair) !important
}

.sidebar .side-note .dot {
  box-shadow: 0 0 0 0 rgba(120, 144, 130, .5);
  animation: pl-ping 3.2s var(--pl-ease) infinite
}

@keyframes pl-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(120, 144, 130, .45)
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(120, 144, 130, 0)
  }
}

/* ── Typography: tighter display, luminous accent word ── */
#home h1,
.office-copy h1 {
  letter-spacing: -.045em !important;
  font-feature-settings: "ss01", "kern"
}

.office-copy h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #8e3517 0%, var(--pl-accent) 35%, var(--pl-accent-2) 55%, var(--pl-accent) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: pl-sheen 9s ease-in-out infinite
}

@keyframes pl-sheen {

  0%,
  100% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.eyebrow,
.edition,
.office-overline span {
  letter-spacing: .22em !important
}

h2 {
  letter-spacing: -.03em
}

/* ── Hero art: orbital geometry ── */
.office-art {
  position: relative
}

.office-art::before,
.office-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0
}

.office-art::before {
  inset: 6% 4%;
  border: 1px dashed rgba(176, 74, 36, .22);
  animation: pl-spin 80s linear infinite
}

.office-art::after {
  width: 10px;
  height: 10px;
  top: 12%;
  right: 14%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--pl-accent-2) 45%, var(--pl-accent));
  box-shadow: 0 0 0 6px rgba(217, 135, 90, .12), 0 6px 16px rgba(176, 74, 36, .35);
  animation: pl-float 7s ease-in-out infinite
}

.office-art>* {
  position: relative;
  z-index: 1
}

@keyframes pl-spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes pl-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

.art-ticket {
  border-radius: 22px !important;
  background: var(--pl-glass) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: var(--pl-shadow-lift) !important
}

/* ── Primary CTA: liquid copper with light sweep ── */
button.primary,
.galaxy-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #c8643a 0%, #a8441f 55%, #8a3517 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(0, 0, 0, .12) inset, 0 14px 30px -12px rgba(168, 68, 31, .6) !important;
  transition: transform .45s var(--pl-spring), box-shadow .45s var(--pl-ease) !important
}

button.primary::after,
.galaxy-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--pl-ease)
}

button.primary:hover,
.galaxy-cta:hover {
  transform: translateY(-2px)
}

button.primary:hover::after,
.galaxy-cta:hover::after {
  transform: translateX(120%)
}

button.primary:active,
.galaxy-cta:active {
  transform: translateY(0) scale(.98)
}

/* ── Cards: spotlight + thicker interactive border on hover/select ── */
:is(.role-card, .teammate-card, .department-card) {
  position: relative;
  isolation: isolate;
  border-radius: 22px !important;
  box-shadow: var(--pl-shadow) !important;
  transition: transform .45s var(--pl-ease), box-shadow .45s var(--pl-ease), border-color .35s var(--pl-ease) !important
}

:is(.role-card, .teammate-card, .department-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  padding: 2.5px;
  opacity: 0;
  transition: opacity .35s var(--pl-ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(176, 74, 36, .85), rgba(201, 164, 106, .45) 45%, rgba(176, 74, 36, .25) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

:is(.role-card, .teammate-card, .department-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .35s var(--pl-ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .75), transparent 62%)
}

html body :is(.role-card, .teammate-card, .department-card):is(:hover, :focus-visible, .active) {
  transform: translateY(-4px);
  border-color: #b85830 !important;
  box-shadow: 0 0 0 2px rgba(176, 74, 36, .42), var(--pl-shadow-lift) !important
}

:is(.role-card, .teammate-card, .department-card):is(:hover, :focus-visible)::after,
:is(.role-card, .teammate-card, .department-card):is(:hover, :focus-visible)::before {
  opacity: 1
}

/* ── Pills, inputs, glass chips ── */
:is(.text-button) {
  position: relative
}

:is(.text-button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--pl-ease)
}

:is(.text-button):hover::after {
  transform: scaleX(1);
  transform-origin: left
}

textarea,
input[type=text],
input[type=search] {
  transition: box-shadow .3s var(--pl-ease), border-color .3s var(--pl-ease) !important
}

textarea:focus,
input:focus,
select:focus {
  outline: none !important;
  border-color: rgba(176, 74, 36, .45) !important;
  box-shadow: 0 0 0 4px rgba(176, 74, 36, .10), var(--pl-shadow) !important
}

:focus-visible {
  outline: 2px solid rgba(176, 74, 36, .55) !important;
  outline-offset: 3px !important;
  border-radius: 12px
}

dialog {
  border-radius: 28px !important;
  box-shadow: 0 40px 100px -30px rgba(40, 20, 10, .45) !important
}

dialog::backdrop {
  background: rgba(43, 34, 28, .28)
}

#toast {
  border-radius: 999px !important;
  box-shadow: var(--pl-shadow-lift) !important
}

/* ── View entrance (transform only — never fade from 0 so tab switches stay crisp) ── */
.view:not([hidden]) {
  animation: pl-enter .22s var(--pl-ease) both
}

@keyframes pl-enter {
  from {
    transform: translateY(4px)
  }

  to {
    transform: none
  }
}

.office-section,
.office-footer {
  border-color: var(--pl-hair) !important
}

.office-section {
  position: relative
}

.office-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--pl-accent), transparent)
}

/* ── Scrollbar ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 60, 40, .25) transparent
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

::-webkit-scrollbar-thumb {
  background: rgba(90, 60, 40, .22);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important
  }
}

/* ═════════ Layer 2 (targeted, screenshot-verified) ═════════ */

/* Editorial accent word in page titles: sans display + italic serif in copper */
.pl-accent-word,
.office-copy h1 em {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
  padding-right: .06em;
  background: linear-gradient(100deg, #8e3517 0%, #b04a24 40%, #d9875a 60%, #b04a24 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: pl-sheen 9s ease-in-out infinite
}

.welcome-hero-copy h1 {
  letter-spacing: -.05em !important
}

/* Workbench "Back to your office" → contained tactile pill */
.office-workbench-sidebar a.back,
aside a.back {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin-top: 8px;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pl-ink) !important;
  background: linear-gradient(180deg, #fffdf9, #f3ebe0) !important;
  border: 1px solid var(--pl-hair) !important;
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px -10px rgba(60, 35, 20, .35) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .4s var(--pl-spring), box-shadow .4s var(--pl-ease) !important
}

aside a.back:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #fff inset, 0 12px 24px -12px rgba(60, 35, 20, .45) !important
}

/* Welcome hero → copper light hairline traced around the card (static mask, no repaint loop) */
.welcome-hero {
  position: relative
}

.welcome-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(217, 135, 90, .55) 30%, rgba(255, 255, 255, 0) 55%, rgba(176, 74, 36, .45) 85%, rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

/* Page titles — larger editorial scale */
body.workbench-home main>header h2,
main>header h2 {
  font-size: clamp(40px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important
}

/* Shortcut cards → lift + arrow capsule motion */
.welcome-shortcuts>* {
  transition: transform .5s var(--pl-ease), box-shadow .5s var(--pl-ease) !important
}

.welcome-shortcuts>*:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow-lift) !important
}

.welcome-shortcuts>* svg:last-child {
  transition: transform .45s var(--pl-spring)
}

.welcome-shortcuts>*:hover svg:last-child {
  transform: translate(2px, -2px)
}

/* ═════════ Layer 3 — page titles + document library ═════════ */
section.view>h1,
section.view header h1,
.business-intro h1 {
  font-size: clamp(40px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 700 !important;
  color: var(--pl-ink) !important
}

/* Saved work + Business files → document gallery (beats design-system specificity) */
html body :is(#output-list, #input-list) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important
}

html body :is(#output-list, #input-list) .file-row,
html body :is(#output-list, #input-list) .file-row:nth-child(n) {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px 1fr auto auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 14px 8px !important;
  padding: 20px 18px 16px !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  background: linear-gradient(180deg, #fffdf9, #f8f1e8) !important;
  box-shadow: var(--pl-shadow) !important;
  overflow: hidden;
  transition: transform .5s var(--pl-ease), box-shadow .5s var(--pl-ease) !important
}

html body :is(#output-list, #input-list) .file-row[hidden] {
  display: none !important
}

html body :is(#output-list, #input-list) .file-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--pl-shadow-lift) !important
}

html body :is(#output-list, #input-list) .file-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--fmt, #b04a24);
  opacity: .85
}

html body :is(#output-list, #input-list) .file-row>.file-type {
  grid-column: 1;
  grid-row: 1
}

html body :is(#output-list, #input-list) .file-row>div {
  grid-column: 2/5;
  grid-row: 1;
  min-width: 0;
  width: auto !important;
  padding-left: 6px
}

html body :is(#output-list, #input-list) .file-row>a {
  grid-row: 2;
  grid-column: auto;
  justify-self: end
}

html body :is(#output-list, #input-list) .file-row>a:first-of-type {
  grid-column: 3
}

html body :is(#output-list, #input-list) .file-row>a:nth-of-type(2) {
  grid-column: 4
}

html body :is(#output-list, #input-list) .file-row>a:only-of-type {
  grid-column: 4
}

/* Paper sheet glyph with folded corner */
html body :is(#output-list, #input-list) .file-type {
  position: relative;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  width: 48px !important;
  height: 60px !important;
  min-width: 48px;
  padding: 0 0 8px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  color: #fff !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fmt, #b04a24) 75%, #fff), var(--fmt, #b04a24)) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border: 0 !important
}

html body :is(#output-list, #input-list) .file-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, .55) 50%)
}

html body :is(#output-list, #input-list) .file-type::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 13px;
  top: 13px;
  height: 16px;
  background: repeating-linear-gradient(rgba(255, 255, 255, .6) 0 2px, transparent 2px 6px)
}

html body :is(#output-list, #input-list) .file-row b {
  display: block;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.015em;
  color: var(--pl-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize
}

html body :is(#output-list, #input-list) .file-row small {
  display: block;
  margin-top: 5px;
  font-size: 12px !important;
  color: var(--pl-copy) !important
}

html body :is(#output-list, #input-list) .file-row a {
  display: inline-flex !important;
  align-items: center;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--pl-ink) !important;
  background: rgba(255, 255, 255, .85) !important;
  border: 1px solid var(--pl-hair) !important;
  transition: background .3s, color .3s !important
}

html body :is(#output-list, #input-list) .file-row a:hover {
  background: var(--pl-ink) !important;
  color: #fbf5ee !important
}

/* Format colours */
.file-row[data-format=pdf] {
  --fmt: #c2452d
}

.file-row[data-format=docx] {
  --fmt: #3f6fa8
}

.file-row[data-format=pptx] {
  --fmt: #d0743a
}

.file-row[data-format=xlsx],
.file-row[data-format=csv] {
  --fmt: #3f8a62
}

.file-row[data-format=html] {
  --fmt: #7b5aa6
}

.file-row[data-format=md],
.file-row[data-format=txt] {
  --fmt: #8a7a6a
}

/* Search + filter bar above libraries */
.library-tools {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  padding: 8px !important;
  margin-bottom: 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 249, .85) !important;
  border: 1px solid var(--pl-hair) !important;
  box-shadow: var(--pl-shadow) !important
}

.library-tools .library-search {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.library-tools .library-count {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(176, 74, 36, .08);
  color: var(--pl-accent) !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap
}

/* ═════════ Layer 3 — page titles + document library ═════════ */
section.view>h1,
section.view header h1,
.business-intro h1 {
  font-size: clamp(40px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 700 !important;
  color: var(--pl-ink) !important
}

/* Saved work + Business files → document gallery */
:is(#output-list, #input-list) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important
}

:is(#output-list, #input-list) .file-row {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto;
  align-items: start !important;
  gap: 6px 14px !important;
  padding: 18px !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fffdf9, #f8f1e8) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: var(--pl-shadow) !important;
  overflow: hidden;
  transition: transform .5s var(--pl-ease), box-shadow .5s var(--pl-ease) !important
}

:is(#output-list, #input-list) .file-row[hidden] {
  display: none !important
}

:is(#output-list, #input-list) .file-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--pl-shadow-lift) !important
}

:is(#output-list, #input-list) .file-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--fmt, #b04a24);
  opacity: .85
}

/* Paper sheet glyph with folded corner */
:is(#output-list, #input-list) .file-type {
  grid-row: 1/3;
  position: relative;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  width: 48px !important;
  height: 60px !important;
  padding: 0 0 8px !important;
  border-radius: 6px 14px 6px 6px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  color: #fff !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fmt, #b04a24) 80%, #fff), var(--fmt, #b04a24)) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: inset 0 -18px 24px -18px rgba(0, 0, 0, .25) !important;
  border: 0 !important
}

:is(#output-list, #input-list) .file-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, .55) 50%)
}

:is(#output-list, #input-list) .file-type::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 12px;
  top: 14px;
  height: 16px;
  background: repeating-linear-gradient(rgba(255, 255, 255, .55) 0 2px, transparent 2px 6px);
  border-radius: 1px
}

:is(#output-list, #input-list) .file-row>div {
  min-width: 0
}

:is(#output-list, #input-list) .file-row b {
  display: block;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.015em;
  color: var(--pl-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize
}

:is(#output-list, #input-list) .file-row small {
  display: block;
  margin-top: 4px;
  font-size: 12px !important;
  color: var(--pl-copy) !important
}

:is(#output-list, #input-list) .file-row a {
  grid-column: 2;
  justify-self: start;
  display: inline-flex !important;
  align-items: center;
  margin: 8px 6px 0 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--pl-ink) !important;
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid var(--pl-hair) !important;
  transition: background .3s, color .3s !important
}

:is(#output-list, #input-list) .file-row a:hover {
  background: var(--pl-ink) !important;
  color: #fbf5ee !important
}

:is(#output-list, #input-list) .file-row a+a {
  grid-column: 2;
  margin-top: -30px !important;
  margin-left: 96px !important
}

/* Format colours */
.file-row[data-format=pdf] {
  --fmt: #c2452d
}

.file-row[data-format=docx] {
  --fmt: #3f6fa8
}

.file-row[data-format=pptx] {
  --fmt: #d0743a
}

.file-row[data-format=xlsx],
.file-row[data-format=csv] {
  --fmt: #3f8a62
}

.file-row[data-format=html] {
  --fmt: #7b5aa6
}

.file-row[data-format=md],
.file-row[data-format=txt] {
  --fmt: #8a7a6a
}

/* Search + filter bar above libraries */
.library-tools {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  padding: 8px !important;
  margin-bottom: 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 249, .85) !important;
  border: 1px solid var(--pl-hair) !important;
  box-shadow: var(--pl-shadow) !important
}

.library-tools .library-search {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.library-tools .library-count {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(176, 74, 36, .08);
  color: var(--pl-accent) !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap
}


/* ── Section H2/H3 & Your Business / Your Team polish ── */
.office-resume-heading h1 {
  font-size: clamp(40px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 700 !important;
  color: var(--pl-ink) !important
}

.office-section h2,
.welcome-saved-heading h2,
#files .section-head h2,
.work-library>h3,
.preference-guide>h2 {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
  color: var(--pl-ink) !important
}

.business-intro {
  position: relative;
  border-radius: 26px !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  background: radial-gradient(120% 140% at 100% 0%, #f6dcc8 0%, transparent 58%), linear-gradient(135deg, #fffaf3, #f5ece1) !important;
  box-shadow: var(--pl-shadow-lift) !important
}

#files .upload-zone {
  border-radius: 22px !important;
  border: 1.5px dashed rgba(176, 74, 36, .32) !important;
  background: linear-gradient(180deg, rgba(255, 253, 249, .92), rgba(249, 241, 231, .88)) !important;
  box-shadow: var(--pl-shadow) !important;
  transition: transform .4s var(--pl-ease), border-color .35s, box-shadow .4s var(--pl-ease) !important
}

#files .upload-zone:hover {
  transform: translateY(-2px);
  border-color: rgba(176, 74, 36, .6) !important;
  box-shadow: var(--pl-shadow-lift) !important
}

#files .upload-zone .upload-choose {
  background: linear-gradient(135deg, #3a2c23, #1f1611) !important;
  color: #fbf5ee !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 18px -8px rgba(31, 22, 17, .55) !important
}

#roles .filters {
  padding: 8px !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 249, .88) !important;
  border: 1px solid var(--pl-hair) !important;
  box-shadow: var(--pl-shadow) !important
}

#roles .filters #search {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}


/* ═════════ Layer 4 — Compact playful specialist cards & full sidebar parity ═════════ */
html body .office-workbench-sidebar a.back {
  display: none !important
}

/* Compact card geometry */
html body #role-list .teammate-card {
  padding: 20px 22px 18px !important;
  min-height: 0 !important;
  gap: 0 !important
}

html body #role-list .teammate-card .card-foot {
  display: none !important
}

html body #home .home-specialist-card:not(.has-conversation) .card-foot b {
  display: none !important
}

/* Playful top bar: companion avatar with orbital halo + department pill */
html body .teammate-card .teammate-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  position: relative;
  z-index: 1
}

html body .teammate-card .member-avatar {
  position: relative;
  transition: transform .45s var(--pl-spring) !important
}

html body .teammate-card .member-avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed rgba(176, 74, 36, .28);
  pointer-events: none;
  transition: transform .6s var(--pl-ease), border-color .35s
}

html body .teammate-card .member-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #d9875a 45%, #b04a24);
  box-shadow: 0 0 0 2px #fffaf3
}

html body .teammate-card:hover .member-avatar {
  transform: translateY(-3px) scale(1.05) !important
}

html body .teammate-card:hover .member-avatar::before {
  transform: rotate(45deg);
  border-color: rgba(176, 74, 36, .6)
}

html body .teammate-card .member-presence {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  max-width: none !important;
  color: #7a4e32 !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(176, 74, 36, .16) !important
}

/* Title row with integrated top-right arrow capsule */
html body .teammate-card .member-name {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  font-size: 20.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  color: #33241b !important;
  position: relative;
  z-index: 1
}

html body .teammate-card .card-title-text {
  flex: 1;
  min-width: 0
}

html body .teammate-card .card-title-arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #a6532e;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(176, 74, 36, .22);
  box-shadow: 0 2px 8px -2px rgba(90, 45, 20, .14);
  transition: transform .4s var(--pl-spring), background .3s, color .3s, border-color .3s
}

html body .teammate-card:hover .card-title-arrow {
  transform: translate(2px, -2px) scale(1.06);
  background: #a6532e;
  color: #fff;
  border-color: #a6532e
}

/* ── Elimination of legacy square overlay artifact & 3 bespoke rotating geometric watermark themes ── */
html body .teammate-card:after,
html body .role-card:after {
  display: none !important;
}

/* 3 bespoke rotating geometric watermark themes distributed across cards (every 3 cards) */
html body .teammate-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.14 !important;
  transition: transform 0.6s var(--pl-ease), opacity 0.4s var(--pl-ease) !important;
}

/* Theme 1: Concentric Rings from top-right corner */
html body .teammate-card:nth-child(3n+1)::after {
  right: -50px;
  top: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1.5px solid #a6532e;
  box-shadow: 0 0 0 16px rgba(166, 83, 46, 0.12), 0 0 0 34px rgba(166, 83, 46, 0.08), 0 0 0 54px rgba(166, 83, 46, 0.04);
}

html body .teammate-card:nth-child(3n+1):hover::after {
  opacity: 0.3 !important;
  transform: rotate(35deg) scale(1.15) !important;
}

/* Theme 2: Kinetic 45-deg Diamond Quadrant with dashed echo */
html body .teammate-card:nth-child(3n+2)::after {
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 22px;
  border: 2px dashed #3d6b50;
  box-shadow: 0 0 0 14px rgba(61, 107, 80, 0.08), inset 0 0 0 10px rgba(61, 107, 80, 0.05);
  transform: rotate(25deg);
}

html body .teammate-card:nth-child(3n+2):hover::after {
  opacity: 0.3 !important;
  transform: rotate(65deg) scale(1.18) !important;
}

/* Theme 3: Multi-Axis Orbital Gyroscope with satellite node */
html body .teammate-card:nth-child(3n)::after {
  right: -35px;
  top: -45px;
  width: 155px;
  height: 155px;
  border-radius: 50%;
  border: 2px solid #744e82;
  box-shadow: inset 0 0 0 18px rgba(116, 78, 130, 0.06), 0 0 0 24px rgba(116, 78, 130, 0.07);
  transform: rotate(-15deg);
}

html body .teammate-card:nth-child(3n):hover::after {
  opacity: 0.3 !important;
  transform: rotate(30deg) scale(1.16) !important;
}

/* Upgraded Executive Capability Badges: warm frosted metallic pill + dark bronze micro-numerals */
html body .teammate-card .role-card-examples {
  gap: 8px !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

html body .teammate-card .role-card-examples li {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(70, 45, 30, 0.08) !important;
  font-size: 13.5px !important;
  font-weight: 530 !important;
  line-height: 1.4 !important;
  color: #2e231b !important;
  box-shadow: 0 1px 2px rgba(60, 35, 20, 0.03) !important;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s !important;
}

html body .teammate-card:hover .role-card-examples li {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(176, 74, 36, 0.18) !important;
  box-shadow: 0 2px 6px rgba(60, 35, 20, 0.05) !important;
}

html body .teammate-card .role-example-mark {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  background: linear-gradient(145deg, #ffffff, #f0e6d8) !important;
  color: #523b2b !important;
  border: 1px solid rgba(82, 59, 43, 0.18) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 #ffffff !important;
}

html body .teammate-card:hover .role-example-mark {
  background: linear-gradient(145deg, #a6532e, #883d1c) !important;
  color: #ffffff !important;
  border-color: #883d1c !important;
  box-shadow: 0 2px 5px rgba(166, 83, 46, 0.3) !important;
}

/* --- W · A · I · V · E Logo Styling & Kinetic Modernism --- */
html body .brand .banray-brand-logo,
html body .sidebar .brand .banray-brand-logo,
html body .office-workbench-sidebar .brand .banray-brand-logo {
  display: block !important;
  width: 176px !important;
  max-width: 100% !important;
  height: auto !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 8px rgba(176, 74, 36, 0.08)) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.35s ease !important;
}

html body .brand:hover .banray-brand-logo {
  transform: translateY(-1px) scale(1.02) !important;
  filter: drop-shadow(0 4px 14px rgba(255, 106, 0, 0.22)) !important;
}

/* Ensure clean workspace profile without "fictional" mentions */
html body .sidebar .profile small,
html body .office-workbench-sidebar .private small {
  font-size: 11px !important;
  color: #8c7866 !important;
  letter-spacing: 0.02em !important;
}

/* --- W · A · I · V · E Logo Styling & Kinetic Modernism --- */
html body .brand .banray-brand-logo,
html body .sidebar .brand .banray-brand-logo,
html body .office-workbench-sidebar .brand .banray-brand-logo {
  display: block !important;
  width: 176px !important;
  max-width: 100% !important;
  height: auto !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 8px rgba(176, 74, 36, 0.08)) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.35s ease !important;
}

html body .brand:hover .banray-brand-logo {
  transform: translateY(-1px) scale(1.02) !important;
  filter: drop-shadow(0 4px 14px rgba(255, 106, 0, 0.22)) !important;
}

/* Ensure clean workspace profile without "fictional" mentions */
html body .sidebar .profile small,
html body .office-workbench-sidebar .private small {
  font-size: 11px !important;
  color: #8c7866 !important;
  letter-spacing: 0.02em !important;
}