:root {
    --desk: #e7e2d3;
    --paper: #fbf7ee;
    --paper-alt: #eee6d2;
    --rule: #c2d9ec;
    --margin: #d98a90;
    --ink: #2c2a24;
    --ink-muted: #918a78;
    --accent: #35618f;
    /* the work plan's colours: the green of the library icon's left book, the
       icons' terracotta red
       (not started: the app's blue, --accent) */
    --plan-green: #52774f;
    --plan-red: #c05023;
    --accent-contrast: #fdfbf5;
    --danger: #b6473f;
    --high: #c0392b;
    --medium: #b8811f;
    --low: #d9722a;
    --report-green: #3c8a5c;
    --tab-inactive: #e4dcc4;
    --shadow: rgba(44, 42, 36, 0.18);
    --contact-bg-1: #dde8f5; --contact-name-1: #2c5282;
    --contact-bg-2: #e0f0e0; --contact-name-2: #276749;
    --contact-bg-3: #fbe8d9; --contact-name-3: #9c4a1a;
    --contact-bg-4: #f5e0ec; --contact-name-4: #97266d;
    --contact-bg-5: #e8e0f8; --contact-name-5: #553c9a;
    --contact-bg-6: #fdf0d0; --contact-name-6: #8a5a10;
    --contact-bg-7: #dcf5f0; --contact-name-7: #1a6e63;
    --contact-bg-8: #f5e0e0; --contact-name-8: #9b2c2c;
    --contact-bg-9: #e0e4f8; --contact-name-9: #3c4a9c;
    --contact-bg-10: #eef0d0; --contact-name-10: #6b7a1a;
    --contact-bg-11: #fbdcd4; --contact-name-11: #b8462a;
    --contact-bg-12: #d4f0f5; --contact-name-12: #1a6e8a;
    --contact-bg-13: #f8dcf0; --contact-name-13: #a02a8a;
    --contact-bg-14: #ecdcc8; --contact-name-14: #7a5228;
    --contact-bg-15: #dde2e8; --contact-name-15: #3c4a5a;
    --contact-bg-16: #f5ecc0; --contact-name-16: #8a6e10;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --desk: #101114;
      --paper: #242219;
      --paper-alt: #2c2a20;
      --rule: #3a4652;
      --margin: #8a4b50;
      --ink: #ece5d6;
      --ink-muted: #a49a85;
      --accent: #7fb0e0;
      --accent-contrast: #16181c;
      --shadow: rgba(0, 0, 0, 0.5);
      --tab-inactive: #39352a;
      --contact-bg-1: #24374d; --contact-name-1: #8ab4e8;
      --contact-bg-2: #24402c; --contact-name-2: #8cd9a0;
      --contact-bg-3: #4a3420; --contact-name-3: #e8a868;
      --contact-bg-4: #452038; --contact-name-4: #e895c0;
      --contact-bg-5: #362450; --contact-name-5: #b39ce8;
      --contact-bg-6: #453410; --contact-name-6: #e0c068;
      --contact-bg-7: #1c4038; --contact-name-7: #7fd9c8;
      --contact-bg-8: #402020; --contact-name-8: #e08888;
      --contact-bg-9: #2c3060; --contact-name-9: #a0aaf0;
      --contact-bg-10: #383c18; --contact-name-10: #c8d868;
      --contact-bg-11: #4a2820; --contact-name-11: #f0a888;
      --contact-bg-12: #1c3a42; --contact-name-12: #78d0e8;
      --contact-bg-13: #401c38; --contact-name-13: #e880d0;
      --contact-bg-14: #3c2c1a; --contact-name-14: #d0a868;
      --contact-bg-15: #2c343c; --contact-name-15: #a8b8c8;
      --contact-bg-16: #3c3410; --contact-name-16: #e0c860;
    }
  }
  :root[data-theme="dark"] {
    --desk: #101114;
    --paper: #242219;
    --paper-alt: #2c2a20;
    --rule: #3a4652;
    --margin: #8a4b50;
    --ink: #ece5d6;
    --ink-muted: #a49a85;
    --accent: #7fb0e0;
    --accent-contrast: #16181c;
    --shadow: rgba(0, 0, 0, 0.5);
    --tab-inactive: #39352a;
    --contact-bg-1: #24374d; --contact-name-1: #8ab4e8;
    --contact-bg-2: #24402c; --contact-name-2: #8cd9a0;
    --contact-bg-3: #4a3420; --contact-name-3: #e8a868;
    --contact-bg-4: #452038; --contact-name-4: #e895c0;
    --contact-bg-5: #362450; --contact-name-5: #b39ce8;
    --contact-bg-6: #453410; --contact-name-6: #e0c068;
    --contact-bg-7: #1c4038; --contact-name-7: #7fd9c8;
    --contact-bg-8: #402020; --contact-name-8: #e08888;
    --contact-bg-9: #2c3060; --contact-name-9: #a0aaf0;
    --contact-bg-10: #383c18; --contact-name-10: #c8d868;
    --contact-bg-11: #4a2820; --contact-name-11: #f0a888;
    --contact-bg-12: #1c3a42; --contact-name-12: #78d0e8;
    --contact-bg-13: #401c38; --contact-name-13: #e880d0;
    --contact-bg-14: #3c2c1a; --contact-name-14: #d0a868;
    --contact-bg-15: #2c343c; --contact-name-15: #a8b8c8;
    --contact-bg-16: #3c3410; --contact-name-16: #e0c860;
  }
  * { box-sizing: border-box; }
  /* The Android WebView the native app runs in shows a much more
     pronounced elastic "bounce" past the top/bottom of the page than
     Chrome does, which reads as the whole app lurching - this turns that
     rubber-banding off everywhere (regular in-page scrolling elsewhere in
     the app is untouched since this is a document-level property). */
  html { overscroll-behavior-y: none; }
  body {
    margin: 0;
    font-family: "Assistant", "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--desk);
    color: var(--ink);
    /* The app screen always stays capped to exactly the phone's screen
       size, in every mode - never grows taller and scrolls as a whole
       page the way a long task list used to. Each mode's own content
       area (the task list, the reports list, chat's messages...) scrolls
       internally instead, while the project tabs above and the footer
       below stay fixed in place around it. min-height:0 on .app/.notebook
       below lets this bound actually propagate down the flex chain to
       each mode's own scrollable area, instead of content just
       overflowing this fixed height. */
    height: 100vh;
    overflow: hidden;
    padding: 14px 16px 8px; /* bottom = 2mm gap between the footer bar and the system nav bar */
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: none;
    /* App-wide: a long-press anywhere is used for our own action menus
       (tasks, chat bubbles, report rows, library items, folders, ...) -
       the browser's native text-selection/copy toolbar popping up on the
       same gesture fights with that everywhere it isn't explicitly
       disabled, so disable it as the default and re-enable selection only
       where it's actually needed (real text entry below). */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  input, textarea, select, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }
  .app {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .app[hidden] { display: none; }
  .app-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
  }
  .app-loading-overlay[hidden] { display: none; }
  .data-error-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--paper);
    padding: 24px;
    text-align: center;
  }
  .data-error-overlay[hidden] { display: none; }
  .app-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: 90vw;
    z-index: 60;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px var(--shadow);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .app-toast.app-toast-visible { opacity: 1; }
  .offline-sync-badge {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    background: #a6650f;
    color: #fff;
    font-family: "Assistant", sans-serif;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    padding: 6px 10px;
    box-shadow: 0 2px 8px var(--shadow);
  }
  .data-error-text {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    max-width: 320px;
    line-height: 1.5;
  }
  .data-error-retry-btn {
    padding: 10px 26px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
  }
  .app-loading-text {
    color: var(--ink-muted);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .notebook {
    background: var(--paper);
    border-radius: 10px;
    box-shadow: 0 18px 40px var(--shadow);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .notebook-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 10px;
  }
  .footer-divider {
    height: 8px;
    flex-shrink: 0;
    background: var(--paper-alt);
  }
  .notebook-footer {
    display: flex;
    align-items: center;
    /* the free width shared equally - between the icons and at both ends */
    justify-content: space-evenly;
    padding: 6px 4px 9px; /* thickness reduced 5mm then increased back 1mm from the original 12px/18px */
    flex-shrink: 0;
    border-radius: 0 0 10px 10px;
  }
  .report-fab {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--report-green);
    color: #fdfbf5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--shadow);
    padding: 0;
    overflow: hidden;
  }
  .report-fab img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .library-fab svg { width: 26px; height: 26px; }
  .report-fab[hidden], .tasks-fab[hidden] { display: none; }
  .tasks-fab.fab-active, .report-fab.fab-active, .chat-fab.fab-active, .library-fab.fab-active {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.55), 0 4px 10px var(--shadow);
  }
  .tasks-fab {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--shadow);
  }
  .tasks-fab img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .chat-fab, .library-fab {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--shadow);
    position: relative;
    padding: 0;
  }
  .chat-fab[hidden], .library-fab[hidden] { display: none; }
  .library-fab img, .chat-fab img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 12px; }
  .chat-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e5383b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    line-height: 1;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 1px 2px var(--shadow);
  }
  .chat-fab-badge[hidden] { display: none; }
  .sheet-tab-unread-badge {
    position: absolute;
    top: -6px;
    right: 4px;
    background: #e5383b;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 1px 2px var(--shadow);
    z-index: 3;
  }

  .sheet-reports-list {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 20px 4px 0;
  }
  .sheet-reports-list[hidden] { display: none; }
  .sheet-reports-empty { color: var(--ink-muted); font-size: 0.85rem; padding: 10px 0; text-align: center; }
  .sheet-reports-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1.15rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    margin: 6px auto 0;
  }

  .report-participants-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .report-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-alt);
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: var(--ink);
  }
  .report-list-item-title { font-weight: 600; }
  .report-list-item-meta { font-size: 0.75rem; color: var(--ink-muted); }

  .report-view {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--paper);
    display: flex;
    flex-direction: column;
  }
  .report-view[hidden] { display: none; }
  .report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 10px;
    flex-shrink: 0;
  }
  .report-head-title { font-family: "Rubik", "Assistant", sans-serif; font-weight: 700; font-size: 1.05rem; text-align: center; flex: 1; }
  .site-log-header-project { font-family: "Assistant", sans-serif; font-weight: 400; font-size: 0.68rem; color: var(--ink-muted); margin-bottom: 1px; }
  .report-back-btn, .report-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #libraryAddBtn {
    overflow: hidden;
    padding: 0;
  }
  .report-meta {
    padding: 0 20px 10px;
    font-size: 0.82rem;
    color: var(--ink-muted);
    flex-shrink: 0;
  }
  /* Chat sits inline on the tasks page too (same pattern as #diaryView/
     #libraryFoldersView above) instead of its own full-screen view with
     a back button - the project tabs above and footer icons below stay
     visible. Unlike those two (compact, deliberately non-scrolling), a
     conversation can be arbitrarily long, so chat keeps its own internal
     scroll: position:relative so the scroll-to-bottom button/mention
     popup below (both position:absolute) anchor to this box's own edges
     instead of .ruled-body's (whose padding would throw off their
     inset), flex:1/min-height:0 so it fills exactly .ruled-body's own
     bounded space (every mode's content area is capped the same way, not
     just chat's - see .ruled-body's own rule above). */
  #chatView {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    /* Cancels .ruled-body's own left/right padding (22px/44px) just for
       chat, so the ruled horizontal lines drawn by .chat-messages-inner's
       own background (clipped to its padding box) reach the white page's
       true edges instead of stopping at ruled-body's padding boundary. */
    margin-right: -22px;
    margin-left: -44px;
  }
  #chatView[hidden] { display: none; }
  /* .ruled-body is already a bounded flex column in every mode (see its
     own rule below) - chat just needs its own bottom padding zeroed out
     so #chatView's input bar sits flush with the bottom instead of
     leaving a gap, which no other mode wants. */
  .ruled-body.chat-mode { padding-bottom: 0; }
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
  .chat-messages-inner {
    /* flex-grow fills the screen for a short chat; the default auto
       min-height (content-based, not capped at the container's height)
       is what lets it keep growing past the container for a long one -
       a percentage min-height here was the previous, less reliable
       attempt at the same thing and silently stopped growing after a
       couple of screens' worth of messages. */
    flex: 1 0 auto;
    padding: 14px 44px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    box-sizing: border-box;
    background-color: var(--paper);
    /* A single 36px tile, explicitly repeated via background-size/-repeat,
       instead of repeating-linear-gradient's own infinite pattern - some
       mobile WebViews stop painting a repeating-linear-gradient past a
       certain element height (confirmed: the element itself keeps growing
       correctly, only the gradient paint stops), while tiling a small
       background image is a far more basic, reliably-supported mechanism. */
    background-image: linear-gradient(
      var(--paper) 0,
      var(--paper) 35px,
      var(--rule) 35px,
      var(--rule) 36px
    );
    background-size: 100% 36px;
    background-repeat: repeat;
    background-origin: padding-box;
    background-clip: padding-box;
  }
  .chat-messages-inner::before, .chat-messages-inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--margin);
    opacity: 0.55;
  }
  .chat-messages-inner::before { right: 40px; }
  .chat-messages-inner::after { left: 40px; }
  .chat-day-sep {
    align-self: center;
    background: var(--paper-alt);
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 10px;
    margin: 10px 0 8px;
    box-shadow: 0 1px 2px var(--shadow);
  }
  .chat-system-msg {
    align-self: center;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
    padding: 3px 12px;
    margin: 2px 0;
    max-width: 85%;
  }
  .chat-bubble {
    max-width: 78%;
    padding: 7px 10px 8px;
    border-radius: 10px;
    background: var(--paper-alt);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.42;
    word-break: break-word;
    position: relative;
    margin: 1px 8px 2px;
    box-shadow: 0 1px 1.5px var(--shadow);
    touch-action: pan-y;
  }
  .chat-bubble-reply-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--ink-muted);
    opacity: 0;
    pointer-events: none;
  }
  .chat-bubble.chat-bubble-start { margin-top: 6px; }
  .chat-bubble-theirs { margin-right: auto; background: var(--bubble-bg, var(--paper-alt)); }
  .chat-bubble-mine {
    margin-left: auto;
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .chat-bubble-theirs.chat-bubble-start::after {
    content: "";
    position: absolute;
    top: 0;
    left: -7px;
    width: 9px;
    height: 12px;
    background: var(--bubble-bg, var(--paper-alt));
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  .chat-bubble-mine.chat-bubble-start::after {
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    width: 9px;
    height: 12px;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .chat-bubble-sender {
    position: absolute;
    top: 2px;
    right: 100%;
    margin-right: 10px;
    width: 34px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
    color: var(--sender-color, var(--accent));
    letter-spacing: 0.01em;
  }
  .chat-bubble-mine .chat-bubble-sender { color: inherit; opacity: 0.85; }
  .chat-bubble-text { white-space: pre-wrap; line-height: 36px; }
  .chat-bubble-time {
    position: absolute;
    bottom: 4px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 0.62rem;
    line-height: 1.15;
    /* Not inherited from the bubble on purpose: "mine" bubbles use a light
       text color meant to contrast against their dark blue background, but
       this now sits outside the bubble on the plain paper background, where
       that light color would be nearly invisible. */
    color: var(--ink-muted);
    opacity: 1;
    text-align: center;
  }
  .chat-bubble-time-value { white-space: nowrap; }
  .chat-bubble-theirs .chat-bubble-time { right: 100%; margin-right: 10px; }
  .chat-bubble-mine .chat-bubble-time { left: 100%; margin-left: 10px; }
  .chat-empty {
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
    margin-top: 20px;
  }
  .library-grid {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    align-content: start;
  }
  .library-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
  }
  .library-item-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    overflow: hidden;
  }
  .library-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .site-log-categories-grid .library-item-thumb {
    background: transparent;
    border: none;
  }
  /* Grows the artwork itself (~1mm taller/wider), not the invisible box
     that positions it in the grid - overflow:visible lets the enlarged
     image spill a couple px past its own box instead of being clipped,
     and the box's flex-centering keeps it growing from its own center. */
  #diaryView .site-log-categories-grid .library-item-thumb {
    overflow: visible;
  }
  #diaryView .site-log-categories-grid .library-item-thumb img {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
  }
  .site-log-categories-grid .library-item-name {
    font-size: 0.8rem;
    font-weight: 700;
  }
  /* A safety net, not normally needed - the 5 icons are sized to always
     fit .ruled-body's bounded space without scrolling, but if they ever
     don't (a long project name wrapping, an unusual screen size), this
     scrolls instead of clipping silently. flex: 0 1 auto (not 1) so it
     sizes to its own content instead of always stretching to fill the
     full available height. */
  /* Icon size follows the screen's height, so the 3 rows of icons always
     fit above the 4 pinned buttons - small phones get smaller icons
     (down to 30px) instead of icons running under the buttons; ~470px is
     the header, tabs, title, buttons and footer together. */
  #diaryView {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* 6 icons in 2 rows of 3 (with "מתוכנן מול ביצוע"), so up to half the
       free height each, and 3 must fit across a phone */
    --diary-icon: clamp(30px, min(calc((100vh - 470px) / 2), 25vw - 14px), 92px);
    --diary-icon: clamp(30px, min(calc((100dvh - 470px) / 2), 25vw - 14px), 92px);
  }
  /* The diary icons sit inline on the tasks page now (below the tabs/
     header, above the footer), unlike the other places this same grid
     class is used (library, head office picker) which get a whole screen
     to themselves. Explicit 2 columns (not auto-fill) so the 5 icons pair
     up 2/2/1 same as the buttons below; the extra right padding (on top
     of .ruled-body's own 22px) clears the notebook's red margin line
     (.ruled-body::before, at right:39px) instead of running through it. */
  #diaryView .site-log-categories-grid {
    /* columns stay wide enough for the labels even when the icons shrink */
    grid-template-columns: repeat(3, max(72px, var(--diary-icon)));
    gap: 8px;
    padding: 0 26px 2px 10px;
    margin-top: -12px;
    justify-content: center;
  }
  #diaryView .library-item { gap: 0; }
  #diaryView .library-item-name { font-size: 0.78rem; }
  /* The 5th icon (procurement) is alone on the grid's last row - span
     both columns and center it there instead of letting grid
     auto-placement stick it to one side. Spanning both columns widens
     the item's own box to the full row, so its thumb (width:100% of
     that box) must be capped back to a single column's width - without
     this it blows up to roughly double size. */
  #diaryView #siteLogProcurementBtn {
    justify-self: center;
    width: max(72px, var(--diary-icon));
  }
  #diaryView .site-log-categories-grid .library-item-thumb {
    width: var(--diary-icon);
    margin: 0 auto;
  }
  /* Pinned to the viewport like .completed-tasks-toggle-btn, instead of
     flowing right after the icon grid - keeps the 4 buttons together at
     the bottom/center of the screen regardless of how tall the icon grid
     ends up, rather than leaving a gap or pushing the page into a scroll.
     Anchored with explicit right/left insets (not centered) because the
     red margin line sits only near the RIGHT edge in this RTL layout
     (.ruled-body's own 22px padding + .ruled-body::before's 39px inset,
     plus the page's 16px body padding = ~55-60px from the viewport's
     right edge) - a symmetric centered width still crossed it. */
  .diary-actions-fixed {
    position: fixed;
    right: 67px;
    left: 46px;
    bottom: 95px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 380px;
    margin-inline-start: auto;
    z-index: 8;
  }
  .diary-actions-fixed .site-log-close-share-row { padding: 0; gap: 0; }
  /* Flat, transparent "keyboard key" look instead of each button's normal
     solid color fill (blue/green/beige) - a thin border and a faint
     keycap-style shadow on the page's own background, not a colored
     pill, since these four sit directly on the lined paper. All 4 are
     the same fixed height (tall enough for the longest label, which
     wraps to 2 lines) and sit flush against each other (no gap), like
     adjoining keyboard keys. */
  .diary-actions-fixed .site-log-preview-btn,
  .diary-actions-fixed .site-log-periodic-btn,
  .diary-actions-fixed .site-log-close-btn,
  .diary-actions-fixed .site-log-share-btn {
    flex: 1;
    margin: 0;
    height: 38px;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 2px 3px var(--shadow);
  }
  /* The library's folder grid sits inline on the tasks page too (same
     pattern as #diaryView above) instead of its own full-screen view -
     the project tabs above and footer icons below stay visible and do
     the navigating. There can be more folders than the diary's 5 fixed
     icons (7 defaults plus any custom ones), so this uses 3 columns of
     smaller tiles instead of 2, to still fit the page without scrolling -
     and scrolls instead of clipping if a lot of custom folders ever do
     overflow it (flex: 0 1 auto, not 1, so it sizes to its own content
     rather than always stretching to fill the full available height). */
  #libraryFoldersView {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Positioned on the same line as the project name (.sheet-title-wrap,
     the row right above) instead of its own row - absolute within
     .ruled-body (already position:relative), lined up with that row's
     own top offset (the ruled-body's own 20px padding) and height. */
  #libraryFoldersView #libraryAddFolderBtn,
  #libraryFoldersView #libraryScanBtn {
    position: absolute;
    top: 20px;
    left: 22px;
    height: 36px;
    z-index: 1;
  }
  /* סריקת מסמך - the mirror of the add-folder button, on the right, kept
     clear of the red margin line (.ruled-body::before, right:39px) */
  #libraryFoldersView #libraryScanBtn { left: auto; right: 50px; overflow: hidden; padding: 2px; }
  #libraryScanBtn img { width: 100%; height: 100%; object-fit: contain; display: block; }
  #libraryFoldersView #libraryAddFolderBtn { overflow: hidden; padding: 1px; width: 36px; }
  #libraryAddFolderBtn img, #libraryAddSubfolderBtn img { width: 100%; height: 100%; object-fit: contain; display: block; }
  #libraryAddSubfolderBtn { overflow: hidden; padding: 1px; margin-inline-end: 6px; }
  /* dragging a file onto a folder */
  .library-item-lifted { opacity: 0.45; }
  .library-drag-ghost { position: fixed; z-index: 90; width: 84px; pointer-events: none; opacity: 0.9; transform: scale(1.05) rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,0.3); background: var(--paper); border-radius: 10px; }
  .library-drag-ghost .library-item-delete { display: none; }
  .library-folder-tile.library-drop-over { outline: 3px solid var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 10px; }
  #libraryFoldersView .library-grid {
    flex: none;
    overflow: visible;
    grid-template-columns: repeat(3, minmax(68px, 100px));
    gap: 10px 6px;
    padding: 0 26px 2px 10px;
    justify-content: center;
  }
  #libraryFoldersView .library-item { gap: 0; }
  #libraryFoldersView .library-item-name { font-size: 0.74rem; margin-top: -3px; }
  /* No visible frame around each folder (matches the diary icons) - with
     the box no longer needing to look like a bordered card, it can also
     be a bit bigger (grid tile and emoji both enlarged above/below). */
  #libraryFoldersView .library-item-thumb {
    background: transparent;
    border: none;
    font-size: 2.1rem;
  }
  .library-item-name {
    font-size: 0.68rem;
    color: var(--ink);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Row layout (used for the Procurement orders folder) instead of the
     default thumbnail grid - a plain list of text rows, one file per line. */
  .library-grid-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .library-grid-rows .library-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .library-grid-rows .library-item-thumb {
    width: 32px;
    height: 32px;
    aspect-ratio: auto;
    flex: 0 0 auto;
    border-radius: 6px;
    font-size: 1.1rem;
  }
  .library-grid-rows .library-item-name {
    flex: 1;
    text-align: start;
    white-space: normal;
    font-size: 0.85rem;
  }
  .library-grid-rows .library-item-delete {
    position: static;
    flex: 0 0 auto;
  }
  .library-item-delete {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger, #b5482f);
    color: #fff;
    border: none;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .library-uploading { opacity: 0.5; }
  .library-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
    margin-top: 20px;
  }
  .logo-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    margin: 14px 0;
  }
  .logo-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    border: 2px solid transparent;
  }
  .logo-picker-item.selected { border-color: var(--accent); background: var(--paper-alt); }
  .logo-picker-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.3rem;
    color: var(--ink-muted);
  }
  .logo-picker-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .logo-picker-name {
    font-size: 0.62rem;
    color: var(--ink);
    text-align: center;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .logo-picker-empty { color: var(--ink-muted); font-size: 0.85rem; text-align: center; padding: 16px 0 6px; }
  #chatForm {
    height: auto;
    padding: 8px 10px;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    gap: 8px;
  }
  #chatForm .row-mark { display: none; }
  #chatInput {
    background: var(--paper);
    border-radius: 20px;
    padding: 9px 16px;
    line-height: 1.3;
  }
  #chatForm .add-btn {
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
  }
  .chat-recording-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
  }
  .chat-recording-bar[hidden] { display: none; }
  .chat-recording-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
    animation: urgent-blink 1.1s ease-in-out infinite;
  }
  .chat-recording-time {
    flex: 1;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .chat-recording-cancel, .chat-recording-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .chat-recording-cancel { background: var(--paper); color: var(--danger); }
  .chat-recording-send { background: var(--accent); color: var(--accent-contrast); }
  .chat-bubble-voice audio {
    width: 210px;
    max-width: 100%;
    height: 34px;
    display: block;
  }
  .chat-editing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 14px;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
  }
  .chat-editing-bar[hidden] { display: none; }
  .chat-editing-cancel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 0.9rem;
    padding: 2px 4px;
  }
  .chat-reply-preview {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: 8px;
  }
  .chat-reply-sender { font-weight: 700; color: var(--accent); font-size: 0.78rem; }
  .chat-reply-text {
    color: var(--ink-muted);
    font-weight: 400;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .chat-bubble-quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-inline-start: 3px solid color-mix(in srgb, currentColor 55%, transparent);
    padding-inline-start: 7px;
    margin-bottom: 4px;
    opacity: 0.8;
    font-size: 0.82rem;
    cursor: pointer;
  }
  .chat-bubble-quote-sender { font-weight: 700; }
  .chat-bubble-quote-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
  }
  .chat-mention {
    font-weight: 700;
    color: var(--accent);
  }
  .chat-bubble-mine .chat-mention { color: inherit; text-decoration: underline; }
  .chat-bubble-check {
    letter-spacing: -1px;
  }
  .chat-bubble-check-read { color: #22c55e; font-weight: 700; font-size: 0.85rem; }
  .chat-scroll-bottom-btn {
    position: absolute;
    bottom: 66px;
    inset-inline-end: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1.1rem;
    box-shadow: 0 2px 8px var(--shadow);
    cursor: pointer;
    z-index: 5;
  }
  .chat-scroll-bottom-btn[hidden] { display: none; }
  .chat-mention-popup {
    position: absolute;
    bottom: 56px;
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 4px 14px var(--shadow);
    z-index: 6;
  }
  .chat-mention-popup[hidden] { display: none; }
  .chat-mention-item {
    display: block;
    width: 100%;
    text-align: start;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule);
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
  }
  .chat-mention-item:last-child { border-bottom: none; }
  .chat-mention-item:hover { background: var(--paper-alt); }
  .chat-bubble-image img {
    max-width: 100%;
    width: 190px;
    border-radius: 8px;
    display: block;
    cursor: pointer;
  }
  .chat-bubble-file {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
  }
  .chat-bubble-file-icon { font-size: 1.6rem; flex-shrink: 0; }
  .chat-bubble-file-info { flex: 1; min-width: 0; }
  .chat-bubble-file-name {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-bubble-file-size { font-size: 0.72rem; opacity: 0.75; }
  .chat-bubble-download-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    color: inherit;
    flex-shrink: 0;
    padding: 4px;
  }
  .chat-bubble-edited-mark { font-size: 0.62rem; opacity: 0.65; margin-inline-start: 4px; }
  .report-table-wrap { flex: 1; overflow: auto; padding: 0 12px; }
  .report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .report-table th, .report-table td {
    border: 1px solid var(--rule);
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
  }
  .report-table th {
    background: var(--paper-alt);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
  }
  .report-table td.report-col-task { text-align: start; }
  .site-log-close-share-row { display: flex; gap: 10px; padding: 0 14px 14px; }
  .site-log-close-btn, .site-log-share-btn {
    flex: 1;
    padding: 12px 8px;
    border-radius: 10px;
    border: none;
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .site-log-close-btn { background: var(--accent); color: var(--accent-contrast); }
  .report-close-btn {
    display: block;
    margin: 10px auto 14px;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .report-close-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .site-log-share-btn { background: var(--report-green); color: #fdfbf5; }
  .site-log-share-btn:disabled, .site-log-close-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .site-log-preview-btn {
    margin: 0 14px 10px;
    padding: 12px 8px;
    border-radius: 10px;
    border: none;
    background: var(--paper-alt);
    color: var(--ink);
    border: 1px solid var(--rule);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
  }
  /* Sits at the top-left of the project name/logo row (.sheet-title-wrap,
     which is position:relative for exactly this) instead of pinned to the
     viewport - it scrolls away with the rest of the page like everything
     else here, not floating above it. */
  .completed-tasks-toggle-btn {
    position: absolute;
    left: -36px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: 120px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow);
  }
  .completed-tasks-toggle-btn[hidden] { display: none; }
  .site-log-periodic-btn {
    margin: 0 14px 14px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .company-dashboard-wrap { flex: 1; overflow-y: auto; padding: 10px 14px 20px; }
  .company-dashboard-empty { color: var(--ink-muted); text-align: center; padding: 30px 10px; font-size: 0.9rem; }
  .company-dashboard-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--paper-alt);
    cursor: pointer;
  }
  .company-dashboard-name { font-family: "Rubik", "Assistant", sans-serif; font-weight: 700; font-size: 0.95rem; }
  .company-dashboard-status { font-size: 0.82rem; font-weight: 600; }
  .company-dashboard-status-closed { color: #2f7a3d; }
  .company-dashboard-status-open { color: #a6650f; }
  .company-dashboard-status-missing { color: var(--danger); }
  .company-dashboard-last { font-size: 0.72rem; color: var(--ink-muted); }
  .site-log-preview-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--paper-alt); padding: 16px 10px; }
  .site-log-preview-wrap .pdf-doc {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 10px;
    margin: 0 auto;
    box-shadow: 0 2px 10px var(--shadow);
  }
  .site-log-preview-wrap .pdf-doc-table { font-size: 0.62rem; table-layout: fixed; }
  .site-log-preview-wrap .pdf-doc-table th, .site-log-preview-wrap .pdf-doc-table td {
    padding: 5px 2px;
    word-break: break-word;
  }
  .site-log-preview-wrap .pdf-doc-title { font-size: 1.2rem; }
  .site-log-preview-wrap .pdf-doc-logo { width: 40px; height: 40px; }
  .site-log-preview-wrap .pdf-doc-work-row-image { width: 44px; height: 44px; }
  .site-log-copy-prev-btn {
    margin: 10px 14px 14px;
    padding: 12px;
    border-radius: 10px;
    border: 1px dashed var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
  }
  .office-report-options-actions {
    display: flex;
    gap: 8px;
    padding: 8px 14px 6px;
    flex-shrink: 0;
  }
  .office-report-options-actions .site-log-copy-prev-btn {
    flex: 1;
    margin: 0;
    padding: 10px 4px;
    font-size: 0.72rem;
  }
  .site-log-attendance-wrap { flex: 1; overflow: auto; padding: 12px; }
  .site-log-attendance-columns { display: flex; gap: 8px; align-items: flex-start; min-width: max-content; }
  #siteLogAttendanceColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
  }
  #siteLogAttendanceColumns .site-log-col { width: auto; min-width: 0; }
  #siteLogToolsColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
  }
  #siteLogToolsColumns .site-log-col { width: auto; min-width: 0; }
  .site-log-col { display: flex; flex-direction: column; width: 110px; flex-shrink: 0; }
  .site-log-tool-value-row { display: flex; gap: 4px; }
  .site-log-tool-qty-input {
    width: 34px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 6px 2px;
    font-size: 0.85rem;
    text-align: center;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
  }
  .site-log-tool-note-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 6px;
    font-size: 0.85rem;
    text-align: right;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
  }
  .site-log-col-header {
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px 8px 0 0;
  }
  .site-log-col-body {
    border: 1px solid var(--rule);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
  }
  .site-log-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 0.8rem;
    padding: 5px 7px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    word-break: break-word;
  }
  .site-log-entry-remove {
    border: none;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
  }
  .site-log-add-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    font-size: 0.8rem;
    border: 1px solid var(--accent);
    border-radius: 6px;
    font-family: inherit;
  }
  .site-log-add-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-self: center;
    overflow: hidden;
    padding: 0;
  }
  .site-log-add-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .site-log-procurement-wrap { flex: 1; overflow: auto; padding: 14px; }
  .site-log-procurement-header {
    display: flex;
    gap: 6px;
    padding: 0 34px 6px 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
  }
  .site-log-procurement-header span:nth-child(1) { flex: 2; }
  .site-log-procurement-header span:nth-child(2) { flex: 1; }
  .site-log-procurement-header span:nth-child(3) { flex: 2; }
  .site-log-procurement-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
  }
  .site-log-procurement-row input, .office-procurement-project .site-log-procurement-row span {
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
    min-width: 0;
  }
  .site-log-procurement-item { flex: 2; }
  .site-log-procurement-quantity { flex: 1; }
  .site-log-procurement-supplier { flex: 2; }
  .purchased-mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    background: transparent;
    flex-shrink: 0;
    padding: 0;
    cursor: default;
  }
  .purchased-mark.clickable { cursor: pointer; }
  .purchased-mark.purchased {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 6px #22c55e;
  }
  .office-procurement-project { margin-bottom: 18px; }
  .office-procurement-project-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
  }
  .site-log-procurement-row-remove {
    border: none;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 22px;
  }
  .site-log-list-wrap { flex: 1; overflow: auto; padding: 14px; }
  .site-log-list { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 0 auto; }
  .site-log-list .site-log-add-btn { align-self: center; margin-top: 2px; }
  .site-log-work-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
  }
  .site-log-work-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
  .site-log-work-text { font-size: 0.82rem; flex: 1; word-break: break-word; }
  .site-log-work-attach-row { display: flex; gap: 6px; align-self: flex-start; }
  .site-log-work-attach-btn {
    border: 1px dashed var(--rule);
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
  }
  .site-log-work-attachment-preview { display: flex; align-items: center; gap: 8px; }
  .site-log-work-attachment-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--rule); flex-shrink: 0; }
  .site-log-work-attachment-name {
    font-size: 0.72rem;
    color: var(--ink-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-log-work-attachment-remove { border: none; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 0.72rem; flex-shrink: 0; }
  .site-log-number-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 4px;
    font-size: 0.9rem;
    text-align: center;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
  }
  .report-cell-btn {
    width: 100%;
    min-height: 28px;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px;
    text-align: inherit;
  }
  .report-cell-input {
    width: 100%;
    min-height: 28px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    padding: 2px;
    box-sizing: border-box;
  }
  .report-status-mark { display: inline-block; width: 20px; height: 18px; margin: 0 auto; color: var(--ink); }
  .report-status-mark svg { width: 100%; height: 100%; display: block; }
  .report-priority-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
  }
  .report-priority-tag.urgent { background: var(--high); color: #fff; }
  .report-priority-tag.regular { background: var(--low); color: #fff; }
  .pdf-doc-wrap { background: #ffffff; }
  .pdf-doc {
    width: 794px;
    box-sizing: border-box;
    padding: 40px 48px;
    background: #ffffff;
    color: #2c2a24;
    font-family: "Assistant", "Segoe UI", Tahoma, Arial, sans-serif;
  }
  .pdf-doc-title {
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    text-align: center;
    color: #35618f;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 3px solid #35618f;
  }
  .pdf-doc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 3px solid #35618f;
  }
  .pdf-doc-header .pdf-doc-title { flex: 1; margin: 0; padding: 0; border: none; }
  .pdf-doc-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
  .pdf-doc-info-title { font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 4px; }
  .pdf-doc-info-date { color: #6b6558; font-size: 0.95rem; text-align: center; margin-bottom: 8px; }
  .pdf-doc-participants { font-size: 0.95rem; margin-bottom: 22px; color: #4a463c; }
  .pdf-doc-participants strong { color: #2c2a24; }
  .pdf-doc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .pdf-doc-table th, .pdf-doc-table td {
    border: 1px solid #cfc8b4;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
  }
  .pdf-doc-table th {
    background: #efe9d8;
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
  }
  .pdf-doc-table td.pdf-doc-col-task { text-align: start; }
  .pdf-doc-table-half { font-size: 0.425rem; }
  .pdf-doc-table-half th, .pdf-doc-table-half td { padding: 4px 3px; }
  .pdf-doc-table-half th { font-size: 0.4rem; }
  .pdf-doc-table-procurement-general { font-size: 0.32rem; }
  .pdf-doc-table-procurement-general th, .pdf-doc-table-procurement-general td { padding: 3px 2px; }
  .pdf-doc-table-procurement-general th { font-size: 0.3rem; }
  .pdf-doc-empty { color: #8a8471; padding: 18px; }
  .pdf-doc-periodic-section { margin-top: 30px; border-top: 3px dashed #cfc8b4; }
  .pdf-doc-footer {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #cfc8b4;
    font-size: 0.68rem;
    color: #8a8471;
    text-align: center;
  }
  .pdf-doc-priority-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
  }
  .pdf-doc-priority-tag.urgent { background: #c0392b; }
  .pdf-doc-priority-tag.regular { background: #d9722a; }
  .pdf-doc-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
  .pdf-doc-section-heading {
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #35618f;
    margin: 22px 0 8px;
  }
  .pdf-doc-contractors-list { font-size: 0.88rem; }
  .pdf-doc-contractor-line { padding: 5px 0; border-bottom: 1px solid #efe9d8; }
  .pdf-doc-works-frame {
    border: 2px solid #35618f;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 22px;
  }
  .pdf-doc-works-frame-title {
    text-align: center;
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #35618f;
    margin-bottom: 10px;
  }
  .pdf-doc-work-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #efe9d8;
  }
  .pdf-doc-work-row:last-child { border-bottom: none; }
  .pdf-doc-work-row-text { flex: 1; font-size: 0.85rem; }
  .pdf-doc-work-row-image { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
  .report-priority-popup {
    position: absolute;
    z-index: 30;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 8px 20px var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .report-priority-popup button {
    border: none;
    background: var(--paper);
    color: var(--ink);
    padding: 8px 16px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .report-priority-popup button:first-child { border-bottom: 1px solid var(--rule); }
  .report-priority-popup button:hover { background: var(--paper-alt); }
  .report-image-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }
  .report-image-placeholder {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    font-size: 1.1rem;
    opacity: 0.4;
    cursor: pointer;
  }
  .report-add-row-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    margin: 0 auto;
  }
  .notebook-date-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .office-report-head-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
  }
  .office-report-head-date .today-btn { font-size: 0.62rem; padding: 2px 6px; }
  .office-report-head-stack .report-head-title { flex: 0 1 auto; font-size: 0.85rem; }
  .report-head-spacer { width: 36px; flex-shrink: 0; }
  /* opens the לוח שנה calendar (native app only), next to the date */
  .cal-app-btn {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .cal-app-btn[hidden] { display: none; }
  /* always on the date's right: first in RTL, last in LTR languages */
  html[dir="ltr"] .cal-app-btn { order: 3; }
  .cal-app-btn img { width: 100%; height: 100%; display: block; }
  /* the calendar icon shows today's weekday and day number (blank icon +
     text, refreshed by updateLiveCalendarIcons) */
  .cal-live-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
  }
  .cal-live-wd, .cal-live-day {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
  }
  .cal-live-wd { top: 9%; font-size: 17cqw; color: #f1e9d6; }
  .cal-live-day { top: 40%; font-size: 46cqw; color: #c9512c; letter-spacing: -0.02em; }
  .date-click-area {
    position: relative;
    display: inline-flex;
    border-radius: 6px;
  }
  .date-click-area:hover { background: var(--paper-alt); }
  .notebook-date {
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 2px 4px;
    pointer-events: none;
  }
  .date-input-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  .today-btn {
    font-size: 0.72rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: none;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
  }
  .notebook-app-name {
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    pointer-events: none;
  }
  .notebook-app-name .app-name-i { color: #bf4e30; }
  .notebook-app-name .app-name-rest { color: #44563c; }
  .head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }
  .sheets-search-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }
  .sheets-search {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 1px;
  }
  .head-office-icon-btn img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }
  .head-office-icon-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .head-office-icon-btn[hidden] { display: none; }
  .menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: none;
    color: var(--ink);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-btn:hover { background: var(--paper-alt); }
  #menuBtn { padding: 0; overflow: hidden; }
  #menuBtn img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }

  .menu-panel {
    position: absolute;
    top: 42px;
    inset-inline-end: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 10px 26px var(--shadow);
    padding: 10px;
    width: 200px;
    z-index: 30;
  }
  .menu-panel[hidden] { display: none; }

  .search-panel {
    position: absolute;
    top: 40px;
    inset-inline-end: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 10px 26px var(--shadow);
    padding: 10px;
    width: 260px;
    max-width: calc(100vw - 40px);
    z-index: 6;
  }
  .search-panel[hidden] { display: none; }
  .search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-alt);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-results {
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
  }
  .search-empty {
    color: var(--ink-muted);
    font-size: 0.82rem;
    padding: 8px 2px;
  }
  .search-result {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 8px;
    cursor: pointer;
    font-family: inherit;
  }
  .search-result:hover { background: var(--paper-alt); }
  .search-result-text {
    display: block;
    color: var(--ink);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-result-meta {
    display: block;
    color: var(--ink-muted);
    font-size: 0.72rem;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .menu-section + .menu-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
  }
  .menu-label {
    font-size: 0.72rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .menu-copyright {
    font-size: 0.68rem;
    color: var(--ink-muted);
    text-align: center;
    padding: 10px 0 2px;
    direction: ltr;
  }
  .menu-panel .filters { display: flex; flex-direction: column; gap: 4px; }
  .menu-panel button {
    width: 100%;
    text-align: right;
    padding: 7px 10px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.88rem;
    font-family: inherit;
  }
  .menu-panel button:hover { background: var(--paper-alt); }
  .menu-panel button.active {
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .menu-panel button.danger { color: var(--danger); }
  .reminder-select {
    width: 100%;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
  }
  .reminder-status {
    font-size: 0.72rem;
    color: var(--ink-muted);
    margin: 6px 0 0;
  }
  .reminder-status[hidden] { display: none; }

  .sheets-row {
    background: var(--paper-alt);
    padding: 8px 10px 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }
  .sheets-bars-stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 4px;
  }
  .sheets-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sheets-bar::-webkit-scrollbar { display: none; }
  .sheet-tab {
    flex-shrink: 0;
    padding: 7px 16px 7px 22px;
    background: var(--tab-inactive);
    color: var(--ink-muted);
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    border: 2px solid var(--rule);
    border-radius: 5px 5px 0 0;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .sheet-tab-label {
    display: inline-block;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-flex;
    gap: 24px;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-segment, 0)); }
  }
  .task-text-label {
    display: inline-block;
    white-space: nowrap;
  }
  .sheet-tab:not(:first-child) {
    margin-right: -10px;
  }
  .move-task-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }
  .move-task-mode button {
    flex: 1;
    min-width: 80px;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }
  .move-task-mode button.danger-btn {
    color: var(--danger);
    border-color: var(--danger);
  }
  .move-task-projects {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 14px;
  }
  .move-task-projects button {
    width: 100%;
    text-align: right;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--paper-alt);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
  }
  .move-task-projects button:hover { background: var(--rule); }
  .move-task-empty {
    color: var(--ink-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 10px 0;
  }
  .convert-to-note-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .convert-to-note-btn[hidden] { display: none; }
  .danger-text-btn { color: var(--danger); border-color: var(--danger); }
  .task-reminder-time-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
  .task-reminder-time-row[hidden] { display: none; }
  .task-reminder-time-row input[type="time"],
  .task-reminder-time-row input[type="date"] {
    flex: 1;
    min-width: 0;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.9rem;
  }
  .task-reminder-time-row button {
    padding: 9px 16px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .sheet-tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink);
    z-index: 1;
  }
  .sheet-tab.active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--paper);
    z-index: 2;
  }
  .sheet-tab.ended { background: rgba(53, 97, 143, 0.16); }
  .sheet-tab.ended:hover:not(.active) { background: rgba(53, 97, 143, 0.24); }
  .sheet-tab.active.ended { background: rgba(53, 97, 143, 0.24); border-bottom-color: rgba(53, 97, 143, 0.24); }
  .sheet-tab input.rename-input {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 80px;
    outline: none;
    border-bottom: 1px solid currentColor;
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }
  .add-sheet-tab {
    color: var(--accent);
    font-weight: 700;
    font-family: inherit;
  }
  .add-sheet-tab:hover {
    color: var(--accent);
  }
  .add-sheet-tab img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
    display: inline-block;
  }

  .ruled-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: repeating-linear-gradient(
      var(--paper) 0,
      var(--paper) 35px,
      var(--rule) 35px,
      var(--rule) 36px
    );
    background-origin: content-box;
    background-clip: content-box;
    padding: 20px 22px 4px 44px;
    backface-visibility: hidden;
  }
  .page-turn-clone {
    position: absolute;
    margin: 0;
    z-index: 5;
    pointer-events: none;
    background-color: var(--paper);
  }
  .page-turn-clone.page-turn-out-fwd {
    animation: page-turn-out-fwd 0.42s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
    transform-origin: right center;
  }
  .page-turn-clone.page-turn-out-bwd {
    animation: page-turn-out-bwd 0.42s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
    transform-origin: left center;
  }
  @keyframes page-turn-out-fwd {
    0%   { transform: perspective(1400px) rotateY(0deg) scaleY(1) translateY(0); opacity: 1; box-shadow: none; }
    40%  { transform: perspective(1400px) rotateY(22deg) scaleY(1.05) translateY(-3%); opacity: 1; box-shadow: 10px 6px 18px var(--shadow); }
    100% { transform: perspective(1400px) rotateY(95deg) scaleY(1) translateY(0); opacity: 0; box-shadow: none; }
  }
  @keyframes page-turn-out-bwd {
    0%   { transform: perspective(1400px) rotateY(0deg) scaleY(1) translateY(0); opacity: 1; box-shadow: none; }
    40%  { transform: perspective(1400px) rotateY(-22deg) scaleY(1.05) translateY(-3%); opacity: 1; box-shadow: -10px 6px 18px var(--shadow); }
    100% { transform: perspective(1400px) rotateY(-95deg) scaleY(1) translateY(0); opacity: 0; box-shadow: none; }
  }
  .ruled-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 39px;
    width: 2px;
    background: var(--margin);
    opacity: 0.55;
  }

  .sheet-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: ltr;
  }
  .sheet-title-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .sheet-title {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    height: 36px;
    line-height: 36px;
  }
  /* flex: 0 1 auto (not 1) - a new/short list sizes to its own content
     (the add-row sits right after the last task, near the top, not
     pinned to the bottom of an empty screen), and only shrinks to fit
     .ruled-body's bounded space - triggering its own scroll - once there
     are actually enough tasks to need it, with the add-row then staying
     put right below it. */
  ol.task-list {
    /* Needed so each row's offsetTop/offsetParent resolves relative to
       this element (not .ruled-body further up) - the reminder-icon
       layer's own JS positioning math (see
       syncTaskReminderIconsLayerBounds) depends on that. */
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    /* Left padding only: the urgent-task dot (.urgent-toggle.urgent)
       deliberately bleeds past its own small box via transform:scale and
       a glowing box-shadow, and sits at each row's far left edge - since
       setting overflow-y here also makes overflow-x compute to clipping
       (not visible) per the CSS spec, without this reserved space that
       bleed gets clipped flat instead of rendering as a full circle.
       Generous on purpose - 10px still clipped it. */
    padding: 0 0 0 20px;
  }
  li.task {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .row-lead {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .row-mark {
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
  }
  .row-mark svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  li.task.done { cursor: pointer; }
  li.task.done .task-text {
    color: var(--ink-muted);
  }
  li.task.done .row-mark { opacity: 0.5; }
  li.task.head-office-task .task-text { color: var(--danger, #b5482f); }
  .note-time {
    flex-shrink: 0;
    min-width: 55px;
    text-align: left;
    align-self: flex-end;
    line-height: 1;
    padding-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .urgent-toggle {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .urgent-toggle svg { width: 100%; height: 100%; display: block; }
  .urgent-toggle.urgent {
    transform: scale(1.35);
    border-radius: 50%;
    background: var(--danger);
    animation: urgent-blink 1.1s ease-in-out infinite;
  }
  li.task.task-highlight {
    animation: task-highlight-flash 2.2s ease-out;
  }
  @keyframes task-highlight-flash {
    0% { background: var(--accent); }
    100% { background: transparent; }
  }
  @keyframes urgent-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(182, 71, 63, 0.7); }
    50% { opacity: 0.45; box-shadow: 0 0 6px 2px rgba(182, 71, 63, 0.9); }
  }
  .task-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 16px;
  }
  .task-text-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-bottom: 1px solid var(--accent);
    background: transparent;
    font: inherit;
    color: var(--ink);
    outline: none;
    padding: 0;
    line-height: 16px;
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }
  .task-actions {
    transform: translateX(-20px);
  }
  .task-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    color: var(--ink-muted);
    opacity: 0.55;
    padding: 12px;
    margin: -12px;
    flex-shrink: 0;
  }
  .task-actions button:hover { opacity: 1; color: var(--danger); }
  /* Sits outside ol.task-list entirely (a sibling, not a descendant) so
     it's never subject to that element's own overflow clipping (needed
     for its vertical scrollbar) - the only way to let its icons bleed
     into .ruled-body's own left padding, right at the page's edge,
     instead of being boxed in whatever space the task list reserves for
     itself. Its own top/height are synced in JS to ol.task-list's actual
     rendered position every render (the surrounding layout shifts - the
     title row, completed-toggle, empty state - so that can't be a fixed
     CSS value), and it's translated on scroll to stay locked to each
     task's row as the list scrolls past underneath it. */
  .task-reminder-icons-layer {
    position: absolute;
    left: 0;
    width: 44px;
    overflow: hidden;
    pointer-events: none;
  }
  .task-reminder-indicator {
    position: absolute;
    left: 8px;
    width: 27px;
    height: 27px;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
  }
  .task-reminder-indicator img { width: 100%; height: 100%; display: block; object-fit: contain; }
  /* a task with both a calendar link and a reminder: two smaller icons */
  .task-reminder-indicator.is-pair-cal { left: 1px; width: 22px; height: 22px; }
  .task-reminder-indicator.is-pair-alarm { left: 24px; width: 19px; height: 19px; }
  .row-date {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .add-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 36px;
    line-height: 36px;
  }
  .add-row[hidden] { display: none; }
  li.task.readonly { cursor: default; }
  li.task.readonly.head-office-notification-task { cursor: pointer; }
  .add-row .row-mark { opacity: 0.4; }
  .add-row input[type="text"] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--ink);
    outline: none;
    padding: 0;
    line-height: 16px;
  }
  .add-row input[type="text"]::placeholder { color: var(--ink-muted); }
  .add-row button.add-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
  }
  .add-row button.add-btn img,
  .sheet-reports-add-btn img,
  .report-add-row-btn img,
  #libraryAddBtn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .empty-state {
    color: var(--ink-muted);
    padding: 20px 0 16px;
    font-size: 0.88rem;
    text-align: center;
  }
  .empty-state-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    opacity: 0.45;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 40;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-box {
    background: var(--paper);
    border-radius: 12px;
    box-shadow: 0 20px 50px var(--shadow);
    padding: 20px;
    width: 100%;
    max-width: 320px;
  }
  /* simple date picker for the native app (the WebView stopped opening its
     own one for the invisible date inputs) */
  .date-pick-box { max-width: 300px; padding: 14px; }
  .date-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .date-pick-title {
    font-family: "Rubik", "Assistant", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
  }
  .date-pick-nav {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
  }
  html[dir="ltr"] .date-pick-nav { transform: scaleX(-1); }
  .date-pick-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 12px;
    text-align: center;
  }
  .date-pick-wd { font-size: 0.75rem; color: var(--ink-muted); padding: 4px 0; }
  .date-pick-day {
    aspect-ratio: 1;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0;
  }
  .date-pick-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
  .date-pick-day.is-selected { background: var(--accent); color: var(--accent-contrast); }
  .date-pick-day:disabled { opacity: 0.3; cursor: default; }
  /* task long-press menu: a row of icon buttons (move, copy, reminder,
     calendar reminder, chat quote); the curved-arrow badge marks the ones
     that jump to another screen */
  .task-menu-icons {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    justify-content: center;
    gap: 14px 26px;
    margin-bottom: 16px;
  }
  .task-menu-icon {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: none;
    cursor: pointer;
  }
  .task-menu-icon[hidden] { display: none; }
  .task-menu-icon img { width: 100%; height: 100%; display: block; border-radius: 12px; object-fit: contain; }
  .task-icon-arrow {
    position: absolute;
    bottom: -5px;
    inset-inline-start: -5px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 3px var(--shadow);
  }
  /* calendar events linked to an ITASK task */
  .cal-event-block.cal-itask { box-shadow: inset 3px 0 0 #d4a017; font-weight: 700; }
  html[dir="rtl"] .cal-event-block.cal-itask { box-shadow: inset -3px 0 0 #d4a017; }
  .cal-chip.cal-itask { font-weight: 700; }
  .cal-agenda-item.cal-itask .cal-agenda-dot { box-shadow: 0 0 0 2px #d4a017; }
  /* Head Office "הזנת נתונים": a name list inside each folder */
  .office-data-list { padding: 12px 16px; overflow-y: auto; }
  .office-data-list[hidden] { display: none; }
  .office-data-list { display: flex; flex-direction: column; gap: 6px; }
  .office-data-entry > span:first-child { display: flex; flex-direction: column; gap: 1px; }
  .office-data-name { font-weight: 600; font-size: 0.9rem; }
  .office-data-idnum { font-size: 0.75rem; color: var(--ink-muted); }
  .office-data-form { display: flex; align-items: flex-end; gap: 8px; }
  .office-data-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .office-data-field-name { flex: 3; }
  .office-data-field-id { flex: 2; }
  .office-data-field .auth-input { width: 100%; margin: 0; }
  .office-data-field-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
  .office-data-ok {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1.1rem;
    cursor: pointer;
  }
  /* .library-grid's display:grid would otherwise override [hidden] */
  .library-grid[hidden] { display: none; }
  .image-viewer {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(10, 10, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  }
  .image-viewer[hidden] { display: none; }
  .image-viewer { touch-action: none; overflow: hidden; }
  .image-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
  .image-viewer-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    inset-inline-end: 12px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
  }
  .cal-invite-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 14px;
  }
  .cal-invite-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-alt);
    font-size: 0.92rem;
    cursor: pointer;
  }
  .cal-invite-row input { width: 18px; height: 18px; margin: 0; flex: none; }
  .modal-message {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink);
  }
  .modal-submessage {
    margin: 14px 0 8px;
    font-size: 0.8rem;
    color: var(--ink-muted);
  }
  .modal-actions {
    display: flex;
    gap: 10px;
  }
  .modal-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .modal-btn-yes {
    border: none;
    background: var(--danger);
    color: var(--accent-contrast);
  }
  .modal-btn-no {
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
  }
  .modal-btn-primary {
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .splash-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(160deg, #3f6d9c 0%, #2c4f78 100%);
    transition: opacity 0.5s ease;
  }
  .splash-screen.splash-hide {
    opacity: 0;
    pointer-events: none;
  }
  .splash-screen[hidden] { display: none; }
  .splash-logo {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    animation: splash-pop 0.5s ease;
  }
  .splash-app-name {
    font-family: "Rubik", "Assistant", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fbf7ee;
    animation: splash-pop 0.5s ease;
  }
  @keyframes splash-pop {
    from { transform: scale(0.75); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .auth-gate {
    position: fixed;
    inset: 0;
    background: var(--desk);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 30;
  }
  .auth-gate[hidden] { display: none; }
  .auth-box {
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 20px 50px var(--shadow);
    padding: 28px 24px;
    width: 100%;
    max-width: 340px;
  }
  .auth-title {
    font-family: "Rubik", "Assistant", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px;
    text-align: center;
    color: var(--ink);
  }
  .auth-subtitle {
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
    margin: 0 0 20px;
  }
  .auth-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-alt);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    outline: none;
  }
  .auth-input:focus { border-color: var(--accent); }
  .phone-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    margin-bottom: 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-alt);
    direction: ltr;
  }
  .phone-input-group:focus-within { border-color: var(--accent); }
  .phone-prefix {
    color: var(--ink-muted);
    font-weight: 600;
    padding-inline-end: 6px;
    flex-shrink: 0;
  }
  .phone-number-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: 11px 0;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .auth-error {
    color: var(--danger);
    font-size: 0.83rem;
    margin: 0 0 10px;
    text-align: center;
  }
  .auth-error[hidden] { display: none; }
  .auth-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
  }
  .auth-btn {
    flex: 1;
    padding: 11px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .auth-btn-primary {
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .auth-btn-secondary {
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
  }
  .auth-btn[disabled] { opacity: 0.6; cursor: default; }

  @media (max-width: 420px) {
    .sheet-tab { max-width: 100px; }
    .notebook-date { font-size: 0.95rem; }
  }
  /* לוח שנה: a full calendar over the phone's own calendars (Google,
     Samsung, Outlook if its app syncs calendars), via the native
     ItaskCalendar plugin. Paper colours to match the rest of the app. */
  .cal-view {
    position: fixed;
    inset: 0;
    z-index: 36;
    background: var(--desk);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cal-view[hidden] { display: none; }
  .cal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 6px;
  }
  .cal-title {
    flex: 1;
    margin: 0;
    font-family: "Rubik", "Assistant", sans-serif;
    font-size: 1.2rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cal-icon-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
  .cal-pick-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--danger);
    color: var(--accent-contrast);
    font-size: 0.88rem;
    font-weight: 600;
  }
  .cal-pick-banner[hidden] { display: none; }
  .cal-pick-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .cal-modes {
    display: flex;
    gap: 4px;
    padding: 0 10px 8px;
  }
  .cal-mode-btn {
    flex: 1;
    padding: 7px 0;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--tab-inactive);
    color: var(--ink-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
  }
  .cal-mode-btn.active {
    background: var(--paper);
    color: var(--accent);
    border-color: var(--accent);
  }
  .cal-body {
    flex: 1;
    min-height: 0;
    margin: 0 8px 8px;
    background: var(--paper);
    border-radius: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .cal-message {
    margin: auto;
    padding: 24px;
    text-align: center;
    color: var(--ink-muted);
    line-height: 1.6;
  }
  .cal-message button { margin-top: 12px; }
  .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--rule);
    background: var(--paper-alt);
  }
  .cal-weekdays div {
    text-align: center;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-muted);
  }
  .cal-month-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    min-height: 0;
  }
  .cal-day-cell {
    border-inline-start: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 2px;
    overflow: hidden;
    cursor: pointer;
    min-width: 0;
  }
  .cal-day-cell:nth-child(7n+1) { border-inline-start: none; }
  .cal-day-cell.other-month { background: rgba(0, 0, 0, 0.03); }
  .cal-day-cell.other-month .cal-day-num { color: var(--ink-muted); opacity: 0.6; }
  .cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
  }
  .cal-day-cell.today .cal-day-num,
  .cal-col-head.today .cal-col-num { background: var(--danger); color: var(--accent-contrast); }
  .cal-chip {
    display: block;
    margin-top: 1px;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 0.66rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }
  .cal-chip.timed {
    background: none;
    color: var(--ink);
    padding-inline-start: 0;
  }
  .cal-chip.timed::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chip-color, var(--accent));
    margin-inline-end: 3px;
    vertical-align: middle;
  }
  .cal-more { font-size: 0.65rem; color: var(--ink-muted); padding: 0 3px; text-align: right; }
  .cal-cols-head {
    display: flex;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-alt);
  }
  .cal-gutter { flex: none; width: 42px; }
  .cal-col-head {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
  }
  .cal-col-name { font-size: 0.72rem; font-weight: 700; color: var(--ink-muted); }
  .cal-col-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 700;
    color: var(--ink);
  }
  .cal-allday-row {
    display: flex;
    border-bottom: 1px solid var(--rule);
    min-height: 4px;
  }
  .cal-allday-cell { flex: 1; min-width: 0; padding: 1px; }
  .cal-time-scroll { flex: 1; overflow-y: auto; position: relative; }
  .cal-time-grid { display: flex; position: relative; }
  .cal-hours { flex: none; width: 42px; }
  .cal-hour-label {
    height: 48px;
    font-size: 0.65rem;
    color: var(--ink-muted);
    text-align: center;
    transform: translateY(-6px);
  }
  .cal-col {
    flex: 1;
    min-width: 0;
    position: relative;
    border-inline-start: 1px solid var(--rule);
    background-image: repeating-linear-gradient(var(--rule) 0, var(--rule) 1px, transparent 1px, transparent 48px);
  }
  .cal-event-block {
    position: absolute;
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 0.68rem;
    line-height: 1.25;
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--danger);
    z-index: 2;
    pointer-events: none;
  }
  .cal-agenda { flex: 1; overflow-y: auto; padding: 4px 12px 70px; }
  .cal-agenda-day {
    font-weight: 700;
    color: var(--accent);
    margin: 12px 0 4px;
    font-size: 0.9rem;
  }
  .cal-agenda-day.today { color: var(--danger); }
  .cal-agenda-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
    cursor: pointer;
  }
  .cal-agenda-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
  .cal-agenda-time { flex: none; width: 82px; font-size: 0.8rem; color: var(--ink-muted); text-align: end; }
  .cal-agenda-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .cal-agenda-loc { font-size: 0.78rem; color: var(--ink-muted); }
  .cal-fab {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 14px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: none;
    background: var(--danger);
    color: var(--accent-contrast);
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: 0 4px 12px var(--shadow);
    cursor: pointer;
    z-index: 3;
  }
  .cal-form { display: flex; flex-direction: column; gap: 10px; }
  .cal-form label { font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
  .cal-form input[type="text"], .cal-form input[type="date"], .cal-form input[type="time"],
  .cal-form select, .cal-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
  }
  .cal-form textarea { min-height: 60px; resize: vertical; }
  .cal-form-row { display: flex; gap: 8px; }
  .cal-form-row > * { flex: 1; min-width: 0; }
  .cal-form [hidden] { display: none !important; }
  .cal-copy-projects { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .cal-copy-projects[hidden] { display: none; }
  .cal-copy-projects button {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-alt);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
  }
  .cal-form-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink); }
  .cal-form-note { font-size: 0.78rem; color: var(--ink-muted); margin: 0; }
  .cal-editor-box { max-width: 380px; max-height: 88vh; overflow-y: auto; }
  .cal-cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
  .cal-cal-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; }
  .cal-cal-name { flex: 1; min-width: 0; }
  .cal-cal-account { font-size: 0.75rem; color: var(--ink-muted); }

  /* Voice commands (src/app/14b-voice-commands.js) */
  .add-row button.add-btn.voice-btn { background: transparent; color: var(--accent); }
  .add-row button.add-btn.voice-btn svg { width: 20px; height: 20px; }
  .add-row button.add-btn[hidden] { display: none; }
  .voice-ai-row { font-size: 0.8rem; }

  /* Library document scan (src/app/07b-library-scan.js) */
  .scan-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 42vh; overflow-y: auto; }
  .scan-pages:empty { display: none; }
  .scan-page { position: relative; border: 1px solid var(--rule); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; overflow: hidden; }
  .scan-page canvas { max-width: 100%; max-height: 100%; display: block; }
  .scan-page-num { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; background: rgba(0,0,0,0.55); color: #fff; border-radius: 8px; padding: 0 6px; }
  .scan-page-btn { position: absolute; top: 3px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.8rem; padding: 0; cursor: pointer; }
  .scan-page-rotate { left: 3px; }
  .scan-page-del { right: 3px; }
  .scan-empty { margin: 0; font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
  .scan-empty[hidden] { display: none; }
  .scan-page { cursor: pointer; }
  .scan-page-edit { pointer-events: none; display: flex; align-items: center; justify-content: center; }
  .scan-editor { position: fixed; inset: 0; z-index: 42; background: #1d1c1a; display: flex; flex-direction: column; }
  .scan-editor[hidden] { display: none; }
  .scan-editor-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; touch-action: none; }
  .scan-editor-stage canvas { max-width: 100%; max-height: 100%; display: block; }
  .scan-editor-quad { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
  .scan-editor-quad polygon { fill: rgba(53, 97, 143, 0.18); stroke: #4fa3ff; stroke-width: 2; }
  .scan-handle { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(79, 163, 255, 0.35); border: 3px solid #4fa3ff; touch-action: none; cursor: grab; }
  .scan-handle[hidden] { display: none; }
  .scan-editor-tools { background: var(--paper); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
  .scan-editor-tabs, .scan-editor-bar, .scan-editor-actions { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .scan-editor-bar[hidden] { display: none; }
  .scan-editor-bar { font-size: 0.85rem; color: var(--ink-muted); min-height: 34px; }
  .scan-editor-bar input[type="range"] { flex: 1; max-width: 260px; }
  .scan-editor-tab, .scan-filter-btn, .scan-editor-small { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; }
  .scan-editor-tab.active, .scan-filter-btn.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .scan-editor-actions .modal-btn { flex: 1; }

  /* Work plan - Gantt (src/app/12b-work-plan.js) */
  .modal-btn-danger { color: var(--danger); }
  .modal-btn-danger[hidden] { display: none; }
  .wp-field { display: flex; flex-direction: column; gap: 6px; }
  .wp-field[hidden] { display: none; }
  .wp-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; padding: 0 12px 6px; flex-shrink: 0; }
  .wp-seg { flex-shrink: 0; }
  .wp-small-btn { white-space: nowrap; }
  .wp-seg { display: flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
  .wp-zoom { border: none; background: transparent; color: var(--accent); font: inherit; font-weight: 700; font-size: 0.85rem; padding: 5px 12px; cursor: pointer; }
  .wp-zoom.on { background: var(--accent); color: var(--accent-contrast); }
  .wp-small-btn { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 5px 10px; font: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
  .wp-nav { display: flex; justify-content: center; align-items: center; gap: 14px; font-weight: 700; font-size: 0.92rem; padding: 0 0 6px; flex-shrink: 0; }
  .wp-nav.wp-nav-off .wp-arrow { visibility: hidden; }
  .wp-arrow { border: none; background: transparent; color: var(--accent); font-size: 1.4rem; line-height: 1; padding: 0 8px; cursor: pointer; }
  .wp-late-banner { margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: #fdecea; color: var(--danger); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
  .wp-late-banner[hidden], .wp-empty[hidden], .wp-chart[hidden] { display: none; }
  .wp-empty { text-align: center; color: var(--ink-muted); padding: 30px 20px; margin: 0; }
  .wp-chart { flex: 1; min-height: 0; overflow: auto; margin: 0 6px; border-top: 1px solid var(--rule); background: #fff; }
  .wp-row { display: flex; min-height: 40px; border-bottom: 1px solid #edf2f8; cursor: pointer; width: max-content; min-width: 100%; }
  .wp-head-row { position: sticky; top: 0; z-index: 3; background: #fff; min-height: 28px; border-bottom: 1px solid var(--rule); cursor: default; }
  .wp-name { position: sticky; right: 0; z-index: 2; flex: none; width: 112px; padding: 4px 6px; background: #fff; border-left: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; font-size: 0.78rem; line-height: 1.2; overflow: hidden; }
  .wp-name-text { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .wp-name small { color: var(--ink-muted); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wp-name-head { font-weight: 700; }
  .wp-track { position: relative; flex: none; background-image: linear-gradient(to left, #f1f4f8 1px, transparent 1px); }
  .wp-sat { position: absolute; top: 0; bottom: 0; background: rgba(145, 138, 120, 0.08); }
  .wp-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e0703a; z-index: 1; }
  .wp-day { position: absolute; top: 7px; font-size: 0.68rem; color: var(--ink-muted); white-space: nowrap; text-align: center; }
  .wp-day-today { color: #e0703a; font-weight: 700; }
  .wp-bar { position: absolute; top: 9px; height: 22px; border-radius: 5px; overflow: hidden; display: flex; align-items: center; padding: 0 5px; color: #fff; font-size: 0.7rem; font-weight: 700; white-space: nowrap; z-index: 1; }
  /* the done part of a bar (from its start, the right in RTL): green */
  .wp-fill { position: absolute; top: 0; bottom: 0; right: 0; background: var(--plan-green); }
  .wp-bar-text { position: relative; overflow: hidden; text-overflow: ellipsis; }
  .wp-done { background: var(--plan-green); }
  /* in progress: sand; not started yet: the app's blue */
  .wp-prog { background: #b9b2a2; color: #3f3a30; }
  .wp-late { background: var(--plan-red); }
  .wp-todo { background: var(--accent); color: #fff; }
  .wp-group { position: sticky; right: 0; display: flex; justify-content: space-between; padding: 6px 10px; background: var(--paper-alt); font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
  .wp-group em { font-style: normal; color: var(--danger); font-size: 0.8rem; }
  /* ערסל: a hammock row (bold, its colour down the side, a slim summary
     bar with end ticks) and its activities, edged in its colour */
  /* קו בסיס: where an activity was planned, a thin grey bar along the
     bottom of its row; slipped ones say by how much */
  /* צפי: where an activity under way is heading, past its planned end */
  .wp-forecast { position: absolute; top: 10px; height: 26px; border: 2px dashed #c05023; border-right: none; border-radius: 5px 0 0 5px; background: repeating-linear-gradient(-45deg, rgba(192,80,35,0.12) 0 4px, transparent 4px 8px); z-index: 1; cursor: pointer; box-sizing: border-box; }
  .wp-forecast-label { color: #c05023 !important; font-weight: 700; }
  .wp-base-bar { position: absolute; bottom: 2px; height: 4px; border-radius: 2px; background: #8a8f98; opacity: 0.75; z-index: 0; }
  .wp-base-bar.wp-base-late { background: #c05023; }
  .wp-slip { color: #c05023 !important; font-weight: 800; }
  .wp-legend .wp-base-b { height: 4px !important; background: #8a8f98; align-self: center; }
  .wp-hammock-row { background: #f6f8fc; }
  .wp-hammock-row .wp-name { background: #f6f8fc; }
  .wp-hammock-name { border-right: 5px solid #2e4fb8; }
  .wp-hammock-name .wp-name-text { font-weight: 800; }
  .wp-in-hammock .wp-name { border-right: 3px solid transparent; padding-right: 12px; }
  .wp-hbar { position: absolute; top: 15px; height: 12px; border-radius: 2px; background: color-mix(in srgb, var(--hc, #2e4fb8) 30%, #fff); border: 1.5px solid var(--hc, #2e4fb8); box-sizing: border-box; z-index: 1; overflow: visible; display: flex; align-items: center; }
  .wp-hbar::before, .wp-hbar::after { content: ""; position: absolute; bottom: -7px; border: 5px solid transparent; border-top: 6px solid var(--hc, #2e4fb8); }
  .wp-hbar::before { right: -5.5px; }
  .wp-hbar::after { left: -5.5px; }
  .wp-hbar-fill { position: absolute; right: 0; top: 0; bottom: 0; background: var(--hc, #2e4fb8); }
  .wp-hbar-text { position: relative; margin: 0 auto; font-size: 0.62rem; font-weight: 800; color: #1d1d1d; background: rgba(255,255,255,0.85); padding: 0 3px; border-radius: 3px; line-height: 1.1; }
  .wp-hbar-late { box-shadow: 0 0 0 2px #e07b00; }
  .wp-hammock-none { position: sticky; right: 0; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; color: var(--ink-muted); background: #fafafa; border-bottom: 1px solid var(--rule); }
  .wp-hammock-pick { border-right: 6px solid var(--hc) !important; }
  .wp-hammock-pick.on { font-weight: 800; }
  .wp-hammock-name-input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 10px; }
  .wp-hammock-colors { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
  .wp-hammock-color { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #bbb; cursor: pointer; }
  .wp-hammock-color.on { box-shadow: 0 0 0 3px var(--ink); }
  .wp-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 0.75rem; color: var(--ink-muted); border-top: 1px solid var(--rule); flex-shrink: 0; }
  .wp-legend b { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-left: 4px; vertical-align: middle; }
  .wp-legend .wp-late-b { background: var(--plan-red); }
  .wp-legend .wp-today-b { background: #e0703a; width: 3px; }
  .wp-statuses { display: flex; gap: 6px; flex-wrap: wrap; }
  .wp-status { border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 14px; padding: 5px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
  .wp-status.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .wp-pdf { font-family: "Assistant", sans-serif; color: var(--ink); }
  .wp-pdf-title { font-size: 22px; margin: 0 0 4px; }
  .wp-pdf-range { color: var(--ink-muted); margin-bottom: 10px; font-weight: 700; }
  .wp-chart-pdf { overflow: visible; margin: 0; }
  .wp-chart-pdf .wp-row, .wp-chart-pdf .wp-name { position: static; }
  .wp-chart-pdf .wp-name { width: 112px; }
  .wp-head-week { min-height: 36px; }
  .wp-head-week .wp-day { top: 3px; white-space: pre-line; line-height: 1.2; font-weight: 700; }
  /* 7 footer icons: a little smaller so there's air between them on phones */
  .notebook-footer > button { width: 44px; height: 44px; flex-shrink: 0; }
  .task-plan-badge { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-left: 4px; flex-shrink: 0; }
  .wp-chart { position: relative; }
  .wp-deps { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; overflow: visible; }
  .wp-postpone-btn { align-self: flex-start; }
  .wp-postpone-btn[hidden], .wp-postpone-row[hidden], #workPlanCopyWeekBtn[hidden] { display: none; }
  .wp-postpone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; padding: 6px 8px; background: var(--paper-alt); border-radius: 8px; }
  .wp-postpone-row input[type="number"] { width: 64px; }
  .wp-diary-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 16px; }
  .wp-diary-row { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
  .wp-diary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .wp-diary-name { display: flex; flex-direction: column; min-width: 0; }
  .wp-diary-name small { color: var(--ink-muted); font-size: 0.75rem; }
  .wp-diary-name .wp-diary-late { color: var(--danger); font-weight: 700; }
  .wp-diary-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .wp-diary-clear { flex-shrink: 0; width: 24px; height: 24px; font-size: 0.75rem; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink-muted); cursor: pointer; padding: 0; }
  /* the % bar: green as far as it's done, the number on it; faded until it's marked that day */
  .wp-diary-pct { position: relative; width: 120px; flex-shrink: 0; height: 34px; border: 1.5px dashed var(--rule); border-radius: 9px; background: var(--paper); overflow: hidden; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
  .wp-diary-pct.set { border-style: solid; border-color: var(--plan-green); }
  .wp-diary-pct-fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; background: var(--plan-green); opacity: 0.35; transition: width 0.08s; }
  .wp-diary-pct.set .wp-diary-pct-fill { opacity: 0.75; }
  .wp-diary-pct-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
  .wp-diary-pct:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .wp-diary-reason { border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.85rem; }
  .wp-pdf-result-done { color: var(--plan-green); font-weight: 700; }
  .wp-pdf-result-partial { color: #a8701a; font-weight: 700; }
  .wp-pdf-result-not { color: var(--plan-red); font-weight: 700; }
  .wp-pdf-summary { font-weight: 700; font-size: 1rem; margin: 10px 0; }
  #workPlanNotifMenuSection .cal-form-check { font-size: 0.85rem; padding: 2px 0; }
  /* "מתוכנן מול ביצוע" - the longest label: two lines instead of "..." */
  #diaryView #siteLogPlanBtn .library-item-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; text-align: center; }
  /* its artwork fills its square more than the others' - matched */
  #diaryView #siteLogPlanBtn .library-item-thumb img { transform: scale(0.84); }
  /* the activity editor is taller than a small phone - it scrolls */
  #workPlanEditOverlay .modal-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  /* linking: the long-pressed bar blinks until the second activity is tapped */
  .wp-bar.wp-linking { animation: wp-blink 0.7s ease-in-out infinite; outline: 2px solid #e0703a; outline-offset: 1px; }
  @keyframes wp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  .wp-bar { touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .wp-link-pair { margin: 0; font-weight: 700; text-align: center; }
  .wp-link-types { display: flex; flex-direction: column; gap: 6px; }
  .wp-link-type { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 8px; padding: 7px 9px; background: #fff; cursor: pointer; }
  .wp-link-type input { margin-top: 3px; }
  .wp-link-type span { display: flex; flex-direction: column; }
  .wp-link-type small { color: var(--ink-muted); font-size: 0.78rem; }
  .wp-link-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.82rem; }
  #wpLinksList[hidden] { display: none; }
  /* the % sits on the green done part: white, with a soft shadow for the sand part */
  .wp-prog .wp-bar-text { color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.6); }
  /* The bar in two layers: top third light - who carries it out and the
     dates; lower two thirds - the status colour, done part, % done. */
  .wp-row { min-height: 46px; }
  .wp-head-row { min-height: 28px; }
  .wp-bar { top: 6px; height: 34px; padding: 1px; flex-direction: column; align-items: stretch; gap: 0; }
  .wp-bar-top { flex: 0 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 0 3px; background: #fdfaf2; border-radius: 4px 4px 0 0; color: #000; font-size: 0.56rem; line-height: 11px; font-weight: 700; overflow: hidden; }
  .wp-bar-top .wp-bar-by { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wp-bar-date { flex: none; direction: ltr; font-weight: 600; color: #333; font-size: 0.52rem; }
  .wp-bar-main { position: relative; flex: 1; display: flex; align-items: center; gap: 4px; padding: 0 4px; overflow: hidden; border-radius: 0 0 4px 4px; }
  .wp-bar-text { flex-shrink: 0; position: relative; }
  .wp-bar-name { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Sketch pad (src/app/14c-sketch.js) */
  .sketch-btn { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 1px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); cursor: pointer; z-index: 1; }
  .sketch-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .sketch-view { position: fixed; inset: 0; z-index: 39; background: var(--paper); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
  .sketch-view[hidden] { display: none; }
  .sketch-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-shrink: 0; }
  .sketch-title { flex: 1; text-align: center; font-weight: 700; font-family: "Rubik", "Assistant", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sk-head-btn { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: inherit; font-weight: 700; cursor: pointer; }
  .sk-head-btn.sk-save { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .sketch-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .sketch-stage canvas { display: block; touch-action: none; }
  .sketch-len-tip { position: absolute; background: #2e4fb8; color: #fff; font-weight: 700; font-size: 0.8rem; padding: 2px 7px; border-radius: 6px; pointer-events: none; }
  .sketch-len-tip[hidden] { display: none; }
  .sketch-scale-chip { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.92); border: 1px solid #9cc3ea; color: #2e4fb8; border-radius: 14px; padding: 3px 10px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
  .sketch-shapes-menu { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; box-shadow: 0 6px 20px var(--shadow); width: max-content; max-width: 92%; }
  .sketch-shapes-menu[hidden] { display: none; }
  /* marking an area to save / share: the tools step aside for the bar */
  .sketch-area-bar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px; box-shadow: 0 6px 20px var(--shadow); font-size: 0.85rem; font-weight: 700; text-align: center; }
  .sketch-area-bar[hidden] { display: none; }
  .sketch-area-btns { display: flex; gap: 10px; }
  .sketch-title { cursor: pointer; }
  .sk-list-rows { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
  .sk-list-row { display: flex; align-items: stretch; gap: 4px; }
  .sk-list-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; border: 1px solid var(--rule); background: var(--paper); border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; color: var(--ink); }
  .sk-list-row.on .sk-list-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .sk-list-open small { color: var(--ink-muted); font-size: 0.75rem; }
  .sk-list-btn { flex: none; width: 40px; border: 1px solid var(--rule); background: var(--paper); border-radius: 10px; font-size: 1rem; cursor: pointer; }
  /* עוזר ITASK - a chat with the app (opened from the home-screen widget) */
  /* תמונות מהשטח: the day's site photos (diary) */
  .pdf-doc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
  .pdf-doc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
  .diary-photos-weather { text-align: center; font-weight: 700; padding: 4px 12px 8px; color: var(--ink); }
  .diary-photos-weather[hidden] { display: none; }
  .diary-photos-actions { display: flex; justify-content: center; gap: 10px; padding: 0 12px 10px; }
  .diary-photos-actions[hidden] { display: none; }
  .diary-photos-grid .library-item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
  .diary-photos-grid .library-item-name { font-size: 0.72rem; }
  .morning-time-row input { font: inherit; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 6px; }
  .float-allow-btn { margin-top: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; }
  .float-allow-btn[hidden] { display: none; }
  /* בקרה תקציבית (src/app/11c-budget.js) */
  .library-item[hidden] { display: none; }
  .budget-view { display: flex; flex-direction: column; }
  .budget-view[hidden] { display: none; }
  .budget-body { flex: 1; overflow-y: auto; padding: 12px; }
  .budget-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .budget-card { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; }
  .budget-card small { color: var(--ink-muted); font-size: 0.75rem; }
  .budget-card b { font-size: 1.05rem; }
  .budget-card.over b { color: var(--danger); }
  .budget-card.good b { color: var(--plan-green); }
  .budget-note { margin: 6px 0 10px; font-size: 0.75rem; color: var(--ink-muted); text-align: center; }
  .budget-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
  .budget-tabs button { flex: 1; min-width: 0; border: 1px solid var(--rule); background: var(--paper); border-radius: 10px; padding: 8px 4px; font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--ink); }
  .budget-tabs button.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 700; }
  .budget-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .budget-actions button { border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; }
  .budget-actions button.primary { background: var(--accent); color: var(--accent-contrast); }
  .budget-chapter { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 6px 10px; margin-bottom: 10px; }
  .budget-chapter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0 6px; border-bottom: 1px solid var(--rule); }
  .budget-chapter-head b { color: var(--accent); }
  .budget-chapter-head small { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; }
  .budget-chapter-head small.over { color: var(--danger); font-weight: 700; }
  .budget-item, .budget-expense { padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
  .budget-item:last-child { border-bottom: none; }
  .budget-expense { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
  .budget-item-top { display: flex; gap: 8px; align-items: baseline; }
  .budget-code { color: var(--ink-muted); font-size: 0.8rem; flex-shrink: 0; direction: ltr; }
  .budget-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.92rem; }
  .budget-amount { flex-shrink: 0; }
  .budget-item-nums { color: var(--ink-muted); font-size: 0.75rem; }
  .budget-item-bars { display: flex; flex-direction: column; gap: 3px; }
  .budget-bar-row { display: flex; align-items: center; gap: 8px; }
  .budget-bar-row small { width: 105px; flex-shrink: 0; font-size: 0.72rem; color: var(--ink-muted); }
  .budget-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--paper-alt); overflow: hidden; }
  .budget-bar-fill { height: 100%; }
  .budget-bar.done .budget-bar-fill { background: var(--plan-green); }
  .budget-bar.used .budget-bar-fill { background: var(--accent); }
  .budget-bar.used.over .budget-bar-fill { background: var(--danger); }
  .budget-item.over .budget-name { color: var(--danger); }
  .budget-warn { color: var(--danger); font-size: 0.78rem; font-weight: 700; }
  .sub-back { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 0.9rem; padding: 4px 0 8px; cursor: pointer; }
  .sub-edit { border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 0.78rem; cursor: pointer; flex-shrink: 0; }
  .sub-term { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.88rem; }
  .sub-term small { color: var(--ink-muted); }
  .sub-approved { color: var(--plan-green); font-size: 0.78rem; font-weight: 700; }
  .sub-bill-head { margin-bottom: 8px; flex-wrap: wrap; }
  .sub-bill-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .sub-bill-line { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
  .sub-bill-inputs { display: flex; gap: 8px; align-items: flex-end; }
  .sub-bill-inputs label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .sub-bill-inputs small { font-size: 0.7rem; color: var(--ink-muted); }
  .sub-bill-inputs input { width: 100%; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 8px; padding: 6px; font: inherit; }
  .sub-bill-inputs input:disabled { background: var(--paper-alt); color: var(--ink); }
  .sub-bill-cum { flex-shrink: 0; min-width: 80px; text-align: left; padding-bottom: 6px; }
  .sub-bill-totals { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 8px 12px; margin-bottom: 10px; }
  .sub-total-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.9rem; }
  .sub-total-line.final { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 6px; font-size: 1.05rem; }
  .sub-total-line.final b { color: var(--plan-green); }
  .budget-cat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
  .budget-cat:last-child { border-bottom: none; }
  .budget-cat .budget-item-nums { flex-basis: 100%; }
  .budget-cat.over .budget-item-nums { color: var(--danger); font-weight: 700; }
  .budget-reports-btn { display: block; width: 100%; margin: 0 0 10px; border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 10px; padding: 9px; font: inherit; font-weight: 700; cursor: pointer; }
  .br-kinds { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
  .br-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .br-dates { display: flex; gap: 6px; }
  .br-dates input { flex: 1; min-width: 0; }
  #brTypesRow[hidden], #brGroupRow[hidden], .br-dates[hidden], #brPeriod[hidden], label[hidden] { display: none; }
  .pdf-doc-table tr.br-total td { font-weight: 800; border-top: 2px solid #333; }
  .budget-reports-row { display: flex; gap: 8px; margin-bottom: 10px; }
  .budget-reports-row .budget-reports-btn { margin: 0; flex: 1; }
  /* ניתוח רווח והפסד (src/app/11g-pnl-analysis.js) */
  .pnl-title { margin: 0 0 2px; font-size: 1.1rem; color: var(--accent); }
  .pnl-section { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 10px 12px; margin-bottom: 10px; }
  .pnl-section h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--ink); }
  .pnl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pnl-tile { border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
  .pnl-tile small { color: var(--ink-muted); font-size: 0.75rem; }
  .pnl-tile b { font-size: 1.15rem; }
  .pnl-tile span { color: var(--ink-muted); font-size: 0.75rem; }
  .pnl-tile.bad b { color: var(--danger); }
  .pnl-insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .pnl-insights li { display: flex; gap: 8px; font-size: 0.88rem; line-height: 1.4; }
  .pnl-insights li span { flex-shrink: 0; width: 18px; text-align: center; font-weight: 800; }
  .pnl-insights li.good span { color: var(--plan-green); }
  .pnl-insights li.bad span { color: var(--danger); }
  .pnl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--ink); margin-bottom: 6px; }
  .pnl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
  .pnl-section svg { display: block; overflow: visible; }
  .pnl-ring { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
  .pnl-ring svg { flex-shrink: 0; }
  .pnl-ring-legend { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; }
  .pnl-ring-legend div { display: flex; align-items: center; gap: 6px; }
  .pnl-ring-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
  .pnl-ring-legend span { flex: 1; min-width: 0; }
  .pnl-ring-legend b { font-weight: 700; }
  .pnl-ring-legend small { width: 40px; text-align: left; color: var(--ink-muted); }
  .pnl-ring-total { margin: 0 0 6px; font-size: 0.85rem; color: var(--ink-muted); }
  .pnl-ring-total b { color: var(--ink); }
  .pnl-ring-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--danger); }
  .pnl-readout { margin: 6px 0 0; font-size: 0.8rem; color: var(--ink-muted); min-height: 1.2em; }
  .pnl-hit { cursor: pointer; }
  .budget-form-fields { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
  /* הצוות (src/app/10b-team.js) */
  .team-view { display: flex; flex-direction: column; }
  .team-view[hidden] { display: none; }
  .team-body { flex: 1; overflow-y: auto; padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
  .team-section { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
  .team-section h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--accent); }
  .team-hint { margin: 0; font-size: 0.78rem; color: var(--ink-muted); }
  .team-list { display: flex; flex-direction: column; }
  .team-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .team-row:last-child { border-bottom: none; }
  .team-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .team-who b { font-size: 0.95rem; }
  .team-who small { color: var(--ink-muted); font-size: 0.78rem; direction: ltr; text-align: right; }
  .team-row button { flex-shrink: 0; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 0.75rem; cursor: pointer; }
  .team-row button.team-del { width: 28px; height: 28px; padding: 0; border-radius: 50%; color: var(--ink-muted); }
  .team-empty { margin: 4px 0; color: var(--ink-muted); font-size: 0.85rem; }
  .team-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .team-add > button { border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; }
  .team-type { display: flex; gap: 6px; width: 100%; }
  .team-type input { flex: 1; min-width: 0; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; font: inherit; }
  .team-type button { border: none; background: var(--accent); color: var(--accent-contrast); border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
  .team-error { margin: 0; color: var(--danger); font-size: 0.85rem; }
  .team-my-roles { margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-muted); white-space: pre-line; }
  /* דוח בוקר (src/app/14f-morning-report.js) */
  .morning-view { display: flex; flex-direction: column; }
  .morning-view[hidden] { display: none; }
  .morning-body { flex: 1; overflow-y: auto; padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
  .morning-section { border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
  .morning-section-title { margin: 0 0 2px; font-size: 1rem; font-weight: 800; color: var(--accent); }
  .morning-attention { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .morning-attention li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; line-height: 1.35; }
  .morning-attention small { display: block; color: var(--ink-muted); font-size: 0.78rem; }
  .morning-att-icon { flex-shrink: 0; width: 20px; text-align: center; }
  .morning-ok { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
  .morning-project { margin-top: 6px; font-weight: 800; font-size: 0.85rem; color: var(--ink-muted); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
  .morning-task { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
  .morning-mark { width: 30px; height: 28px; padding: 4px 5px; border: none; background: transparent; cursor: pointer; }
  .morning-task.done .morning-mark { opacity: 0.5; }
  .morning-task-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.92rem; }
  .morning-task-text small { color: var(--ink-muted); font-size: 0.75rem; }
  .morning-task.done .morning-task-text span { text-decoration: line-through; color: var(--ink-muted); }
  .morning-plan-row { padding: 4px 0; }
  /* the "+" under a project's last task, and the line it opens */
  .morning-add { align-self: flex-start; width: 30px; height: 28px; margin: 0; padding: 0; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; }
  .morning-add-form { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
  .morning-add-input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; font: inherit; font-size: 0.92rem; background: var(--paper, #fff); color: inherit; }
  .morning-add-ok { width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 1rem; cursor: pointer; }
  .morning-more { align-self: center; margin-top: 4px; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
  /* the 🎤 by the new-task field, while it listens */
  .add-row button.add-btn.voice-btn.listening { color: #d32f2f; animation: voice-listen 1s infinite; }
  @keyframes voice-listen { 50% { transform: scale(1.2); } }
  /* a toast with ↶ ביטול (a voice command just carried out) */
  .undo-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 61; max-width: 92vw; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); font-size: 0.85rem; padding: 8px 10px 8px 14px; border-radius: 10px; box-shadow: 0 6px 16px var(--shadow); }
  .undo-toast[hidden] { display: none; }
  .undo-toast button { flex-shrink: 0; border: none; background: transparent; color: #ffd27a; font: inherit; font-weight: 800; cursor: pointer; padding: 4px 6px; }
  .sk-lib-list { max-height: 55vh; overflow-y: auto; }
  .sk-lib-folder { font-size: 0.8rem; color: var(--ink-muted); padding: 10px 4px; text-align: center; }
  .sk-lib-back { font-weight: 800; color: var(--accent) !important; }
  .sk-lib-dir { font-weight: 700; }
  .sketch-view.sk-cropping .sketch-tools, .sketch-view.sk-cropping .sketch-scale-chip, .sketch-view.sk-cropping .sketch-head .sk-mini, .sketch-view.sk-cropping .sketch-head .sk-head-btn { visibility: hidden; }
  .sketch-pick-menu { position: absolute; bottom: 6px; left: 8px; right: 8px; max-height: 70%; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; box-shadow: 0 6px 20px var(--shadow); }
  .sketch-pick-menu[hidden] { display: none; }
  #sketchFillMenu { display: block; }
  #sketchFillMenu[hidden] { display: none; }
  .sk-pick-title { margin: 0 0 6px; font-size: 0.8rem; color: var(--muted, #666); text-align: center; }
  .sk-fill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .sk-obj-pick, .sk-fill-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--rule); background: #fff; color: #222; border-radius: 10px; padding: 5px 2px; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; line-height: 1.15; text-align: center; }
  .sk-obj-pick canvas { width: 44px; height: 44px; }
  .sk-view-switch { grid-column: 1 / -1; display: flex; justify-content: center; gap: 0; }
  .sk-view-switch button { flex: 1; max-width: 140px; height: 32px; border: 1px solid var(--accent); background: var(--paper); color: var(--accent); font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
  .sk-view-switch button:first-child { border-radius: 0 8px 8px 0; }
  .sk-view-switch button:last-child { border-radius: 8px 0 0 8px; }
  .sk-view-switch button.on { background: var(--accent); color: var(--accent-contrast); }
  .sk-fill-pick canvas { width: 56px; height: 40px; border-radius: 6px; border: 1px solid #ccc; }
  .sk-fill-pick.on { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sk-fill-colors { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 2px; font-size: 0.8rem; font-weight: 700; }
  .sk-fill-color { width: 34px; height: 34px; border-radius: 8px; border: 2px solid #fff; background: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: 0 0 0 1px #bbb; cursor: pointer; }
  .sk-fill-color.on { box-shadow: 0 0 0 2px var(--accent); }
  .sketch-shapes-menu .sk-tool { width: auto; padding: 0 10px; font-size: 0.85rem; }
  .sketch-tools { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .sk-row { display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap; }
  .sk-tool, .sk-tool-more, .sk-mini { min-width: 36px; height: 36px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 4px; }
  .sk-tool.on, .sk-tool-more.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .sketch-tools .sk-row:first-child { gap: 3px; }
  .sketch-tools .sk-row:first-child > button { min-width: 33px; padding: 0 2px; }
  .sk-mini.on { background: #dcebf9; border-color: #9cc3ea; color: #2e4fb8; }
  .sk-mini:disabled { opacity: 0.35; }
  .sk-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; padding: 0; }
  .sk-color.on { box-shadow: 0 0 0 2px var(--accent); }
  .sk-width { width: 32px; height: 30px; border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 6px; }
  .sk-width i { display: block; width: 100%; background: var(--ink); border-radius: 4px; }
  .sk-width.on { border-color: var(--accent); background: #eaf1f9; }
  .sk-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 2px; }
  .sk-scale-row { display: flex; align-items: center; gap: 6px; }
  .sk-scale-row input { width: 80px; }
  /* the second toolbar row fits one line on a narrow phone */
  .sketch-tools .sk-row:last-child { gap: 4px; }
  .sketch-tools .sk-row:last-child .sk-mini { min-width: 32px; height: 32px; }
  .sk-color { width: 24px; height: 24px; }
  .sk-width { width: 28px; height: 28px; padding: 0 5px; }
  .sk-sep { margin: 0; }
  /* the sketch icon: 3mm (~11px) larger each way, no box, floating on a soft shadow,
     and 3mm higher than the middle of the project-name row */
  .sketch-btn { transform: translateY(calc(-50% - 11px)); width: 47px; height: 47px; padding: 0; border: none; background: transparent; border-radius: 0; filter: drop-shadow(0 3px 4px rgba(44, 42, 36, 0.35)); }
  /* what a tapped notification pointed at, picked out for a moment */
  .link-flash { animation: link-flash 1.3s ease-out 2; }
  @keyframes link-flash { 0%, 40% { box-shadow: 0 0 0 4px #ffd400, 0 0 14px 4px rgba(255,212,0,0.8); } 100% { box-shadow: none; } }
  .wp-undo-btn { font-size: 1.05rem; font-weight: 800; min-width: 38px; }
  .wp-undo-btn:disabled { opacity: 0.35; cursor: default; }
  /* the BOQ as a table (11c-budget.js): item no. + description fixed at the right, the rest scrolls */
  /* scrolls both ways inside itself, so the header row can stay on top while scrolling down;
     at its top / bottom the scroll carries on to the page (no overscroll-behavior: contain),
     and it's a little shorter than the screen so the page above can be reached */
  .boq-wrap { border: 1px solid var(--rule); border-radius: 10px; background: #fff; overflow: auto; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); margin-bottom: 6px; }
  .boq-table { border-collapse: separate; border-spacing: 0; font-size: 0.75rem; min-width: 960px; width: 100%; }
  .boq-table th, .boq-table td { padding: 6px; border-bottom: 1px solid #e6eef6; white-space: nowrap; text-align: left; background: #fff; }
  .boq-table th { background: #eef3f8; font-weight: 700; font-size: 0.7rem; text-align: center; }
  .boq-table .boq-code { position: sticky; right: 0; z-index: 2; width: 88px; min-width: 88px; max-width: 88px; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--ink-muted); direction: ltr; }
  .boq-table .boq-desc { position: sticky; right: 100px; z-index: 2; white-space: normal; min-width: 130px; max-width: 130px; text-align: right; border-left: 2px solid var(--rule); }
  .boq-table th.boq-code, .boq-table th.boq-desc { background: #eef3f8; z-index: 3; }
  .boq-table .boq-desc small { display: block; margin-top: 2px; font-size: 0.68rem; }
  .boq-table tr.budget-item { display: table-row; padding: 0; border: none; cursor: pointer; } /* (not the old list's .budget-item card) */
  .boq-table .boq-strong { font-weight: 700; }
  .boq-table tr.over td { color: var(--danger); }
  .boq-table tr.over .boq-desc span { font-weight: 700; }
  .boq-table tr.boq-ch td { background: #f4f0e4; font-weight: 800; color: var(--accent); }
  .boq-table tr.boq-sub td { background: #fafaf6; font-weight: 700; }
  .boq-table tr.boq-total td { background: var(--accent); color: var(--accent-contrast); font-weight: 800; border-bottom: none; }
  /* the actual (בפועל) columns: in red, beside their contract ones */
  .boq-table td.boq-actual, .boq-table th.boq-actual { color: #c62828; }
  .boq-table tr.boq-total td.boq-actual { color: #ffcdd2; }
  .boq-pct span:first-child { display: inline-block; min-width: 34px; }
  .boq-bar { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: var(--paper-alt); vertical-align: middle; margin-inline-start: 4px; overflow: hidden; }
  .boq-bar i { display: block; height: 100%; }
  .boq-bar.done i { background: var(--plan-green); }
  .boq-bar.used i { background: var(--accent); }
  .boq-bar.over i { background: var(--danger); }
  /* installing on a computer (src/app/00c-desktop-install.js) */
  .install-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; background: var(--accent); color: var(--accent-contrast); font-size: 0.9rem; box-shadow: 0 2px 10px var(--shadow); }
  .install-bar[hidden] { display: none; }
  .install-bar img { width: 28px; height: 28px; border-radius: 7px; }
  .install-bar #installBtn { border: none; background: #fff; color: var(--accent); font: inherit; font-weight: 800; border-radius: 8px; padding: 6px 16px; cursor: pointer; }
  .install-bar .install-off { border: none; background: transparent; color: var(--accent-contrast); font-size: 1rem; cursor: pointer; opacity: 0.8; }
  /* a computer's screen: the same app, as wide as the screen allows; the
     full screens (budget, plan, diary...) centred at the same width */
  @media (min-width: 900px) {
    .app { max-width: min(1280px, 100%); }
    .report-view { max-width: 1280px; margin: 0 auto; box-shadow: 0 0 0 1px var(--rule), 0 0 30px var(--shadow); }
    .boq-table { min-width: 0; }
  }
/* files dragged from the computer into an open library folder */
#libraryView.library-drop-here { outline: 3px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* עוזר ITASK (src/app/14h-site-assistant.js) - a chat like a WhatsApp contact */
.assistant-view { display: flex; flex-direction: column; }
.assistant-view[hidden] { display: none; }
.assistant-body { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #efeae2; }
.assistant-hello { align-self: center; max-width: 90%; background: #fff8d6; border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; color: #5b5233; text-align: center; line-height: 1.45; }
.assistant-msg { max-width: 82%; padding: 6px 10px 4px; border-radius: 10px; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 1px 1px #0001; white-space: pre-wrap; }
.assistant-msg.mine { align-self: flex-start; background: #d9fdd3; border-top-right-radius: 2px; }
.assistant-msg.theirs { align-self: flex-end; background: #fff; border-top-left-radius: 2px; }
.assistant-msg.error { background: #fde8e6; }
.assistant-msg.typing { color: var(--ink-muted); font-style: italic; }
.assistant-meta { font-size: 0.68rem; color: #8a8a8a; text-align: left; margin-top: 2px; }
.assistant-undo { margin-top: 4px; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 0; }
.assistant-form { display: flex; gap: 6px; align-items: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: #f0f0f0; }
.assistant-form input { flex: 1; min-width: 0; border: none; border-radius: 20px; padding: 10px 14px; font: inherit; background: #fff; }
.assistant-send, .assistant-mic { width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
.assistant-send { background: #3d5a3e; color: #fff; }
.assistant-mic { background: #fff; }
.assistant-mic.listening { background: #d32f2f; color: #fff; animation: voice-listen 1s infinite; }
/* the library's bin (07-library-files.js) */
.library-bin-tile .library-item-thumb { filter: grayscale(0.3); }
.library-bin-note { margin: 0 0 8px; font-size: 0.85rem; color: var(--ink-muted); }
.library-bin-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.library-bin-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; }
.library-bin-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.library-bin-info small { color: var(--ink-muted); font-size: 0.78rem; }
/* משימות דחופות (src/app/14i-urgent-tasks.js): the red dot by the app's name */
.notebook-app-name { display: inline-flex; align-items: center; direction: ltr; }
.notebook-app-name .urgent-dot-btn { margin-left: 6px; }
.urgent-dot-btn { pointer-events: auto; position: relative; width: 14px; height: 14px; padding: 0; border: none; border-radius: 50%; background: #d9cfc0; cursor: pointer; flex-shrink: 0; }
.urgent-dot-btn.has-urgent { width: 18px; height: 18px; background: #d32f2f; box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.18); }
.urgent-count { color: #fff; font-size: 0.65rem; font-weight: 800; line-height: 18px; display: block; text-align: center; letter-spacing: 0; }
.urgent-row { gap: 8px; }
.urgent-task-text { flex: 1; border: none; background: transparent; text-align: start; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.urgent-unmark { flex-shrink: 0; width: 14px; height: 14px; padding: 0; border: none; border-radius: 50%; background: #d32f2f; cursor: pointer; }
.urgent-row.done .urgent-unmark { opacity: 0.4; }
.share-files-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 30vh; overflow-y: auto; font-size: 0.9rem; }
.share-files-list li { padding: 4px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); overflow-wrap: anywhere; }
.boq-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.boq-search input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; font: inherit; font-size: 0.9rem; background: #fff; }
.boq-search-count { font-size: 0.8rem; color: var(--ink-muted); white-space: nowrap; }
.boq-table tr[hidden], .boq-table tbody[hidden] { display: none; }
.boq-table tr.boq-discount td { background: #fff7e6; color: #9a5b00; font-weight: 700; cursor: pointer; }
.boq-table .boq-before-discount { display: block; font-size: 0.65rem; color: var(--ink-muted); text-decoration: line-through; }
.boq-discounts-hint { margin: -6px 0 10px; font-size: 0.78rem; color: var(--ink-muted); text-align: center; }
.boq-discounts-list .boq-discount-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.boq-discounts-list .boq-discount-btn small { color: var(--ink-muted); font-size: 0.78rem; }
.sheet-title-logo { cursor: pointer; }
.sheet-title-logo-empty { width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 1.5px dashed var(--ink-muted); border-radius: 4px; background: transparent; color: var(--ink-muted); font-size: 0.85rem; line-height: 1; cursor: pointer; }
.sheet-title-logo-empty[hidden] { display: none; }
.logo-picker-add .logo-picker-thumb { font-size: 1.6rem; color: var(--accent); }
.budget-checks { display: flex; flex-direction: column; gap: 2px; max-height: 32vh; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.budget-check { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 0.88rem; cursor: pointer; }
.budget-check input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.budget-check-all { font-weight: 700; border-bottom: 1px solid var(--rule); padding-bottom: 7px; margin-bottom: 2px; }
/* the BOQ's header row (item no., prices...) stays in view while scrolling down */
.boq-table thead th { position: sticky; top: 0; z-index: 4; box-shadow: inset 0 -1px 0 var(--rule); }
.boq-table thead th.boq-code, .boq-table thead th.boq-desc { z-index: 5; }