@import './profile.css';

/* Lime/mint layout tokens are shared by every page in design-system.css. */

body.feed-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 0 0, #e8f0e4 0, transparent 55%), #f6f7f2; --feed-ease: cubic-bezier(.2,.8,.2,1); }
.feed-page :focus-visible { outline-color: #397c57; }
.feed-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr); width: 100%; height: 100%; max-width: 1200px; min-height: 0; margin: 0 auto; padding: 10px 28px 0; }
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; min-height: 54px; padding: 3px 0 10px; border-bottom: 1px solid #dfe6dc; }
.site-header .brand { flex-shrink: 0; font-size: 21px; }
.site-header .brand > span { width: 33px; height: 33px; border-radius: 10px; }
.site-header .account-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; min-width: 0; }
.site-header .account-name { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-header .button { min-height: 44px; padding: 9px 15px; }
.feed-toolbar { display: grid; grid-template-columns: minmax(0,560px) 70px; align-items: center; gap: 15px; width: min(calc(100% - 16px),645px); min-width: 0; margin: 0 auto; padding: 14px 0; }
.feed-tabs { display: flex; gap: 6px; min-width: 0; width: calc(100% + 16px); margin: 0 -8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.feed-tabs button { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid transparent; border-radius: 13px; color: #4c6355; background: transparent; font-size: 14px; font-weight: 650; line-height: 1.3; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms var(--feed-ease); }
.feed-tabs button[aria-selected="true"] { color: #204d34; background: #e3eedd; border-color: transparent; box-shadow: none; font-weight: 750; }
.feed-tabs button:active:not(:disabled) { transform: scale(.97); }
.feed-tabs button:focus-visible { outline-offset: 2px; border-color: #4e865f; }
.feed-tabs button:disabled { opacity: .55; }
.feed-tools { display: inline-flex; align-items: center; gap: 15px; min-width: 0; color: #687b6b; font-size: 12px; white-space: nowrap; }
.reel-counter { min-width: 35px; color: #385b42; font-variant-numeric: tabular-nums; }
.scroll-hint { display: inline-flex; align-items: center; gap: 8px; }
.scroll-hint::after { content: '↓'; font-size: 18px; line-height: 1; }
.feed-viewport { position: relative; min-width: 0; min-height: 0; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 23px 23px 0 0; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.feed-viewport::-webkit-scrollbar { display: none; }
.feed-viewport:focus-visible { outline: 3px solid #397c57; outline-offset: -3px; }
.feed-item { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0 8px 14px; scroll-snap-align: start; scroll-snap-stop: always; }
.reel-stage { display: grid; grid-template-columns: minmax(0,560px) 70px; align-items: stretch; gap: 15px; width: min(100%,645px); height: 100%; min-width: 0; min-height: 0; }
.reel-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #1735241f; border-radius: 23px; color: #fff; background: #294033; box-shadow: 0 15px 40px -22px #17372466; }
.poster-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.poster-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#091c202b 0%,transparent 30%,#091c1610 48%,#061810c9 82%,#07170cf0 100%); }
.demo-badge { position: absolute; top: 18px; left: 18px; max-width: calc(100% - 36px); padding: 6px 10px; border: 1px solid #ffffff3d; border-radius: 20px; color: #fff; background: #10271f77; backdrop-filter: blur(12px); font-size: 11px; line-height: 1.3; letter-spacing: .015em; }
.reel-copy { width: 100%; min-width: 0; padding: 26px; overflow-wrap: anywhere; text-shadow: 0 1px 8px #00000024; }
.reel-copy .card-role { margin: 0 0 7px; color: #eaf5e4; font-size: 13px; font-weight: 600; line-height: 1.4; }
.reel-copy .card-name { margin: 0 0 9px; color: #fff; font-size: clamp(26px,3vw,34px); font-weight: 680; line-height: 1.12; letter-spacing: -.035em; }
.reel-copy .card-location { margin: 0 0 10px; color: #e4eee0; font-size: 13px; line-height: 1.5; }
.reel-copy .card-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; color: #fff; font-size: 14px; line-height: 1.5; }
.reel-actions { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 15px; min-width: 0; padding: 0 0 22px; }
.reel-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 70px; min-height: 66px; margin: 0; padding: 3px; border: 0; border-radius: 16px; color: #44604c; background: transparent; font-size: 11px; font-weight: 600; line-height: 1.25; transition: color 170ms,transform 170ms var(--feed-ease); }
.action-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #dce5d7; border-radius: 50%; color: #315a3e; background: #fff; box-shadow: 0 2px 6px #18372206; transition: color 170ms,background-color 170ms,border-color 170ms,box-shadow 170ms,transform 170ms var(--feed-ease); }
.action-icon svg { display: block; width: 24px; height: 24px; }
.action-label { max-width: none; font-size: 10px; white-space: nowrap; overflow-wrap: normal; }
.reel-action:active:not(:disabled) .action-icon { transform: scale(.9); }
.reel-action[aria-pressed="true"] { color: #245b3e; }
.reel-action[aria-pressed="true"] .action-icon { color: #fff; background: #286346; border-color: #286346; box-shadow: 0 3px 10px #28634624; }
.reel-action[data-action="like"][aria-pressed="true"] .action-icon { color: #fff; background: #bb4565; border-color: #bb4565; box-shadow: 0 3px 10px #bb456524; }
.reel-action[aria-pressed="true"] .action-icon svg { fill: currentColor; }
.reel-action:disabled { opacity: .5; }
.action-toast,.feed-page .status-message { position: fixed; z-index: 30; bottom: max(24px,env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: min(520px,calc(100% - 28px)); margin: 0; padding: 12px 17px; border: 1px solid #ffffff33; border-radius: 14px; color: #fff; background: #183e30ef; box-shadow: 0 10px 30px #10271f26; backdrop-filter: blur(12px); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; text-align: center; transform: translateX(-50%); pointer-events: none; }
.action-toast:empty,.feed-page .status-message:empty { display: none; }
.feed-page .status-message { bottom: 82px; color: #234e35; background: #f3f8edfa; border-color: #c9dac1; }
.feed-page .status-message[data-state="error"] { color: #922f2f; background: #fff3f0fa; border-color: #e2b9b2; }
.feed-page #retry-session { position: fixed; z-index: 31; bottom: 24px; left: 50%; max-width: calc(100% - 28px); color: #214c35; background: #fff; border: 1px solid #b8cfb9; transform: translateX(-50%); }
.feed-dialog { width: min(430px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; overflow: auto; border: 1px solid #dce5d7; border-radius: 22px; color: #294735; background: #fbfcf8; box-shadow: 0 24px 90px #10271f47; }
.feed-dialog[open] { animation: feed-dialog-enter 180ms var(--feed-ease) both; }
.feed-dialog::backdrop { background: #0b20185e; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.dialog-heading h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.close-dialog { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dbe5d5; border-radius: 13px; color: #35533e; background: #f0f5e9; font-size: 24px; line-height: 1; }
.feed-dialog > p { color: #61745e; font-size: 14px; line-height: 1.65; }
.feed-dialog > .button { width: 100%; margin-top: 6px; }
@keyframes feed-dialog-enter { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@media (hover:hover) and (pointer:fine) {
  .feed-tabs button:hover:not(:disabled) { border-color: #93b298; background: #edf4e6; box-shadow: none; }
  .reel-action:hover:not(:disabled) .action-icon { border-color: #93b298; box-shadow: 0 0 0 4px #397c5710; transform: translateY(-2px); }
  .close-dialog:hover { background: #e5efdf; }
}
@media (max-width:760px) {
  .feed-shell { padding-right: 16px; padding-left: 16px; }
  .site-header .account-name { display: none; }
  .reel-stage { gap: 8px; grid-template-columns: minmax(0,1fr) 64px; }
  .reel-action { width: 64px; }
}
@media (max-width:620px) {
  .feed-shell { padding: 6px 0 0; }
  .site-header { min-height: 51px; gap: 6px 10px; margin: 0 12px; padding: 0 0 7px; }
  .site-header .brand { gap: 6px; font-size: 18px; }
  .site-header .brand > span { width: 29px; height: 29px; border-radius: 9px; font-size: 13px; }
  .site-header .account-nav { gap: 4px; }
  .site-header .button { min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 12px; }
  .feed-toolbar { gap: 10px; padding: 8px 12px; }
  .feed-tabs { flex: 1 1 auto; gap: 4px; padding: 3px; border-radius: 13px; }
  .feed-tabs button { flex: 1; min-height: 44px; padding: 9px 10px; border-radius: 9px; font-size: 13px; }
  .feed-tools { flex-shrink: 0; gap: 0; font-size: 11px; }
  .scroll-hint { display: none; }
  .feed-viewport { border-radius: 17px 17px 0 0; }
  .feed-item { padding: 0; }
  .reel-stage { position: relative; display: block; width: 100%; max-width: 100%; }
  .reel-card { border: 0; border-radius: 17px 17px 0 0; box-shadow: none; }
  .demo-badge { top: 14px; left: 14px; max-width: calc(100% - 28px); font-size: 10px; }
  .reel-copy { padding: 22px 82px max(24px,env(safe-area-inset-bottom)) 18px; }
  .reel-copy .card-role { margin-bottom: 6px; font-size: 12px; }
  .reel-copy .card-name { margin-bottom: 8px; font-size: clamp(24px,6.5vw,32px); }
  .reel-copy .card-location { margin-bottom: 8px; font-size: 12px; }
  .reel-copy .card-caption { -webkit-line-clamp: 3; font-size: 13px; line-height: 1.45; }
  .reel-actions { position: absolute; z-index: 2; right: 9px; bottom: max(18px,env(safe-area-inset-bottom)); gap: 12px; padding: 0; }
  .reel-action { width: 62px; min-height: 64px; padding: 2px; color: #fff; font-size: 10px; text-shadow: 0 1px 5px #06180cc4; }
  .action-icon { width: 46px; height: 46px; color: #fff; background: #183e3070; border-color: #ffffff40; box-shadow: 0 2px 8px #06180c1f; backdrop-filter: blur(8px); }
  .reel-action[aria-pressed="true"] { color: #fff; }
  .reel-action:focus-visible { outline-color: #fff; outline-offset: 0; }
  .action-toast { bottom: 14px; font-size: 12px; }
  .feed-dialog { padding: 20px; }
}
@media (max-width:360px) {
  .site-header { margin-right: 9px; margin-left: 9px; gap: 5px; }
  .site-header .brand { font-size: 16px; gap: 5px; }
  .site-header .button { padding: 8px; font-size: 11px; }
  .feed-toolbar { padding-right: 9px; padding-left: 9px; gap: 7px; }
  .feed-tabs button { padding-right: 8px; padding-left: 8px; font-size: 12px; }
  .reel-copy { padding-left: 15px; padding-right: 77px; }
  .reel-actions { right: 6px; }
}
@media (max-height:650px) and (min-width:621px) {
  .feed-shell { padding-top: 3px; }
  .site-header { min-height: 49px; padding-bottom: 4px; }
  .feed-toolbar { padding-top: 5px; padding-bottom: 6px; }
  .feed-item { padding-bottom: 7px; }
  .reel-copy { padding: 18px 23px; }
  .reel-copy .card-name { font-size: 28px; }
  .reel-copy .card-caption { -webkit-line-clamp: 2; font-size: 13px; }
  .reel-actions { gap: 8px; padding-bottom: 10px; }
}
@media (max-height:460px) {
  .feed-shell { padding-top: 0; }
  .site-header { min-height: 44px; padding-bottom: 0; }
  .feed-toolbar { padding-top: 3px; padding-bottom: 3px; }
  .feed-tabs { padding: 2px; }
  .feed-item { padding-bottom: 0; }
  .demo-badge { top: 10px; left: 12px; padding: 4px 8px; }
  .poster-image { object-position: center 23%; }
  .reel-copy { padding-top: 12px; padding-bottom: 12px; }
  .reel-copy .card-name { margin-bottom: 5px; font-size: 23px; }
  .reel-copy .card-role,.reel-copy .card-location { margin-bottom: 4px; font-size: 11px; }
  .reel-copy .card-caption { -webkit-line-clamp: 2; font-size: 12px; }
  .reel-actions { gap: 2px; padding-bottom: 4px; }
  .reel-action { gap: 2px; min-height: 53px; }
  .action-icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion:reduce) {
  .feed-viewport { scroll-behavior: auto; }
  .feed-tabs button,.reel-action,.action-icon { transition: none; }
  .feed-dialog[open] { animation: none; }
  .feed-tabs button:active:not(:disabled),.reel-action:active:not(:disabled) .action-icon,.reel-action:hover:not(:disabled) .action-icon { transform: none; }
}

/* Real video controls sit over the picture and remain visible on light frames. */
.feed-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;min-height:100%;padding:32px;text-align:center;color:#294735}.feed-state-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:#e2eedb;color:#306045;font-size:21px;font-weight:750}.feed-state h2{margin:0;font-size:clamp(22px,4vw,30px);letter-spacing:-.025em}.feed-state p{max-width:430px;margin:0;color:#647761;font-size:14px;line-height:1.65}.feed-state>.button{margin-top:5px}.feed-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:180px;padding:25px;scroll-snap-align:end;text-align:center;font-size:14px;color:#4e6b52}
.feed-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101713}.reel-card{background:#101713}.reel-surface{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;z-index:1;cursor:pointer}.reel-surface:focus-visible{outline:3px solid #fff;outline-offset:-5px}.feed-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:68px;height:68px;transform:translate(-50%,-50%);border:1px solid #ffffff70;border-radius:50%;background:#10261f70;backdrop-filter:blur(8px)}.feed-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor}.feed-play[hidden]{display:none}.poster-shade{z-index:2;background:linear-gradient(180deg,#06181018 0%,transparent 30%,transparent 53%,#071a1070 74%,#06150cef 100%)}.reel-copy{position:relative;z-index:3;pointer-events:none;padding:22px}.reel-copy a,.reel-copy button,.reel-copy input{pointer-events:auto}.reel-copy h2{margin:0 0 8px;font-size:inherit}.reel-copy a.card-name{display:block;margin:0;font-size:clamp(22px,2.7vw,31px);text-decoration:none}.reel-copy a.card-role{display:inline-block;text-decoration:none;color:#fff;font-size:14px}.reel-copy a.card-name:hover,.reel-copy a.card-role:hover{text-decoration:underline;text-underline-offset:4px}.reel-copy .card-caption{font-size:13px;-webkit-line-clamp:2}.feed-contact{margin-top:12px}.feed-contact:empty{display:none}.feed-contact .button{min-height:44px;padding:11px 22px;color:#214e34;background:#eff9e8;border-color:#e9f4e1;box-shadow:0 3px 12px #0002;text-shadow:none}.feed-contact .button:hover{background:#fff}.feed-contact .button:active{transform:scale(.97)}
.feed-sound{position:absolute;top:17px;right:17px;z-index:5;display:flex;align-items:center;gap:0;max-width:calc(100% - 34px);padding:4px;border:1px solid #ffffff75;border-radius:30px;background:#10261fbd;color:#fff;box-shadow:0 3px 16px #0003;backdrop-filter:blur(12px)}.feed-sound-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#234c34;transition:transform .17s,background-color .17s}.feed-sound-toggle svg{width:23px;height:23px}.feed-sound-toggle:active{transform:scale(.9)}.feed-sound-toggle:focus-visible{outline:3px solid #d8f5bd;outline-offset:3px}.feed-volume-panel{width:0;opacity:0;overflow:hidden;transition:width .22s cubic-bezier(.2,.8,.2,1),opacity .18s}.feed-sound.is-open .feed-volume-panel{width:116px;opacity:1}.feed-volume-panel input{display:block;width:92px;height:44px;min-height:44px;margin:0 12px;padding:0;accent-color:#ddf6ce;cursor:pointer}.feed-progress{display:flex;align-items:center;gap:10px;margin-top:16px;pointer-events:auto}.feed-progress input{min-width:0;width:100%;height:28px;min-height:28px;margin:0;padding:0;border:0;box-shadow:none;accent-color:#d8f0ce;background:transparent;cursor:pointer}.feed-time{flex-shrink:0;color:#f2f7ed;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}.feed-media-error{position:absolute;z-index:6;inset:30% 22px auto;padding:20px;border:1px solid #ffffff60;border-radius:18px;background:#163628f5;color:#fff;text-align:center;font-size:13px;line-height:1.5}.feed-media-error .button{background:#f7fbf2;color:#254e35}.feed-media-error[hidden]{display:none}.action-toast[data-error=true]{background:#7c2929f2}.feed-dialog input{width:100%;min-height:44px;padding:10px;border:1px solid #b9cbb2;border-radius:10px;font-size:12px}.reel-action{min-height:70px}.action-label{font-size:11px}.feed-item:not(.is-active) .feed-sound.is-open .feed-volume-panel{width:0;opacity:0}
@media(max-width:620px){.feed-toolbar{flex-wrap:wrap;gap:6px}.feed-tabs{width:100%}.feed-tabs button{padding-inline:9px;font-size:12px}.feed-tools{position:absolute;z-index:4;top:auto;right:15px;margin-top:71px;padding:5px 8px;border-radius:9px;background:#173629b8;color:#fff;pointer-events:none}.reel-counter{color:#fff}.feed-sound{top:12px;right:12px;max-width:calc(100% - 24px)}.feed-tools{display:none}.reel-copy{padding:18px 82px max(20px,env(safe-area-inset-bottom)) 18px}.reel-copy a.card-name{font-size:24px}.reel-copy a.card-role{font-size:13px}.feed-contact .button{padding:10px 16px;min-height:44px;font-size:12px}.feed-progress{gap:7px;margin-top:10px}.feed-time{font-size:9px}.reel-actions{gap:10px;bottom:max(22px,env(safe-area-inset-bottom))}.reel-action{min-height:62px}.feed-state{padding:24px}.feed-more{min-height:160px}}
@media(max-width:360px){.feed-tabs button{padding-inline:6px;font-size:11px}.reel-copy{padding-left:14px;padding-right:73px}.reel-copy a.card-name{font-size:21px}.reel-actions{right:4px}.feed-progress{flex-wrap:wrap;gap:0}.feed-time{width:100%;text-align:right}.feed-sound{top:10px;right:10px}.feed-sound-toggle{width:44px;height:44px}}
@media(max-height:650px) and (min-width:621px){.reel-copy{padding:16px 20px}.reel-copy a.card-name{font-size:24px}.reel-copy .card-caption{display:none}.feed-progress{margin-top:8px}.reel-actions{gap:5px;padding-bottom:10px}.feed-contact{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.feed-sound-toggle,.feed-volume-panel{transition:none}.feed-sound-toggle:active,.feed-contact .button:active{transform:none}}
@media(max-width:620px){.reel-actions .reel-action .action-label{color:#fff;text-shadow:0 1px 5px #06180c,0 1px 2px #06180c}.reel-action:disabled{opacity:.7}}

/* The navigation rail owns the outer offset; the feed keeps all remaining height. */
body.find-shell .feed-shell { grid-template-rows: auto minmax(0,1fr); }
.feed-tools { justify-content: center; }
.scroll-hint { display: none; }
.feed-state-icon { object-fit: contain; padding: 7px; }
.feed-contact .button { min-height: 48px; padding: 12px 25px; border: 1px solid #fff; border-radius: 14px; color: #173e29; background: #f4ffe9; font-size: 15px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 5px 22px #0005; }
.feed-contact .button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.reel-copy { padding-bottom: 34px; }

/* Only the three-pixel track is visible; its transparent hit area is much taller. */
.feed-progress { position: absolute; z-index: 5; inset: auto 0 0; display: block; width: 100%; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.feed-progress-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: #ffffff45; transition: height 150ms ease, background-color 150ms ease; pointer-events: none; }
.feed-progress-fill { display: block; width: 100%; height: 100%; background: #dffac8; transform: scaleX(0); transform-origin: left center; }
.feed-progress .feed-time { position: absolute; right: 15px; bottom: 28px; width: auto; padding: 4px 8px; border-radius: 7px; color: #fff; background: #10261fe6; opacity: 0; font-size: 11px; white-space: nowrap; pointer-events: none; transition: opacity 150ms ease; }
.feed-progress:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.feed-progress:focus-visible .feed-progress-track,.feed-progress[data-scrubbing] .feed-progress-track { height: 6px; background: #ffffff70; }
.feed-progress:focus-visible .feed-time,.feed-progress[data-scrubbing] .feed-time { opacity: 1; }
.feed-progress[aria-disabled="true"] { cursor: default; }
@media (hover:hover) and (pointer:fine) {
  .feed-progress:hover .feed-progress-track { height: 6px; background: #ffffff70; }
  .feed-progress:hover .feed-time { opacity: 1; }
  .feed-contact .button:hover { color: #173e29; background: #fff; box-shadow: 0 6px 24px #0006; }
}
@media (max-width:760px) and (min-width:621px) { .feed-toolbar { grid-template-columns: minmax(0,1fr) 64px; gap: 8px; } }
@media (max-width:620px) {
  .feed-toolbar { display: block; width: 100%; padding: 8px 8px; }
  .feed-tabs { width: 100%; margin: 0; padding: 0; gap: 3px; border-radius: 0; }
  .feed-tabs button { min-height: 48px; padding: 10px 7px; border-radius: 11px; font-size: 13px; }
  .feed-progress { height: 44px; min-height: 44px; }
  .feed-progress .feed-time { right: 13px; bottom: 35px; font-size: 11px; }
  .reel-copy { padding-bottom: max(50px,env(safe-area-inset-bottom)); }
  .reel-actions { bottom: max(48px,env(safe-area-inset-bottom)); }
  .feed-contact .button { min-height: 48px; padding: 12px 19px; font-size: 14px; }
}
@media (max-width:360px) { .feed-tabs button { padding-inline: 5px; font-size: 12px; } }
@media (max-height:650px) and (min-width:621px) { .reel-copy { padding-bottom: 30px; } }
@media (prefers-reduced-motion:reduce) { .feed-progress-track,.feed-progress .feed-time { transition: none; } }
.reel-actions .feed-report{min-height:44px;max-width:90px;padding:6px;font-size:10px;color:inherit;background:transparent;border:0;text-align:center;cursor:pointer}.reel-actions .feed-report:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:8px}@media(max-width:700px){.reel-actions .feed-report{max-width:56px;min-height:44px;font-size:9px}}

/* Public feed: a full-height video with contextual details on wide screens. */
body.feed-page { background: var(--find-bg,#f2ffe9); color: var(--find-ink,#0b0f0a); }
.feed-page :focus-visible { outline-color: var(--find-accent-ink,#244719); }
.feed-shell { max-width: 1370px; padding: 12px 30px 0; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%,1080px); padding: 10px 8px 22px; }
.feed-tabs { flex: 1; gap: 12px; width: auto; max-width: 730px; margin: 0; }
.feed-tabs button { position: relative; min-height: 48px; padding: 12px 16px; border: 1px solid transparent; border-radius: 999px; color: var(--find-muted,#56614f); background: var(--find-soft,#eaf4e3); font-size: 15px; font-weight: 600; }
.feed-tabs button::after { position: absolute; content: ''; right: 7px; bottom: -6px; left: 7px; height: 3px; border-radius: 4px; background: transparent; }
.feed-tabs button[aria-selected="true"] { color: var(--find-ink,#0b0f0a); background: #e4ffc5; font-weight: 750; }
.feed-tabs button[aria-selected="true"]::after { background: var(--find-lime,#b4ff39); }
.feed-tools,.reel-counter { color: var(--find-muted,#56614f); }
.feed-viewport { border-radius: 0; }
.feed-viewport:focus-visible { outline-color: var(--find-accent-ink,#244719); border-radius: 24px; }
.feed-item { padding: 0 8px 20px; }
.reel-stage { grid-template-columns: minmax(0,560px) 66px minmax(270px,390px); gap: 17px; width: min(100%,1080px); }
.reel-card { border-color: #0b0f0a12; border-radius: 26px; background: var(--find-ink,#0b0f0a); box-shadow: 0 18px 45px -30px #19381360; }
.feed-video { background: var(--find-ink,#0b0f0a); }
.poster-shade { background: linear-gradient(180deg,#0b0f0a12,transparent 40%,transparent 56%,#0b0f0a55 76%,#0b0f0ae8); }
.feed-play { background: #0b0f0a80; }
.reel-copy { padding: 24px 26px 34px; }
.reel-copy a.card-name { font-size: clamp(23px,2.1vw,32px); font-weight: 750; }
.feed-contact .button,.feed-detail-contact .button { min-height: 50px; padding: 12px 22px; border: 1px solid var(--find-lime,#b4ff39); border-radius: 15px; color: var(--find-ink,#0b0f0a); background: var(--find-lime,#b4ff39); font-size: 15px; font-weight: 750; box-shadow: none; text-shadow: none; }
.feed-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 0; }
.feed-details { padding: clamp(20px,2.4vw,32px); border: 1px solid var(--find-border,#dce7d5); border-radius: 24px; background: #ffffffb8; overflow-wrap: anywhere; }
.feed-kind { display: inline-block; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; color: var(--find-accent-ink,#244719); background: #b5ffd0; font-size: 12px; font-weight: 600; }
.feed-details h3 { margin: 0 0 10px; font-size: clamp(29px,3.2vw,46px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.feed-details h3 a { color: var(--find-ink,#0b0f0a); text-decoration: none; }
.feed-detail-author { display: inline-block; margin: 0 0 18px; color: var(--find-muted,#56614f); font-size: 14px; line-height: 1.4; text-decoration: none; }
.feed-detail-salary { margin: 4px 0 20px; color: var(--find-ink,#0b0f0a); font-size: clamp(21px,2vw,29px); font-weight: 750; letter-spacing: -.03em; line-height: 1.3; }
.feed-detail-city { margin: 0 0 18px; color: var(--find-ink,#0b0f0a); font-size: 16px; line-height: 1.5; }
.feed-detail-caption { margin: 0 0 24px; color: var(--find-muted,#56614f); font-size: 14px; line-height: 1.65; white-space: pre-line; }
.feed-detail-contact { margin-top: 26px; }
.feed-detail-contact:empty { display: none; }
.feed-detail-contact .button { display: flex; width: 100%; min-height: 54px; font-size: 17px; }
.feed-detail-contact .button::after { content: '→'; margin-left: 16px; font-size: 23px; font-weight: 500; }
.feed-profile-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--find-muted,#56614f); font-size: 14px; text-decoration: none; }
.feed-profile-help { display: flex; align-items: center; gap: 3px; min-height: 166px; padding: 12px 17px 0 0; overflow: hidden; flex-shrink: 0; border: 1px solid var(--find-border,#dce7d5); border-radius: 24px; color: var(--find-ink,#0b0f0a); background: #efffea; text-decoration: none; }
.feed-profile-help img { align-self: flex-end; width: 47%; height: 184px; object-fit: contain; object-position: center bottom; }
.feed-profile-help > div { flex: 1; min-width: 0; padding: 10px 0 24px; }
.feed-profile-help strong { display: block; margin-bottom: 7px; font-size: clamp(19px,1.8vw,25px); line-height: 1.12; letter-spacing: -.035em; }
.feed-profile-help span { display: block; color: var(--find-muted,#56614f); font-size: 13px; line-height: 1.5; }
.reel-actions { gap: 11px; }
.reel-action { width: 66px; min-height: 66px; color: var(--find-ink,#0b0f0a); }
.action-icon { width: 49px; height: 49px; color: var(--find-ink,#0b0f0a); border-color: var(--find-border,#dce7d5); background: #ffffffda; box-shadow: none; }
.reel-action[aria-pressed="true"] { color: var(--find-ink,#0b0f0a); }
.reel-action[aria-pressed="true"] .action-icon { color: var(--find-ink,#0b0f0a); background: var(--find-lime,#b4ff39); border-color: var(--find-lime,#b4ff39); box-shadow: none; }
.reel-action[data-action="like"][aria-pressed="true"] .action-icon { color: var(--find-ink,#0b0f0a); background: var(--find-mint,#39ff88); border-color: var(--find-mint,#39ff88); box-shadow: none; }
.feed-sound { flex-direction: row-reverse; background: #0b0f0ab5; }
.feed-sound-toggle { color: var(--find-ink,#0b0f0a); }
.feed-sound-toggle:focus-visible { outline-color: var(--find-lime,#b4ff39); }
.feed-volume-panel input { accent-color: var(--find-lime,#b4ff39); }
.feed-progress-fill { background: var(--find-lime,#b4ff39); }
.feed-progress .feed-time { background: #0b0f0ae6; }
.feed-state { color: var(--find-ink,#0b0f0a); }
.feed-state-icon { width: 120px; height: 138px; padding: 0; border-radius: 0; background: transparent; }
.feed-state h2 { font-size: clamp(24px,4vw,35px); letter-spacing: -.04em; }
.feed-state p,.feed-more { color: var(--find-muted,#56614f); }
.action-toast { background: #0b0f0af2; }
.action-toast[data-error="true"] { background: #932e2e; }
.feed-page .status-message { color: #8b2424; background: #fff4f2fa; border-color: #e2b9b2; }
.feed-media-error { color: #8b2424; background: #fff4f2f5; border-color: #f2b8b5; }
.feed-dialog { border-color: var(--find-border,#dce7d5); border-radius: 24px; color: var(--find-ink,#0b0f0a); background: var(--find-surface,#fff); }
.feed-dialog::backdrop { background: #0b0f0a65; }
.feed-dialog > p { color: var(--find-muted,#56614f); }
.feed-dialog input { border-color: var(--find-border,#dce7d5); }
.close-dialog { color: var(--find-ink,#0b0f0a); border-color: var(--find-border,#dce7d5); background: var(--find-soft,#eaf4e3); }
@media (hover:hover) and (pointer:fine) {
  .feed-tabs button:hover:not(:disabled) { color: var(--find-ink,#0b0f0a); border-color: transparent; background: #e4ffc5; }
  .reel-action:hover:not(:disabled) .action-icon { border-color: var(--find-lime,#b4ff39); box-shadow: none; }
  .feed-contact .button:hover,.feed-detail-contact .button:hover { color: var(--find-ink,#0b0f0a); background: #a2ee27; border-color: #a2ee27; box-shadow: none; }
  .feed-details a:hover,.feed-profile-help:hover span { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width:1101px) and (min-height:461px) { .reel-copy .card-role,.reel-copy .card-location,.reel-copy .feed-contact { display: none; } }
@media (max-width:1100px) {
  .feed-shell { padding-right: 20px; padding-left: 20px; }
  .feed-toolbar { max-width: 675px; }
  .reel-stage { grid-template-columns: minmax(0,560px) 66px; max-width: 650px; }
  .feed-sidebar { display: none; }
}
@media (max-width:700px) {
  .feed-shell { padding: 0; }
  .feed-toolbar { display: block; padding: 8px 10px 13px; }
  .feed-tabs { width: 100%; gap: 5px; max-width: none; margin: 0; padding: 0; }
  .feed-tabs button { min-height: 44px; padding: 10px 7px; font-size: 13px; }
  .feed-tabs button::after { bottom: -4px; }
  .feed-tools { display: none; }
  .feed-item { padding: 0; }
  .reel-stage { position: relative; display: block; width: 100%; max-width: none; }
  .reel-card { border: 0; border-radius: 20px 20px 0 0; box-shadow: none; }
  .reel-copy { padding: 18px 82px max(51px,env(safe-area-inset-bottom)) 18px; }
  .reel-copy a.card-name { font-size: clamp(22px,6vw,30px); }
  .reel-copy a.card-role,.reel-copy .card-location { font-size: 12px; }
  .reel-copy .card-caption { font-size: 13px; -webkit-line-clamp: 2; }
  .feed-contact .button { min-height: 48px; padding: 11px 17px; font-size: 14px; }
  .reel-actions { position: absolute; z-index: 4; right: 7px; bottom: max(46px,env(safe-area-inset-bottom)); gap: 8px; padding: 0; color: #fff; }
  .reel-action { width: 63px; min-height: 61px; gap: 4px; color: #fff; }
  .action-icon { width: 45px; height: 45px; color: #fff; background: #0b0f0a8c; border-color: #ffffff75; backdrop-filter: blur(8px); }
  .reel-action[aria-pressed="true"] { color: #fff; }
  .reel-actions .reel-action .action-label { color: #fff; font-size: 10px; text-shadow: 0 1px 5px #0b0f0a,0 1px 2px #0b0f0a; }
  .reel-actions .feed-report { max-width: 63px; color: #fff; text-shadow: 0 1px 4px #0b0f0a; }
  .reel-action:focus-visible { outline-color: var(--find-lime,#b4ff39); outline-offset: 0; }
  .feed-sound { top: 12px; right: 12px; max-width: calc(100% - 24px); }
  .feed-progress { height: 44px; min-height: 44px; }
}
@media (max-width:360px) {
  .feed-tabs button { padding-inline: 5px; font-size: 12px; }
  .reel-copy { padding-left: 14px; padding-right: 76px; }
  .reel-copy a.card-name { font-size: 21px; }
  .reel-actions { right: 3px; }
}
@media (max-height:650px) {
  .feed-toolbar { padding-top: 5px; padding-bottom: 12px; }
  .reel-actions { gap: 3px; padding-bottom: 0; }
  .reel-action { min-height: 55px; gap: 3px; }
  .action-icon { width: 42px; height: 42px; }
  .reel-copy .card-caption { display: none; }
  .feed-details { padding: 20px; }
  .feed-details h3 { font-size: 30px; }
  .feed-kind { margin-bottom: 12px; }
  .feed-profile-help { min-height: 135px; }
  .feed-profile-help img { height: 145px; }
}
@media (max-height:460px) {
  .reel-stage { grid-template-columns: minmax(0,560px) 66px; }
  .feed-sidebar { display: none; }
  .reel-actions { gap: 0; }
  .reel-action { min-height: 44px; }
  .action-icon { width: 36px; height: 36px; }
  .action-label { display: none; }
  .reel-copy { padding-top: 10px; }
  .reel-copy .card-location { display: none; }
}