/* One geometry for the mobile dial: 16% gold, 68% green diameter.
   clock.js reads this rendered inset for both marks and hit testing. */
@media (max-width:640px){
  #entryPanel #clockPicker .clock-face::before{inset:16%}
  #entryPanel #clockPicker .clock-face{box-shadow:0 0 0 1px rgba(163,124,62,.24),0 6px 18px rgba(39,52,39,.08)}
  #entryPanel #clockPicker .clock-label{
    color:var(--vf-green);-webkit-text-fill-color:var(--vf-green);
    text-shadow:none;font-weight:750;font-variant-numeric:tabular-nums;
  }
  #entryPanel #clockPicker .clock-tick{height:7px;width:2px;opacity:.9}
  #entryPanel #clockPicker .clock-frame .clock-center{
    top:35%;font-size:clamp(20px,5.5vw,25px);line-height:1.2;
  }
  #entryPanel #clockPicker .clock-repeat{
    top:57%;width:112px;min-width:112px;height:86px;min-height:86px;
    padding:0;gap:5px;
  }
  #entryPanel #clockPicker .clock-repeat-icon{width:46px;height:46px}
  #entryPanel #clockPicker .clock-repeat-label{font-size:12px;line-height:16px}
  #entryPanel #clockPicker .clock-repeat-value{display:none}
  #entryPanel #clockPicker .clock-frame{margin-block:4px 10px}
  #entryPanel #clockPicker #clockReset{grid-column:1/-1}
  #entryPanel #entryForm{grid-template-columns:repeat(3,minmax(0,1fr))}
  #entryPanel .entry-extras .comment-toggle,
  #entryPanel .entry-extras .bonus-toggle{min-height:48px}
  #entryPanel .entry-extras .comment-toggle{grid-column:1;grid-row:1;white-space:nowrap}
  #entryPanel .entry-extras .bonus-toggle{grid-column:2;grid-row:1}
  #entryPanel .entry-network-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Three equally important controls share a narrow row. The decorative
   comment icon competes with the label and saved-state indicator on iPhones. */
@media(max-width:640px){
  #entryPanel .entry-extras .comment-toggle .comment-icon{display:none}
}
/* At 320px the saved-state badge cannot sit inline beside "Kommentar".
   Place it inside the upper-right of its own button, clear of the label
   and the adjacent Overtid button. Keep it visible and noninteractive. */
@media(max-width:360px){
  #entryPanel .entry-extras .comment-toggle{position:relative}
  #entryPanel .entry-extras .comment-toggle .comment-indicator:not([hidden]){
    position:absolute;top:1px;right:14px;
    min-width:12px;width:12px;height:12px;line-height:12px;font-size:9px;
    pointer-events:none
  }
}

/* Display Danish calendar text independently of the device locale.
   The native input still owns picking, keyboard access and the ISO value. */
#entryPanel .quick-location .date-input-shell input#date{opacity:0;position:relative;z-index:2;cursor:pointer}
#entryPanel .quick-location .date-input-shell #entryDateDisplay{position:absolute;inset:auto 4px 8px;pointer-events:none;text-align:center;color:var(--vf-green);font-size:13px;line-height:18px;font-weight:700;font-variant-numeric:tabular-nums;z-index:1}

/* Exceptional state: an uncertain submission must be visible BEFORE the dial.
   Keep the original request ID and require explicit confirmation to discard. */
#entryPanel .pending-alert:not([hidden]){
  display:block;max-width:100%;
  margin:6px 0 9px;padding:10px 12px;
  border:1px solid #b8955b;border-radius:12px;
  background:#f2e5cd;color:var(--vf-green);
  font-size:12px;line-height:1.45;overflow-wrap:anywhere;
}
#entryPanel .pending-alert strong{display:block;font-size:13px;line-height:1.35}
#entryPanel .pending-alert p{margin:5px 0 8px;color:var(--vf-green)}
#entryPanel .pending-alert .pending-actions{display:flex;flex-wrap:wrap;gap:8px}
#entryPanel .pending-alert .pending-actions button{
  min-height:40px;padding:7px 11px;font-size:12px;line-height:1.3;
}
#entryPanel #clockFeedback:not([hidden]){
  display:block;margin:5px 0 10px;padding:8px 11px;
  border:1px solid var(--vf-border);border-radius:10px;
  background:#f2e9dc;color:var(--vf-green);
  font-size:12px;line-height:1.4;
}
@media(max-width:640px){
  #entryPanel #entryForm > #clockFeedback:not([hidden]){
    grid-column:1/-1;grid-row:5;justify-self:stretch;
  }
}