/* Shell rules the mockup's stylesheet does not cover.
 *
 * app.css is lifted verbatim from the approved mockup, which was a static page:
 * it had no signed-out state and no editable forms. Rather than edit that file
 * and lose the guarantee that it matches what was signed off, everything the
 * real application needs on top of it lives here.
 */

/* The mockup sets display on .top, .rail and .page directly, which outranks the
 * user-agent's [hidden]{display:none}. Without this the chrome is painted over
 * the login card while signed out. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ forms -- */
.fld { display: grid; gap: 6px; }
.fld > span {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mute);
}
.fld input, .fld select, .fld textarea,
.filterbox {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); width: 100%;
}
.filterbox { width: auto; padding: 7px 11px; min-width: 240px; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .filterbox:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(109, 63, 160, .12);
}
.btn:disabled { opacity: .55; cursor: default; }

/* The search box in the top bar is a real input in the application; the mockup
   drew it as static text. Keep the chrome, drop the input's own. */
.search input {
  /* Explicit resets rather than `all: unset`, which strips the input's
     intrinsic sizing along with its chrome and collapses it to 0x0 — invisible
     and, more quietly, impossible to focus. */
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: none; outline: none; padding: 0; margin: 0;
  font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink);
}
.search input::placeholder { color: #8A94A6; }
.search:focus-within { border-color: var(--brand); background: #fff; }

/* --------------------------------------------------------------- the shell -- */
/* The mockup kept every screen in the DOM and toggled .on; the application has
   one view element that is replaced, so it is always the visible one. */
main { display: block; }
.page { display: block; }

.av { cursor: pointer; }
.ico { cursor: default; }

/* ------------------------------------------------------------ two columns -- */
/* A sidebar next to a main panel, which becomes one column when there is not
   room for both. Without the collapse the detail list gets squeezed to about
   70px and addresses wrap one word per line. */
.split2 {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
}
@media (max-width: 1000px) {
  .split2 { grid-template-columns: minmax(0, 1fr); }
  /* The metric strip is four across on a wide screen and two on a narrow one;
     four columns of 100px turn every date into two lines. */
  .metrics, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Two across, not one. Four numbers stacked is 340px of an 844px screen
     spent before any of the work appears, and they are perfectly legible at
     half width. */
  .metrics, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin: 0 0 10px; }
}

/* The mockup dropped the search box below 1020px because its top bar also
   carried a "viewing as" role toggle, a New button and three icons. The real
   bar carries one button and two icons, so search fits — and it is the primary
   way into 12,228 companies, which makes hiding it the wrong trade. Let it
   shrink instead. */
@media (max-width: 1020px) {
  .search { display: flex; max-width: none; }
}
@media (max-width: 700px) {
  .search .kbd { display: none; }
}

/* ------------------------------------------------------------- the week --- */
/* The mockup drew a calendar with .week, but as a fixed seven-column grid with
   hour rows. Real activity data clusters on a few days and is mostly untimed,
   so this is seven columns of a list rather than a timetable. */
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday { border-right: 1px solid var(--line-2); min-height: 220px; }
.weekday:last-child { border-right: 0; }
.weekday-today { background: #FAFBFD; }
.wd-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 11px; border-bottom: 1px solid var(--line-2);
}
.wd-head b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
             color: var(--mute); }
