/* Tackt board: the part customers put on their screens. Sizes are in logical pixels; the engine scales the whole stage. */
.ab-host { position: relative; overflow: hidden; background: var(--ab-bg, #000); color: var(--ab-tx, #f1f4f5); font-family: var(--ab-f, sans-serif); font-weight: 300; }
.ab-stage { position: absolute; transform-origin: 0 0; }
.ab-board { position: relative; box-sizing: border-box; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); grid-template-rows: repeat(64, minmax(0, 1fr)); padding: 28px; background-color: var(--ab-bg, #000); color: var(--ab-tx); font: 300 16px/1.4 var(--ab-f); }
.ab-blk { position: relative; box-sizing: border-box; padding: 14px 18px; overflow: hidden; min-width: 0; min-height: 0; font-family: var(--ab-f); container-type: inline-size; }
.ab-in { height: 100%; }
.ab-ttl { color: var(--ab-dim); font-size: 15px; margin: 0 0 6px; font-weight: 400; }
.ab-cap { color: var(--ab-dim); font-size: 13px; margin-top: 10px; }

.ab-clk-t { font-weight: 200; font-size: clamp(36px, 21cqw, 150px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.ab-clk-d { font-size: clamp(16px, 5cqw, 28px); color: var(--ab-tx); opacity: .92; font-weight: 400; margin-top: 8px; }

.ab-ev { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ab-ln); }
.ab-ev:last-of-type { border-bottom: 0; }
.ab-ev time { white-space: nowrap; width: 112px; flex: none; color: var(--ab-ac); }
.ab-ev-t { min-width: 0; overflow-wrap: anywhere; }

.ab-notes-body { font-size: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }

.ab-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; height: 100%; }
.ab-wd { border-left: 1px solid var(--ab-ln); padding-left: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
.ab-wd b { font-weight: 400; color: var(--ab-dim); }
.ab-wd span { font-size: 1.6em; font-weight: 200; }
.ab-wd small { font-size: .75em; color: var(--ab-ac); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.ab-wd.ab-today span { color: var(--ab-ac); }

.ab-mg { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; height: calc(100% - 30px); text-align: center; }
.ab-mg i { font-style: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.15em; min-height: 0; }
.ab-mg .ab-dn { font-weight: inherit; }
.ab-mg .ab-hh { color: var(--ab-dim); font-size: .75em; }
.ab-mg .ab-today { color: var(--ab-ac); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.ab-mg .ab-has::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ab-ac); margin-top: 3px; }

/* weather */
.ab-wx { display: flex; flex-direction: column; height: 100%; }
.ab-wx-now { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.ab-wx-now .ab-wi { width: clamp(44px, 14cqw, 90px); height: clamp(44px, 14cqw, 90px); color: var(--ab-ac); flex: none; }
.ab-wx-t { font-weight: 200; font-size: clamp(44px, 20cqw, 120px); line-height: 1; letter-spacing: -.02em; }
.ab-wx-c { font-size: clamp(16px, 5.5cqw, 26px); margin-top: 4px; }
.ab-wx-s { color: var(--ab-dim); font-size: clamp(13px, 3.6cqw, 17px); margin-top: 4px; }
.ab-wx-days { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ab-ln); }
.ab-wx-d { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: clamp(12px, 3.4cqw, 17px); text-align: center; white-space: nowrap; }
.ab-wx-d b { font-weight: 400; color: var(--ab-dim); }
.ab-wx-d .ab-wi { width: 28px; height: 28px; color: var(--ab-ac); }
.ab-wx-d i { font-style: normal; color: var(--ab-dim); }

/* spreadsheet */
.ab-sh { height: 100%; }
.ab-tbl { width: 100%; border-collapse: collapse; font-size: calc(18px * var(--sc, 1)); }
.ab-tbl td { color: var(--sh-t, inherit); }
.ab-tbl th, .ab-tbl td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ab-ln); text-align: var(--al, left); max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 300; }
.ab-tbl th { color: var(--sh-h, var(--ab-dim)); font-weight: 400; font-size: calc(14px * var(--sc, 1)); }
.ab-tbl .n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 12px; }
.ab-tbl tr:last-child td { border-bottom: 0; }
.ab-tl-none th, .ab-tl-none td { border-bottom: 0; }
.ab-tl-dash th, .ab-tl-dash td { border-bottom: 1px dashed var(--ab-ln); }
.ab-tl-dot th, .ab-tl-dot td { border-bottom: 2px dotted var(--ab-ln); }
.ab-tl-dash tr:last-child td, .ab-tl-dot tr:last-child td { border-bottom: 0; }
.ab-zb tr:nth-child(even) td { background: color-mix(in srgb, var(--ab-tx) 7%, transparent); }
.ab-zb th, .ab-zb td { padding-left: 10px; }
.ab-fc td:first-child { font-weight: 600; }
.ab-th-caps th { text-transform: uppercase; letter-spacing: .08em; font-size: calc(12px * var(--sc, 1)); font-weight: 600; }
.ab-th-fill th { background: color-mix(in srgb, var(--ab-tx) 12%, transparent); padding-left: 10px; border-radius: 6px 6px 0 0; }
.ab-sh-v { font-weight: 200; font-size: calc(clamp(36px, 22cqw, 150px) * var(--sc, 1)); line-height: 1.05; letter-spacing: -.02em; color: var(--sh-t, var(--ab-ac)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-sh-l { color: var(--sh-h, var(--ab-dim)); font-size: calc(clamp(14px, 5cqw, 26px) * var(--sc, 1)); margin-top: 6px; }

/* photos: edge to edge, no frame */
.ab-blk[data-type="photos"] { padding: 0; }
.ab-ph { position: relative; height: 100%; overflow: hidden; border-radius: 10px; background: var(--ab-sf); }
.ab-ph-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.ab-ph-i.on { opacity: 1; }
.ab-ph.contain .ab-ph-i { object-fit: contain; }
.ab-ph .ab-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.ab-ph.sample { background: linear-gradient(135deg, var(--ab-sf), var(--ab-ln)); }

/* editing */
.ab-edit .ab-blk { outline: 1px dashed var(--ab-dim); cursor: grab; touch-action: none; }
.ab-edit .ab-blk:focus-visible { outline: 2px solid var(--ab-ac); }
.ab-edit .ab-blk.ab-sel { outline: 2px solid var(--ab-ac); }
.ab-edit .ab-in { pointer-events: none; user-select: none; }
.ab-grip { display: none; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; cursor: nwse-resize; border-right: 3px solid var(--ab-ac); border-bottom: 3px solid var(--ab-ac); }
.ab-edit .ab-blk.ab-sel .ab-grip { display: block; }

/* month with room for events: each day is a box that lists what is on */
.ab-mg.ab-rich { text-align: left; gap: 0; }
.ab-mg.ab-rich i { align-items: stretch; justify-content: flex-start; font-size: .9em; padding: 4px 6px; border-top: 1px solid var(--ab-ln); overflow: hidden; gap: 1px; }
.ab-mg.ab-rich i.ab-hh { border-top: 0; padding: 0 6px; font-size: .75em; justify-content: center; }
.ab-mg.ab-rich .ab-dn { font-size: 1em; line-height: 1.2; }
.ab-mg.ab-rich small { font-size: .8em; line-height: 1.2; color: var(--ab-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ab-mg.ab-rich .ab-more { color: var(--ab-dim); }
.ab-mg.ab-rich .ab-today { text-decoration: none; }
.ab-mg.ab-rich .ab-today .ab-dn { color: var(--ab-ac); font-weight: 500; }
.ab-mg.ab-rich .ab-has::after { display: none; }
.ab-mg .ab-past { opacity: .55; }

/* board background picture */
.ab-bgpic { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.ab-bgdim { position: absolute; inset: 0; pointer-events: none; }
.ab-board > .ab-blk { z-index: 1; }
/* daily agenda */
.ab-day { height: 100%; display: flex; flex-direction: column; }
.ab-day .ab-ev { font-size: 1em; }
.ab-allday { background: var(--ab-ac); color: var(--ab-bg); border-radius: 6px; padding: 2px 8px; margin: 0 0 4px; font-size: .85em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tl { position: relative; flex: 1; min-height: 0; margin-top: 4px; }
.ab-hr { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ab-ln); }
.ab-hr span { position: absolute; top: -.7em; left: 0; font-size: .75em; color: var(--ab-dim); background: transparent; }
.ab-te { background: var(--ab-sf); position: absolute; box-sizing: border-box; background: color-mix(in srgb, var(--ab-ac) 22%, transparent); border-left: 3px solid var(--ab-ac); border-radius: 5px; padding: 1px 6px; overflow: hidden; line-height: 1.25; }
.ab-te b { display: block; font-weight: 400; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-te span { font-size: .78em; color: var(--ab-dim); }
.ab-now { position: absolute; left: 3.2em; right: 0; border-top: 2px solid var(--ab-ac); pointer-events: none; }

/* event colours */
.ab-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .5em; flex: none; align-self: center; }
.ab-bar { border-left: 3px solid transparent; padding-left: 8px; }
.ab-fill { border-radius: 6px; padding: 2px 8px; font-weight: 400; }
.ab-fill time { color: inherit; opacity: .8; }
.ab-ev.ab-fill { border-bottom-color: transparent; margin: 2px 0; padding: 6px 10px; }
.ab-wd small.ab-fill, .ab-mg small.ab-fill { padding: 0 5px; border-radius: 4px; }
.ab-te.ab-bar { padding-left: 6px; }

/* calendar options */
.ab-ev-t .ab-tt { overflow-wrap: anywhere; }
.ab-det { color: var(--ab-dim); font-size: .8em; line-height: 1.3; }
.ab-desc { font-style: italic; }
.ab-badge { font-style: normal; font-size: .65em; text-transform: uppercase; letter-spacing: .06em; background: var(--ab-ac); color: var(--ab-bg); border-radius: 99px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; }
.ab-hi { background: color-mix(in srgb, var(--ab-ac) 18%, transparent); box-shadow: inset 0 0 0 1px var(--ab-ac); border-radius: 6px; font-weight: 400; }
.ab-ev.ab-hi { padding-left: 8px; padding-right: 8px; }
.ab-grp { margin-top: 10px; }
.ab-tight .ab-ev { padding: 3px 0; gap: 10px; }
.ab-roomy .ab-ev { padding: 16px 0; }
.ab-tight .ab-ttl { margin-bottom: 2px; }
.ab-roomy .ab-ttl { margin: 10px 0 10px; }
.ab-mg .ab-wn { color: var(--ab-dim); font-size: .7em; }
.ab-mg .ab-more, .ab-wd .ab-more { color: var(--ab-dim); font-size: .75em; }
.ab-wd.ab-past { opacity: .55; }
.ab-wkbox { height: 100%; }
.ab-te .ab-badge { margin-left: 6px; }
.ab-te .ab-det { font-size: .72em; }

/* today highlight in week and month views: --tc is the colour (default: theme accent), --tcon the text on it */
.ab-ts-fill, .ab-ts-tint, .ab-ts-ring, .ab-ts-line { --tc: var(--ab-ac); --tcon: var(--ab-bg); }
.ab-ts-fill .ab-wd.ab-today, .ab-ts-tint .ab-wd.ab-today { background: color-mix(in srgb, var(--tc) 16%, transparent); border-left-color: var(--tc); border-radius: 0 8px 8px 0; }
.ab-ts-fill .ab-wd.ab-today span { background: var(--tc); color: var(--tcon); font-weight: 500; border-radius: 999px; align-self: flex-start; min-width: 1.5em; text-align: center; padding: 0 .3em; }
.ab-ts-tint .ab-wd.ab-today span, .ab-ts-ring .ab-wd.ab-today span, .ab-ts-line .ab-wd.ab-today span { color: var(--tc); font-weight: 500; }
.ab-ts-ring .ab-wd.ab-today span { box-shadow: inset 0 0 0 2px var(--tc); border-radius: 999px; align-self: flex-start; min-width: 1.5em; text-align: center; padding: 0 .3em; }
.ab-ts-line .ab-wd.ab-today { border-left-color: var(--tc); border-left-width: 3px; }
/* month */
.ab-mg .ab-today { text-decoration: none; color: inherit; font-weight: inherit; }
.ab-ts-fill .ab-mg .ab-today .ab-dn { background: var(--tc); color: var(--tcon); border-radius: 999px; min-width: 1.7em; padding: 0 .3em; text-align: center; font-weight: 600; box-sizing: border-box; }
.ab-ts-fill .ab-mg.ab-rich .ab-today, .ab-ts-tint .ab-mg .ab-today { background: color-mix(in srgb, var(--tc) 18%, transparent); }
.ab-ts-tint .ab-mg .ab-today { border-radius: 10px; }
.ab-ts-tint .ab-mg .ab-today .ab-dn, .ab-ts-line .ab-mg .ab-today .ab-dn { color: var(--tc); font-weight: 600; }
.ab-ts-ring .ab-mg .ab-today .ab-dn { box-shadow: inset 0 0 0 2px var(--tc); border-radius: 999px; min-width: 1.7em; padding: 0 .3em; text-align: center; box-sizing: border-box; }
.ab-ts-line .ab-mg .ab-today .ab-dn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--tc); }
.ab-ts-line .ab-mg.ab-rich .ab-today { box-shadow: inset 0 3px 0 var(--tc); }
.ab-mg .ab-today .ab-dn { display: inline-block; align-self: center; }
.ab-mg.ab-rich .ab-today .ab-dn { align-self: flex-start; }
.ab-sh .ab-ttl { color: var(--sh-h, var(--ab-dim)); }

/* countdown, alignment */
.ab-cd-n { font-weight: 200; font-size: clamp(36px, 24cqw, 170px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ab-ac); }
.ab-cd-l { font-size: clamp(16px, 6cqw, 30px); color: var(--ab-tx); opacity: .92; font-weight: 400; margin-top: 8px; overflow-wrap: anywhere; }
.ab-va-middle, .ab-va-bottom { display: flex; flex-direction: column; }
.ab-va-middle { justify-content: center; } .ab-va-bottom { justify-content: flex-end; }
.ab-ttl { text-align: inherit; }

/* logo block and board watermark */
.ab-logo { width: 100%; height: 100%; display: flex; }
.ab-logo-i { width: 100%; height: 100%; display: block; }
.ab-logo-empty { align-items: center; justify-content: center; border: 2px dashed var(--ab-ln); border-radius: 14px; color: var(--ab-dim); font-size: 14px; text-align: center; padding: 8px; box-sizing: border-box; }
.ab-wm { position: absolute; pointer-events: none; z-index: 0; }
.ab-wm img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.ab-wm-tl { top: 28px; left: 28px; } .ab-wm-tr { top: 28px; right: 28px; } .ab-wm-bl { bottom: 28px; left: 28px; } .ab-wm-br { bottom: 28px; right: 28px; }
.ab-wm-c { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: center; }
.ab-wm-tile { inset: -50%; transform: rotate(-18deg); background-repeat: space; background-position: center; }

/* text and scrolling lines, share prices */
.ab-txt { height: 100%; display: flex; flex-direction: column; justify-content: inherit; }
.ab-txt-t { font-size: clamp(20px, 4cqw, 64px); line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; }
.ab-txt-1 { white-space: nowrap; }
.ab-mq { overflow: hidden; width: 100%; }
.ab-mq-in { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ab-mq 30s linear infinite; will-change: transform; }
.ab-mq-r .ab-mq-in { animation-direction: reverse; }
@keyframes ab-mq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ab-mq-in { animation: none; padding-left: 0; white-space: normal; } }
.ab-stk { --sc: 1; }
.ab-stk-r { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--ab-ln); font-size: calc(22px * var(--sc)); }
.ab-stk-r:last-of-type { border-bottom: 0; }
.ab-stk-s { font-weight: 500; flex: 1 1 auto; } .ab-stk-p { font-variant-numeric: tabular-nums; } .ab-stk-c { font-size: .8em; min-width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; }
.ab-stk-strip { font-size: calc(26px * var(--sc)); } .ab-stk-i { margin-right: 2.2em; } .ab-stk-i b { font-weight: 500; }

/* photo frames and tilt. The sizes use cqw (a share of the block's width) so a frame looks the same on a small block and a big one. */
.ab-blk.ab-loose { overflow: visible; }
.ab-pf { position: relative; height: 100%; box-sizing: border-box; transform-origin: 50% 50%; --pf: #fbfaf6; }
.ab-pf .ab-ph { height: 100%; }
.ab-pf-polaroid { background: var(--pf); padding: 3cqw 3cqw 11cqw; box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.45); }
.ab-pf-polaroid .ab-ph { border-radius: 0; box-shadow: inset 0 0 .6cqw rgba(0,0,0,.35); }
.ab-pf-cap { position: absolute; left: 3cqw; right: 3cqw; bottom: 2cqw; height: 7cqw; display: flex; align-items: center; justify-content: center; font: 500 5.4cqw/1 'Caveat','Segoe Script','Comic Sans MS',cursive; color: #2b2b2b; overflow: hidden; white-space: nowrap; }
.ab-pf-matte { background: var(--pf); padding: 2.5cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.4); }
.ab-pf-matte .ab-ph { border-radius: 0; }
.ab-pf-round { filter: drop-shadow(0 .8cqw 1.8cqw rgba(0,0,0,.45)); }
.ab-pf-round .ab-ph { border-radius: 6cqw; }
.ab-pf-tape { background: var(--pf); padding: 2cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.4); }
.ab-pf-tape .ab-ph { border-radius: 0; }
.ab-pf-tape::before { content: ""; position: absolute; top: -2.6cqw; left: 50%; width: 20cqw; height: 6cqw; margin-left: -10cqw; background: rgba(255,233,150,.78); transform: rotate(-4deg); box-shadow: 0 0 .5cqw rgba(0,0,0,.25); z-index: 2; }

/* blocks hidden or off-schedule: gone on a screen, faded (with a label) while editing */
.ab-gone { display: none !important; }
.ab-edit .ab-blk.ab-dimmed { opacity: .38; }
.ab-badge { position: absolute; top: 4px; right: 4px; z-index: 3; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--ab-ac, #e0a030); color: #111; pointer-events: none; }

/* quote of the day */
.ab-q { height: 100%; display: flex; flex-direction: column; justify-content: inherit; gap: .5em; }
.ab-q-t { font-size: clamp(18px, 3.6cqw, 60px); line-height: 1.25; font-weight: 400; font-style: italic; overflow-wrap: anywhere; }
.ab-q-a { font-size: clamp(13px, 1.9cqw, 26px); color: var(--ab-dim); letter-spacing: .02em; }

/* news headlines */
.ab-nw { height: 100%; display: flex; flex-direction: column; justify-content: inherit; gap: .7em; overflow: hidden; }
.ab-nw-i { border-bottom: 1px solid var(--ab-ln, rgba(128,128,128,.25)); padding-bottom: .55em; }
.ab-nw-i:last-child { border-bottom: 0; }
.ab-nw-t { font-size: clamp(15px, 2.6cqw, 40px); line-height: 1.25; overflow-wrap: anywhere; }
.ab-nw-s { font-size: clamp(11px, 1.6cqw, 20px); color: var(--ab-dim); margin-top: .2em; letter-spacing: .03em; }

/* whiteboard: paper that keeps its shape inside the block, with the handwriting drawn on a canvas */
.ab-blk[data-type="whiteboard"] { padding: 6px; }
.ab-wb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ab-wb-p { position: relative; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.22); }
.ab-wb-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab-wb-cap { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8%; color: #8a8f9a; font-size: clamp(14px, 3cqw, 34px); line-height: 1.3; pointer-events: none; }