/* Design at scale, in the Co-team identity: an ink film on a lime band, graphite blocks, Switzer and
   Fragment Mono, the mark as the Brand app's icon in every window. Plus the Google windows (Chat,
   Gmail, Slides) and the stack switch, which the ported engine did not have. */

.how { background: var(--ink); color: var(--white); }
.how.pad { padding-top: clamp(56px, 6vw, 88px); }
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; }
.how-head .d2 { color: var(--white); }
.how .film-box { background: #111112; border-radius: 12px; box-shadow: inset 0 0 0 1px #232325; }
.how .film-ch button, .how .film-ch button:hover, .how .film-ch button[aria-selected="true"] { font: 500 16px/1.3 var(--sans); }
.how .film-ch .num { font-family: var(--mono); font-weight: 400; }
.how .film-ch button[aria-selected="true"] { color: var(--lime); }
.cy-n { border-radius: 10px; background: #141415; border-color: #262628; }
.cy-tt { font-weight: 600; letter-spacing: -.025em; }
.cy-eb, .cy-sl, .cy-out .fm span, .cy-row .nm em, .cy-tm, .cy-more { font-family: var(--mono); font-weight: 400; }
.cy-H { border-radius: 10px; }
.cy-app { border-radius: 8px; }
.cy-app b { font-weight: 600; }
.cy-out .th { border-radius: 4px; }
.cy-out .th img { background: #fff; }
.cy-lg img { height: 13px; filter: invert(1); }
.cy-row .th img { padding: 2px; }
.cy-fly img { padding: 2px; }
.cy-ty b { font-family: var(--sans); font-weight: 600; }
.cy-tags span.c { background: var(--lime); }
.film-vid { background: var(--ink); border-radius: 8px; }
.film-ctl .vbtn { background: #1d1d1f; }

/* the Brand app: the mark in ink on lime; Co-team's own workspace, lime on ink */
.ui-ct, .ui-ws { background: var(--lime); color: var(--ink); border-radius: 4px; }
.ui-ws { background: var(--ink); color: var(--lime); }
.ui-ct svg, .ui-ws svg { width: 62%; height: 62%; fill: currentColor; }
.ui-btn { background: var(--ink); color: var(--lime); }
.ui-sg > .bar { background: var(--lime); }
.ui-sg > svg { width: 22px; height: 22px; color: var(--ink); }
.ui-av { background: #E9E9EC; color: #2B2B2E; }

/* Co-team business card (Teams) and signature (Outlook, Gmail) */
:is(.ui-tm, .ui-ol) .ui-bc { position: relative; aspect-ratio: 85 / 55; border-radius: 6px; background: #fff; color: var(--ink); padding: 7% 8%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; box-shadow: 0 6px 18px rgba(10,10,11,.12); }
:is(.ui-tm, .ui-ol) .ui-bc .l { position: absolute; left: 8%; top: 12%; width: 11%; aspect-ratio: 1; color: var(--ink); background: none; display: block; }
:is(.ui-tm, .ui-ol) .ui-bc .l svg { width: 100%; height: 100%; fill: currentColor; }
:is(.ui-tm, .ui-ol) .ui-bc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; background: var(--lime); border-radius: 0 0 6px 6px; }
:is(.ui-tm, .ui-ol) .ui-bc { padding-bottom: 11%; }
:is(.ui-tm, .ui-ol) .ui-bc b { font: 600 18px/1.1 var(--sans); letter-spacing: -.02em; } :is(.ui-tm, .ui-ol) .ui-bc span { font-size: 11px; } :is(.ui-tm, .ui-ol) .ui-bc em { font: 400 9.5px/1.4 var(--mono); font-style: normal; color: #5a5a5e; }
:is(.ui-tm, .ui-ol) .ui-out { background: var(--surface); }
:is(.ui-tm, .ui-ol) .ui-ok { background: var(--ink); }
.ui-sig { background: var(--surface); }
.ui-sig > i.l { background: var(--lime); color: var(--ink); border-radius: 3px; padding: 9px; }
.ui-sig > i.l svg { width: 100%; height: 100%; fill: currentColor; }
.ui-sig b { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.ui-sig span { color: var(--ink); } .ui-sig em { font-family: var(--mono); color: #5a5a5e; }
.ui-rib .ours { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ui-tg i { background: var(--ink); }
.cy-shot[data-s="1"] .ui-tp .ui-btn, .cy-shot[data-s="2"] .ui-go .ui-btn { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lime); }
.ui-tm .ui-grid img, .ui-gc .ui-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--ln); }
.ui-tm .ui-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ui-tm .ui-acts { display: flex; gap: 8px; flex-wrap: wrap; } .ui-tm .ui-acts span { padding: 4px 12px; border-radius: 6px; border: 1px solid #D1D1DB; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .ui-tm .ui-acts .pri { background: var(--tp); border-color: var(--tp); color: #fff; }
.cy-shot { background: rgba(10, 10, 11, .64); }
.cy-sc { color: #cfcfd2; } .cy-sc b { color: #fff; font-weight: 600; } .cy-sc span { color: var(--lime); }
.cy-ui { border-radius: 10px; }

/* Google Chat: white chrome, a pill search, the spaces list, Google's blue for the app's primary action */
.ui-gc { --tp: #0B57D0; background: #fff; }
.ui-gc .ui-wt { height: 46px; gap: 12px; border: 0; background: #F6F8FC; }
.ui-gc .ui-wt > b { font-size: 16px; font-weight: 500; color: #444746; margin-right: 8px; }
.ui-gc .ui-q { width: min(46%, 420px); height: 32px; border-radius: 99px; background: #E9EEF6; color: #5E6368; }
.ui-gc .ui-tb { background: #F6F8FC; padding: 0 8px 8px 0; }
.ui-gc .ui-side { width: 200px; background: none; border: 0; gap: 1px; }
.ui-gc .ui-side > span { padding: 6px 10px; border-radius: 99px; color: #1F1F1F; }
.ui-gc .ui-side > span.on { background: #D3E3FD; box-shadow: none; font-weight: 600; color: #041E49; }
.ui-gc .ui-side .ui-new { margin-bottom: 8px; padding: 9px 14px; border-radius: 14px; background: #C2E7FF; font-weight: 600; width: max-content; }
.ui-gc .ui-side small { margin: 8px 10px 2px; }
.ui-gc i.sp { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #E8DEF8; color: #4A2B83; font: 600 11px/1 var(--sans); font-style: normal; }
.ui-gc .ui-main { border-radius: 14px; background: #fff; overflow: hidden; }
.ui-gc .ui-mh > b { font-size: 15px; }
.ui-gc .ui-chat { display: flex; flex-direction: column; gap: 10px; padding: 10px 18px 8px; }
.ui-gc .ui-msg > .ui-av { background: #F9DEDC; color: #8C1D18; border-radius: 50%; }
.ui-gc .ui-msg > .ui-ct { border-radius: 50%; }
.ui-gc .ui-msg u { background: none; color: #0B57D0; font-weight: 600; }
.ui-gc .ui-acts span { height: 30px; border-radius: 99px; border-color: #747775; color: #0B57D0; font: 600 12.5px/28px var(--sans); }
.ui-gc .ui-acts .pri { background: #0B57D0; border-color: #0B57D0; color: #fff; }
.ui-gc .ui-box { border-radius: 99px; border-color: transparent; background: #F0F4F9; }

/* Gmail: the compose window, our add-on in the side panel */
.ui-gm { --tp: #0B57D0; background: #F6F8FC; }
.ui-gm .ui-wt { height: 46px; gap: 12px; border: 0; }
.ui-gm .ui-wt > b { font-size: 16px; font-weight: 500; color: #444746; margin-right: 8px; }
.ui-gm .ui-q { width: min(46%, 420px); height: 32px; border-radius: 99px; background: #E9EEF6; color: #5E6368; }
.ui-gm .ui-tb { padding: 0 8px 8px 0; }
.ui-gm .ui-rail { width: 56px; gap: 6px; background: none; }
.ui-gm .ui-rail > span { width: 44px; padding: 7px 0; border-radius: 99px; }
.ui-gm .ui-rail .on { background: #D3E3FD; color: #041E49; } .ui-gm .ui-rail .on::before { content: none; }
.ui-gm .ui-main { border-radius: 14px; background: #fff; overflow: hidden; }
.ui-cmpw { margin: 10px 0 10px 12px; padding: 0 !important; border-radius: 10px 10px 0 0; box-shadow: 0 4px 16px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.ui-cbar { display: flex; justify-content: space-between; padding: 9px 14px; border-radius: 10px 10px 0 0; background: #F2F6FC; font-weight: 600; font-size: 13px; }
.ui-cmpw .ui-of, .ui-cmpw .ui-txt { margin: 0 14px; }
.ui-gsend { margin: auto 14px 12px; } .ui-gsend span { display: inline-block; padding: 8px 22px; border-radius: 99px; background: #0B57D0; color: #fff; font-weight: 600; }
.ui-gm .ui-tp { background: #fff; }

/* Google Slides: title bar, the filmstrip, the slide, our add-on. 0: an empty deck; 1: building; 2: the deck */
.ui-gs { --tp: #0B57D0; background: #F9FBFD; }
.ui-gs .ui-wt { height: 52px; gap: 12px; border-bottom: 1px solid #E3E3E3; background: #F9FBFD; }
.ui-win .ui-gs .ui-wt .cy-si, .ui-gs .ui-wt .cy-si { width: 22px; height: 22px; }
.ui-dt { display: grid; margin-right: auto; } .ui-dt b { font-size: 15px; font-weight: 500; } .ui-dt small { font-size: 11.5px; color: #5E6368; }
.ui-sh { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid #747775; font-weight: 600; white-space: nowrap; }
.ui-share { padding: 7px 16px; border-radius: 99px; background: #C2E7FF; font-weight: 600; }
.ui-gsb { display: grid; grid-template-columns: 116px minmax(0, 1fr) 214px; height: 384px; background: #F9FBFD; }
.ui-strip { padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid #E3E3E3; overflow: hidden; }
.ui-strip span { position: relative; display: block; padding-left: 14px; }
.ui-strip em { position: absolute; left: 0; top: 2px; font: 400 10px var(--mono); font-style: normal; color: #5E6368; }
.ui-strip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #DADCE0; background: #fff; transition: opacity .35s var(--ease) calc(var(--i) * .14s); }
.ui-strip span:first-child img { box-shadow: 0 0 0 2px #0B57D0; }
.ui-slide { position: relative; align-self: center; margin: 0 18px; aspect-ratio: 16 / 10; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); display: grid; place-items: center; color: #9AA0A6; font-size: 20px; }
.ui-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease); }
.ui-gs .ui-tp { border-left: 1px solid #E3E3E3; background: #fff; }
.ui-ask { padding: 8px 10px; border-radius: 8px; background: #F0F4F9; font-size: 12.5px; }
.ui-gen { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5E6368; opacity: 0; transition: opacity .25s; }
.ui-gen i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #C9C9C9; border-top-color: var(--ink); animation: ui-spin .8s linear infinite; }
.cy-shot[data-s="0"] .ui-strip img, .cy-shot[data-s="1"] .ui-strip img, .cy-shot[data-s="0"] .ui-slide img, .cy-shot[data-s="1"] .ui-slide img { opacity: 0; }
.cy-shot[data-s="1"] .ui-gen { opacity: 1; }
.cy-shot[data-s="1"] .ui-gs .ui-btn { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lime); }
@container (max-width: 560px) {
  .ui-gsb { grid-template-columns: minmax(0, 1fr); height: auto; } .ui-strip { flex-direction: row; border: 0; } .ui-strip span { flex: 1; padding: 0; } .ui-strip em { display: none; }
  .ui-slide { margin: 0 12px; } .ui-gs .ui-tp { border: 0; border-top: 1px solid #E3E3E3; }
  .ui-sh, .ui-dt small { display: none; } .ui-gc .ui-tb, .ui-gm .ui-tb { padding: 0; } .ui-gc .ui-main, .ui-gm .ui-main { border-radius: 0; }
  .ui-olb { flex-direction: column; } .ui-cmpw { margin: 10px; } .ui-tp { width: auto !important; border-left: 0 !important; border-top: 1px solid var(--ln); }
}

/* the stack switch: in the film's frame, top right, level with the parts */
.how .film-box { position: relative; }
.how .film-ch { padding-right: 380px; }
.stack-sw { position: absolute; z-index: 30; right: 16px; top: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #1C1C1E; }
.stack-sw .lbl { color: #8B8B8E; margin: 0 8px 0 10px; font-size: 12px; }
.stack-sw button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: #CFCFD2; font: 500 13.5px/1 var(--sans); cursor: pointer; }
.stack-sw button svg { width: 14px; height: 14px; fill: currentColor; }
.stack-sw button:hover { color: #fff; }
.stack-sw button[aria-checked="true"] { background: var(--lime); color: var(--ink); }
.stack-sw button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
@media (max-width: 1100px) { .how .film-ch { padding-right: 24px; } .stack-sw { position: static; margin: 4px 16px 6px; width: max-content; max-width: calc(100% - 32px); overflow-x: auto; } }

/* Workflow integrations sits on the same dark block as the others (its lime ground is gone), so its
   type takes the dark blocks' colours; it had kept the ink meant for lime and went dark on dark */
.cy-H { color: var(--white); }
.cy-H .cy-ds { color: #b0b0b0; }
.cy-more { color: #8d8d8d; }
.cy-more .cy-tk { color: var(--y); text-decoration-color: rgba(195,244,77,.5); }