.wd-head > span { font-size: 15px; font-variant-numeric: tabular-nums; }
.wd-n { margin-left: auto; background: var(--line-2); border-radius: 10px;
        padding: 1px 7px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.weekday-today .wd-head > span { color: var(--brand); font-weight: 700; }
.wd-body { padding: 8px; display: grid; gap: 6px; align-content: start; }
.wd-item {
  display: grid; gap: 1px; padding: 7px 8px; border-radius: 7px; cursor: pointer;
  background: #F4F7FB; border: 1px solid var(--line);
}
.wd-item:hover { border-color: var(--brand); }
.wd-done { opacity: .5; }
.wd-time { font-size: 10.5px; font-weight: 700; color: var(--mute);
           font-variant-numeric: tabular-nums; }
.wd-sub { font-size: 12px; font-weight: 600; line-height: 1.3;
          overflow-wrap: anywhere; }
.wd-co { font-size: 10.5px; color: var(--mute); overflow-wrap: anywhere; }
.wd-empty { padding: 14px 11px; color: #C7CEDA; font-size: 12px; }

/* Out of the person's own calendar rather than out of the CRM. The two sit
   side by side on this screen, so the difference has to read at a glance and
   without a legend: work the CRM knows about is solid, the diary is outlined.
   Quieter on purpose — it is context, not a to-do list. */
.wd-diary { background: transparent; border-style: dashed; cursor: default; }
.wd-diary:hover { border-color: var(--line); }
.wd-diary.wd-linked { cursor: pointer; }
.wd-diary.wd-linked:hover { border-color: var(--brand); }
.wd-diary .wd-sub { font-weight: 500; }
/* Declined or cancelled. Shown rather than hidden — that a meeting was called
   off is itself worth knowing when you are looking at the week. */
.wd-off .wd-sub { text-decoration: line-through; }
.wd-off { opacity: .55; }

@media (max-width: 900px) {
  /* Seven columns of 60px is unreadable; stack into a day list instead. */
  .weekgrid { grid-template-columns: minmax(0, 1fr); }
  .weekday { border-right: 0; border-bottom: 1px solid var(--line-2);
             min-height: 0; }
  .wd-empty { display: none; }
}

/* The mockup's record card had five tabs; the real one has seven and will grow.
   Scroll the strip rather than letting it wrap into two rows, which pushes the
   content down and makes the underline read as a border. */
.tabs {
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 0; }
.tabs button { white-space: nowrap; flex: none; }

/* ------------------------------------------------------------- messages --- */
/* Nothing in this application uses window.alert or window.confirm: they stop
   the whole page, which is bad for a person and fatal for anything driving the
   browser. */
#toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  max-width: min(420px, calc(100vw - 36px));
}
.toast {
  background: var(--ink); color: #fff; border-radius: 9px;
  padding: 11px 15px; font-size: 13px; line-height: 1.5; cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(20, 30, 48, .6);
  transition: opacity .2s ease;
  animation: toast-in .18s ease;
}
.toast-ok   { background: var(--ok); }
.toast-warn { background: var(--warn); }
.toast-no   { background: var(--no); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }


/* --------------------------------------------------------- the line form -- */
/* Five controls across is right on a desktop and unusable at 570px, where the
   quantity box ends up about eight pixels wide. */
.lineform {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: minmax(150px, 1.4fr) minmax(70px, .5fr)
                         minmax(150px, 1.2fr) minmax(70px, .4fr) auto;
}
@media (max-width: 780px) {
  .lineform { grid-template-columns: 1fr 1fr; }
  .lineform > :last-child { grid-column: 1 / -1; }
}

/* -------------------------------------------------- the month calendar --- */
.weekhead { border-bottom: 1px solid var(--line-2); }
.wd-name {
  padding: 8px 11px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
  border-right: 1px solid var(--line-2);
}
.wd-name:last-child { border-right: 0; }
/* Six rows of whole weeks, so every row is the same height whatever the month. */
.weekday-compact { min-height: 104px; border-bottom: 1px solid var(--line-2); }
.weekday-compact .wd-head { padding: 6px 8px; border-bottom: 0; }
.weekday-compact .wd-body { padding: 0 6px 6px; gap: 3px; }
.weekday-compact .wd-item { padding: 3px 6px; border-radius: 5px; }
.weekday-compact .wd-time { display: inline; margin-right: 5px; }
.weekday-compact .wd-sub { display: inline; font-size: 11px; }
/* Days either side of the month are shown, not blanked: an appointment on the
   31st of last month is still this week's problem. */
.weekday-outside { background: #FAFBFD; }
.weekday-outside .wd-head > span { color: #B6BECC; }
.wd-more {
  font-size: 10.5px; color: var(--mute); padding: 1px 6px; cursor: default;
}
@media (max-width: 900px) {
  /* The week view stacks into a day list, which reads fine. A month cannot —
     stacking it gives forty-two rows and stops being a month — so it keeps its
     seven columns and scrolls sideways inside its own container instead. */
  .monthscroll { overflow-x: auto; }
  .monthscroll > * { min-width: 640px; }
  .monthscroll .weekgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .monthscroll .weekday { border-right: 1px solid var(--line-2); }
}


/* ============================================================== on a phone ==
 *
 * Not a narrower desktop. Three things change shape rather than shrinking.
 *
 * THE RAIL GOES OFF-CANVAS. A 188px fixed sidebar on a 390px screen leaves
 * about two hundred pixels for the work, which is not a smaller version of the
 * product. It slides in over the page from a menu button and closes on
 * navigation.
 *
 * THE DRAWER BECOMES A BOTTOM SHEET. A side sheet at 94vw is a full-screen
 * panel wearing a 6% margin — it reads as a mistake, and it puts its close
 * button in the far corner, which is the hardest place on a phone to reach.
 * Coming up from the bottom is both the convention and the thing a thumb can
 * actually work.
 *
 * THE TOGGLES COME BACK. `.who` was hidden below 860px, which quietly removed
 * Week/Month from the calendar, Mine/Everyone from targets, the waiting filter
 * from the inbox and the on-match choice from imports. That is not
 * decluttering, it is taking the controls away. They scroll sideways instead.
 */
.menubtn{
  display:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; width:38px; height:38px; font-size:17px; cursor:pointer;
  align-items:center; justify-content:center; flex:none;
}
.railscrim{display:none}

@media (max-width:900px){
  .menubtn{display:inline-flex}

  .rail{
    transform:translateX(-100%);
    transition:transform .2s ease;
    width:min(272px,84vw);
    box-shadow:14px 0 40px -20px rgba(20,30,48,.55);
  }
  body.nav-open .rail{transform:none}
  body.nav-open .railscrim{
    display:block; position:fixed; inset:0; z-index:39;
    background:rgba(20,30,48,.42);
  }
  /* Bigger targets: 8px of padding is a 30px row, and a thumb is nearer 44. */
  .rail a.item{padding:11px 16px;font-size:14px}
  .grp{padding:14px 16px 5px}

  .top{left:0;padding:0 10px;gap:8px}
  /* Search is how people find anything in a CRM; hiding it on the device most
     likely to be used standing in a warehouse was the wrong trade. But it only
     works if it has room — squeezed between four other controls it renders as
     a box containing the word "Sea". So the bar keeps the menu, search, New
     and the avatar, and sheds the two things that are reachable elsewhere:
     Import is in the navigation, and sign-out is on the avatar. */
  .search{display:flex;flex:1;min-width:0;max-width:none;padding:7px 10px}
  .kbd{display:none}
  #importbtn{display:none}
  #whoami{display:none}
  .page{margin-left:0;padding:70px 14px 72px;max-width:none}

  /* The toggle groups, scrollable rather than absent. */
  .who{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .who::-webkit-scrollbar{height:0}
  .who button{white-space:nowrap}

  .listhead{padding:11px 13px;gap:8px}
  .chiprow{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    padding-bottom:9px}
  .chiprow::-webkit-scrollbar{height:0}
  .chip{white-space:nowrap}

  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{border-bottom:1px solid var(--line-2)}
  .metric:nth-child(2n){border-right:0}
  /* Two-up blocks collapse. Views used to write
     `style="grid-template-columns:1fr 1fr"` inline, which no media query can
     override — that is exactly how the Insight screen ended up 383px wider
     than the phone it was on. `.two` exists so a view can ask for two columns
     without also deciding what happens on a small screen. */
  .two{grid-template-columns:minmax(0,1fr) !important}

  /* The record header puts the name beside its buttons. At 390px that leaves
     about 150px for a name like "The Spencer Trust Head Office", which wraps
     to three lines next to two buttons. The name gets the row. */
  .rechead{flex-direction:column;gap:11px}
  .rechead > div:last-child{width:100%}
  .rechead h1{font-size:20px}
  .ph h1{font-size:19px}

  /* Tabs on a record card: many of them, sideways rather than stacked. */
  .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{height:0}
  .tabs button{white-space:nowrap;padding:10px 12px}

  /* A bottom sheet. */
  .drawer{
    top:auto; right:0; left:0; bottom:0; width:100%;
    max-height:92vh; border-radius:16px 16px 0 0;
    transform:translateY(100%);
    box-shadow:0 -18px 46px -22px rgba(20,30,48,.5);
  }
  .drawer.on{transform:none}
  .dh{padding:15px 16px 13px;position:relative}
  /* The grab handle. It is the affordance that says this came up from the
     bottom and goes back down, without a word of explanation. */
  .dh::before{
    content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:2px; background:var(--line);
  }
  .dbody{padding:15px 16px}
  .dfoot{
    padding:12px 16px;
    /* Clear of the home indicator on a phone that has one. */
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    flex-wrap:wrap;
  }
  /* Most callers wrap their buttons in a span, so stretching only .btn does
     nothing — the span is the flex child. Stretch whatever is directly in the
     footer, and the buttons inside it. */
  .dfoot > *{flex:1}
  .dfoot .btn, .dfoot button{flex:1;justify-content:center;min-height:42px}

  /* The New menu, which is anchored to a button near the right edge. */
  .newmenu{right:-4px;min-width:min(240px,80vw)}

  /* Inline min-widths are scattered through the views — a 280px URL box, a
     260px select. Each is reasonable on its own and together they push the
     page sideways on a 390px screen, so nothing is allowed to exceed its
     container regardless of what it asked for. */
  input,select,textarea,.filterbox{max-width:100%}
  .fld > input,.fld > select,.fld > textarea{width:100%}

  /* The journey diagram has a real minimum width — a flow chart squeezed to
     340px is not a flow chart. It scrolls sideways within the card instead of
     stretching the page. */
  .flow{min-width:0}
  .flowcard{min-width:0;max-width:100%}

  /* Anything laid out as two columns side by side. */
  .condrow{grid-template-columns:minmax(0,1fr)}
  .tplcard{flex-direction:column;align-items:stretch}
  .tplcard .btn{width:100%;justify-content:center}
}

@media (max-width:560px){
  .page{padding:66px 11px 76px}
  .card{border-radius:9px}
  /* Deliberately still two across. One per row was the first attempt and it
     was worse: four metrics at ~85px each is 340px of a 844px screen spent
     before any of the actual work appears. Two columns halves that and the
     numbers are still perfectly legible. */
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{padding:12px 13px}
  .metric .v{font-size:19px}
  /* Buttons in a row of controls: full width beats three cramped ones. */
  .listhead{flex-wrap:wrap}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* A phone in landscape, or a small tablet: the sheet must not become taller
   than the screen it is on. */
@media (max-width:900px) and (max-height:520px){
  .drawer{max-height:96vh}
  .dbody{padding:11px 16px}
}