/* ============================================================
   NEXORA · Screen / Opportunities — Opportunity Hub
   Premium, dense, learning-first. Tokens only.
   ============================================================ */
.opps-screen{ gap:clamp(1rem,1vw,1.4rem); animation: opps-enter .42s var(--ease-out) both }
@keyframes opps-enter{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .opps-screen{ animation:none }
.opps-offline{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--radius-md); background:var(--warning-soft); color:var(--warning-text); border:1px solid var(--warning-border); font-family:var(--font-mono); font-size:.75rem; font-weight:600 }
[data-theme="dark"] .opps-offline{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.opps-offline .icon{ width:16px; height:16px; flex:none }
.opps-head{ align-items:center }
.opps-head-copy{ min-width:0; flex:1 1 420px }
.opps-head-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:.85rem }
.opps-head-meta .w-meta{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.opps-head-meta .w-meta .icon{ width:14px; height:14px; color:var(--text-3); flex:none }

/* search */
.opps-search-wrap{ display:grid; gap:.5rem }
.opps-search{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border) }
.opps-search > .icon{ color:var(--text-3); flex:none }
.opps-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:.98rem; color:var(--text-1) }
.opps-search input::placeholder{ color:var(--text-3) }
.opps-search kbd{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); padding:.15rem .45rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) }
.opps-results{ display:grid; gap:.35rem; padding:.5rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); max-height:360px; overflow:auto }
.opps-results .hit{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm); text-decoration:none; transition: background var(--dur-fast) }
.opps-results .hit:hover{ background:var(--surface-2) }
.opps-results .hit b{ display:block; font-family:var(--font-display); font-size:.9rem; color:var(--text-1) }
.opps-results .hit span{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }

/* hero */
.opps-hero{ padding:1.1rem }
.opps-hero-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem }
@media (max-width: 900px){ .opps-hero-grid{ grid-template-columns:1fr } }

/* tabs */
.opps-tabs{ display:flex; gap:.4rem; padding:.25rem; border-radius:var(--radius-full); background:var(--surface-2); border:1px solid var(--border); width:fit-content; max-width:100% }
@media (max-width:480px){ .opps-tabs{ overflow-x:auto; scrollbar-width:none } .opps-tabs::-webkit-scrollbar{ display:none } }
.opps-tab{ padding:.5rem .9rem; border-radius:var(--radius-full); font-family:var(--font-mono); font-size:.78rem; color:var(--text-3); cursor:pointer; border:0; background:none }
.opps-tab.is-active{ background:var(--accent-soft); color:var(--accent-text); box-shadow:inset 0 0 0 1px var(--accent-border) }

/* filters */
#o-filters{ margin-bottom:.25rem }
#o-extended-filters{ margin-bottom:.4rem }

/* card premium overrides */
.opp-tile{ display:grid; gap:.7rem; align-content:start; position:relative; transition: transform .16s var(--ease-out), border-color .16s }
.opp-tile:hover{ transform:translateY(-1px); border-color:var(--border-strong) }
html.nx-reduced-motion .opp-tile:hover{ transform:none }
.opp-tile.is-filtered{ display:none }
.opp-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }
.opp-urgency{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border) }
.opp-urgency.expired{ background:var(--danger-soft); color:var(--danger-text); border-color:var(--danger-border) }
[data-theme="dark"] .opp-urgency.expired{ background:var(--danger-soft); color:var(--danger-text); border-color:var(--danger-border) }
.opp-urgency.today{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.opp-urgency.soon{ background:var(--surface-2); color:var(--text-1); border-color:var(--border-strong) }
.opp-match{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--text-1) }
.opp-meta{ display:flex; gap:.6rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.68rem; color:var(--text-3) }
.opp-meta span{ display:inline-flex; align-items:center; gap:.3rem }
.opp-meta .icon{ width:12px; height:12px }
.opp-skills{ display:flex; flex-wrap:wrap; gap:.4rem }
.opp-why{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); line-height:1.5; display:flex; gap:.35rem; align-items:flex-start }
.opp-why .icon{ width:12px; height:12px; margin-top:.15rem; flex:none; color:var(--text-2) }
.opp-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.2rem }
.opp-cta{ font-family:var(--font-mono); font-size:.72rem; font-weight:600; color:var(--text-1) }

/* deadlines */
.opps-deadlines{ display:grid; gap:.6rem }
.deadline-row{ display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); transition:border-color .16s, background .16s, box-shadow .16s }
.deadline-row:hover{ border-color:var(--border-strong); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
.deadline-badge{ min-width:52px; text-align:center; padding:.35rem .4rem; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); font-family:var(--font-mono); font-size:.7rem; font-weight:700; color:var(--text-1) }
.deadline-badge.expired{ background:var(--danger-soft); color:var(--danger-text); border-color:var(--danger-border) }
[data-theme="dark"] .deadline-badge.expired{ background:var(--danger-soft); color:var(--danger-text) }

