/* Shared ornament and responsive masthead from Study Desk. */
/* Shell Layout: base, state, and responsive rules. */


.page-container .action-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0px;
  line-height: 1;
}

.page-container .action-pill.expanded .action-pill-collapsed {
  display: none;
}

.page-container .action-pill-icon svg {
  display: block;
  flex: 0 0 auto;
  margin: 0px;
}

.page-container .hamburger {
  padding: 0px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.page-container .hamburger svg {
  display: block;
  flex: 0 0 auto;
  margin: 0px;
}

.page-container .hamburger svg.icon-hidden {
  display: none;
}

.page-container .action-pill-icon {
  border-radius: 8px;
  overflow: hidden;
}

.page-container .action-pill-icon:hover, .page-container .action-pill-icon:active {
  border-radius: 8px;
  background: var(--surface-interactive);
}

.page-container .action-pill:not(.expanded) .action-pill-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.page-container .action-pill:not(.expanded) .action-pill-icon:hover, .page-container .action-pill:not(.expanded) .action-pill-icon:active {
  border-radius: 50%;
}

.page-container .action-pill:not(.expanded) {
  overflow: hidden;
}

.page-container .action-pill-icon[aria-expanded="true"] {
  background: var(--surface-interactive);
  color: var(--accent-dark);
}

.page-container:is(:not(.full-mode), .desk-header-separate) .site-header {
  background: var(--masthead-bg);
  border-bottom: 3px double var(--accent-border);
  isolation: isolate;
  z-index: var(--layer-header);
}

.page-container:is(:not(.full-mode), .desk-header-separate) .site-header::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  pointer-events: none;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .header-top {
  height: 94px;
  padding: 0px 82px 0px 24px;
  box-sizing: border-box;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .logo-link {
  display: flex;
  align-items: center;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .logo-link img {
  display: block;
  width: 323px;
  height: auto;
  max-width: 100%;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom {
  position: absolute;
  inset: 0px;
  pointer-events: none;
  padding: 0px 24px;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .hamburger, .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .action-pills {
  pointer-events: auto;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .days-remaining {
  left: 47%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 294px;
  height: 94px;
  box-sizing: border-box;
  padding: 0px 36px;
  border: 0px;
  outline: 0px;
  background: none;
  mix-blend-mode: darken;
  color: var(--caption-gold);
  font-size: 15px;
  line-height: 1.2;
}

.page-container:is(:not(.full-mode), .desk-header-separate) .days-remaining strong {
  font: 400 20px / 1 Assistant, Arial, sans-serif;
  color: var(--accent-primary);
}

@container (max-width: 1050px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .logo-link img {
    width: 280px;
  }}

@container (max-width: 1050px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .days-remaining {
    left: 43%;
    width: 258px;
    height: 86px;
    font-size: 13px;
    padding: 0px 30px;
  }}

@container (max-width: 1050px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .days-remaining strong {
    font-size: 20px;
  }}

@container (max-width: 850px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .days-remaining {
    display: none;
  }}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-top {
    height: 120px;
    padding: 0px 66px 42px 16px;
  }}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom {
    padding: 0px 16px;
  }}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .hamburger {
    align-self: flex-start;
    margin-top: 21px;
  }}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .action-pills {
    align-self: flex-end;
  }}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .logo-link img {
    width: 270px;
  }}

.page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .action-pills {
  position: absolute;
  left: 24px;
  bottom: -18px;
  gap: 10px;
  z-index: 2;
}

@container (max-width: 550px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .action-pills {
    left: 16px;
    margin-bottom: 0px;
  }}

@media (max-width: 600px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-top {
    height: 94px;
    padding: 10px 16px;
    justify-content: center;
  }}

@media (max-width: 600px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .logo-link img {
    width: 323px;
    max-width: 100%;
  }}

@media (max-width: 600px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom {
    position: relative;
    inset: auto;
    display: flex;
    min-height: 52px;
    padding: 0px 16px 8px;
    box-sizing: border-box;
    pointer-events: auto;
  }}

@media (max-width: 600px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .hamburger {
    position: static;
    align-self: center;
    margin: 0px;
  }}

@media (max-width: 600px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .header-bottom > .action-pills {
    position: static;
    align-self: center;
    margin: 0px;
    gap: 8px;
  }}

.page-container:is(:not(.full-mode), .desk-header-separate) .site-header::before {
  background-image: url("/assets/master/images/desk-header-ornament.svg?v=6.0.0-preview.1"), url("/assets/master/images/desk-header-text.png?v=6.0.0-preview.1");
  background-size: 792px 150px;
  background-position: left top;
  background-repeat: no-repeat;
  mask-image: none;
}

@container (max-width: 900px) {
  .page-container:is(:not(.full-mode), .desk-header-separate) .site-header::before {
    background-image: url("/assets/master/images/desk-header-text.png?v=6.0.0-preview.1");
  }}

/* The floating menu lives inside the header's stacking context. */
.page-container.menu-open .site-header {
  z-index: var(--layer-menu);
}
.page-container #hamburgerBtn {
  background: var(--emphasized-face);
  border: 1px solid var(--accent-primary);
  color: var(--desk-gold-ink);
  box-shadow: inset 0 1px 0 var(--surface-glint);
  margin-inline: 6px;
}

.page-container #hamburgerBtn:hover {
  background: var(--emphasized-hover);
}

.page-container #hamburgerBtn .hamburger-icon rect {
  fill: var(--desk-gold-ink);
}

.page-container #hamburgerBtn .hamburger-icon line {
  stroke: var(--desk-gold-ink);
}


.site-hide-countdown #daysRemaining {
  display: none;
}
.site-hide-header-background .site-header {
  background-image: none;
}
.site-hide-header-background .site-header::before {
  display: none;
}


/* Shared control, page-scoped preference; works for asynchronously inserted widgets. */
.site-hide-ai #kedai-widget-host { display: none !important; }

/* Third-party chat is inserted asynchronously. Override its inline layer at the
   host so its shadow content stays above navigation and regular page overlays. */
.site-master #kedai-widget-host {
  position: relative;
  isolation: isolate;
  z-index: var(--layer-chat) !important;
}