/* Approved B: full-width event dossier. Clear groups and familiar controls take priority. */
#tg-client-portal { --ink:#14171b; --muted:#525b68; --blue:#2857cf; --line:#d6dce5; --wash:#f4f6fa; --green:#18733c; font:16px/1.55 Inter,Arial,sans-serif; color:var(--ink); background:#fff; padding:24px 24px 48px; width:100%; max-width:none; }
#tg-client-portal, #tg-client-portal *, #tg-client-portal *::before, #tg-client-portal *::after { box-sizing:border-box; }
#tg-client-portal [hidden] { display:none!important; }
#tg-client-portal :is(h1,h2,h3,p,dl,dd,ol) { margin:0; }
#tg-client-portal :is(h1,h2,h3) { color:var(--ink); font-family:Inter,Arial,sans-serif; font-style:normal; text-transform:none; letter-spacing:-.03em; line-height:1.16; }
#tg-client-portal h1 { font-size:52px; font-weight:800; text-wrap:balance; }
#tg-client-portal h2, #tg-client-portal h3 { font-weight:700; }
#tg-client-portal h2 { font-size:27px; }
#tg-client-portal h3 { font-size:23px; }
#tg-client-portal p { max-width:72ch; }
#tg-client-portal a { color:var(--blue); text-underline-offset:4px; }
#tg-client-portal ::selection { background:#dce7ff; color:#14244a; }
#tg-client-portal :focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
#tg-client-portal svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#tg-client-portal :is(button,input,select,textarea) { font:inherit; letter-spacing:normal; accent-color:var(--blue); caret-color:var(--blue); }
#tg-client-portal button { cursor:pointer; }
#tg-client-portal :is(button,.primary,.secondary) { border-radius:6px; text-transform:none; font-style:normal; }
#tg-client-portal :is(.primary,.secondary,.open-delivery,.deliverable-btn,.tgc-gate input[type=submit]) { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:12px 22px; font-weight:650; font-size:16px; line-height:1.4; text-decoration:none; border:1px solid transparent; }
#tg-client-portal :is(.primary,.deliverable-btn,.tgc-gate input[type=submit]) { background:var(--blue); color:#fff; }
#tg-client-portal :is(.primary,.deliverable-btn,.tgc-gate input[type=submit]):hover { background:#183e9e; }
#tg-client-portal .secondary { color:var(--ink); border-color:#aeb7c5; background:#fff; }
#tg-client-portal .secondary:hover { background:#eaf0f8; }
#tg-client-portal :disabled { opacity:.6; cursor:wait; }
#tg-client-portal .client-workspace { width:100%; max-width:1320px; margin:auto; }
#tg-client-portal .preview-notice { padding:12px 16px; margin:0 0 20px; max-width:none; background:#edf2fc; border:1px solid #c5d3f1; color:#304774; font-size:14px; font-weight:650; border-radius:6px; }
#tg-client-portal .preview-notice { position:relative; padding-right:48px; }
#tg-client-portal .preview-notice span { margin-left:12px; font-weight:400; }
#tg-client-portal .preview-notice .preview-close { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:32px; height:32px; padding:0; border:0; border-radius:4px; background:transparent; color:#304774; font-size:22px; line-height:1; cursor:pointer; }
#tg-client-portal .preview-notice .preview-close:hover { background:#dbe5f8; }
#tg-client-portal .workspace-nav { display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid var(--line); min-height:76px; }
#tg-client-portal .workspace-tabs { display:flex; gap:6px; align-self:stretch; }
#tg-client-portal .workspace-tabs button { color:var(--muted); background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; padding:18px 20px; font-weight:650; white-space:nowrap; }
#tg-client-portal .workspace-tabs button:hover { background:var(--wash); color:var(--ink); }
#tg-client-portal .workspace-tabs button[aria-selected=true] { color:var(--blue); border-bottom-color:var(--blue); background:#f0f4fd; }
#tg-client-portal :is(.logout,.nav-private) { font-size:14px; color:var(--muted); }
#tg-client-portal .workspace-panel { padding:44px 0 48px; outline:none; }
#tg-client-portal .page-intro { margin-bottom:24px; padding:0 28px; color:var(--muted); font-size:17px; max-width:760px; } /* inset to line up with the text inside the cards below */
#tg-client-portal .event-status { display:inline-flex; align-items:center; gap:10px; color:#525b68; background:#f0f2f5; padding:10px 16px; border-radius:6px; white-space:nowrap; font-weight:650; font-size:15px; }
#tg-client-portal .event-status.is-confirmed { color:#145d32; background:#eaf5ed; }
#tg-client-portal .status-light { height:10px; width:10px; border-radius:50%; background:#687281; flex-shrink:0; }
#tg-client-portal .is-confirmed .status-light { background:#198647; }
#tg-client-portal :is(.preferences-grid,.overview-grid,.delivery-grid) { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:start; }
#tg-client-portal .preferences-grid { align-items:stretch; }
#tg-client-portal :is(.pref-group,.overview-grid>section,.delivery-grid>section,.schedule,.delivery-progress) { border:1px solid var(--line); border-radius:12px; padding:28px; background:#fff; }
#tg-client-portal .preferences-grid .pref-group { background:var(--wash); min-width:0; }
#tg-client-portal :is(.overview-grid,.delivery-grid)>section { min-width:0; }
#tg-client-portal .pref-group h3 { padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; }
#tg-client-portal .pref-group h2 { padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; font-size:23px; }
#tg-client-portal .pref-notes { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; column-gap:28px; }
#tg-client-portal .pref-notes h3 { grid-column:1/-1; }
#tg-client-portal .pref-notes h2 { grid-column:1/-1; }
#tg-client-portal .nav-status { display:flex; gap:14px; align-items:center; }
#tg-client-portal .pref-field { margin-bottom:24px; min-width:0; }
#tg-client-portal .pref-field:last-child { margin-bottom:0; }
#tg-client-portal .pref-field label { display:block; font-weight:650; margin-bottom:9px; color:var(--ink); }
#tg-client-portal :is(select,textarea,.pref-field input:not([type=checkbox]):not([type=range]),.tgc-gate input:not([type=checkbox]):not([type=submit])) { width:100%; min-height:50px; border:1px solid #8b97a8; border-radius:6px; padding:12px 14px; color:var(--ink); background:#fff; font-size:16px; box-shadow:none; }
#tg-client-portal select { appearance:auto; padding-right:30px; text-overflow:ellipsis; cursor:pointer; }
#tg-client-portal select { min-width:0; max-width:100%; }
#tg-client-portal select:hover { border-color:var(--blue); }
#tg-client-portal textarea { resize:vertical; line-height:1.5; }
#tg-client-portal .save-status { margin-bottom:18px; color:var(--muted); }
#tg-client-portal .save-status:empty { margin:0; }
#tg-client-portal .save-status.is-saved { color:var(--green); }
#tg-client-portal .editing-note { color:var(--muted); margin:0 0 24px; }
/* Reference photos: a button on the left, a stack of polaroids on the right. */
#tg-client-portal .ref-field { display:flex; align-items:center; justify-content:space-between; gap:16px; height:74px; margin-top:12px; padding:0 14px; border:1px solid #d7e0ef; border-radius:6px; background:#ffffffc4; }
#tg-client-portal .ref-add { display:flex; align-items:center; gap:12px; min-width:0; }
#tg-client-portal label.ref-button { display:inline-flex; align-items:center; gap:8px; width:fit-content; margin:0; padding:9px 15px; white-space:nowrap; border-radius:6px; background:#182740; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease,transform .2s ease; }
#tg-client-portal label.ref-button:hover { background:#285ee1; transform:translateY(-1px); }
#tg-client-portal label.ref-button:focus-within { outline:3px solid var(--blue); outline-offset:4px; }
#tg-client-portal .ref-button input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#tg-client-portal .ref-note { font-size:12px; color:var(--muted); }
#tg-client-portal .ref-stack { position:relative; flex:none; width:92px; height:58px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#tg-client-portal .ref-frame { position:absolute; top:4px; left:50%; width:42px; height:50px; margin-left:-21px; padding:3px 3px 10px; border:1px solid #c6d2e6; border-radius:3px; background:#fff; box-shadow:0 2px 6px #13264022; transform:translateX(calc((var(--i) - 1) * -9px)) rotate(calc((1 - var(--i)) * 7deg)); transform-origin:50% 100%; transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease; }
#tg-client-portal .ref-frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:1px; }
#tg-client-portal .ref-stack .ref-frame:first-child { z-index:3; }
#tg-client-portal .ref-stack .ref-frame:nth-child(2) { z-index:2; }
#tg-client-portal .ref-stack.is-empty .ref-frame { border-style:dashed; background:#f4f7fd; box-shadow:none; }
#tg-client-portal .ref-plus { position:absolute; top:22px; left:50%; z-index:4; margin-left:-7px; font-size:20px; font-weight:700; line-height:1; color:#5f779f; pointer-events:none; }
#tg-client-portal .ref-count { position:absolute; top:0; right:0; z-index:4; min-width:20px; padding:2px 5px; border-radius:10px; background:#285ee1; color:#fff; font-size:11px; font-weight:700; line-height:1.4; }
@media (prefers-reduced-motion:no-preference) {
 #tg-client-portal .ref-stack:hover .ref-frame,#tg-client-portal .ref-stack:focus-visible .ref-frame { transform:translateX(calc((var(--i) - 1) * -26px)) rotate(calc((1 - var(--i)) * 12deg)) translateY(-3px); box-shadow:0 8px 18px #13264033; }
}
#tg-client-portal .ref-viewer { width:min(560px,92vw); padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); }
#tg-client-portal .ref-viewer:focus,#tg-client-portal .ref-stack:focus { outline:none; }
#tg-client-portal .ref-stack:focus-visible .ref-frame { border-color:#285ee1; box-shadow:0 0 0 2px #285ee1; }
#tg-client-portal .ref-viewer::backdrop { background:#0f1a2c99; }
#tg-client-portal .ref-viewer-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
#tg-client-portal .ref-viewer h3 { margin:0; font-size:19px; }
#tg-client-portal button.ref-close { padding:0 6px; border:0; background:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; }
#tg-client-portal .ref-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
#tg-client-portal .ref-list li { position:relative; margin:0; }
#tg-client-portal .ref-list img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
#tg-client-portal button.ref-drop { width:100%; margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:13px; color:#a3392f; cursor:pointer; }
#tg-client-portal button.ref-drop:hover { background:#fdf0ee; border-color:#e5b5ae; }
#tg-client-portal .ref-list .ref-none { grid-column:1/-1; color:var(--muted); }
/* The details that matter: written notes, not exam boxes. */
#tg-client-portal .pref-hint { margin:-4px 0 10px; font-size:13px; line-height:1.5; color:var(--muted); }
#tg-client-portal .pref-notes .pref-field { padding-left:16px; border-left:2px solid var(--line); transition:border-color .3s ease; }
#tg-client-portal .pref-notes .pref-field.is-filled { border-left-color:var(--blue); }
#tg-client-portal .pref-notes textarea { min-height:0; border-color:#d7e0ef; background:#ffffffc4; resize:none; overflow:hidden; transition:background .25s ease,border-color .25s ease; }
#tg-client-portal .pref-notes textarea:hover { border-color:#b7c5dd; }
#tg-client-portal .pref-notes textarea:focus { background:#fff; }
#tg-client-portal .pref-notes ::placeholder { color:#66748c; }
#tg-client-portal .pref-card { grid-column:1/-1; margin-bottom:24px; padding:22px 24px; border:1px solid var(--line); border-radius:12px; background:#fff; }
#tg-client-portal .pref-card h3 { margin:0 0 18px; padding:0; border:0; font-size:18px; }
#tg-client-portal .pref-card .pref-field { padding-left:0; border-left:0; }
#tg-client-portal .pref-card .pref-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
#tg-client-portal .pref-card .pref-field:last-child { margin-bottom:0; }
#tg-client-portal .contact-card { margin-bottom:24px; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:#fff; }
#tg-client-portal .contact-view { display:grid; gap:14px; margin:0; }
#tg-client-portal .contact-view dt { margin:0 0 3px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
#tg-client-portal .contact-view dd { margin:0; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
#tg-client-portal .link-edit { display:inline-block; margin:16px 0 0; padding:0; border:0; background:none; font:inherit; font-size:14px; font-weight:600; color:#285ee1; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#tg-client-portal .link-edit:hover { text-decoration:underline; }
#tg-client-portal .contact-edit .pref-field:last-child { margin-bottom:0; }
#tg-client-portal .pref-fine { color:var(--muted); font-size:12px; line-height:1.5; margin:10px 0 0; }
#tg-client-portal .save-bar { display:none; position:sticky; bottom:12px; z-index:5; align-items:center; justify-content:space-between; gap:20px; background:#172236; color:#fff; padding:18px 22px; border-radius:8px; margin-top:28px; box-shadow:0 8px 24px #10182826; }
#tg-client-portal .save-bar.is-live { display:flex; }
@media (prefers-reduced-motion:no-preference) {
 #tg-client-portal .save-bar.is-live { animation:tgc-bar-rise .28s ease-out; }
 #tg-client-portal .save-bar.is-live.is-leaving { animation:tgc-bar-sink .26s ease-in forwards; }
}
#tg-client-portal .save-bar.is-leaving { pointer-events:none; }
@keyframes tgc-bar-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes tgc-bar-sink { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(14px); } }
#tg-client-portal .save-bar>div { display:flex; gap:12px; }
#tg-client-portal .save-bar .primary { background:#386bea; }
#tg-client-portal .save-bar .primary:hover { background:#2455d2; }
#tg-client-portal :is(.section-intro,.delivery-item p,.updates-feed p,.schedule p) { color:var(--muted); margin-top:10px; }
/* Event details: one card, one rhythm. A calendar leaf names the day, then two ruled rows say what was booked and where. */
#tg-client-portal .event-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#tg-client-portal .hero-chip { flex:none; padding:7px 13px; border:1px solid #cddaf3; border-radius:999px; background:#fff; font-size:13px; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; white-space:nowrap; }
#tg-client-portal .event-day { display:flex; align-items:center; gap:20px; margin-top:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
#tg-client-portal .date-leaf { flex:none; display:grid; grid-template-rows:auto 1fr; width:76px; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 1px 0 #fff inset,0 8px 20px #1f3b7a1f; border:1px solid #dfe6f2; text-align:center; }
#tg-client-portal .date-leaf span { padding:5px 0 4px; background:var(--blue); color:#fff; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
#tg-client-portal .date-leaf strong { padding:6px 0 9px; font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
#tg-client-portal .event-day p { min-width:0; }
#tg-client-portal .event-day p span { display:block; font-size:14px; font-weight:600; color:var(--muted); }
#tg-client-portal .event-day p strong { display:block; margin-top:2px; font-size:25px; line-height:1.15; letter-spacing:-.025em; color:var(--ink); }
#tg-client-portal .event-day p em { display:block; margin-top:5px; font-size:15px; font-style:normal; font-weight:600; color:var(--blue); }
#tg-client-portal .event-facts>div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
#tg-client-portal .event-facts>div:last-child { border-bottom:0; padding-bottom:0; }
#tg-client-portal .event-facts dt { padding-top:2px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
#tg-client-portal .event-facts dd { font-size:17px; font-weight:600; line-height:1.45; color:var(--ink); }
#tg-client-portal .fact-sep { margin:0 9px; color:#9aa6b8; }
#tg-client-portal .fact-line { display:block; }
#tg-client-portal .fact-line+.fact-line { margin-top:8px; padding-top:8px; border-top:1px dashed #dfe5ee; }
#tg-client-portal .event-facts .text-link { margin-top:12px; font-size:15px; }
#tg-client-portal dt { font-weight:650; }
#tg-client-portal dd { overflow-wrap:anywhere; }
#tg-client-portal .text-link { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-weight:650; }
/* The schedule reads as a rail: a dot per moment, a card beside it, covered parts in blue. */
#tg-client-portal .schedule ol { position:relative; display:flex; flex-direction:column; gap:14px; margin-top:22px; padding:0 0 0 30px; list-style:none; }
#tg-client-portal .schedule ol::before { content:''; position:absolute; left:7px; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,#c7d5ee00,#c7d5ee 14%,#dde5f5 86%,#dde5f500); }
#tg-client-portal .schedule li { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid #e5ebf7; border-radius:12px; background:#f7f9fd; transition:background .25s ease,border-color .25s ease; }
#tg-client-portal .schedule li::before { content:''; position:absolute; left:-30px; top:50%; width:14px; height:14px; margin-top:-7px; border:3px solid #b4c3e0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #fff; }
#tg-client-portal .schedule li:hover { border-color:#c9d6ef; }
#tg-client-portal .schedule li.is-covered { background:#edf2fc; border-color:#cddaf3; }
#tg-client-portal .schedule li.is-covered::before { border-color:var(--blue); background:var(--blue); }
#tg-client-portal .schedule li.is-now { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
#tg-client-portal .schedule time { display:block; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); font-variant-numeric:tabular-nums; }
#tg-client-portal .schedule time.is-tbd { color:var(--muted); font-weight:600; }
#tg-client-portal .schedule h3 { margin-top:5px; font-size:17px; }
#tg-client-portal .schedule li p { margin-top:4px; font-size:14px; }
#tg-client-portal .live-label { display:inline-flex; align-items:center; gap:7px; flex:none; padding:6px 12px; border-radius:999px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
#tg-client-portal .live-label .live-dot { width:7px; height:7px; border-radius:50%; background:#fff; }
#tg-client-portal .event-status.is-live { color:#12326f; background:#e7eefc; }
#tg-client-portal .is-live .status-light { background:var(--blue); }
#tg-client-portal .prep-note { white-space:pre-line; padding-top:20px; }
#tg-client-portal .empty-copy { margin-top:22px; color:var(--muted); padding:20px; background:var(--wash); border-radius:6px; }
#tg-client-portal .delivery-eta { color:var(--muted); flex:0 0 auto; text-align:right; }
#tg-client-portal .delivery-progress { margin-bottom:28px; background:#f5f7fc; }
#tg-client-portal .delivery-current { display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
#tg-client-portal .delivery-current p { color:var(--muted); margin-top:8px; }
#tg-client-portal .stage-track { padding:0; display:grid; grid-template-columns:repeat(5,1fr); list-style:none; gap:12px; margin-top:28px; }
#tg-client-portal .stage-track li { position:relative; padding-top:18px; border-top:3px solid #bac3d2; color:var(--muted); font-size:14px; font-weight:600; }
#tg-client-portal .stage-track li.current { border-color:var(--blue); color:var(--blue); }
#tg-client-portal .stage-track li.complete { border-color:var(--green); color:var(--green); }
#tg-client-portal .stage-mark { display:flex; justify-content:center; align-items:center; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; margin-bottom:12px; }
#tg-client-portal .current .stage-mark { background:var(--blue); color:white; border-color:var(--blue); }
#tg-client-portal .updates-feed article { padding:24px 0; border-bottom:1px solid var(--line); }
#tg-client-portal .updates-feed time { color:var(--muted); font-size:14px; }
#tg-client-portal .updates-feed h3 { font-size:20px; margin-top:8px; }
#tg-client-portal .updates-feed p { white-space:pre-line; overflow-wrap:anywhere; }
#tg-client-portal .delivery-item { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
#tg-client-portal .delivery-item h3 { font-size:18px; }
#tg-client-portal .delivery-item p { font-size:15px; }
#tg-client-portal .open-delivery { border-color:#a5b9e5; background:#edf2fc; border-radius:6px; }
#tg-client-portal .open-delivery:hover { background:#dce7fc; }
/* Not ready yet: a dashed, hatched tag the same height as the Open button. */
#tg-client-portal .pending-delivery { display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:12px 18px; border:1px dashed #b7c5dd; border-radius:6px; background:repeating-linear-gradient(135deg,#eef2f9 0 5px,#f8fafd 5px 10px); font-size:14px; font-weight:600; color:#56647a; white-space:nowrap; }
#tg-client-portal .pending-delivery svg { width:16px; height:16px; }
#tg-client-portal .delivery-item.is-locked h3 { color:#5f6d82; }
#tg-client-portal .delivery-item.is-locked p { color:#66748c; }
#tg-client-portal .event-footer { display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; padding:28px 32px; color:#fff; background:#171b22; border-radius:10px; }
#tg-client-portal .event-footer>div { display:flex; flex-wrap:wrap; gap:6px 20px; }
#tg-client-portal .event-footer strong { display:block; flex-basis:100%; font-size:21px; }
#tg-client-portal .event-footer span { font-size:14px; }
#tg-client-portal .event-footer>div:last-child { justify-content:flex-end; }
#tg-client-portal .event-footer>div:last-child>span { flex-basis:100%; text-align:right; }
#tg-client-portal .event-footer a { display:inline-flex; align-items:center; gap:6px; color:#a8c2ff; font-size:15px; }
#tg-client-portal .tgc-gate { max-width:520px; margin:40px auto; padding:36px; border:1px solid var(--line); border-radius:12px; }
#tg-client-portal .tgc-gate-title { font-size:36px; margin:20px 0; }
#tg-client-portal .tgc-gate p { margin:18px 0; }
#tg-client-portal .tgc-gate label { display:block; margin-bottom:8px; font-weight:600; }
#tg-client-portal .tgc-gate input[type=checkbox] { min-width:20px; min-height:20px; vertical-align:middle; }
#tg-client-portal .tgc-gate-error { color:#9f261c; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:180ms; }
@media (max-width:1000px) {
 #tg-client-portal .workspace-nav { gap:16px; flex-wrap:wrap; }
 #tg-client-portal .nav-private { display:none; }
 #tg-client-portal .workspace-tabs button { padding:18px 12px; }
 #tg-client-portal h1 { font-size:42px; }
}
@media (max-width:720px) {
 #tg-client-portal .ref-note { display:none; }
 #tg-client-portal label.ref-button { padding:9px 12px; font-size:13px; }
 #tg-client-portal .nav-status .event-status { padding:7px 10px; font-size:12px; }
 #tg-client-portal { padding:16px 16px 32px; }
 #tg-client-portal .workspace-nav { gap:8px; }
 #tg-client-portal .workspace-tabs { order:3; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
 #tg-client-portal .workspace-tabs button { padding:16px 6px; font-size:14px; }
 #tg-client-portal .workspace-panel { padding:28px 0; }
 #tg-client-portal h1 { font-size:34px; }
 #tg-client-portal h2, #tg-client-portal h3 { font-size:24px; }
 #tg-client-portal .page-intro { padding:0 18px; font-size:16px; }
 #tg-client-portal :is(.preferences-grid,.overview-grid,.delivery-grid) { grid-template-columns:1fr; gap:20px; }
 #tg-client-portal :is(.pref-group,.overview-grid>section,.delivery-grid>section,.schedule,.delivery-progress) { padding:22px 18px; }
 #tg-client-portal .pref-notes { grid-template-columns:1fr; }
 #tg-client-portal .pref-card .pref-pair { grid-template-columns:1fr; }
 #tg-client-portal .save-bar { bottom:6px; flex-direction:column; gap:12px; padding:14px; align-items:stretch; }
 #tg-client-portal .save-bar>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 #tg-client-portal .save-bar button { padding:12px 8px; font-size:15px; }
 #tg-client-portal #draft-status { font-size:14px; }
 #tg-client-portal .event-footer { padding:24px; grid-template-columns:1fr; gap:20px; }
 #tg-client-portal .event-footer .event-status { justify-self:start; }
 #tg-client-portal .event-footer>div:last-child { justify-content:flex-start; }
 #tg-client-portal .event-footer>div:last-child>span { text-align:left; }
 #tg-client-portal .delivery-eta { display:block; text-align:left; margin-top:10px; }
 #tg-client-portal .delivery-current { display:block; }
 #tg-client-portal .delivery-current p { margin-top:10px; }
 #tg-client-portal .stage-track { grid-template-columns:1fr; gap:0; }
 #tg-client-portal .stage-track li { display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
 #tg-client-portal .stage-mark { margin:0; }
 #tg-client-portal .delivery-item { flex-direction:column; align-items:stretch; gap:14px; padding:20px 0; }
 #tg-client-portal .delivery-item:last-child { border-bottom:0; padding-bottom:0; }
 #tg-client-portal .delivery-item :is(.open-delivery,.pending-delivery) { justify-content:center; }
 #tg-client-portal .event-day p strong { font-size:22px; }
 #tg-client-portal .event-facts>div { grid-template-columns:1fr; gap:6px; padding:18px 0; }
 #tg-client-portal .schedule li { flex-wrap:wrap; gap:10px; }
 #tg-client-portal .preview-notice span { display:block; margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation:none; } }
/* Event details ticket (ticket.js). Sizes are shares of the ticket's width (cqw).
   Liquid Studio: deep TG blue grain, white ink, a chrome sheen and a cool shadow. */
#tg-client-portal .event-ticket { min-width:0; }
#tg-client-portal .tgt-wrap { container-type:inline-size; width:100%; max-width:741px; }
#tg-client-portal .tgt-tilt { position:relative; filter:drop-shadow(0 22px 34px #1f3b7a38) drop-shadow(0 4px 8px #1f3b7a24); }
#tg-client-portal .tgt-ticket { position:relative; width:100cqw; min-height:57.355cqw; display:flex; clip-path:inset(0 round 3.4cqw); color:#fff; user-select:none; font-family:Inter,Arial,sans-serif; }
#tg-client-portal .tgt-ticket ::selection { background:#fff; color:#1d44b4; }
#tg-client-portal .tgt-grain { position:absolute; inset:0; background:#1d44b4; }
#tg-client-portal .tgt-grain canvas { display:block; width:100%; height:100%; }
:is(#tg-client-portal,.tgt-piece) .tgt-sheen { position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,#ffffff00 22%,#ffffff1f 38%,#ffffff05 46%,#ffffff00 58%,#ffffff14 76%,#ffffff00 86%),linear-gradient(180deg,#ffffff1a,#ffffff00 34%,#0a1f5e24); box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #0a1f5e40; }
#tg-client-portal .tgt-perf { position:absolute; top:0; bottom:0; left:75.843cqw; width:max(1px,.22cqw); background:repeating-linear-gradient(to bottom,#ffffff8c 0 1.2cqw,transparent 1.2cqw 2.4cqw); }
:is(#tg-client-portal,.tgt-piece) :is(.tgt-watermark,.tgt-stub) { position:absolute; top:0; bottom:0; left:75.843cqw; right:0; display:grid; place-items:center; pointer-events:none; }
:is(#tg-client-portal,.tgt-piece) :is(.tgt-watermark,.tgt-stub) span { writing-mode:vertical-rl; line-height:1; white-space:nowrap; }
:is(#tg-client-portal,.tgt-piece) .tgt-watermark { color:#dfe7fb; opacity:.22; font-weight:800; font-variant-numeric:tabular-nums; font-size:19.433cqw; letter-spacing:-.04em; }
:is(#tg-client-portal,.tgt-piece) .tgt-stub { font-size:6.2cqw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
#tg-client-portal .tgt-body { position:relative; width:72.874cqw; padding:7.692cqw; display:flex; flex-direction:column; }
#tg-client-portal .tgt-label { margin:0; font-size:max(10px,2.3cqw); font-weight:700; line-height:1.55; letter-spacing:.13em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
#tg-client-portal .tgt-label span { display:block; }
#tg-client-portal .tgt-label span+span { color:#d4e0ff; }
#tg-client-portal h2.tgt-title { margin:4.858cqw 0 0; color:#fff; font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
#tg-client-portal .tgt-foot { margin:auto 0 0; padding-top:4cqw; font-size:max(10px,2.3cqw); font-weight:600; line-height:1.35; letter-spacing:.06em; text-transform:uppercase; color:#e6edff; }
#tg-client-portal .tgt-foot span { display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#tg-client-portal .tgt-foot span+span { margin-top:.6em; padding-top:.6em; border-top:1px solid #ffffff2e; }
#tg-client-portal .tgt-glare { position:absolute; inset:0; pointer-events:none; }
/* Spinning: the front and back share one grid cell and turn together. */
#tg-client-portal .tgt-spin { display:grid; transform-style:preserve-3d; will-change:transform; cursor:grab; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
#tg-client-portal .tgt-wrap.is-turning .tgt-spin { cursor:grabbing; }
#tg-client-portal :is(.tgt-ticket,.tgt-back) { grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
#tg-client-portal .tgt-back { position:relative; transform:rotateY(180deg); clip-path:inset(0 round 3.4cqw); color:#fff; font-family:Inter,Arial,sans-serif; user-select:none; overflow:hidden;
  background:radial-gradient(120% 90% at 70% 20%,#2350c4 0%,#16338f 45%,#0c1d58 100%); }
/* Engraved security paper: two sets of fine rings crossing, like a banknote. */
:is(#tg-client-portal,.tgt-piece) .tgt-engrave { position:absolute; inset:0; opacity:.5;
  background:repeating-radial-gradient(circle at 18% 120%,#ffffff00 0 .9cqw,#ffffff1c .9cqw 1.05cqw),repeating-radial-gradient(circle at 110% -30%,#ffffff00 0 1.1cqw,#ffffff17 1.1cqw 1.25cqw);
  -webkit-mask:linear-gradient(90deg,#000 30%,#0006); mask:linear-gradient(90deg,#000 30%,#0006); }
#tg-client-portal .tgt-grain-back { background:#0e2366; }
:is(#tg-client-portal,.tgt-piece) .tgt-vignette { position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 20%,#4b78ec3d 0%,#16338f00 45%,#050e33a6 100%); }
#tg-client-portal .tgt-back .tgt-perf { left:auto; right:75.843cqw; }
:is(#tg-client-portal,.tgt-piece) .tgt-motto { position:absolute; top:0; bottom:0; left:0; width:24.157cqw; display:grid; place-items:center; }
:is(#tg-client-portal,.tgt-piece) .tgt-motto span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:max(9px,1.75cqw); font-weight:700; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:#d4e0ff; }
/* The wordmark as a foil stamp: the logo cuts a window onto a chrome gradient
   that slides as the ticket turns (--foil is set from the spin). */
#tg-client-portal .tgt-stamp { position:absolute; left:calc(24.157cqw + 7cqw); right:7cqw; top:50%; aspect-ratio:1568/1157; transform:translateY(-43%); filter:drop-shadow(0 .25cqw 0 #0a1a4d) drop-shadow(0 .6cqw 1.4cqw #050e2e8c); }
#tg-client-portal .tgt-foil { position:absolute; inset:0;
  background:linear-gradient(112deg,#9fb4ec 0%,#ffffff 14%,#c3d2f7 24%,#6f8fdc 36%,#eef3ff 48%,#aebff0 58%,#ffffff 68%,#7c9ae2 80%,#dfe7fb 92%,#9fb4ec 100%);
  background-size:260% 100%; background-position:var(--foil,50%) 0;
  -webkit-mask:url('tg-logo.png') center/contain no-repeat; mask:url('tg-logo.png') center/contain no-repeat; }
#tg-client-portal .tgt-site { position:absolute; right:7cqw; bottom:5.6cqw; font-size:max(9px,1.75cqw); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#d4e0ffcc; }
/* Tearing off the stub: the tabs at each end of the tear line start it. The
   torn stub is its own piece; once free it leaves the page layout entirely,
   so its rules do not depend on sitting inside the portal. */
#tg-client-portal .tgt-tab { position:absolute; z-index:2; left:75.843cqw; right:0; height:10cqw; cursor:grab; touch-action:none; }
#tg-client-portal .tgt-tab-top { top:0; }
/* Along the dotted line, a touch belongs to the ticket rather than the page, so a swipe can slice it. */
#tg-client-portal .tgt-slice { position:absolute; z-index:2; left:calc(75.843cqw - 5cqw); width:10cqw; top:10cqw; bottom:10cqw; touch-action:none; }
#tg-client-portal .tgt-tab-bottom { bottom:0; }
#tg-client-portal .tgt-wrap:is(.is-tab-top,.is-tab-bottom) .tgt-spin { cursor:grab; }
#tg-client-portal .tgt-wrap.is-tearing :is(.tgt-spin,.tgt-tab) { cursor:grabbing; }
/* The hint: the whole grabbable end of the stub curls up a touch, lit along its
   lifted edge with a shadow where it bends, and flexes gently while the pointer is there. */
#tg-client-portal .tgt-hint { position:absolute; left:75.843cqw; right:0; height:8cqw; pointer-events:none; opacity:0; transform:scaleY(.3); transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.5,.5,1); }
#tg-client-portal .tgt-hint-top { top:0; transform-origin:50% 0;
  background:linear-gradient(180deg,#ffffff5c 0,#ffffff14 22%,#0612406b 42%,#0612401f 68%,#06124000 100%); }
#tg-client-portal .tgt-hint-bottom { bottom:0; transform-origin:50% 100%;
  background:linear-gradient(0deg,#ffffff5c 0,#ffffff14 22%,#0612406b 42%,#0612401f 68%,#06124000 100%); }
#tg-client-portal .tgt-wrap.is-tab-top .tgt-hint-top,
#tg-client-portal .tgt-wrap.is-tab-bottom .tgt-hint-bottom { opacity:1; transform:scaleY(1); animation:tgt-hint 1.5s ease-in-out .35s infinite; }
@keyframes tgt-hint { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.6); } }
/* With it, the soft half-circle of shadow pooling on the stub side of the notch. */
#tg-client-portal .tgt-tab::before { content:""; position:absolute; left:0; width:11cqw; height:22cqw; pointer-events:none; opacity:0; transform:scale(.7); transform-origin:0 50%;
  background:radial-gradient(circle at 0 50%,#061240b8 0,#06124066 34%,#06124000 70%); transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1); }
#tg-client-portal .tgt-tab-top::before { top:-11cqw; }
#tg-client-portal .tgt-tab-bottom::before { bottom:-11cqw; }
#tg-client-portal .tgt-wrap.is-tab-top .tgt-tab-top::before,
#tg-client-portal .tgt-wrap.is-tab-bottom .tgt-tab-bottom::before { opacity:1; transform:scale(1); animation:tgt-pool 1.5s ease-in-out .35s infinite; }
@keyframes tgt-pool { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
@media (prefers-reduced-motion: reduce) { #tg-client-portal .tgt-hint { transition:opacity .25s ease; } #tg-client-portal .tgt-wrap:is(.is-tab-top,.is-tab-bottom) .tgt-hint, #tg-client-portal .tgt-wrap:is(.is-tab-top,.is-tab-bottom) .tgt-tab::before { animation:none; } }
/* Lifted while tearing, so the opening flap passes over the column beside it. */
#tg-client-portal .tgt-wrap.is-tearing { position:relative; z-index:5; }
#tg-client-portal .tgt-wrap.is-torn { position:relative; }
#tg-client-portal :is(.tgt-wrap.is-torn :is(.tgt-tab,.tgt-slice),.tgt-wrap[data-from="1"] .tgt-tab-bottom,.tgt-wrap[data-from="-1"] .tgt-tab-top) { display:none; }
.tgt-piece { grid-area:1/1; position:relative; container-type:inline-size; pointer-events:none; color:#fff; font-family:Inter,Arial,sans-serif; user-select:none;
  transform-style:preserve-3d; will-change:transform; }
.tgt-piece-float { position:absolute; inset:0; transform-style:preserve-3d; transform-origin:var(--cx) var(--cy); }
.tgt-piece-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; filter:drop-shadow(0 1px 1.5px #0a1f5e59); }
.tgt-piece-turn { display:none; transform:rotateY(180deg); transform-origin:var(--cx) var(--cy); }
.tgt-piece:is(.is-free,.is-floating) .tgt-piece-face { filter:drop-shadow(0 16px 22px #0a1f5e47) drop-shadow(0 3px 5px #0a1f5e33); }
.tgt-wrap.is-back .tgt-piece:not(.is-free):not(.is-floating) { visibility:hidden; }
.tgt-piece.is-free { position:fixed; left:0; top:0; z-index:100000; margin:0; }
.tgt-piece.is-floating { position:absolute; left:0; top:0; z-index:5; margin:0; }
.tgt-piece.is-floating .tgt-piece-turn { display:block; }
.tgt-piece-in { position:absolute; inset:0; background:#1d44b4; }
.tgt-piece-rev { position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 90% at 70% 20%,#2350c4 0%,#16338f 45%,#0c1d58 100%); }
.tgt-piece-rev .tgt-motto { left:75.843cqw !important; }
/* Floating beside the ticket: a slow bob and sway, catching the light as it turns. */
.tgt-piece.is-hovering .tgt-piece-float { animation:tgt-hover 5.6s ease-in-out infinite; }
@keyframes tgt-hover {
  0%,100% { transform:translateY(0) rotate(0) rotateY(0); }
  25% { transform:translateY(-1.3cqw) rotate(-1deg) rotateY(-8deg); }
  50% { transform:translateY(-.4cqw) rotate(.5deg) rotateY(0); }
  75% { transform:translateY(-1.6cqw) rotate(1.2deg) rotateY(8deg); }
}
@media (prefers-reduced-motion: reduce) { .tgt-piece.is-hovering .tgt-piece-float { animation:none; } }
/* The easter egg. The motto dissolves like breath on glass, then the message
   inks in word by word out of a blur, glowing faintly as each word surfaces. */
.tgt-egg { position:absolute; top:0; bottom:0; left:75.843cqw; right:0; display:grid; place-items:center; padding:0 2.2cqw; pointer-events:none; }
.tgt-egg-in { position:relative; display:block; text-align:center; color:#dfe7fb; font-size:max(9px,1.75cqw); font-weight:600; line-height:1.45; letter-spacing:.01em; }
.tgt-egg-in::before { content:""; position:absolute; inset:-6cqw -4cqw; background:radial-gradient(closest-side,#9fb8ff55,#9fb8ff00); opacity:0; }
.tgt-egg-line { display:block; white-space:nowrap; }
.tgt-egg-in strong { display:block; margin-top:1.4cqw; color:#fff; font-size:max(12px,2.75cqw); font-weight:800; line-height:1.12; letter-spacing:-.01em; }
.tgt-egg-rule { display:block; width:5cqw; height:1px; margin:1.9cqw auto; background:linear-gradient(90deg,#ffffff00,#ffffffaa,#ffffff00); transform:scaleX(0); }
.tgt-w { display:inline-block; opacity:0; filter:blur(7px); transform:translateY(.5em) scale(1.12); }
.tgt-piece.is-egg .tgt-motto span { animation:tgt-vanish 1.5s cubic-bezier(.4,0,.6,1) forwards; }
.tgt-piece.is-egg .tgt-egg-in::before { animation:tgt-mist 3.6s ease-out .6s forwards; }
.tgt-piece.is-egg .tgt-w { animation:tgt-ink 1.2s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--d)) forwards; }
.tgt-piece.is-egg .tgt-egg-rule { animation:tgt-rule .9s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--d)) forwards; }
@keyframes tgt-vanish {
  0% { opacity:1; filter:blur(0); letter-spacing:.2em; text-shadow:0 0 0 #bcd0ff00; }
  35% { opacity:.9; filter:blur(1px); text-shadow:0 0 10px #bcd0ffcc; }
  100% { opacity:0; filter:blur(9px); letter-spacing:.55em; text-shadow:0 0 18px #bcd0ff00; }
}
@keyframes tgt-ink {
  0% { opacity:0; filter:blur(7px); transform:translateY(.5em) scale(1.12); text-shadow:0 0 0 #cfdcff00; }
  45% { opacity:.85; filter:blur(1.5px); text-shadow:0 0 12px #cfdcffcc; }
  100% { opacity:1; filter:blur(0); transform:none; text-shadow:0 0 4px #cfdcff40; }
}
@keyframes tgt-mist { 0% { opacity:0; } 30% { opacity:1; } 100% { opacity:.25; } }
@keyframes tgt-rule { to { transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .tgt-piece.is-egg .tgt-motto span { animation:none; opacity:0; }
  .tgt-piece.is-egg :is(.tgt-w,.tgt-egg-rule) { animation:none; opacity:1; filter:none; transform:none; }
}
.tgt-piece-in canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
#tg-client-portal .tgt-dust { position:absolute; inset:0; z-index:3; pointer-events:none; }
#tg-client-portal .tgt-dust span { position:absolute; border-radius:1px; }
#tg-client-portal .ticket-extras { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:20px; }
#tg-client-portal .ticket-extras .text-link { margin-top:0; }