/* Desktop redesign, 22 Oct 2026. Every rule in this file sits inside the desktop media query below.
Owner comps: scratch-tmp/desktop-2026-10-22/. Phone and tablet keep what they have.
ACTIVITY (comp 4-activity.png, Microsite tab). The page shell scales everything by html zoom (1.0477 at 1733px), so the
sizes here are the comp's pixels divided by that. Icons that need no markup are masks or background images, so the phone
keeps its own words and arrows. The grouped Bookings and Questions sections are drawn by js/dashboard-f26.js at 768px and
wider only. */
@media (min-width:768px){
#view .tour-activity-tabs button,.f26-ms .mono,.f26-ms .f26-badge,.f26-ms .f26-activity>.arw,.f26-ms .f26-question>button,.f26-ms-count{box-sizing:border-box}
/* Title: a step larger than the shared page title. */
#view:has(.tour-activity-tabs) .head h1{font-size:43px;letter-spacing:-.03em}
/* Tab strip: quiet grey tabs on a hairline that runs the full width; the open tab is tinted green with a thick green underline. */
#view .tour-activity-tabs{display:flex;gap:2px;margin:33px 0 0;padding:0;border-bottom:1px solid var(--line-2)}
#view .tour-activity-tabs button{display:inline-flex;align-items:center;justify-content:center;height:54px;margin:0 0 -1px;padding:0 27px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--ink-3);font-size:16px;font-weight:500;letter-spacing:-.01em;box-shadow:none}
#view .tour-activity-tabs button:hover{color:var(--ink-2)}
:root[data-theme] #view .tour-activity-tabs button[aria-current="true"]{background:var(--sig-bg);color:var(--sig);font-weight:650;border-bottom-color:var(--sig);box-shadow:none!important}
#view .tour-activity-tabs button:focus-visible{outline:2px solid var(--sig);outline-offset:-3px}
/* Decks and Tours (and an empty or loading Microsite) keep their toolbar and list, a step below the hairline. */
#view .tour-activity-tabs+.flow26:not(:has(.f26-ms)){padding-top:24px}
/* Microsite tab: Bookings and Questions are sections now, so the one-line count above the list is not drawn. */
#view .flow26:has(.f26-ms)>.f26-topline{display:none}
#view .flow26:has(.f26-ms){max-width:none;gap:0}
#view .f26-ms{display:block;padding-top:38px}
.f26-ms-sec+.f26-ms-sec{margin-top:42px}
/* Section row: outlined icon, bold title, round count, chevron at the far right. */
.f26-ms-head{margin:0;font-size:inherit;letter-spacing:0}
.f26-ms-head button{display:flex;align-items:center;gap:0;width:100%;min-height:38px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.f26-ms-head button:focus-visible{outline:2px solid var(--sig);outline-offset:4px;border-radius:8px}
.f26-ms-ico{display:grid;place-items:center;width:28px;height:28px;margin:0 19px 0 3px;color:var(--ink)}
.f26-ms-ico svg{width:26px;height:26px}
.f26-ms-title{font-size:22.5px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.f26-ms-count{display:inline-grid;place-items:center;min-width:34px;height:25px;margin-left:14px;padding:0 9px;border-radius:99px;background:color-mix(in srgb,var(--sig) 12%,var(--card-2));color:var(--ink);font-size:14px;font-weight:600}
.f26-ms-chev{display:grid;place-items:center;width:27px;height:27px;margin:0 6px 0 auto;color:var(--ink-2);transition:transform .2s ease}
.f26-ms-chev svg{width:21px;height:21px}
.f26-ms-sec.is-shut .f26-ms-chev{transform:rotate(180deg)}
.f26-ms-head button:hover .f26-ms-chev{color:var(--ink)}
.f26-ms-list{margin-top:15px}
.f26-ms-list[hidden]{display:none}
.f26-ms-questions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(500px,100%),1fr));gap:21px;align-items:start}
/* Cards: white, bordered, soft shadow. Same frame for a booking and a question. */
#view .f26-ms .f26-activity{width:auto;margin:0;padding:21px 21px 21px 19px;border:1px solid var(--line-2);border-radius:13px;background:var(--card);box-shadow:0 1px 2px rgba(20,30,25,.07),0 5px 14px rgba(20,30,25,.05);gap:0 22px}
#view .f26-ms .f26-activity.hot{border-left:1px solid var(--line-2)}
#view .f26-ms a.f26-activity:hover,#view .f26-ms .f26-activity:hover{background:var(--card)}
#view .f26-ms a.f26-activity:hover{border-color:var(--card-edge-strong,var(--line-2))}
#view .f26-ms .f26-activity .mono{width:44px;height:44px;border-radius:10px;font-size:16px;font-weight:500}
#view .f26-ms .f26-activity b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
#view .f26-ms .f26-activity p{margin:4px 0 0;font-size:15px;line-height:1.4;color:var(--ink-3)}
#view .f26-ms .f26-badge{align-self:center;gap:8px;min-height:34px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:550;line-height:1}
#view .f26-ms .f26-badge.hot{background:var(--sig-bg);color:var(--sig);border:1px solid color-mix(in srgb,var(--sig) 32%,transparent)}
#view .f26-ms .f26-badge.hot:before{width:6px;height:6px}
#view .f26-ms .f26-activity-when{gap:20px}
#view .f26-ms .f26-activity-when>b{gap:10px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
#view .f26-ms .f26-activity-when>b .p71-icon{width:20px;height:20px;margin:0;stroke-width:1.6;color:var(--ink)}
#view .f26-ms .f26-activity-who{grid-template-columns:44px minmax(0,1fr);gap:0 18px}
/* Booking: monogram and place, then date, status and the open-in-new button. */
#view .f26-ms .f26-booking{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
#view .f26-ms .f26-booking .f26-badge{min-height:36px}
#view .f26-ms .f26-activity>.arw{display:grid;place-items:center;flex:none;width:45px;height:45px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink)}
#view .f26-ms .f26-activity>.arw svg{display:none}
#view .f26-ms .f26-activity>.arw:before{content:"";width:21px;height:21px;background:currentColor;-webkit-mask:var(--f26-ext) center/contain no-repeat;mask:var(--f26-ext) center/contain no-repeat}
#view .f26-ms{--f26-ext:url('data:image/svg+xml;utf8,');--f26-tick:url('data:image/svg+xml;utf8,');--f26-undo:url('data:image/svg+xml;utf8,')}
/* Question: monogram, name, time, status and the tick on one line; the question and the way to reach them sit under the name. */
#view .f26-ms .f26-question{grid-template-columns:44px minmax(0,1fr) auto auto auto;grid-template-rows:auto auto auto;column-gap:19px;align-items:center}
#view .f26-ms .f26-question .f26-activity-who,#view .f26-ms .f26-question .f26-activity-who>span:last-child,#view .f26-ms .f26-question .f26-activity-when{display:contents}
#view .f26-ms .f26-question .f26-activity-who>.mono{grid-column:1;grid-row:1;align-self:start}
#view .f26-ms .f26-question .f26-activity-who>span:last-child>b{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view .f26-ms .f26-question .f26-activity-when>b{grid-column:3;grid-row:1;display:flex;align-items:center;white-space:nowrap}
#view .f26-ms .f26-question .f26-activity-when>.f26-badge{grid-column:4;grid-row:1;gap:7px;padding:0 10px}
#view .f26-ms .f26-question>button{grid-column:5;grid-row:1;margin-left:3px}
#view .f26-ms .f26-question .f26-q-text{grid-column:2/-1;grid-row:2;margin:3px 0 0;max-width:425px;font-size:16px;line-height:26px;color:var(--ink)}
#view .f26-ms .f26-question:not(.hot) .f26-q-text{color:var(--ink-2)}
#view .f26-ms .f26-question .f26-activity-who>span:last-child>small{grid-column:2/-1;grid-row:3;margin-top:14px;font-size:15px;line-height:20px;color:var(--ink-3)}
#view .f26-ms .f26-question small a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Mark answered is a round tick; its words are the tooltip. */
#view .f26-ms .f26-question>button{position:relative;display:grid;place-items:center;width:45px;height:45px;min-height:0;padding:0!important;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font-size:0!important;line-height:0;box-shadow:none;cursor:pointer}
#view .f26-ms .f26-question>button{background-image:var(--f26-tick)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:24px!important}
#view .f26-ms .f26-question>button[data-f26-q-to="new"]{background-image:var(--f26-undo)!important;background-size:21px!important}
html[data-theme$="dark"] #view .f26-ms{--f26-tick:url('data:image/svg+xml;utf8,');--f26-undo:url('data:image/svg+xml;utf8,')}
#view .f26-ms .f26-question>button:hover{border-color:var(--card-edge-strong,var(--line-2));background-color:var(--card-2)!important}
#view .f26-ms .f26-question>button:before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);z-index:6;width:10px;height:10px;border-radius:2px;background:#1d2530;opacity:0;pointer-events:none;transform:translate(-50%,3px) rotate(45deg);transition:opacity .14s ease,transform .14s ease}
#view .f26-ms .f26-question>button:hover:before,#view .f26-ms .f26-question>button:focus-visible:before{opacity:1;transform:translate(-50%,0) rotate(45deg)}
#view .f26-ms .f26-question>button:disabled:before{display:none}
#view .f26-ms .f26-question>button:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
#view .f26-ms .f26-question>button:disabled{opacity:.5;cursor:progress}
#view .f26-ms .f26-question>button:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);z-index:6;padding:8px 14px;border-radius:8px;background:#1d2530;color:#fff;font-size:13.5px;font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,3px);transition:opacity .14s ease,transform .14s ease}
#view .f26-ms .f26-question>button:hover:after,#view .f26-ms .f26-question>button:focus-visible:after{opacity:1;transform:translate(-50%,0)}
#view .f26-ms .f26-question>button:disabled:after{display:none}
/* Narrow column (a small window beside the sidebar): the booking's date and status drop under the name, and a question's time and
status drop under its name, so nothing is squeezed or pushed out of its card. The list is the container (dashboard-decks.css). */
@container (max-width:700px){
#view .f26-ms .f26-booking{grid-template-columns:minmax(0,1fr) auto!important;row-gap:14px!important;padding:21px 21px 21px 19px!important}
#view .f26-ms .f26-booking .f26-activity-who{grid-column:1;grid-row:1}
#view .f26-ms .f26-booking>.arw{grid-column:2;grid-row:1}
#view .f26-ms .f26-booking .f26-activity-when{grid-column:1/-1;grid-row:2;flex-wrap:wrap;justify-content:flex-start;gap:12px 18px;padding-left:62px}
}
@container (max-width:600px){
#view .f26-ms .f26-question{grid-template-columns:44px auto auto minmax(0,1fr) auto!important;row-gap:0!important;padding:21px 21px 21px 19px!important}
#view .f26-ms .f26-question .f26-activity-who>span:last-child>b{grid-column:2/5}
#view .f26-ms .f26-question>button{grid-column:5;grid-row:1}
#view .f26-ms .f26-question .f26-activity-when>b{grid-column:2;grid-row:2;margin-top:10px}
#view .f26-ms .f26-question .f26-activity-when>.f26-badge{grid-column:3;grid-row:2;margin-top:10px}
#view .f26-ms .f26-question .f26-q-text{grid-row:3;margin-top:10px}
#view .f26-ms .f26-question .f26-activity-who>span:last-child>small{grid-row:4}
}
}