/* Presentation for the timecard entry and its existing controls. */
body.hl-timecard-entry { --tc-paper:#F0EEE9; --tc-ink:#3D3835; --tc-muted:#6A6560; --tc-rose:#A05A6B; --tc-teal:#007B7F; --tc-rule:rgba(160,90,107,.24); background:#F0EEE9!important; color:#3D3835!important; font-family:'Noto Sans TC',system-ui,sans-serif!important; padding-bottom:100px!important; }
html[lang^='zh-Hans'] body.hl-timecard-entry { font-family:'Noto Sans SC',system-ui,sans-serif!important; }
body.hl-timecard-entry :is(h1,h2,h3,h4,p,button,input,select,textarea,a,summary,label,small,.dh-tier,.dh-ticks,.dh-ends) { font-family:inherit!important; }
body.hl-timecard-entry :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid #007B7F!important; outline-offset:4px!important; }
body.hl-timecard-entry .hl-v2-wrap { max-width:1080px!important; padding:0 28px!important; }
body.hl-timecard-entry .hl-tc-intro { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:48px; align-items:center; padding:52px 0 36px; margin:0 auto; max-width:980px; }
body.hl-timecard-entry .hl-tc-eyebrow { font-size:12px; letter-spacing:.14em; color:#6A6560!important; margin:0 0 18px; font-weight:500; }
body.hl-timecard-entry .hl-tc-intro h1 { font-size:clamp(30px,4.2vw,48px)!important; line-height:1.4; font-weight:500!important; letter-spacing:.02em!important; color:#A05A6B!important; margin:0 0 20px; }
body.hl-timecard-entry .hl-tc-intro h1 small { display:block; font-size:14px; letter-spacing:.12em; color:#6A6560!important; margin-bottom:14px; font-weight:400; }
body.hl-timecard-entry .hl-tc-intro p:not(.hl-tc-eyebrow) { color:#6A6560!important; line-height:1.95; font-size:15px; max-width:38em; }
body.hl-timecard-entry .hl-tc-art { width:100%; max-width:180px; border-radius:10px; box-shadow:0 12px 32px rgba(160,90,107,.10); }
body.hl-timecard-entry .hl-tc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:24px 0 12px; }
body.hl-timecard-entry .hl-tc-actions a { text-decoration:none; font-size:14px; color:#3D3835!important; }
body.hl-timecard-entry .hl-tc-actions a:first-child { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 24px; border-radius:6px; background:#007B7F!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:500; }
body.hl-timecard-entry .hl-tc-intro .hl-tc-note { font-size:12px!important; line-height:1.8!important; }
body.hl-timecard-entry .hl-tc-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:980px; margin:0 auto 34px; padding:24px 0; border-top:1px solid var(--tc-rule); border-bottom:1px solid var(--tc-rule); }
body.hl-timecard-entry .hl-tc-process strong { display:block; color:#3D3835; font-size:14px; font-weight:500; margin:0 0 7px; }
body.hl-timecard-entry .hl-tc-process p { color:#6A6560!important; font-size:13px; line-height:1.9; margin:0; }
body.hl-timecard-entry .hl-v2-glass { background:#fff!important; border:1px solid var(--tc-rule)!important; box-shadow:0 12px 32px rgba(160,90,107,.05)!important; border-radius:12px!important; color:#3D3835!important; }
body.hl-timecard-entry :is(#timecard-start,#draw-reflection-questions) { scroll-margin-top:140px; }
body.hl-timecard-entry :is(.dh-tier,.hl-v2-modal-content) { border:1px solid var(--tc-rule)!important; background:#fff!important; box-shadow:0 12px 32px rgba(160,90,107,.06)!important; border-radius:12px!important; }
body.hl-timecard-entry .dh-tier .n { color:#A05A6B!important; font-weight:500!important; }
body.hl-timecard-entry :is(.dh-step-k,.dh-tier .t,.dh-tier .d,.dh-tier .note,.dh-ticks,.dh-ends) { color:#6A6560!important; }
body.hl-timecard-entry .dh-tier .pr.free { background:#A05A6B!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:0!important; border-radius:6px!important; box-shadow:none!important; }
body.hl-timecard-entry :is(#dhText,#modalQuestion,#dhQType,.hl-v2-modal-select) { background:#fff!important; border:1px solid var(--tc-rule)!important; box-shadow:none!important; color:#3D3835!important; border-radius:6px!important; font-size:16px!important; line-height:1.8!important; }
body.hl-timecard-entry :is(input,textarea)::placeholder { color:#6A6560!important; opacity:1; }
body.hl-timecard-entry :is(#dhGo,#draw-reflection-save,.hl-v2-btn-primary,.hl-v2-modal-btn-primary,.hl-v2-funnel-btn.primary) { background:#007B7F!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid #007B7F!important; border-radius:6px!important; box-shadow:none!important; min-height:48px; padding:12px 24px; cursor:pointer; font-size:15px; font-weight:500!important; }
body.hl-timecard-entry :is(.hl-v2-btn-secondary,.hl-v2-modal-btn-secondary) { background:#fff!important; color:#A05A6B!important; -webkit-text-fill-color:#A05A6B!important; border:1px solid var(--tc-rule)!important; border-radius:6px!important; box-shadow:none!important; }
body.hl-timecard-entry :is(.hl-v2-modal-title,.hl-v2-funnel-title) { color:#A05A6B!important; font-weight:500!important; }
body.hl-timecard-entry .hl-v2-modal-subtitle { color:#6A6560!important; }
body.hl-timecard-entry #draw-reflection-questions { background:#fff!important; border:1px solid var(--tc-rule)!important; box-shadow:none!important; }
body.hl-timecard-entry #draw-reflection-questions :is(details,textarea) { background:#fff!important; color:#3D3835!important; border-color:var(--tc-rule)!important; }
body.hl-timecard-entry .hl-tc-return { border-top:1px solid var(--tc-rule); margin:24px 0 0; padding-top:20px; color:#6A6560; font-size:14px; line-height:1.95; }
body.hl-timecard-entry .hl-tc-return strong { color:#A05A6B; font-weight:500; }
body.hl-timecard-entry .hl-tc-return small { display:block; font-size:12px; margin-top:8px; }
body.hl-timecard-entry #hl-top-nav { background:rgba(240,238,233,.98)!important; border-bottom:1px solid var(--tc-rule)!important; box-shadow:none!important; height:auto!important; min-height:72px; padding:16px 24px!important; }
body.hl-timecard-entry #hl-top-nav :is(.htn-search,.htn-music,.htn-burger) { display:inline-flex!important; align-items:center; justify-content:center; width:auto!important; min-width:40px; min-height:40px; background:transparent!important; border:0!important; box-shadow:none!important; font-size:13px!important; }
body.hl-timecard-entry #hl-top-nav .htn-cta { background:#007B7F!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:0!important; box-shadow:none!important; border-radius:6px!important; }
body.hl-timecard-entry #hl-top-nav .htn-cta * { color:#fff!important; -webkit-text-fill-color:#fff!important; }
body.hl-timecard-entry :is(#hl-top-nav,#hl-drawer,#hl-bottom-nav) svg,body.hl-timecard-entry #hl-bottom-nav .hl-bn-icon,body.hl-timecard-entry #hl-top-nav .htn-burger>span:not([data-hl-tc-label]) { display:none!important; }
body.hl-timecard-entry #hl-top-nav [data-hl-tc-label] { display:inline-block!important; width:auto!important; height:auto!important; background:none!important; transform:none!important; font:inherit!important; line-height:1.5!important; position:static!important; }
body.hl-timecard-entry .hl-tc-history { margin:22px 0; padding:20px; border:1px solid var(--tc-rule); border-radius:8px; background:#fff; scroll-margin-top:140px; }
body.hl-timecard-entry .hl-tc-history summary { cursor:pointer; color:#A05A6B; font-size:15px; line-height:1.8; list-style:none; }
body.hl-timecard-entry .hl-tc-history summary::-webkit-details-marker { display:none; }
body.hl-timecard-entry .hl-tc-history summary::after { content:attr(data-open-label); float:right; font-size:12px; color:#6A6560; }
body.hl-timecard-entry .hl-tc-history[open] summary::after { content:attr(data-close-label); }
body.hl-timecard-entry .hl-tc-history article { padding:20px 0; border-top:1px solid var(--tc-rule); }
body.hl-timecard-entry .hl-tc-history p { color:#3D3835!important; font-size:14px; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; }
body.hl-timecard-entry .hl-tc-history strong { color:#A05A6B; font-size:13px; font-weight:500; }
body.hl-timecard-entry .hl-tc-history .hl-tc-history-date { color:#6A6560!important; font-size:12px; }
body.hl-timecard-entry :is(#hlPrimarySub,#hl-aroma-canvas) { display:none!important; }
body.hl-timecard-entry :is(.hl-v2-modal-icon,.hl-v2-funnel-icon,.hl-bestie-icon,.hl-float-icon) { display:none!important; }
body.hl-timecard-entry .dh-depth input[type=range] { border:0!important; box-shadow:none!important; border-radius:0!important; }
body.hl-timecard-entry #hl-top-nav { display:grid!important; grid-template-columns:auto 1fr auto; gap:24px; }
body.hl-timecard-entry .hl-tc-brand { display:flex; flex-direction:column; gap:4px; color:#3D3835!important; }
body.hl-timecard-entry .hl-tc-brand span { font-size:16px; font-weight:600; letter-spacing:.18em; }
body.hl-timecard-entry .hl-tc-brand small { font-size:11px; font-weight:400; letter-spacing:.12em; color:#6A6560!important; }
body.hl-timecard-entry #hl-top-nav .htn-left { gap:6px!important; }
@media(max-width:999px) {
  body.hl-timecard-entry #hl-top-nav { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  body.hl-timecard-entry .hl-tc-brand { grid-column:1; grid-row:1; }
  body.hl-timecard-entry #hl-top-nav .htn-left { grid-column:1; grid-row:2; }
  body.hl-timecard-entry #hl-top-nav .htn-right { display:contents; }
  body.hl-timecard-entry #hl-top-nav .htn-login { grid-column:2; grid-row:1; }
  body.hl-timecard-entry #hl-top-nav .htn-cta { grid-column:2; grid-row:2; }
  body.hl-timecard-entry #hl-top-nav .htn-lt button { min-width:23px!important; padding:5px 1px!important; font-size:11px!important; }
  body.hl-timecard-entry #hl-top-nav :is(.htn-search,.htn-music,.htn-burger) { min-width:28px!important; padding:4px 0!important; font-size:12px!important; }
}
@media(max-width:860px) {
  body.hl-timecard-entry { padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important; }
  body.hl-timecard-entry #hl-timecard-footer-navigation { padding:24px 20px 80px; box-sizing:border-box; clear:both; }
  body.hl-timecard-entry #hl-bottom-nav,body.hl-timecard-entry #hl-bottom-nav.hlbn-hidden,body.hl-timecard-entry #hl-bottom-nav.hlbn-reveal { position:relative!important; inset:auto!important; transform:none!important; -webkit-transform:none!important; width:100%!important; max-width:680px!important; margin:0 auto!important; padding:10px 8px!important; background:#fff!important; border:1px solid var(--tc-rule)!important; border-radius:8px!important; box-shadow:none!important; z-index:auto!important; }
  body.hl-timecard-entry #hl-bottom-nav .hl-bn-item { min-height:44px!important; color:#3D3835!important; }
}
@media(max-width:600px) {
  body.hl-timecard-entry .hl-v2-wrap { padding:0 20px!important; }
  body.hl-timecard-entry .hl-tc-intro { grid-template-columns:1fr; gap:0; padding:34px 0 24px; }
  body.hl-timecard-entry .hl-tc-art { display:none; }
  body.hl-timecard-entry .hl-tc-intro h1 { font-size:30px!important; }
  body.hl-timecard-entry .hl-tc-process { grid-template-columns:1fr; gap:15px; padding:20px 0; }
  body.hl-timecard-entry .hl-tc-process>div { display:grid; grid-template-columns:100px 1fr; gap:12px; }
  body.hl-timecard-entry #hl-top-nav { padding:10px 16px!important; }
  body.hl-timecard-entry #hl-top-nav .htn-right { gap:8px!important; }
  body.hl-timecard-entry #hl-top-nav .htn-cta { padding:8px 12px!important; font-size:12px!important; }
}