/* recent */
.opps-recent{ display:grid; gap:.6rem }

/* drawer — floating dock (portal to body) */
.opps-drawer-backdrop{ position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--n-1000) 42%, transparent); backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; visibility:hidden; transition:opacity .18s var(--ease-out), visibility .18s }
.opps-drawer-backdrop:not([hidden]){ opacity:1; visibility:visible }
.opps-drawer-backdrop[hidden]{ display:block !important; pointer-events:none }
[data-theme="dark"] .opps-drawer-backdrop{ background:rgba(0,0,0,.58) }
[data-theme="dark"] .opps-drawer-backdrop:not([hidden]){ background:rgba(0,0,0,.66) }
.opps-drawer{ position:fixed; top:calc(var(--tb-top) + var(--tb-h) + 16px); right:20px; width:min(480px, calc(100vw - 32px)); height:min(640px, calc(100dvh - var(--tb-top) - var(--tb-h) - 32px)); min-height:420px; max-height:calc(100dvh - var(--tb-top) - var(--tb-h) - 32px); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; transform:translate3d(10px,-8px,0) scale(.97); opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s; will-change:transform, opacity }
.opps-drawer:not([hidden]){ transform:none; opacity:1; visibility:visible }
.opps-drawer[hidden]{ display:flex !important; pointer-events:none }
[data-theme="light"] .opps-drawer{ background:var(--bg-elevated); border-color:var(--border-strong) }
[data-theme="dark"] .opps-drawer{ background:var(--bg-elevated); border-color:rgba(255,255,255,.10); }
html.nx-reduced-motion .opps-drawer{ transition:none }
@media (max-width:767px){ .opps-drawer{ top:auto; right:10px; left:10px; bottom:10px; width:auto; height:min(78dvh,640px); min-height:0; transform:translate3d(0,16px,0) scale(.985) } .opps-drawer:not([hidden]){ transform:none } }
@media (max-width:420px){ .opps-drawer{ right:6px; left:6px; bottom:6px; height:min(84dvh,640px) } }
.opps-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--border) }
.opps-drawer-body{ flex:1; overflow:auto; padding:1rem 1.1rem; display:grid; gap:1rem; align-content:start }
.opps-drawer-body h3{ font-size:1.15rem; color:var(--text-1) }
.opps-drawer-body p{ font-size:.88rem; color:var(--text-2); line-height:1.55 }
.match-breakdown{ display:grid; gap:.45rem }
.match-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; color:var(--text-3) }
.match-row b{ color:var(--text-1) }
.skill-gap{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem }

/* sheet — bottom sheet portal, above shell */
.opps-sheet-backdrop{ position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--n-1000) 32%, transparent); backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; visibility:hidden; transition:opacity .18s var(--ease-out), visibility .18s }
.opps-sheet-backdrop:not([hidden]){ opacity:1; visibility:visible }
.opps-sheet-backdrop[hidden]{ display:block !important; pointer-events:none }
[data-theme="dark"] .opps-sheet-backdrop{ background:rgba(0,0,0,.50) }
[data-theme="dark"] .opps-sheet-backdrop:not([hidden]){ background:rgba(0,0,0,.58) }
.opps-sheet{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px) scale(.98); width:min(560px, calc(100vw - 32px)); max-height:78vh; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s }
.opps-sheet:not([hidden]){ transform:translateX(-50%) none; opacity:1; visibility:visible }
.opps-sheet[hidden]{ display:flex !important; pointer-events:none }
html.nx-reduced-motion .opps-sheet{ transition:none }
@media (max-width:767px){ .opps-sheet{ left:10px; right:10px; bottom:10px; width:auto; transform:translateY(8px) scale(.98) } .opps-sheet:not([hidden]){ transform:none } }
@media (max-width:420px){ .opps-sheet{ left:6px; right:6px; bottom:6px } }
.opps-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--border) }
.opps-sheet-body{ flex:1; overflow:auto; padding:1rem 1.1rem; display:grid; gap:1rem }
.opps-sheet-foot{ display:flex; justify-content:space-between; padding:.9rem 1.1rem; border-top:1px solid var(--border) }
.sheet-section h4{ font-size:.9rem; color:var(--text-1); margin-bottom:.5rem }
.sheet-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); cursor:pointer }
.sheet-chip.is-active{ background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-border); box-shadow:inset 0 0 0 1px var(--accent-border) }
.sheet-chip:hover{ color:var(--text-1); border-color:var(--border-strong) }

/* skeletons */
.feed-skeleton{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem }
@media (max-width:900px){ .feed-skeleton{ grid-template-columns:1fr } }
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--radius-md); min-height:18px }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-100%); animation: shimmer 1.15s infinite }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer{ 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }

/* note */
.opps-note{ display:flex; align-items:center; gap:.6rem; justify-content:center; flex-wrap:wrap; text-align:center; color:var(--text-3); font-size:.9rem; padding-top:.5rem }
.opps-note .icon{ color:var(--text-3); flex:none }